@font-face {
    font-family: UniversalSans-500;
    src: url(../fonts/UniversalSans-500.woff) format("woff"), url(../fonts/UniversalSans-500.ttf) format("ttf");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: UniversalSans-500-Headlines;
    src: url(../fonts/UniversalSans-500-Headlines.woff) format("woff"), url(../fonts/UniversalSans-500-Headlines.ttf) format("ttf");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: UniversalSans-740;
    src: url(../fonts/UniversalSans-740.woff) format("woff"), url(../fonts/UniversalSans-740.ttf) format("ttf");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: UniversalSans-740-Headlines;
    src: url(../fonts/UniversalSans-740-Headlines.woff) format("woff"), url(../fonts/UniversalSans-740-Headlines.ttf) format("ttf");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: 'Caramello';
    src: url(../fonts/Caramello.ttf) format('truetype');
}
.caramello-font {
    font-family: 'Caramello', sans-serif;
}
@font-face {
    font-family: 'Beautiful Handwriting';
    src: url('../fonts/BeautyHandwriting-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.signature-font {
    font-family: 'Beautiful Handwriting', cursive;
}

:root {
    --color-white: #fff;
    --color-gray-5: #f3f4f6;
    --color-gray-100: #e6e8eb;
    --color-gray-200: #cbd0d6;
    --color-gray-300: #b2b8c2;
    --color-gray-400: #989fab;
    --color-gray-500: #7f8694;
    --color-gray-600: #666c7a;
    --color-gray-700: #4e5361;
    --color-gray-800: #353945;
    --color-gray-850: #252833;
    --color-gray-900: #171921;
    --color-black: #06070a;
    --color-red-600: #cf3723;
    --color-blue-200: #bacdff;
    --color-blue-600: #31356d;
    --color-headerWhite: #ffffff80;
    --color-headerDark: #17191f80;
    --ease: cubic-bezier(1, 0, 0, 1);
    --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --default: cubic-bezier(0.25, 0.1, 0.25, 1);
    --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
    --easeInExpo: cubic-bezier(0.7, 0, 0.84, 0);
    --z-card: 103;
    --z-header: 102;
    --z-popup: 101;
    --menu-follow-delay: 0ms
}

.custom-black-color {
    color: var(--color-black);
}


.color-white {
    color: var(--color-white);
}

.color-gray-5 {
    color: var(--color-gray-5);
}

.color-gray-100 {
    color: var(--color-gray-100);
}

.color-gray-200 {
    color: var(--color-gray-200);
}

.color-gray-300 {
    color: var(--color-gray-300);
}

.color-gray-400 {
    color: var(--color-gray-400);
}

.color-gray-500 {
    color: var(--color-gray-500);
}

.color-gray-600 {
    color: var(--color-gray-600);
}

.color-gray-700 {
    color: var(--color-gray-700);
}

.color-gray-800 {
    color: var(--color-gray-800);
}

.color-gray-850 {
    color: var(--color-gray-850);
}

.color-gray-900 {
    color: var(--color-gray-900);
}

.color-black {
    color: var(--color-black);
}

.color-red-600 {
    color: var(--color-red-600);
}

.color-blue-200 {
    color: var(--color-blue-200);
}

.color-blue-600 {
    color: var(--color-blue-600);
}

.color-headerWhite {
    color: var(--color-headerWhite);
}

.color-headerDark {
    color: var(--color-headerDark);
}

.font-universal {
    font-family: UniversalSans-500, Arial, sans-serif !important;
}

.font-universal-740 {
    font-family: UniversalSans-740, Arial, sans-serif !important;
    font-weight: 650;
}

/* Unified Shared Typography System */
.font-120-head {
    font-family: UniversalSans-740-Headlines, Arial, sans-serif !important;
    font-size: 120px !important;
    font-weight: 700 !important;
    line-height: 110%;
    letter-spacing: -.05em;

}

.font-74-head {
    font-family: UniversalSans-740-Headlines, Arial, sans-serif !important;
    font-size: 74px !important;
    font-weight: 700 !important;
    line-height: 110%;
    letter-spacing: -.04em;
}

.font-64-head {
    font-family: UniversalSans-740-Headlines, Arial, sans-serif !important;
    font-size: 64px !important;
    font-weight: 700 !important;
    line-height: 110%;
    letter-spacing: -.03em;

}

.font-52-head {
    font-family: UniversalSans-740-Headlines, Arial, sans-serif !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    line-height: 110%;
    letter-spacing: -.03em;


}

.font-30-body {
    font-family: UniversalSans-740-Headlines, Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 120%;
    letter-spacing: -.02em;

}

/* .font-28-bold {
    font-family: UniversalSans-740, Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 135%;
    letter-spacing: -.02em;
} */

.font-28-body {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 140%;
    letter-spacing: -.01em;


}

.font-24-medium {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 135%;
    letter-spacing: -.03em;
}

.font-24-other {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 135%;
    letter-spacing: -.03em;
}

.font-24-bold {
    font-family: UniversalSans-740, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 135%;
    letter-spacing: -.03em;
}

.font-22-bold {
    font-family: UniversalSans-740, Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 135%;
    letter-spacing: -.02em;
}

.font-22-medium {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 135%;
    letter-spacing: -.02em;


}

.font-20-bold {
    font-family: UniversalSans-740, Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 120%;
    letter-spacing: -.01em;
}

.font-20-medium {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    line-height: 130%;
}

.font-48-medium {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    letter-spacing: -.02em;
    line-height: 125%;
}

.font-18-head {
    font-family: UniversalSans-740-Headlines, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 140%;
}



.font-16-medium {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;

    line-height: 140%;
}

.font-16-desc {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;

}

.font-15-medium {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 130%;
    letter-spacing: -.02em;

}

.font-15-head {
    font-family: UniversalSans-500, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 140%;

}

/* Responsive Overrides */
@media (max-width: 768px) {
    .font-20-bold {
        font-size: 15px !important;
        line-height: 140%;
        letter-spacing: -.01em;
    }

    .font-48-medium {
        font-family: UniversalSans-500, Arial, sans-serif !important;
        font-size: 24px !important;
        font-weight: 500 !important;
        line-height: 135%;
        letter-spacing: -.02em;
    }

    .font-74-head {
        font-family: UniversalSans-740-Headlines, Arial, sans-serif !important;
        font-size: 40px !important;
        font-weight: 700 !important;
        line-height: 110%;
        letter-spacing: -.03em;
    }

    .font-16-medium {
        font-size: 14px !important;
        line-height: 140% !important;
    }

    .font-120-head {
        font-size: 50px !important;
    }

    .font-64-head {
        font-size: 40px !important;
    }

    .font-52-head {
        font-size: 30px !important;
    }

    .font-30-body {
        font-size: 24px !important;
        line-height: 125%;
        letter-spacing: -.03em;
    }

    .font-28-body {
        font-size: 18px !important;
        letter-spacing: -.02em !important;
    }

    /* .font-28-bold {
        font-size: 20px !important;
        line-height: 135%;
        letter-spacing: -.01em;
    } */

    .font-24-medium {
        font-size: 22px !important;
    }

    .font-24-other {
        font-size: 18px !important;
    }

    .font-24-bold {
        font-size: 22px !important;
        line-height: 135%;
        letter-spacing: -.03em;
    }

    .font-22-bold {
        font-size: 16px !important;
        line-height: 135%;
        letter-spacing: -.01em;
    }

    .font-22-medium {
        font-size: 16px !important;
        line-height: 135%;
        letter-spacing: -.01em;
    }

    .font-20-medium {
        font-size: 15px !important;
        line-height: 140%;
        letter-spacing: -.01em;
    }

    .font-18-head {
        font-size: 14px !important;

    }

    .font-15-medium {
        font-size: 14px !important;

    }

    .font-15-head {
        font-size: 14px !important;

    }
}