/*Colors*/
:root{
    --clr-primary-900: var(--clr-me-900);
    --clr-primary-500: var(--clr-me-500);

    /*Blacks*/
    --clr-k-100: #f7f7f7;
    --clr-k-200: #f2f2f2;
    --clr-k-300: #E6E6E6;
    --clr-k-400: #D2D2D2;
    --clr-k-500: #AFAFAF;
    --clr-k-600: #919191;
    --clr-k-700: #787878;
    --clr-k-800: #505050;
    --clr-k-900: #191919;

    /*Navy*/
    --clr-navy: #010D1F;
    

    /*Blues*/
    --clr-b-900: #1F7CEA; 
    --clr-b-800: #398BEC;
    --clr-b-700: #549BEF;
    --clr-b-600: #6EABF1;
    --clr-b-500: #88BAF3; 
    --clr-b-400: #A2CAF6;
    --clr-b-300: #BCD9F8;
    --clr-b-200: #D7E9FB;
    --clr-b-100: #F1F8FD;

    /*OC*/
    --clr-oc-900: #c0d677; 
    --clr-oc-500: #DFE8B2; 

    /*NRG*/
    --clr-nrg-900: #1F7CEA; 
    --clr-nrg-500: #88BAF3; 

    /*MICKE*/
    --clr-me-900: #1F4E63; 
    --clr-me-500: #59A3C0;

    /* Blue Gradients */
    --gradient-blue-45: linear-gradient(45deg, var(--clr-navy) 0%, var(--clr-b-900) 100%);
    --gradient-blue-90: linear-gradient(90deg, var(--clr-navy) 0%, var(--clr-b-900) 100%);

    /*Greens*/
    --clr-g-500: #23D17A;
    --clr-g-400: #33DD88;
    --clr-g-300: #60E5A2;
    --clr-g-200: #BBF4D7;
    --clr-g-100: #EEFCF5;

    /* Reds */
    --clr-r-500: #FC6A6A;
    --clr-r-400: #FF8C8C;
    --clr-r-300: #FFB4B4;
    --clr-r-200: #FFCECE;
    --clr-r-100: #FFF7F7;

    /* Yellows */
    --clr-y-500: #FFC120;
    --clr-y-400: #FFCF52;
    --clr-y-300: #FFDD83;
    --clr-y-200: #FFEAB5;
    --clr-y-100: #FFFBF2;

    /* Purples */
    --clr-p-500: #9A40D6;
    --clr-p-400: #B470E0;
    --clr-p-300: #CEA4EB;
    --clr-p-200: #E6D0F5;
    --clr-p-100: #FAF2FF;

    /* Oranges */
    --clr-o-500: #F29D49;
    --clr-o-400: #F5B87A;
    --clr-o-300: #F7CCA1;
    --clr-o-200: #FADBBB;
    --clr-o-100: #FFF9F2;

    /* Glass Gradient */
    --glass-color: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 100%);
    --glass-color-reverse: linear-gradient(45deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,1) 100%);
    --glass-color-dark: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
    --glass-blur: blur(30px);  /* backdrop-filter: */

    /* Shadows */
    --shadow-050: rgba(100, 100, 111, 0.05) 0px 7px 50px 0px;
    --shadow-100: rgba(100, 100, 111, 0.1) 0px 7px 50px 0px;
    --shadow-200: rgba(100, 100, 111, 0.2) 0px 7px 50px 0px;
    
}

/*Padding Sizes*/
:root{
    --size-050: 4px;
    --size-100: 8px;
    --size-200: 12px;
    --size-300: 16px;
    --size-400: 20px;
    --size-500: 24px;
    --size-600: 28px;
    --size-650: 32px;
    --size-700: 56px;
    --size-800: 64px;
    --size-900: 80px;
}


/*Fonts*/
/*Fonts Sizes*/
:root{
    --fs-050: 0.625rem;
    --fs-100: 0.75rem;
    --fs-150: 0.875rem;
    --fs-200: 1rem;
    --fs-300: 1.25rem;
    --fs-400: 1.5rem;
    /* --fs-500: clamp(1.375rem, 1.75vw , 1.5rem);
    --fs-600: clamp(1.5rem, 2.5vw , 1.75rem);
    --fs-700: clamp(1.75rem, 3vw , 2rem);
    --fs-800: clamp(2rem, 3.5vw , 2.5rem);
    --fs-900: clamp(2.5rem, 6vw , 4rem); */

    /*Fonts Weights*/
    --fw-100: 100;
    --fw-200: 400;
    --fw-300: 500;
    --fw-400: 6 00;

    /*Fonts Families*/
    --ff-primary: Sora;
    --ff-secondary: Figtree;
}

/*CSS Reset*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;

text-decoration: none;
list-style: none;
}

img {
max-width: 100%;
height: auto;
vertical-align: middle;
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 1rem;
}

h1,h2,h3,h4,h5,h6{
font-family: var(--ff-primary);
color: var(--clr-k-800);
font-weight: var(--fw-200);

text-wrap: balance;

& > span.headline-row{
    display: block;
}
}


p{
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;

text-wrap: pretty;
}

a{
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;

cursor: pointer;

display: inline;
gap: inherit;
}

main{
position: relative;

font-family: var(--ff-secondary);
font-size: 1rem;
font-weight: var(--fw-100);
line-height: 1.3;
color: var(--clr-k-500);

text-wrap: pretty;
}

::-webkit-scrollbar {
display: none;
}

/*Utility Classes*/
/* Width */
.w-100{
    width: 100%;
}
.w-100vw{
    width: 100vw;
}
.w-2rem{
    width: 2rem;
}

/* Height */
.h-100{
    height: 100%;
}
.h-100vh{
    height: 100vh;
}

    /*Minimum Height*/
    .min-h-20rem{
        min-height: 20rem;
    }

        /* Height Percentage Values */
        .h-50per{
            height: 50%;
        }



/* Maximum Width */
.max-w-fit-content{
    max-width: fit-content;
}
.max-w-40rem{
    max-width: 40rem;
}
.max-w-60rem{
    max-width: 60rem;
}

/*Z Index Classes*/
.z-index-0{
    z-index: 0;
}
.z-index-1{
    z-index: 1;
}
.z-index-2{
    z-index: 2;
}


/*Absolute Position Classes*/
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}

    .absolute.bottom{
        bottom: 0;
    }
    .absolute.top{
        top: 0;
    }
    .absolute.left{
        left: 0;
    }
    .absolute.right{
        right: 0;
    }

.sticky{
    position: sticky;
}
    .absolute.top-600,
    .sticky.top-600{
        top: var(--size-600);
    }
    .absolute.top-700,
    .sticky.top-700{
        top: var(--size-700);
    }

/*Overflow Classes*/
.overflow-x-scroll{
    overflow-x: scroll;
}

.overflow-x-hidden{
    overflow-x: hidden;
}


/* Grid Layouts */

.grid-2-col{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));;

    @media screen and (max-width: 480px) {
        &.fluid-xs{
            grid-template-columns: minmax(0, 1fr);

            &.reverse{
                & > *:nth-child(1){
                    grid-row-start: 2;
                }
                & > *:nth-child(2){
                    grid-row-start: 1;
                }
            }

        }
    }

    @media screen and (max-width: 768px) {
        &.fluid-s{
            grid-template-columns: minmax(0, 1fr);

            &.reverse{
                & > *:nth-child(1){
                    grid-row-start: 2;
                }
                & > *:nth-child(2){
                    grid-row-start: 1;
                }
            }
        }
    }

    @media screen and (max-width: 1024px) {
        &.fluid-m{
            grid-template-columns: minmax(0, 1fr);

            &.reverse{
                & > *:nth-child(1){
                    grid-row-start: 2;
                }
                & > *:nth-child(2){
                    grid-row-start: 1;
                }
            }
        }
    } 
    
    &.even-rows{
        grid-auto-rows: 1fr;
    }
}

.grid-3-col{
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    @media screen and (max-width: 480px) {
        &.fluid-xs{
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto;

            &.reverse{
                & > *:nth-child(1){
                    grid-row-start: 3;
                }
                & > *:nth-child(2){
                    grid-row-start: 2;
                }
                & > *:nth-child(3){
                    grid-row-start: 1;
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        &.fluid-s{
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto;

            &.reverse{
                & > *:nth-child(1){
                    grid-row-start: 3;
                }
                & > *:nth-child(2){
                    grid-row-start: 2;
                }
                & > *:nth-child(3){
                    grid-row-start: 1;
                }
            }
        }
    }

    @media screen and (max-width: 1024px) {
        &.fluid-m{
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto;

            &.reverse{
                & > *:nth-child(1){
                    grid-row-start: 3;
                }
                & > *:nth-child(2){
                    grid-row-start: 2;
                }
                & > *:nth-child(3){
                    grid-row-start: 1;
                }
            }
        }
    }

    &.even-rows{
        grid-auto-rows: 1fr;
    }
}


/*Flexboxes*/
.flex-col{
    display: flex;
    flex-direction: column;
}
.flex-row{
    display: flex;
}
.flex-wrap{
    display: flex;
    flex-wrap: wrap;
}

.align-items-start{
    align-items: start;
}
.align-items-end{
    align-items: end;
}
.align-items-center{
    align-items: center;
}

.justify-content-start{
    justify-content: start;
}
.justify-content-end{
    justify-content: end;
}
.justify-content-center{
    justify-content: center;
}
.justify-content-space-between{
    justify-content: space-between;
}

.align-self-start{
    align-self: flex-start;
}
.align-self-end{
    align-self: flex-end;
}
.align-self-center{
    align-self: center;
}
.align-self-stretch{
    align-self: stretch;
}


.justify-self-start{
    justify-self: flex-start;
}
.justify-self-end{
    justify-self: flex-end;
}
.justify-self-center{
    justify-self: center;
}

/* Flexbox Fluid */
    /* Fluid Rows */
    .row-fluid-m{
        display: flex;
        flex-direction: row;

        @media screen and (max-width: 1024px) {
            flex-direction: column;
        }
    }

    .row-fluid-s{
        display: flex;
        flex-direction: row;

        @media screen and (max-width: 768px) {
            flex-direction: column;
        }
    }

    .row-fluid-xs{
        display: flex;
        flex-direction: row;

        @media screen and (max-width: 480px) {
            flex-direction: column;
        }
    }

    /* Reverse Fluid Rows */
    @media screen and (max-width: 768px) {
        .flex-col-reverse-s{
            flex-direction: column-reverse;
        }
    }


/*Gaps*/
.gap-050{
    gap: var(--size-050);
}
.gap-100{
    gap: var(--size-100);
}
.gap-200{
        gap: var(--size-200);
}
.gap-300{
        gap: var(--size-300);
}
.gap-400{
    gap: var(--size-400);
}
.gap-500{
    gap: var(--size-500);
}
.gap-600{
    gap: var(--size-600);
}
.gap-700{
    gap: var(--size-700);
}
.gap-800{
    gap: var(--size-800);
}
.gap-900{
    gap: var(--size-900);
}

    /*Columng column-gaps*/
    .column-gap-050{
        column-gap: var(--size-050);
    }
    .column-gap-100{
        column-gap: var(--size-100);
    }
    .column-gap-200{
        column-gap: var(--size-200);
    }
    .column-gap-300{
        column-gap: var(--size-300);
    }
    .column-gap-400{
        column-gap: var(--size-400);
    }
    .column-gap-500{
        column-gap: var(--size-500);
    }
    .column-gap-600{
        column-gap: var(--size-600);
    }
    .column-gap-700{
        column-gap: var(--size-700);
    }
    .column-gap-800{
        column-gap: var(--size-800);
    }
    .column-gap-900{
        column-gap: var(--size-900);
    }



/* Margin classes */
/* Margin Auto */
.margin-auto{
    margin: auto;
}
.margin-block-auto{
    margin-block: auto;
}
.margin-inline-auto{
    margin-inline: auto;
}
/* Margin Minus CLasses */
    /* Margin Top Minus Classes */
    .margin-top-minus-600{
        margin-top: calc(-1 * var(--size-600));
    }
    .margin-top-minus-900{
        margin-top: calc(-1 * var(--size-900));
    }


/*Padding Classes*/
/*Full Padding*/
.padding-0{
    padding: 0;
}
.padding-050{
    padding: var(--size-050);
}
.padding-100{
    padding: var(--size-100);
}
.padding-200{
    padding: var(--size-200);
}
.padding-300{
    padding: var(--size-300);
}
.padding-400{
    padding: var(--size-400);
}
.padding-500{
    padding: var(--size-500);
}
.padding-600{
    padding: var(--size-600);
}
.padding-700{
    padding: var(--size-700);
}
.padding-800{
    padding: var(--size-800);
}
.padding-900{
    padding: var(--size-900);
}

/*Block padding*/
.padding-block-050{
    padding-block: var(--size-050);
}
.padding-block-100{
    padding-block: var(--size-100);
}
.padding-block-200{
    padding-block: var(--size-200);
}
.padding-block-300{
    padding-block: var(--size-300);
}
.padding-block-400{
    padding-block: var(--size-400);
}
.padding-block-500{
    padding-block: var(--size-500);
}
.padding-block-600{
    padding-block: var(--size-600);
}
.padding-block-700{
    padding-block: var(--size-700);
}
.padding-block-800{
    padding-block: var(--size-800);
}
.padding-block-900{
    padding-block: var(--size-900);
}

/* Inline padding*/
.padding-inline-050{
    padding-inline: var(--size-050);
}
.padding-inline-100{
    padding-inline: var(--size-100);
}
.padding-inline-200{
    padding-inline: var(--size-200);
}
.padding-inline-300{
    padding-inline: var(--size-300);
}
.padding-inline-400{
    padding-inline: var(--size-400);
}
.padding-inline-500{
    padding-inline: var(--size-500);
}
.padding-inline-600{
    padding-inline: var(--size-600);
}
.padding-inline-700{
    padding-inline: var(--size-700);
}
.padding-inline-800{
    padding-inline: var(--size-800);
}
.padding-inline-900{
    padding-inline: var(--size-900);
}

/*Left padding*/
.padding-left-050{
    padding-left: var(--size-050);
}
.padding-left-100{
    padding-left: var(--size-100);
}
.padding-left-200{
    padding-left: var(--size-200);
}
.padding-left-300{
    padding-left: var(--size-300);
}
.padding-left-400{
    padding-left: var(--size-400);
}
.padding-left-500{
    padding-left: var(--size-500);
}
.padding-left-600{
    padding-left: var(--size-600);
}
.padding-left-700{
    padding-left: var(--size-700);
}
.padding-left-800{
    padding-left: var(--size-800);
}
.padding-left-900{
    padding-left: var(--size-900);
}

/*Right padding*/
.padding-right-050{
    padding-right: var(--size-050);
}
.padding-right-100{
    padding-right: var(--size-100);
}
.padding-right-200{
    padding-right: var(--size-200);
}
.padding-right-300{
    padding-right: var(--size-300);
}
.padding-right-400{
    padding-right: var(--size-400);
}
.padding-right-500{
    padding-right: var(--size-500);
}
.padding-right-600{
    padding-right: var(--size-600);
}
.padding-right-700{
    padding-right: var(--size-700);
}
.padding-right-800{
    padding-right: var(--size-800);
}
.padding-right-900{
    padding-right: var(--size-900);
}

/*Top padding*/
.padding-top-050{
    padding-top: var(--size-050);
}
.padding-top-100{
    padding-top: var(--size-100);
}
.padding-top-200{
    padding-top: var(--size-200);
}
.padding-top-300{
    padding-top: var(--size-300);
}
.padding-top-400{
    padding-top: var(--size-400);
}
.padding-top-500{
    padding-top: var(--size-500);
}
.padding-top-600{
    padding-top: var(--size-600);
}
.padding-top-700{
    padding-top: var(--size-700);
}
.padding-top-800{
    padding-top: var(--size-800);
}
.padding-top-900{
    padding-top: var(--size-900);
}

    /* Absolute Padding */
    .padding-top-20rem{
        padding-top: 20rem;
    }

/*Bottom padding*/
.padding-bottom-050{
    padding-bottom: var(--size-050);
}
.padding-bottom-100{
    padding-bottom: var(--size-100);
}
.padding-bottom-200{
    padding-bottom: var(--size-200);
}
.padding-bottom-300{
    padding-bottom: var(--size-300);
}
.padding-bottom-400{
    padding-bottom: var(--size-400);
}
.padding-bottom-500{
    padding-bottom: var(--size-500);
}
.padding-bottom-600{
    padding-bottom: var(--size-600);
}
.padding-bottom-700{
    padding-bottom: var(--size-700);
}
.padding-bottom-800{
    padding-bottom: var(--size-800);
}
.padding-bottom-900{
    padding-bottom: var(--size-900);
}

/* Border Classes */
    /* Border Bottom Classes */
    .border-bottom-k-200{
        border-bottom: 1px solid var(--clr-k-200);
    }
    .border-bottom-k-300{
        border-bottom: 1px solid var(--clr-k-300);
    }
    .border-bottom-b-900{
        border-bottom: 1px solid var(--clr-b-900);
    }

    /* Border Top Classes */
    .border-top-k-200{
        border-top: 1px solid var(--clr-k-200);
    }
    .border-top-k-300{
        border-top: 1px solid var(--clr-k-300);
    }
    .border-top-k-700{
        border-top: 1px solid var(--clr-k-700);
    }


/*Color Classes*/
.bg-k-100{
background-color: var(--clr-k-100);
}
.bg-k-200{
background-color: var(--clr-k-200);
}
.bg-k-500{
background-color: var(--clr-k-500);
}
.bg-white{
background-color: white;
}
.bg-navy{
background-color: var(--clr-navy);
}

.bg-glass{
background: var(--glass-color);
backdrop-filter: var(--glass-blur);

border: 1px solid var(--clr-k-200);

transition: background-color .2s ease-in-out;

&:hover{
    background-color:rgba(255,255,255,0.4);
}
}

.bg-glass-reverse{
background: var(--glass-color-reverse);
backdrop-filter: var(--glass-blur);

border: 1px solid var(--clr-k-200);

transition: background-color .2s ease-in-out;

&:hover{
    background-color:rgba(255,255,255,0.4);
}
}

.bg-glass-dark{
background: var(--glass-color-dark);
backdrop-filter: var(--glass-blur);

transition: background-color .2s ease-in-out;
}
.bg-gradient{
background: var(--gradient-blue-45);
}
.bg-gradient-90{
background: var(--gradient-blue-90);
}
/* Gradient Masks */
.mask-gradient-rtl{
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

/*Background Image Class*/
.bg-image{
background-size: cover;
background-repeat: no-repeat;
transition: background-size .2s ease-in-out;

&.center{
    background-position: center;
}
&.center.right{
    background-position: center right;
}
&.top{
    background-position: top;
}
&.center.left{
    background-position: center left;
}
}



 /* Text Color*/
        /* Text Color Black*/
        .text-color-k-200{
            color: var(--clr-k-200);
        }
        .text-color-k-300{
            color: var(--clr-k-300);
        }
        .text-color-k-400{
            color: var(--clr-k-400);
        }
        .text-color-k-500{
            color: var(--clr-k-500);
        }
        .text-color-k-700{
            color: var(--clr-k-700);
        }
        .text-color-k-800{
            color: var(--clr-k-800);
        }
        .text-color-white{
            color: white;
        }

        /* Text Color Blue*/
        .text-color-b-900{
            color: var(--clr-b-900);
        }
        .text-color-b-300{
            color: var(--clr-b-300);
        }

        /* Text Color Green*/
        .text-color-g-500{
            color: var(--clr-g-500);
        }



    /* Text Alignment */
    .text-align-center{
        text-align: center;
    }

    /* Text Wrap Classes */
    .text-nowrap{
        text-wrap-mode: nowrap;
    }


    /* Font Classes*/
        /*Font sizes*/
        .fs-100{
            font-size: var(--fs-100);
            line-height: 1.3;
        }
        .fs-200{
            font-size: var(--fs-200);
            line-height: 1.3;
        }
        .fs-300{
            font-size: var(--fs-300);
            line-height: 1.3;
        }
        .fs-400{
            font-size: var(--fs-400);
            line-height: 1.2;
        }
        .fs-500{
            font-size: var(--fs-500);
            line-height: 1.2;
        }
        .fs-600{
            font-size: var(--fs-600);
            line-height: 1.2;
        }
        .fs-700{
            font-size: var(--fs-700);
            line-height: 1.1;
        }
        .fs-800{
            font-size: var(--fs-800);
            line-height: 1.05;
        }
        .fs-900{
            font-size: var(--fs-900);
            line-height: 1.05;
            letter-spacing: -2px;
        }

        /*Font Families*/
        .ff-primary{
            font-family: var(--ff-primary);
        }
        .ff-secondary{
            font-family: var(--ff-secondary);
        }

        /*Font Weights*/
        .fw-100{
            font-weight: var(--fw-100);
        }
        .fw-200{
            font-weight: var(--fw-200);
        }
        .fw-300{
            font-weight: var(--fw-300);
        }
        .fw-400{
            font-weight: var(--fw-400);
        }

        /* Text Wrap Classes */
        .text-wrap-wrap{
            text-wrap: wrap;
        }
        .text-wrap-nowrap{
            text-wrap: nowrap;
        }