/* Webority Custom Utility Classes (Bootstrap Extensions) - Hybrid Responsive System */

/* Font Face Declarations */
@font-face {
    font-family: 'JosefinSans-Light';
    src: url('../../fonts/JosefinSans-Light.woff2') format('woff2'),
    url('../../fonts/JosefinSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JosefinSans-Regular';
    src: url('../../fonts/JosefinSans-Regular.woff2') format('woff2'),
    url('../../fonts/JosefinSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JosefinSans-Medium';
    src: url('../../fonts/JosefinSans-Medium.woff2') format('woff2'),
    url('../../fonts/JosefinSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JosefinSans-SemiBold';
    src: url('../../fonts/JosefinSans-SemiBold.woff2') format('woff2'),
    url('../../fonts/JosefinSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JosefinSans-Bold';
    src: url('../../fonts/JosefinSans-Bold.woff2') format('woff2'),
    url('../../fonts/JosefinSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TimesNewerRoman-Regular';
    src: url('../../fonts/TimesNewerRoman-Regular.woff2') format('woff2'),
    url('../../fonts/TimesNewerRoman-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TimesNewerRoman-Italic';
    src: url('../../fonts/TimesNewerRoman-Italic.woff2') format('woff2'),
    url('../../fonts/TimesNewerRoman-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


/* ===== HYBRID RESPONSIVE FONT SIZES (12px-120px) ===== */
/* Primary responsive fonts (clamp-based - auto-scaling) */

.fs-12 {
    font-size: var(--fs-12);
}

.fs-14 {
    font-size: var(--fs-14);
}

.fs-16 {
    font-size: var(--fs-16);
}

.fs-18 {
    font-size: var(--fs-18);
}

.fs-20 {
    font-size: var(--fs-20);
}

.fs-22 {
    font-size: var(--fs-22);
}

.fs-24 {
    font-size: var(--fs-24);
}

.fs-28 {
    font-size: var(--fs-28);
}

.fs-32 {
    font-size: var(--fs-32);
}

.fs-34 {
    font-size: var(--fs-34);
}

.fs-36 {
    font-size: var(--fs-36);
}

.fs-42 {
    font-size: var(--fs-42);
}

.fs-48 {
    font-size: var(--fs-48);
}

.fs-52 {
    font-size: var(--fs-52);
}

.fs-56 {
    font-size: var(--fs-56);
}

.fs-62 {
    font-size: var(--fs-62);
}

.fs-72 {
    font-size: var(--fs-72);
}

.fs-80 {
    font-size: var(--fs-80);
}


/* ===== RESPONSIVE SPACING UTILITIES ===== */


/* Auto-scaling spacing (recommended) */

.p-1 {
    padding: var(--space-1) !important;
}

.p-2 {
    padding: var(--space-2) !important;
}

.p-3 {
    padding: var(--space-3) !important;
}

.p-4 {
    padding: var(--space-4) !important;
}

.p-5 {
    padding: var(--space-5) !important;
}

.p-6 {
    padding: var(--space-6) !important;
}

.p-8 {
    padding: var(--space-8) !important;
}

.p-10 {
    padding: var(--space-10) !important;
}

.p-12 {
    padding: var(--space-12) !important;
}

.p-16 {
    padding: var(--space-16) !important;
}

.p-20 {
    padding: var(--space-20) !important;
}

.p-24 {
    padding: var(--space-24) !important;
}

.p-32 {
    padding: var(--space-32) !important;
}

.p-40 {
    padding: var(--space-40) !important;
}

.p-48 {
    padding: var(--space-48) !important;
}

.p-64 {
    padding: var(--space-64) !important;
}

.m-1 {
    margin: var(--space-1);
}

.m-2 {
    margin: var(--space-2);
}

.m-3 {
    margin: var(--space-3);
}

.m-4 {
    margin: var(--space-4);
}

.m-5 {
    margin: var(--space-5);
}

.m-6 {
    margin: var(--space-6);
}

.m-8 {
    margin: var(--space-8);
}

.m-10 {
    margin: var(--space-10);
}

.m-12 {
    margin: var(--space-12);
}

.m-16 {
    margin: var(--space-16);
}

.m-20 {
    margin: var(--space-20);
}

.m-24 {
    margin: var(--space-24);
}

.m-32 {
    margin: var(--space-32);
}

.m-40 {
    margin: var(--space-40);
}

.m-48 {
    margin: var(--space-48);
}

.m-64 {
    margin: var(--space-64);
}


/* Directional padding */

.pt-1 {
    padding-top: var(--space-1);
}

.pt-2 {
    padding-top: var(--space-2);
}

.pt-3 {
    padding-top: var(--space-3);
}

.pt-4 {
    padding-top: var(--space-4);
}

.pt-5 {
    padding-top: var(--space-5);
}

.pt-6 {
    padding-top: var(--space-6);
}

.pt-8 {
    padding-top: var(--space-8);
}

.pt-10 {
    padding-top: var(--space-10);
}

.pt-12 {
    padding-top: var(--space-12);
}

.pt-16 {
    padding-top: var(--space-16);
}

.pt-20 {
    padding-top: var(--space-20);
}

.pt-24 {
    padding-top: var(--space-24);
}

.pt-32 {
    padding-top: var(--space-32);
}

.pt-40 {
    padding-top: var(--space-40);
}

.pt-48 {
    padding-top: var(--space-48);
}

.pt-64 {
    padding-top: var(--space-64);
}

.pb-1 {
    padding-bottom: var(--space-1);
}

.pb-2 {
    padding-bottom: var(--space-2);
}

.pb-3 {
    padding-bottom: var(--space-3);
}

.pb-4 {
    padding-bottom: var(--space-4);
}

.pb-5 {
    padding-bottom: var(--space-5);
}

.pb-6 {
    padding-bottom: var(--space-6);
}

.pb-8 {
    padding-bottom: var(--space-8);
}

.pb-10 {
    padding-bottom: var(--space-10);
}

.pb-12 {
    padding-bottom: var(--space-12);
}

.pb-16 {
    padding-bottom: var(--space-16);
}

.pb-20 {
    padding-bottom: var(--space-20);
}

.pb-24 {
    padding-bottom: var(--space-24);
}

.pb-32 {
    padding-bottom: var(--space-32);
}

.pb-40 {
    padding-bottom: var(--space-40);
}

.pb-48 {
    padding-bottom: var(--space-48);
}

.pb-64 {
    padding-bottom: var(--space-64);
}

.px-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}

.px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.px-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.px-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.px-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

.px-10 {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
}

.px-12 {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
}

.px-16 {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
}

.px-20 {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
}

.px-24 {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
}

.px-32 {
    padding-left: var(--space-32);
    padding-right: var(--space-32);
}

.py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.py-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.py-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.py-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.py-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.py-10 {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.py-12 {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.py-16 {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.py-20 {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}

.py-24 {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}

.py-32 {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
}


/* Directional margin */

.mt-1 {
    margin-top: var(--space-1);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-3 {
    margin-top: var(--space-3);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-5 {
    margin-top: var(--space-5);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mt-10 {
    margin-top: var(--space-10);
}

.mt-12 {
    margin-top: var(--space-12);
}

.mt-16 {
    margin-top: var(--space-16);
}

.mt-20 {
    margin-top: var(--space-20);
}

.mt-24 {
    margin-top: var(--space-24);
}

.mt-32 {
    margin-top: var(--space-32);
}

.mt-40 {
    margin-top: var(--space-40);
}

.mt-48 {
    margin-top: var(--space-48);
}

.mt-64 {
    margin-top: var(--space-64);
}

.mb-1 {
    margin-bottom: var(--space-1);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-5 {
    margin-bottom: var(--space-5);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.mb-10 {
    margin-bottom: var(--space-10);
}

.mb-12 {
    margin-bottom: var(--space-12);
}

.mb-16 {
    margin-bottom: var(--space-16);
}

.mb-20 {
    margin-bottom: var(--space-20);
}

.mb-24 {
    margin-bottom: var(--space-24);
}

.mb-32 {
    margin-bottom: var(--space-32);
}

.mb-40 {
    margin-bottom: var(--space-40);
}

.mb-48 {
    margin-bottom: var(--space-48);
}

.mb-64 {
    margin-bottom: var(--space-64);
}

.mx-1 {
    margin-left: var(--space-1) !important;
    margin-right: var(--space-1) !important;
}

.mx-2 {
    margin-left: var(--space-2) !important;
    margin-right: var(--space-2) !important;
}

.mx-3 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
}

.mx-4 {
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
}

.mx-5 {
    margin-left: var(--space-5) !important;
    margin-right: var(--space-5) !important;
}

.mx-6 {
    margin-left: var(--space-6) !important;
    margin-right: var(--space-6) !important;
}

.mx-8 {
    margin-left: var(--space-8) !important;
    margin-right: var(--space-8) !important;
}

.mx-10 {
    margin-left: var(--space-10) !important;
    margin-right: var(--space-10) !important;
}

.mx-12 {
    margin-left: var(--space-12) !important;
    margin-right: var(--space-12) !important;
}

.mx-16 {
    margin-left: var(--space-16) !important;
    margin-right: var(--space-16) !important;
}

.mx-20 {
    margin-left: var(--space-20) !important;
    margin-right: var(--space-20) !important;
}

.mx-24 {
    margin-left: var(--space-24) !important;
    margin-right: var(--space-24) !important;
}

.mx-32 {
    margin-left: var(--space-32) !important;
    margin-right: var(--space-32) !important;
}

.my-1 {
    margin-top: var(--space-1) !important;
    margin-bottom: var(--space-1) !important;
}

.my-2 {
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-2) !important;
}

.my-3 {
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
}

.my-4 {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
}

.my-5 {
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
}

.my-6 {
    margin-top: var(--space-6) !important;
    margin-bottom: var(--space-6) !important;
}

.my-8 {
    margin-top: var(--space-8) !important;
    margin-bottom: var(--space-8) !important;
}

.my-10 {
    margin-top: var(--space-10) !important;
    margin-bottom: var(--space-10) !important;
}

.my-12 {
    margin-top: var(--space-12) !important;
    margin-bottom: var(--space-12) !important;
}

.my-16 {
    margin-top: var(--space-16) !important;
    margin-bottom: var(--space-16) !important;
}

.my-20 {
    margin-top: var(--space-20) !important;
    margin-bottom: var(--space-20) !important;
}

.my-24 {
    margin-top: var(--space-24) !important;
    margin-bottom: var(--space-24) !important;
}

.my-32 {
    margin-top: var(--space-32) !important;
    margin-bottom: var(--space-32) !important;
}


/* ===== FONT WEIGHTS ===== */

.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}


/* ===== FONT STYLES ===== */

.font-normal {
    font-style: normal;
}

.font-italic {
    font-style: italic;
}


/* ===== JOSEFIN SANS COMBINATIONS ===== */

.josefin-thin {
    font-family: 'Josefin Sans', serif;
    font-weight: 100;
    font-style: normal;
}

.josefin-light {
    font-family: 'Josefin Sans', serif;
    font-weight: 300;
    font-style: normal;
}

.josefin-regular {
    font-family: 'Josefin Sans', serif;
    font-weight: 400;
    font-style: normal;
}

.josefin-medium {
    font-family: 'Josefin Sans', serif;
    font-weight: 500;
    font-style: normal;
}

.josefin-semibold {
    font-family: 'Josefin Sans', serif;
    font-weight: 600;
    font-style: normal;
}

.josefin-bold {
    font-family: 'Josefin Sans', serif;
    font-weight: 700;
    font-style: normal;
}

.josefin-italic {
    font-family: 'Josefin Sans', serif;
    font-style: italic;
}

.josefin-thin-italic {
    font-family: 'Josefin Sans', serif;
    font-weight: 100;
    font-style: italic;
}

.josefin-light-italic {
    font-family: 'Josefin Sans', serif;
    font-weight: 300;
    font-style: italic;
}

.josefin-regular-italic {
    font-family: 'Josefin Sans', serif;
    font-weight: 400;
    font-style: italic;
}

.josefin-medium-italic {
    font-family: 'Josefin Sans', serif;
    font-weight: 500;
    font-style: italic;
}

.josefin-semibold-italic {
    font-family: 'Josefin Sans', serif;
    font-weight: 600;
    font-style: italic;
}

.josefin-bold-italic {
    font-family: 'Josefin Sans', serif;
    font-weight: 700;
    font-style: italic;
}


/* ===== TIMES LT STD COMBINATIONS ===== */

.times-regular {
    font-family: 'Times New Roman', serif;
    font-weight: 400;
    font-style: normal;
}

.times-semibold {
    font-family: 'Times New Roman', serif;
    font-weight: 600;
    font-style: normal;
}

.times-bold {
    font-family: 'Times New Roman', serif;
    font-weight: 700;
    font-style: normal;
}

.times-extrabold {
    font-family: 'Times New Roman', serif;
    font-weight: 800;
    font-style: normal;
}

.times-italic {
    font-family: 'Times New Roman', serif;
    font-style: italic;
}

.times-regular-italic {
    font-family: 'Times New Roman PS', serif;
    font-weight: 400;
    font-style: italic;
}

/* .times-regular-italic {
font-family: 'Times New Roman', serif;
font-weight: 400;
font-style: italic;
} */

.times-semibold-italic {
    font-family: 'Times New Roman', serif;
    font-weight: 600;
    font-style: italic;
}

.times-bold-italic {
    font-family: 'Times New Roman', serif;
    font-weight: 700;
    font-style: italic;
}

/* ===== LINE HEIGHTS ===== */

.lh-zero {
    line-height: var(--lh-zero);
}

.lh-small {
    line-height: var(--lh-small);
}

.lh-medium {
    line-height: var(--lh-medium);
}

.lh-base {
    line-height: var(--lh-base);
}

.lh-large {
    line-height: var(--lh-large);
}

.lh-xlarge {
    line-height: var(--lh-xlarge);
}

.lh-none {
    line-height: var(--lh-none);
}

.lh-normal {
    line-height: var(--lh-normal);
}


/* ===== RESPONSIVE BREAKPOINT UTILITIES ===== */


/* Show/hide classes for different devices */

.mobile-only {
    display: block;
}

.tablet-only {
    display: none;
}

.desktop-only {
    display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-only {
        display: none;
    }
    .tablet-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }
}

@media (min-width: 1024px) {
    .mobile-only {
        display: none;
    }
    .tablet-only {
        display: none;
    }
    .desktop-only {
        display: block;
    }
}



/* ===== READY-TO-USE PAGE COMPONENTS ===== */


/* Based on your website design patterns */


/* Hero sections */

.hero-title {
    font-size: var(--hero-title, var(--fs-80));
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-6);
}

.hero-subtitle {
    font-size: var(--hero-subtitle, var(--fs-24));
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-8);
}

.hero-section {
    padding: var(--hero-padding, var(--space-32)) var(--container-padding, var(--space-8));
}


/* Section titles */

.section-title {
    font-size: var(--section-title, var(--fs-52));
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-6);
}

.section-subtitle {
    font-size: var(--section-subtitle, var(--fs-20));
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-8);
}

.section-wrapper {
    padding: var(--section-padding, var(--space-24)) var(--container-padding, var(--space-8));
}


/* Card components */

.card-wrapper {
    padding: var(--card-padding, var(--space-12));
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-base);
}

.card-title {
    font-size: var(--fs-24);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-4);
}

.card-text {
    font-size: var(--fs-16);
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    line-height: var(--lh-relaxed);
}


/* Navigation */

.nav-wrapper {
    height: var(--nav-height, 4.5rem);
    padding: 0 var(--container-padding, var(--space-8));
}



/* ===== REMAINING UTILITIES ===== */


/* Z-Index */

.z-100 {
    z-index: 100;
}

.z-200 {
    z-index: 200;
}

.z-300 {
    z-index: 300;
}

.z-400 {
    z-index: 400;
}

.z-500 {
    z-index: 500;
}

.z-1000 {
    z-index: 1000;
}


/* Gradients */

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-30) 100%);
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-30) 100%);
}

.bg-gradient-hero {
    background: linear-gradient(135deg, var(--primary-10) 0%, var(--informative-10) 100%);
}

.text-gradient-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-30));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Colors */

.text-heading {
    color: var(--heading);
    
}

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

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

.text-body-1 {
    color: var(--text-1);
}

.text-body-2 {
    color: var(--text-2);
}


/*used*/

.text-body-3 {
    color: var(--text-3);
}


/*used*/

.text-body-4 {
    color: var(--text-4);
}

.text-body-5 {
    color: var(--text-5) !important;
}
.text-body-6 {
    color: var(--text-6) !important;
}

/*used*/

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

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


/* Transforms */

.scale-102 {
    transform: scale(1.02);
}

.scale-103 {
    transform: scale(1.03);
}

.scale-98 {
    transform: scale(0.98);
}

.scale-97 {
    transform: scale(0.97);
}


/* Hover effects */

.hover-lift:hover {
    transform: translateY(-4px);
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-20);
}

.group:hover .group-hover-scale {
    transform: scale(1.05);
}

.group:hover .group-hover-fade {
    opacity: 0.75;
}


/* Animations */

.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Border radius */

.rounded-custom-sm {
    border-radius: var(--radius-sm);
}

.rounded-custom-base {
    border-radius: var(--radius-base);
}

.rounded-custom-lg {
    border-radius: var(--radius-lg);
}


/* ===== READY-TO-USE TYPOGRAPHY ===== */

.heading-primary {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

.heading-secondary {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

.body-large {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
}

.body-regular {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
}

.body-small {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.caption {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-xs);
    line-height: var(--lh-tight);
}

.decorative-text {
    font-family: var(--font-decorative);
    font-weight: var(--fw-light);
    font-style: italic;
}


/* ===== Z-INDEX ===== */

.z-100 {
    z-index: 100;
}

.z-200 {
    z-index: 200;
}

.z-300 {
    z-index: 300;
}

.z-400 {
    z-index: 400;
}

.z-500 {
    z-index: 500;
}

.z-1000 {
    z-index: 1000;
}



/* ===== COLORS ===== */

.text-heading {
    color: var(--heading);
}

.text-body-1 {
    color: var(--text-1);
}

.text-body-2 {
    color: var(--text-2);
}

.text-body-3 {
    color: var(--text-3);
}

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

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


/* ===== ORGANIZED COLOR UTILITY CLASSES ===== */


/* 1. PRIMARY COLORS (Orange Gradient) */

.text-primary {
    color: var(--primary) !important;
}

.text-primary-50 {
    color: var(--primary-50) !important;
}

.text-primary-30 {
    color: var(--primary-30) !important;
}

.text-primary-20 {
    color: var(--primary-20) !important;
}

.text-primary-10 {
    color: var(--primary-10) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-50 {
    background-color: var(--primary-50) !important;
}

.bg-primary-30 {
    background-color: var(--primary-30) !important;
}

.bg-primary-20 {
    background-color: var(--primary-20) !important;
}

.bg-primary-10 {
    background-color: var(--primary-10) !important;
}

.hover-text-primary:hover {
    color: var(--primary) !important;
}

.hover-bg-primary:hover {
    background-color: var(--primary) !important;
}

.hover-bg-primary-10:hover {
    background-color: var(--primary-10) !important;
}

.outline-primary {
    outline-color: var(--primary) !important;
}

.outline-primary-50 {
    outline-color: var(--primary-50) !important;
}

.outline-primary-30 {
    outline-color: var(--primary-30) !important;
}

.outline-primary-20 {
    outline-color: var(--primary-20) !important;
}

.outline-primary-10 {
    outline-color: var(--primary-10) !important;
}

.shadow-primary {
    box-shadow: 0 0 0 3px var(--primary-20) !important;
}


/* 2. SECONDARY COLORS (Dark Gradient) */

.text-secondary {
    color: var(--secondary) !important;
}


/* used */

.text-secondary-50 {
    color: var(--secondary-50) !important;
}

.text-secondary-30 {
    color: var(--secondary-30) !important;
}

.text-secondary-20 {
    color: var(--secondary-20) !important;
}

.text-secondary-10 {
    color: var(--secondary-10) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.bg-secondary-80 {
    background-color: var(--secondary-80) !important;
}


/* used */

.bg-secondary-50 {
    background-color: var(--secondary-50) !important;
}

.bg-secondary-30 {
    background-color: var(--secondary-30) !important;
}

.bg-secondary-20 {
    background-color: var(--secondary-20) !important;
}

.bg-secondary-10 {
    background-color: var(--secondary-10) !important;
}

.hover-text-secondary:hover {
    color: var(--secondary) !important;
}

.hover-bg-secondary:hover {
    background-color: transparent !important;
}

.hover-bg-secondary-10:hover {
    background-color: var(--secondary-10) !important;
}

.outline-secondary {
    outline-color: var(--secondary) !important;
}

.outline-secondary-50 {
    outline-color: var(--secondary-50) !important;
}

.outline-secondary-30 {
    outline-color: var(--secondary-30) !important;
}

.outline-secondary-20 {
    outline-color: var(--secondary-20) !important;
}

.outline-secondary-10 {
    outline-color: var(--secondary-10) !important;
}

.shadow-secondary {
    box-shadow: 0 0 0 3px var(--secondary-20) !important;
}


/* 3. INFORMATIVE COLORS (Blue Gradient) */

.text-informative {
    color: var(--informative) !important;
}

.text-informative-50 {
    color: var(--informative-50) !important;
}

.text-informative-40 {
    color: var(--informative-40) !important;
}

.text-informative-30 {
    color: var(--informative-30) !important;
}

.text-informative-20 {
    color: var(--informative-20) !important;
}

.text-informative-10 {
    color: var(--informative-10) !important;
}

.bg-informative {
    background-color: var(--informative) !important;
}

.bg-informative-50 {
    background-color: var(--informative-50) !important;
}

.bg-informative-40 {
    background-color: var(--informative-40) !important;
}

.bg-informative-30 {
    background-color: var(--informative-30) !important;
}

.bg-informative-20 {
    background-color: var(--informative-20) !important;
}

.bg-informative-10 {
    background-color: var(--informative-10) !important;
}

.hover-text-informative:hover {
    color: var(--informative) !important;
}

.hover-bg-informative:hover {
    background-color: var(--informative) !important;
}

.hover-bg-informative-10:hover {
    background-color: var(--informative-10) !important;
}

.outline-informative {
    outline-color: var(--informative) !important;
}

.outline-informative-50 {
    outline-color: var(--informative-50) !important;
}

.outline-informative-40 {
    outline-color: var(--informative-40) !important;
}

.outline-informative-30 {
    outline-color: var(--informative-30) !important;
}

.outline-informative-20 {
    outline-color: var(--informative-20) !important;
}

.outline-informative-10 {
    outline-color: var(--informative-10) !important;
}

.shadow-informative {
    box-shadow: 0 0 0 3px var(--informative-20) !important;
}


/* 4. SUCCESS COLORS (Green Gradient) */

.text-success {
    color: var(--success) !important;
}

.text-success-50 {
    color: var(--success-50) !important;
}

.text-success-40 {
    color: var(--success-40) !important;
}

.text-success-30 {
    color: var(--success-30) !important;
}

.text-success-20 {
    color: var(--success-20) !important;
}

.text-success-10 {
    color: var(--success-10) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-success-50 {
    background-color: var(--success-50) !important;
}

.bg-success-40 {
    background-color: var(--success-40) !important;
}

.bg-success-30 {
    background-color: var(--success-30) !important;
}

.bg-success-20 {
    background-color: var(--success-20) !important;
}

.bg-success-10 {
    background-color: var(--success-10) !important;
}

.hover-text-success:hover {
    color: var(--success) !important;
}

.hover-bg-success:hover {
    background-color: var(--success) !important;
}

.hover-bg-success-10:hover {
    background-color: var(--success-10) !important;
}

.outline-success {
    outline-color: var(--success) !important;
}

.outline-success-50 {
    outline-color: var(--success-50) !important;
}

.outline-success-40 {
    outline-color: var(--success-40) !important;
}

.outline-success-30 {
    outline-color: var(--success-30) !important;
}

.outline-success-20 {
    outline-color: var(--success-20) !important;
}

.outline-success-10 {
    outline-color: var(--success-10) !important;
}

.shadow-success {
    box-shadow: 0 0 0 3px var(--success-20) !important;
}


/* 5. ALERT COLORS (Red Gradient) */

.text-alert {
    color: var(--alert) !important;
}

.text-alert-50 {
    color: var(--alert-50) !important;
}

.text-alert-40 {
    color: var(--alert-40) !important;
}

.text-alert-30 {
    color: var(--alert-30) !important;
}

.text-alert-20 {
    color: var(--alert-20) !important;
}

.text-alert-10 {
    color: var(--alert-10) !important;
}

.bg-alert {
    background-color: var(--alert) !important;
}

.bg-alert-50 {
    background-color: var(--alert-50) !important;
}

.bg-alert-40 {
    background-color: var(--alert-40) !important;
}

.bg-alert-30 {
    background-color: var(--alert-30) !important;
}

.bg-alert-20 {
    background-color: var(--alert-20) !important;
}

.bg-alert-10 {
    background-color: var(--alert-10) !important;
}

.hover-text-alert:hover {
    color: var(--alert) !important;
}

.hover-bg-alert:hover {
    background-color: var(--alert) !important;
}

.hover-bg-alert-10:hover {
    background-color: var(--alert-10) !important;
}

.outline-alert {
    outline-color: var(--alert) !important;
}

.outline-alert-50 {
    outline-color: var(--alert-50) !important;
}

.outline-alert-40 {
    outline-color: var(--alert-40) !important;
}

.outline-alert-30 {
    outline-color: var(--alert-30) !important;
}

.outline-alert-20 {
    outline-color: var(--alert-20) !important;
}

.outline-alert-10 {
    outline-color: var(--alert-10) !important;
}

.shadow-alert {
    box-shadow: 0 0 0 3px var(--alert-20) !important;
}


/* 6. WARNING COLORS (Yellow Gradient) */

.text-warning {
    color: var(--warning) !important;
}

.text-warning-50 {
    color: var(--warning-50) !important;
}

.text-warning-40 {
    color: var(--warning-40) !important;
}

.text-warning-30 {
    color: var(--warning-30) !important;
}

.text-warning-20 {
    color: var(--warning-20) !important;
}

.text-warning-10 {
    color: var(--warning-10) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
}

.bg-warning-50 {
    background-color: var(--warning-50) !important;
}

.bg-warning-40 {
    background-color: var(--warning-40) !important;
}

.bg-warning-30 {
    background-color: var(--warning-30) !important;
}

.bg-warning-20 {
    background-color: var(--warning-20) !important;
}

.bg-warning-10 {
    background-color: var(--warning-10) !important;
}

.hover-text-warning:hover {
    color: var(--warning) !important;
}

.hover-bg-warning:hover {
    background-color: var(--warning) !important;
}

.hover-bg-warning-10:hover {
    background-color: var(--warning-10) !important;
}

.outline-warning {
    outline-color: var(--warning) !important;
}

.outline-warning-50 {
    outline-color: var(--warning-50) !important;
}

.outline-warning-40 {
    outline-color: var(--warning-40) !important;
}

.outline-warning-30 {
    outline-color: var(--warning-30) !important;
}

.outline-warning-20 {
    outline-color: var(--warning-20) !important;
}

.outline-warning-10 {
    outline-color: var(--warning-10) !important;
}

.shadow-warning {
    box-shadow: 0 0 0 3px var(--warning-20) !important;
}


/* 7. OTHER COLORS (Neutrals & Text) */


/* Text Colors - Neutrals */

.text-white {
    color: var(--white) !important;
}

.text-bg-light {
    color: var(--bg-light) !important;
}

.text-bg-dark {
    color: var(--bg-dark) !important;
}

.text-outline {
    color: var(--outline) !important;
}


/* Text Colors - Direct Classes */

.text-heading {
    color: var(--heading) !important;
    line-height: normal;
}

.text-1 {
    color: var(--text-1) !important;
}

.text-2 {
    color: var(--text-2) !important;
}

.text-3 {
    color: var(--text-3) !important;
}


/* Background Colors - Neutrals */

.bg-white {
    background-color: var(--white) !important;
}

.bg-light {
    background-color: var(--bg-light) !important;
}

.bg-dark {
    background-color: var(--bg-dark) !important;
}

.bg-outline {
    background-color: var(--outline) !important;
}


/* Background Colors - Text Colors */

.bg-heading {
    background-color: var(--heading) !important;
}

.bg-text-1 {
    background-color: var(--text-1) !important;
}

.bg-text-2 {
    background-color: var(--text-2) !important;
}

.bg-text-3 {
    background-color: var(--text-3) !important;
}


/* Hover Colors - Neutrals */

.hover-text-heading:hover {
    color: var(--heading) !important;
}

.hover-text-1:hover {
    color: var(--text-1) !important;
}

.hover-text-2:hover {
    color: var(--text-2) !important;
}

.hover-text-3:hover {
    color: var(--text-3) !important;
}

.hover-text-white:hover {
    color: var(--white) !important;
}

.hover-bg-white:hover {
    background-color: var(--white) !important;
}

.hover-bg-light:hover {
    background-color: var(--bg-light) !important;
}

.hover-bg-dark:hover {
    background-color: var(--bg-dark) !important;
}

.hover-bg-outline:hover {
    background-color: var(--outline) !important;
}

.hover-bg-heading:hover {
    background-color: var(--heading) !important;
}

.hover-bg-text-1:hover {
    background-color: var(--text-1) !important;
}

.hover-bg-text-2:hover {
    background-color: var(--text-2) !important;
}

.hover-bg-text-3:hover {
    background-color: var(--text-3) !important;
}


/* Outline Colors - Neutrals */

.outline-white {
    outline-color: var(--white) !important;
}

.outline-light {
    outline-color: var(--bg-light) !important;
}

.outline-dark {
    outline-color: var(--bg-dark) !important;
}

.outline-gray {
    outline-color: var(--outline) !important;
}

.outline-heading {
    outline-color: var(--heading) !important;
}

.outline-text-1 {
    outline-color: var(--text-1) !important;
}

.outline-text-2 {
    outline-color: var(--text-2) !important;
}

.outline-text-3 {
    outline-color: var(--text-3) !important;
}


/* Shadow Colors - Neutrals */

.shadow-heading {
    box-shadow: 0 0 0 3px var(--heading) !important;
}

.shadow-text-1 {
    box-shadow: 0 0 0 3px var(--text-1) !important;
}

.shadow-text-2 {
    box-shadow: 0 0 0 3px var(--text-2) !important;
}

.shadow-text-3 {
    box-shadow: 0 0 0 3px var(--text-3) !important;
}

.shadow-white {
    box-shadow: 0 0 0 3px var(--white) !important;
}

.shadow-outline {
    box-shadow: 0 0 0 3px var(--outline) !important;
}


/* Legacy Classes for Compatibility */

.text-body-1 {
    color: var(--text-1);
}

.text-body-2 {
    color: var(--text-2);
}

.text-body-3 {
    color: var(--text-3);
}

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


/* ===== TRANSFORMS ===== */

.scale-102 {
    transform: scale(1.02);
}

.scale-103 {
    transform: scale(1.03);
}

.scale-98 {
    transform: scale(0.98);
}

.scale-97 {
    transform: scale(0.97);
}


/* ===== HOVER EFFECTS ===== */

.hover-lift:hover {
    transform: translateY(-4px);
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-20);
}

.group:hover .group-hover-scale {
    transform: scale(1.05);
}

.group:hover .group-hover-fade {
    opacity: 0.75;
}

.iti.iti--allow-dropdown.iti--show-flags.iti--inline-dropdown {
    width: 100% !important;
}
/* ===== ANIMATIONS ===== */
.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ===== BORDER RADIUS ===== */

.rounded-custom-sm {
    border-radius: var(--radius-sm);
}

.rounded-custom-base {
    border-radius: var(--radius-base);
}

.rounded-custom-lg {
    border-radius: var(--radius-lg);
}