:root {
    --dark: #021315;
    --sunset: #D99152;
    --greenLight: #79B0AA;
    --green: #2F8178;
    --bcg-light: #103834;
    --white500: #FFFFFF;
    --white400: rgba(255, 255, 255, 0.80);
    --white300: rgba(255, 255, 255, 0.50);
    --white200hover: rgba(255, 255, 255, 0.20);
    --white200: rgba(255, 255, 255, 0.12);
    --white100: rgba(255, 255, 255, 0.06);
    
    --gap-xxs: 0.25rem;
    --gap-xs: 0.5rem;
    --gap-s: 0.75rem;
    --gap-m: 1rem;
    --gap-l: 1.5rem;
    --gap-xl: 2rem;
    --gap-xxl: 2.5rem;
    --gap-big: 4rem;

    --radisu-s: 0.5rem;
    --radisu-m: 1rem;
    --radisu-l: 2rem;
    
    --itemHeight-s: 3rem;
    --itemHeight-m: 3rem;

}

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

body {
    font-family: Poppins;
    background-color: var(--dark);
    color: var(--white500);
    overflow-x: hidden;
    display: flex; 
    justify-content: center;
    margin: 0 auto;
    max-width: 120rem;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: inherit;
}

p {
    margin: 0;
}

.topAndBottom {
    padding-top: 11.25rem;
    padding-bottom: 11.25rem;
}

.containerWide {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.containerDefault {
    padding-left: 18.75rem;
    padding-right: 18.75rem;
}

::selection {
    color: var(--dark);
    background: var(--greenLight);
}

.reverse {
    flex-direction: row-reverse;
}

.center {
    align-items: center !important;
}

[x-cloak] {
    display: none !important;
}



/* ------------ScrollBar--------------- */
/* width */
::-webkit-scrollbar {
    width: 0.45rem;
    height: 0.45rem;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.30);
    border-radius: 1.25rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.50);
}


/* Font styles */
h1 {
    font-family: Kalnia;
    font-size: 5.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 5.125rem */
    margin: 0;
}

h2 {
    font-family: Kalnia;
    font-size: 4.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 4.8125rem */
    margin: 0;
}

h3 {
    font-family: Kalnia;
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 3.3rem */
    margin: 0;
}

h4 {
    font-family: Kalnia;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 2.475rem */
    margin: 0;
}

.l {
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 2.2rem */
}

.l-bold {
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 2.2rem */
}

.m {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 1.8rem */
}

.m-bold {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 1.8rem */
}

.s {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 1.3125rem */
}

@media screen and (max-width: 1600px) {
    .containerDefault {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media screen and (max-width: 1480px) {
    h1 {font-size: 4.25rem;}
    h2 {font-size: 3.875rem;}
    h3 {font-size: 2.625rem;}
    h4 {font-size: 2.125rem}
    .l {font-size: 1.25rem;}
    .l-bold {font-size: 1.25rem;}
    .m {font-size: 1.0625rem;}
    .m-bold {font-size: 1.0625rem;}
    .s {font-size: 0.875rem;}
    
    .topAndBottom {
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
    .containerWide {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .containerDefault {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media screen and (max-width: 1024px) {
    h1 {font-size: 3.5rem;}
    h2 {font-size: 3rem;}
    h3 {font-size: 2.375rem;}
    h4 {font-size: 2rem;}
    .l {font-size: 1.125rem;}
    .l-bold {font-size: 1.125rem;}
    .m {font-size: 1rem;}
    .m-bold {font-size: 1rem;}
    .s {font-size: 0.875rem;}
    
    .topAndBottom {
        padding-top: 7.5rem;
        padding-bottom: 7.5rem;
    }
    .containerWide {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .containerDefault {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (max-width: 740px) {
    h1 {font-size: 2.25rem;}
    h2 {font-size: 2rem;}
    h3 {font-size: 1.625rem;}
    h4 {font-size: 1.5rem;}
    .l {font-size: 1rem;}
    .l-bold {font-size: 1rem;}
    .m {font-size: 0.875rem;}
    .m-bold {font-size: 0.875rem}
    .s {font-size: 0.75rem}
    
    .topAndBottom {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .containerWide {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .containerDefault {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}