:root {
    /* ========== Brand Colors ========== */
    /* Primary Colors */
    --primary-900: #4E1E35;
    --primary-800: #601337;
    --primary-700: #7D1847;
    --primary-600: #B11A61;
    --primary-500: #C82471;
    --primary-400: #E0448D;
    --primary-300: #EB61A2;
    --primary-200: #F990C1;
    --primary-100: #FFCEE5;
    --primary-50: #FFF0F7;

    /* Secondary Colors */
    --secondary-900: #081315;
    --secondary-800: #0B1A1F;
    --secondary-700: #12262D;
    --secondary-600: #17333E;
    --secondary-500: #395D69;
    --secondary-400: #567C87;
    --secondary-300: #7599A5;
    --secondary-200: #82A8B3;
    --secondary-100: #A1C4D0;
    --secondary-50: #CBE8F0;

    /* Tertiary Colors */
    --tertiary-900: #475500;
    --tertiary-800: #56640F;
    --tertiary-700: #72802B;
    --tertiary-600: #8E9C47;
    --tertiary-500: #BBC974;
    --tertiary-400: #CCDA85;
    --tertiary-300: #DDEB96;
    --tertiary-200: #E5F39E;
    --tertiary-100: #EEFCA7;
    --tertiary-50: #F6FFC8;


    /* ========== Action Colors ========== */
    /* Success Colors */
    --success-900: #031F05;
    --success-800: #063D0A;
    --success-700: #095C0E;
    --success-600: #0C7A13;
    --success-500: #0F9918;
    --success-400: #3FAD46;
    --success-300: #6FC274;
    --success-200: #9FD6A3;
    --success-100: #CFEBD1;
    --success-50: #E7F5E8;

    /* Warning Colors */
    --warning-900: #331B00;
    --warning-800: #663000;
    --warning-700: #995200;
    --warning-600: #CC6D00;
    --warning-500: #FF8800;
    --warning-400: #FFA033;
    --warning-300: #FFB866;
    --warning-200: #FFCF99;
    --warning-100: #FFECBC;
    --warning-50: #FFF2E6;

    /* Error Colors */
    --error-900: #2E0E0E;
    --error-800: #5C1C1C;
    --error-700: #892929;
    --error-600: #B73737;
    --error-500: #E54545;
    --error-400: #EA6A6A;
    --error-300: #EF8F8F;
    --error-200: #F5B5B5;
    --error-100: #FADADA;
    --error-50: #FCECEC;


    /* ========== Neutral/Grayscale Colors ========== */
    /* Gray Scale */
    --gray-900: #0F0F0F;
    --gray-800: #243752;
    --gray-700: #42526B;
    --gray-600: #6A778B;
    --gray-500: #838E9E;
    --gray-400: #9BA4B1;
    --gray-300: #B4BBC5;
    --gray-200: #CDD2D8;
    --gray-100: #E6E8EC;
    --gray-50: #F5F6F7;


    /* ========== Interactive Colors ========== */
    /* Aquamarine Colors */
    --aquamarine-900: #016A59;
    --aquamarine-800: #0B7A69;
    --aquamarine-700: #279685;
    --aquamarine-600: #43B2A1;
    --aquamarine-500: #70DFCE;
    --aquamarine-400: #81F0DF;
    --aquamarine-300: #96FFEE;
    --aquamarine-200: #AFFFF2;
    --aquamarine-100: #CCFFF8;
    --aquamarine-50: #E5FFFC;

    /* CornflowerBlue Colors */
    --cornflowerBlue-900: #324882;
    --cornflowerBlue-800: #415791;
    --cornflowerBlue-700: #5D73AD;
    --cornflowerBlue-600: #7A90CA;
    --cornflowerBlue-500: #A7BDF7;
    --cornflowerBlue-400: #BBCDFF;
    --cornflowerBlue-300: #D1DEFF;
    --cornflowerBlue-200: #DCE6FF;
    --cornflowerBlue-100: #E8EFFF;
    --cornflowerBlue-50: #F3F6FF;
}

::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #9F9F9F;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background: #b9b8b8;
}



body {
    font-family: "Poppins", serif;
}

.container {
    max-width: 1340px !important;
    margin-inline: auto !important;
    padding-inline: 20px !important;
}


/* Display 1 */
.display-1--medium,
.display-1--semibold,
.display-1--bold {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -2px;
}

.display-1--medium {
    font-weight: 500;
}

.display-1--semibold {
    font-weight: 600;
}

.display-1--bold {
    font-weight: 700;
}

@media (min-width: 640px) {
    .display-1--medium,
    .display-1--semibold,
    .display-1--bold {
        font-size: 64px;
        line-height: 72px;
    }
}

@media (min-width: 768px) {
    .display-1--medium,
    .display-1--semibold,
    .display-1--bold {
        font-size: 80px;
        line-height: 88px;
    }
}

/* Display 2 */
.display-2--medium,
.display-2--semibold,
.display-2--bold {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -2px;
}

.display-2--medium {
    font-weight: 500;
}

.display-2--semibold {
    font-weight: 600;
}

.display-2--bold {
    font-weight: 700;
}

@media (min-width: 640px) {
    .display-2--medium,
    .display-2--semibold,
    .display-2--bold {
        font-size: 48px;
        line-height: 56px;
    }
}

@media (min-width: 768px) {
    .display-2--medium,
    .display-2--semibold,
    .display-2--bold {
        font-size: 72px;
        line-height: 80px;
    }
}




/* Header-1 */
.header-1--medium,
.header-1--semibold,
.header-1--bold {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -1.5px;
}

.header-1--medium {
    font-weight: 500;
}

.header-1--semibold {
    font-weight: 600;
}

.header-1--bold {
    font-weight: 700;
}

@media (min-width: 640px) {
    .header-1--medium,
    .header-1--semibold,
    .header-1--bold {
        font-size: 48px;
        line-height: 56px;
    }
}

@media (min-width: 768px) {
    .header-1--medium,
    .header-1--semibold,
    .header-1--bold {
        font-size: 56px;
        line-height: 64px;
    }
}

/* Header-2 */
.header-2--medium,
.header-2--semibold,
.header-2--bold {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1.5px;
}

.header-2--medium {
    font-weight: 500;
}

.header-2--semibold {
    font-weight: 600;
}

.header-2--bold {
    font-weight: 700;
}

@media (min-width: 640px) {
    .header-2--medium,
    .header-2--semibold,
    .header-2--bold {
        font-size: 36px;
        line-height: 48px;
    }
}

@media (min-width: 768px) {
    .header-2--medium,
    .header-2--semibold,
    .header-2--bold {
        font-size: 48px;
        line-height: 56px;
    }
}

/* Header-3 */
.header-3--medium,
.header-3--semibold,
.header-3--bold {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -1.5px;
}

.header-3--medium {
    font-weight: 500;
}

.header-3--semibold {
    font-weight: 600;
}

.header-3--bold {
    font-weight: 700;
}

@media (min-width: 640px) {
    .header-3--medium,
    .header-3--semibold,
    .header-3--bold {
        font-size: 24px;
        line-height: 36px;
    }
}

@media (min-width: 768px) {
    .header-3--medium,
    .header-3--semibold,
    .header-3--bold {
        font-size: 32px;
        line-height: 40px;
    }
}

/* Header-4 */
.header-4--medium,
.header-4--semibold,
.header-4--bold {
    font-size: 16px;
    line-height: 24px;
}

.header-4--medium {
    font-weight: 500;
}

.header-4--semibold {
    font-weight: 600;
}

.header-4--bold {
    font-weight: 700;
}

@media (min-width: 640px) {
    .header-4--medium,
    .header-4--semibold,
    .header-4--bold {
        font-size: 18px;
        line-height: 30px;
    }
}

@media (min-width: 768px) {
    .header-4--medium,
    .header-4--semibold,
    .header-4--bold {
        font-size: 24px;
        line-height: 36px;
    }
}

/* Header-5 */
.header-5--light,
.header-5--medium,
.header-5--semibold,
.header-5--bold {
    font-size: 14px;
    line-height: 20px;
}

.header-5--light {
    font-weight: 300;
}

.header-5--medium {
    font-weight: 500;
}

.header-5--semibold {
    font-weight: 600;
}

.header-5--bold {
    font-weight: 700;
}

@media (min-width: 640px) {
    .header-5--light,
    .header-5--medium,
    .header-5--semibold,
    .header-5--bold {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (min-width: 768px) {
    .header-5--light,
    .header-5--medium,
    .header-5--semibold,
    .header-5--bold {
        font-size: 20px;
        line-height: 30px;
    }
}

/* Header-6 */
.header-6--medium,
.header-6--semibold,
.header-6--bold {
    font-size: 14px;
    line-height: 18px;
}

.header-6--medium {
    font-weight: 500;
}

.header-6--semibold {
    font-weight: 600;
}

.header-6--bold {
    font-weight: 700;
}

@media (min-width: 640px) {
    .header-6--medium,
    .header-6--semibold,
    .header-6--bold {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (min-width: 768px) {
    .header-6--medium,
    .header-6--semibold,
    .header-6--bold {
        font-size: 18px;
        line-height: 27px;
    }
}



/* Body-1 */
.body-1--semibold,
.body-1--medium,
.body-1--regular {
    font-size: 14px;
    line-height: 20px;
}

.body-1--semibold {
    font-weight: 600;
}

.body-1--medium {
    font-weight: 500;
}

.body-1--regular {
    font-weight: 400;
}

@media (min-width: 640px) {
    .body-1--semibold,
    .body-1--medium,
    .body-1--regular {
        font-size: 16px;
        line-height: 22px;
    }
}

@media (min-width: 768px) {
    .body-1--semibold,
    .body-1--medium,
    .body-1--regular {
        line-height: 24px;
    }
}

/* Body-2 */
.body-2--semibold,
.body-2--medium,
.body-2--regular {
    font-size: 12px;
    line-height: 18px;
}

.body-2--semibold {
    font-weight: 600;
}

.body-2--medium {
    font-weight: 500;
}

.body-2--regular {
    font-weight: 400;
}

@media (min-width: 640px) {
    .body-2--semibold,
    .body-2--medium,
    .body-2--regular {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (min-width: 768px) {
    .body-2--semibold,
    .body-2--medium,
    .body-2--regular {
        line-height: 22px;
    }
}

/* Body-3 */
.body-3--semibold,
.body-3--medium,
.body-3--regular {
    font-size: 10px;
    line-height: 16px;
}

.body-3--semibold {
    font-weight: 500;
}

.body-3--medium {
    font-weight: 500;
}

.body-3--regular {
    font-weight: 400;
}

@media (min-width: 640px) {
    .body-3--semibold,
    .body-3--medium,
    .body-3--regular {
        font-size: 12px;
        line-height: 18px;
    }
}

@media (min-width: 768px) {
    .body-3--semibold,
    .body-3--medium,
    .body-3--regular {
        line-height: 20px;
    }
}

/* Body-4 */
.body-4--semibold,
.body-4--medium,
.body-4--regular {
    font-size: 8px;
    line-height: 14px;
}

.body-4--medium {
    font-weight: 600;
}

.body-4--medium {
    font-weight: 500;
}

.body-4--regular {
    font-weight: 400;
}

@media (min-width: 640px) {
    .body-4--semibold,
    .body-4--medium,
    .body-4--regular {
        font-size: 9px;
        line-height: 15px;
    }
}

@media (min-width: 768px) {
    .body-4--semibold,
    .body-4--medium,
    .body-4--regular {
        font-size: 10px;
        line-height: 16px;
    }
}

/* Body-5 */
.body-5--semibold,
.body-5--medium,
.body-5--regular {
    font-size: 8px;
    line-height: 14px;
}

.body-5--semibold {
    font-weight: 600;
}

.body-5--medium {
    font-weight: 500;
}

.body-5--regular {
    font-weight: 400;
}