/* Colors */
/* Background */
.bg-brand-color-1 {
    background-color: var(--brand-color-1);
}

.bg-brand-color-2 {
    background-color: var(--brand-color-2);
}

.bg-brand-color-3 {
    background-color: var(--brand-color-3);
}

.bg-brand-color-4 {
    background-color: var(--brand-color-4);
}

.bg-brand-color-5 {
    background-color: var(--brand-color-5);
}

.bg-brand-color-6 {
    background-color: var(--brand-color-6);
}

/* Text */
.txt-brand-color-1 {
    color: var(--brand-color-1);
}

.txt-brand-color-2 {
    color: var(--brand-color-2);
}

.txt-brand-color-3 {
    color: var(--brand-color-3);
}

.txt-brand-color-4 {
    color: var(--brand-color-4);
}

.txt-brand-color-5 {
    color: var(--brand-color-5);
}

.txt-brand-color-6 {
    color: var(--brand-color-6);
}

/* End Colors */
/* Shadows */
.shadow-1 {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.shadow-2 {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-3 {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.shadow-4 {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Opacity */
.opacity-1 {
    opacity: 0.1;
}

.opacity-2 {
    opacity: 0.2;
}

.opacity-3 {
    opacity: 0.3;
}

.opacity-4 {
    opacity: 0.4;
}

.opacity-5 {
    opacity: 0.5;
}

.opacity-6 {
    opacity: 0.6;
}

.opacity-7 {
    opacity: 0.7;
}

.opacity-8 {
    opacity: 0.8;
}

.opacity-9 {
    opacity: 0.9;
}

/* Margins */
.mar-t-0 {
    margin-top: 0px;
}

.mar-t-1 {
    margin-top: 10px;
}

.mar-t-2 {
    margin-top: 20px;
}

.mar-t-3 {
    margin-top: 30px;
}

.mar-t-4 {
    margin-top: 40px;
}

.mar-t-5 {
    margin-top: 50px;
}

.mar-t-6 {
    margin-top: 60px;
}

.mar-t-7 {
    margin-top: 70px;
}

.mar-t-8 {
    margin-top: 80px;
}

.mar-b-0 {
    margin-bottom: 0px;
}

.mar-b-1 {
    margin-bottom: 10px;
}

.mar-b-2 {
    margin-bottom: 20px;
}

.mar-b-3 {
    margin-bottom: 30px;
}

.mar-b-4 {
    margin-bottom: 40px;
}

.mar-b-5 {
    margin-bottom: 50px;
}

.mar-b-6 {
    margin-bottom: 60px;
}

.mar-b-7 {
    margin-bottom: 70px;
}

.mar-b-8 {
    margin-bottom: 80px;
}

/* Margin Fluid */
.mar-f-b-8-5 {
    margin-bottom: clamp(50px, calc(50px + ((1vw - 3.2px) * 2.6786)), 80px);
}

.mar-f-b-9-5 {
    margin-bottom: clamp(50px, calc(50px + ((1vw - 3.2px) * 3.5714)), 90px);
}

.mar-f-b-10-5 {
    margin-bottom: clamp(50px, calc(50px + ((1vw - 3.2px) * 4.4643)), 100px);
}

.mar-f-b-11-5 {
    margin-bottom: clamp(50px, calc(50px + ((1vw - 3.2px) * 5.3571)), 110px);
}

.mar-f-b-12-5 {
    margin-bottom: clamp(50px, calc(50px + ((1vw - 3.2px) * 6.25)), 120px);
}

.mar-f-b-13-5 {
    margin-bottom: clamp(50px, calc(50px + ((1vw - 3.2px) * 7.1429)), 130px);
}

.mar-f-b-14-5 {
    margin-bottom: clamp(50px, calc(50px + ((1vw - 3.2px) * 8.0357)), 140px);
}

.mar-f-b-15-5 {
    margin-bottom: clamp(50px, calc(50px + ((1vw - 3.2px) * 8.9286)), 150px);
}

.mar-inline-center {
    margin-inline: auto;
}

.mar-block-center {
    margin-block: auto;
}

/* Padding */
.pad-0 {
    padding: 0px;
}

.pad-1 {
    padding: 10px;
}

.pad-2 {
    padding: 20px;
}

.pad-3 {
    padding: 30px;
}

.pad-4 {
    padding: 40px;
}

.pad-5 {
    padding: 50px;
}

.pad-6 {
    padding: 60px;
}

.pad-7 {
    padding: 70px;
}

.pad-8 {
    padding: 80px;
}

/* Gap */
.gap-1 {
    gap: 10px;
}

.gap-2 {
    gap: 20px;
}

.gap-3 {
    gap: 30px;
}

.gap-4 {
    gap: 40px;
}

.gap-5 {
    gap: 50px;
}

.gap-6 {
    gap: 60px;
}

.gap-7 {
    gap: 70px;
}

.gap-8 {
    gap: 80px;
}

/* Gap Fluid */
.gap-f-01 {
    gap: 1%;
}

.gap-f-02 {
    gap: 2%;
}

.gap-f-03 {
    gap: 3%;
}

.gap-f-04 {
    gap: 4%;
}

.gap-f-05 {
    gap: 5%;
}

.gap-f-06 {
    gap: 6%;
}

.gap-f-07 {
    gap: 7%;
}

.gap-f-08 {
    gap: 8%;
}

/* height */
.vh-1 {
    height: 10vh;
}

.vh-2 {
    height: 20vh;
}

.vh-3 {
    height: 30vh;
}

.vh-4 {
    height: 40vh;
}

.vh-5 {
    height: 50vh;
}

.vh-6 {
    height: 60vh;
}

.vh-7 {
    height: 70vh;
}

.vh-8 {
    height: 80vh;
}

.vh-9 {
    height: 90vh;
}

.vh-10 {
    height: 100vh;
}

/* Max Width */
.max-w-10 {
    max-width: 100px;
}

.max-w-15 {
    max-width: 150px;
}

.max-w-20 {
    max-width: 200px;
}

.max-w-25 {
    max-width: 250px;
}

.max-w-30 {
    max-width: 300px;
}

.max-w-35 {
    max-width: 350px;
}

.max-w-40 {
    max-width: 400px;
}

.max-w-45 {
    max-width: 450px;
}

.max-w-50 {
    max-width: 500px;
}

.max-w-55 {
    max-width: 550px;
}

.max-w-60 {
    max-width: 600px;
}

.max-w-65 {
    max-width: 650px;
}

.max-w-70 {
    max-width: 700px;
}

.max-w-75 {
    max-width: 750px;
}

.max-w-80 {
    max-width: 800px;
}

.max-w-85 {
    max-width: 850px;
}

.max-w-90 {
    max-width: 900px;
}

.max-w-95 {
    max-width: 950px;
}

.max-w-100 {
    max-width: 1000px;
}

.max-w-105 {
    max-width: 1050px;
}

.max-w-110 {
    max-width: 1100px;
}

.max-w-115 {
    max-width: 1150px;
}

.max-w-120 {
    max-width: 1200px;
}

.max-w-fit {
    max-width: fit-content;
}

/* Position */
.pos-sticky-top-1 {
    position: sticky;
    z-index: 9;
    top: 10px;
}

.pos-sticky-top-2 {
    position: sticky;
    z-index: 9;
    top: 20px;
}

.pos-sticky-top-3 {
    position: sticky;
    z-index: 9;
    top: 30px;
}

.pos-relative {
    position: relative;
}

/* Flex Columns */
/* Flex Layouts */
.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-row-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-row-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Grid Layouts */
.grid-1 {
    grid-template-columns: var(--grid-1);
}

.grid-2 {
    grid-template-columns: var(--grid-2);
}

.grid-center {
    display: grid;
    place-content: center;
}