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


/* ===== 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);
}

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

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

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


/* Legacy responsive fonts */

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

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

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

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

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

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

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

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

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

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

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


/* Fixed sizes for precise control - Mobile */

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

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

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

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

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

.fs-24-mobile {
    font-size: z;
}

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

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

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

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

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

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

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

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

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


/* Fixed sizes for precise control - Tablet */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* Fixed sizes for precise control - Desktop */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ===== 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 LT Std', serif;
    font-weight: 400;
    font-style: normal;
}

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

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

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

.times-italic {
    font-family: 'Times LT Std', serif;
    font-style: italic;
}

.times-regular-italic {
    font-family: 'Times LT Std', serif;
    font-weight: 400;
    font-style: italic;
}

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

.times-bold-italic {
    font-family: 'Times LT Std', 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;
    }
}


/* Device-specific spacing overrides */

@media (max-width: 767px) {
    .p-mobile-2 {
        padding: var(--space-2-mobile);
    }
    .p-mobile-4 {
        padding: var(--space-4-mobile);
    }
    .p-mobile-6 {
        padding: var(--space-6-mobile);
    }
    .p-mobile-8 {
        padding: var(--space-8-mobile);
    }
    .p-mobile-12 {
        padding: var(--space-12-mobile);
    }
    .p-mobile-16 {
        padding: var(--space-16-mobile);
    }
    .m-mobile-2 {
        margin: var(--space-2-mobile);
    }
    .m-mobile-4 {
        margin: var(--space-4-mobile);
    }
    .m-mobile-6 {
        margin: var(--space-6-mobile);
    }
    .m-mobile-8 {
        margin: var(--space-8-mobile);
    }
    .m-mobile-12 {
        margin: var(--space-12-mobile);
    }
    .m-mobile-16 {
        margin: var(--space-16-mobile);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .p-tablet-4 {
        padding: var(--space-4-tablet);
    }
    .p-tablet-6 {
        padding: var(--space-6-tablet);
    }
    .p-tablet-8 {
        padding: var(--space-8-tablet);
    }
    .p-tablet-12 {
        padding: var(--space-12-tablet);
    }
    .p-tablet-16 {
        padding: var(--space-16-tablet);
    }
    .p-tablet-20 {
        padding: var(--space-20-tablet);
    }
    .m-tablet-4 {
        margin: var(--space-4-tablet);
    }
    .m-tablet-6 {
        margin: var(--space-6-tablet);
    }
    .m-tablet-8 {
        margin: var(--space-8-tablet);
    }
    .m-tablet-12 {
        margin: var(--space-12-tablet);
    }
    .m-tablet-16 {
        margin: var(--space-16-tablet);
    }
    .m-tablet-20 {
        margin: var(--space-20-tablet);
    }
}

@media (min-width: 1024px) {
    .p-desktop-6 {
        padding: var(--space-6-desktop);
    }
    .p-desktop-8 {
        padding: var(--space-8-desktop);
    }
    .p-desktop-12 {
        padding: var(--space-12-desktop);
    }
    .p-desktop-16 {
        padding: var(--space-16-desktop);
    }
    .p-desktop-20 {
        padding: var(--space-20-desktop);
    }
    .p-desktop-24 {
        padding: var(--space-24-desktop);
    }
    .p-desktop-32 {
        padding: var(--space-32-desktop);
    }
    .m-desktop-6 {
        margin: var(--space-6-desktop);
    }
    .m-desktop-8 {
        margin: var(--space-8-desktop);
    }
    .m-desktop-12 {
        margin: var(--space-12-desktop);
    }
    .m-desktop-16 {
        margin: var(--space-16-desktop);
    }
    .m-desktop-20 {
        margin: var(--space-20-desktop);
    }
    .m-desktop-24 {
        margin: var(--space-24-desktop);
    }
    .m-desktop-32 {
        margin: var(--space-32-desktop);
    }
}


/* ===== 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));
}


/* .nav-link { 
font-size: var(--nav-font-size, var(--fs-18)); 
font-family: var(--font-body); 
font-weight: var(--fw-normal); 
} */


/* Typography patterns from your site */

.expertise-title {
    font-size: var(--fs-48);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--heading);
}

.service-title {
    font-size: var(--fs-24);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--heading);
}

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

.client-name {
    font-size: var(--fs-16);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--heading);
}

.tech-stack-title {
    font-size: var(--fs-32);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--heading);
}

.faq-question {
    font-size: var(--fs-18);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--heading);
}

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


/* ===== 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;
}


/*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;
}


/* ===== 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);
}

.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: var(--secondary) !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;
}

.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);
}