/*
 * style.css — Deduplicated & Organised
 * Generated from multiple page inline styles.
 * Original: ~72,000 lines → clean single source.
 *
 * TABLE OF CONTENTS
 *   1. CSS Custom Properties
 *   2. Base Reset
 *   3. Keyframe Animations
 *   4. Universal Header & Navbar
 *   5. Mega Menu & Dropdowns
 *   6. Universal Footer (Scoped Overrides)
 *   7. Footer Base Styles
 *   8. Strategic Alliances Marquee
 *   9. Banking & Finance Page
 *  10. Consumer Products Page
 *  11. Education Page
 *  12. Blog Page
 *  13. About Us & Contact Page
 *  14. Shared Hero / Service / Pastel Sections
 *  15. Connect With Us — Dark Form
 *  16. Shared Utilities & Misc
 *  17. Responsive — Media Queries
 */



/* ============================================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================ */


:root {

    --primary: #1565ff;
    --primary-dark: #0d47a1;

    --white: #ffffff;

    --text: #111827;
    --text-light: #6b7280;

    --border: #e5e7eb;

    --bg: #ffffff;
    --bg-light: #f8fbff;

    --shadow: 0 10px 35px rgba(0, 0, 0, .08);

}


:root {
    --primary-blue: #1155cc;
    --light-blue: #eff6ff;
    --text-dark: #0f172a;
    --text-gray: #475569;
    --border-color: #e2e8f0;
    --bg-dark: #050505;
}


:root {
    --primary-blue: #1155cc;
    --light-blue: #eff6ff;
    --text-dark: #0f172a;
    --text-gray: #475569;
    --border-color: #e2e8f0;
}


:root {
    --bf-blue: #1565ff;
    --bf-blue-dark: #0d47c7;
    --bf-light: #f5f8ff;
    --bf-text: #111827;
    --bf-grey: #5f6673;
    --bf-border: #e3e8f0;
}


:root {
    --cp-primary: #1565ff;
    --cp-primary-dark: #0d47c7;
    --cp-dark: #172033;
    --cp-text: #5f6775;
    --cp-light: #f5f8ff;
    --cp-white: #ffffff;
    --cp-border: #e6ebf3;
}


:root {
    --primary-blue: #1155cc;
    --light-blue: #eff6ff;
    --text-dark: #0f172a;
    --text-gray: #475569;
    --border-color: #222222;
}


:root {
    --bg-base: #040811;
    --blue-dark: #0f172a;
    --blue-primary: #2563eb;
    --cyan-neon: #00f6ff;
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
    --smooth-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


:root {
    --primary-blue: #1565ff;
    --dark-blue: #0b3d91;
    --deep-blue: #071b3a;
    --light-blue: #eef5ff;
    --text-dark: #111827;
    --text-grey: #5f6673;
    --white: #ffffff;
    --border: #e5e7eb;
}


:root {
    --primary-blue: #1155cc;
    --light-blue: #eff6ff;
    --text-dark: #0f172a;
    --text-gray: #475569;
    --border-color: #222222;
    --bg-dark: #050505;
}



/* ============================================================
   2. BASE RESET & GLOBAL DEFAULTS
   ============================================================ */


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


html {

    scroll-behavior: smooth;

}


body {

    font-family: 'Plus Jakarta Sans', sans-serif;

    background: var(--white);

    color: var(--text);

    overflow-x: hidden;

    line-height: 1.7;

}


a {

    text-decoration: none;
    color: inherit;

}


ul {

    list-style: none;

}


button {

    border: none;
    outline: none;
    background: none;
    cursor: pointer;

}


html {
    scroll-behavior: smooth
}


body {
    overflow-x: hidden
}


* {
    box-sizing: border-box !important;
    min-width: 0 !important;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    color: #111827;
    background: #ffffff;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
    scroll-behavior: smooth;
}


body {
    background-color: #ffffff;
    color: #1a1a1a;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}


button {
    cursor: pointer;
    outline: none;
    border: none;
    font-family: inherit;
}


body {
    background-color: #000000;
    color: #ffffff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}


button {
    cursor: pointer;
    font-family: inherit;
    outline: none;
    border: none;
}


body, p, input, button, select, textarea {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6, .brand-heading {
    font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
}

h1, h2 {
    line-height: 1.25;
}

h3, h4 {
    line-height: 1.35;
}

p {
    line-height: 1.6;
}


a {
    text-decoration: none;
}



/* ============================================================
   3. KEYFRAME ANIMATIONS
   ============================================================ */


@keyframes heroFloat {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-16px);

    }

    100% {

        transform: translateY(0px);

    }

}


@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes industryFade {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes floatCard {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}


@keyframes floatUpDown {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}


@keyframes autoBlink {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
        border-color: inherit;
    }

    50% {
        box-shadow: 0 0 22px rgba(59, 130, 246, 0.45);
        border-color: #3b82f6;
    }
}


@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}


@keyframes flashGlow {
    0% {
        transform: translateX(-150%) skewX(-25deg);
    }

    50%,
    100% {
        transform: translateX(250%) skewX(-25deg);
    }
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes scrollLeftFixed {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(calc(-50% - 24px))
    }
}


@keyframes scrollRightFixed {
    from {
        transform: translateX(calc(-50% - 24px))
    }

    to {
        transform: translateX(0)
    }
}



/* ============================================================
   4. UNIVERSAL HEADER & NAVBAR
   ============================================================ */


header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    background: #fff;

    box-shadow: 0 2px 18px rgba(0, 0, 0, .06);

    z-index: 99999;

    transition: .35s;

}


#universal-header,
.navbar {
    overflow: visible !important;
}


#universal-header .mega-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    background: #eef5ff !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important
}


#universal-header .mega-icon svg {
    width: 22px !important;
    height: 22px !important
}


header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}


.btn-quote {
    background-color: var(--primary-blue);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}


.btn-quote:hover {
    background-color: #0b3d99;
    transform: translateY(-2px);
}


#universal-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}


.btn-quote {
    background-color: var(--primary-blue);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
}


#universal-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    font-family: 'Plus Jakarta Sans', sans-serif;
}


#dark-header-deprecated {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid #222;
}


.btn-quote {
    background-color: var(--primary-blue);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}



/* ============================================================
   5. MEGA MENU & DROPDOWNS
   ============================================================ */


.navbar {

    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 40px;
}


.logo-link {

    display: flex;

    align-items: center;

}


.logo-img {
    height: 80px;
    width: auto;
    display: block;
}


.logo-link {
    flex: 0 0 260px;
}


.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 30px;
    margin: 0 25px;
}


.nav-links li {

    position: relative;

}


.nav-links li a {

    font-size: 15px;

    font-weight: 700;

    color: #111827;

    transition: .3s;

    display: flex;

    align-items: center;

    gap: 6px;

    height: 88px;

}


.nav-links li:hover>a {

    color: #1565ff;

}


.has-mega-menu {
    position: static !important;
}


.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(-50%);
}


.mega-menu {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 999;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}


.mega-menu.about-menu {
    max-width: 800px;
}


.about-mega-grid {
    display: grid;
    grid-template-columns: .45fr .55fr;
}


.about-links {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-right: 1px solid #e2e8f0;
    justify-content: center;
}


.about-links a {
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    transition: .3s;
}


.about-links a:hover {
    background: #eff6ff;
    color: #1565ff;
    padding-left: 20px;
}


.about-insight {
    padding: 30px;
    background: #fafafa;
}


.about-insight img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}


.mega-menu.services-menu,
.mega-menu.industries-menu {
    max-width: 1100px;
}


.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 35px;
}


.mega-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: .3s;
}


.mega-item:hover {
    background: #eff6ff;
}


.mega-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #1565ff;
    border-radius: 8px;
}


.mega-text {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}


.mega-item:hover .mega-text {
    color: #1565ff;
}


.header-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 20px;
    gap: 6px;
}


.contact-item {

    display: flex;

    align-items: center;

    gap: 10px;

}


.contact-item i {

    font-size: 18px;

    color: #1565ff;

}


.contact-item svg {

    width: 18px;

    height: 18px;

    color: #1565ff;

}


.contact-item a {

    font-size: 15px;

    font-weight: 600;

    color: #111827;

    white-space: nowrap;

}


header .navbar {
    height: 90px !important;
    padding: 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1450px !important;
    margin: 0 auto !important;
}


.navbar,
.nav-container {
    gap: 18px
}


.nav-links {
    gap: 22px
}


.navbar {
    position: relative;
}


.mega-menu.services-menu,
.mega-menu.industries-menu {
    width: min(1100px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 100px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
}


.mega-grid {
    box-sizing: border-box;
}


.footer-col ul li,
.about-links a,
.mega-item {
    box-sizing: border-box;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    position: relative;
}


.logo-text {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    gap: 10px;
}


.logo-text span {
    color: var(--text-dark);
}


.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
    height: 100%;
}


.nav-links>li {
    height: 100%;
    padding: 10px 0;
}


.nav-links>li>a {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    transition: color 0.3s;
    position: relative;
    padding-bottom: 25px;
}


.nav-links>li>a:hover,
.nav-links li.active>a {
    color: var(--primary-blue);
}


/* .nav-links li.active a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-blue);
} */


.mega-menu {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 100%;
    max-width: 1000px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    border: 1px solid var(--border-color);
    overflow: hidden;
}


.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 40px;
}


.menu-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.menu-section-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-dark);
    text-transform: uppercase;
    margin-bottom: 10px;
    border-left: 3px solid var(--primary-blue);
    padding-left: 8px;
}


.menu-list li {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: color 0.2s;
}


.menu-list li:hover {
    color: var(--primary-blue);
}


.about-mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 30px;
    gap: 40px;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    max-width: 1450px;
    margin: 0 auto;
    position: relative;
    height: 76px;
}


.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}


.nav-links>li {
    height: 100%;
    display: flex;
    align-items: center;
}


.nav-links>li>a {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
    padding: 35px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.nav-links>li>a:hover {
    color: var(--primary-blue);
}


.header-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    border-left: 2px solid #e2e8f0;
    padding-left: 20px;
    height: 50px;
}


.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
}


.contact-item svg {
    color: var(--primary-blue);
    width: 15px;
    height: 15px;
}


.contact-item a {
    color: #000000;
    text-decoration: none;
    transition: 0.3s;
}


.contact-item a:hover {
    color: var(--primary-blue);
}


.mega-menu {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}


.about-mega-grid {
    display: grid;
    grid-template-columns: 0.45fr 0.55fr;
}


.about-links a {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    padding: 12px;
    border-radius: 6px;
    transition: 0.3s;
}


.about-links a:hover {
    background: var(--light-blue);
    color: var(--primary-blue);
    padding-left: 20px;
}


.about-insight {
    padding: 30px;
    background: #fafafa;
    display: flex;
    align-items: center;
}


.about-insight img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}


.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 35px;
}


.mega-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    transition: 0.3s;
    cursor: pointer;
    text-decoration: none;
}


.mega-item:hover {
    background: var(--light-blue);
}


.mega-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    background: var(--light-blue);
    border-radius: 8px;
    flex-shrink: 0;
}


.mega-icon svg {
    width: 18px;
    height: 18px;
}


.mega-text {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    transition: 0.3s;
}


.mega-item:hover .mega-text {
    color: var(--primary-blue);
}


.mega-menu {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 100%;
    max-width: 1200px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    border: 1px solid var(--border-color);
    overflow: hidden;
}


.mega-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 40px;
    background: #fff;
}


.mega-service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    transition: 0.3s;
    cursor: pointer;
}


.mega-service-item:hover {
    background: var(--light-blue);
}


.mega-service-icon {
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
}


.mega-service-icon svg {
    width: 18px;
    height: 18px;
}


.mega-service-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}


.mega-service-item:hover .mega-service-text {
    color: var(--primary-blue);
}


.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}


.logo-img {
    height: 80px;
    width: auto;
    object-fit: contain;
}


.nav-links>li>a:hover {
    color: #1155cc;
}


.contact-item svg {
    color: #1155cc;
    width: 15px;
    height: 15px;
}


.contact-item a:hover {
    color: #1155cc;
}


.about-links a:hover {
    background: #eff6ff;
    color: #1155cc;
    padding-left: 20px;
}


.mega-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1155cc;
    background: #eff6ff;
    border-radius: 8px;
    flex-shrink: 0;
}


.mega-item:hover .mega-text {
    color: #1155cc;
}


.logo-text span {
    color: #ffffff;
}


.nav-links>li>a {
    font-size: 14px;
    font-weight: 600;
    /* color: #ffffff; */
    transition: color 0.3s;
    position: relative;
    padding-bottom: 25px;
}


.mega-menu {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 100%;
    max-width: 1000px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    border: 1px solid #222;
    overflow: hidden;
}


.about-mega-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    padding: 30px;
    gap: 40px;
}


.mega-menu-cta {
    background-color: #fefce8;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #fef08a;
}


.logo-img {
    height: 44px;
    width: auto;
    object-fit: contain;
}


.mega-menu {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 100%;
    max-width: 1100px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    border: 1px solid var(--border-color);
    overflow: hidden;
}


.menu-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.menu-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    position: relative;
}



/* ============================================================
   6. UNIVERSAL FOOTER (SCOPED OVERRIDES)
   ============================================================ */


.universal-footer .footer-container {
    max-width: 1350px !important
}


.universal-footer .footer-logo {
    height: 78px !important
}


.universal-footer .footer-top-row {
    margin-bottom: 22px !important
}


.universal-footer .location-map-wrap {
    margin-top: 18px !important
}


.universal-footer .footer-links-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 64px !important
}


.universal-footer {
    background-color: #FFF;
    color: #000;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 50px 40px 20px !important;
    border-top: 3px solid #1155cc
}


.universal-footer .footer-container {
    max-width: 1350px !important;
    margin: 0 auto
}


.universal-footer .footer-top-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap;
    gap: 36px;
    padding-bottom: 32px !important;
    border-bottom: none !important
}

@media only screen and (min-width: 768px) {
    .universal-footer .footer-top-row {
        padding-bottom: 0px !important;
    }
}


.universal-footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    flex: 0 0 360px;
    max-width: 360px
}


.universal-footer .footer-logo {
    height: 62px !important;
    width: auto;
    object-fit: contain;
    align-self: flex-start
}


.universal-footer .footer-tagline {
    font-size: 14px;
    font-weight: 600;
    color: #475569 !important;
    line-height: 1.65;
    text-align: left;
    margin: 0
}


.universal-footer .footer-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px
}


.universal-footer .social-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    padding: 8px 16px;
    border-radius: 22px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: .25s ease;
    cursor: pointer
}


.universal-footer .social-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0
}


.universal-footer .social-btn:hover {
    background: #1155cc;
    border-color: #1155cc;
    color: #fff
}


.universal-footer .footer-office-card {
    flex: 1;
    min-width: 420px;
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1.5fr);
    gap: 34px;
    align-items: start;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 28px
}


.universal-footer .footer-office-left .loc-flag {
    display: inline-flex;
    margin-bottom: 14px
}


.universal-footer .footer-office-left .loc-flag svg {
    width: 36px;
    height: 24px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #e2e8f0
}


.universal-footer .footer-office-left h4 {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px
}


.universal-footer .footer-office-left p {
    font-size: 14px;
    color: #475569;
    line-height: 1.65;
    margin: 0
}


.universal-footer .footer-office-left p strong {
    color: #0f172a;
    display: block;
    margin-bottom: 5px;
    font-weight: 700
}


.universal-footer .footer-office-map {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    min-height: 250px;
    height: 100%
}


.universal-footer .footer-office-map iframe {
    width: 100%;
    height: 100%;
    min-height: 250px;
    border: 0;
    display: block
}


.universal-footer .footer-links-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
    padding: 26px 0 !important;
    border-bottom: none !important
}


.universal-footer .footer-col h5 {
    font-size: 17px;
    font-weight: 800;
    color: #000;
    margin: 0 0 15px
}

.universal-footer.dark-footer .footer-col h5 {
    color: #f8fafc !important;
}


.universal-footer .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0
}


.universal-footer .footer-col ul li {
    margin-bottom: 9px
}


.universal-footer .footer-col ul li a {
    color: #444;
    font-size: 14.5px;
    font-weight: 400;
    text-decoration: none;
    transition: .25s;
    display: inline-block
}

.universal-footer.dark-footer .footer-col ul li a {
    color: #cbd5e1 !important;
}


.universal-footer .footer-col ul li a:hover {
    color: #000;
    transform: translateX(4px)
}

.universal-footer.dark-footer .footer-col ul li a:hover {
    color: #60a5fa !important;
}


.universal-footer .footer-bottom {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    padding-top: 16px !important;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
    gap: 10px;
    text-align: center;
    border-top: none !important
}


.universal-footer .footer-bottom p {
    width: 100%;
    margin: 0 auto;
    text-align: center
}


.universal-footer.dark-footer {
    background-color: #020617;
    /* Deep Dark Blue/Black Theme */
    color: #f8fafc;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 80px 40px 30px 40px;
    border-top: 1px solid #1e293b;
}

.universal-footer.dark-footer .footer-col h5 {
    color: #f8fafc !important;
}

.universal-footer.dark-footer .footer-col ul li a {
    color: #cbd5e1 !important;
}

.universal-footer.dark-footer .footer-col ul li a:hover {
    color: #60a5fa !important;
}


.universal-footer .footer-locations {
    width: min(520px, 100%) !important;
    grid-template-columns: 1fr !important;
    margin: 0 0 50px auto !important
}


.universal-footer .location-card {
    padding: 22px !important
}


.universal-footer .embed-map-responsive {
    padding-bottom: 52% !important
}



/* ============================================================
   7. FOOTER BASE STYLES
   ============================================================ */


.footer-top {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 50px;

    margin-bottom: 50px;

}


.footer-brand p {

    color: #cbd5e1;

    line-height: 1.8;

}


.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, .08);

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

}


.footer-links-row {
    align-items: start
}


footer {
    background-color: #050505;
    padding: 50px 0;
    border-top: 1px solid #111;
    color: #888;
}


.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}


.footer-brand h3 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}


.footer-brand p {
    color: #888;
    font-size: 14px;
    max-width: 400px;
}


.loc-card {
    background: #111;
    border: 1px solid #222;
    padding: 25px;
    border-radius: 12px;
    max-width: 420px;
    margin: 40px 0;
}


.loc-card h4 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 700;
    color: #fff;
}


.loc-card p {
    font-size: 13px;
    color: #aaa;
    line-height: 1.6;
}


.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    border-top: 1px solid #222;
    padding-top: 50px;
}


.footer-col h5 {
    font-size: 15px;
    margin-bottom: 18px;
    color: #fff;
}


.footer-col ul li {
    margin-bottom: 10px;
    font-size: 13px;
}


.footer-col ul li a {
    color: #888;
    transition: 0.3s;
}


.footer-col ul li a:hover {
    color: var(--primary-blue);
}


.footer-container {
    max-width: 1350px;
    margin: 0 auto;
}


.footer-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    flex-wrap: wrap;
    gap: 20px;
}


.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 450px;
}


.footer-logo {
    height: 45px;
    width: auto;
    object-fit: contain;
}


.footer-tagline {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.6;
}


.footer-socials {
    display: flex;
    gap: 15px;
}


.social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0f172a;
    border: 1px solid #1e293b;
    color: #e2e8f0;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    cursor: pointer;
}


.social-btn:hover {
    background: #1155cc;
    border-color: #1155cc;
    color: #ffffff;
}


.footer-locations {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}


.location-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    padding: 25px;
    transition: 0.3s;
}


.location-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}


.loc-flag {
    font-size: 24px;
    margin-bottom: 15px;
    display: inline-block;
}


.location-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}


.location-card p {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.6;
}


.location-card p strong {
    color: #cbd5e1;
}


.footer-links-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 50px;
    border-bottom: 1px solid #1e293b;
}

.footer-col-child {
    margin-top: 20px;
}

.footer-col h5 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
}


.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.footer-col ul li {
    margin-bottom: 12px;
}


.footer-col ul li a {
    color: #94a3b8;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
}


.footer-col ul li a:hover {
    color: #3b82f6;
    transform: translateX(5px);
}


.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    font-size: 13px;
    color: #64748b;
    flex-wrap: wrap;
    gap: 15px;
}


.footer-bottom-links a {
    color: #64748b;
    text-decoration: none;
    margin-left: 20px;
    transition: 0.3s;
}


.footer-bottom-links a:hover {
    color: #3b82f6;
}


footer {
    background-color: #000;
    padding: 50px 0;
    border-top: 1px solid #111;
    color: #888;
}


.loc-card {
    background: #0a0a0a;
    border: 1px solid #222;
    padding: 25px;
    border-radius: 12px;
    max-width: 420px;
    margin: 40px 0;
}


.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    border-top: 1px solid #222;
    padding-top: 40px;
}


footer {
    background-color: #000000;
    color: #ffffff;
    padding: 50px 0;
    border-top: 1px solid #111;
}


.footer-brand h3 {
    font-size: 24px;
    font-weight: 800;
    color: #1155cc;
    margin-bottom: 10px;
}


.social-btn {
    border: 1px solid #333;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 12px;
    color: #ccc;
    text-decoration: none;
}


.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    border-top: 1px solid #222;
    padding-top: 50px;
}


.footer-col h5 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #fff;
}


.footer-col ul {
    list-style: none;
    padding: 0;
}


.footer-col ul li a {
    color: #888;
    font-size: 13px;
    transition: 0.3s;
    text-decoration: none;
}


.footer-col ul li a:hover {
    color: #1155cc;
}



/* ============================================================
   8. STRATEGIC ALLIANCES MARQUEE
   ============================================================ */


.alliances-section {
    padding: 50px 0;
    background-color: #050505;
    text-align: center;
    overflow: hidden;
}


.alliances-section h2 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 60px;
}


.alliance-marquee-wrapper {
    display: flex;
    width: 200%;
    animation: scrollLeft 28s linear infinite;
}


.alliance-marquee-wrapper.row-right {
    animation: scrollRight 28s linear infinite;
    margin-top: 25px;
}


.alliance-marquee-track {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 50%;
    gap: 40px;
    padding: 0 12px;
}


.alliance-marquee-wrapper:hover {
    animation-play-state: paused;
}


.alliance-card-node {
    background: #121212;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 140px;
    flex-shrink: 0;
}


.alliance-card-node img {
    max-width: 110px;
    max-height: 40px;
    margin-bottom: 12px;
    object-fit: contain;
    /*filter: grayscale(1) brightness(1.5);*/
    transition: 0.3s;
}


.alliance-card-node:hover img {
    /*filter: none;*/
}


.alliance-card-node span {
    font-size: 12px;
    font-weight: 600;
    color: #888;
}


.alliances-section {
    overflow: hidden !important;
    padding: 50px 0 !important
}


.alliances-section h2 {
    margin: 0 auto 58px !important;
    text-align: center !important;
    line-height: 1.35 !important
}


.alliance-marquee-wrapper {
    overflow: hidden !important;
    margin: 0 0 22px !important
}


.alliance-marquee-track {
    display: flex !important;
    gap: 44px !important;
    padding-right: 44px !important;
    flex-shrink: 0 !important
}


.alliance-card-node {
    flex: 0 0 220px !important;
    margin: 0 !important
}


.alliances-section {
    padding: 50px 0;
    background-color: #ffffff;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid #e2e8f0;
}


.alliances-section h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 60px;
}


.alliance-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}


.alliance-marquee-wrapper {
    display: flex;
    width: 200%;
    animation: scrollLeft 30s linear infinite;
}


.alliance-card-node {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 130px;
    flex-shrink: 0;
    transition: 0.3s;
    margin: 0 4px;
}


.alliance-card-node:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: #1155cc;
}


.alliance-card-node img {
    max-width: 120px;
    max-height: 45px;
    margin-bottom: 15px;
    object-fit: contain;
}


.alliance-card-node span {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}


.alliance-marquee-wrapper {
    display: flex !important;
    width: max-content !important;
    overflow: visible !important;
    gap: 48px !important
}


.alliance-marquee-track {
    display: flex !important;
    width: max-content !important;
    min-width: max-content !important;
    gap: 48px !important;
    padding: 0 !important;
    justify-content: flex-start !important
}


.alliance-card-node {
    flex: 0 0 220px !important;
    width: 220px !important;
    box-sizing: border-box !important
}


.alliance-marquee-track {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 50%;
    gap: 24px;
    padding: 0 12px;
}


.alliance-card-node {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 130px;
    flex-shrink: 0;
    transition: 0.3s;
}



/* ============================================================
   9. BANKING & FINANCE PAGE (bf-*)
   ============================================================ */


.bf-section {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--bf-text);
}


.bf-hero {
    padding: 45px 5% 55px;
    background: #fff;
}


.bf-hero-grid {
    max-width: 1600px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
    align-items: center;
}


.bf-hero-content {
    padding: 25px 15px;
}


.bf-hero-content h1 {
    margin: 0 0 30px;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.12;
    font-weight: 750;
    color: var(--bf-text);
}


.bf-title-line {
    width: 100%;
    height: 1px;
    background: #d7dbe2;
    margin-bottom: 30px;
}


.bf-hero-content p {
    margin: 0 0 32px;
    max-width: 720px;
    font-size: 18px;
    line-height: 1.8;
    color: var(--bf-grey);
}


.bf-buttons {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}


.bf-btn {
    min-width: 235px;
    padding: 17px 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: var(--bf-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--bf-blue);
    transition: .3s ease;
}


.bf-btn:hover {
    background: var(--bf-blue-dark);
    border-color: var(--bf-blue-dark);
    transform: translateY(-2px);
}


.bf-btn-outline {
    background: #fff;
    color: var(--bf-blue);
}


.bf-btn-outline:hover {
    color: #fff;
}


.bf-hero-image {
    width: 100%;
    height: 610px;
    overflow: hidden;
    border-radius: 12px;
}


.bf-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.bf-partners {
    padding: 35px 5% 50px;
    background: #fff;
}


.bf-partner-list {
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 25px;
    align-items: center;
}


.bf-partner {
    text-align: center;
}


.bf-partner-name {
    display: block;
    color: #4b5563;
    font-size: 20px;
    font-weight: 700;
}


.bf-partner small {
    display: block;
    margin-top: 7px;
    color: #8a919d;
    font-size: 12px;
}


.bf-enquiry {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    padding: 20px 11px;
    background: var(--bf-blue);
    color: #fff;
    border-radius: 7px 0 0 7px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    writing-mode: vertical-rl;
    transition: .3s ease;
}


.bf-enquiry:hover {
    background: var(--bf-blue-dark);
}


.bf-solutions {
    padding: 80px 5% 95px;
    background: #f7f9fc;
}


.bf-solutions-container {
    max-width: 1500px;
    margin: 0 auto;
}


.bf-section-heading {
    max-width: 1100px;
    margin: 0 auto 50px;
    text-align: center;
}


.bf-section-heading span {
    display: inline-block;
    margin-bottom: 12px;

    color: var(--bf-blue);

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.bf-section-heading h2 {
    margin: 0 0 20px;

    color: var(--bf-text);

    font-size: 40px;
    line-height: 1.25;
    font-weight: 750;
}


.bf-section-heading h2 strong {
    color: var(--bf-blue);
}


.bf-section-heading p {
    max-width: 950px;
    margin: 0 auto;

    color: var(--bf-grey);

    font-size: 16px;
    line-height: 1.8;
}


.bf-solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}


.bf-solution-card {
    padding: 35px;

    background: #ffffff;

    border: 1px solid #e4e9f2;
    border-radius: 12px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.bf-solution-card:hover {
    transform: translateY(-5px);

    border-color: #bfd3ff;

    box-shadow:
        0 15px 35px rgba(21, 101, 255, .10);
}


.bf-solution-icon {
    width: 65px;
    height: 65px;

    margin-bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf4ff;

    border: 1px solid #d4e2ff;
    border-radius: 12px;

    font-size: 30px;

    transition: .3s ease;
}


.bf-solution-card:hover .bf-solution-icon {
    background: var(--bf-blue);

    transform: scale(1.05);
}


.bf-solution-card h3 {
    margin: 0 0 16px;

    color: var(--bf-text);

    font-size: 23px;
    line-height: 1.35;
}


.bf-solution-card p {
    margin: 0;

    color: var(--bf-grey);

    font-size: 16px;
    line-height: 1.75;
}


.bf-solutions-cta {
    margin-top: 45px;

    text-align: center;
}


.bf-solutions-cta .bf-btn {
    min-width: 260px;
}


.bf-specialized {
    padding: 90px 5%;
    background:
        linear-gradient(rgba(5, 35, 90, .93),
            rgba(10, 70, 170, .90)),
        url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1800&q=85") center/cover no-repeat;
}


.bf-specialized-container {
    max-width: 1500px;
    margin: auto;
}


.bf-specialized-heading {
    max-width: 1150px;
    margin: 0 auto 45px;
    text-align: center;
}


.bf-specialized-heading h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 38px;
    line-height: 1.3;
}


.bf-specialized-heading p {
    margin: 0 auto;
    max-width: 850px;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    line-height: 1.8;
}


.bf-specialized-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}


.bf-specialized-card {
    min-height: 330px;
    padding: 32px 25px;

    background: #fff;

    border-radius: 12px;
    border-top: 4px solid var(--bf-blue);

    text-align: center;

    transition: .3s ease;
}


.bf-specialized-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .18);
}


.bf-specialized-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf4ff;
    color: var(--bf-blue);

    border-radius: 50%;

    font-size: 31px;
}


.bf-specialized-card h3 {
    margin: 0 0 15px;

    color: var(--bf-text);

    font-size: 20px;
    line-height: 1.4;
}


.bf-specialized-card p {
    margin: 0;

    color: var(--bf-grey);

    font-size: 15px;
    line-height: 1.75;
}


.bf-specialized-cta {
    margin-top: 40px;
    text-align: center;
}


.bf-specialized-cta .bf-btn {
    background: #fff;
    color: var(--bf-blue);
    border-color: #fff;
}


.bf-specialized-cta .bf-btn:hover {
    background: var(--bf-blue);
    color: #fff;
    border-color: #fff;
}


.bf-online {
    padding: 100px 5%;
    background: #fff;
}


.bf-online-container {
    max-width: 1500px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}


.bf-online-image {
    width: 100%;
    height: 560px;

    overflow: hidden;

    border-radius: 14px;
}


.bf-online-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.bf-online-content span {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--bf-blue);

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1.4px;
    text-transform: uppercase;
}


.bf-online-content h2 {
    margin: 0 0 25px;

    color: var(--bf-text);

    font-size: 40px;
    line-height: 1.25;
}


.bf-online-content h2 strong {
    color: var(--bf-blue);
}


.bf-online-content p {
    margin: 0 0 25px;

    color: var(--bf-grey);

    font-size: 16px;
    line-height: 1.8;
}


.bf-online-list {
    margin: 25px 0 32px;
    padding: 0;

    list-style: none;
}


.bf-online-list li {
    position: relative;

    margin-bottom: 14px;
    padding-left: 32px;

    color: #374151;

    font-size: 16px;
    line-height: 1.6;
}


.bf-online-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf4ff;

    color: var(--bf-blue);

    border-radius: 50%;

    font-size: 13px;
    font-weight: 800;
}


.bf-online-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin-bottom: 30px;
}


.bf-online-box {
    padding: 20px;

    display: flex;
    align-items: flex-start;

    gap: 14px;

    background: #f5f8ff;

    border: 1px solid #e0e9ff;
    border-radius: 10px;
}


.bf-online-box-icon {
    width: 45px;
    height: 45px;

    min-width: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    color: var(--bf-blue);

    border-radius: 8px;

    font-size: 22px;
}


.bf-online-box h4 {
    margin: 0 0 6px;

    color: var(--bf-text);

    font-size: 16px;
}


.bf-online-box p {
    margin: 0;

    color: var(--bf-grey);

    font-size: 13px;
    line-height: 1.5;
}


.bf-p4-section {
    padding: 95px 5%;
}


.bf-p4-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}


.bf-p4-tag {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--bf-blue);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


.bf-p4-title {
    margin: 0 0 22px;
    color: var(--bf-text);
    font-size: 40px;
    line-height: 1.25;
}


.bf-p4-title strong {
    color: var(--bf-blue);
}


.bf-p4-text {
    margin: 0 0 18px;
    color: var(--bf-grey);
    font-size: 16px;
    line-height: 1.8;
}


.bf-brokerage {
    background: #f7f9fc;
}


.bf-brokerage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}


.bf-brokerage-content {
    max-width: 700px;
}


.bf-p4-list {
    margin: 28px 0 32px;
    padding: 0;
    list-style: none;
}


.bf-p4-list li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 32px;
    color: #374151;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
}


.bf-p4-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;

    width: 21px;
    height: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e9f1ff;
    color: var(--bf-blue);

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;
}


.bf-brokerage-image {
    width: 100%;
    height: 540px;

    overflow: hidden;

    border-radius: 15px;

    box-shadow:
        0 20px 45px rgba(15, 23, 42, .10);
}


.bf-brokerage-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}


.bf-brokerage-image:hover img {
    transform: scale(1.04);
}


.bf-payment-solutions {
    background: #ffffff;
}


.bf-p4-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}


.bf-p4-heading .bf-p4-title {
    margin-bottom: 18px;
}


.bf-p4-heading .bf-p4-text {
    max-width: 750px;
    margin: 0 auto;
}


.bf-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.bf-payment-card {
    position: relative;

    padding: 35px 28px;

    background: #ffffff;

    border: 1px solid #e3e9f2;
    border-radius: 14px;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.bf-payment-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 4px;
    height: 0;

    background: var(--bf-blue);

    transition: height .35s ease;
}


.bf-payment-card:hover {
    transform: translateY(-7px);

    border-color: #c5d8ff;

    box-shadow:
        0 18px 40px rgba(21, 101, 255, .09);
}


.bf-payment-card:hover::before {
    height: 100%;
}


.bf-payment-icon {
    width: 64px;
    height: 64px;

    margin-bottom: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf4ff;

    border-radius: 12px;

    font-size: 29px;

    transition: .3s ease;
}


.bf-payment-card:hover .bf-payment-icon {
    transform: scale(1.08);
}


.bf-payment-card h3 {
    margin: 0 0 14px;

    color: var(--bf-text);

    font-size: 21px;
    line-height: 1.4;
}


.bf-payment-card p {
    margin: 0;

    color: var(--bf-grey);

    font-size: 15px;
    line-height: 1.75;
}


.bf-enterprise {
    background: #f7f9fc;
}


.bf-enterprise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}


.bf-enterprise-image {
    width: 100%;
    height: 520px;

    overflow: hidden;

    border-radius: 15px;

    box-shadow:
        0 20px 45px rgba(15, 23, 42, .10);
}


.bf-enterprise-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}


.bf-enterprise-image:hover img {
    transform: scale(1.04);
}


.bf-enterprise-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;

    margin: 28px 0 32px;
}


.bf-enterprise-feature {
    padding: 18px;

    display: flex;
    align-items: center;
    gap: 13px;

    background: #ffffff;

    border: 1px solid #e2e9f5;
    border-radius: 10px;
}


.bf-enterprise-feature-icon {
    width: 42px;
    height: 42px;

    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf4ff;

    color: var(--bf-blue);

    border-radius: 8px;

    font-size: 20px;
}


.bf-enterprise-feature span {
    color: var(--bf-text);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}


.bf-development-process {
    background: #ffffff;
}


.bf-process-grid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 25px;
}


.bf-process-grid::before {
    content: "";

    position: absolute;

    top: 41px;
    left: 10%;
    right: 10%;

    height: 2px;

    background: #d9e5fa;

    z-index: 0;
}


.bf-process-card {
    position: relative;

    z-index: 2;

    text-align: center;
}


.bf-process-number {
    width: 84px;
    height: 84px;

    margin: 0 auto 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 3px solid var(--bf-blue);
    border-radius: 50%;

    color: var(--bf-blue);

    font-size: 21px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(21, 101, 255, .14);

    transition: .3s ease;
}


.bf-process-card:hover .bf-process-number {
    background: var(--bf-blue);
    color: #ffffff;

    transform: translateY(-5px);
}


.bf-process-content {
    min-height: 235px;

    padding: 28px 22px;

    background: #f8faff;

    border: 1px solid #e4eaf3;
    border-radius: 12px;

    transition: .3s ease;
}


.bf-process-card:hover .bf-process-content {
    background: #ffffff;

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, .08);
}


.bf-process-content h3 {
    margin: 0 0 14px;

    color: var(--bf-text);

    font-size: 20px;
}


.bf-process-content p {
    margin: 0;

    color: var(--bf-grey);

    font-size: 14px;
    line-height: 1.75;
}


.bf-why {
    padding: 95px 5%;
    background: #f7f9fc;
}


.bf-why-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}


.bf-why-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}


.bf-why-heading span {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--bf-blue);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


.bf-why-heading h2 {
    margin: 0 0 18px;
    color: var(--bf-text);
    font-size: 40px;
    line-height: 1.25;
}


.bf-why-heading h2 strong {
    color: var(--bf-blue);
}


.bf-why-heading p {
    max-width: 750px;
    margin: 0 auto;
    color: var(--bf-grey);
    font-size: 16px;
    line-height: 1.8;
}


.bf-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.bf-why-card {
    padding: 32px 27px;
    background: #ffffff;
    border: 1px solid #e3e9f2;
    border-radius: 14px;
    transition: .35s ease;
}


.bf-why-card:hover {
    transform: translateY(-7px);
    border-color: #c6d9ff;
    box-shadow: 0 18px 40px rgba(21, 101, 255, .09);
}


.bf-why-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    border-radius: 12px;
    font-size: 28px;
}


.bf-why-card h3 {
    margin: 0 0 14px;
    color: var(--bf-text);
    font-size: 20px;
}


.bf-why-card p {
    margin: 0;
    color: var(--bf-grey);
    font-size: 15px;
    line-height: 1.75;
}


.bf-final-cta {
    padding: 90px 5%;
    background: #ffffff;
}


.bf-final-cta-box {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    background:
        linear-gradient(135deg,
            #071a3d 0%,
            #0b3a88 55%,
            #1565ff 100%);

    border-radius: 20px;

    box-shadow:
        0 25px 60px rgba(15, 23, 42, .18);
}


.bf-final-cta-box::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -190px;
    right: -80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}


.bf-final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
}


.bf-final-cta-content span {
    display: inline-block;
    margin-bottom: 12px;
    color: #c8d9ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.bf-final-cta-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 39px;
    line-height: 1.2;
}


.bf-final-cta-content p {
    margin: 0;
    color: rgba(255, 255, 255, .80);
    font-size: 16px;
    line-height: 1.75;
}


.bf-final-cta-action {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}


.bf-final-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 220px;

    padding: 16px 28px;

    background: #ffffff;
    color: var(--bf-blue);

    border: 2px solid #ffffff;
    border-radius: 6px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition: .3s ease;
}


.bf-final-cta-btn:hover {
    background: transparent;
    color: #ffffff;
    transform: translateY(-3px);
}


.bf-faq {
    padding: 95px 5% 110px;
    background: #f7f9fc;
}


.bf-faq-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}


.bf-faq-heading {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
}


.bf-faq-heading span {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--bf-blue);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


.bf-faq-heading h2 {
    margin: 0 0 18px;
    color: var(--bf-text);
    font-size: 40px;
    line-height: 1.25;
}


.bf-faq-heading h2 strong {
    color: var(--bf-blue);
}


.bf-faq-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: var(--bf-grey);
    font-size: 16px;
    line-height: 1.8;
}


.bf-faq-item {
    margin-bottom: 14px;
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e3e9f2;
    border-radius: 12px;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}


.bf-faq-item.active {
    border-color: #bcd2ff;
    box-shadow: 0 12px 30px rgba(21, 101, 255, .07);
}


.bf-faq-question {
    width: 100%;
    min-height: 74px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 24px;

    border: 0;
    outline: 0;

    background: #ffffff;
    color: var(--bf-text);

    text-align: left;

    cursor: pointer;

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;

    transition: .3s ease;
}


.bf-faq-question:hover,
.bf-faq-item.active .bf-faq-question {
    color: var(--bf-blue);
}


.bf-faq-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf4ff;
    color: var(--bf-blue);

    border-radius: 50%;

    font-size: 23px;

    transition: .3s ease;
}


.bf-faq-item.active .bf-faq-icon {
    background: var(--bf-blue);
    color: #ffffff;
}


.bf-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}


.bf-faq-answer-inner {
    padding: 0 24px 24px;
}


.bf-faq-answer p {
    margin: 0;
    color: var(--bf-grey);
    font-size: 15px;
    line-height: 1.8;
}


.bf-faq-answer a {
    display: inline-block;
    margin-top: 15px;
    color: var(--bf-blue);
    text-decoration: none;
    font-weight: 700;
}



/* ============================================================
  10. CONSUMER PRODUCTS PAGE (cp-*)
   ============================================================ */


.cp-page {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--cp-dark);
    background: var(--cp-white);
}


.cp-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}


.cp-hero {
    padding: 50px 0;
    background:
        radial-gradient(circle at 5% 20%,
            rgba(21, 101, 255, 0.10),
            transparent 35%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f7faff 100%);
    overflow: hidden;
}


.cp-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 65px;
    align-items: center;
}


.cp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    margin-bottom: 22px;
    background: rgba(21, 101, 255, 0.09);
    color: var(--cp-primary);
    border: 1px solid rgba(21, 101, 255, 0.15);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
}


.cp-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--cp-primary);
    border-radius: 50%;
}


.cp-hero-title {
    margin: 0;
    max-width: 650px;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: var(--cp-dark);
}


.cp-hero-title span {
    color: var(--cp-primary);
}


.cp-hero-line {
    width: 75px;
    height: 4px;
    margin: 27px 0;
    background: var(--cp-primary);
    border-radius: 10px;
}


.cp-hero-description {
    max-width: 650px;
    margin: 0;
    color: var(--cp-text);
    font-size: 18px;
    line-height: 1.8;
}


.cp-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 34px;
}


.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 27px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}


.cp-btn-primary {
    color: #ffffff;
    background: var(--cp-primary);
    border: 2px solid var(--cp-primary);
    box-shadow: 0 10px 25px rgba(21, 101, 255, 0.22);
}


.cp-btn-primary:hover {
    background: var(--cp-primary-dark);
    border-color: var(--cp-primary-dark);
    transform: translateY(-2px);
}


.cp-btn-outline {
    color: var(--cp-primary);
    background: #ffffff;
    border: 2px solid var(--cp-primary);
}


.cp-btn-outline:hover {
    color: #ffffff;
    background: var(--cp-primary);
    transform: translateY(-2px);
}


.cp-hero-image-wrap {
    position: relative;
}


.cp-hero-image-box {
    position: relative;
    height: 560px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(23, 32, 51, 0.16);
}


.cp-hero-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.cp-hero-image-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 55%,
            rgba(10, 25, 55, 0.2));
}


.cp-floating-card {
    position: absolute;
    left: -35px;
    bottom: 35px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 250px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(20, 30, 50, 0.16);
}


.cp-floating-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-light);
    color: var(--cp-primary);
    border-radius: 12px;
    font-size: 24px;
}


.cp-floating-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--cp-dark);
    font-size: 16px;
}


.cp-floating-card span {
    color: var(--cp-text);
    font-size: 13px;
}


.cp-intro {
    padding: 50px 0;
    background: #ffffff;
}


.cp-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


.cp-intro-image {
    position: relative;
    height: 510px;
    overflow: hidden;
    border-radius: 22px;
}


.cp-intro-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.cp-intro-image::before {
    content: "";
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 100px;
    height: 100px;
    z-index: 1;
    border-left: 5px solid var(--cp-primary);
    border-bottom: 5px solid var(--cp-primary);
    border-radius: 0 0 0 15px;
}


.cp-small-title {
    margin-bottom: 13px;
    color: var(--cp-primary);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}


.cp-section-title {
    margin: 0 0 22px;
    color: var(--cp-dark);
    font-size: clamp(31px, 3vw, 45px);
    line-height: 1.2;
    font-weight: 800;
}


.cp-section-title span {
    color: var(--cp-primary);
}


.cp-intro-content p {
    margin: 0 0 18px;
    color: var(--cp-text);
    font-size: 17px;
    line-height: 1.8;
}


.cp-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 27px 0 32px;
}


.cp-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cp-dark);
    font-size: 15px;
    font-weight: 700;
}


.cp-check {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--cp-primary);
    border-radius: 50%;
    font-size: 13px;
}


.cp-services-banner {
    padding: 20px 0 80px;
    background: #ffffff;
}


.cp-services-box {
    position: relative;
    overflow: hidden;
    padding: 65px 70px;
    border-radius: 22px;
    background:
        linear-gradient(90deg,
            rgba(12, 31, 68, 0.96),
            rgba(21, 101, 255, 0.82)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1600&q=85") center / cover no-repeat;
    box-shadow: 0 20px 45px rgba(21, 101, 255, 0.15);
}


.cp-services-box::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 320px;
    height: 320px;
    border: 70px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}


.cp-services-content {
    position: relative;
    z-index: 2;
}


.cp-services-title {
    margin: 0 0 35px;
    text-align: center;
    color: #ffffff;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.2;
    font-weight: 800;
}


.cp-services-title span {
    color: #bcd3ff;
}


.cp-services-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 60px;
    max-width: 1050px;
    margin: 0 auto;
}


.cp-service-list-item {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.5;
}


.cp-service-list-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1565ff;
    background: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
}


.cp-services-button {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}


.cp-services-button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    color: #1565ff;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}


.cp-services-button a:hover {
    color: #ffffff;
    background: transparent;
    transform: translateY(-2px);
}


.cp-features-section {
    padding: 20px 0 90px;
    background: #ffffff;
}


.cp-features-heading {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}


.cp-features-heading .cp-small-title {
    margin-bottom: 12px;
}


.cp-features-heading h2 {
    margin: 0 0 15px;
    color: #172033;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.2;
    font-weight: 800;
}


.cp-features-heading h2 span {
    color: #1565ff;
}


.cp-features-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: #5f6775;
    font-size: 17px;
    line-height: 1.7;
}


.cp-feature-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


.cp-info-card {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    padding: 42px 32px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e6ebf3;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(23, 32, 51, 0.07);
    transition: 0.35s ease;
}


.cp-info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #1565ff;
    transform: scaleX(0);
    transform-origin: left;
    transition: 0.35s ease;
}


.cp-info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(21, 101, 255, 0.13);
}


.cp-info-card:hover::before {
    transform: scaleX(1);
}


.cp-info-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1565ff;
    background: #f0f5ff;
    border-radius: 18px;
    font-size: 35px;
    transition: 0.3s ease;
}


.cp-info-card:hover .cp-info-icon {
    color: #ffffff;
    background: #1565ff;
    transform: rotate(-5deg) scale(1.05);
}


.cp-info-card h3 {
    margin: 0 0 17px;
    color: #172033;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 800;
}


.cp-info-card p {
    margin: 0;
    color: #5f6775;
    font-size: 16px;
    line-height: 1.75;
}


.cp-industries {
    padding: 50px 0;
    background: #f7f9fd;
}


.cp-industries-heading {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}


.cp-industries-heading h2 {
    margin: 0 0 18px;
    color: #172033;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.2;
    font-weight: 800;
}


.cp-industries-heading h2 span {
    color: #1565ff;
}


.cp-industries-heading p {
    max-width: 750px;
    margin: 0 auto;
    color: #5f6775;
    font-size: 17px;
    line-height: 1.75;
}


.cp-industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


.cp-industry-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e6ebf3;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(23, 32, 51, 0.07);
    transition: 0.35s ease;
}


.cp-industry-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(21, 101, 255, 0.14);
}


.cp-industry-image {
    position: relative;
    height: 270px;
    overflow: hidden;
}


.cp-industry-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.cp-industry-card:hover .cp-industry-image img {
    transform: scale(1.06);
}


.cp-industry-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 55%,
            rgba(12, 31, 68, 0.35));
}


.cp-industry-number {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1565ff;
    background: #ffffff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


.cp-industry-content {
    padding: 28px;
}


.cp-industry-content h3 {
    margin: 0 0 14px;
    color: #172033;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;
}


.cp-industry-content p {
    margin: 0;
    color: #5f6775;
    font-size: 15.5px;
    line-height: 1.75;
}


.cp-industry-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #1565ff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}


.cp-industry-link span {
    transition: transform 0.3s ease;
}


.cp-industry-link:hover span {
    transform: translateX(5px);
}


.cp-industry-card-wide {
    grid-column: span 1;
}


.cp-industries-cta {
    margin-top: 50px;
    padding: 35px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: #ffffff;
    border: 1px solid #e6ebf3;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(23, 32, 51, 0.06);
}


.cp-industries-cta-content h3 {
    margin: 0 0 8px;
    color: #172033;
    font-size: 25px;
    font-weight: 800;
}


.cp-industries-cta-content p {
    margin: 0;
    color: #5f6775;
    font-size: 16px;
    line-height: 1.6;
}


.cp-industries-cta .cp-btn {
    flex-shrink: 0;
}


.cp-why-section {
    padding: 50px 0;
    background: #ffffff;
}


.cp-section-head {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}


.cp-section-head h2 {
    margin: 0 0 16px;
    color: #172033;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.2;
    font-weight: 800;
}


.cp-section-head h2 span {
    color: #1565ff;
}


.cp-section-head p {
    margin: 0 auto;
    max-width: 720px;
    color: #667085;
    font-size: 17px;
    line-height: 1.7;
}


.cp-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.cp-why-card {
    position: relative;
    padding: 35px 30px;
    background: #f8faff;
    border: 1px solid #e5ebf5;
    border-radius: 18px;
    transition: 0.35s ease;
    overflow: hidden;
}


.cp-why-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 0;
    background: #1565ff;
    transition: 0.35s ease;
}


.cp-why-card:hover {
    transform: translateY(-7px);
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(21, 101, 255, 0.12);
}


.cp-why-card:hover::before {
    height: 100%;
}


.cp-why-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf1ff;
    color: #1565ff;
    border-radius: 14px;
    font-size: 27px;
}


.cp-why-card h3 {
    margin: 0 0 12px;
    color: #172033;
    font-size: 21px;
    font-weight: 800;
}


.cp-why-card p {
    margin: 0;
    color: #667085;
    font-size: 15.5px;
    line-height: 1.7;
}


.cp-process-section {
    padding: 50px 0;
    background: #f6f8fc;
}


.cp-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}


.cp-process-card {
    position: relative;
    padding: 35px 25px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e5ebf5;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(23, 32, 51, 0.05);
    transition: 0.35s ease;
}


.cp-process-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 35px rgba(21, 101, 255, 0.12);
}


.cp-process-number {
    width: 60px;
    height: 60px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1565ff;
    color: #ffffff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(21, 101, 255, 0.25);
}


.cp-process-card h3 {
    margin: 0 0 12px;
    color: #172033;
    font-size: 20px;
    font-weight: 800;
}


.cp-process-card p {
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.65;
}


.cp-tech-banner {
    margin-top: 50px;
    padding: 45px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    background: #101b36;
    border-radius: 22px;
    overflow: hidden;
}


.cp-tech-content h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.25;
    font-weight: 800;
}


.cp-tech-content h3 span {
    color: #65a0ff;
}


.cp-tech-content p {
    margin: 0;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.7;
}


.cp-tech-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}


.cp-tech-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}


.cp-tech-check {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1565ff;
    border-radius: 50%;
    font-size: 12px;
}


.cp-final-cta {
    padding: 50px 0;
    background: #ffffff;
}


.cp-final-cta-box {
    position: relative;
    overflow: hidden;

    padding: 65px 50px;

    text-align: center;

    background:
        linear-gradient(135deg,
            #0b1736 0%,
            #123b8f 55%,
            #1565ff 100%);

    border-radius: 24px;

    box-shadow:
        0 20px 50px rgba(21, 101, 255, 0.18);
}


.cp-final-cta-box::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -170px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.07);
}


.cp-final-cta-box::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    bottom: -140px;
    left: -70px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);
}


.cp-final-cta-content {
    position: relative;
    z-index: 2;

    max-width: 850px;
    margin: 0 auto;
}


.cp-final-cta-label {
    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 30px;

    font-size: 13px;
    font-weight: 700;
}


.cp-final-cta h2 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size:
        clamp(30px, 4vw, 46px);

    line-height: 1.2;

    font-weight: 800;
}


.cp-final-cta p {
    max-width: 720px;

    margin: 0 auto 30px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 17px;

    line-height: 1.75;
}


.cp-final-cta-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 30px;

    color: #1565ff;

    background: #ffffff;

    border:
        2px solid #ffffff;

    border-radius: 8px;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition:
        all 0.3s ease;
}


.cp-final-cta-btn:hover {
    color: #ffffff;

    background: transparent;

    transform:
        translateY(-3px);
}


.cp-faq-section {
    padding: 50px 0;

    background: #f6f8fc;
}


.cp-faq-container {
    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    padding: 0 25px;
}


.cp-faq-heading {
    max-width: 800px;

    margin: 0 auto 50px;

    text-align: center;
}


.cp-faq-label {
    display: inline-block;

    margin-bottom: 14px;

    padding: 8px 17px;

    color: #1565ff;

    background: #eaf1ff;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 700;
}


.cp-faq-heading h2 {
    margin: 0 0 17px;

    color: #172033;

    font-size:
        clamp(30px, 4vw, 44px);

    line-height: 1.2;

    font-weight: 800;
}


.cp-faq-heading h2 span {
    color: #1565ff;
}


.cp-faq-heading p {
    margin: 0;

    color: #667085;

    font-size: 16px;

    line-height: 1.75;
}


.cp-faq-item {
    margin-bottom: 14px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #e1e7f0;

    border-radius: 13px;

    transition:
        all 0.3s ease;
}


.cp-faq-item:hover {
    border-color:
        rgba(21, 101, 255, 0.35);
}


.cp-faq-item.active {
    border-color:
        rgba(21, 101, 255, 0.45);

    box-shadow:
        0 12px 30px rgba(21, 101, 255, 0.08);
}


.cp-faq-question {
    width: 100%;

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    padding: 20px 24px;

    color: #172033;

    background: #ffffff;

    border: 0;

    outline: 0;

    cursor: pointer;

    text-align: left;

    font-family: inherit;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.5;

    transition:
        color 0.3s ease;
}


.cp-faq-question:hover {
    color: #1565ff;
}


.cp-faq-item.active .cp-faq-question {
    color: #1565ff;
}


.cp-faq-icon {
    width: 38px;

    height: 38px;

    min-width: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #1565ff;

    background: #edf3ff;

    border-radius: 50%;

    font-size: 22px;

    font-weight: 400;

    transition:
        all 0.3s ease;
}


.cp-faq-item.active .cp-faq-icon {
    color: #ffffff;

    background: #1565ff;
}


.cp-faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.4s ease;
}


.cp-faq-answer-inner {
    padding:
        0 24px 24px;
}


.cp-faq-answer p {
    margin: 0;

    color: #667085;

    font-size: 15.5px;

    line-height: 1.8;
}


.cp-faq-answer a {
    display: inline-block;

    margin-top: 15px;

    color: #1565ff;

    font-weight: 700;

    text-decoration: none;
}



/* ============================================================
  11. EDUCATION PAGE (edu-* / education-*)
   ============================================================ */


.education-page {
    font-family: Arial, Helvetica, sans-serif;
    color: #111827;
    background: #ffffff;
}


.education-hero {
    padding: 80px 6%;
    background:
        radial-gradient(circle at 85% 20%, rgba(21, 101, 255, 0.10), transparent 35%),
        linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
}


.education-hero-container {
    max-width: 1400px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


.education-hero-content {
    max-width: 650px;
}


.education-small-title {
    display: inline-block;
    color: #1565ff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}


.education-hero h1 {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 750;
    color: #111827;
    margin: 0 0 25px;
}


.education-hero h1 span {
    color: #1565ff;
}


.education-title-line {
    width: 100%;
    height: 1px;
    background: #d5d9e2;
    margin-bottom: 28px;
}


.education-hero p {
    font-size: 18px;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 35px;
}


.education-hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}


.education-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 210px;
    padding: 16px 28px;

    border-radius: 6px;
    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.education-btn-primary {
    background: #1565ff;
    color: #ffffff;
    border: 2px solid #1565ff;
}


.education-btn-primary:hover {
    background: #0d4fd7;
    border-color: #0d4fd7;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(21, 101, 255, 0.25);
}


.education-btn-secondary {
    background: transparent;
    color: #1565ff;
    border: 2px solid #1565ff;
}


.education-btn-secondary:hover {
    background: #1565ff;
    color: #ffffff;
    transform: translateY(-3px);
}


.education-hero-image {
    position: relative;
}


.education-hero-image img {
    width: 100%;
    height: 570px;
    object-fit: cover;

    border-radius: 20px;

    display: block;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}


.education-experience-box {
    position: absolute;
    left: -35px;
    bottom: 35px;

    background: #ffffff;

    padding: 18px 25px;

    border-radius: 12px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

    display: flex;
    align-items: center;
    gap: 14px;
}


.education-experience-icon {
    width: 52px;
    height: 52px;

    background: #eaf1ff;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;
}


.education-experience-text strong {
    display: block;
    font-size: 17px;
    color: #111827;
}


.education-experience-text span {
    display: block;
    margin-top: 4px;

    font-size: 14px;
    color: #6b7280;
}


.education-intro {
    padding: 90px 6%;
    background: #ffffff;
}


.education-intro-container {
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


.education-intro-image img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    border-radius: 18px;
    display: block;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.10);
}


.education-intro-content .section-tag {
    display: inline-block;

    color: #1565ff;

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.5px;

    margin-bottom: 12px;
}


.education-intro-content h2 {
    font-size: 42px;
    line-height: 1.2;

    color: #111827;

    margin: 0 0 25px;
}


.education-intro-content h2 span {
    color: #1565ff;
}


.education-intro-content p {
    font-size: 17px;
    line-height: 1.8;

    color: #4b5563;

    margin-bottom: 18px;
}


.education-intro-btn {
    display: inline-flex;

    margin-top: 15px;

    padding: 16px 30px;

    background: #1565ff;
    color: #ffffff;

    border-radius: 6px;

    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    transition: 0.3s ease;
}


.education-intro-btn:hover {
    background: #0d4fd7;

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(21, 101, 255, 0.25);
}


.education-services {
    padding: 90px 6%;

    background: #f7f9fc;
}


.education-services-container {
    max-width: 1400px;

    margin: 0 auto;
}


.education-section-heading {
    max-width: 800px;

    margin: 0 auto 55px;

    text-align: center;
}


.education-section-heading span {
    display: inline-block;

    color: #1565ff;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 12px;
}


.education-section-heading h2 {
    font-size: 42px;

    color: #111827;

    margin: 0 0 18px;
}


.education-section-heading p {
    font-size: 17px;

    line-height: 1.7;

    color: #6b7280;

    margin: 0;
}


.education-services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
}


.education-service-card {

    background: #ffffff;

    padding: 38px 32px;

    border-radius: 14px;

    border: 1px solid #edf0f5;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);

    transition: all 0.35s ease;
}


.education-service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 45px rgba(21, 101, 255, 0.12);

    border-color: #dbe7ff;
}


.education-service-icon {

    width: 65px;

    height: 65px;

    background: #edf4ff;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    margin-bottom: 25px;

    transition: 0.3s ease;
}


.education-service-card:hover .education-service-icon {

    background: #1565ff;

    transform: scale(1.05);
}


.education-service-card h3 {

    font-size: 22px;

    line-height: 1.35;

    color: #111827;

    margin: 0 0 16px;
}


.education-service-card p {

    font-size: 16px;

    line-height: 1.75;

    color: #5f6877;

    margin: 0;
}


.edu-detail-section {
    padding: 100px 6%;
    background: #ffffff;
}


.edu-detail-section.edu-light {
    background: #f7f9fc;
}


.edu-detail-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
}


.edu-detail-content {
    max-width: 650px;
}


.edu-detail-tag {
    display: inline-block;
    margin-bottom: 14px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    color: #1565ff;
}


.edu-detail-content h2 {
    margin: 0 0 25px;

    font-size: 42px;
    line-height: 1.2;
    font-weight: 750;

    color: #111827;
}


.edu-detail-content h2 span {
    color: #1565ff;
}


.edu-detail-content p {
    margin: 0 0 18px;

    font-size: 16px;
    line-height: 1.8;

    color: #5f6877;
}


.edu-detail-image {
    position: relative;
}


.edu-detail-image img {
    display: block;

    width: 100%;
    height: 520px;

    object-fit: cover;

    border-radius: 18px;

    box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
}


.edu-detail-image::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -20px;
    bottom: -20px;

    background: #1565ff;

    opacity: .08;

    border-radius: 20px;

    z-index: -1;
}


.edu-check-list {
    margin: 25px 0 30px;
    padding: 0;

    list-style: none;
}


.edu-check-list li {
    position: relative;

    margin-bottom: 14px;
    padding-left: 32px;

    font-size: 16px;
    line-height: 1.6;
    font-weight: 600;

    color: #374151;
}


.edu-check-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eaf1ff;
    color: #1565ff;

    border-radius: 50%;

    font-size: 13px;
    font-weight: 800;
}


.edu-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 28px;

    background: #1565ff;
    color: #ffffff;

    border: 2px solid #1565ff;
    border-radius: 6px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition: .3s ease;
}


.edu-detail-btn:hover {
    background: #0d4fd7;
    border-color: #0d4fd7;

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(21, 101, 255, .22);
}


.edu-work-section {
    padding: 100px 6%;

    background:
        linear-gradient(135deg,
            #071a3d 0%,
            #0b3478 55%,
            #1155cc 100%);

    position: relative;
    overflow: hidden;
}


.edu-work-section::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    top: -220px;
    right: -120px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);
}


.edu-work-container {
    position: relative;
    z-index: 2;

    max-width: 1400px;
    margin: 0 auto;
}


.edu-work-heading {
    max-width: 800px;
    margin-bottom: 55px;
}


.edu-work-heading span {
    display: inline-block;

    margin-bottom: 14px;

    color: #a9c7ff;

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}


.edu-work-heading h2 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: 44px;
    line-height: 1.2;
}


.edu-work-heading p {
    margin: 0;

    color: rgba(255, 255, 255, .72);

    font-size: 16px;
    line-height: 1.8;
}


.edu-work-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;
}


.edu-work-card {
    min-height: 270px;

    padding: 30px 25px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 14px;

    backdrop-filter: blur(8px);

    transition: .35s ease;
}


.edu-work-card:hover {
    transform: translateY(-8px);

    background: rgba(255, 255, 255, .12);

    border-color: rgba(255, 255, 255, .25);
}


.edu-work-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    margin-bottom: 25px;

    background: #ffffff;

    color: #1565ff;

    border-radius: 50%;

    font-size: 17px;
    font-weight: 800;
}


.edu-work-card h3 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 20px;
    line-height: 1.4;
}


.edu-work-card p {
    margin: 0;

    color: rgba(255, 255, 255, .68);

    font-size: 14px;
    line-height: 1.75;
}


.edu-satisfaction {
    padding: 100px 6%;
    background: #ffffff;
}


.edu-satisfaction-container {
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 75px;

    align-items: center;
}


.edu-satisfaction-image {
    position: relative;
}


.edu-satisfaction-image img {
    display: block;

    width: 100%;
    height: 530px;

    object-fit: cover;

    border-radius: 18px;

    box-shadow: 0 20px 50px rgba(15, 23, 42, .13);
}


.edu-rating-box {
    position: absolute;

    right: -25px;
    bottom: 35px;

    padding: 20px 25px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
}


.edu-rating-stars {
    margin-bottom: 7px;

    color: #f59e0b;

    font-size: 19px;
    letter-spacing: 2px;
}


.edu-rating-box strong {
    display: block;

    color: #111827;

    font-size: 17px;
}


.edu-rating-box span {
    display: block;

    margin-top: 4px;

    color: #6b7280;

    font-size: 13px;
}


.edu-satisfaction-content h2 {
    margin: 0 0 25px;

    font-size: 43px;
    line-height: 1.2;

    color: #111827;
}


.edu-satisfaction-content h2 span {
    color: #1565ff;
}


.edu-satisfaction-content p {
    margin: 0 0 18px;

    color: #5f6877;

    font-size: 16px;
    line-height: 1.8;
}


.edu-stats {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin: 35px 0;
}


.edu-stat-box {
    padding: 22px 15px;

    text-align: center;

    background: #f7f9fc;

    border: 1px solid #e7ecf4;

    border-radius: 10px;
}


.edu-stat-box strong {
    display: block;

    margin-bottom: 5px;

    color: #1565ff;

    font-size: 28px;
    font-weight: 800;
}


.edu-stat-box span {
    color: #6b7280;

    font-size: 13px;
    font-weight: 600;
}


.edu-innovative-section {
    padding: 100px 6%;
    background: #f7f9fc;
}


.edu-innovative-container {
    max-width: 1400px;
    margin: 0 auto;
}


.edu-innovative-heading {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}


.edu-innovative-heading span {
    display: inline-block;
    margin-bottom: 14px;
    color: #1565ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.edu-innovative-heading h2 {
    margin: 0 0 20px;
    font-size: 44px;
    line-height: 1.2;
    color: #111827;
}


.edu-innovative-heading h2 strong {
    color: #1565ff;
}


.edu-innovative-heading p {
    max-width: 750px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.8;
}


.edu-solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


.edu-solution-card {
    position: relative;
    padding: 35px 30px;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 14px;
    overflow: hidden;
    transition: .35s ease;
}


.edu-solution-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: #1565ff;
    transition: .35s ease;
}


.edu-solution-card:hover {
    transform: translateY(-7px);
    border-color: #cfe0ff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .09);
}


.edu-solution-card:hover::before {
    height: 100%;
}


.edu-solution-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background: #edf4ff;
    border-radius: 12px;
    font-size: 28px;
}


.edu-solution-card h3 {
    margin: 0 0 14px;
    color: #111827;
    font-size: 21px;
    line-height: 1.35;
}


.edu-solution-card p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.75;
}


.edu-process-section {
    padding: 100px 6%;
    background: #ffffff;
}


.edu-process-container {
    max-width: 1400px;
    margin: 0 auto;
}


.edu-process-heading {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}


.edu-process-heading span {
    display: inline-block;
    margin-bottom: 14px;
    color: #1565ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.edu-process-heading h2 {
    margin: 0 0 20px;
    color: #111827;
    font-size: 44px;
    line-height: 1.2;
}


.edu-process-heading h2 strong {
    color: #1565ff;
}


.edu-process-heading p {
    max-width: 750px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.8;
}


.edu-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}


.edu-process-grid::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #dce7fa;
    z-index: 0;
}


.edu-process-card {
    position: relative;
    z-index: 2;
    text-align: center;
}


.edu-process-number {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #1565ff;
    border: 3px solid #1565ff;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(21, 101, 255, .15);
    transition: .35s ease;
}


.edu-process-card:hover .edu-process-number {
    background: #1565ff;
    color: #ffffff;
    transform: translateY(-5px);
}


.edu-process-content {
    padding: 28px 22px;
    min-height: 230px;
    background: #f8faff;
    border: 1px solid #e7edf7;
    border-radius: 12px;
    transition: .35s ease;
}


.edu-process-card:hover .edu-process-content {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(15, 23, 42, .08);
}


.edu-process-content h3 {
    margin: 0 0 14px;
    color: #111827;
    font-size: 20px;
}


.edu-process-content p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.75;
}


.edu-final-cta {
    padding: 90px 6%;
    background: #f7f9fc;
}


.edu-final-cta-container {
    position: relative;
    max-width: 1250px;
    margin: 0 auto;
    padding: 65px 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    border-radius: 20px;
    background:
        linear-gradient(135deg,
            #071a3d 0%,
            #0b3a88 55%,
            #1565ff 100%);
    box-shadow: 0 25px 60px rgba(15, 23, 42, .18);
}


.edu-final-cta-container::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -170px;
    right: -70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}


.edu-final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
}


.edu-final-cta-content span {
    display: inline-block;
    margin-bottom: 12px;
    color: #b9d0ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.edu-final-cta-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 40px;
    line-height: 1.2;
}


.edu-final-cta-content p {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    line-height: 1.75;
}


.edu-final-cta-action {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}


.edu-final-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    padding: 16px 28px;
    background: #ffffff;
    color: #1565ff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: .3s ease;
}


.edu-final-cta-btn:hover {
    background: #0f172a;
    color: #ffffff;
    transform: translateY(-3px);
}


.edu-faq-section {
    padding: 100px 6%;
    background: #ffffff;
}


.edu-faq-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}


.edu-faq-heading {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}


.edu-faq-heading span {
    display: inline-block;
    margin-bottom: 14px;

    color: #1565ff;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.edu-faq-heading h2 {
    margin: 0 0 18px;

    color: #111827;

    font-size: 44px;
    line-height: 1.2;
}


.edu-faq-heading h2 strong {
    color: #1565ff;
}


.edu-faq-heading p {
    max-width: 700px;
    margin: 0 auto;

    color: #6b7280;

    font-size: 16px;
    line-height: 1.8;
}


.edu-faq-wrapper {
    width: 100%;
}


.edu-faq-item {
    margin-bottom: 15px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5eaf1;

    border-radius: 12px;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}


.edu-faq-item:last-child {
    margin-bottom: 0;
}


.edu-faq-item:hover {
    border-color: #cbdcff;
}


.edu-faq-item.active {
    border-color: #b9d0ff;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, .07);
}


.edu-faq-question {
    width: 100%;

    min-height: 75px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 20px 25px;

    border: none;
    outline: none;

    cursor: pointer;

    text-align: left;

    background: #ffffff;

    font-family: inherit;

    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;

    color: #111827;

    transition: color .3s ease;
}


.edu-faq-question:hover {
    color: #1565ff;
}


.edu-faq-item.active .edu-faq-question {
    color: #1565ff;
}


.edu-faq-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf4ff;

    color: #1565ff;

    font-size: 24px;
    line-height: 1;

    transition: .3s ease;
}


.edu-faq-item.active .edu-faq-icon {
    background: #1565ff;
    color: #ffffff;
}


.edu-faq-answer {
    max-height: 0;

    overflow: hidden;

    transition: max-height .4s ease;
}


.edu-faq-answer-inner {
    padding: 0 25px 25px;
}


.edu-faq-answer p {
    margin: 0;

    color: #6b7280;

    font-size: 15px;
    line-height: 1.8;
}


.edu-faq-answer a {
    display: inline-block;

    margin-top: 15px;

    color: #1565ff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;
}



/* ============================================================
  12. BLOG PAGE
   ============================================================ */


.blog-hero {

    background: linear-gradient(135deg, #0d47a1, #1565ff);

    padding: 90px 20px;

    text-align: center;

    color: #fff;

}


.blog-hero h1 {

    font-size: 52px;

    font-weight: 700;

    margin-bottom: 20px;

}


.blog-hero p {

    max-width: 850px;

    margin: auto;

    font-size: 18px;

    line-height: 30px;

    opacity: .95;

}


.blog-page {

    padding: 50px 0;

    background: #f7f9fc;

}


.blog-wrapper {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 35px;

    align-items: start;

}


.blog-grid {

    display: grid;

    grid-template-columns: 1fr; 

    gap: 30px;

}


.blog-card {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    transition: .35s;

}


.blog-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 45px rgba(0, 0, 0, .15);

}


.blog-image {

    height: 250px;

    overflow: hidden;

}


.blog-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition: .4s;

}


.blog-card:hover img {

    transform: scale(1.08);

}


.blog-content {

    padding: 28px;

}


.blog-meta {

    display: flex;

    justify-content: space-between;

    margin-bottom: 18px;

    font-size: 14px;

    color: #666;

}


.blog-content h3 {

    font-size: 25px;

    margin-bottom: 15px;

    line-height: 35px;

}


.blog-content h3 a {

    text-decoration: none;

    color: #222;

    transition: .3s;

}


.blog-content h3 a:hover {

    color: #1565ff;

}


.blog-content p {

    color: #666;

    line-height: 28px;

    margin-bottom: 25px;

}


.blog-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: 1px solid #eee;

    padding-top: 18px;

}


.blog-right {

    position: sticky;

    top: 100px;

}


.category-list {

    list-style: none;

    padding: 0;

    margin: 0;

}


.category-list li {

    border-bottom: 1px solid #eee;

}


.category-list li:last-child {

    border-bottom: none;

}


.category-list a {

    display: block;

    padding: 14px 0;

    text-decoration: none;

    color: #444;

    font-weight: 500;

    transition: .3s;

}


.category-list a:hover {

    padding-left: 10px;

    color: #1565ff;

}


.latest-post {

    margin-bottom: 18px;

    padding-bottom: 18px;

    border-bottom: 1px solid #eee;

}


.latest-post:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;

}


.latest-post a {

    display: flex;

    gap: 14px;

    text-decoration: none;

    align-items: center;

}


.latest-post img {

    width: 90px;

    height: 70px;

    object-fit: contain;

    border-radius: 10px;

}


.latest-post h4 {

    font-size: 16px;

    line-height: 24px;

    margin-bottom: 6px;

    color: #222;

    transition: .3s;

}


.latest-post a:hover h4 {

    color: #1565ff;

}


.latest-post small {

    color: #888;

}


.newsletter {

    background: linear-gradient(135deg, #1565ff, #0d47a1);

    color: #fff;

}


.newsletter h3 {

    color: #fff;

}


.newsletter h3::after {

    background: #fff;

}


.newsletter p {

    line-height: 28px;

    margin-bottom: 18px;

}


.newsletter input {

    background: #fff;

}


.newsletter button {

    background: #fff;

    color: #1565ff;

    font-weight: 700;

}


.newsletter button:hover {

    background: #f4f4f4;

}


.blog-details {

    padding: 50px 0;

    background: #f7f9fc;

}


.blog-category {

    display: inline-block;

    background: #1565ff;

    color: #fff;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 14px;

    margin-bottom: 20px;

    font-weight: 600;

}


.blog-title {

    font-size: 42px;

    line-height: 58px;

    margin-bottom: 20px;

    color: #222;

}


.blog-info {

    display: flex;

    gap: 30px;

    flex-wrap: wrap;

    margin-bottom: 30px;

    font-size: 15px;

    color: #666;

}


.blog-info span {

    display: flex;

    align-items: center;

    gap: 8px;

}


.blog-summary {

    background: #eef5ff;

    padding: 25px;

    border-left: 5px solid #1565ff;

    border-radius: 12px;

    margin-bottom: 35px;

}


.blog-summary p {

    font-size: 18px;

    line-height: 34px;

    color: #444;

}


.blog-content-area {

    font-size: 18px;

    line-height: 34px;

    color: #444;

}


.blog-content-area h2 {

    margin: 40px 0 20px;

    font-size: 34px;

    color: #1565ff;

}


.blog-content-area h3 {

    margin: 35px 0 18px;

    font-size: 28px;

    color: #222;

}


.blog-content-area p {

    margin-bottom: 22px;

}


.blog-content-area img {

    max-width: 100%;

    border-radius: 15px;

    margin: 25px 0;

}


.blog-content-area ul {

    padding-left: 25px;

    margin-bottom: 25px;

}


.blog-content-area li {

    margin-bottom: 10px;

}


.blog-content-area table {

    width: 100%;

    border-collapse: collapse;

    margin: 25px 0;

}


.blog-content-area table th {

    background: #1565ff;

    color: #fff;

    padding: 15px;

}


.blog-content-area table td {

    padding: 15px;

    border: 1px solid #ddd;

}


.latest-post {

    display: flex;

    gap: 15px;

    margin-bottom: 18px;

    padding-bottom: 18px;

    border-bottom: 1px solid #eee;

}


.latest-post img {

    width: 90px;

    height: 75px;

    object-fit: contain;

    border-radius: 10px;

}


.latest-post h4 {

    font-size: 15px;

    line-height: 22px;

    margin-bottom: 5px;

    color: #222;

    transition: .3s;

}


.latest-post a {

    display: flex;

    gap: 15px;

    text-decoration: none;

}


.category-list a {

    display: block;

    padding: 12px 0;

    text-decoration: none;

    color: #444;

    transition: .3s;

}


.newsletter h3 {

    color: #fff !important;

}


.newsletter button {

    background: #fff !important;

    color: #1565ff !important;

    font-weight: 700;

}


.blog-navigation {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 60px;

    flex-wrap: wrap;

}


.blog-navigation a {

    flex: 1;

    background: #fff;

    padding: 25px;

    border-radius: 15px;

    text-decoration: none;

    color: #222;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

    transition: .3s;

}


.blog-navigation a:hover {

    background: #1565ff;

    color: #fff;

}


.blog-details {

    padding: 50px 0;

    background: #f6f8fc;

}


.blog-category {

    display: inline-block;

    background: #1565ff;

    color: #fff;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}


.blog-title {

    font-size: 46px;

    line-height: 60px;

    margin: 20px 0;

    font-weight: 700;

    color: #1d1d1d;

}


.blog-info {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-bottom: 35px;

    color: #777;

    font-size: 15px;

}


.blog-summary {

    background: #eef5ff;

    border-left: 5px solid #1565ff;

    padding: 25px;

    border-radius: 12px;

    margin-bottom: 35px;

}


.blog-summary p {

    font-size: 18px;

    line-height: 32px;

    color: #444;

}


.blog-content-area {

    margin-top: 45px;

    font-size: 18px;

    line-height: 34px;

    color: #444;

}


.blog-content-area h2 {

    font-size: 36px;

    margin: 50px 0 20px;

    color: #1565ff;

}


.blog-content-area h3 {

    font-size: 28px;

    margin: 40px 0 18px;

    color: #222;

}


.blog-content-area h4 {

    font-size: 24px;

    margin: 30px 0 15px;

}


.blog-content-area img {

    max-width: 100%;

    border-radius: 15px;

    margin: 35px 0;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);

}


.blog-content-area ul,

.blog-content-area ol {

    padding-left: 30px;

    margin-bottom: 25px;

}


.blog-content-area blockquote {

    padding: 25px;

    background: #eef5ff;

    border-left: 5px solid #1565ff;

    border-radius: 10px;

    margin: 35px 0;

    font-style: italic;

}


.blog-content-area pre {

    background: #111827;

    color: #fff;

    padding: 20px;

    overflow: auto;

    border-radius: 10px;

    margin: 30px 0;

}


.blog-content-area code {

    background: #f4f4f4;

    padding: 3px 8px;

    border-radius: 5px;

}


.blog-navigation {

    display: flex;

    justify-content: space-between;

    gap: 25px;

    margin-top: 60px;

}


.blog-navigation a {

    flex: 1;

    padding: 25px;

    background: #fff;

    border-radius: 18px;

    text-decoration: none;

    color: #222;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);

    transition: .3s;

}


.blog-navigation a span {

    display: block;

    font-size: 14px;

    color: #777;

    margin-bottom: 10px;

}


.blog-navigation a strong {

    display: block;

    font-size: 18px;

    line-height: 28px;

}


.blog-navigation a:hover span {

    color: #fff;

}


.blog-hero-section {
    padding: 50px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}


.blog-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}


.blog-hero-text h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.1;
}


.blog-hero-text h1 span {
    color: var(--primary-blue);
}


.blog-hero-text p {
    font-size: 1.15rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 90%;
}


.blog-hero-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


.featured-post {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
}


.featured-post:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}


.featured-post-img {
    height: 400px;
    overflow: hidden;
}


.featured-post-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.4s;
}


.featured-post:hover .featured-post-img img {
    transform: scale(1.05);
}


.featured-post-content {
    padding: 40px 40px 40px 0;
}


.featured-badge {
    display: inline-block;
    background: var(--primary-blue);
    color: #fff;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}


.featured-post-content h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.25;
}


.featured-post-content p {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 25px;
}


.post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 25px;
}


.post-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}


.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 15px;
    transition: 0.3s;
}


.read-more-btn:hover {
    gap: 12px;
}


.blog-grid-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}


.blog-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}


.blog-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


.blog-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: 0.35s;
}


.blog-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-blue);
    box-shadow: 0 20px 45px rgba(17, 85, 204, 0.1);
}


.blog-card-img {
    height: 200px;
    overflow: hidden;
    position: relative;
}


.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.4s;
}


.blog-card:hover .blog-card-img img {
    transform: scale(1.08);
}


.blog-card-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-blue);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.blog-card-body {
    padding: 25px;
}


.blog-card-date {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}


.blog-card-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.4;
    transition: 0.3s;
}


.blog-card-body h3:hover {
    color: var(--primary-blue);
}


.blog-card-body p {
    font-size: 0.9rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 20px;
}


.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 18px;
}


.blog-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
}


.blog-card-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
    border: 2px solid var(--primary-blue);
}


.blog-card-author span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}


.card-read-btn {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: 0.3s;
}


.card-read-btn:hover {
    gap: 8px;
}


.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky;
    top: 100px;
}


.sidebar-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
}


.sidebar-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary-blue);
}


.search-form {
    display: flex;
    gap: 0;
}


.search-form input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}


.search-form input:focus {
    border-color: var(--primary-blue);
}


.search-form button {
    background: var(--primary-blue);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 8px 8px 0;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}


.search-form button:hover {
    background: #0b3d99;
}


.category-list li {
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}


.category-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    transition: 0.3s;
}


.category-list li a:hover {
    color: var(--primary-blue);
    padding-left: 5px;
}


.category-list li a span {
    background: #f1f5f9;
    color: var(--text-gray);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}


.category-list li a:hover span {
    background: var(--primary-blue);
    color: #fff;
}


.latest-post-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}


.latest-post-item:last-child {
    border-bottom: none;
}


.latest-post-thumb {
    width: 70px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}


.latest-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.latest-post-info h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 5px;
    transition: 0.3s;
}


.latest-post-info h4:hover {
    color: var(--primary-blue);
}


.latest-post-info small {
    font-size: 12px;
    color: var(--text-gray);
}


.newsletter-card {
    background: linear-gradient(135deg, var(--primary-blue), #0b3d99);
    border: none !important;
}


.newsletter-card h3 {
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.3) !important;
}


.newsletter-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}


.newsletter-form input {
    width: 100%;
    padding: 14px 15px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    margin-bottom: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}


.newsletter-form button {
    width: 100%;
    padding: 14px;
    background: #fff;
    color: var(--primary-blue);
    border-radius: 8px;
    font-weight: 800;
    font-size: 14px;
    transition: 0.3s;
}


.newsletter-form button:hover {
    background: #f8fafc;
    transform: translateY(-2px);
}


.load-more-wrap {
    text-align: center;
    margin-top: 50px;
}


.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 2px solid var(--border-color);
    color: var(--text-dark);
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    transition: 0.3s;
    cursor: pointer;
}


.load-more-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(17, 85, 204, 0.1);
}


.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.tags-list a {
    display: inline-block;
    padding: 6px 14px;
    background: #f1f5f9;
    color: var(--text-dark);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    transition: 0.3s;
}


.tags-list a:hover {
    background: var(--primary-blue);
    color: #fff;
}


.blog-grid,
.posts-grid,
.blog-posts,
.blog-list,
.blog-cards {
    align-items: stretch !important;
}


.blog-card,
.post-card,
.blog-post-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}


.blog-card img,
.post-card img,
.blog-post-card img,
.blog-card .post-image,
.post-card .post-image,
.blog-post-card .post-image,
.blog-card .blog-image,
.post-card .blog-image,
.blog-post-card .blog-image {
    flex-shrink: 0 !important;
}


.blog-card .card-body,
.post-card .card-body,
.blog-post-card .card-body,
.blog-card .post-content,
.post-card .post-content,
.blog-post-card .post-content,
.blog-card .blog-content,
.post-card .blog-content,
.blog-post-card .blog-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}


.blog-card .card-footer,
.post-card .card-footer,
.blog-post-card .card-footer,
.blog-card .post-footer,
.post-card .post-footer,
.blog-post-card .post-footer,
.blog-card .blog-footer,
.post-card .blog-footer,
.blog-post-card .blog-footer {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


.blog-card p,
.post-card p,
.blog-post-card p {
    flex: 1 1 auto !important;
}


.blog-detail-page,
.blog-details-page,
.blog-detail-container,
main {
    background: #fff;
}


.blog-detail-container,
.blog-details-container,
.blog-wrapper,
.blog-detail-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 24px;
}


.blog-detail-grid,
.blog-content-wrapper,
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, .9fr);
    gap: 44px;
    align-items: start;
}


.blog-main,
.blog-content,
article {
    min-width: 0;
}


.blog-main h1,
.blog-content h1,
article h1 {
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.08;
    margin: 0 0 16px;
    color: #111827;
    font-weight: 750;
}


.blog-main h2,
.blog-content h2,
article h2 {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.2;
    margin: 36px 0 16px;
    color: #111827;
}


.blog-main h3,
.blog-content h3,
article h3 {
    font-size: 24px;
    line-height: 1.3;
    margin: 28px 0 12px;
    color: #111827;
}


.blog-main p,
.blog-content p,
article p,
.blog-main li,
.blog-content li,
article li {
    font-size: 18px;
    line-height: 1.75;
    color: #273244;
}


.blog-main img,
.blog-content img,
article img,
.featured-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}


.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 24px;
    color: #4b5563;
    font-size: 16px;
}


.blog-sidebar,
aside {
    position: sticky;
    top: 105px;
}


.blog-sidebar>div,
aside>div,
.sidebar-widget {
    background: #fff;
    border: 1px solid #e7edf6;
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 26px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
}


.blog-sidebar h3,
aside h3,
.sidebar-widget h3 {
    margin: 0 0 18px;
    font-size: 24px;
    color: #1565ff;
    border-bottom: 3px solid #1565ff;
    padding-bottom: 12px;
}


.blog-sidebar img,
aside img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}


.blog-sidebar a,
aside a {
    color: #111827;
    text-decoration: none;
    font-weight: 600;
}


.blog-sidebar a:hover,
aside a:hover {
    color: #1565ff;
}


.blog-cta,
.cta-box {
    margin: 34px 0;
    padding: 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f3f7ff, #eaf1ff);
    border: 1px solid #dce7ff;
}


.blog-cta h2,
.cta-box h2 {
    margin-top: 0;
}


.blog-cta a,
.cta-box a {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 24px;
    background: #1565ff;
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
}



/* ============================================================
  13. ABOUT US & CONTACT PAGE
   ============================================================ */


.metrics-section {

    padding: 50px 0;

    background: #fff;

}


.metrics-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 28px;

}


.metric-card {

    background: #fff;

    padding: 40px 30px;

    border-radius: 22px;

    text-align: center;

    border: 1px solid #edf2f7;

    transition: .35s;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .03);

}


.metric-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

}


.metric-card h2 {

    font-size: 56px;

    font-weight: 800;

    color: #1565ff;

    margin-bottom: 12px;

}


.metric-card h5 {

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 12px;

    color: #111827;

}


.metric-card p {

    font-size: 15px;

    line-height: 1.8;

    color: #6b7280;

}


.metric-card .brand-logos {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 25px;

}


.metric-card .brand-logos img {

    width: 52px;

    height: 52px;

    object-fit: contain;

    opacity: .8;

    transition: .3s;

}


.metric-card:hover .brand-logos img {

    opacity: 1;

    transform: scale(1.05);

}


.ai-section {

    padding: 50px 0;

    background: #fff;

}


.ai-content h2 {

    font-size: 52px;

    font-weight: 800;

    line-height: 1.15;

    margin-bottom: 22px;

    color: #111827;

}


.ai-content p {

    font-size: 17px;

    line-height: 1.9;

    color: #6b7280;

    margin-bottom: 35px;

}


.ai-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 34px;

    background: #1565ff;

    color: #fff;

    border-radius: 10px;

    font-weight: 700;

    transition: .35s;

}


.ai-btn:hover {

    background: #0d47a1;

    transform: translateY(-3px);

}


.ai-features {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 22px;

    margin-top: 40px;

}


.ai-feature {

    background: #f8fbff;

    padding: 24px;

    border-radius: 18px;

    transition: .35s;

    display: flex;

    gap: 18px;

}


.ai-feature:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

}


.ai-feature i {

    font-size: 30px;

    color: #1565ff;

}


.ai-feature h4 {

    font-size: 18px;

    margin-bottom: 8px;

    color: #111827;

}


.ai-feature p {

    font-size: 15px;

    color: #6b7280;

    line-height: 1.7;

    margin: 0;

}


.strategy-banner {

    padding: 50px 0;

    background: linear-gradient(135deg, #1565ff, #0d47a1);

}


.comp-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}


.comp-content h2 {

    font-size: 48px;

    font-weight: 800;

    line-height: 1.15;

    margin-bottom: 22px;

    color: #111827;

}


.comp-content p {

    font-size: 17px;

    line-height: 1.9;

    color: #6b7280;

    margin-bottom: 25px;

}


.comp-image {

    display: flex;

    justify-content: center;

    align-items: center;

}


.comp-image img {

    width: 100%;

    max-width: 600px;

    border-radius: 22px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

}


.reviews-section {

    padding: 50px 0;

    background: #f8fbff;

    overflow: hidden;

}


.review-card {

    flex: 0 0 380px;

    background: #fff;

    border-radius: 22px;

    padding: 35px;

    border: 1px solid #edf2f7;

    box-shadow: 0 12px 35px rgba(0, 0, 0, .04);

    transition: .35s;

}


.review-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 22px 50px rgba(0, 0, 0, .10);

}


.accordion {

    margin-top: 80px;

}


.accordion-item {

    background: #fff;

    border: 1px solid #edf2f7;

    border-radius: 18px;

    margin-bottom: 18px;

    overflow: hidden;

}


.accordion-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 22px 28px;

    cursor: pointer;

    font-size: 18px;

    font-weight: 700;

}


.accordion-header i {

    transition: .35s;

    color: #1565ff;

}


.accordion-item.active .accordion-header i {

    transform: rotate(180deg);

}


.accordion-content {

    max-height: 0;

    overflow: hidden;

    transition: max-height .35s ease;

    padding: 0 28px;

}


.accordion-item.active .accordion-content {

    max-height: 400px;

    padding: 0 28px 28px;

}


.accordion-content p {

    color: #6b7280;

    line-height: 1.9;

}


.why-card {

    background: #fff;

    padding: 35px;

    border-radius: 24px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .06);

    transition: .35s;

    border: 1px solid #edf2f8;

}


.why-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 30px 70px rgba(17, 85, 204, .15);

}


.why-icon {

    width: 70px;

    height: 70px;

    background: #1155cc;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 18px;

    font-size: 32px;

    margin-bottom: 22px;

}


.why-icon svg {
    width: 34px;
    height: 34px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    padding: 10px;
}


.why-icon i {
    font-size: 50px;
    color: #1155cc;
    display: block;
}


.why-card h3 {

    color: #07152f;

    font-size: 24px;

    margin-bottom: 15px;

}


.why-card p {

    color: #667085;

    line-height: 1.8;

}


.why-card {

    background: #fff;

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

    transition: .4s;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);

}


.why-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(17, 85, 204, .18);

}


.why-icon {

    width: 85px;

    height: 85px;

    margin: auto;

    border-radius: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #1155cc;

    color: #fff;

    font-size: 34px;

    margin-bottom: 25px;

}


.why-card h3 {

    font-size: 24px;

    color: #07152f;

    margin-bottom: 15px;

}


.process-box::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 24px;

    border: 2px solid transparent;

    transition: .35s;

    pointer-events: none;

}


.process-box:hover::before,
.why-card:hover::before {

    border-color: #1155cc;

}


.why-card:nth-child(2) {

    animation: floatCard 5s infinite;

}


.why-card:nth-child(4) {

    animation: floatCard 6s infinite;

}


.hero-partners {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 30px;
}


.hero-partners img {
    width: auto !important;
    height: 32px;
    max-width: 120px;
    object-fit: contain;
    display: block;
}


.exp-card,
.ai-feature-card {
    cursor: pointer
}


.exp-card:focus,
.ai-feature-card:focus {
    outline: 2px solid #2563eb;
    outline-offset: 4px
}


.about-hero {
    padding: 50px 0;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}

.about-hero::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.7);
}


.about-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}


.about-hero-text h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.1;
}


.about-hero-text p {
    font-size: 1.15rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 90%;
}


.about-hero-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


.hero-partners-wrap {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: #fff;
    padding: 30px 0;
    margin-top: 60px;
}


.hero-partners {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}


.hero-partners img {
    height: 35px;
    object-fit: contain;
    /*filter: grayscale(100%);*/
    /*transition: 0.3s;*/
    /*opacity: 0.7;*/
}


.hero-partners img:hover {
    /*filter: grayscale(0);*/
    /*opacity: 1;*/
    /*transform: scale(1.05);*/
}


.our-story {
    padding: 50px 0;
    background: #fff;
}


.story-grid {
    display: grid;
    grid-template-columns: 0.45fr 0.55fr;
    gap: 60px;
    align-items: center;
}


.story-img {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 500px;
}


.story-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.story-content h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 25px;
}


.story-content p {
    font-size: 1.05rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: 20px;
}


.core-values {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}


.value-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: left;
    transition: 0.3s;
}


.value-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 15px 30px rgba(17, 85, 204, 0.08);
}


.value-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}


.value-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}


.vision-mission {
    padding: 50px 0;
    background: #fff;
}


.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}


.vm-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    text-align: center;
    color: #fff;
}


.vm-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


.vm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}


.vm-card.mission .vm-overlay {
    background: linear-gradient(135deg, rgba(17, 85, 204, 0.8), rgba(0, 0, 0, 0.8));
}


.vm-content {
    position: relative;
    z-index: 2;
}


.vm-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}


.vm-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
}


.our-clients-section {
    padding: 50px 0;
    background-color: #f8fafc;
    text-align: center;
}


.clients-box {
    background: #fff;
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}


.clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px 30px;
    align-items: center;
    justify-items: center;
}


.clients-grid img {
    max-width: 120px;
    max-height: 45px;
    object-fit: contain;
    /*filter: grayscale(100%);*/
    /*opacity: 0.6;*/
    transition: 0.3s;
}


.clients-grid img:hover {
    /*filter: grayscale(0);*/
    opacity: 1;
    transform: scale(1.05);
}


.why-us {
    padding: 50px 0;
    background: #fff;
}


.why-us-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


.why-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    transition: 0.3s;
}


.why-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}


.why-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    color: var(--primary-blue);
}


.why-icon svg {
    width: 100%;
    height: 100%;
}


.why-card p {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}


.metrics-section {
    padding: 50px 0;
    background-color: #050505;
    color: #fff;
    border-top: 1px solid #111;
}


.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}


.metric-card-bg {
    border-radius: 20px;
    padding: 40px 30px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    border: 1px solid #222;
}


.metric-card-bg h2 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}


.metric-card-bg h5 {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    font-weight: 700;
}


.metric-card-bg p {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}


.bg-img-1 {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=600&q=80') center/cover;
}


.bg-img-2 {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=600&q=80') center/cover;
}


.bg-img-3 {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=600&q=80') center/cover;
}


.bg-img-4 {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=600&q=80') center/cover;
}


.ai-section {
    padding: 50px 0;
    background-color: #000;
    color: #fff;
    border-top: 1px solid #111;
}


.ai-logo {
    font-size: 2.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}


.ai-logo span {
    color: var(--primary-blue);
}


.ai-content p {
    color: #aaaaaa;
    font-size: 1.1rem;
    margin-bottom: 40px;
    line-height: 1.6;
}


.ai-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}


.ai-feature-card {
    background: #111;
    border: 1px solid #222;
    padding: 25px;
    border-radius: 12px;
}


.ai-feature-card h4 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #fff;
}


.ai-feature-card li {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}


.ai-feature-card li::before {
    content: '✓';
    color: var(--primary-blue);
    font-weight: bold;
}


.ai-btn {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    margin-top: 10px;
    transition: 0.3s;
}


.ai-btn:hover {
    background: #fff;
    color: #000;
}


.reviews-section {
    padding: 50px 0;
    background-color: #050505;
    color: #fff;
}


.review-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 20px;
    padding: 40px 30px;
}


/* .review-card p {
    font-size: 1.05rem;
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    min-height: 120px;
} */


.reviewer {
    display: flex;
    align-items: center;
    gap: 15px;
}


.reviewer img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-blue);
}


.reviewer h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}


.reviewer p {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 0;
}


.disruptors {
    padding: 50px 0;
    background-color: #000;
    color: #ffffff;
    text-align: center;
    border-top: 1px solid #1a1a1a;
}


.disruptors h2 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 60px;
}


.disruptors-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    align-items: center;
    justify-items: center;
    opacity: 0.7;
}


.disruptors-grid img {
    max-width: 120px;
    max-height: 40px;
    filter: brightness(0) invert(1);
    object-fit: contain;
}


.expertise-section {
    padding: 50px 0;
    background-color: #050505;
    color: #fff;
    border-top: 1px solid #111;
}


.compliance-section {
    padding: 50px 0;
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
    color: #fff;
}


.comp-layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}


.comp-left {
    flex: 0.4;
}


.comp-left h2 {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
}


.comp-left p {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
}


.comp-right {
    flex: 0.6;
    display: flex;
    flex-direction: column;
    width: 100%;
}


.accordion-box {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}


.acc-header {
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 600;
    transition: 0.3s;
}


.acc-header:hover {
    color: #bfdbfe;
}


.acc-icon {
    transition: transform 0.3s;
}


.accordion-box.active .acc-icon {
    transform: rotate(136deg);
    color: #ddd;
}


.acc-content {
    max-height: 0;
    opacity: 0;
    transition: all 0.4s ease;
}


.accordion-box.active .acc-content {
    max-height: 200px;
    opacity: 1;
    padding-bottom: 25px;
}


.acc-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}


.acc-tag {
    background: #fff;
    color: #1e3a8a;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
}


.strategy-banner {
    padding: 50px 0;
    background-color: #000;
}


.btn-white {
    background: #fff;
    color: #1e40af;
    padding: 15px 32px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 14px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}


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


.marketing-section {
    background-color: #000;
    padding: 50px 0;
}


.mkt-box {
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}


.mkt-left {
    flex: 0.5;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.mkt-logo {
    margin-bottom: 20px;
    font-weight: 800;
    font-size: 20px;
    color: var(--primary-blue);
}


.mkt-left h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.1;
}


.mkt-left p {
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1.1rem;
}


.btn-blue-large {
    background: var(--primary-blue);
    color: #fff;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 16px;
    border: none;
    display: inline-block;
    width: max-content;
    cursor: pointer;
}


.mkt-right {
    flex: 0.5;
    background: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80') no-repeat center center;
    background-size: cover;
    min-height: 450px;
}


.btn-white {
    background: #fff;
    color: #000;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 15px;
    border: none;
    transition: 0.3s;
}


.btn-white:hover {
    background: #e2e8f0;
}


.metrics-section {
    padding: 50px 0;
    background-color: #000;
}


.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.metric-card-bg {
    border-radius: 20px;
    padding: 40px 30px;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border: 1px solid #222;
}


.metric-card-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1;
}


.metric-card-bg h2 {
    font-size: 4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
}


.metric-card-bg p.title {
    font-size: 14px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: auto;
    position: relative;
    z-index: 2;
}


.bg-img-1 {
    background: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=600&q=80') center/cover;
}


.bg-img-2 {
    background: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=600&q=80') center/cover;
}


.bg-img-3 {
    background: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=600&q=80') center/cover;
}


.bg-img-4 {
    background: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=600&q=80') center/cover;
}


.bg-img-5 {
    background: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=600&q=80') center/cover;
}


.bg-img-6 {
    background: url('https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?auto=format&fit=crop&w=600&q=80') center/cover;
}


.metric-card-bg:nth-child(2)::after {
    animation-delay: 0.5s;
}


.metric-card-bg:nth-child(3)::after {
    animation-delay: 1s;
}


.metric-card-bg:nth-child(4)::after {
    animation-delay: 1.5s;
}


.metric-card-bg:nth-child(5)::after {
    animation-delay: 2s;
}


.metric-card-bg:nth-child(6)::after {
    animation-delay: 2.5s;
}


.acc-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}


.acc-head {
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
}


.acc-icon {
    font-size: 1.5rem;
    transition: transform 0.3s;
    font-weight: 300;
}


.acc-content {
    max-height: 0;
    opacity: 0;
    transition: all 0.4s ease;
    font-size: 14px;
    color: #bfdbfe;
    line-height: 1.6;
}


.acc-item.active .acc-content,
.accordion-box.active .acc-content {
    max-height: 400px;
    opacity: 1;
    padding-bottom: 25px;
    display: block;
}


.acc-item.active .acc-icon {
    transform: rotate(45deg);
}


.metrics-section {
    padding: 50px 0;
    background-color: #050505;
    color: #fff;
}


.metric-card-bg {
    border-radius: 20px;
    padding: 40px 30px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}


.metric-card-bg:hover {
    transform: translateY(-5px);
}


.metric-card-bg h2 {
    font-size: 3.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}


.metric-card-bg p {
    font-size: 14px;
    color: #eee;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}


.bg-img-4 {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=500&q=80') center/cover;
}


.ai-section {
    padding: 50px 0;
    background-color: #ffffff;
    color: #0f172a;
    border-top: 1px solid #e2e8f0;
}


.ai-logo {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.ai-logo span {
    color: #1155cc;
}


.ai-content h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
    color: #0f172a;
}


.ai-content p {
    color: #475569;
    font-size: 1.1rem;
    margin-bottom: 40px;
    line-height: 1.6;
}


.ai-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


.ai-feature-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 25px;
    border-radius: 12px;
}


.ai-feature-card h4 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #0f172a;
}


.ai-feature-card li {
    font-size: 13px;
    color: #475569;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}


.ai-feature-card li::before {
    content: '✓';
    color: #1155cc;
    font-weight: bold;
}


.ai-btn {
    border: 1px solid #1155cc;
    background: transparent;
    color: #1155cc;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    margin-top: 30px;
    display: inline-block;
    transition: 0.3s;
    text-decoration: none;
}


.ai-btn:hover {
    background: #1155cc;
    color: #fff;
}


.reviews-section {
    padding: 50px 0;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
}


.review-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px 30px;
    position: relative;
}

/* 
.review-card p {
    font-size: 1rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
} */


.reviewer img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}


.reviewer h4 {
    color: #0f172a;
    font-size: 15px;
    margin-bottom: 3px;
}


.reviewer span {
    color: #64748b;
    font-size: 12px;
}


.review-card:nth-child(1)::after {
    animation-delay: 0s;
}


.review-card:nth-child(2)::after {
    animation-delay: 0.8s;
}


.review-card:nth-child(3)::after {
    animation-delay: 1.6s;
}


.expertise-section {
    padding: 50px 0;
    background-color: #ffffff;
    color: #0f172a;
    border-top: 1px solid #e2e8f0;
}


.compliance-section {
    padding: 50px 0;
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
    color: #fff;
}


.comp-right {
    flex: 0.6;
    display: flex;
    flex-direction: column;
    gap: 0;
}


.accordion-box {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


.acc-header {
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
}


.acc-header span {
    font-size: 14px;
    opacity: 0.7;
    margin-right: 15px;
}


.acc-content {
    display: none;
    padding-bottom: 25px;
}


.accordion-box.active .acc-content {
    display: block;
}


.acc-tags {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}


.acc-tag {
    background: #fff;
    color: #1e3a8a;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}


.strategy-banner {
    padding: 50px 0;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
}


.btn-white {
    background: #fff;
    color: #1e40af;
    padding: 16px 32px;
    border-radius: 40px;
    font-weight: 800;
    font-size: 15px;
    transition: 0.3s;
    text-decoration: none;
}


.marketing-section {
    background-color: #ffffff;
    padding: 50px 0;
    border-top: 1px solid #e2e8f0;
}


.mkt-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}


.mkt-logo {
    margin-bottom: 20px;
    font-weight: 800;
    font-size: 20px;
    color: #1155cc;
}


.mkt-left h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
    line-height: 1.1;
}


.mkt-left p {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 25px;
}


.mkt-left a {
    background: #1155cc;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    width: max-content;
    transition: 0.3s;
}


.mkt-left a:hover {
    background: #0b3d99;
}


.mkt-right {
    flex: 0.5;
    position: relative;
    min-height: 350px;
}


.mkt-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}


.ai-section {
    padding: 50px 0;
    background-color: #ffffff;
    color: #0f172a;
    border-top: 1px solid #e2e8f0;
}


.metrics-color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: left;
}


.acc-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}


.acc-item {
    border-bottom: 1px solid #222;
}


.acc-head {
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    transition: 0.3s;
}

/* 
.acc-head:hover {
    color: var(--primary-blue);
} */

.consulting-section .acc-head span {
    font-size: 20px;
    color: #FFF;
}

.consulting-section .acc-item {
    border-color: #ddd;
}


.acc-head span {
    font-size: 13px;
    color: #666;
    margin-right: 15px;
}


.acc-icon {
    transition: transform 0.3s;
    font-size: 1.5rem;
    color: #fff;
}


.acc-item.active .acc-icon {
    transform: rotate(180deg);
}


.acc-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}


.acc-item.active .acc-content {
    max-height: 300px;
    opacity: 1;
    padding-bottom: 25px;
}


.acc-content ul {
    list-style: none;
}


.acc-content ul li {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}


.acc-content ul li::before {
    content: '✓';
    color: var(--primary-blue);
    font-weight: 800;
}


.btn-white-solid {
    background: #fff;
    color: #1e40af;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 15px;
    border: none;
    transition: 0.3s;
}


.btn-white-solid:hover {
    background: #e2e8f0;
}


.metrics-section {
    padding: 50px 0;
    background-color: #ffffff;
    color: #0f172a;
}


.metric-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px 30px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s, box-shadow 0.3s;
}


.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-color: #1155cc;
}


.metric-card h2 {
    font-size: 3.8rem;
    font-weight: 800;
    color: #1155cc;
    margin-bottom: 10px;
}


.metric-card h5 {
    font-size: 13px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}


.metric-card p {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}


.metric-card:nth-child(1)::after {
    animation-delay: 0s;
}


.metric-card:nth-child(2)::after {
    animation-delay: 0.5s;
}


.metric-card:nth-child(3)::after {
    animation-delay: 1s;
}


.metric-card:nth-child(4)::after {
    animation-delay: 1.5s;
}


.metric-card .brand-logos {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}


.metric-card .brand-logos img {
    width: 60px;
    filter: grayscale(1) opacity(0.7);
}



/* ============================================================
  14. SHARED HERO / SERVICE / PASTEL / PARTNER SECTIONS
   ============================================================ */


.hero-content-wrapper {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    align-items: center;

    gap: 70px;

    padding: 50px 0;

}


.industries-section {

    padding: 50px 0;

    background: #ffffff;

}


.ind-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


.sw-hero {
    padding: 50px 0;
    background: #fff;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}


.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}


.hero-content h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.2;
}


.hero-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 25px;
    line-height: 1.3;
}


.hero-content p {
    font-size: 1.05rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 30px;
}


.hero-bullets {
    margin-bottom: 40px;
}


.hero-bullets li {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}


.hero-bullets li::before {
    content: '✓';
    color: var(--primary-blue);
    font-weight: 800;
    font-size: 18px;
    margin-top: -2px;
}


.hero-btns {
    display: flex;
    gap: 15px;
}


.hero-img {
    border-radius: 20px;
    overflow: hidden;
}


.hero-img img {
    width: 100%;
    display: block;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


.benefits-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}


.benefits-grid {
    display: grid;
    grid-template-columns: 0.55fr 0.45fr;
    gap: 60px;
    align-items: center;
}


.partner-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}


.partner-grid {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    gap: 60px;
    align-items: center;
}


.partner-img img {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    display: block;
    mix-blend-mode: multiply;
}


.partner-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--text-dark);
}


.partner-content p {
    font-size: 1.05rem;
    color: var(--text-gray);
    margin-bottom: 30px;
    line-height: 1.6;
}


.hero-content h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 15px;
    line-height: 1.2;
}


.hero-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.3;
}


.hero-bullets li::before {
    content: '✓';
    color: var(--text-gray);
    font-weight: 800;
    font-size: 18px;
    margin-top: -2px;
}


.quote-hero {
    padding: 50px 0;
    background: #f8fafc;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}


.quote-text {
    font-size: 2.2rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-dark);
    max-width: 1000px;
    margin: 0 auto 20px auto;
    line-height: 1.4;
}


.quote-author {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.2rem;
}


.pastel-section {
    padding: 50px 0;
    background: #fff;
}


.pastel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.pastel-card {
    padding: 40px 30px;
    border-radius: 20px;
    transition: 0.3s;
    border: 1px solid transparent;
}


.pastel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}


.bg-blue {
    background-color: #e0f2fe;
}


.bg-green {
    background-color: #dcfce7;
}


.bg-orange {
    background-color: #ffedd5;
}


.bg-grey {
    background-color: #f1f5f9;
}


.bg-purple {
    background-color: #f3e8ff;
}


.bg-pink {
    background-color: #fce7f3;
}


.pastel-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    color: var(--text-dark);
}


.pastel-icon svg {
    width: 100%;
    height: 100%;
}


.pastel-card h4 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
}


.pastel-card p {
    font-size: 0.95rem;
    color: var(--text-dark);
    opacity: 0.8;
    line-height: 1.6;
}


.what-we-do-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}


.wwd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.wwd-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 30px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}


.wwd-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}


.wwd-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 20px;
    color: var(--primary-blue);
}


.wwd-icon svg {
    width: 100%;
    height: 100%;
}


.wwd-card h4 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
}


.wwd-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}


.services-list-section {
    padding: 50px 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
}


.services-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.sl-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 30px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}


.sl-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}


.sl-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}


.sl-icon {
    width: 28px;
    height: 28px;
    background: var(--text-dark);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 3px;
}


.sl-header h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.4;
}


.sl-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}


.benefits-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}


.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.benefit-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}


.benefit-card h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    display: inline-block;
}


.benefit-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}


.industries-section {
    padding: 50px 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
}


.ind-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    transition: 0.3s;
}


.ind-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-blue);
}


.ind-img {
    height: 220px;
    width: 100%;
    position: relative;
    overflow: hidden;
}


.ind-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}


.ind-card:hover .ind-img img {
    transform: scale(1.05);
}


.ind-content {
    padding: 30px;
}


.ind-content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
}


.ind-content p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}


.partner-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}


.partner-list li::before {
    content: '●';
    color: var(--primary-blue);
    font-size: 1.2rem;
    margin-top: -2px;
    margin-right: 6px;
}


.hero-content h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.2;
}


.hero-content h1 span {
    color: var(--primary-blue);
}


.services-list-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}


.sl-icon-top {
    width: 45px;
    height: 45px;
    margin-bottom: 20px;
    color: var(--primary-blue);
}


.sl-icon-top svg {
    width: 100%;
    height: 100%;
}


.sl-card h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 15px;
}


.benefits-section {
    padding: 50px 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
}

.tech-logos-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    text-align: center;
}


.tech-logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 50px;
}


.tech-logo-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}


.tech-logo-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}


.tech-logo-card img {
    max-width: 100%;
    height: 45px;
    object-fit: contain;
    margin-bottom: 15px;
}


.tech-logo-card span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray);
}


.tech-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}


.hero-content h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 20px;
    line-height: 1.2;
}


.hero-content p {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 30px;
}


.quote-text {
    font-size: 2.2rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-dark);
    max-width: 1100px;
    margin: 0 auto 15px auto;
    line-height: 1.4;
}


.quote-author {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 1.2rem;
}


.tech-logo-card img {
    max-width: 100%;
    height: 45px;
    object-fit: contain;
}


.services-list-section {
    padding: 50px 0;
    background: #fff;
}


.sl-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}


.sl-icon {
    width: 28px;
    height: 28px;
    background: var(--text-dark);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}


.sl-header h4 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-dark);
}


.partner-section {
    padding: 50px 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}


.industries-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}


.ind-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #fff;
    transition: 0.3s;
}


.hero-content p {
    font-size: 1.05rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 600;
}


.partner-img-box {
    background: #fff;
    border-radius: 24px;
    padding: 60px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}


.partner-img-box img {
    max-width: 80%;
    max-height: 150px;
    object-fit: contain;
    transition: 0.3s;
}


.partner-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.hero-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    justify-content: space-between;
}


.industries-section {
    padding: 50px 0;
    background-color: #ffffff;
    color: #0f172a;
    border-top: 1px solid #e2e8f0;
}


.ind-content-wrapper {
    flex: 0.35;
    padding: 20px 0;
}


.ind-content {
    display: none;
    animation: fadeIn 0.5s ease;
}


.ind-content.active {
    display: block;
}


.ind-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 30px;
}


.hero-grid {
    display: grid;
    grid-template-columns: 0.45fr 0.55fr;
    gap: 60px;
    align-items: center;
}


.hero-content h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}


.hero-bullets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 40px;
}


.hero-img {
    border-radius: 20px;
    overflow: hidden;
    background: #0b1120;
    padding: 40px;
    text-align: center;
    position: relative;
}


.hero-img h2 {
    color: #fff;
    font-size: 2rem;
    margin-top: 20px;
}


.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


.benefit-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    transition: 0.3s;
    display: flex;
    flex-wrap: wrap;
}


.benefit-card.dark {
    background: #000;
    color: #fff;
    border-color: #333;
}


.benefit-card.dark h4 {
    color: #fff;
}


.benefit-card.dark p {
    color: #94a3b8;
}


.benefit-card.dark .benefit-icon {
    color: #fff;
}

.quote-text {
    font-size: 2.5rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-dark);
    max-width: 1000px;
    margin: 0 auto 20px auto;
    line-height: 1.4;
}


.pastel-section {
    padding: 40px 0 100px 0;
    background: #fff;
}


.ind-img {
    height: 250px;
    width: 100%;
    position: relative;
    overflow: hidden;
}


.pastel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


.hero-grid {
    display: grid;
    grid-template-columns: 0.55fr 0.45fr;
    gap: 50px;
    align-items: center;
}


.hero-content h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.1;
}


.hero-content p {
    font-size: 1.15rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 30px;
}


.hero-bullets li {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.hero-bullets li::before {
    content: '✓';
    color: var(--primary-blue);
    font-weight: 800;
    background: #e0f2fe;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
}


.hero-img {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


.hero-img img {
    width: 100%;
    display: block;
}


.partner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}


.partner-img img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: block;
    mix-blend-mode: multiply;
}


.partner-content h2 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
    color: var(--text-dark);
}


.partner-content p {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 30px;
    line-height: 1.6;
}


.partner-list li::before {
    content: '●';
    color: var(--primary-blue);
    font-size: 1.2rem;
}


.quote-text {
    font-size: 2.2rem;
    font-weight: 600;
    font-style: italic;
    color: #333;
    max-width: 900px;
    margin: 0 auto 20px auto;
    line-height: 1.5;
}


.quote-author {
    color: var(--primary-blue);
    font-weight: 800;
    font-size: 1.2rem;
}


.benefits-section {
    padding: 50px 0;
    background: #fff;
}


.benefit-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}


.pastel-section {
    padding: 50px 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
}


.ind-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}


.ind-img {
    height: 220px;
    width: 100%;
    position: relative;
}


.ind-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hero-bullets li {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.hero-bullets li::before {
    content: '✓';
    color: var(--primary-blue);
    font-weight: 800;
    font-size: 18px;
    min-width: 24px;
}


.quote-text {
    font-size: 2.2rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-dark);
    max-width: 1000px;
    margin: 0 auto 15px auto;
    line-height: 1.4;
}


.quote-author {
    color: var(--text-gray);
    font-weight: 600;
    font-size: 1.2rem;
}


.tech-logo-card svg {
    height: 45px;
    margin-bottom: 15px;
    color: #475569;
}


.sl-header h4 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
}


.partner-list li {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}


.tech-logos-section {
    padding: 50px 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
    text-align: center;
}



/* ============================================================
  15. CONNECT WITH US — DARK FORM
   ============================================================ */


.connect-section {


    background: #f8fbff;

}


.connect-box {

    max-width: 1000px;

    margin: auto;

    background: #fff;

    border-radius: 28px;

    padding: 60px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);

}


.connect-box h2 {

    font-size: 46px;

    text-align: center;

    margin-bottom: 15px;

    color: #111827;

}


.connect-box p {

    text-align: center;

    color: #6b7280;

    margin-bottom: 45px;

}


.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.input-group {

    display: flex;

    flex-direction: column;

}


.input-group label {

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 10px;

    color: #111827;

}


.input-group.full-width {

    grid-column: 1 / -1;

}


.connect-section {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
    border-top: 1px solid #111;
}


.connect-box {
    background-color: #020617;
    border: 1px solid #1d4ed8;
    border-radius: 24px;
    padding: 60px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}


.connect-box h2 {
    color: #fff;
    font-size: 2.8rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
}


.connect-box p {
    color: #93c5fd;
    text-align: center;
    margin-bottom: 45px;
    font-size: 1.1rem;
}


.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}


.input-group label {
    color: #93c5fd;
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}


.input-group input,
.input-group select {
    background: transparent;
    border: none;
    border-bottom: 1px solid #3b82f6;
    color: #fff;
    padding: 10px 0;
    font-size: 15px;
    outline: none;
    width: 100%;
}


.input-group input::placeholder {
    color: #60a5fa;
}


.input-group.full-width {
    grid-column: span 2;
}


.btn-submit-form {
    background: var(--primary-blue);
    color: #fff;
    width: 100%;
    padding: 16px;
    border-radius: 40px;
    font-weight: 800;
    font-size: 16px;
    margin-top: 20px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}


.btn-submit-form:hover {
    background: #1d4ed8;
}


.connect-section {
    background-color: #050505;
}


.input-group label {
    color: #93c5fd;
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
    display: block;
}


.connect-section {
    background-color: #050505;
    border-top: 1px solid #111;
}


.connect-section {
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
}


.connect-box {
    background-color: #020617;
    border: 1px solid #1d4ed8;
    border-radius: 20px;
    padding: 60px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}


.connect-box h2 {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 800;
    text-align: center;
}


.connect-box p {
    color: #93c5fd;
    text-align: center;
    margin-bottom: 40px;
}


.input-group input,
.input-group select {
    background: transparent;
    border: none;
    border-bottom: 1px solid #3b82f6;
    color: #fff;
    padding: 10px 0;
    font-size: 15px;
    outline: none;
}


.btn-submit-form {
    background: var(--primary-blue);
    color: #fff;
    width: 100%;
    padding: 16px;
    border-radius: 40px;
    font-weight: 800;
    font-size: 16px;
    margin-top: 20px;
    transition: 0.3s;
    border: none;
}



/* ============================================================
  16. SHARED UTILITIES & MISC
   ============================================================ */


img {

    width: 100%;
    display: block;

}


.container {

    width: 100%;
    max-width: 1350px;

    margin: auto;

    padding: 0 25px;

}


.section-title {

    font-size: 52px;

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 22px;

    color: var(--text);

}


.section-subtitle {

    max-width: 760px;

    margin: auto;

    font-size: 18px;

    color: var(--text-light);

    line-height: 1.9;

}


.btn-solid {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 34px;

    background: var(--primary);

    color: #fff;

    border-radius: 10px;

    font-weight: 700;

    transition: .35s;

}


.btn-solid:hover {

    background: var(--primary-dark);

    transform: translateY(-3px);

}


.btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 34px;

    border: 2px solid var(--primary);

    color: var(--primary);

    border-radius: 10px;

    font-weight: 700;

    transition: .35s;

}


.btn-outline:hover {

    background: var(--primary);

    color: #fff;

}


.contact-divider {

    width: 1px;

    height: 34px;

    background: #ddd;

}


.menu-toggle {

    display: none;

    width: 48px;

    height: 48px;

    border: none;

    background: none;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 6px;

    position: relative;

    z-index: 1100;

}


.menu-toggle span {

    width: 28px;

    height: 3px;

    background: #1565ff;

    border-radius: 20px;

    transition: .35s;

    display: block;

}


.menu-toggle.active span:nth-child(1) {

    transform: translateY(9px) rotate(45deg);

}


.menu-toggle.active span:nth-child(2) {

    opacity: 0;

    transform: scaleX(0);

}


.menu-toggle.active span:nth-child(3) {

    transform: translateY(-9px) rotate(-45deg);

}


.hero {

    position: relative;

    padding-top: 88px;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #fff;

}


.hero::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background: linear-gradient(135deg,
            #ffffff 0%,
            #f5f9ff 45%,
            #eef5ff 100%);

    z-index: 0;

}


.hero-video {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .08;

    z-index: 0;

}


.hero-left {

    max-width: 670px;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 22px;

    border-radius: 50px;

    background: #eef5ff;

    color: #1565ff;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 28px;

}


.hero-left h1 {

    font-size: clamp(32px, 3.8vw, 52px);

    font-weight: 800;

    line-height: 1.08;

    margin-bottom: 25px;

    letter-spacing: -2px;

    color: #111827;

}


.hero-left h1 span {

    color: #1565ff;

    display: block;

}


.hero-left p {

    font-size: 18px;

    color: #6b7280;

    line-height: 1.9;

    margin-bottom: 40px;

}


.hero-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    margin-bottom: 45px;

}


.hero-stats {

    display: flex;

    align-items: center;

    gap: 45px;

    flex-wrap: wrap;

}


.hero-stat h3 {

    font-size: 36px;

    font-weight: 800;

    color: #1565ff;

    margin-bottom: 5px;

}


.hero-stat span {

    font-size: 15px;

    color: #6b7280;

}


.hero-right {

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}


.hero-right img {

    width: 100%;

    max-width: 620px;

    animation: heroFloat 5s ease-in-out infinite;

    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, .10));

}


.hero-card {

    position: absolute;

    background: #fff;

    border-radius: 18px;

    padding: 18px 22px;

    box-shadow: 0 15px 45px rgba(0, 0, 0, .08);

    display: flex;

    align-items: center;

    gap: 15px;

}


.hero-card h4 {

    font-size: 18px;

    margin-bottom: 3px;

}


.hero-card p {

    font-size: 14px;

    color: #6b7280;

}


.hero-card i {

    font-size: 26px;

    color: #1565ff;

}


.card-1 {

    top: 40px;

    left: -20px;

}


.card-2 {

    bottom: 45px;

    right: -20px;

}


.services-wrapper {

    padding: 50px 0;

    background: #fafcff;

}


.services-header {

    max-width: 760px;

    margin: auto;

    text-align: center;

    margin-bottom: 70px;

}


.services-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}


.service-box {

    background: #fff;

    padding: 40px 30px;

    border-radius: 22px;

    border: 1px solid #edf2f7;

    transition: .35s;

    position: relative;

    overflow: hidden;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .03);

}


.service-box::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background: #1565ff;

    transform: scaleX(0);

    transition: .35s;

}


.service-box:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 55px rgba(0, 0, 0, .08);

}


.service-box:hover::before {

    transform: scaleX(1);

}


.service-icon {

    width: 72px;

    height: 72px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef5ff;

    margin-bottom: 25px;

}


.service-icon img {

    width: 38px;

    height: 38px;

    object-fit: contain;

}


.service-box h3 {

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 18px;

    color: #111827;

}


.service-box p {

    font-size: 16px;

    color: #6b7280;

    line-height: 1.8;

    margin-bottom: 28px;

}


.service-box a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 15px;

    font-weight: 700;

    color: #1565ff;

    transition: .3s;

}


.service-box:hover a {

    gap: 14px;

}


.view-all-container {

    text-align: center;

    margin-top: 55px;

}


.btn-view-all {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 40px;

    background: #1565ff;

    color: #fff;

    border-radius: 10px;

    font-weight: 700;

    transition: .35s;

}


.btn-view-all:hover {

    background: #0d47a1;

    transform: translateY(-3px);

}


.ai-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}


.ai-image {

    display: flex;

    justify-content: center;

    align-items: center;

}


.ai-image img {

    width: 100%;

    max-width: 620px;

    border-radius: 24px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

}


.strategy-card {

    background: #fff;

    border-radius: 28px;

    padding: 60px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 60px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .12);

}


.strategy-text {

    flex: 1;

}


.strategy-text h2 {

    font-size: 46px;

    font-weight: 800;

    line-height: 1.15;

    margin-bottom: 20px;

    color: #111827;

}


.strategy-text p {

    font-size: 17px;

    line-height: 1.8;

    color: #6b7280;

    margin-bottom: 30px;

}


.strategy-image {

    flex: 1;

    display: flex;

    justify-content: center;

}


.strategy-image img {

    width: 100%;

    max-width: 520px;

    border-radius: 22px;

}


.company-section {

    padding: 50px 0;

    background: #fff;

}


.btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 34px;

    background: #1565ff;

    color: #fff;

    border-radius: 10px;

    font-weight: 700;

    transition: .35s;

}


.btn-primary:hover {

    background: #0d47a1;

    transform: translateY(-3px);

}


.reviews-header {

    max-width: 780px;

    margin: auto;

    text-align: center;

    margin-bottom: 70px;

}

/* 
.reviews-header h2 {

    font-size: 52px;

    font-weight: 800;

    color: #111827;

    margin-bottom: 20px;

} */


/* .reviews-header p {

    font-size: 18px;

    color: #6b7280;

    line-height: 1.9;

} */


.reviews-wrapper {

    position: relative;

    overflow: hidden;

}


.reviews-track {

    display: flex;

    gap: 30px;

    transition: transform .5s ease;

    scroll-behavior: smooth;

}


.review-stars {

    display: flex;

    /* gap: 6px; */

    /* margin-bottom: 20px; */

}


.review-stars i {

    color: #FFC107;

    font-size: 18px;

}


.review-text {

    font-size: 16px;

    color: #555;

    line-height: 1.9;

    margin-bottom: 30px;

}


.review-user {

    display: flex;

    align-items: center;

    gap: 16px;

}


.review-user img {

    width: 64px;

    height: 64px;

    border-radius: 50%;

    object-fit: cover;

}


.review-info h4 {

    font-size: 19px;

    font-weight: 700;

    color: #111827;

    margin-bottom: 4px;

}


.review-info span {

    font-size: 14px;

    color: #6b7280;

}


.review-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-top: 50px;

}


.review-btn {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: #1565ff;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .35s;

}


.review-btn:hover {

    background: #0d47a1;

    transform: translateY(-3px);

}


.review-dots {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 35px;

}


.review-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #d1d5db;

    transition: .35s;

}


.review-dot.active {

    background: #1565ff;

    transform: scale(1.2);

}


.industries-header {

    max-width: 800px;

    margin: 0 auto 70px;

    text-align: center;

}

/* 
.industry-card {

    background: #fff;

    border: 1px solid #edf2f7;

    border-radius: 22px;

    padding: 35px;

    transition: .35s;

    position: relative;

    overflow: hidden;

} */


.industry-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

}


.industry-icon {

    width: 72px;

    height: 72px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #eef5ff;

    margin-bottom: 25px;

}


.industry-icon img {

    width: 38px;

}


.industry-card h3 {

    font-size: 24px;

    margin-bottom: 15px;

    color: #111827;

}


.industry-card p {

    color: #6b7280;

    line-height: 1.8;

}


.industry-details {

    margin-top: 20px;

    border-top: 1px solid #edf2f7;

    padding-top: 20px;

    color: #6b7280;

    line-height: 1.8;

}


.input-group input,

.input-group textarea,

.input-group select {

    width: 100%;

    padding: 16px 18px;

    border: 1px solid #dbe4ec;

    border-radius: 12px;

    font-size: 15px;

    transition: .3s;

    background: #fff;

}


.input-group input:focus,

.input-group textarea:focus,

.input-group select:focus {

    border-color: #1565ff;

    box-shadow: 0 0 0 4px rgba(21, 101, 255, .08);

    outline: none;

}


.input-group textarea {

    min-height: 80px;

    resize: vertical;

}


.btn-submit-large {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    margin-top: 35px;

    width: 100%;

    padding: 18px;

    background: #1565ff;

    color: #fff;

    border-radius: 12px;

    font-size: 17px;

    font-weight: 700;

    transition: .35s;

}


.btn-submit-large:hover {

    background: #0d47a1;

    transform: translateY(-2px);

}


.footer {

    background: #0f172a;

    color: #fff;

    padding: 50px 0;

}


.footer-brand img {

    max-width: 180px;

    margin-bottom: 20px;

}


.footer-links h4 {

    font-size: 20px;

    margin-bottom: 22px;

    font-weight: 700;

}


.footer-links ul {

    list-style: none;

}


.footer-links li {

    margin-bottom: 14px;

}


.footer-links a {

    color: #cbd5e1;

    transition: .3s;

}


.footer-links a:hover {

    color: #1565ff;

    padding-left: 8px;

}


.footer-social {

    display: flex;

    gap: 14px;

    margin-top: 22px;

}


.footer-social a {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .08);

    transition: .35s;

    font-size: 18px;

}


.footer-social a:hover {

    background: #1565ff;

    transform: translateY(-4px);

}


.footer-bottom p {

    font-size: 14px;

    color: #94a3b8;

}


.footer-bottom a {

    color: #94a3b8;

    transition: .3s;

}


.footer-bottom a:hover {

    color: #1565ff;

}


.whatsapp-float {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #25D366;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    color: #fff;

    box-shadow: 0 12px 25px rgba(0, 0, 0, .18);

    z-index: 9999;

    transition: .35s;

}


.whatsapp-float:hover {

    transform: scale(1.08);

}


.scroll-top {

    position: fixed;

    right: 25px;

    bottom: 100px;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: #1565ff;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transition: .35s;

    z-index: 9998;

}


.scroll-top.show {

    opacity: 1;

    visibility: visible;

}


.fade-up {

    opacity: 0;

    transform: translateY(40px);

    transition: .8s ease;

}


.fade-up.show {

    opacity: 1;

    transform: translateY(0);

}


.zoom-in {

    opacity: 0;

    transform: scale(.92);

    transition: .8s ease;

}


.zoom-in.show {

    opacity: 1;

    transform: scale(1);

}


.text-center {

    text-align: center;

}


.mt-20 {

    margin-top: 20px;

}


.mt-40 {

    margin-top: 40px;

}


.mb-20 {

    margin-bottom: 20px;

}


.mb-40 {

    margin-bottom: 40px;

}


.radius {

    border-radius: 20px;

}


.shadow {

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

}


.hidden {

    display: none !important;

}


.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: none;
    background: #1155cc;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
}


.contact-hero {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background:
        radial-gradient(circle at top right, #3b82f633 0%, transparent 35%),
        linear-gradient(135deg, #07152f 0%, #0b2d63 45%, #1155cc 100%);
}


.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 70px;
}


.contact-content {
    position: relative;
    z-index: 2;
}


.contact-badge {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 22px;

    border-radius: 40px;

    background: rgba(255, 255, 255, .12);

    border: 1px solid rgba(255, 255, 255, .15);

    color: #fff;

    font-size: 13px;

    letter-spacing: 1px;

    margin-bottom: 25px;

}


.contact-content h1 {

    color: #fff;

    font-size: clamp(32px, 3.8vw, 52px);

    line-height: 1.15;

    font-weight: 800;

    margin-bottom: 25px;

}


.contact-content h1 span {

    color: #8fd3ff;

}


.contact-content p {

    color: #d8e7ff;

    font-size: 18px;

    line-height: 1.9;

    max-width: 600px;

}


.contact-action {

    display: flex;

    gap: 18px;

    margin-top: 40px;

    flex-wrap: wrap;

}


.primary-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    height: 56px;

    padding: 0 34px;

    border-radius: 50px;

    background: #fff;

    color: #1155cc;

    font-weight: 700;

    transition: .35s;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);

}


.primary-btn:hover {

    transform: translateY(-5px);

}


.secondary-btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    height: 56px;

    padding: 0 34px;

    border-radius: 50px;

    border: 2px solid rgba(255, 255, 255, .3);

    color: #fff;

    transition: .35s;

}


.secondary-btn:hover {

    background: #fff;

    color: #1155cc;

}


.contact-features {

    display: flex;

    gap: 22px;

    flex-wrap: wrap;

    margin-top: 55px;

}


.contact-features div {

    width: 160px;

    padding: 22px;

    border-radius: 20px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .12);

    backdrop-filter: blur(15px);

}


.contact-features h2 {

    color: #fff;

    font-size: 36px;

    margin-bottom: 8px;

}


.contact-features p {

    color: #c9dcff;

    font-size: 14px;

}


.contact-image {

    position: relative;

}


.contact-image img {

    width: 100%;

    border-radius: 28px;

    box-shadow: 0 30px 60px rgba(0, 0, 0, .28);

}


.floating-card {

    position: absolute;

    left: -30px;

    bottom: 35px;

    width: 260px;

    background: #fff;

    padding: 22px;

    border-radius: 20px;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .16);

}


.floating-card h3 {

    color: #1155cc;

    margin-bottom: 10px;

}


.floating-card p {

    color: #555;

    line-height: 1.7;

}


.contact-section {

    padding: 50px 0;

    background: #f8fbff;

}


.contact-wrapper {

    display: grid;

    grid-template-columns: 380px 1fr;

    gap: 50px;

}


.contact-left {

    background: #07152f;

    color: #fff;

    border-radius: 28px;

    padding: 45px;

}


.contact-left h2 {

    font-size: 34px;

    margin-bottom: 35px;

}


.info-item {

    display: flex;

    gap: 18px;

    margin-bottom: 28px;

}


.info-icon {

    width: 60px;

    height: 60px;

    border-radius: 16px;

    background: #1155cc;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 26px;

    flex-shrink: 0;

}


.info-item h3 {

    margin-bottom: 6px;

    color: #fff;

}


.info-item p {

    color: #c6d7ef;

    line-height: 1.7;

}


.contact-form {

    background: #fff;

    border-radius: 28px;

    padding: 50px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .08);

    position: relative;

}


.contact-form::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background: linear-gradient(90deg, #1155cc, #2b7fff, #56b8ff);

}


.contact-form h2 {

    font-size: 38px;

    color: #07152f;

    margin-bottom: 35px;

}


.contact-form form {

    display: flex;

    flex-direction: column;

    gap: 22px;

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 22px;

}


.contact-form input,
.contact-form select,
.contact-form textarea {

    width: 100%;

    padding: 16px 20px;

    border: 1px solid #d7e3f3;

    border-radius: 14px;

    font-size: 15px;

    color: #222;

    background: #fff;

    transition: .35s;

    outline: none;

}


.contact-form textarea {

    resize: vertical;

    min-height: 170px;

}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {

    border-color: #1155cc;

    box-shadow: 0 0 0 4px rgba(17, 85, 204, .10);

}


.contact-form input::placeholder,
.contact-form textarea::placeholder {

    color: #8b97aa;

}


.contact-form select {

    cursor: pointer;

}


.contact-form button {

    height: 58px;

    border: none;

    border-radius: 50px;

    background: linear-gradient(90deg, #1155cc, #0b75ff);

    color: #fff;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .35s;

    box-shadow: 0 18px 45px rgba(17, 85, 204, .30);

}


.contact-form button:hover {

    transform: translateY(-5px);

    box-shadow: 0 25px 60px rgba(17, 85, 204, .40);

}


.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover {

    border-color: #aacbff;

}


.contact-form {

    animation: fadeUp .8s ease;

}


.why-orionsoft {
    padding: 50px 0;
    background: #fff;
}


.section-title {
    text-align: center;
    margin-bottom: 70px;
}


.section-title span {
    color: #1155cc;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.section-title h2 {
    font-size: 48px;
    margin: 18px 0;
    color: #07152f;
    font-weight: 800;
}


.section-title p {
    max-width: 760px;
    margin: auto;
    color: #667085;
    line-height: 1.8;
    font-size: 22px;
}


.why-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


.our-process {

    padding: 50px 0;

    background: #f8fbff;

}


.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}


.process-card {

    background: #fff;

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

    transition: .35s;

    position: relative;

    overflow: hidden;

}


.process-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .08);

}


.process-card .number {

    width: 70px;

    height: 70px;

    margin: auto;

    border-radius: 50%;

    background: #1155cc;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 25px;

}


.process-card h3 {

    color: #07152f;

    margin-bottom: 12px;

    font-size: 24px;

}


.process-card p {

    color: #667085;

    line-height: 1.8;

}


.tech-stack {

    padding: 50px 0;

    background: #fff;

}


.tech-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    justify-content: center;

}


.tech-grid span {

    padding: 15px 28px;

    border-radius: 50px;

    background: #eef5ff;

    color: #1155cc;

    font-weight: 700;

    transition: .3s;

}


.tech-grid span:hover {

    background: #1155cc;

    color: #fff;

    transform: translateY(-5px);

}


.contact-cta {

    padding: 50px 0;

    background: linear-gradient(135deg, #07152f, #1155cc);

}


.cta-box {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    color: #fff;

}


.cta-box h2 {

    font-size: 46px;

    margin-bottom: 15px;

}


.cta-box p {

    max-width: 650px;

    color: #d7e7ff;

    line-height: 1.8;

}


.cta-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 36px;

    border-radius: 50px;

    background: #fff;

    color: #1155cc;

    font-weight: 700;

    transition: .35s;

}


.cta-btn:hover {

    transform: translateY(-5px);

}


.testimonials {
    padding: 50px 0;
    background: #ffffff;
}


.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.testimonial-card {
    background: #fff;
    padding: 35px;
    border-radius: 22px;
    border: 1px solid #e7edf5;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);
    transition: .35s;
}


.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(17, 85, 204, .15);
}


.stars {
    font-size: 22px;
    margin-bottom: 18px;
}


.testimonial-card p {
    color: #667085;
    line-height: 1.8;
    margin-bottom: 25px;
}


.client {
    display: flex;
    align-items: center;
    gap: 15px;
}


.client img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}


.client h4 {
    color: #07152f;
}


.client span {
    color: #888;
    font-size: 14px;
}


.faq-section {
    padding: 50px 0;
    background: #f8fbff;
}


.faq {
    max-width: 900px;
    margin: auto;
}


.faq-item {
    background: #fff;
    border-radius: 18px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .05);
}


.faq-btn {
    width: 100%;
    border: none;
    background: #fff;
    padding: 22px 30px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #07152f;
}


.faq-content {
    display: none;
    padding: 0 30px 25px;
    color: #667085;
    line-height: 1.8;
}


.quick-contact {
    padding: 50px 0;
    background: #fff;
}


.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.quick-card {
    background: linear-gradient(135deg, #1155cc, #0a2f6d);
    color: #fff;
    border-radius: 24px;
    padding: 45px 35px;
    text-align: center;
    transition: .35s;
}


.quick-card:hover {
    transform: translateY(-10px);
}


.quick-icon {
    font-size: 46px;
    margin-bottom: 18px;
}


.quick-card h3 {
    margin-bottom: 10px;
}


.quick-card p {
    margin-bottom: 25px;
    color: #d8e8ff;
}


.quick-card a {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 50px;
    background: #fff;
    color: #1155cc;
    font-weight: 700;
    transition: .3s;
}


.quick-card a:hover {
    background: #eef5ff;
}


.final-cta {
    padding: 50px 0;
    background: linear-gradient(135deg, #07152f, #1155cc);
}


.final-box {
    text-align: center;
    color: #fff;
}


.final-box h2 {
    font-size: 52px;
    margin-bottom: 20px;
}


.final-box p {
    max-width: 720px;
    margin: 0 auto 35px;
    color: #d7e7ff;
    line-height: 1.8;
}


.final-box a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    padding: 0 40px;
    border-radius: 50px;
    background: #fff;
    color: #1155cc;
    font-weight: 700;
    transition: .35s;
}


.final-box a:hover {
    transform: translateY(-5px);
}


.industry-hero {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background: linear-gradient(135deg, #07152f, #1155cc);
}


.industry-hero::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    right: -250px;
    top: -250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
}


.industry-hero .container {

    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;

}


.industry-left {

    position: relative;
    z-index: 2;

}


.industry-tag {

    display: inline-block;

    background: rgba(255, 255, 255, .12);

    color: #fff;

    padding: 12px 22px;

    border-radius: 50px;

    font-size: 13px;

    letter-spacing: 1px;

    margin-bottom: 25px;

    border: 1px solid rgba(255, 255, 255, .18);

}


.industry-left h1 {

    font-size: clamp(32px, 3.8vw, 52px);

    color: #fff;

    line-height: 1.15;

    font-weight: 800;

    margin-bottom: 25px;

}


.industry-left h1 span {

    color: #8fd3ff;

}


.industry-left p {

    color: #d8e7ff;

    font-size: 18px;

    line-height: 1.9;

    max-width: 620px;

}


.industry-buttons {

    display: flex;

    gap: 20px;

    margin-top: 40px;

}


.industry-buttons a {

    text-decoration: none;

}


.primary-btn {

    height: 56px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    padding: 0 34px;

    background: #fff;

    color: #1155cc;

    border-radius: 50px;

    font-weight: 700;

    transition: .35s;

}


.primary-btn:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);

}


.secondary-btn {

    height: 56px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    padding: 0 34px;

    border-radius: 50px;

    border: 2px solid rgba(255, 255, 255, .3);

    color: #fff;

    transition: .35s;

}


.industry-awards {

    display: flex;

    gap: 22px;

    flex-wrap: wrap;

    margin-top: 55px;

}


.industry-awards div {

    width: 170px;

    padding: 22px;

    border-radius: 20px;

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, .15);

}


.industry-awards h3 {

    color: #fff;

    font-size: 34px;

    margin-bottom: 8px;

}


.industry-awards span {

    color: #d9e8ff;

    font-size: 14px;

}


.industry-slider {

    position: relative;

}


.industry-slider img {

    width: 100%;

    border-radius: 30px;

    box-shadow: 0 35px 70px rgba(0, 0, 0, .30);

    transition: .5s;

}


.industry-intro {

    padding: 50px 0;

    text-align: center;

}


.industry-intro h2 {

    font-size: 48px;

    color: #07152f;

    margin-bottom: 18px;

}


.industry-intro p {

    max-width: 760px;

    margin: auto;

    color: #667085;

    line-height: 1.9;

}


.industry-heading {

    text-align: center;

    margin-bottom: 60px;

}


.industry-heading h2 {

    font-size: 46px;

    color: #07152f;

    margin-bottom: 18px;

}


.industry-heading p {

    max-width: 700px;

    margin: auto;

    color: #667085;

    line-height: 1.8;

}


.industry-grid {

    padding: 50px 0;

    background: #fff;

}


.industry-cards {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}


.industry-card {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    background: #fff;

    min-height: 420px;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);

    transition: .45s;

}


.industry-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 30px 70px rgba(17, 85, 204, .20);

}


.industry-card img {

    width: 100%;

    height: 420px;

    object-fit: cover;

    transition: .6s;

}


.industry-card:hover img {

    transform: scale(1.12);

}


.industry-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 28px;

    z-index: 2;

    background: linear-gradient(to top,
            rgba(4, 16, 42, .97),
            rgba(4, 16, 42, .75),
            transparent);

}


.industry-overlay span {

    display: inline-flex;

    width: 46px;

    height: 46px;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: #1155cc;

    color: #fff;

    font-weight: 700;

    margin-bottom: 18px;

}


.industry-overlay h3 {

    color: #fff;

    font-size: 24px;

    margin-bottom: 14px;

}


.industry-overlay p {

    color: #dbe7ff;

    line-height: 1.8;

    margin-bottom: 22px;

    font-size: 15px;

}


.industry-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 48px;

    padding: 0 28px;

    border-radius: 50px;

    background: #fff;

    color: #1155cc;

    font-weight: 700;

    transition: .35s;

}


.industry-btn:hover {

    background: #1155cc;

    color: #fff;

}


.industry-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg,
            transparent,
            rgba(17, 85, 204, .08));

    opacity: 0;

    transition: .35s;

    pointer-events: none;

}


.industry-card:hover::after {

    opacity: 1;

}


.industry-card::before {

    content: "";

    position: absolute;

    top: -120%;

    left: -40%;

    width: 120px;

    height: 220%;

    background: rgba(255, 255, 255, .18);

    transform: rotate(30deg);

    transition: .7s;

    z-index: 5;

    pointer-events: none;

}


.industry-card:hover::before {

    left: 140%;
    top: 0;

}


.industry-badge {

    position: absolute;

    top: 20px;

    right: 20px;

    background: #fff;

    color: #1155cc;

    padding: 8px 16px;

    border-radius: 40px;

    font-size: 12px;

    font-weight: 700;

    z-index: 10;

}


.industry-card {

    animation: industryFade .8s ease;

}


.industry-why {

    padding: 50px 0;

    background: #f8fbff;

}


.why-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}


.industry-process {

    padding: 50px 0;

    background: #fff;

}


.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}


.process-box {

    position: relative;

    background: #fff;

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .06);

    transition: .35s;

}


.process-box:hover {

    transform: translateY(-8px);

}


.step {

    width: 80px;

    height: 80px;

    margin: auto;

    border-radius: 50%;

    background: linear-gradient(135deg, #1155cc, #2f8fff);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 25px;

}


.process-box h3 {

    color: #07152f;

    font-size: 24px;

    margin-bottom: 15px;

}


.process-box p {

    color: #667085;

    line-height: 1.8;

}


.industry-cta {

    padding: 50px 0;

    background:
        linear-gradient(135deg, #07152f, #1155cc);

    overflow: hidden;

    position: relative;

}


.industry-cta::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .06);

    right: -180px;

    top: -180px;

}


.cta-box {

    position: relative;

    z-index: 2;

    text-align: center;

    color: #fff;

}


.cta-box h2 {

    font-size: 54px;

    margin-bottom: 22px;

}


.cta-box p {

    max-width: 760px;

    margin: auto;

    color: #dbe7ff;

    line-height: 1.9;

    margin-bottom: 40px;

}


.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}


.cta-buttons a {

    text-decoration: none;

}


#industryImage {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 30px;
    transition: opacity .8s ease;
}


.service-grid,
.services-grid {
    align-items: stretch
}


.service-box,
.service-card {
    height: 100%;
    display: flex;
    flex-direction: column
}


.service-box .btn-link,
.service-card .btn-link {
    margin-top: auto
}


section {
    scroll-margin-top: 90px
}


.git-dropdown {
    position: relative;
}


.git-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1155cc;
    color: #fff;
    border: none;
    padding: 11px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: .25s;
}


.git-btn:hover {
    background: #0d3f99;
}


.git-btn .git-caret {
    width: 14px;
    height: 14px;
    transition: .25s;
}


.git-dropdown.open .git-btn .git-caret,
.git-dropdown:hover .git-btn .git-caret {
    transform: rotate(180deg);
}


.git-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .15);
    min-width: 220px;
    padding: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .2s;
}


.git-dropdown:hover .git-menu,
.git-dropdown.open .git-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.git-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    transition: .2s;
}


.git-item:hover {
    background: #eff6ff;
    color: #1155cc;
}


.git-item svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}


.git-item.git-email svg {
    color: #1155cc;
}


.git-item.git-call svg {
    color: #1155cc;
}


.git-item.git-whatsapp svg {
    color: #25D366;
}


.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99998;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
    transition: .25s;
}


.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
}


.whatsapp-float svg {
    width: 32px;
    height: 32px;
}


.container {
    box-sizing: border-box;
}


section {
    box-sizing: border-box;
}


.home-hero {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    background-color: #fff;
    padding-top: 90px;
}


.home-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}


.home-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0.05) 100%);
    z-index: 2;
}


.home-hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-top: 0;
}


.home-hero-text {
    max-width: 820px;
    text-align: left;
    overflow: visible;
}


.home-hero-tag {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    display: block;
}


.home-hero-heading {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 25px;
    text-transform: uppercase;
}


.home-hero-heading span {
    color: #1155cc;
}


.home-hero-desc {
    font-size: 1.15rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 500;
}


.home-hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}


.hero-btn-primary {
    background-color: #1155cc;
    color: #fff;
    padding: 16px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(17, 85, 204, 0.15);
}


.hero-btn-primary:hover {
    background-color: #0b3d99;
    transform: translateY(-3px);
}


.hero-btn-secondary {
    background-color: transparent;
    color: #0f172a;
    padding: 16px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid #cbd5e1;
    transition: 0.3s;
    display: inline-block;
}


.hero-btn-secondary:hover {
    background-color: #eff6ff;
    border-color: #1155cc;
}


.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: .35s;
}


.mobile-overlay.active {
    /*opacity: 1;*/
    visibility: visible;
}


body.menu-open {
    overflow: hidden;
}


html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}


img {
    max-width: 100% !important;
    height: auto;
}


.container {
    width: 100% !important;
}


.sr-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.sr-reveal.sr-visible {
    opacity: 1;
    transform: translateY(0);
}


.float-anim {
    animation: floatUpDown 3.2s ease-in-out infinite;
}


.float-anim:nth-child(2n) {
    animation-delay: 0.4s;
}


.float-anim:nth-child(3n) {
    animation-delay: 0.8s;
}


.float-anim:nth-child(4n) {
    animation-delay: 1.2s;
}


.auto-highlight {
    transition: box-shadow 0.6s ease, border-color 0.6s ease, transform 0.6s ease;
}


.auto-highlight.is-active {
    animation: autoBlink 1.6s ease-in-out 1;
    transform: translateY(-4px);
}


.js-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}


.health-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
}


.health-tag {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1565ff;
}


.health-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.health-btn-primary {
    color: #ffffff;
    background: #1565ff;
    border: 2px solid #1565ff;
    box-shadow: 0 10px 25px rgba(21, 101, 255, .20);
}


.health-btn-primary:hover {
    color: #ffffff;
    background: #0d4fd6;
    border-color: #0d4fd6;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(21, 101, 255, .28);
}


.health-btn-outline {
    color: #1565ff;
    background: #ffffff;
    border: 2px solid #1565ff;
}


.health-btn-outline:hover {
    color: #ffffff;
    background: #1565ff;
    transform: translateY(-3px);
}


.health-hero {
    position: relative;
    width: 100%;
    min-height: 680px;
    padding: 50px 0;
    overflow: hidden;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(21, 101, 255, .10),
            transparent 35%),
        linear-gradient(135deg,
            #f7faff 0%,
            #ffffff 50%,
            #eef5ff 100%);
}


.health-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    top: -180px;
    right: -120px;
    background: rgba(21, 101, 255, .07);
}


.health-hero::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    bottom: -130px;
    left: -80px;
    background: rgba(21, 101, 255, .06);
}


.health-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


.health-hero-content {
    max-width: 620px;
}


.health-hero-content h1 {
    margin: 0 0 25px;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 800;
    color: #0f172a;
}


.health-hero-content p {
    margin: 0;
    max-width: 600px;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 400;
    color: #5f6775;
}


.health-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 35px;
}


.health-hero-image {
    position: relative;
    width: 100%;
}


.health-hero-image::before {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80%;
    height: 85%;
    background: #1565ff;
    border-radius: 18px;
    opacity: .08;
    z-index: -1;
}


.health-hero-image img {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, .18);
}


.health-section-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}


.health-section-heading h2 {
    margin: 0 0 20px;
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: -1px;
    font-weight: 800;
    color: #111827;
}


.health-section-heading p {
    max-width: 750px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: #6b7280;
}


.health-feature-section {
    position: relative;
    padding: 50px 0;
    background: #ffffff;
}


.health-light-bg {
    background: #f7f9fc;
}


.health-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
}


.health-feature-content {
    max-width: 600px;
}


.health-feature-content h2 {
    margin: 0 0 25px;
    font-size: 44px;
    line-height: 1.2;
    letter-spacing: -1px;
    font-weight: 800;
    color: #111827;
}


.health-feature-content p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.8;
    color: #626b79;
}


.health-feature-content .health-btn {
    margin-top: 15px;
}


.health-feature-image {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}


.health-feature-image img {
    display: block;
    width: 100%;
    height: 470px;
    object-fit: cover;
    transition: transform .6s ease;
}


.health-feature-image:hover img {
    transform: scale(1.04);
}


.health-feature-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 65%,
            rgba(15, 23, 42, .12));
}


.health-services {
    padding: 50px 0;
    background: #ffffff;
}


.health-services-grid-section {
    padding: 20px 0 100px;
    background: #ffffff;
}


.health-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}


.health-service-card {
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    overflow: hidden;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.health-service-card:hover {
    transform: translateY(-8px);
    border-color: #d7e4ff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .10);
}


.health-service-image {
    width: 100%;
    height: 270px;
    overflow: hidden;
    background: #f3f6fa;
}


.health-service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}


.health-service-card:hover .health-service-image img {
    transform: scale(1.06);
}


.health-service-content {
    padding: 30px;
}


.health-service-content h3 {
    margin: 0 0 15px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 800;
    color: #111827;
}


.health-service-content p {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.75;
    color: #6b7280;
}


.health-service-content h4 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #1565ff;
}


.health-service-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.health-service-content ul li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 25px;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}


.health-service-content ul li:last-child {
    margin-bottom: 0;
}


.health-service-content ul li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: #1565ff;
    font-weight: 800;
}


.health-process-section {
    position: relative;
    padding: 50px 0;
    overflow: hidden;
    background: #f7f9fc;
}


.health-process-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    top: -180px;
    right: -150px;
    border-radius: 50%;
    background: rgba(21, 101, 255, .06);
}


.health-process-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}


.health-process-card {
    position: relative;
    min-height: 330px;
    padding: 35px 25px;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 14px;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.health-process-card:hover {
    transform: translateY(-8px);
    border-color: #cfe0ff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
}


.health-process-number {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    color: rgba(21, 101, 255, .09);
}


.health-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    border-radius: 12px;
    background: #edf4ff;
    font-size: 27px;
}


.health-process-card h3 {
    margin: 0 0 15px;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
    color: #111827;
}


.health-process-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: #6b7280;
}


.health-process-cta {
    max-width: 900px;
    margin: 55px auto 0;
    padding: 45px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e4eaf3;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, .07);
}


.health-process-cta h3 {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 800;
    color: #111827;
}


.health-process-cta p {
    max-width: 650px;
    margin: 0 auto 25px;
    font-size: 15px;
    line-height: 1.75;
    color: #6b7280;
}


.health-benefits-section {
    padding: 50px 0;
    background: #ffffff;
}


.health-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


.health-benefit-card {
    position: relative;
    padding: 40px;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.health-benefit-card:hover {
    transform: translateY(-7px);
    border-color: #cfe0ff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .09);
}


.health-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 25px;
    border-radius: 14px;
    background: #edf4ff;
    font-size: 29px;
    transition:
        transform .35s ease,
        background .35s ease;
}


.health-benefit-card:hover .health-card-icon,
.health-comprehensive-card:hover .health-card-icon {
    transform: scale(1.08);
    background: #e1ecff;
}


.health-benefit-card h3 {
    margin: 0 0 15px;
    font-size: 23px;
    line-height: 1.35;
    font-weight: 800;
    color: #111827;
}


.health-benefit-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #6b7280;
}


.health-comprehensive-section {
    position: relative;
    padding: 50px 0;
    background: #f7f9fc;
}


.health-comprehensive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}


.health-comprehensive-card {
    position: relative;
    min-height: 300px;
    padding: 35px 25px;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.health-comprehensive-card:hover {
    transform: translateY(-8px);
    border-color: #cfe0ff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
}


.health-comprehensive-card h3 {
    margin: 0 0 15px;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
    color: #111827;
}


.health-comprehensive-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #6b7280;
}


.health-final-cta {
    padding: 50px 0;
    background: #ffffff;
}


.health-final-cta-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 55px 60px;
    overflow: hidden;
    border-radius: 20px;
    background:
        linear-gradient(135deg,
            #071a3d 0%,
            #0d3b85 55%,
            #1565ff 100%);
    box-shadow: 0 25px 60px rgba(15, 23, 42, .18);
}


.health-final-cta-box::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -180px;
    right: -80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}


.health-final-cta-box::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    bottom: -120px;
    left: 35%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}


.health-final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
}


.health-final-cta-content .health-tag {
    color: #bcd3ff;
}


.health-final-cta-content h2 {
    margin: 0 0 18px;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1px;
    font-weight: 800;
    color: #ffffff;
}


.health-final-cta-content p {
    margin: 0;
    max-width: 700px;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .80);
}


.health-final-cta-button {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}


.health-final-cta-button .health-btn-primary {
    color: #1565ff;
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}


.health-final-cta-button .health-btn-primary:hover {
    color: #ffffff;
    background: #0f172a;
    border-color: #0f172a;
}


.health-faq-section {
    padding: 50px 0;
    background: #f7f9fc;
}


.health-faq-wrapper {
    max-width: 950px;
    margin: 0 auto;
}


.health-faq-item {
    margin-bottom: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}


.health-faq-item:last-child {
    margin-bottom: 0;
}


.health-faq-item:hover {
    border-color: #cbdcff;
}


.health-faq-item.active {
    border-color: #b9d0ff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}


.health-faq-question {
    width: 100%;
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 20px 25px;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: left;
    background: #ffffff;
    font-family: inherit;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
    color: #111827;
}


.health-faq-question:hover {
    color: #1565ff;
}


.health-faq-item.active .health-faq-question {
    color: #1565ff;
}


.health-faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: #edf4ff;
    color: #1565ff;
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    padding-bottom: 6px;
    transition:
        transform .3s ease,
        background .3s ease;
}


.health-faq-item.active .health-faq-icon {
    color: #ffffff;
    background: #1565ff;
}


.health-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}


.health-faq-answer p {
    margin: 0;
    padding: 0 25px 25px;
    font-size: 15px;
    line-height: 1.8;
    color: #6b7280;
}


.health-faq-link {
    display: inline-block;
    margin: 0 25px 25px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    color: #1565ff;
    transition: .3s;
}


.health-faq-link:hover {
    color: #0d4fd6;
    transform: translateX(4px);
}


.read-btn {

    background: #1565ff;

    color: #fff;

    padding: 11px 18px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}


.read-btn:hover {

    background: #0d47a1;

}


.no-blog {

    background: #fff;

    padding: 60px;

    text-align: center;

    border-radius: 15px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}


.sidebar-box {

    background: #fff;

    padding: 28px;

    border-radius: 18px;

    margin-bottom: 30px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

}


.sidebar-box h3 {

    font-size: 24px;

    margin-bottom: 22px;

    color: #1565ff;

    position: relative;

    padding-bottom: 12px;

}


.sidebar-box h3::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 70px;

    height: 4px;

    background: #1565ff;

    border-radius: 30px;

}


.sidebar-box form {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.sidebar-box input {

    width: 100%;

    padding: 14px;

    border: 1px solid #ddd;

    border-radius: 8px;

    font-size: 15px;

    transition: .3s;

}


.sidebar-box input:focus {

    outline: none;

    border-color: #1565ff;

    box-shadow: 0 0 10px rgba(21, 101, 255, .18);

}


.sidebar-box button {

    padding: 14px;

    background: #1565ff;

    color: #fff;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 600;

    transition: .3s;

}


.sidebar-box button:hover {

    background: #0d47a1;

}


.details-wrapper {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 40px;

    align-items: start;

}


.details-left {

    background: #fff;

    padding: 35px;

    border-radius: 18px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .08);

}


.details-right {

    position: sticky;

    top: 100px;

}


.featured-image {

    margin-bottom: 30px;

    overflow: hidden;

    border-radius: 18px;

}


.featured-image img {

    width: 100%;

    display: block;

    border-radius: 18px;

    transition: .4s;

}


.featured-image:hover img {

    transform: scale(1.03);

}


.share-box {

    margin: 40px 0;

    padding: 25px;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 15px;

}


.share-box h4 {

    margin-bottom: 18px;

    font-size: 22px;

    color: #222;

}


.share-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}


.share-buttons a {

    padding: 12px 20px;

    border-radius: 8px;

    text-decoration: none;

    color: #fff;

    font-weight: 600;

    transition: .3s;

}


.facebook {

    background: #1877f2;

}


.linkedin {

    background: #0a66c2;

}


.twitter {

    background: #111;

}


.share-buttons a:hover {

    transform: translateY(-3px);

    opacity: .9;

}


.details-right .sidebar-box {

    background: #fff;

    padding: 25px;

    border-radius: 15px;

    margin-bottom: 30px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

}


.details-right .sidebar-box h3 {

    margin-bottom: 18px;

    color: #1565ff;

    font-size: 22px;

}


.details-right .sidebar-box input {

    width: 100%;

    padding: 14px;

    border: 1px solid #ddd;

    border-radius: 8px;

    margin-bottom: 12px;

}


.details-right .sidebar-box button {

    width: 100%;

    padding: 14px;

    background: #1565ff;

    color: #fff;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: .3s;

}


.details-right .sidebar-box button:hover {

    background: #0d47a1;

}


.pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin-top: 50px;

    flex-wrap: wrap;

}


.pagination a {

    padding: 12px 18px;

    background: #fff;

    color: #1565ff;

    text-decoration: none;

    border-radius: 8px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);

    transition: .3s;

}


.pagination a:hover {

    background: #1565ff;

    color: #fff;

}


.pagination .active {

    background: #1565ff;

    color: #fff;

}


.article-stats {

    display: flex;

    gap: 20px;

    margin: 35px 0;

    flex-wrap: wrap;

}


.article-stats div {

    background: #fff;

    padding: 16px 25px;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .08);

    font-size: 16px;

    font-weight: 600;

    color: #333;

    transition: .3s;

}


.article-stats div:hover {

    transform: translateY(-5px);

}


.toc {

    background: #f8fbff;

    border-left: 5px solid #1565ff;

    padding: 25px;

    border-radius: 15px;

    margin: 35px 0;

}


.toc h3 {

    margin-bottom: 18px;

    color: #1565ff;

    font-size: 24px;

}


.toc ul {

    list-style: none;

    padding: 0;

    margin: 0;

}


.toc li {

    margin: 12px 0;

}


.toc a {

    text-decoration: none;

    color: #333;

    font-weight: 600;

    transition: .3s;

}


.toc a:hover {

    padding-left: 10px;

    color: #1565ff;

}


.author-box {

    display: flex;

    gap: 25px;

    align-items: center;

    background: linear-gradient(135deg, #1565ff, #0d47a1);

    padding: 35px;

    border-radius: 20px;

    margin: 60px 0;

    color: #fff;

}


.author-icon {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: #fff;

    color: #1565ff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 42px;

    flex-shrink: 0;

}


.author-box h3 {

    font-size: 28px;

    margin-bottom: 15px;

}


.author-box p {

    line-height: 30px;

    margin-bottom: 20px;

    opacity: .95;

}


.author-box .read-btn {

    background: #fff;

    color: #1565ff;

    font-weight: 700;

}


.related-blogs {

    margin-top: 60px;

}


.related-blogs h2 {

    font-size: 34px;

    margin-bottom: 30px;

    color: #222;

}


.related-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}


.related-card {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);

    transition: .35s;

}


.related-card:hover {

    transform: translateY(-8px);

}


.related-card img {

    width: 100%;

    height: 210px;

    object-fit: contain;

}


.related-card h4 {

    padding: 20px;

    font-size: 20px;

    line-height: 30px;

    color: #222;

}


.related-card a {

    text-decoration: none;

}


.whatsapp {

    background: #25D366;

}


.copy-link {

    background: #444;

    color: #fff;

    border: none;

    padding: 12px 20px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 600;

}


.copy-link:hover {

    background: #222;

}


.details-wrapper {

    display: grid;

    grid-template-columns: 2fr 380px;

    gap: 40px;

    align-items: start;

}


.details-left {

    background: #fff;

    padding: 40px;

    border-radius: 20px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

}


.meta-item {

    display: flex;

    align-items: center;

    gap: 8px;

}


.featured-image {

    margin-bottom: 35px;

    overflow: hidden;

    border-radius: 18px;

}


.featured-image img {

    width: 100%;

    display: block;

    transition: .4s;

}


.featured-image:hover img {

    transform: scale(1.05);

}


.article-stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-bottom: 40px;

}


.stat-card {

    background: #fff;

    padding: 22px;

    border-radius: 15px;

    text-align: center;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}


.stat-card h3 {

    font-size: 32px;

    color: #1565ff;

    margin-bottom: 10px;

}


.stat-card p {

    color: #666;

    font-size: 15px;

}


.toc {

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-left: 5px solid #1565ff;

    padding: 25px;

    border-radius: 15px;

    margin: 40px 0;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);

}


.toc h3 {

    font-size: 24px;

    margin-bottom: 18px;

    color: #1565ff;

}


.toc a {

    display: block;

    text-decoration: none;

    color: #333;

    padding: 10px 15px;

    border-radius: 8px;

    transition: .3s;

    font-weight: 600;

}


.toc a:hover {

    background: #1565ff;

    color: #fff;

    padding-left: 20px;

}


.author-icon {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 42px;

    color: #1565ff;

    flex-shrink: 0;

}


.author-content h3 {

    font-size: 28px;

    margin-bottom: 15px;

}


.author-content p {

    line-height: 30px;

    margin-bottom: 20px;

    opacity: .95;

}


.author-content .read-btn {

    background: #fff;

    color: #1565ff;

}


.share-box {

    margin: 60px 0;

    padding: 30px;

    background: #fff;

    border-radius: 20px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

}


.share-box h3 {

    font-size: 28px;

    margin-bottom: 25px;

    color: #222;

}


.share-buttons a,
.copy-link {

    padding: 14px 22px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

    border: none;

    cursor: pointer;

    font-size: 15px;

}


.facebook {

    background: #1877F2;

    color: #fff;

}


.linkedin {

    background: #0A66C2;

    color: #fff;

}


.twitter {

    background: #111827;

    color: #fff;

}


.whatsapp {

    background: #25D366;

    color: #fff;

}


.copy-link {

    background: #555;

    color: #fff;

}


.share-buttons a:hover,
.copy-link:hover {

    transform: translateY(-4px);

    opacity: .9;

}


.related-blogs {

    margin-top: 70px;

}


.related-blogs h2 {

    font-size: 36px;

    margin-bottom: 30px;

}


.related-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 35px rgba(0, 0, 0, .15);

}


.related-card img {

    width: 100%;

    height: 220px;

    object-fit: contain;

    transition: .4s;

}


.related-card:hover img {

    transform: scale(1.05);

}


.container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 40px;
}


.section-title {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 50px;
    text-align: center;
    color: var(--text-dark);
}


.about-menu-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
}


.about-menu-links a {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    transition: 0.3s;
}


.about-menu-links a:hover {
    color: var(--primary-blue);
    padding-left: 5px;
}


.featured-insight img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}


.btn-solid {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
    border: none;
}


.btn-solid:hover {
    background-color: #0b3d99;
    box-shadow: 0 4px 15px rgba(17, 85, 204, 0.3);
}


.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}


.value-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    color: var(--primary-blue);
}


.value-icon svg {
    width: 100%;
    height: 100%;
}


.ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}


.ai-img-wrapper {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #222;
}


.ai-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}


.exp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}


.exp-card h4 {
    font-size: 1.35rem;
    margin-bottom: 15px;
    font-weight: 700;
    color: #fff;
}


.exp-card p {
    color: #888;
    font-size: 14px;
    line-height: 1.6;
}


.strategy-card {
    background: linear-gradient(90deg, #020617 0%, #1e40af 100%);
    border-radius: 20px;
    padding: 50px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #1e3a8a;
}


.strategy-text h2 {
    color: #fff;
    font-size: 2.3rem;
    font-weight: 800;
    margin-bottom: 10px;
}


.strategy-text p {
    color: #93c5fd;
    font-size: 1rem;
}


.auto-page {
    --auto-primary: #1565ff;
    --auto-dark: #07152f;
    --auto-blue: #0b4fd6;
    --auto-light: #f4f8ff;
    --auto-white: #ffffff;
    --auto-text: #526079;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--auto-dark);
    overflow: hidden;
}


.auto-page * {
    box-sizing: border-box;
}


.auto-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


.auto-hero {
    position: relative;
    padding: 50px 0;
    background:
        radial-gradient(circle at 10% 20%,
            rgba(21, 101, 255, 0.12),
            transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%);
}


.auto-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(21, 101, 255, 0.06);
    top: -180px;
    right: -120px;
}


.auto-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
}


.auto-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    margin-bottom: 20px;
    border-radius: 30px;
    background: rgba(21, 101, 255, 0.1);
    color: var(--auto-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.auto-tag span {
    width: 8px;
    height: 8px;
    background: var(--auto-primary);
    border-radius: 50%;
}


.auto-hero h1 {
    margin: 0 0 22px;
    color: var(--auto-dark);
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.08;
    letter-spacing: -2px;
}


.auto-hero h1 strong {
    color: var(--auto-primary);
}


.auto-hero-text {
    max-width: 590px;
    margin: 0 0 30px;
    color: var(--auto-text);
    font-size: 17px;
    line-height: 1.8;
}


.auto-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


.auto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 25px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: 0.3s ease;
}


.auto-btn-primary {
    background: var(--auto-primary);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(21, 101, 255, 0.25);
}


.auto-btn-primary:hover {
    background: var(--auto-dark);
    transform: translateY(-3px);
}


.auto-btn-outline {
    color: var(--auto-dark);
    background: #ffffff;
    border: 1px solid #dce5f5;
}


.auto-btn-outline:hover {
    color: #ffffff;
    background: var(--auto-dark);
    border-color: var(--auto-dark);
}


.auto-hero-image-wrap {
    position: relative;
}


.auto-hero-image {
    position: relative;
    overflow: hidden;
    height: 520px;
    border-radius: 28px;
    box-shadow: 0 30px 60px rgba(7, 21, 47, 0.18);
}


.auto-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.auto-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            transparent 55%,
            rgba(7, 21, 47, 0.3));
}


.auto-floating-card {
    position: absolute;
    left: -35px;
    bottom: 35px;
    z-index: 5;
    width: 230px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 15px 40px rgba(7, 21, 47, 0.18);
    backdrop-filter: blur(12px);
}


.auto-floating-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #ffffff;
    background: var(--auto-primary);
    font-size: 23px;
}


.auto-floating-card h3 {
    margin: 0 0 7px;
    color: var(--auto-dark);
    font-size: 17px;
}


.auto-floating-card p {
    margin: 0;
    color: var(--auto-text);
    font-size: 13px;
    line-height: 1.6;
}


.auto-mini-features {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 35px;
}


.auto-mini-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--auto-dark);
    font-size: 14px;
    font-weight: 600;
}


.auto-check {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--auto-primary);
    font-size: 11px;
}


.auto-services {
    padding: 50px 0;
    background: #ffffff;
}


.auto-section-head {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}


.auto-section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #1565ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.auto-section-head h2 {
    margin: 0 0 18px;
    color: #07152f;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
    letter-spacing: -1px;
}


.auto-section-head h2 span {
    color: #1565ff;
}


.auto-section-head p {
    margin: 0;
    color: #647089;
    font-size: 16px;
    line-height: 1.8;
}


.auto-feature-service {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
    margin-bottom: 65px;
}


.auto-feature-image {
    position: relative;
    height: 470px;
    overflow: hidden;
    border-radius: 25px;
}


.auto-feature-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}


.auto-feature-image:hover img {
    transform: scale(1.05);
}


.auto-image-badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 12px 18px;
    color: #ffffff;
    background: #1565ff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(21, 101, 255, 0.3);
}


.auto-feature-content h3 {
    margin: 0 0 20px;
    color: #07152f;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
}


.auto-feature-content h3 span {
    color: #1565ff;
}


.auto-feature-content>p {
    margin: 0 0 25px;
    color: #647089;
    font-size: 16px;
    line-height: 1.8;
}


.auto-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}


.auto-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #263550;
    font-size: 14px;
    font-weight: 600;
}


.auto-list-icon {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1565ff;
    background: #eaf1ff;
    border-radius: 50%;
    font-size: 12px;
}


.auto-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


.auto-service-card {
    position: relative;
    min-height: 300px;
    padding: 35px 30px;
    overflow: hidden;
    background: #f7f9fd;
    border: 1px solid #e8edf6;
    border-radius: 18px;
    transition: all 0.35s ease;
}


.auto-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: #1565ff;
    transition: width 0.35s ease;
}


.auto-service-card:hover {
    transform: translateY(-8px);
    background: #ffffff;
    border-color: rgba(21, 101, 255, 0.25);
    box-shadow: 0 20px 45px rgba(7, 21, 47, 0.1);
}


.auto-service-card:hover::before {
    width: 100%;
}


.auto-service-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #1565ff;
    border-radius: 14px;
    font-size: 27px;
    box-shadow: 0 10px 25px rgba(21, 101, 255, 0.2);
}


.auto-service-card h3 {
    margin: 0 0 14px;
    color: #07152f;
    font-size: 20px;
    line-height: 1.35;
}


.auto-service-card p {
    margin: 0;
    color: #647089;
    font-size: 14px;
    line-height: 1.75;
}


.auto-offer-section {
    padding: 50px 0;
    background: #f7f9fd;
}


.auto-offer-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}


.auto-offer-heading .auto-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #1565ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.auto-offer-heading h2 {
    margin: 0 0 18px;
    color: #07152f;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
    letter-spacing: -1px;
}


.auto-offer-heading h2 span {
    color: #1565ff;
}


.auto-offer-heading p {
    max-width: 760px;
    margin: 0 auto;
    color: #647089;
    font-size: 16px;
    line-height: 1.8;
}


.auto-offer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.auto-offer-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf6;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(7, 21, 47, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}


.auto-offer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(7, 21, 47, 0.12);
}


.auto-offer-image {
    position: relative;
    height: 240px;
    overflow: hidden;
}


.auto-offer-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.auto-offer-card:hover .auto-offer-image img {
    transform: scale(1.07);
}


.auto-offer-number {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #1565ff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(21, 101, 255, 0.3);
}


.auto-offer-content {
    padding: 28px;
}


.auto-offer-content h3 {
    margin: 0 0 13px;
    color: #07152f;
    font-size: 21px;
    line-height: 1.35;
}


.auto-offer-content p {
    margin: 0 0 20px;
    color: #647089;
    font-size: 14px;
    line-height: 1.75;
}


.auto-offer-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1565ff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.3s ease;
}


.auto-offer-link:hover {
    gap: 12px;
}


.auto-offer-cta {
    margin-top: 55px;
    padding: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: #07152f;
    border-radius: 22px;
}


.auto-offer-cta-content {
    max-width: 650px;
}


.auto-offer-cta h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.3;
}


.auto-offer-cta h3 span {
    color: #5b91ff;
}


.auto-offer-cta p {
    margin: 0;
    color: #b8c2d5;
    font-size: 15px;
    line-height: 1.7;
}


.auto-offer-cta-btn {
    flex-shrink: 0;
    display: inline-block;
    padding: 15px 25px;
    color: #ffffff;
    background: #1565ff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: 0.3s ease;
}


.auto-offer-cta-btn:hover {
    background: #ffffff;
    color: #07152f;
    transform: translateY(-3px);
}


.auto-why-section {
    padding: 50px 0;
    background: #ffffff;
}


.auto-why-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}


.auto-why-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #1565ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.auto-why-heading h2 {
    margin: 0 0 18px;
    color: #07152f;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
    letter-spacing: -1px;
}


.auto-why-heading h2 span {
    color: #1565ff;
}


.auto-why-heading p {
    max-width: 720px;
    margin: 0 auto;
    color: #647089;
    font-size: 16px;
    line-height: 1.8;
}


.auto-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}


.auto-why-card {
    position: relative;
    padding: 38px 35px;
    overflow: hidden;
    background: #f7f9fd;
    border: 1px solid #e8edf6;
    border-radius: 18px;
    transition: 0.35s ease;
}


.auto-why-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: #1565ff;
    transition: height 0.35s ease;
}


.auto-why-card:hover {
    transform: translateY(-6px);
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(7, 21, 47, 0.1);
}


.auto-why-card:hover::before {
    height: 100%;
}


.auto-why-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1565ff;
    background: #eaf1ff;
    border-radius: 14px;
    font-size: 27px;
    transition: 0.35s ease;
}


.auto-why-card:hover .auto-why-icon {
    color: #ffffff;
    background: #1565ff;
}


.auto-why-card h3 {
    margin: 0 0 14px;
    color: #07152f;
    font-size: 22px;
    line-height: 1.35;
}


.auto-why-card p {
    margin: 0;
    color: #647089;
    font-size: 15px;
    line-height: 1.8;
}


.auto-why-stats {
    margin-top: 55px;
    padding: 45px 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: #07152f;
    border-radius: 22px;
}


.auto-stat-item {
    position: relative;
    text-align: center;
}


.auto-stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 0;
    width: 1px;
    height: 80%;
    background: rgba(255, 255, 255, 0.15);
}


.auto-stat-number {
    display: block;
    margin-bottom: 7px;
    color: #ffffff;
    font-size: 38px;
    font-weight: 800;
}


.auto-stat-text {
    color: #aebbd1;
    font-size: 14px;
}


.auto-why-bottom {
    margin-top: 60px;
    padding: 55px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg,
            rgba(7, 21, 47, 0.96),
            rgba(21, 101, 255, 0.88)),
        url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1600&q=85") center/cover no-repeat;
    border-radius: 24px;
}


.auto-why-bottom-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}


.auto-why-bottom h3 {
    margin: 0 0 15px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.3;
}


.auto-why-bottom p {
    margin: 0 0 25px;
    color: #d8e2f2;
    font-size: 15px;
    line-height: 1.8;
}


.auto-why-btn {
    display: inline-block;
    padding: 15px 26px;
    color: #07152f;
    background: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: 0.3s ease;
}


.auto-why-btn:hover {
    color: #ffffff;
    background: #1565ff;
    transform: translateY(-3px);
}


.auto-faq-section {
    padding: 50px 0;
    background: #f7f9fd;
}


.auto-faq-heading {
    max-width: 820px;
    margin: 0 auto 50px;
    text-align: center;
}


.auto-faq-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 16px;

    color: #1565ff;
    background: #eaf2ff;

    border-radius: 30px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.auto-faq-heading h2 {
    margin: 0 0 17px;

    color: #07152f;

    font-size: clamp(31px, 4vw, 46px);
    line-height: 1.2;
    letter-spacing: -1px;
}


.auto-faq-heading h2 span {
    color: #1565ff;
}


.auto-faq-heading p {
    max-width: 700px;
    margin: 0 auto;

    color: #647089;

    font-size: 16px;
    line-height: 1.8;
}


.auto-faq-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}


.auto-faq-item {
    margin-bottom: 14px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e3e9f2;
    border-radius: 13px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.auto-faq-item:hover {
    border-color: rgba(21, 101, 255, 0.35);
}


.auto-faq-item.active {
    border-color: #1565ff;

    box-shadow:
        0 12px 30px rgba(21, 101, 255, 0.08);
}


.auto-faq-question {
    width: 100%;
    min-height: 72px;

    padding: 18px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: #07152f;
    background: #ffffff;

    border: none;
    outline: none;

    cursor: pointer;

    text-align: left;

    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;

    transition:
        color 0.3s ease,
        background 0.3s ease;
}


.auto-faq-question:hover {
    color: #1565ff;
    background: #fbfcff;
}


.auto-faq-item.active .auto-faq-question {
    color: #1565ff;
    background: #f8faff;
}


.auto-faq-plus {
    width: 38px;
    height: 38px;
    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #1565ff;
    background: #eaf2ff;

    border-radius: 50%;

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    transition:
        transform 0.3s ease,
        color 0.3s ease,
        background 0.3s ease;
}


.auto-faq-item.active .auto-faq-plus {
    color: #ffffff;
    background: #1565ff;

    transform: rotate(45deg);
}


.auto-faq-answer {
    max-height: 0;

    overflow: hidden;

    background: #ffffff;

    transition:
        max-height 0.4s ease;
}


.auto-faq-answer-inner {
    padding:
        0 75px 24px 22px;

    color: #647089;

    font-size: 15px;
    line-height: 1.8;
}


.auto-faq-answer-inner p {
    margin: 0;
}


.auto-faq-help {
    max-width: 1000px;

    margin: 45px auto 0;
    padding: 35px 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background: #ffffff;

    border: 1px solid #e3e9f2;
    border-radius: 17px;

    box-shadow:
        0 15px 40px rgba(7, 21, 47, 0.06);
}


.auto-faq-help-content {
    display: flex;
    align-items: center;
    gap: 18px;
}


.auto-faq-help-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: #1565ff;

    border-radius: 13px;

    font-size: 25px;
}


.auto-faq-help h3 {
    margin: 0 0 6px;

    color: #07152f;

    font-size: 21px;
}


.auto-faq-help p {
    margin: 0;

    color: #647089;

    font-size: 14px;
    line-height: 1.6;
}


.auto-faq-help-btn {
    min-height: 50px;

    padding: 0 24px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: #1565ff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition: 0.3s ease;
}


.auto-faq-help-btn:hover {
    background: #07152f;

    transform: translateY(-3px);
}


.auto-final-cta {
    padding: 50px 0;

    background: #ffffff;
}


.auto-final-box {
    position: relative;

    overflow: hidden;

    padding: 70px 45px;

    text-align: center;

    background:
        linear-gradient(135deg,
            #07152f 0%,
            #0b3477 52%,
            #1565ff 100%);

    border-radius: 25px;

    box-shadow:
        0 25px 60px rgba(21, 101, 255, 0.18);
}


.auto-final-box::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    top: -220px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.07);
}


.auto-final-box::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -120px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);
}


.auto-final-content {
    position: relative;

    z-index: 2;

    max-width: 820px;

    margin: 0 auto;
}


.auto-final-label {
    display: inline-block;

    margin-bottom: 18px;
    padding: 8px 17px;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 30px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}


.auto-final-content h2 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(31px, 4vw, 47px);
    line-height: 1.2;
}


.auto-final-content p {
    max-width: 680px;

    margin: 0 auto 30px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 16px;
    line-height: 1.8;
}


.auto-final-buttons {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;
}


.auto-final-primary,
.auto-final-secondary {
    min-height: 54px;

    padding: 0 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition: 0.3s ease;
}


.auto-final-primary {
    color: #1565ff;
    background: #ffffff;

    border: 2px solid #ffffff;
}


.auto-final-primary:hover {
    color: #ffffff;
    background: transparent;

    transform: translateY(-3px);
}


.auto-final-secondary {
    color: #ffffff;
    background: transparent;

    border:
        2px solid rgba(255, 255, 255, 0.5);
}


.auto-final-secondary:hover {
    color: #07152f;
    background: #ffffff;

    border-color: #ffffff;

    transform: translateY(-3px);
}


.section-title {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 20px;
    color: var(--text-dark);
    text-align: center;
}


.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-gray);
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}


.btn-solid {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}


.btn-solid:hover {
    background-color: #0b3d99;
    transform: translateY(-2px);
}


.b-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.b-item h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 10px;
}


.b-item p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}


.choose-section {
    padding: 50px 0;
    background: #fff;
}


.choose-grid {
    display: grid;
    grid-template-columns: 0.45fr 0.55fr;
    gap: 60px;
    align-items: center;
}


.choose-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}


.choose-content p {
    font-size: 1.05rem;
    color: var(--text-gray);
    margin-bottom: 35px;
    line-height: 1.6;
}


.c-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}


.c-item h4 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 8px;
}


.c-item p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}


.btn-solid {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
    border: none;
    display: inline-block;
}


.featured-section {
    padding: 50px 0;
    background: #fff;
}


.faq-content {
    display: none
}


.faq-item.active .faq-content {
    display: block
}


.faq-content p {
    margin: 0;
    padding: 0 0 22px;
    line-height: 1.7
}


.faq-btn {
    width: 100%;
    text-align: left
}


.faq-item.active .faq-btn span {
    transform: rotate(45deg)
}


.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-gray);
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}


.btn-solid {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px 30px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    transition: 0.3s;
    border: none;
}


.quote-section {
    padding: 50px 0;
    background: #f8fafc;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}


.section-title {
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 20px;
    color: #ffffff;
    line-height: 1.1;
}


.shimmer-card {
    position: relative;
    overflow: hidden;
}


.shimmer-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
    animation: flashGlow 4s infinite linear;
    pointer-events: none;
    z-index: 1;
}


.about-menu-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-right: 1px solid #e2e8f0;
    padding-right: 20px;
}


.work-hero {
    padding: 200px 0 150px 0;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    position: relative;
}


.work-hero-content {
    max-width: 700px;
    position: relative;
    z-index: 2;
}


.work-hero h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}


.work-hero h1 i {
    font-style: italic;
    font-weight: 500;
    color: #f8fafc;
}


.work-hero p {
    font-size: 1.1rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 500;
}


.principles-section {
    padding: 50px 0;
    background: linear-gradient(135deg, #020617 0%, #1e3a8a 100%);
}


.principles-header {
    max-width: 800px;
    margin-bottom: 70px;
}


.principles-header p {
    font-size: 1.1rem;
    color: #bfdbfe;
    margin-top: 20px;
    line-height: 1.6;
}


.principles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 80px;
}


.principle-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}


.principle-icon {
    width: 40px;
    height: 40px;
    color: #fff;
    flex-shrink: 0;
}


.principle-icon svg {
    width: 100%;
    height: 100%;
}


.principle-text h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}


.principle-text p {
    font-size: 14px;
    color: #93c5fd;
    line-height: 1.6;
}


.onboarding-section {
    padding: 50px 0;
    background: linear-gradient(180deg, #020617 0%, #1e40af 100%);
}


.onboarding-section h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}


.onboarding-section p.sub {
    font-size: 1.1rem;
    color: #bfdbfe;
    max-width: 700px;
    line-height: 1.6;
    margin-bottom: 60px;
}


.onboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}


.onboard-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}


.step-badge {
    background: #eff6ff;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    width: max-content;
    margin-bottom: 20px;
}


.onboard-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}


.onboard-card p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
}


.consulting-section {
    padding: 50px 0;
    background-color: #1e40af;
    color: #fff;
}


.consulting-grid {
    display: grid;
    grid-template-columns: 0.45fr 0.55fr;
    gap: 60px;
    align-items: flex-start;
}


.consulting-grid h2 {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
}


.consulting-grid p {
    font-size: 1.1rem;
    color: #bfdbfe;
    line-height: 1.6;
    margin-bottom: 40px;
}


.btn-outline-white {
    border: 1px solid #fff;
    color: #fff;
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    background: transparent;
    transition: 0.3s;
}


.btn-outline-white:hover {
    background: #fff;
    color: #1e40af;
}


.post-launch {
    padding: 50px 0;
    background-color: #000;
}


.launch-banner {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1614064641913-a5f1a5bf07b7?auto=format&fit=crop&w=1200&q=80') center/cover;
    border-radius: 24px;
    padding: 80px 60px;
    text-align: center;
    border: 1px solid #333;
}


.launch-banner h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}


.launch-banner p {
    font-size: 1.1rem;
    color: #ccc;
    max-width: 800px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
}


.partners-section {
    padding: 50px 0;
    background-color: #000;
    color: #fff;
    border-top: 1px solid #111;
}


.partners-header {
    max-width: 800px;
    margin-bottom: 80px;
}


.partners-header h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
}


.partners-header p {
    font-size: 1.1rem;
    color: #aaa;
    line-height: 1.6;
}


.partner-interactive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}


.partner-item {
    font-size: 2rem;
    font-weight: 700;
    color: #444;
    cursor: pointer;
    transition: 0.3s;
}


.partner-item:hover,
.partner-item.active {
    color: #fff;
}


.tech-stack-section {
    padding: 50px 0;
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
    border-top: 1px solid #111;
}


.tech-stack-section h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}


.tech-stack-section p {
    font-size: 1.1rem;
    color: #fff;
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6;
}


.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 50px;
}


.tech-pill {
    background: #111;
    border: 1px solid #333;
    color: #aaa;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}


.tech-pill:hover,
.tech-pill.active {
    background: #fff;
    color: #000;
    border-color: #fff;
}


.tech-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    opacity: 1;
    transition: opacity 0.3s;
}


.tech-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: 0.3s;
}


.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}


.tech-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}


.tech-card span {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}


.section-title {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 50px;
    text-align: center;
}


.flashing-card {
    position: relative;
    overflow: hidden;
}


.flashing-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    animation: flashGlow 4s infinite linear;
    pointer-events: none;
    z-index: 1;
}


.flashing-card-dark::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
}


.hero {
    position: relative;
    min-height: 100vh;
    padding-top: 80px;
    display: flex;
    align-items: center;
    background-color: #000;
    overflow: hidden;
}


.hero-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    opacity: 0.85;
    filter: contrast(1.1);
}


.hero-gradient {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 35%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    pointer-events: none;
}


.hero-left {
    max-width: 650px;
    padding: 50px 0;
}


.hero-left h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 25px;
    letter-spacing: -1px;
}


.hero-left h1 span {
    color: var(--primary-blue);
    display: block;
}


.hero-left p {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 500;
}


.btn-solid {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 15px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}


.btn-solid:hover {
    background-color: #0b3d99;
}


.btn-outline {
    background-color: transparent;
    color: var(--primary-blue);
    padding: 15px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    border: 2px solid #cbd5e1;
    transition: 0.3s;
}


.btn-outline:hover {
    background-color: var(--light-blue);
    border-color: var(--primary-blue);
}


.services-wrapper {
    background-color: #fafafa;
    padding: 50px 0;
    border-top: 1px solid #eaeaea;
}


.services-wrapper .section-title {
    margin-bottom: 60px;
    color: #000;
    font-size: 3.5rem;
}


.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}


.service-box {
    padding: 40px 30px;
    border-right: 1px solid #eaeaea;
    position: relative;
    transition: 0.3s;
}


.service-box:last-child {
    border-right: none;
}


.service-box:hover {
    background: #f4f8ff;
}


.service-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 25px;
    color: var(--primary-blue);
}


.service-icon svg {
    width: 100%;
    height: 100%;
}


.service-box h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
}


.service-box p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}


.service-box .btn-link {
    color: var(--text-dark);
    font-weight: 700;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 30px;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    transition: 0.3s;
}


.service-box .btn-link:hover {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
}


.view-all-container {
    text-align: center;
    position: relative;
    z-index: 10;
}


.btn-view-all {
    background: #fff;
    color: var(--primary-blue);
    font-weight: 700;
    border: 2px solid var(--primary-blue);
    padding: 14px 40px;
    border-radius: 40px;
    font-size: 15px;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


.btn-view-all:hover {
    background: var(--primary-blue);
    color: #fff;
}


.ai-img-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}


.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.exp-card h4 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
}


.exp-card p {
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}


.strategy-card {
    background: linear-gradient(90deg, #0f172a 0%, #1e40af 100%);
    border-radius: 20px;
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.strategy-text h2 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}


.strategy-text p {
    color: #93c5fd;
    font-size: 1.1rem;
}


.ind-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}


.ind-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}


.ind-image {
    flex: 0.4;
    border-radius: 20px;
    overflow: hidden;
    height: 400px;
    position: relative;
    border: 1px solid #e2e8f0;
}


.ind-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.ind-list-wrapper {
    flex: 0.25;
    border-right: 1px solid #e2e8f0;
    height: 400px;
    overflow-y: auto;
    padding-right: 20px;
}


.ind-list-wrapper::-webkit-scrollbar {
    width: 4px;
}


.ind-list-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}


.ind-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.ind-item {
    font-size: 1.2rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    transition: 0.3s;
}


.ind-item:hover,
.ind-item.active {
    color: #1155cc;
    font-weight: 700;
}


.input-group select option {
    background-color: #020617;
    color: #fff;
}


.form-bottom {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}


.btn-submit-large {
    background: #1155cc;
    color: #fff;
    border: none;
    padding: 16px 50px;
    border-radius: 40px;
    font-weight: 800;
    font-size: 16px;
    width: 100%;
    transition: 0.3s;
    cursor: pointer;
}


.btn-submit-large:hover {
    background: #1d4ed8;
}


.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}


html,
body {
    overflow-x: hidden;
}


.row-left {
    animation: scrollLeftFixed 32s linear infinite !important
}


.row-right {
    animation: scrollRightFixed 32s linear infinite !important
}


.ow-section {
    padding: 50px 0;
    background: #f8fafc;
    overflow: hidden
}


.ow-inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 40px
}


.ow-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: 60px;
    align-items: center
}


.ow-slider {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
    background: #0f172a;
    aspect-ratio: 16/10
}


.ow-slides {
    position: relative;
    width: 100%;
    height: 100%
}


.ow-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}


.ow-slide.active {
    opacity: 1;
    visibility: visible
}


.ow-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}


.ow-slide-overlay {
    position: relative;
    z-index: 2;
    padding: 32px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 65%, rgba(0, 0, 0, 0) 100%)
}


.ow-slide-overlay h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px
}


.ow-slide-overlay p {
    color: #dbe3ee;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    max-width: 520px
}


.ow-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: .25s;
    color: #0f172a
}


.ow-nav-btn:hover {
    background: #1155cc;
    color: #fff
}


.ow-nav-prev {
    left: 18px
}


.ow-nav-next {
    right: 18px
}


.ow-slider-col {
    display: flex;
    flex-direction: column;
    gap: 18px
}


.ow-dots {
    display: flex;
    gap: 8px;
    justify-content: center
}


.ow-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd5e1;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: .25s
}


.ow-dot.active {
    background: #1155cc;
    width: 24px;
    border-radius: 6px
}


.ow-copy p.ow-eyebrow {
    color: #1155cc;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 12px
}


.ow-copy h2 {
    font-size: 34px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 18px;
    line-height: 1.25
}


.ow-copy p.ow-desc {
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 28px
}


.ow-copy .btn-solid {
    display: inline-block;
    text-decoration: none
}


.orion-ai-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 99999;
    display: none;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px
}


.orion-ai-overlay.open {
    display: flex
}


.orion-ai-chat {
    width: min(410px, calc(100vw - 32px));
    height: min(650px, calc(100vh - 48px));
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .28);
    overflow: hidden;
    display: flex;
    flex-direction: column
}


.orion-ai-header {
    position: relative;
    background: linear-gradient(135deg, #075ad8, #1677ff);
    color: #fff;
    padding: 16px 20px 13px;
    min-height: 76px
}


.orion-ai-header strong {
    display: block;
    font-size: 19px
}


.orion-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-top: 5px
}


.orion-status i {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .2)
}


#orionAiClose {
    position: absolute;
    right: 16px;
    top: 11px;
    border: 0;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 30px;
    cursor: pointer
}


.orion-ai-messages {
    flex: 1;
    padding: 18px;
    overflow: auto;
    background: #f8fafc
}


.orion-msg {
    max-width: 86%;
    padding: 11px 14px;
    border-radius: 16px;
    margin: 0 0 12px;
    line-height: 1.45;
    font-size: 14px;
    white-space: pre-line
}


.orion-msg.bot {
    background: #fff;
    color: #172033;
    border: 1px solid #e5eaf1;
    border-bottom-left-radius: 5px
}


.orion-msg.user {
    background: #0b63df;
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 5px
}


.orion-msg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -5px 0 12px
}


.orion-msg-actions a,
.orion-msg-actions button {
    border: 1px solid #0b63df;
    background: #fff;
    color: #0b63df;
    border-radius: 16px;
    padding: 7px 10px;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer
}


.orion-ai-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    max-height: 190px;
    overflow-y: auto;
    flex-shrink: 0
}


.orion-ai-quick button {
    width: 100%;
    min-width: 0;
    white-space: normal;
    border: 1px solid #0b63df;
    background: #fff;
    color: #0b63df;
    border-radius: 10px;
    padding: 9px 7px;
    font-size: 12px;
    line-height: 1.25;
    min-height: 40px;
    cursor: pointer
}


.orion-ai-form {
    display: flex;
    padding: 12px;
    border-top: 1px solid #e8edf3;
    gap: 8px;
    flex-shrink: 0
}


.orion-ai-form input {
    flex: 1;
    min-width: 0;
    border: 1px solid #dce3ec;
    border-radius: 24px;
    padding: 11px 15px;
    outline: none
}


.orion-ai-form button {
    width: 43px;
    height: 43px;
    border: 0;
    border-radius: 50%;
    background: #0b63df;
    color: #fff;
    font-size: 19px;
    cursor: pointer
}


.media-page {
    width: 100%;
    overflow: hidden;
}


.media-hero {
    width: 100%;
    padding: 160px 5%;
    background: #ffffff;
}


.media-hero-container {
    max-width: 1450px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
}


.media-hero-content {
    max-width: 650px;
}


.media-tag {
    display: inline-block;
    color: #1565ff;
    background: #eef4ff;
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}


.media-hero-content h1 {
    margin: 0 0 25px;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.15;
    font-weight: 800;
    color: #0b1220;
}


.media-hero-content h1 span {
    color: #1565ff;
}


.media-hero-line {
    width: 90px;
    height: 4px;
    background: #1565ff;
    border-radius: 10px;
    margin-bottom: 25px;
}


.media-hero-content p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: #4b5563;
}


.media-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 32px;
}


.media-btn {
    min-width: 200px;
    padding: 16px 25px;
    border-radius: 7px;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
}


.media-btn-primary {
    color: #ffffff;
    background: #1565ff;
    border: 2px solid #1565ff;
}


.media-btn-primary:hover {
    background: #0d4fd6;
    border-color: #0d4fd6;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(21, 101, 255, 0.25);
}


.media-btn-outline {
    color: #1565ff;
    background: #ffffff;
    border: 2px solid #1565ff;
}


.media-btn-outline:hover {
    color: #ffffff;
    background: #1565ff;
    transform: translateY(-3px);
}


.media-hero-image {
    position: relative;
    width: 100%;
}


.media-hero-image img {
    width: 100%;
    height: 540px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}


.media-hero-image::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    background: #1565ff;
    border-radius: 20px;
    left: -18px;
    bottom: -18px;
    z-index: 0;
}


.media-hero-image img {
    position: relative;
    z-index: 1;
}


.media-experience-box {
    position: absolute;
    z-index: 2;
    left: -35px;
    bottom: 35px;
    background: #ffffff;
    padding: 18px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    border-left: 5px solid #1565ff;
}


.media-experience-box strong {
    display: block;
    font-size: 25px;
    color: #1565ff;
    margin-bottom: 3px;
}


.media-experience-box span {
    font-size: 14px;
    color: #4b5563;
}


.media-partners {
    width: 100%;
    padding: 30px 5%;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}


.media-partners-container {
    max-width: 1350px;
    margin: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}


.media-partner-item {
    text-align: center;
    padding: 12px 5px;
}


.media-partner-item strong {
    display: block;
    color: #374151;
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 5px;
}


.media-partner-item span {
    color: #9ca3af;
    font-size: 13px;
}


.media-solutions {
    width: 100%;
    padding: 90px 5%;
    background: #f8faff;
}


.media-solutions-container {
    max-width: 1450px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
}


.media-solutions-image {
    position: relative;
    width: 100%;
}


.media-solutions-image img {
    width: 100%;
    height: 620px;

    display: block;
    object-fit: cover;

    border-radius: 18px;
}


.media-image-badge {
    position: absolute;

    right: -25px;
    bottom: 35px;

    background: #1565ff;
    color: #ffffff;

    padding: 17px 25px;

    border-radius: 8px;

    font-size: 15px;
    font-weight: 700;

    box-shadow:
        0 12px 30px rgba(21, 101, 255, 0.25);
}


.media-image-badge span {
    margin-right: 7px;
}


.media-solutions-content {
    width: 100%;
}


.media-section-tag {
    display: inline-block;

    color: #1565ff;
    background: #eaf1ff;

    padding: 8px 16px;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 18px;
}


.media-solutions-content h2 {
    margin: 0 0 25px;

    font-size: 42px;
    line-height: 1.2;

    color: #0b1220;
}


.media-solutions-content h2 span {
    color: #1565ff;
}


.media-solutions-content>p {
    font-size: 16px;
    line-height: 1.8;

    color: #4b5563;

    margin: 0 0 15px;
}


.media-solution-features {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

    margin-top: 30px;
    margin-bottom: 30px;
}


.media-feature-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    background: #ffffff;

    padding: 18px;

    border-radius: 10px;

    border:
        1px solid #e5e7eb;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.media-feature-item:hover {
    transform:
        translateY(-5px);

    border-color:
        #1565ff;

    box-shadow:
        0 10px 25px rgba(21, 101, 255, 0.1);
}


.media-feature-icon {
    width: 42px;
    min-width: 42px;

    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #eaf1ff;
    color: #1565ff;

    border-radius: 8px;

    font-size: 18px;
    font-weight: bold;
}


.media-feature-item h3 {
    margin: 0 0 6px;

    font-size: 16px;

    color: #111827;
}


.media-feature-item p {
    margin: 0;

    font-size: 13px;
    line-height: 1.6;

    color: #6b7280;
}


.media-solutions-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 27px;

    background: #1565ff;
    color: #ffffff;

    border-radius: 7px;

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    transition: all 0.3s ease;
}


.media-solutions-btn span {
    font-size: 22px;

    transition:
        transform 0.3s ease;
}


.media-solutions-btn:hover {
    background: #0d4fd6;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px rgba(21, 101, 255, 0.25);
}


.media-solutions-btn:hover span {
    transform:
        translateX(5px);
}


.media-services {
    width: 100%;
    padding: 90px 5%;
    background: #ffffff;
}


.media-services-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
}


.media-services-heading {
    max-width: 950px;
    margin: 0 auto 55px;
    text-align: center;
}


.media-services-tag {
    display: inline-block;
    padding: 8px 17px;
    margin-bottom: 17px;

    background: #eaf1ff;
    color: #1565ff;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}


.media-services-heading h2 {
    margin: 0 0 20px;

    font-size: 42px;
    line-height: 1.25;

    color: #0b1220;
}


.media-services-heading h2 span {
    color: #1565ff;
}


.media-services-heading p {
    max-width: 850px;
    margin: 0 auto;

    font-size: 17px;
    line-height: 1.8;

    color: #6b7280;
}


.media-services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;
}


.media-service-card {
    position: relative;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.media-service-card:hover {
    transform: translateY(-8px);

    border-color: #1565ff;

    box-shadow:
        0 18px 45px rgba(21, 101, 255, 0.14);
}


.media-service-image {
    position: relative;

    width: 100%;
    height: 270px;

    overflow: hidden;

    background: #f1f5f9;
}


.media-service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.5s ease;
}


.media-service-card:hover .media-service-image img {
    transform: scale(1.07);
}


.media-service-number {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #1565ff;

    color: #ffffff;

    border-radius: 50%;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 6px 20px rgba(21, 101, 255, 0.3);
}


.media-service-content {
    position: relative;

    padding:
        32px 28px 30px;
}


.media-service-icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: -62px;
    margin-bottom: 20px;

    position: relative;
    z-index: 2;

    background: #ffffff;

    border: 2px solid #1565ff;

    border-radius: 12px;

    font-size: 25px;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.1);
}


.media-service-content h3 {
    min-height: 58px;

    margin: 0 0 15px;

    font-size: 21px;
    line-height: 1.35;

    color: #111827;
}


.media-service-content p {
    min-height: 145px;

    margin: 0 0 20px;

    font-size: 15px;
    line-height: 1.75;

    color: #6b7280;
}


.media-service-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #1565ff;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.media-service-link span {
    font-size: 20px;
}


.media-service-link:hover {
    gap: 14px;

    color: #0d4fd6;
}


.media-why-choose {
    width: 100%;
    padding: 100px 5%;
    background: #f8faff;
}


.media-why-container {
    max-width: 1450px;
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}


.media-why-tag {
    display: inline-block;

    padding: 8px 18px;

    margin-bottom: 18px;

    background: #eaf1ff;

    color: #1565ff;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}


.media-why-content h2 {
    margin: 0 0 22px;

    font-size: 43px;

    line-height: 1.25;

    color: #0b1220;
}


.media-why-content h2 span {
    color: #1565ff;
}


.media-why-description {
    margin: 0 0 35px;

    max-width: 650px;

    font-size: 17px;

    line-height: 1.8;

    color: #6b7280;
}


.media-why-features {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;

    margin-bottom: 38px;

}


.media-why-feature {

    display: flex;

    align-items: flex-start;

    gap: 14px;

}


.media-feature-icon {

    flex-shrink: 0;

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #1565ff;

    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;

    font-weight: 800;

}


.media-why-feature h3 {

    margin: 3px 0 8px;

    font-size: 17px;

    color: #111827;

}


.media-why-feature p {

    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    color: #6b7280;

}


.media-why-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 28px;

    background: #1565ff;

    color: #ffffff;

    border-radius: 7px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition: all 0.3s ease;

}


.media-why-button:hover {

    background: #0d4fd6;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(21, 101, 255, 0.3);

}


.media-why-image {

    position: relative;

}


.media-why-image img {

    width: 100%;

    height: 600px;

    object-fit: cover;

    display: block;

    border-radius: 18px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.15);

}


.media-experience-box {

    position: absolute;

    left: -40px;

    bottom: 40px;

    width: 190px;

    padding: 25px;

    background: #1565ff;

    color: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(21, 101, 255, 0.35);

}


.media-experience-box strong {

    display: block;

    margin-bottom: 5px;

    font-size: 38px;

    line-height: 1;

}


.media-experience-box span {

    font-size: 14px;

    line-height: 1.5;

}


.media-stats {

    width: 100%;

    padding: 55px 5%;

    background: #1565ff;

}


.media-stats-container {

    max-width: 1300px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

}


.media-stat-item {

    text-align: center;

    padding: 10px 25px;

    border-right:
        1px solid rgba(255, 255, 255, 0.3);

}


.media-stat-item:last-child {

    border-right: none;

}


.media-stat-item h3 {

    margin: 0 0 8px;

    font-size: 40px;

    color: #ffffff;

}


.media-stat-item p {

    margin: 0;

    font-size: 15px;

    color:
        rgba(255, 255, 255, 0.85);

}


.media-cta {

    position: relative;

    width: 100%;

    padding: 100px 5%;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #07152e,
            #0a2860);

}


.media-cta-container {

    position: relative;

    z-index: 2;

    max-width: 1000px;

    margin: 0 auto;

    text-align: center;

}


.media-cta-tag {

    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

    background:
        rgba(255, 255, 255, 0.1);

    color: #ffffff;

    border:
        1px solid rgba(255, 255, 255, 0.2);

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}


.media-cta-content h2 {

    margin: 0 0 20px;

    font-size: 46px;

    line-height: 1.25;

    color: #ffffff;

}


.media-cta-content h2 span {

    color: #66a3ff;

}


.media-cta-content p {

    max-width: 750px;

    margin: 0 auto 35px;

    font-size: 17px;

    line-height: 1.8;

    color:
        rgba(255, 255, 255, 0.75);

}


.media-cta-buttons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

}


.media-cta-primary,
.media-cta-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 16px 27px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition: all 0.3s ease;

}


.media-cta-primary {

    background: #1565ff;

    color: #ffffff;

}


.media-cta-primary:hover {

    background: #347cff;

    transform: translateY(-3px);

}


.media-cta-secondary {

    border:
        1px solid rgba(255, 255, 255, 0.5);

    color: #ffffff;

}


.media-cta-secondary:hover {

    background: #ffffff;

    color: #1565ff;

}


.media-cta-shape {

    position: absolute;

    border-radius: 50%;

    background:
        rgba(21, 101, 255, 0.18);

}


.media-shape-one {

    width: 350px;

    height: 350px;

    top: -170px;

    left: -100px;

}


.media-shape-two {

    width: 450px;

    height: 450px;

    right: -200px;

    bottom: -250px;

}


.media-faq {
    width: 100%;
    padding: 100px 5%;
    background: #f8faff;
}


.media-faq-container {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}


.media-faq-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}


.media-faq-tag {
    display: inline-block;

    margin-bottom: 17px;
    padding: 8px 17px;

    background: #eaf1ff;
    color: #1565ff;

    border-radius: 50px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}


.media-faq-heading h2 {
    margin: 0 0 20px;

    color: #0b1220;

    font-size: 42px;
    line-height: 1.25;
}


.media-faq-heading h2 span {
    color: #1565ff;
}


.media-faq-heading p {
    max-width: 750px;
    margin: 0 auto;

    color: #6b7280;

    font-size: 16px;
    line-height: 1.8;
}


.media-faq-item {
    margin-bottom: 14px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.media-faq-item:hover {
    border-color: #c4d7ff;
}


.media-faq-item.active {
    border-color: #a9c7ff;

    box-shadow:
        0 12px 30px rgba(21, 101, 255, 0.08);
}


.media-faq-question {
    width: 100%;
    min-height: 75px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 20px 25px;

    background: #ffffff;

    border: 0;
    outline: 0;

    color: #111827;

    cursor: pointer;

    text-align: left;

    font-family: inherit;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;

    transition:
        color 0.3s ease;
}


.media-faq-question:hover {
    color: #1565ff;
}


.media-faq-item.active .media-faq-question {
    color: #1565ff;
}


.media-faq-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eaf1ff;

    color: #1565ff;

    border-radius: 50%;

    font-size: 23px;
    font-weight: 400;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.media-faq-item.active .media-faq-icon {
    background: #1565ff;
    color: #ffffff;
}


.media-faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.4s ease;
}


.media-faq-answer-inner {
    padding:
        0 25px 25px;
}


.media-faq-answer p {
    margin: 0;

    color: #6b7280;

    font-size: 15px;
    line-height: 1.8;
}


.media-faq-answer a {
    display: inline-block;

    margin-top: 15px;

    color: #1565ff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;
}


17. FOOTER==========================================*/ footer {
    background-color: #000000;
    color: #ffffff;
    padding: 50px 0;
    border-top: 1px solid #111;
}


.hb-card {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    padding: 12px 15px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}


.hb-icon {
    color: #e11d48;
    font-weight: bold;
}


.btn-solid {
    background-color: #e11d48;
    color: #fff;
    padding: 16px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}


.btn-solid:hover {
    background-color: #be123c;
    transform: translateY(-2px);
}


.diagram-circles {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}


.intro-section {
    padding: 50px 0;
    background: #f8fafc;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}


.intro-section h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
}


.intro-section p {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
    max-width: 1100px;
    margin: 0 auto;
}


.tabs-section {
    padding: 50px 0;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    color: #fff;
    text-align: center;
}


.tabs-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}


.tab-btn {
    background: #fff;
    color: var(--text-dark);
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    transition: 0.3s;
    cursor: pointer;
}


.tab-btn:hover {
    background: #e2e8f0;
}


.tab-btn.active {
    background: #000;
    color: #fff;
    border: 1px solid #333;
}


.tab-content {
    display: none;
    max-width: 1000px;
    margin: 0 auto;
    animation: fadeIn 0.5s;
}


.tab-content.active {
    display: block;
}


.tab-content h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}


.tab-content p {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin-bottom: 40px;
    line-height: 1.6;
}


.tab-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: left;
}


.tab-list-grid li {
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}


.tab-list-grid li::before {
    content: '○';
    color: #cbd5e1;
    font-weight: bold;
}


.features-section {
    padding: 50px 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
}


.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


.fc-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 30px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}


.fc-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}


.fc-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    color: var(--text-dark);
}


.fc-icon svg {
    width: 100%;
    height: 100%;
}


.fc-card h4 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 15px;
}


.fc-card p {
    font-size: 1.05rem;
    color: var(--text-gray);
    line-height: 1.6;
}


.fc-card.dark {
    background: #000;
    color: #fff;
    border-color: #333;
}


.fc-card.dark h4 {
    color: #fff;
}


.fc-card.dark p {
    color: #94a3b8;
}


.fc-card.dark .fc-icon {
    color: #fff;
}


.sizes-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    text-align: center;
}


.sizes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}


.sz-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 20px;
    transition: 0.3s;
    text-align: left;
}


.sz-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}


.sz-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    color: var(--text-dark);
    display: flex;
    justify-content: center;
}


.sz-icon svg {
    width: 100%;
    height: 100%;
}


.sz-card h4 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 20px;
    text-align: center;
}


.sz-list li {
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}


.sz-list li::before {
    content: '✓';
    font-weight: bold;
}


.benefit-icon {
    width: 60px;
    height: 60px;
    color: var(--text-dark);
    flex-shrink: 0;
}


.benefit-icon svg {
    width: 100%;
    height: 100%;
}


.benefit-content h4 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
}


.benefit-content p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}


.intro-section {
    padding: 50px 0;
    background: #fff;
    text-align: center;
}


.intro-section h1 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 25px;
}


.intro-section p {
    font-size: 1.15rem;
    color: var(--text-gray);
    line-height: 1.6;
    max-width: 1100px;
    margin: 0 auto;
}


.solutions-section {
    padding: 50px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}


.sol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.sol-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}


.sol-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}


.sol-logo {
    height: 60px;
    margin-bottom: 25px;
}


.sol-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}


.sol-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
}


.sol-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}


.btn-red {
    align-self: flex-start;
    background: #e11d48;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    transition: 0.3s;
    cursor: pointer;
}


.btn-red:hover {
    background: #be123c;
    transform: translateY(-2px);
}


.op-portfolio-showcase,
.op-portfolio-showcase * {
    box-sizing: border-box;
    font-family: 'Space Grotesk', sans-serif;
}


.op-portfolio-showcase h1,
.op-portfolio-showcase h2,
.op-portfolio-showcase h3,
.op-portfolio-showcase p,
.op-portfolio-showcase ul,
.op-portfolio-showcase div {}


.op-portfolio-showcase {
    background-color: var(--bg-base);
    color: var(--text-main);
    min-height: 100vh;
    padding: 4rem 2rem 8rem 2rem;
    background-image: radial-gradient(circle at top right, rgba(0, 246, 255, 0.05), transparent 40%);
    overflow-x: hidden;

    /* Centers all the inner content perfectly */
    display: flex;
    flex-direction: column;
    align-items: center;
}


.op-portfolio-header,
.op-accordion-wrapper,
.op-additional-sections {
    width: 100%;
    max-width: 1400px;
}


.op-portfolio-header {
    text-align: center;
    margin-bottom: 4rem;
}


.op-portfolio-header h1 {
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, var(--text-main), var(--cyan-neon));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
}


.op-portfolio-header p {
    color: var(--text-dim);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}


.op-accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


.op-accordion-row {
    display: flex;
    height: 450px;
    gap: 1.5rem;
    width: 100%;
    position: relative;
}


.op-featured-row {
    height: 600px;
    z-index: 1;
}


.op-overlap-row {
    z-index: 10;
    margin-top: 20px;
    /* Restored negative margin to pull the row up */
}


.op-accordion-panel {
    flex: 1;
    position: relative;
    border-radius: 24px;
    transition: flex 0.8s var(--smooth-ease), border-color 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background-color: var(--blue-dark);
}


.op-panel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s var(--smooth-ease);
    z-index: 0;
}


.op-accordion-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 8, 17, 0.98) 0%, rgba(15, 23, 42, 0.2) 60%, transparent 100%);
    transition: background 0.8s var(--smooth-ease);
    z-index: 1;
}


.op-accordion-row:not(.op-featured-row) .op-accordion-panel:hover {
    flex: 4;
    border-color: var(--cyan-neon);
    box-shadow: 0 0 30px rgba(0, 246, 255, 0.15);
}


.op-featured-row .op-accordion-panel:hover {
    border-color: var(--cyan-neon);
    box-shadow: 0 20px 50px rgba(0, 246, 255, 0.15);
}


.op-accordion-panel:hover .op-panel-bg {
    transform: scale(1.08);
}


.op-accordion-panel:hover::after {
    background: linear-gradient(to right, rgba(4, 8, 17, 0.98) 0%, rgba(15, 23, 42, 0.4) 100%);
}


.op-panel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem 4rem;
    /* Increased side padding to push it away from the edge */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
    transition: transform 0.6s var(--smooth-ease);
}


.op-featured-row .op-accordion-panel:hover .op-panel-content {
    transform: translateY(-15px);
}


.op-panel-title-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    transition: opacity 0.4s var(--smooth-ease), visibility 0.4s;
    white-space: nowrap;
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
}


.op-accordion-panel:hover .op-panel-title-vertical {
    opacity: 0;
    visibility: hidden;
}


.op-panel-details {
    opacity: 0;
    transform: translateX(-20px);
    /* Slightly shorter travel distance */
    transition: all 0.6s var(--smooth-ease);
    max-width: 550px;
    pointer-events: none;
    padding-left: 1rem;
    /* Extra hard-coded left padding buffer */
}


.op-accordion-panel:hover .op-panel-details,
.op-featured-row .op-panel-details {
    opacity: 1;
    transform: translateX(0);
    /* Reset from 50px to perfectly align left */
    pointer-events: auto;
    padding-bottom: 2rem;
}


.op-featured-row .op-panel-details {
    transform: translateX(0);
    padding-bottom: 80px;
}


.op-featured-row .op-panel-title-vertical {
    display: none;
}


.op-panel-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
    line-height: 1.2;
}


.op-panel-desc {
    color: var(--text-dim);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}


.op-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}


.op-tag {
    background: rgba(0, 246, 255, 0.1);
    color: var(--cyan-neon);
    border: 1px solid rgba(0, 246, 255, 0.2);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    backdrop-filter: blur(4px);
}


.op-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #040811;
    background: var(--cyan-neon);
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.4s var(--smooth-ease);
}


.op-view-btn:hover {
    background: var(--text-main);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 246, 255, 0.2);
}


.op-featured-row .op-accordion-panel::after {
    background: linear-gradient(to right, rgba(4, 8, 17, 0.95) 0%, rgba(15, 23, 42, 0.75) 50%, rgba(15, 23, 42, 0.1) 100%) !important;
}


.op-featured-row .op-accordion-panel:hover::after {
    background: linear-gradient(to right, rgba(4, 8, 17, 0.98) 0%, rgba(15, 23, 42, 0.85) 55%, rgba(15, 23, 42, 0.2) 100%) !important;
}


.op-additional-sections {
    margin: 6rem auto 0 auto;
    padding-top: 4rem;
    border-top: 1px solid rgba(0, 246, 255, 0.1);
}


.op-section-heading {
    font-size: 2.5rem;
    color: var(--text-main);
    margin-bottom: 3rem;
    text-align: center;
}


.op-section-heading span {
    color: var(--cyan-neon);
}


.op-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
    /* Adjusted gap above the next box */
}


.op-skill-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.4s var(--smooth-ease);

    /* Forces everything inside to perfectly center horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;
}


.op-skill-card:hover {
    border-color: var(--cyan-neon);
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 246, 255, 0.1);
}


.op-skill-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}


.op-skill-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s var(--smooth-ease);
}


.op-skill-card:hover .op-skill-icon img {
    transform: scale(1.1);
}


.op-skill-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: var(--text-main);
}


.op-skill-card p {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.5;
}


.op-cta-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(4, 8, 17, 0.9));
    border: 1px solid var(--blue-primary);
    border-radius: 24px;
    padding: 5rem 2rem 4rem 2rem;
    /* Reduced bottom padding */
    margin-top: 4rem;
    /* Added margin to detach it from the grid above */
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}


.op-cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 246, 255, 0.08) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}


.op-cta-content {
    position: relative;
    z-index: 1;
}


.op-cta-box h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}


.op-cta-box p {
    color: var(--text-dim);
    font-size: 1.15rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}


.op-portfolio-showcase .op-panel-content {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}


.op-portfolio-showcase .op-panel-details {
    padding-left: 1rem !important;
    /* Extra safety buffer */
}


.op-portfolio-showcase .op-skills-grid {
    margin-bottom: 5rem !important;
    /* Forces a massive gap below the skills */
}


.op-portfolio-showcase .op-cta-box {
    margin-top: 2rem !important;
    padding: 5rem 2rem 4rem 2rem !important;
    /* Balances the padding inside the box */
}


.op-portfolio-showcase .op-cta-box .op-view-btn {
    margin-top: 1rem !important;
    /* Pushes the button down slightly from the text */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


.op-portfolio-showcase .op-panel-details>span:first-child {
    margin-bottom: 1rem !important;
    display: inline-block !important;
}


.op-portfolio-showcase .op-panel-title {
    margin-bottom: 1.2rem !important;
    font-weight: 700 !important;
}


.op-portfolio-showcase .op-panel-desc {
    margin-bottom: 1.8rem !important;
    line-height: 1.6 !important;
}


.op-portfolio-showcase .op-tech-tags {
    margin-bottom: 2rem !important;
    gap: 12px !important;
    /* Space between the tags themselves */
}


.op-portfolio-showcase .op-view-btn {
    background: var(--cyan-neon) !important;
    color: #000000 !important;
    padding: 0.9rem 1.8rem !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}


.re-hero {
    padding: 138px 6%;
    background:
        radial-gradient(circle at 90% 10%, rgba(21, 101, 255, 0.10), transparent 35%),
        linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
    overflow: hidden;
}


.re-hero-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
}


.re-hero-content {
    max-width: 650px;
}


.re-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: #eaf2ff;
    color: #1565ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.re-hero-title {
    margin: 0 0 22px;
    color: #07152f;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.5px;
}


.re-hero-title span {
    color: #1565ff;
}


.re-hero-divider {
    width: 85px;
    height: 4px;
    margin-bottom: 25px;
    border-radius: 20px;
    background: #1565ff;
}


.re-hero-description {
    margin: 0 0 32px;
    color: #526078;
    font-size: 18px;
    line-height: 1.8;
}


.re-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}


.re-btn {
    min-height: 54px;
    padding: 0 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
}


.re-btn-primary {
    background: #1565ff;
    color: #ffffff;
    border: 2px solid #1565ff;
    box-shadow: 0 10px 25px rgba(21, 101, 255, 0.22);
}


.re-btn-primary:hover {
    background: #07152f;
    border-color: #07152f;
    transform: translateY(-3px);
}


.re-btn-outline {
    background: #ffffff;
    color: #07152f;
    border: 2px solid #d7e0ee;
}


.re-btn-outline:hover {
    color: #ffffff;
    background: #07152f;
    border-color: #07152f;
    transform: translateY(-3px);
}


.re-hero-image-wrap {
    position: relative;
}


.re-hero-image-bg {
    position: absolute;
    width: 90%;
    height: 90%;
    right: -20px;
    bottom: -20px;
    border-radius: 24px;
    background: #1565ff;
    opacity: 0.08;
}


.re-hero-image {
    position: relative;
    width: 100%;
    height: 570px;
    display: block;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(7, 21, 47, 0.18);
}


.re-floating-card {
    position: absolute;
    left: -35px;
    bottom: 35px;
    z-index: 2;
    max-width: 230px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 15px 40px rgba(7, 21, 47, 0.18);
    backdrop-filter: blur(10px);
}


.re-floating-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaf2ff;
    font-size: 24px;
}


.re-floating-text strong {
    display: block;
    margin-bottom: 3px;
    color: #07152f;
    font-size: 15px;
}


.re-floating-text span {
    color: #6c778a;
    font-size: 12px;
    line-height: 1.4;
}


.re-web-section {
    padding: 80px 6%;
    background: #ffffff;
}


.re-web-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}


.re-web-image-wrap {
    position: relative;
}


.re-web-image {
    width: 100%;
    height: 520px;
    display: block;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(7, 21, 47, 0.15);
}


.re-web-badge {
    position: absolute;
    right: 25px;
    bottom: 25px;
    padding: 15px 20px;
    background: #ffffff;
    color: #07152f;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(7, 21, 47, 0.18);
}


.re-web-badge span {
    color: #1565ff;
}


.re-web-content {
    max-width: 650px;
}


.re-web-small-title {
    display: inline-block;
    margin-bottom: 14px;
    color: #1565ff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.re-web-title {
    margin: 0 0 22px;
    color: #07152f;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
    font-weight: 800;
}


.re-web-title span {
    color: #1565ff;
}


.re-web-description {
    margin: 0 0 25px;
    color: #56647a;
    font-size: 17px;
    line-height: 1.8;
}


.re-web-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 28px 0 32px;
}


.re-web-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #07152f;
    font-size: 15px;
    font-weight: 600;
}


.re-check {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf2ff;
    color: #1565ff;
    font-size: 14px;
    font-weight: 900;
}


.re-web-btn {
    min-height: 54px;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #1565ff;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(21, 101, 255, 0.22);
    transition: all 0.3s ease;
}


.re-web-btn:hover {
    background: #07152f;
    transform: translateY(-3px);
}


.re-features-section {
    padding: 80px 6%;
    background: #f7f9fc;
}


.re-features-container {
    max-width: 1400px;
    margin: 0 auto;
}


.re-features-heading {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
}


.re-features-small {
    color: #1565ff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.re-features-title {
    margin: 12px 0 15px;
    color: #07152f;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
    font-weight: 800;
}


.re-features-title span {
    color: #1565ff;
}


.re-features-description {
    margin: 0;
    color: #657187;
    font-size: 17px;
    line-height: 1.7;
}


.re-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}


.re-feature-card {
    position: relative;
    padding: 38px 28px;
    background: #ffffff;
    border: 1px solid #e9edf4;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.35s ease;
}


.re-feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #1565ff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}


.re-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(7, 21, 47, 0.10);
}


.re-feature-card:hover::before {
    transform: scaleX(1);
}


.re-feature-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eaf2ff;
    color: #1565ff;
}


.re-feature-icon svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
}


.re-feature-title {
    margin: 0 0 15px;
    color: #07152f;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 750;
}


.re-feature-text {
    margin: 0;
    color: #657187;
    font-size: 15px;
    line-height: 1.75;
}


.re-services-section {
    padding: 85px 6%;
    background: #ffffff;
}


.re-services-container {
    max-width: 1400px;
    margin: 0 auto;
}


.re-services-heading {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}


.re-services-small {
    display: inline-block;
    color: #1565ff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}


.re-services-title {
    margin: 0 0 16px;
    color: #07152f;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
    font-weight: 800;
}


.re-services-title span {
    color: #1565ff;
}


.re-services-description {
    margin: 0 auto;
    color: #657187;
    font-size: 17px;
    line-height: 1.7;
    max-width: 800px;
}


.re-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}


.re-service-card {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 32px;
    background: #f8faff;
    border: 1px solid #e8edf5;
    border-radius: 16px;
    transition: all 0.35s ease;
}


.re-service-card:hover {
    transform: translateY(-6px);
    background: #ffffff;
    border-color: #cddfff;
    box-shadow: 0 18px 45px rgba(7, 21, 47, 0.10);
}


.re-service-icon {
    width: 64px;
    height: 64px;
    min-width: 64px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: #1565ff;
    border-radius: 14px;
    transition: 0.3s ease;
}


.re-service-card:hover .re-service-icon {
    background: #1565ff;
    color: #ffffff;
}


.re-service-icon svg {
    width: 31px;
    height: 31px;
    stroke: currentColor;
}


.re-service-content h3 {
    margin: 2px 0 12px;
    color: #07152f;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 750;
}


.re-service-content p {
    margin: 0;
    color: #657187;
    font-size: 15px;
    line-height: 1.75;
}


.re-services-cta {
    margin-top: 45px;
    text-align: center;
}


.re-services-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 30px;
    background: #1565ff;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    transition: 0.3s ease;
}


.re-services-btn:hover {
    background: #07152f;
    transform: translateY(-2px);
}


.re-part5,
.re-part5 * {
    box-sizing: border-box;
}


.re-part5 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
}


.re-part5-container {
    width: 88%;
    max-width: 1400px;
    margin: 0 auto;
}


.re-idx-section {
    padding: 50px 0;
    background: #f7f9fc;
}


.re-idx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


.re-idx-image-wrap {
    position: relative;
}


.re-idx-image {
    width: 100%;
    height: 560px;
    display: block;
    object-fit: cover;

    border-radius: 22px;

    box-shadow:
        0 25px 60px rgba(7, 21, 47, 0.16);
}


.re-idx-floating {
    position: absolute;
    left: 25px;
    bottom: 25px;

    padding: 18px 22px;

    display: flex;
    align-items: center;
    gap: 13px;

    background:
        rgba(255, 255, 255, 0.96);

    border-radius: 13px;

    box-shadow:
        0 15px 35px rgba(7, 21, 47, 0.18);
}


.re-idx-floating-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eaf2ff;
    color: #1565ff;

    border-radius: 10px;

    font-size: 22px;
}


.re-idx-floating strong {
    display: block;
    margin-bottom: 3px;

    color: #07152f;

    font-size: 15px;
}


.re-idx-floating span {
    color: #64748b;

    font-size: 12px;
}


.re-idx-tag,
.re-app-tag {
    display: inline-block;

    margin-bottom: 13px;

    color: #1565ff;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;
}


.re-idx-content h2,
.re-app-content h2 {
    margin: 0 0 20px;

    color: #07152f;

    font-size:
        clamp(33px, 4vw, 48px);

    line-height: 1.15;

    font-weight: 800;
}


.re-idx-content h2 span,
.re-app-content h2 span {
    color: #1565ff;
}


.re-idx-content p,
.re-app-content p {
    margin: 0 0 25px;

    color: #64748b;

    font-size: 17px;
    line-height: 1.8;
}


.re-idx-features {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-bottom: 30px;
}


.re-idx-feature {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #334155;

    font-size: 15px;
    font-weight: 600;
}


.re-part5-check {
    width: 27px;
    height: 27px;

    min-width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #1565ff;
    background: #eaf2ff;

    border-radius: 50%;

    font-size: 13px;
    font-weight: 900;
}


.re-part5-btn {
    min-height: 54px;

    padding: 0 29px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: #1565ff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(21, 101, 255, 0.22);

    transition: 0.3s ease;
}


.re-part5-btn:hover {
    background: #07152f;

    transform:
        translateY(-3px);
}


.re-app-section {
    padding: 50px 0;

    background: #ffffff;
}


.re-app-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;
}


.re-app-image-wrap {
    position: relative;
}


.re-app-image {
    width: 100%;
    height: 570px;

    display: block;

    object-fit: cover;

    border-radius: 22px;

    box-shadow:
        0 25px 60px rgba(7, 21, 47, 0.16);
}


.re-app-list {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;

    margin:
        28px 0 32px;
}


.re-app-list-item {
    padding: 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    color: #334155;

    background: #f7f9fc;

    border:
        1px solid #e7ecf3;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 600;
}


.re-app-list-icon {
    width: 30px;
    height: 30px;

    min-width: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: #1565ff;

    border-radius: 7px;

    font-size: 14px;
}


.re-final-cta {
    padding: 50px 0;

    background: #f7f9fc;
}


.re-final-cta-box {
    position: relative;

    overflow: hidden;

    padding: 65px 45px;

    text-align: center;

    background:
        linear-gradient(135deg,
            #07152f 0%,
            #0d3475 55%,
            #1565ff 100%);

    border-radius: 24px;

    box-shadow:
        0 25px 60px rgba(21, 101, 255, 0.18);
}


.re-final-cta-box::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -150px;
    top: -200px;

    background:
        rgba(255, 255, 255, 0.07);

    border-radius: 50%;
}


.re-final-cta-content {
    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: 0 auto;
}


.re-final-cta-content h2 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size:
        clamp(31px, 4vw, 46px);

    line-height: 1.2;
}


.re-final-cta-content p {
    margin: 0 auto 30px;

    max-width: 650px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 17px;
    line-height: 1.75;
}


.re-final-cta-btn {
    min-height: 54px;

    padding: 0 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #1565ff;
    background: #ffffff;

    border:
        2px solid #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    transition: 0.3s ease;
}


.re-final-cta-btn:hover {
    color: #ffffff;
    background: transparent;

    transform:
        translateY(-3px);
}


.re-faq-section {
    padding: 50px 0;

    background: #ffffff;
}


.re-faq-container {
    max-width: 1050px;
}


.re-faq-heading {
    max-width: 800px;

    margin:
        0 auto 45px;

    text-align: center;
}


.re-faq-tag {
    display: inline-block;

    margin-bottom: 12px;

    padding: 8px 16px;

    color: #1565ff;
    background: #eaf2ff;

    border-radius: 30px;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}


.re-faq-heading h2 {
    margin: 0 0 15px;

    color: #07152f;

    font-size:
        clamp(32px, 4vw, 45px);

    line-height: 1.2;
}


.re-faq-heading h2 span {
    color: #1565ff;
}


.re-faq-heading p {
    margin: 0;

    color: #64748b;

    font-size: 16px;
    line-height: 1.7;
}


.re-faq-item {
    margin-bottom: 13px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #e1e7ef;

    border-radius: 12px;

    transition: 0.3s ease;
}


.re-faq-item.active {
    border-color:
        rgba(21, 101, 255, 0.5);

    box-shadow:
        0 10px 30px rgba(21, 101, 255, 0.08);
}


.re-faq-question {
    width: 100%;

    min-height: 72px;

    padding: 18px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: #07152f;
    background: #ffffff;

    border: 0;
    outline: 0;

    cursor: pointer;

    text-align: left;

    font-family: inherit;

    font-size: 16px;
    font-weight: 700;
}


.re-faq-item.active .re-faq-question {
    color: #1565ff;
}


.re-faq-plus {
    width: 36px;
    height: 36px;

    min-width: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #1565ff;
    background: #eaf2ff;

    border-radius: 50%;

    font-size: 21px;

    transition: 0.3s ease;
}


.re-faq-item.active .re-faq-plus {
    color: #ffffff;
    background: #1565ff;

    transform:
        rotate(45deg);
}


.re-faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.4s ease;
}


.re-faq-answer-inner {
    padding:
        0 22px 22px;

    color: #64748b;

    font-size: 15px;
    line-height: 1.8;
}


img {
    display: block;
    max-width: 100%;
}


.retail-container {
    width: 92%;
    max-width: 1500px;
    margin: 0 auto;
}


.retail-hero {
    position: relative;
    padding: 50px 0;
    background:
        radial-gradient(circle at 10% 20%,
            rgba(21, 101, 255, 0.08),
            transparent 35%),
        #ffffff;
    overflow: hidden;
}


.retail-hero::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(21, 101, 255, 0.06);
    top: -220px;
    left: -180px;
}


.retail-hero-wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
}


.retail-hero-content {
    max-width: 680px;
}


.retail-small-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--primary-blue);
    background: var(--light-blue);

    padding: 9px 17px;
    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;
    margin-bottom: 22px;
}


.retail-small-title::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--primary-blue);
    border-radius: 50%;
}


.retail-hero h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 25px;
    letter-spacing: -1.5px;
}


.retail-hero h1 span {
    color: var(--primary-blue);
}


.retail-hero-description {
    color: var(--text-grey);
    font-size: 18px;
    line-height: 1.8;
    max-width: 650px;
    margin-bottom: 35px;
}


.retail-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}


.retail-btn {
    min-width: 190px;
    min-height: 55px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 14px 25px;
    border-radius: 7px;

    font-size: 16px;
    font-weight: 700;

    transition: all 0.3s ease;
}


.retail-btn-primary {
    background: var(--primary-blue);
    color: var(--white);
    border: 2px solid var(--primary-blue);
    box-shadow: 0 10px 25px rgba(21, 101, 255, 0.20);
}


.retail-btn-primary:hover {
    background: var(--dark-blue);
    border-color: var(--dark-blue);
    transform: translateY(-3px);
}


.retail-btn-secondary {
    background: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}


.retail-btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--white);
    transform: translateY(-3px);
}


.retail-hero-image {
    position: relative;
}


.retail-hero-image-main {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(7, 27, 58, 0.18);
}


.retail-hero-image-main img {
    width: 100%;
    height: 540px;
    object-fit: cover;
    transition: transform 0.6s ease;
}


.retail-hero-image-main:hover img {
    transform: scale(1.04);
}


.retail-hero-image::before {
    content: "";
    position: absolute;

    width: 130px;
    height: 130px;

    background: var(--primary-blue);
    border-radius: 25px;

    right: -20px;
    top: -20px;

    z-index: -1;
}


.retail-hero-image::after {
    content: "";
    position: absolute;

    width: 100px;
    height: 100px;

    border: 15px solid rgba(21, 101, 255, 0.15);
    border-radius: 50%;

    left: -40px;
    bottom: -35px;

    z-index: -1;
}


.retail-floating-card {
    position: absolute;
    left: -35px;
    bottom: 35px;

    display: flex;
    align-items: center;
    gap: 15px;

    background: rgba(255, 255, 255, 0.96);
    padding: 16px 22px;

    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.14);

    backdrop-filter: blur(10px);
}


.retail-floating-icon {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--primary-blue);
    color: #ffffff;

    font-size: 23px;
}


.retail-floating-card h4 {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 2px;
}


.retail-floating-card p {
    font-size: 13px;
    color: var(--text-grey);
}


.retail-trade-section {
    padding: 50px 0;
    background: #ffffff;
}


.retail-trade-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


.retail-trade-image {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(7, 27, 58, 0.14);
}


.retail-trade-image img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    transition: transform 0.6s ease;
}


.retail-trade-image:hover img {
    transform: scale(1.05);
}


.retail-trade-badge {
    position: absolute;
    left: 25px;
    bottom: 25px;

    background: #1565ff;
    color: #ffffff;

    padding: 15px 22px;
    border-radius: 10px;

    font-size: 15px;
    font-weight: 700;

    box-shadow: 0 10px 30px rgba(21, 101, 255, 0.3);
}


.retail-trade-content h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
    margin-bottom: 22px;
    color: #111827;
}


.retail-trade-content h2 span {
    color: #1565ff;
}


.retail-trade-content p {
    color: #5f6673;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 18px;
}


.retail-trade-content strong {
    color: #1565ff;
}


.retail-check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 30px 0;
}


.retail-check-item {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #111827;
    font-size: 15px;
    font-weight: 600;
}


.retail-check-icon {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5ff;
    color: #1565ff;

    border-radius: 50%;

    font-size: 14px;
    font-weight: 800;
}


.retail-feature-section {
    padding: 50px 0;
    background: #f7faff;
}


.retail-section-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}


.retail-section-heading span {
    display: inline-block;

    color: #1565ff;
    background: #eaf2ff;

    padding: 8px 16px;
    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;

    margin-bottom: 15px;
}


.retail-section-heading h2 {
    font-size: clamp(30px, 4vw, 46px);
    color: #111827;
    line-height: 1.2;
    margin-bottom: 18px;
}


.retail-section-heading p {
    color: #5f6673;
    font-size: 17px;
    line-height: 1.7;
}


.retail-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.retail-feature-card {
    position: relative;

    background: #ffffff;
    padding: 38px 30px;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    transition: all 0.35s ease;
    overflow: hidden;
}


.retail-feature-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #1565ff;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.35s ease;
}


.retail-feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(21, 101, 255, 0.25);

    box-shadow:
        0 18px 45px rgba(7, 27, 58, 0.10);
}


.retail-feature-card:hover::before {
    transform: scaleX(1);
}


.retail-feature-icon {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5ff;
    color: #1565ff;

    border-radius: 14px;

    font-size: 30px;

    margin-bottom: 24px;

    transition: all 0.3s ease;
}


.retail-feature-card:hover .retail-feature-icon {
    background: #1565ff;
    color: #ffffff;
}


.retail-feature-card h3 {
    color: #111827;
    font-size: 23px;
    margin-bottom: 15px;
}


.retail-feature-card p {
    color: #5f6673;
    font-size: 16px;
    line-height: 1.75;
}


.retail-strategy-section {
    padding: 50px 0;
    background: #ffffff;
}


.retail-strategy-heading {
    max-width: 1000px;
    margin: 0 auto 55px;
    text-align: center;
}


.retail-strategy-heading .strategy-label {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 16px;

    background: #eef5ff;
    color: #1565ff;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;
}


.retail-strategy-heading h2 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;

    color: #111827;

    margin-bottom: 18px;
}


.retail-strategy-heading h2 span {
    color: #1565ff;
}


.retail-strategy-heading p {
    max-width: 850px;
    margin: 0 auto;

    color: #5f6673;

    font-size: 17px;
    line-height: 1.8;
}


.retail-strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}


.retail-strategy-card {
    position: relative;

    display: flex;
    gap: 25px;

    padding: 38px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    box-shadow: 0 10px 35px rgba(7, 27, 58, 0.07);

    transition: all 0.35s ease;
    overflow: hidden;
}


.retail-strategy-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 5px;
    height: 100%;

    background: #1565ff;

    transform: scaleY(0);
    transform-origin: bottom;

    transition: transform 0.35s ease;
}


.retail-strategy-card:hover {
    transform: translateY(-7px);

    border-color: rgba(21, 101, 255, 0.25);

    box-shadow:
        0 20px 50px rgba(7, 27, 58, 0.12);
}


.retail-strategy-card:hover::before {
    transform: scaleY(1);
}


.retail-strategy-icon {
    width: 75px;
    height: 75px;

    flex: 0 0 75px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5ff;
    color: #1565ff;

    border-radius: 15px;

    font-size: 32px;

    transition: all 0.3s ease;
}


.retail-strategy-card:hover .retail-strategy-icon {
    background: #1565ff;
    color: #ffffff;
}


.retail-strategy-content {
    flex: 1;
}


.retail-strategy-content h3 {
    color: #111827;

    font-size: 24px;
    line-height: 1.3;

    margin-bottom: 15px;
}


.retail-strategy-content>p {
    color: #5f6673;

    font-size: 16px;
    line-height: 1.75;

    margin-bottom: 20px;
}


.retail-strategy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}


.retail-strategy-list li {
    position: relative;

    padding-left: 27px;
    margin-bottom: 11px;

    color: #374151;

    font-size: 15px;
    line-height: 1.6;
}


.retail-strategy-list li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5ff;
    color: #1565ff;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 800;
}


.retail-strategy-cta {
    position: relative;

    margin-top: 55px;
    padding: 40px 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    background:
        linear-gradient(135deg,
            #071b3a,
            #0b3d91);

    border-radius: 20px;

    overflow: hidden;
}


.retail-strategy-cta::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -80px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.07);
}


.retail-strategy-cta::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: 120px;
    bottom: -90px;

    border-radius: 50%;

    background:
        rgba(21, 101, 255, 0.4);
}


.retail-strategy-cta-content {
    position: relative;
    z-index: 2;

    max-width: 750px;
}


.retail-strategy-cta h3 {
    color: #ffffff;

    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.3;

    margin-bottom: 10px;
}


.retail-strategy-cta p {
    color: rgba(255, 255, 255, 0.8);

    font-size: 16px;
    line-height: 1.7;
}


.retail-strategy-cta-button {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    min-height: 55px;

    padding: 14px 25px;

    background: #1565ff;
    color: #ffffff;

    border-radius: 7px;

    font-size: 16px;
    font-weight: 700;

    transition: all 0.3s ease;
}


.retail-strategy-cta-button:hover {
    background: #ffffff;
    color: #1565ff;

    transform: translateY(-3px);
}


.advanced-retail-section {
    padding: 50px 0;
    background: #f7faff;
}


.advanced-retail-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}


.advanced-retail-heading span {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 15px;
    background: #eaf2ff;
    color: #1565ff;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
}


.advanced-retail-heading h2 {
    margin: 0 0 18px;
    color: #111827;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
}


.advanced-retail-heading h2 strong {
    color: #1565ff;
}


.advanced-retail-heading p {
    margin: 0 auto;
    color: #5f6673;
    font-size: 17px;
    line-height: 1.8;
}


.advanced-retail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}


.advanced-retail-card {
    position: relative;
    padding: 38px;
    background: #ffffff;
    border: 1px solid #e6edf7;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(7, 27, 58, 0.07);
    overflow: hidden;
    transition: 0.35s ease;
}


.advanced-retail-card:hover {
    transform: translateY(-7px);
    border-color: rgba(21, 101, 255, 0.3);
    box-shadow: 0 20px 50px rgba(7, 27, 58, 0.13);
}


.advanced-retail-card::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: rgba(21, 101, 255, 0.06);
}


.advanced-retail-icon {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    margin-bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf4ff;
    color: #1565ff;

    border-radius: 15px;
    font-size: 30px;

    transition: 0.3s ease;
}


.advanced-retail-card:hover .advanced-retail-icon {
    background: #1565ff;
    color: #ffffff;
    transform: rotate(-5deg);
}


.advanced-retail-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 15px;

    color: #111827;
    font-size: 24px;
    line-height: 1.35;
}


.advanced-retail-card p {
    position: relative;
    z-index: 2;

    margin: 0 0 20px;

    color: #5f6673;
    font-size: 16px;
    line-height: 1.75;
}


.advanced-retail-list {
    position: relative;
    z-index: 2;

    list-style: none;
    padding: 0;
    margin: 0;
}


.advanced-retail-list li {
    position: relative;

    padding-left: 28px;
    margin-bottom: 11px;

    color: #374151;
    font-size: 15px;
    line-height: 1.6;
}


.advanced-retail-list li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 1px;

    width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eaf2ff;
    color: #1565ff;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 800;
}


.advanced-retail-bottom {
    margin-top: 55px;
    padding: 50px 35px;

    text-align: center;

    background: linear-gradient(135deg,
            #071b3a 0%,
            #0b3d91 100%);

    border-radius: 20px;
}


.advanced-retail-bottom h3 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(25px, 3vw, 36px);
}


.advanced-retail-bottom p {
    max-width: 750px;
    margin: 0 auto 25px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 16px;
    line-height: 1.7;
}


.advanced-retail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 14px 30px;

    background: #1565ff;
    color: #ffffff;

    border-radius: 7px;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition: 0.3s ease;
}


.advanced-retail-btn:hover {
    background: #ffffff;
    color: #1565ff;
    transform: translateY(-3px);
}


.retail-why {
    padding: 50px 0;
    background: #ffffff;
}


.retail-why-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}


.retail-why-tag {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 15px;

    background: #eef5ff;
    color: #1565ff;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;
}


.retail-why-heading h2 {
    margin: 0 0 18px;

    color: #111827;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
}


.retail-why-heading h2 span {
    color: #1565ff;
}


.retail-why-heading p {
    max-width: 750px;
    margin: 0 auto;

    color: #5f6673;

    font-size: 17px;
    line-height: 1.8;
}


.retail-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.retail-why-card {
    padding: 32px 27px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 15px;

    transition: 0.35s ease;
}


.retail-why-card:hover {
    transform: translateY(-7px);

    border-color: #c6d9ff;

    box-shadow:
        0 18px 40px rgba(21, 101, 255, 0.10);
}


.retail-why-icon {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    background: #eef5ff;

    border-radius: 13px;

    font-size: 27px;

    transition: 0.3s ease;
}


.retail-why-card:hover .retail-why-icon {
    background: #1565ff;

    transform: scale(1.06);
}


.retail-why-card h3 {
    margin: 0 0 13px;

    color: #111827;

    font-size: 20px;
}


.retail-why-card p {
    margin: 0;

    color: #5f6673;

    font-size: 15px;
    line-height: 1.75;
}


.retail-faq {
    padding: 50px 0;

    background: #f7faff;
}


.retail-faq-container {
    width: 92%;
    max-width: 1050px;

    margin: 0 auto;
}


.retail-faq-heading {
    max-width: 800px;

    margin: 0 auto 50px;

    text-align: center;
}


.retail-faq-tag {
    display: inline-block;

    padding: 8px 18px;
    margin-bottom: 15px;

    background: #eaf2ff;
    color: #1565ff;

    border-radius: 30px;

    font-size: 13px;
    font-weight: 700;
}


.retail-faq-heading h2 {
    margin: 0 0 18px;

    color: #111827;

    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.2;
}


.retail-faq-heading h2 span {
    color: #1565ff;
}


.retail-faq-heading p {
    margin: 0;

    color: #5f6673;

    font-size: 16px;
    line-height: 1.8;
}


.retail-faq-item {
    margin-bottom: 14px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.retail-faq-item:hover {
    border-color: #c6d9ff;
}


.retail-faq-item.active {
    border-color: #a9c7ff;

    box-shadow:
        0 12px 30px rgba(21, 101, 255, 0.08);
}


.retail-faq-question {
    width: 100%;
    min-height: 74px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 24px;

    background: #ffffff;

    border: 0;
    outline: 0;

    color: #111827;

    cursor: pointer;

    text-align: left;

    font-family: inherit;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;

    transition: color 0.3s ease;
}


.retail-faq-question:hover,
.retail-faq-item.active .retail-faq-question {
    color: #1565ff;
}


.retail-faq-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5ff;
    color: #1565ff;

    border-radius: 50%;

    font-size: 22px;

    transition: 0.3s ease;
}


.retail-faq-item.active .retail-faq-icon {
    background: #1565ff;
    color: #ffffff;
}


.retail-faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.4s ease;
}


.retail-faq-answer-inner {
    padding: 0 24px 24px;
}


.retail-faq-answer p {
    margin: 0;

    color: #5f6673;

    font-size: 15px;
    line-height: 1.8;
}


.retail-faq-answer a {
    display: inline-block;

    margin-top: 15px;

    color: #1565ff;

    font-weight: 700;

    text-decoration: none;
}


.section-title {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #000;
    line-height: 1.1;
}


.section-subtitle {
    font-size: 1.1rem;
    color: #aaaaaa;
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6;
}


.security-hero {
    padding: 220px 0 150px 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    position: relative;
}


.security-hero-content {
    max-width: 800px;
    position: relative;
    z-index: 2;
}


.security-hero h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #fff;
    letter-spacing: -1px;
}


.security-hero p {
    font-size: 1.15rem;
    color: #a3e635;
    /* Subtle neon green hint */
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 500;
}


.btn-blue-solid {
    background: var(--primary-blue);
    color: #fff;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    border: none;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


.btn-blue-solid:hover {
    background: #0b3d99;
    transform: translateY(-2px);
}


.capabilities {
    padding: 50px 0;
    background: #000;
    border-bottom: 1px solid #111;
    text-align: center;
}


.cap-header {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 60px;
    color: #fff;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


.cap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}


.cap-card {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    transition: 0.3s;
}


.cap-card:hover {
    border-color: var(--primary-blue);
    transform: translateY(-5px);
}


.cap-icon {
    width: 35px;
    height: 35px;
    color: #fff;
    margin-bottom: 20px;
}


.cap-icon svg {
    width: 100%;
    height: 100%;
}


.cap-card p {
    font-size: 15px;
    color: #ccc;
    line-height: 1.6;
    font-weight: 500;
}


.global-metrics {
    padding: 50px 0;
    background: #050505;
    text-align: center;
}


.global-metrics h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}


.global-metrics p.sub {
    font-size: 1.1rem;
    color: #aaa;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


.mc-card {
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
}


.mc-card h3 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1;
}


.mc-card h5 {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
}


.mc-card p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.9;
    margin-top: auto;
}


.c-lime {
    background: #ccff00;
    color: #000;
}


.c-dark-teal {
    background: #012a2a;
    color: #fff;
}


.c-white {
    background: #ffffff;
    color: #000;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.c-blue {
    background: #1155cc;
    color: #fff;
}


.c-orange {
    background: #ff5722;
    color: #fff;
}


.c-white-text {
    background: #ffffff;
    color: #000;
}


.security-pillars {
    padding: 50px 0;
    background: #000;
    text-align: center;
    border-top: 1px solid #111;
}


.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 60px;
    text-align: left;
}


.pillar-card {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 20px;
    padding: 40px 30px;
    transition: 0.3s;
}


.pillar-card:hover {
    border-color: #555;
}


.pillar-icon {
    width: 50px;
    height: 50px;
    background: #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border: 1px solid #333;
}


.pillar-icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary-blue);
}


.pillar-card h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}


.pillar-card p {
    font-size: 14px;
    color: #888;
    line-height: 1.6;
}


.btn-outline-white {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    margin-top: 50px;
    transition: 0.3s;
}


.btn-outline-white:hover {
    background: #fff;
    color: #000;
}


.track-record {
    padding: 50px 0;
    background: #050505;
}


.tr-banner {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border-radius: 24px;
    padding: 60px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}


.tr-content {
    flex: 0.7;
    position: relative;
    z-index: 2;
}


.tr-content h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 40px;
}


.tr-stats {
    display: flex;
    gap: 50px;
    margin-bottom: 40px;
}


.tr-stat h3 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
}


.tr-stat p {
    font-size: 14px;
    color: #bfdbfe;
    line-height: 1.4;
}


.tr-image {
    flex: 0.3;
    text-align: right;
    position: relative;
    z-index: 2;
}


.tr-image img {
    max-width: 250px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}


.why-security {
    padding: 50px 0;
    background: #000;
    border-top: 1px solid #111;
}


.why-header {
    text-align: center;
    margin-bottom: 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


.why-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}


.why-header p {
    font-size: 1.1rem;
    color: #aaa;
    line-height: 1.6;
}


.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}


.why-img {
    background: #0a0a0a;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    border: 1px solid #222;
}


.why-img img {
    width: 100%;
    display: block;
    filter: brightness(0.9);
}


.why-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, var(--primary-blue), transparent);
    opacity: 0.4;
}


.why-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}


.why-item h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}


.why-item p {
    font-size: 14px;
    color: #888;
    line-height: 1.6;
}


.uphold-security {
    padding: 50px 0;
    background: #050505;
    border-top: 1px solid #111;
}


.uphold-grid {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    gap: 60px;
}


.uphold-left h2 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
}


.uphold-left p {
    font-size: 1.1rem;
    color: #aaa;
    line-height: 1.6;
}


.validate-section {
    padding: 50px 0;
    background: #000;
}


.validate-banner {
    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
    border-radius: 24px;
    padding: 60px 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    position: relative;
}


.validate-text {
    flex: 0.6;
    position: relative;
    z-index: 2;
}


.validate-text h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}


.validate-text p {
    font-size: 1.1rem;
    color: #bfdbfe;
    margin-bottom: 30px;
    line-height: 1.6;
}


.validate-img {
    flex: 0.4;
    text-align: right;
    position: relative;
    z-index: 2;
}


.validate-img img {
    max-width: 300px;
    border-radius: 20px;
}


.ai-security {
    padding: 50px 0;
    background: #050505;
    text-align: center;
    border-top: 1px solid #111;
}


.ai-security h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}


.ai-security p.sub {
    font-size: 1.1rem;
    color: #aaa;
    max-width: 900px;
    margin: 0 auto 60px auto;
    line-height: 1.6;
}


.ai-grid {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    gap: 30px;
    text-align: left;
}


.ai-card {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 20px;
    padding: 40px 30px;
}


.ai-icon {
    width: 45px;
    height: 45px;
    background: #111;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}


.ai-icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary-blue);
}


.ai-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}


.ai-card ul {
    list-style: none;
}


.ai-card ul li {
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}


.ai-card ul li::before {
    content: '✓';
    color: #444;
    font-weight: 800;
}


.services-hero {
    padding: 50px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    position: relative;
    border-bottom: 1px solid var(--border-color);
}


.btn-solid {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    transition: 0.3s;
    border: none;
}


.eight-cards-section {
    padding: 50px 0;
    background: #fff;
}


.eight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


.e-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}


.e-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}


.e-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    color: var(--text-dark);
}


.e-icon svg {
    width: 100%;
    height: 100%;
}


.e-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.4;
}


.all-services {
    padding: 50px 0;
    background: #fff;
}


.srv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.srv-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}


.srv-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-blue);
}


.srv-img {
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #e2e8f0;
}


.srv-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}


.srv-card:hover .srv-img img {
    transform: scale(1.05);
}


.srv-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}


.srv-content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
}


.srv-content p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}


.btn-know-more {
    align-self: flex-start;
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}


.srv-card:hover .btn-know-more {
    background: var(--primary-blue);
    color: #fff;
}


.quote-section {
    padding: 50px 0;
    background: #f8fafc;
    text-align: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}


.book-banner-section {
    padding: 50px 0;
    background: #fff;
}


.book-banner-card {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    border-radius: 24px;
    padding: 70px 40px;
    text-align: center;
    color: #fff;
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
    border: 1px solid #1d4ed8;
}


.book-banner-card h2 {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -1px;
}


.book-banner-card p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}


.btn-book {
    background: #fff;
    color: #1e3a8a;
    padding: 18px 45px;
    border-radius: 40px;
    font-weight: 800;
    font-size: 16px;
    transition: 0.3s;
    border: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}


.btn-book:hover {
    transform: scale(1.05);
    background: #f8fafc;
}


.travel-page {
    --travel-primary: #1565ff;
    --travel-dark: #07152f;
    --travel-dark-2: #0d2347;
    --travel-light: #f5f8ff;
    --travel-white: #ffffff;
    --travel-text: #475569;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--travel-dark);
    background: #ffffff;
}


.travel-page * {
    box-sizing: border-box;
}


.travel-container {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
}


.travel-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 20%,
            rgba(21, 101, 255, 0.12),
            transparent 35%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f4f8ff 55%,
            #edf4ff 100%);
}


.travel-hero::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(21, 101, 255, 0.08);
    top: -180px;
    left: -160px;
}


.travel-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(21, 101, 255, 0.06);
    right: -120px;
    bottom: -150px;
}

/*custom css*/


@media only screen and (min-width: 992px) {
    
         .travel-hero-content {
            max-width: 620px;
            padding-top:200px;
          }
          
          .op-portfolio-header {
        
            padding-top: 35px;
        }
        
}


@media only screen and (max-width: 767px) {
    
     .travel-hero-content {
    max-width:620px;
    padding-top:100px;
     }
    .op-portfolio-header {

    padding-top: 15px;
}
    
  }



.travel-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}







.travel-small-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: rgba(21, 101, 255, 0.1);
    color: var(--travel-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}


.travel-small-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--travel-primary);
}


.travel-hero h1 {
    margin: 0 0 22px;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.08;
    letter-spacing: -2px;
    color: var(--travel-dark);
}


.travel-hero h1 span {
    color: var(--travel-primary);
}


.travel-hero-description {
    margin: 0 0 32px;
    max-width: 580px;
    color: var(--travel-text);
    font-size: 18px;
    line-height: 1.8;
}


.travel-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}


.travel-btn {
    min-height: 54px;
    padding: 0 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: 0.3s ease;
}


.travel-btn-primary {
    color: #ffffff;
    background: var(--travel-primary);
    box-shadow: 0 12px 28px rgba(21, 101, 255, 0.25);
}


.travel-btn-primary:hover {
    background: #004edb;
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(21, 101, 255, 0.32);
}


.travel-btn-outline {
    color: var(--travel-dark);
    border: 1px solid #d7dfeb;
    background: #ffffff;
}


.travel-btn-outline:hover {
    color: #ffffff;
    border-color: var(--travel-dark);
    background: var(--travel-dark);
    transform: translateY(-3px);
}


.travel-hero-image {
    position: relative;
}


.travel-image-main {
    position: relative;
    overflow: hidden;
    height: 570px;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(7, 21, 47, 0.18);
}


.travel-image-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}


.travel-image-main:hover img {
    transform: scale(1.04);
}


.travel-booking-card {
    position: absolute;
    left: -45px;
    bottom: 35px;
    width: 260px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 45px rgba(7, 21, 47, 0.18);
    backdrop-filter: blur(12px);
}


.travel-booking-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    color: #ffffff;
    background: var(--travel-primary);
    font-size: 23px;
}


.travel-booking-card h3 {
    margin: 0 0 7px;
    font-size: 18px;
    color: var(--travel-dark);
}


.travel-booking-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}


.travel-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #dfe7f2;
}


.travel-stat strong {
    display: block;
    margin-bottom: 4px;
    color: var(--travel-primary);
    font-size: 25px;
}


.travel-stat span {
    color: #64748b;
    font-size: 13px;
}


.travel-software-section {
    padding: 50px 0;
    background: #ffffff;
}


.travel-section-heading {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}


.travel-section-tag {
    display: inline-block;
    margin-bottom: 14px;
    color: #1565ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.travel-section-heading h2 {
    margin: 0 0 18px;
    color: #07152f;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    letter-spacing: -1px;
}


.travel-section-heading h2 span {
    color: #1565ff;
}


.travel-section-heading p {
    margin: 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}


.travel-software-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}


.travel-software-image {
    position: relative;
}


.travel-software-image-main {
    height: 650px;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(7, 21, 47, 0.15);
}


.travel-software-image-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}


.travel-software-image-main:hover img {
    transform: scale(1.04);
}


.travel-software-badge {
    position: absolute;
    right: -30px;
    bottom: 35px;
    width: 210px;
    padding: 20px;
    border-radius: 16px;
    background: #07152f;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(7, 21, 47, 0.25);
}


.travel-software-badge-icon {
    margin-bottom: 10px;
    font-size: 28px;
}


.travel-software-badge strong {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
}


.travel-software-badge span {
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
}


.travel-software-content h2 {
    margin: 0 0 20px;
    color: #07152f;
    font-size: clamp(31px, 4vw, 46px);
    line-height: 1.15;
    letter-spacing: -1px;
}


.travel-software-content h2 span {
    color: #1565ff;
}


.travel-software-content>p {
    margin: 0 0 30px;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}


.travel-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}


.travel-accordion-item {
    overflow: hidden;
    border: 1px solid #e1e8f2;
    border-radius: 12px;
    background: #ffffff;
    transition: 0.3s ease;
}


.travel-accordion-item:hover {
    border-color: rgba(21, 101, 255, 0.4);
    box-shadow: 0 8px 25px rgba(7, 21, 47, 0.06);
}


.travel-accordion-item.active {
    border-color: #1565ff;
    box-shadow: 0 10px 30px rgba(21, 101, 255, 0.1);
}


.travel-accordion-header {
    width: 100%;
    min-height: 65px;
    padding: 15px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    border: none;
    background: transparent;
    color: #07152f;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}


.travel-accordion-header:hover {
    color: #1565ff;
}


.travel-accordion-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #eef4ff;
    color: #1565ff;
    font-size: 22px;
    font-weight: 400;
    transition: 0.3s ease;
}


.travel-accordion-item.active .travel-accordion-icon {
    color: #ffffff;
    background: #1565ff;
    transform: rotate(45deg);
}


.travel-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}


.travel-accordion-inner {
    padding: 0 20px 20px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}


.travel-software-cta {
    display: inline-flex;
    min-height: 54px;
    padding: 0 28px;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    color: #ffffff;
    background: #1565ff;
    box-shadow: 0 12px 28px rgba(21, 101, 255, 0.23);
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: 0.3s ease;
}


.travel-software-cta:hover {
    background: #004edb;
    transform: translateY(-3px);
}


.travel-website-section {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background: #f7f9fd;
}


.travel-website-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -220px;
    right: -180px;
    border-radius: 50%;
    background: rgba(21, 101, 255, 0.07);
}


.travel-website-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}


.travel-website-content {
    max-width: 620px;
}


.travel-website-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #1565ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.travel-website-tag::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #1565ff;
}


.travel-website-content h2 {
    margin: 0 0 22px;
    color: #07152f;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    letter-spacing: -1px;
}


.travel-website-content h2 span {
    color: #1565ff;
}


.travel-website-content>p {
    margin: 0 0 30px;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}


.travel-website-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}


.travel-website-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}


.travel-feature-check {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #1565ff;
    background: #eaf1ff;
    font-size: 13px;
    font-weight: 700;
}


.travel-website-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}


.travel-website-accordion-item {
    overflow: hidden;
    border: 1px solid #dfe7f2;
    border-radius: 12px;
    background: #ffffff;
    transition: all 0.3s ease;
}


.travel-website-accordion-item:hover {
    border-color: rgba(21, 101, 255, 0.5);
    box-shadow: 0 8px 25px rgba(7, 21, 47, 0.06);
}


.travel-website-accordion-item.active {
    border-color: #1565ff;
    box-shadow: 0 12px 30px rgba(21, 101, 255, 0.1);
}


.travel-website-accordion-header {
    width: 100%;
    min-height: 65px;
    padding: 15px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    border: 0;
    outline: 0;
    color: #07152f;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}


.travel-website-accordion-header:hover {
    color: #1565ff;
}


.travel-website-accordion-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #1565ff;
    background: #edf4ff;
    font-size: 21px;
    transition: 0.3s ease;
}


.travel-website-accordion-item.active .travel-website-accordion-icon {
    color: #ffffff;
    background: #1565ff;
    transform: rotate(45deg);
}


.travel-website-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}


.travel-website-accordion-inner {
    padding: 0 20px 20px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}


.travel-website-btn {
    min-height: 54px;
    padding: 0 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    color: #ffffff;
    background: #1565ff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(21, 101, 255, 0.23);
    transition: 0.3s ease;
}


.travel-website-btn:hover {
    background: #004edb;
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(21, 101, 255, 0.3);
}


.travel-website-image {
    position: relative;
}


.travel-website-image-main {
    position: relative;
    height: 640px;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(7, 21, 47, 0.16);
}


.travel-website-image-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}


.travel-website-image-main:hover img {
    transform: scale(1.04);
}


.travel-website-image-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(7, 21, 47, 0.28),
            transparent 45%);
    pointer-events: none;
}


.travel-website-floating {
    position: absolute;
    left: -35px;
    bottom: 35px;
    z-index: 3;
    width: 250px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 45px rgba(7, 21, 47, 0.18);
    backdrop-filter: blur(10px);
}


.travel-website-floating-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 11px;
    color: #ffffff;
    background: #1565ff;
    font-size: 21px;
}


.travel-website-floating h3 {
    margin: 0 0 7px;
    color: #07152f;
    font-size: 17px;
}


.travel-website-floating p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}


.travel-part4,
.travel-part4 * {
    box-sizing: border-box;
}


.travel-part4 {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}


.travel-part4-container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}


.travel-part4-marketing {
    width: 100%;
    padding: 50px 0;
    background: #f7f9fc;
}


.travel-part4-heading {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}


.travel-part4-small-title {
    display: inline-block;
    margin-bottom: 12px;
    color: #1565ff;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.travel-part4-heading h2 {
    margin: 0 0 18px;
    padding: 0;
    color: #07152f;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}


.travel-part4-heading h2 span {
    color: #1565ff;
}


.travel-part4-heading p {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}


.travel-part4-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    width: 100%;
}


.travel-part4-card {
    position: relative;
    width: 100%;
    min-height: 285px;
    padding: 35px 30px;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e4eaf2;
    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(7, 21, 47, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.travel-part4-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #1565ff;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}


.travel-part4-card:hover {
    transform: translateY(-7px);

    border-color: rgba(21, 101, 255, 0.3);

    box-shadow:
        0 18px 40px rgba(21, 101, 255, 0.12);
}


.travel-part4-card:hover::before {
    transform: scaleX(1);
}


.travel-part4-icon {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 0 24px;

    background: #eaf2ff;
    border-radius: 15px;

    color: #1565ff;

    font-size: 29px;
    line-height: 1;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.travel-part4-card:hover .travel-part4-icon {
    background: #1565ff;
    color: #ffffff;
    transform: scale(1.05);
}


.travel-part4-card h3 {
    margin: 0 0 14px;
    padding: 0;

    color: #07152f;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
}


.travel-part4-card p {
    margin: 0;
    padding: 0;

    color: #64748b;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.75;
}


.travel-part4-cta {
    width: 100%;
    padding: 50px 0;

    background: #ffffff;
}


.travel-part4-cta-box {
    position: relative;

    width: 100%;

    padding: 70px 45px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(135deg,
            #07152f 0%,
            #0c3274 50%,
            #1565ff 100%);

    border-radius: 25px;

    box-shadow:
        0 25px 60px rgba(21, 101, 255, 0.18);
}


.travel-part4-cta-box::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -190px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.07);
}


.travel-part4-cta-box::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -120px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);
}


.travel-part4-cta-content {
    position: relative;
    z-index: 2;

    max-width: 850px;

    margin: 0 auto;
}


.travel-part4-cta-label {
    display: inline-block;

    margin-bottom: 18px;
    padding: 9px 18px;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid rgba(255, 255, 255, 0.2);

    border-radius: 30px;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.5px;
}


.travel-part4-cta h2 {
    margin: 0 0 20px;
    padding: 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 46px;
    line-height: 1.2;
    font-weight: 800;
}


.travel-part4-cta p {
    max-width: 700px;

    margin: 0 auto 32px;
    padding: 0;

    color:
        rgba(255, 255, 255, 0.85);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.8;
}


.travel-part4-buttons {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;
}


.travel-part4-btn-primary,
.travel-part4-btn-secondary {
    min-height: 54px;

    padding: 0 28px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    text-decoration: none;

    border-radius: 8px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.travel-part4-btn-primary {
    color: #1565ff;

    background: #ffffff;

    border: 2px solid #ffffff;
}


.travel-part4-btn-primary:hover {
    color: #ffffff;

    background: transparent;

    transform: translateY(-3px);
}


.travel-part4-btn-secondary {
    color: #ffffff;

    background: transparent;

    border:
        2px solid rgba(255, 255, 255, 0.6);
}


.travel-part4-btn-secondary:hover {
    color: #07152f;

    background: #ffffff;

    border-color: #ffffff;

    transform: translateY(-3px);
}


.travel-part5,
.travel-part5 * {
    box-sizing: border-box;
}


.travel-part5 {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}


.travel-part5-container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}


.travel-part5-faq {
    width: 100%;
    padding: 50px 0;
    background: #f7f9fc;
}


.travel-part5-heading {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
}


.travel-part5-tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 8px 17px;

    color: #1565ff;
    background: #eaf2ff;

    border-radius: 30px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.travel-part5-heading h2 {
    margin: 0 0 18px;
    padding: 0;

    color: #07152f;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}


.travel-part5-heading h2 span {
    color: #1565ff;
}


.travel-part5-heading p {
    max-width: 700px;
    margin: 0 auto;
    padding: 0;

    color: #64748b;

    font-size: 17px;
    line-height: 1.8;
}


.travel-part5-list {
    width: 100%;

    background: #ffffff;

    border: 1px solid #e4eaf2;
    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 15px 45px rgba(7, 21, 47, 0.07);
}


.travel-part5-item {
    width: 100%;

    border-bottom:
        1px solid #e7ebf1;
}


.travel-part5-item:last-child {
    border-bottom: none;
}


.travel-part5-question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 25px 30px;

    background: #ffffff;

    border: none;
    outline: none;

    cursor: pointer;

    text-align: left;

    color: #07152f;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.travel-part5-question:hover {
    background: #f5f8ff;
    color: #1565ff;
}


.travel-part5-plus {
    position: relative;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eaf2ff;

    border-radius: 50%;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.travel-part5-plus::before,
.travel-part5-plus::after {
    content: "";

    position: absolute;

    background: #1565ff;

    border-radius: 5px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.travel-part5-plus::before {
    width: 16px;
    height: 2px;
}


.travel-part5-plus::after {
    width: 2px;
    height: 16px;
}


.travel-part5-item.active .travel-part5-question {
    color: #1565ff;
    background: #f7faff;
}


.travel-part5-item.active .travel-part5-plus {
    background: #1565ff;
    transform: rotate(180deg);
}


.travel-part5-item.active .travel-part5-plus::before {
    background: #ffffff;
}


.travel-part5-item.active .travel-part5-plus::after {
    background: #ffffff;
    transform: rotate(90deg);
}


.travel-part5-answer {
    max-height: 0;

    overflow: hidden;

    background: #ffffff;

    transition:
        max-height 0.4s ease;
}


.travel-part5-answer-content {
    padding:
        0 85px 27px 30px;

    color: #64748b;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.8;
}


.travel-part5-answer-content p {
    margin: 0;
    padding: 0;
}


.travel-part5-help {
    margin-top: 45px;
    padding: 35px 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background:
        linear-gradient(135deg,
            #07152f,
            #0c3274);

    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(7, 21, 47, 0.15);
}


.travel-part5-help-text h3 {
    margin: 0 0 8px;
    padding: 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
}


.travel-part5-help-text p {
    margin: 0;
    padding: 0;

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 15px;
    line-height: 1.7;
}


.travel-part5-help-btn {
    flex-shrink: 0;

    min-height: 52px;

    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #1565ff;
    background: #ffffff;

    border:
        2px solid #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.travel-part5-help-btn:hover {
    color: #ffffff;
    background: transparent;

    transform: translateY(-3px);
}


.quick-summary {
    background: #f8fafc;
    border-left: 4px solid #1565ff;
    border-radius: 10px;
    padding: 24px 26px;
    margin: 28px 0;
}


.quick-summary h2,
.quick-summary h3 {
    margin-top: 0;
}


.table-of-contents,
.toc {
    margin: 24px 0;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid #dbe7ff;
}


.table-of-contents>h3,
.toc>h3,
.toc-title {
    margin: 0;
    padding: 15px 20px;
    background: #1565ff;
    color: #fff;
    font-size: 18px;
}


.table-of-contents ul,
.toc ul {
    padding: 18px 38px;
    margin: 0;
    background: #f8fbff;
}


/* ============================================================
  17. RESPONSIVE — MEDIA QUERIES
   ============================================================ */


@media(max-width:991px) {

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-links {

        position: fixed;

        top: 80px;

        left: -100%;

        width: 300px;

        height: calc(100vh - 80px);

        background: #fff;

        flex-direction: column;

        align-items: flex-start;

        padding: 30px;

        gap: 18px;

        transition: .35s;

        overflow-y: auto;

        box-shadow: 0 20px 40px rgba(0, 0, 0, .15);

    }

    .nav-links.active {

        left: 0;

    }

    .btn-quote {

        display: none;

    }

    .navbar {

        padding: 20px 0;

    }

    .logo img {

        height: 42px;

    }

    .sol-grid,
    .wwd-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media(max-width:991px) {

    .contact-grid,
    .contact-wrapper,
    .why-grid,
    .process-grid,
    .testimonial-grid,
    .quick-grid,
    .form-row,
    .cta-box {

        grid-template-columns: 1fr;
        display: grid;

    }

    .contact-content h1 {

        font-size: 46px;

    }

    .section-title h2 {

        font-size: 36px;

    }

    .cta-box {

        text-align: center;

    }

    .contact-image {

        margin-top: 40px;

    }

    .floating-card {

        position: static;
        width: 100%;
        margin-top: 20px;

    }

}


@media(max-width:576px) {

    .contact-hero {

        padding: 50px 0;

    }

    .contact-content h1 {

        font-size: 34px;

    }

    .contact-left,
    .contact-form {

        padding: 30px;

    }

    .section-title h2 {

        font-size: 30px;

    }

    .final-box h2 {

        font-size: 34px;

    }

    .primary-btn,
    .secondary-btn,
    .cta-btn,
    .final-box a {

        width: 100%;

    }

    .contact-features {

        justify-content: center;

    }

}


@media (max-width:768px) {
    .hero-partners {
        gap: 18px;
    }

    .hero-partners img {
        height: 24px;
        max-width: 90px;
    }
    .sol-grid,
    .wwd-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


@media (max-width:991px) {
    #universal-header {
        height: 76px !important;
        background: #fff !important;
        z-index: 10000 !important
    }

    #universal-header .navbar {
        height: 76px !important;
        padding: 10px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important
    }

    #universal-header .logo-img {
        max-height: 46px !important;
        width: auto !important
    }

    #universal-header .header-contact {
        display: none !important
    }

    #universal-header .menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border-radius: 0 !important;
        z-index: 10003 !important
    }

    #universal-header .menu-toggle span {
        display: block !important;
        width: 30px !important;
        height: 4px !important;
        background: #111 !important;
        border-radius: 0 !important;
        transition: .25s !important
    }

    #universal-header .menu-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg) !important
    }

    #universal-header .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important
    }

    #universal-header .menu-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg) !important
    }

    #universal-header .nav-links {
        position: fixed !important;
        top: 76px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100dvh - 76px - 74px) !important;
        background: #fff !important;
        padding: 14px 0 20px !important;
        gap: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        transform: translateX(-105%) !important;
        transition: transform .3s ease !important;
        overflow-y: auto !important;
        box-shadow: none !important;
        z-index: 10002 !important
    }

    #universal-header .nav-links.active {
        transform: translateX(0) !important
    }

    #universal-header .nav-links>li {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px dashed #ddd !important;
        position: relative !important
    }

    #universal-header .nav-links>li>a {
        display: block !important;
        padding: 17px 58px 17px 22px !important;
        color: #e31e2b !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important
    }

    #universal-header .nav-links>li.has-mega-menu>a:after {
        content: '+';
        position: absolute;
        right: 22px;
        top: 10px;
        width: 42px;
        height: 42px;
        border: 1px dashed #ddd;
        display: grid;
        place-items: center;
        font-size: 30px;
        font-weight: 400;
        color: #e31e2b
    }

    #universal-header .nav-links>li.has-mega-menu.mobile-open>a:after {
        content: '−'
    }

    #universal-header .mega-menu {
        display: none !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 22px 14px !important;
        background: #fff !important
    }

    #universal-header .has-mega-menu.mobile-open>.mega-menu {
        display: block !important
    }

    #universal-header .mega-grid,
    #universal-header .about-mega-grid {
        display: block !important;
        padding: 0 !important
    }

    #universal-header .mega-item,
    #universal-header .about-links a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 2px !important;
        border: 0 !important;
        color: #111 !important;
        font-size: 16px !important;
        background: transparent !important
    }

    #universal-header .mega-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        color: #1155cc !important
    }

    #universal-header .about-insight {
        display: none !important
    }

    .mobile-overlay {
        display: none !important
    }

    body.menu-open {
        overflow: hidden !important
    }

    .mobile-contact-bar {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 74px;
        background: #fff;
        border-top: 1px solid #ddd;
        z-index: 10004;
        grid-template-columns: repeat(3, 1fr)
    }

    body.menu-open .mobile-contact-bar {
        display: grid
    }

    .mobile-contact-bar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #111 !important;
        text-decoration: none !important;
        font-size: 13px !important
    }

    .mobile-contact-bar svg {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: #111;
        stroke-width: 1.7
    }
}


@media (min-width:992px) {
    .mobile-contact-bar {
        display: none !important
    }
}


@media (max-width:991px) {
    #universal-header {
        position: relative !important;
        height: 76px !important
    }

    #universal-header .navbar {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        height: 76px !important;
        padding: 8px 16px !important
    }

    #universal-header .menu-toggle {
        position: absolute !important;
        right: 16px !important;
        top: 16px !important;
        left: auto !important;
        margin: 0 !important;
        padding: 7px !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important
    }

    #universal-header .menu-toggle:before,
    #universal-header .menu-toggle:after {
        display: none !important;
        content: none !important
    }

    #universal-header .menu-toggle span {
        width: 27px !important;
        height: 3px !important;
        background: #111 !important;
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 !important
    }

    #universal-header .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important
    }

    #universal-header .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important
    }

    #universal-header .nav-links {
        top: 76px !important;
        height: calc(100dvh - 76px - 68px) !important;
        padding: 4px 0 12px !important
    }

    #universal-header .nav-links>li {
        border-bottom: 1px solid #e8edf5 !important
    }

    #universal-header .nav-links>li>a {
        padding: 14px 56px 14px 20px !important;
        color: #1155cc !important;
        font-size: 15px !important;
        font-weight: 700 !important
    }

    #universal-header .nav-links>li.has-mega-menu>a:after {
        right: 16px !important;
        top: 7px !important;
        width: 36px !important;
        height: 36px !important;
        border: 1px solid #dbe5f3 !important;
        color: #1155cc !important;
        font-size: 25px !important;
        border-radius: 4px !important
    }

    #universal-header .mega-menu {
        padding: 0 20px 10px !important
    }

    #universal-header .mega-item,
    #universal-header .about-links a {
        padding: 8px 2px !important;
        font-size: 14px !important;
        line-height: 1.3 !important
    }

    .mobile-contact-bar {
        height: 68px !important
    }

    .alliances-section {
        padding: 55px 0 !important;
        overflow: hidden !important
    }

    .alliances-section h2 {
        font-size: 2rem !important;
        margin-bottom: 30px !important
    }

    .alliance-marquee-container {
        width: 100% !important;
        overflow: hidden !important
    }

    .alliance-marquee-wrapper {
        width: max-content !important;
        display: flex !important;
        gap: 14px !important;
        will-change: transform !important
    }

    .alliance-marquee-track {
        width: auto !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        padding: 0 !important;
        flex-shrink: 0 !important
    }

    .alliance-card-node {
        width: 145px !important;
        height: 110px !important;
        padding: 16px 12px !important;
        flex: 0 0 145px !important;
        box-sizing: border-box !important
    }

    .alliance-card-node img {
        max-width: 100px !important;
        max-height: 38px !important;
        margin-bottom: 10px !important
    }
}


@media(max-width:1024px) {
    section {
        padding-top: 60px !important;
        padding-bottom: 60px !important
    }

    .service-grid,
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    .nav-links {
        gap: 12px
    }

    .container {
        width: min(94%, 1200px)
    }
}


@media(max-width:768px) {
    section {
        padding-top: 42px !important;
        padding-bottom: 42px !important
    }

    .service-grid,
    .services-grid,
    .exp-grid,
    .reviews-grid,
    .metrics-grid {
        grid-template-columns: 1fr !important
    }

    .strategy-card,
    .comp-layout,
    .ind-layout,
    .mkt-box {
        flex-direction: column !important
    }

    .strategy-card {
        padding: 32px 22px !important
    }

    .navbar,
    .nav-container {
        min-height: 64px
    }

    .footer-links-row {
        grid-template-columns: 1fr !important
    }

    .service-box,
    .service-card {
        min-height: auto !important
    }
}


@media (max-width: 991px) {
    #universal-header .menu-toggle {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        gap: 5px !important;
    }

    #universal-header .menu-toggle span {
        display: block !important;
        position: static !important;
        width: 27px !important;
        height: 3px !important;
        min-height: 3px !important;
        background: #111 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    #universal-header .menu-toggle span::before,
    #universal-header .menu-toggle span::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
    }

    #universal-header .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
        /* background: #111 !important; */
    }

    #universal-header .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    #universal-header .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
        /* background: #111 !important; */
    }
}


@media (max-width: 900px) {
    .mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 24px !important;
    }
}


@media (max-width: 768px) {

    .mega-menu.services-menu,
    .mega-menu.industries-menu {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none;
        overflow: visible !important;
    }

    .mega-grid {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 6px !important;
    }
}


@media (min-width: 992px) {
    html body {
        /*padding-top: 86px !important;*/
    }

    #universal-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 86px !important;
        background: #fff !important;
        z-index: 99999 !important;
    }

    #universal-header .navbar {
        height: 86px !important;
        min-height: 86px !important;
        max-width: 1450px !important;
        margin: 0 auto !important;
        padding: 0 28px !important;
        gap: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #universal-header .logo-link {
        flex: 0 0 255px !important;
        height: 86px !important;
        display: flex !important;
        align-items: center !important;
    }

    #universal-header .logo-img {
        height: 70px !important;
        max-height: 70px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    #universal-header .nav-links {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        margin: 0 12px !important;
        padding: 0 !important;
    }

    #universal-header .nav-links>li>a {
        height: 86px !important;
        padding: 0 3px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    #universal-header .header-contact {
        flex: 0 0 310px !important;
        padding-left: 16px !important;
        gap: 6px !important;
        min-height: 58px !important;
    }

    #universal-header .contact-item {
        gap: 9px !important;
    }

    #universal-header .contact-item a {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    #universal-header .contact-item svg {
        width: 19px !important;
        height: 19px !important;
        flex: 0 0 19px !important;
        color: #1565ff !important;
    }

    #universal-header .mega-menu {
        top: 86px !important;
    }

    #universal-header .mega-menu.services-menu,
    #universal-header .mega-menu.industries-menu {
        max-width: 1050px !important;
    }

    #universal-header .mega-grid {
        gap: 10px 18px !important;
        padding: 26px 30px !important;
    }

    #universal-header .mega-item {
        padding: 8px !important;
    }

    #universal-header .mega-menu.about-menu {
        max-width: 760px !important;
    }
}


@media (min-width: 992px) {
    html body {
        /*padding-top: 78px !important;*/
    }

    #universal-header {
        height: 78px !important;
    }

    #universal-header .navbar {
        height: 78px !important;
        min-height: 78px !important;
        max-width: 1540px !important;
        padding: 0 18px !important;
        gap: 8px !important;
    }

    #universal-header .logo-link {
        flex: 0 0 225px !important;
        height: 78px !important;
    }

    #universal-header .logo-img {
        height: 74px !important;
        max-height: 74px !important;
    }

    #universal-header .nav-links {
        flex: 1 1 auto !important;
        justify-content: center !important;
        gap: 27px !important;
        margin: 0 8px !important;
        align-self: stretch !important;
    }

    #universal-header .nav-links>li {
        display: flex !important;
        align-items: center !important;
    }

    #universal-header .nav-links>li>a,
    #universal-header .nav-links>li.has-mega-menu>a {
        height: 78px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        transform: none !important;
        position: static !important;
    }

    #universal-header .header-contact {
        flex: 0 0 292px !important;
        margin-left: auto !important;
        padding-left: 14px !important;
        min-height: 54px !important;
        align-items: flex-start !important;
    }

    #universal-header .mega-menu {
        top: 78px !important;
    }
}


@media (max-width: 991px) {
    html body {
        /*padding-top: 68px !important;*/
    }

    #universal-header {
        height: 68px !important;
        position: fixed !important;
        top: 0 !important;
    }

    #universal-header .navbar {
        height: 68px !important;
        min-height: 68px !important;
        padding: 5px 14px !important;
    }

    #universal-header .logo-img {
        height: 58px !important;
        max-height: 58px !important;
    }

    #universal-header .menu-toggle {
        top: 12px !important;
        right: 14px !important;
        width: 42px !important;
        height: 42px !important;
    }

    #universal-header .nav-links {
        top: 68px !important;
        height: calc(100dvh - 68px) !important;
    }

    #universal-header .nav-links>li>a {
        font-weight: 600 !important;
    }
}


@media (max-width:991px) {
    .header-contact {
        display: flex !important;
        border-left: none !important;
        padding-left: 0 !important;
    }

    .git-btn {
        padding: 9px 16px;
        font-size: 13px;
    }
}


@media (max-width:600px) {
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }

    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
}


@media (min-width: 992px) {
    #universal-header .nav-links {
        gap: 18px !important;
    }

    #universal-header .nav-links>li>a {
        padding: 0 2px !important;
    }

    #universal-header .mega-grid {
        gap: 6px 16px !important;
        padding: 20px 24px !important;
    }

    #universal-header .mega-item {
        padding: 6px 8px !important;
    }
}


@media (min-width: 901px) {

    #universal-header .mega-menu.services-menu .mega-grid,
    #universal-header .mega-menu.industries-menu .mega-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


@media (min-width: 1401px) {
    .container {
        padding: 0 40px;
    }
}


@media (max-width: 480px) {
    .container {
        padding: 0 18px;
    }

    .section-title {
        margin-bottom: 30px;
    }
}


@media (min-width: 992px) {
    #universal-header .header-contact {
        align-items: flex-end !important;
    }
}


@media (max-width:1400px) {

    .container {
        max-width: 1200px;
        padding: 0 30px;
    }

    .nav-links {
        gap: 20px;
    }

    .header-contact {
        gap: 15px;
    }

}


@media (max-width:1200px) {

    .container {
        max-width: 100%;
        padding: 0 25px;
    }

    .logo img,
    .logo-img {
        max-height: 80px;
        width: auto;
    }

    .nav-links {
        gap: 16px;
    }

    .nav-links>li>a {
        font-size: 13px;
    }

    .header-contact {
        display: flex;
        gap: 10px;
    }

    /* Homepage */
    .home-hero-heading {
        font-size: 3.2rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .exp-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Industries Page */
    .industry-hero .container {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .industry-left h1 {
        font-size: 52px;
    }

    .industry-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width:991px) {

    /* ------ HEADER & NAVIGATION ------ */

    header,
    #universal-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: #fff !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05) !important;
    }

    .navbar {
        height: 70px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 20px !important;
    }

    .logo img,
    .logo-img {
        max-height: 42px !important;
        width: auto !important;
    }

    .logo-link {
        flex: 0 0 auto;
    }

    .header-contact {
        display: none !important;
    }

    .nav-links {
        position: fixed !important;
        top: 70px !important;
        left: -100% !important;
        width: 300px !important;
        height: calc(100vh - 70px) !important;
        background: #fff !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 30px !important;
        gap: 0 !important;
        transition: .35s !important;
        overflow-y: auto !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, .15) !important;
        z-index: 99999 !important;
        display: flex !important;
    }

    .nav-links.active {
        left: 0 !important;
    }

    .nav-links>li {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
    }

    .nav-links>li>a {
        display: block !important;
        padding: 15px 0 !important;
        font-size: 15px !important;
        height: auto !important;
        border-bottom: 1px solid #f1f5f9 !important;
        text-transform: uppercase;
    }

    /* Mega menu mobile */
    .mega-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: none !important;
        background: #f8fafc !important;
        top: auto !important;
        left: auto !important;
    }

    .has-mega-menu.active .mega-menu {
        display: block !important;
    }

    /* Override desktop hover behavior on mobile */
    .has-mega-menu:hover .mega-menu {
        display: none !important;
    }

    .has-mega-menu.active:hover .mega-menu {
        display: block !important;
    }

    .has-mega-menu {
        position: relative !important;
    }

    .mega-grid {
        grid-template-columns: 1fr !important;
        padding: 15px !important;
        gap: 8px !important;
    }

    .mega-menu.about-menu {
        max-width: 100% !important;
    }

    .about-mega-grid {
        grid-template-columns: 1fr !important;
    }

    .about-insight {
        display: none !important;
    }

    .about-links {
        border-right: none !important;
        padding: 15px !important;
    }

    .mega-menu-cta {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }

    /* Hamburger */
    .menu-toggle {
        width: 42px;
        height: 42px;
        display: flex !important;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 8px;
        background: #1155cc;
        border: none;
    }

    .menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        position: relative;
    }

    .menu-toggle span::before,
    .menu-toggle span::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 2px;
        background: #fff;
        left: 0;
    }

    .menu-toggle span::before {
        top: -7px;
    }

    .menu-toggle span::after {
        top: 7px;
    }

    /* ------ HOMEPAGE HERO ------ */

    .home-hero {
        height: auto;
        min-height: auto;
        padding: 50px 0;
    }

    .home-hero-inner {
        margin-top: 0;
    }

    .home-hero-heading {
        font-size: 2.8rem;
    }

    .home-hero-desc {
        font-size: 1rem;
    }

    /* ------ SERVICES GRID ------ */

    .services-wrapper {
        padding: 50px 0;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        border: none;
        gap: 20px;
    }

    .service-box {
        border-right: none;
        border: 1px solid #eaeaea;
        border-radius: 16px;
    }

    /* ------ METRICS GRID ------ */

    .metrics-section {
        padding: 50px 0;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .metric-card {
        min-height: 300px;
    }

    .metric-card-bg {
        min-height: 300px;
        padding: 30px;
    }

    .metric-card-bg h2 {
        font-size: 48px;
    }

    /* ------ AI SECTION ------ */

    .ai-section {
        padding: 50px 0;
    }

    .ai-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ai-features {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    /* ------ REVIEWS ------ */

    .reviews-section {
        padding: 30px 0;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        flex: 0 0 auto;
        width: 100%;
    }

    /* ------ EXPERTISE ------ */

    .expertise-section {
        padding: 50px 0;
    }

    .exp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* ------ COMPLIANCE ------ */

    .compliance-section {
        padding: 50px 0;
    }

    .comp-layout {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .comp-left {
        flex: 1;
        margin-bottom: 0;
    }

    .comp-left h2 {
        font-size: 2.2rem;
    }

    .comp-right {
        flex: 1;
    }

    /* ------ STRATEGY BANNER ------ */

    .strategy-banner {
        padding: 50px 0;
    }

    .strategy-card {
        flex-direction: column;
        text-align: center;
        padding: 40px;
        gap: 30px;
    }

    .strategy-text h2 {
        font-size: 2rem;
    }

    /* ------ INDUSTRIES TABS ------ */

    .industries-section {
        padding: 50px 0;
    }

    .ind-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .ind-layout {
        flex-direction: column;
        gap: 30px;
    }

    .ind-image {
        flex: 1;
        width: 100%;
        height: 300px;
    }

    .ind-list-wrapper {
        flex: 1;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-right: 0;
        padding-bottom: 20px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .ind-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .ind-item {
        font-size: 1rem;
        white-space: nowrap;
    }

    .ind-content-wrapper {
        flex: 1;
        width: 100%;
        padding: 0;
    }

    /* ------ MARKETING BANNER ------ */

    .marketing-section {
        padding: 40px 0;
    }

    .mkt-box {
        flex-direction: column;
    }

    .mkt-left {
        flex: 1;
        padding: 40px;
    }

    .mkt-left h2 {
        font-size: 2rem;
    }

    .mkt-right {
        flex: 1;
        min-height: 280px;
    }

    /* ------ ALLIANCES ------ */

    .alliances-section {
        padding: 50px 0;
    }

    .alliances-section h2 {
        font-size: 2.2rem;
    }

    .alliance-card-node {
        width: 170px;
        height: 120px;
    }

    /* ------ CONNECT FORM ------ */

    .connect-box {
        padding: 40px;
    }

    .connect-box h2 {
        font-size: 2rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .input-group.full-width {
        grid-column: auto;
    }

    /* ------ FOOTER (Universal) ------ */

    .universal-footer {
        padding: 60px 20px 30px;
    }

    .footer-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .footer-locations {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-links-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ------ FOOTER (Style.css version) ------ */

    .footer-top {
        display: block;
        text-align: center;
    }

    /* .footer-brand {
        margin-bottom: 35px;
    } */

    .footer-links-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* ------ SECTION TITLES ------ */

    .section-title {
        font-size: 2.2rem;
        margin-bottom: 40px;
    }

    .section-title h2 {
        font-size: 36px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    /* ------ ABOUT PAGE ------ */

    .about-hero {
        padding: 50px 0;
    }

    .about-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .about-hero-text h1 {
        font-size: 42px;
    }

    .about-hero-text p {
        max-width: 100%;
        font-size: 16px;
    }

    .about-hero-img {
        order: -1;
    }

    .about-hero-img img {
        width: 100%;
        border-radius: 20px;
    }

    .hero-partners {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
    }

    .hero-partners img {
        height: 32px;
        width: auto;
        max-width: 120px;
    }

    .story-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .story-img {
        height: 380px;
    }

    .story-content {
        text-align: center;
    }

    .values-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .vm-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .vm-card {
        height: 350px;
    }

    .clients-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .clients-grid img {
        max-width: 100px;
    }

    .why-us-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* ------ CONTACT PAGE ------ */

    .contact-grid,
    .contact-wrapper,
    .why-grid,
    .process-grid,
    .testimonial-grid,
    .quick-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-content {
        text-align: center;
    }

    .contact-content p {
        margin: auto;
    }

    .contact-action {
        justify-content: center;
    }

    .contact-features {
        justify-content: center;
    }

    .contact-image {
        margin-top: 30px;
    }

    .contact-image img {
        border-radius: 20px;
    }

    .floating-card {
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        margin-top: 20px;
    }

    .contact-left,
    .contact-form {
        padding: 35px;
    }

    .cta-box {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cta-btn {
        margin-top: 25px;
        display: inline-flex;
    }

    /* ------ INDUSTRIES PAGE ------ */

    .industry-hero {
        padding: 50px 0;
    }

    .industry-hero .container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .industry-left p {
        margin: auto;
    }

    .industry-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .industry-awards {
        justify-content: center;
    }

    .industry-slider {
        max-width: 700px;
        margin: auto;
    }

    .industry-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-buttons {
        justify-content: center;
    }

    .cta-box h2 {
        font-size: 42px;
    }

}


@media (max-width:768px) {

    /* ------ HERO ------ */

    .home-hero {
        padding: 50px 0;
    }

    .home-hero-heading {
        font-size: 2.2rem;
        letter-spacing: -1px;
    }

    .home-hero-desc {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }

    .home-hero-tag {
        font-size: 12px;
    }

    /* ------ SERVICES ------ */

    .services-wrapper .section-title {
        font-size: 2rem;
    }

    .service-box h3 {
        font-size: 1.2rem;
    }

    .service-box p {
        font-size: 0.9rem;
    }

    /* ------ METRICS ------ */

    .metric-card h2 {
        font-size: 3rem;
    }

    /* ------ AI ------ */

    .ai-content h2 {
        font-size: 2rem;
    }

    .ai-features {
        grid-template-columns: 1fr;
    }


    /* ------ REVIEWS ------ */

    /* .review-card p {
        font-size: 0.95rem;
    } */

    /* ------ EXPERTISE ------ */

    .exp-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* ------ COMPLIANCE ------ */

    .comp-left h2 {
        font-size: 1.8rem;
    }

    .acc-header {
        font-size: 1rem;
        padding: 20px 0;
    }

    .acc-tags {
        gap: 10px;
    }

    .acc-tag {
        font-size: 12px;
        padding: 8px 14px;
    }

    /* ------ STRATEGY ------ */

    .strategy-card {
        padding: 30px;
    }

    .strategy-text h2 {
        font-size: 1.6rem;
    }

    .btn-white {
        width: 100%;
        text-align: center;
    }

    /* ------ INDUSTRIES TABS ------ */

    .ind-image {
        height: 240px;
    }

    .ind-list {
        gap: 10px;
    }

    .ind-content p {
        font-size: 1rem;
    }

    /* ------ MARKETING ------ */

    .mkt-left {
        padding: 30px;
    }

    .mkt-left h2 {
        font-size: 1.6rem;
    }

    .mkt-right {
        min-height: 250px;
    }

    /* ------ ALLIANCES ------ */

    .alliances-section h2 {
        font-size: 1.8rem;
    }

    .alliance-card-node {
        width: 150px;
        height: 110px;
    }

    .alliance-card-node img {
        max-width: 80px;
    }

    /* ------ CONNECT FORM ------ */

    .connect-box h2 {
        font-size: 1.6rem;
    }

    /* ------ FOOTER ------ */

    .footer-locations {
        grid-template-columns: 1fr;
    }

    /* ------ CONTACT PAGE ------ */

    .contact-hero {
        padding: 50px 0;
    }

    .contact-content h1 {
        font-size: 38px;
        line-height: 1.2;
    }

    .contact-content p {
        font-size: 16px;
    }

    .contact-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .contact-features div {
        width: 100%;
    }

    .process-grid,
    .why-grid,
    .testimonial-grid,
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .contact-form h2,
    .contact-left h2 {
        font-size: 30px;
    }

    .final-box h2 {
        font-size: 34px;
    }

    /* ------ INDUSTRIES PAGE ------ */

    .industry-left h1 {
        font-size: 40px;
        line-height: 1.2;
    }

    .industry-left p {
        font-size: 16px;
    }

    .industry-buttons {
        flex-direction: column;
        align-items: center;
    }

    .primary-btn,
    .secondary-btn {
        width: 240px;
    }

    .industry-cards {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .industry-heading h2,
    .industry-intro h2 {
        font-size: 34px;
    }

    .section-title h2 {
        font-size: 34px;
    }

    .cta-box h2 {
        font-size: 34px;
    }

}


@media (max-width:576px) {

    .container {
        padding: 0 18px;
    }

    /* ------ NAVIGATION ------ */

    .nav-links {
        width: 100%;
    }

    .logo img,
    .logo-img {
        max-height: 36px;
    }

    /* ------ HERO ------ */

    .home-hero {
        padding: 50px 0;
    }

    .home-hero-heading {
        font-size: 1.9rem;
        letter-spacing: -0.5px;
    }

    .home-hero-tag {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .home-hero-desc {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 25px;
    }

    .home-hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        text-align: center;
        padding: 14px 24px;
        font-size: 14px;
    }

    .home-hero-gradient {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.6) 100%);
    }

    /* ------ SERVICES ------ */

    .services-wrapper {
        padding: 50px 0;
    }

    .services-wrapper .section-title {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        border: none;
    }

    .service-box {
        border-right: none;
        border: 1px solid #eaeaea;
        border-radius: 16px;
    }

    /* ------ METRICS ------ */

    .metrics-section {
        padding: 50px 0;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: auto;
        padding: 30px 25px;
    }

    .metric-card h2 {
        font-size: 2.8rem;
    }

    .metric-card-bg {
        min-height: 240px;
    }

    .metric-card-bg h2 {
        font-size: 40px;
    }

    /* ------ AI ------ */

    .ai-section {
        padding: 50px 0;
    }

    .ai-content h2 {
        font-size: 1.6rem;
    }

    .ai-features {
        grid-template-columns: 1fr;
    }

    /* ------ REVIEWS ------ */

    .reviews-section {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.6rem;
    }

    /* ------ EXPERTISE ------ */

    .expertise-section {
        padding: 50px 0;
    }

    .exp-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    /* ------ COMPLIANCE ------ */

    .compliance-section {
        padding: 50px 0;
    }

    .comp-left h2 {
        font-size: 1.5rem;
    }

    .comp-left p {
        font-size: 0.95rem;
    }

    /* ------ STRATEGY ------ */

    .strategy-banner {
        padding: 40px 0;
    }

    .strategy-card {
        padding: 25px;
        border-radius: 16px;
    }

    .strategy-text h2 {
        font-size: 1.3rem;
    }

    .strategy-text p {
        font-size: 0.9rem;
    }

    /* ------ INDUSTRIES TABS ------ */

    .industries-section {
        padding: 50px 0;
    }

    .ind-image {
        height: 200px;
        border-radius: 14px;
    }

    .ind-list {
        gap: 8px;
    }

    .ind-item {
        font-size: 0.9rem;
        padding: 6px 12px;
        background: #f1f5f9;
        border-radius: 20px;
    }

    .ind-content p {
        font-size: 0.95rem;
    }

    .btn-outline {
        width: 100%;
        text-align: center;
    }

    /* ------ MARKETING ------ */

    .marketing-section {
        padding: 30px 0;
    }

    .mkt-left {
        padding: 25px;
    }

    .mkt-left h2 {
        font-size: 1.4rem;
    }

    .mkt-left a {
        width: 100%;
        text-align: center;
    }

    .mkt-right {
        min-height: 200px;
    }

    /* ------ ALLIANCES ------ */

    .alliances-section {
        padding: 50px 0;
    }

    .alliances-section h2 {
        font-size: 1.5rem;
        margin-bottom: 35px;
    }

    .alliance-card-node {
        width: 140px;
        height: 100px;
        padding: 15px;
    }

    .alliance-card-node img {
        max-width: 70px;
        margin-bottom: 8px;
    }

    .alliance-card-node span {
        font-size: 12px;
    }

    /* ------ CONNECT FORM ------ */

    .connect-section {
        padding: 50px 0;
    }

    .connect-box {
        padding: 25px;
        border-radius: 16px;
    }

    .connect-box h2 {
        font-size: 1.4rem;
    }

    .connect-box p {
        font-size: 0.9rem;
    }

    .btn-submit-large {
        font-size: 14px;
        padding: 14px;
    }

    /* ------ FOOTER ------ */

    .universal-footer {
        padding: 40px 18px 25px;
    }

    .footer-socials {
        flex-wrap: wrap;
    }

    .social-btn {
        font-size: 12px;
        padding: 6px 12px;
    }

    .footer-links-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-bottom-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .footer-bottom-links a {
        margin-left: 0;
    }

    /* Footer (style.css version) */

    .footer-links-grid {
        grid-template-columns: 1fr;
    }

    /* ------ ABOUT PAGE ------ */

    .about-hero {
        padding: 50px 0;
    }

    .about-hero-text h1 {
        font-size: 34px;
    }

    .about-hero-text p {
        font-size: 15px;
    }

    .hero-partners {
        gap: 18px;
    }

    .hero-partners img {
        height: 26px;
    }

    .story-img {
        height: 280px;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .vm-card {
        height: 280px;
        padding: 30px;
    }

    .vm-content h2 {
        font-size: 30px;
    }

    /* ------ CONTACT PAGE ------ */

    .contact-hero {
        padding: 50px 0;
    }

    .contact-content h1 {
        font-size: 30px;
    }

    .contact-content p {
        font-size: 15px;
    }

    .primary-btn,
    .secondary-btn,
    .cta-btn,
    .final-box a,
    .contact-form button {
        width: 100%;
    }

    .contact-action {
        flex-direction: column;
        align-items: center;
    }

    .contact-features {
        grid-template-columns: 1fr;
    }

    .contact-left,
    .contact-form {
        padding: 25px;
    }

    .contact-form {
        border-radius: 18px;
    }

    .contact-left {
        border-radius: 18px;
    }

    .section-title h2 {
        font-size: 28px;
    }

    .section-title p {
        font-size: 15px;
    }

    .client {
        flex-direction: column;
        text-align: center;
    }

    .faq-btn {
        font-size: 16px;
        padding: 18px;
    }

    .quick-card {
        padding: 30px 20px;
    }

    .final-box h2 {
        font-size: 28px;
    }

    /* ------ INDUSTRIES PAGE ------ */

    .industry-hero {
        padding: 50px 0;
    }

    .industry-left h1 {
        font-size: 30px;
    }

    .industry-tag {
        font-size: 12px;
        padding: 10px 18px;
    }

    .industry-buttons {
        gap: 15px;
    }

    .primary-btn,
    .secondary-btn {
        width: 100%;
    }

    .industry-awards {
        display: grid;
        grid-template-columns: 1fr;
    }

    .industry-awards div {
        width: 100%;
    }

    .industry-slider img {
        border-radius: 20px;
    }

    .industry-card {
        min-height: 360px;
    }

    .industry-card img {
        height: 360px;
    }

    .industry-overlay {
        padding: 20px;
    }

    .industry-overlay h3 {
        font-size: 22px;
    }

    .why-card {
        padding: 30px;
    }

    .process-box {
        padding: 30px;
    }

    .cta-box h2 {
        font-size: 28px;
    }

    .cta-box p {
        font-size: 15px;
    }

    .loc-card {
        max-width: 100%;
    }


    .ind-content {
        padding: 10px;
    }
}


@media (max-width:480px) {

    .home-hero-heading {
        font-size: 1.7rem;
    }
    .home-hero-heading {
        padding-top: 60px;
    }

    .home-hero-desc {
        font-size: 0.85rem;
    }

    .section-title {
        font-size: 1.4rem;
    }

    .services-wrapper .section-title {
        font-size: 1.4rem;
    }

    .metric-card h2 {
        font-size: 2.4rem;
    }

    .ai-content h2 {
        font-size: 1.4rem;
    }

    .comp-left h2 {
        font-size: 1.3rem;
    }

    .strategy-text h2 {
        font-size: 1.2rem;
    }

    .connect-box h2 {
        font-size: 1.2rem;
    }

    .alliances-section h2 {
        font-size: 1.3rem;
    }

    .ind-image {
        height: 180px;
    }

    .mkt-right {
        min-height: 180px;
    }

}


@media (max-width:380px) {

    .home-hero-heading {
        font-size: 1.5rem;
    }

    .about-hero-text h1 {
        font-size: 28px;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .section-title h2 {
        font-size: 24px;
    }

    .metric-card-bg h2 {
        font-size: 34px;
    }

    .strategy-text h2 {
        font-size: 1.1rem;
    }

    .connect-box h2 {
        font-size: 1.1rem;
    }

    .contact-content h1 {
        font-size: 26px;
    }

    .contact-form h2,
    .contact-left h2 {
        font-size: 24px;
    }

    .primary-btn,
    .secondary-btn {
        height: 50px;
        font-size: 14px;
    }

    .contact-features h2 {
        font-size: 28px;
    }

    .industry-left h1 {
        font-size: 26px;
    }

    .industry-heading h2,
    .industry-intro h2 {
        font-size: 26px;
    }

}


@media (min-width:992px) {

    .menu-toggle {
        display: none !important;
    }

    .mobile-menu {
        display: none !important;
    }

    .mobile-overlay {
        display: none !important;
    }

}


@media (max-width: 991px) {

    /* Hero Section Grid Adjustments */
    .hero-grid,
    .about-hero-grid,
    .blog-hero-grid,
    .partner-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center !important;
    }

    .hero-content,
    .about-hero-text,
    .blog-hero-text,
    .partner-content {
        max-width: 100% !important;
        text-align: center !important;
    }

    .hero-bullets {
        display: inline-block !important;
        text-align: left !important;
        margin: 0 auto 30px auto !important;
    }

    .hero-btns,
    .blog-hero-buttons,
    .industry-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Grid layout adjustments */
    .pastel-grid,
    .services-list-grid,
    .benefits-grid,
    .ind-grid,
    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .tech-logo-grid,
    .tech-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }

    .partner-img {
        order: -1 !important;
        margin: 0 auto !important;
    }
}


@media (max-width: 768px) {

    /* Hero sections padding */
    .sw-hero,
    .blog-hero-section,
    .about-hero,
    section[class*="-hero"] {
        padding: 50px 0 !important;
    }

    /* Grids stack vertically on mobile */
    .pastel-grid,
    .services-list-grid,
    .benefits-grid,
    .ind-grid,
    .footer-links-grid,
    .tech-logo-grid,
    .tech-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Text & Headings scaling */
    .hero-content h1,
    .about-hero-text h1,
    .blog-hero-text h1,
    .partner-content h2 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    .hero-content p,
    .about-hero-text p,
    .blog-hero-text p,
    .partner-content p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .quote-text {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    /* Make all buttons span 100% on mobile for thumb friendliness */
    .hero-btns,
    .blog-hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .hero-btns a,
    .hero-btns button,
    .blog-hero-buttons a,
    .blog-hero-buttons button,
    .btn-solid,
    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin: 0 !important;
    }
}


@media (max-width: 480px) {

    .hero-content h1,
    .about-hero-text h1,
    .blog-hero-text h1,
    .partner-content h2 {
        font-size: 1.8rem !important;
    }

    .quote-text {
        font-size: 1.25rem !important;
    }

    .pastel-card,
    .sl-card,
    .benefit-card,
    .ind-card,
    .partner-content {
        padding: 25px 20px !important;
    }
}


@media (max-width: 991px) {

    /* Hero two-column → single */
    .hero-grid,
    .about-hero-grid,
    .blog-hero-grid,
    .partner-grid,
    .ai-grid,
    .story-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .hero-content,
    .hero-img,
    .partner-img,
    .partner-content,
    .ai-img-wrapper,
    .story-img {
        max-width: 100% !important;
        width: 100% !important;
        padding-top: 100px;
    }

    .story-img {
        height: 260px !important;
    }

    .hero-btns,
    .hero-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* 3-col → 2-col */
    .pastel-grid,
    .services-list-grid,
    .benefits-grid,
    .ind-grid,
    .values-grid,
    .why-us-grid,
    .exp-grid,
    .reviews-grid,
    .srv-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* 4-col → 2-col */
    .metrics-grid,
    .footer-links-grid,
    .footer-grid,
    .eight-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* 6-col / 5-col → 3-col */
    .tech-logo-grid,
    .tech-grid,
    .clients-grid,
    .disruptors-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    /* Mega services grid */
    .mega-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Form */
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .input-group.full-width {
        grid-column: span 1 !important;
    }

    /* Connect box */
    .connect-box {
        padding: 30px 20px !important;
    }

    .connect-box h2 {
        font-size: 2rem !important;
    }

    /* Compliance flex */
    .comp-layout {
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Strategy banner */
    .strategy-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 20px !important;
        gap: 20px !important;
    }

    .btn-white {
        width: 100% !important;
        text-align: center !important;
    }

    /* Marketing / mkt box */
    .mkt-box {
        flex-direction: column !important;
    }

    .mkt-left {
        padding: 35px 25px !important;
    }

    .mkt-right {
        min-height: 200px !important;
    }

    /* Footer */
    .footer-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    /* AI features */
    .ai-features {
        grid-template-columns: 1fr !important;
    }

    /* vm-grid */
    .vm-grid {
        grid-template-columns: 1fr !important;
    }

    .ai-icon {
        margin: 0 auto 25px;
    }
    .ai-card ul li {
        justify-content: center;
    }
}


@media (max-width: 768px) {

    .container {
        padding: 0 18px !important;
    }

    /* Hero headings */
    .hero-content h1,
    .about-hero-text h1,
    .blog-hero-text h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .hero-content p,
    .about-hero-text p,
    .blog-hero-text p {
        font-size: 0.97rem !important;
    }

    .sw-hero,
    .about-hero,
    .blog-hero-section,
    section[class$="-hero"] {
        padding: 50px 0 50px !important;
    }

    /* Section titles */
    .section-title,
    h2.section-title {
        font-size: 1.8rem !important;
        letter-spacing: -0.5px !important;
    }

    /* Hero buttons — full width stack */
    .hero-btns,
    .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }

    .hero-btns a,
    .hero-btns button,
    .btn-solid,
    .hero-btn-primary,
    .hero-btn-secondary,
    .btn-quote {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }

    /* All grids go 1-col */
    .pastel-grid,
    .services-list-grid,
    .benefits-grid,
    .ind-grid,
    .values-grid,
    .why-us-grid,
    .metrics-grid,
    .exp-grid,
    .reviews-grid,
    .footer-links-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Tech grids */
    .tech-logo-grid,
    .tech-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .clients-grid,
    .disruptors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Partner section */
    .partner-grid {
        gap: 20px !important;
    }

    .partner-content h2 {
        font-size: 1.4rem !important;
    }

    /* Metric cards */
    .metric-card-bg {
        min-height: 240px !important;
    }

    .metric-card-bg h2 {
        font-size: 2.5rem !important;
    }

    /* Compliance */
    .comp-left h2 {
        font-size: 2rem !important;
    }

    /* Connect form */
    .connect-box h2 {
        font-size: 1.7rem !important;
    }

    .connect-box p {
        font-size: 0.95rem !important;
    }

    /* AI */
    .ai-logo {
        font-size: 2rem !important;
    }

    .ai-content p {
        font-size: 1rem !important;
    }

    /* VM Card */
    .vm-card {
        padding: 35px 20px !important;
    }

    .vm-content h2 {
        font-size: 2rem !important;
    }

    /* Quote */
    .quote-text {
        font-size: 1.4rem !important;
    }

    /* mkt */
    .mkt-left h2 {
        font-size: 1.9rem !important;
    }

    /* Strategy */
    .strategy-text h2 {
        font-size: 1.8rem !important;
    }
}


@media (max-width: 480px) {

    .container {
        padding: 0 14px !important;
    }

    .hero-content h1,
    .about-hero-text h1 {
        font-size: 1.7rem !important;
    }

    .section-title,
    h2.section-title {
        font-size: 1.5rem !important;
    }

    .tech-logo-grid,
    .tech-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .clients-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .connect-box {
        padding: 25px 14px !important;
    }

    .connect-box h2 {
        font-size: 1.5rem !important;
    }

    .loc-card {
        max-width: 100% !important;
    }

    .pastel-card,
    .sl-card,
    .benefit-card,
    .value-card,
    .why-card {
        padding: 22px 16px !important;
    }

    .metric-card-bg {
        min-height: 200px !important;
        padding: 25px 18px !important;
    }

    .metric-card-bg h2 {
        font-size: 2rem !important;
    }

    /* Footer */
    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


@media(max-width:1024px) {

    .health-container {
        padding: 0 24px;
    }

    .health-hero {
        min-height: auto;
        padding: 50px 0;
    }

    .health-hero-grid,
    .health-feature-grid {
        gap: 45px;
    }

    .health-hero-content h1 {
        font-size: 48px;
    }

    .health-hero-image img {
        height: 440px;
    }

    .health-feature-content h2 {
        font-size: 38px;
    }

    .health-feature-image img {
        height: 420px;
    }

    .health-section-heading h2 {
        font-size: 38px;
    }

}


@media(max-width:767px) {

    .health-container {
        padding: 0 18px;
    }

    .health-hero {
        padding: 50px 0;
    }

    .health-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .health-hero-content {
        max-width: 100%;
    }

    .health-hero-content h1 {
        font-size: 38px;
        line-height: 1.15;
        letter-spacing: -1px;
    }

    .health-hero-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .health-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .health-btn {
        width: 100%;
    }

    .health-hero-image img {
        height: 330px;
    }

    .health-feature-section {
        padding: 50px 0;
    }

    .health-feature-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .health-feature-content {
        max-width: 100%;
    }

    .health-feature-content h2 {
        font-size: 32px;
    }

    .health-feature-content p {
        font-size: 15px;
    }

    .health-feature-image img {
        height: 320px;
    }

    .health-section-heading {
        margin-bottom: 40px;
    }

    .health-section-heading h2 {
        font-size: 31px;
    }

    .health-section-heading p {
        font-size: 15px;
    }

    .health-services {
        padding: 50px 0;
    }

}


@media(max-width:1024px) {

    .health-services-grid {
        gap: 25px;
    }

    .health-service-image {
        height: 240px;
    }

    .health-service-content {
        padding: 25px;
    }

    .health-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .health-process-card {
        min-height: 300px;
    }

    .health-comprehensive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media(max-width:767px) {

    .health-services-grid-section {
        padding: 15px 0 70px;
    }

    .health-services-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .health-service-card {
        border-radius: 12px;
    }

    .health-service-image {
        height: 230px;
    }

    .health-service-content {
        padding: 24px 20px;
    }

    .health-service-content h3 {
        font-size: 21px;
    }

    .health-process-section {
        padding: 50px 0;
    }

    .health-process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .health-process-card {
        min-height: auto;
        padding: 30px 22px;
    }

    .health-process-number {
        font-size: 38px;
    }

    .health-process-cta {
        margin-top: 40px;
        padding: 35px 20px;
    }

    .health-process-cta h3 {
        font-size: 25px;
    }

    .health-benefits-section {
        padding: 50px 0;
    }

    .health-benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .health-benefit-card {
        padding: 30px 22px;
    }

    .health-benefit-card h3 {
        font-size: 21px;
    }

    .health-comprehensive-section {
        padding: 50px 0;
    }

    .health-comprehensive-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .health-comprehensive-card {
        min-height: auto;
        padding: 30px 22px;
    }

}


@media(min-width:1025px) {

    .health-service-card {
        height: 100%;
    }

    .health-benefit-card {
        height: 100%;
    }

    .health-comprehensive-card {
        height: 100%;
    }

}


@media(max-width:1024px) {

    .health-final-cta {
        padding: 50px 0;
    }

    .health-final-cta-box {
        padding: 45px 40px;
        gap: 35px;
    }

    .health-final-cta-content h2 {
        font-size: 34px;
    }

    .health-faq-section {
        padding: 50px 0;
    }

}


@media(max-width:767px) {

    /* ==========================
       GENERAL
    ========================== */

    .health-tag {
        font-size: 12px;
        letter-spacing: .8px;
    }


    /* ==========================
       HERO MOBILE
    ========================== */

    .health-hero {
        min-height: auto;
        padding-top: 110px;
    }

    .health-hero-grid {
        display: flex;
        flex-direction: column;
    }

    .health-hero-content {
        order: 1;
    }

    .health-hero-image {
        order: 2;
    }

    .health-hero-image img {
        width: 100%;
        height: 300px;
        border-radius: 12px;
    }


    /* ==========================
       FEATURE SECTIONS MOBILE
    ========================== */

    .health-feature-grid,
    .health-feature-grid.health-reverse {
        display: flex;
        flex-direction: column;
    }

    .health-feature-content,
    .health-feature-image {
        width: 100%;
    }

    .health-feature-image {
        order: 2;
    }

    .health-feature-content {
        order: 1;
    }

    .health-feature-image img {
        width: 100%;
        height: 300px;
    }


    /* ==========================
       BUTTON MOBILE
    ========================== */

    .health-btn {
        width: 100%;
        min-height: 50px;
        padding: 13px 20px;
        text-align: center;
    }


    /* ==========================
       SERVICE CARDS
    ========================== */

    .health-service-image {
        height: 220px;
    }

    .health-service-content h3 {
        font-size: 20px;
    }


    /* ==========================
       PROCESS
    ========================== */

    .health-process-icon,
    .health-card-icon {
        width: 58px;
        height: 58px;
        font-size: 25px;
    }


    /* ==========================
       FINAL CTA MOBILE
    ========================== */

    .health-final-cta {
        padding: 50px 0;
    }

    .health-final-cta-box {
        display: block;
        padding: 38px 22px;
        border-radius: 15px;
        text-align: center;
    }

    .health-final-cta-content {
        max-width: 100%;
    }

    .health-final-cta-content h2 {
        font-size: 29px;
        line-height: 1.25;
    }

    .health-final-cta-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .health-final-cta-button {
        margin-top: 28px;
    }


    /* ==========================
       FAQ MOBILE
    ========================== */

    .health-faq-section {
        padding: 50px 0;
    }

    .health-faq-wrapper {
        width: 100%;
    }

    .health-faq-item {
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .health-faq-question {
        min-height: 68px;
        gap: 15px;
        padding: 17px 16px;
        font-size: 15px;
        line-height: 1.45;
    }

    .health-faq-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 21px;
    }

    .health-faq-answer p {
        padding: 0 16px 20px;
        font-size: 14px;
        line-height: 1.7;
    }

    .health-faq-link {
        margin: 0 16px 20px;
        font-size: 14px;
    }

}


@media(max-width:480px) {

    .health-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .health-hero-content h1 {
        font-size: 34px;
    }

    .health-feature-content h2,
    .health-section-heading h2 {
        font-size: 28px;
    }

    .health-hero-image img,
    .health-feature-image img {
        height: 260px;
    }

    .health-service-image {
        height: 200px;
    }

    .health-process-cta h3 {
        font-size: 23px;
    }

    .health-final-cta-content h2 {
        font-size: 27px;
    }

}


@media(prefers-reduced-motion:reduce) {

    .health-btn,
    .health-service-card,
    .health-service-image img,
    .health-process-card,
    .health-benefit-card,
    .health-comprehensive-card,
    .health-faq-answer {
        transition: none;
    }

}


@media(max-width:992px) {

    .blog-wrapper {

        grid-template-columns: 1fr;

    }

    .blog-right {

        position: relative;

        top: 0;

    }

}


@media(max-width:768px) {

    .blog-hero {

        padding: 60px 20px;

    }

    .blog-hero h1 {

        font-size: 36px;

        line-height: 46px;

    }

    .blog-hero p {

        font-size: 16px;

        line-height: 28px;

    }

    .blog-page {

        padding: 40px 0;

    }

    .blog-grid {

        grid-template-columns: 1fr;

        gap: 22px;

    }

    .blog-content {

        padding: 22px;

    }

    .blog-content h3 {

        font-size: 22px;

        line-height: 30px;

    }

    .blog-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

    .read-btn {

        width: 100%;

        text-align: center;

    }

    .sidebar-box {

        padding: 22px;

    }

    .latest-post a {

        flex-direction: column;

        align-items: flex-start;

    }

    .latest-post img {

        width: 100%;

        height: 180px;

    }

}


@media(max-width:480px) {

    .blog-hero h1 {

        font-size: 30px;

    }

    .blog-hero p {

        font-size: 15px;

    }

    .blog-content {

        padding: 18px;

    }

    .blog-content h3 {

        font-size: 20px;

    }

    .sidebar-box h3 {

        font-size: 20px;

    }

}


@media(max-width:992px) {

    .details-wrapper {

        grid-template-columns: 1fr;

    }

    .details-right {

        position: relative;

        top: 0;

    }

}


@media(max-width:768px) {

    .blog-title {

        font-size: 30px;

        line-height: 42px;

    }

    .blog-info {

        gap: 15px;

        font-size: 14px;

    }

    .details-left {

        padding: 20px;

    }

    .share-buttons {

        flex-direction: column;

    }

    .share-buttons a {

        text-align: center;

    }

    .latest-post {

        flex-direction: column;

    }

    .latest-post img {

        width: 100%;

        height: 180px;

    }

    .blog-content-area {

        font-size: 16px;

        line-height: 30px;

    }

    .blog-content-area h2 {

        font-size: 28px;

    }

    .blog-content-area h3 {

        font-size: 24px;

    }

}


@media(max-width:480px) {

    .blog-details {

        padding: 40px 0;

    }

    .blog-title {

        font-size: 24px;

        line-height: 34px;

    }

    .blog-summary {

        padding: 18px;

    }

    .blog-summary p {

        font-size: 16px;

        line-height: 28px;

    }

    .details-left {

        padding: 15px;

    }

}


@media(max-width:992px) {

    .related-grid {

        grid-template-columns: 1fr 1fr;

    }

    .author-box {

        flex-direction: column;

        text-align: center;

    }

}


@media(max-width:768px) {

    .article-stats {

        flex-direction: column;

    }

    .toc {

        padding: 18px;

    }

    .author-box {

        padding: 25px;

    }

    .author-box h3 {

        font-size: 24px;

    }

    .related-grid {

        grid-template-columns: 1fr;

    }

    .related-card img {

        height: 220px;

    }

}


@media(max-width:480px) {

    .author-icon {

        width: 70px;

        height: 70px;

        font-size: 34px;

    }

    .related-blogs h2 {

        font-size: 28px;

    }

    .toc h3 {

        font-size: 20px;

    }

}


@media(max-width:768px) {

    .blog-navigation {

        flex-direction: column;

    }

}


@media(max-width:1200px) {

    .details-wrapper {

        grid-template-columns: 1fr;

    }

    .details-right {

        position: relative;

        top: 0;

    }

}


@media(max-width:992px) {

    .related-grid {

        grid-template-columns: 1fr 1fr;

    }

    .article-stats {

        grid-template-columns: repeat(2, 1fr);

    }

    .author-box {

        flex-direction: column;

        text-align: center;

    }

}


@media(max-width:768px) {

    .blog-title {

        font-size: 30px;

        line-height: 42px;

    }

    .blog-info {

        gap: 15px;

    }

    .article-stats {

        grid-template-columns: 1fr;

    }

    .share-buttons {

        flex-direction: column;

    }

    .share-buttons a,
    .copy-link {

        width: 100%;

        text-align: center;

    }

    .related-grid {

        grid-template-columns: 1fr;

    }

    .blog-navigation {

        flex-direction: column;

    }

    .details-left {

        padding: 22px;

    }

    .details-right {

        margin-top: 35px;

    }

}


@media(max-width:480px) {

    .blog-title {

        font-size: 26px;

        line-height: 36px;

    }

    .blog-summary {

        padding: 18px;

    }

    .author-box {

        padding: 25px;

    }

    .author-icon {

        width: 70px;

        height: 70px;

        font-size: 34px;

    }

    .related-card img {

        height: 180px;

    }

    .share-box {

        padding: 20px;

    }

}


@media (min-width:992px) {
    #universal-header .navbar {
        max-width: 1500px !important;
        padding: 0 54px !important;
        display: grid !important;
        grid-template-columns: 250px 1fr !important;
        column-gap: 22px !important
    }

    #universal-header .logo-link {
        width: 250px !important;
        flex: none !important;
        justify-self: start !important
    }

    #universal-header .nav-links {
        justify-self: center !important;
        margin: 0 !important
    }

    #universal-header .get-in-touch,
    .get-in-touch-btn,
    #universal-header .header-cta,
    #universal-header .contact-btn {
        justify-self: end !important
    }
}


@media(max-width:1024px) {
    .universal-footer .footer-links-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 36px !important;
    }
}


@media(max-width:600px) {
    .universal-footer .footer-logo {
        height: 68px !important
    }

    .universal-footer .footer-links-row {
        grid-template-columns: 1fr !important
    }

    .alliance-marquee-track {
        gap: 18px !important;
        padding-right: 18px !important
    }

    .alliance-card-node {
        flex-basis: 190px !important
    }

    .why-list {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


@media (min-width: 992px) {
    #universal-header .navbar {
        align-items: center !important;
    }

    #universal-header .nav-links {
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        transform: translateY(-3px) !important;
    }

    #universal-header .nav-links>li {
        display: flex !important;
        align-items: center !important;
    }

    #universal-header .nav-links>li>a {
        display: flex !important;
        align-items: center !important;
    }

    #universal-header .get-in-touch,
    #universal-header .get-in-touch-btn,
    #universal-header .header-cta,
    #universal-header .contact-btn {
        align-self: center !important;
        transform: translateY(-3px) !important;
    }
}


@media(max-width:1100px) { 
    .universal-footer .footer-links-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        row-gap: 40px !important;
    }

    .universal-footer .footer-office-card {
        min-width: 100%;
        grid-template-columns: 1fr;
    }
}


@media(max-width:768px) {
    .universal-footer {
        padding: 40px 20px 18px !important
    }

    .universal-footer .footer-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 26px
    }

    .universal-footer .footer-brand {
        flex: 1 1 auto;
        max-width: 100%
    }

    .universal-footer .footer-links-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important
    }

    .universal-footer .footer-office-card {
        padding: 20px
    }
}


@media(max-width:480px) {
    .universal-footer .footer-links-row {
        grid-template-columns: 1fr !important
    }

    .universal-footer .footer-office-map {
        min-height: 200px
    }

    .universal-footer .footer-office-map iframe {
        min-height: 200px
    }
}


@media (max-width: 900px) {
    .auto-hero {
        padding: 50px 0;
    }

    .auto-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .auto-hero-content {
        text-align: center;
    }

    .auto-hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .auto-hero-buttons,
    .auto-mini-features {
        justify-content: center;
    }

    .auto-hero-image {
        height: 460px;
    }

    .auto-floating-card {
        left: 20px;
    }
}


@media (max-width: 600px) {
    .auto-container {
        width: min(100% - 28px, 1180px);
    }

    .auto-hero {
        padding: 45px 0;
    }

    .auto-hero h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .auto-hero-text {
        font-size: 15px;
        line-height: 1.7;
    }

    .auto-hero-buttons {
        flex-direction: column;
    }

    .auto-btn {
        width: 100%;
    }

    .auto-mini-features {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .auto-hero-image {
        height: 380px;
        border-radius: 18px;
    }

    .auto-floating-card {
        left: 15px;
        right: 15px;
        bottom: 15px;
        width: auto;
    }
}


@media (max-width: 1000px) {
    .auto-feature-service {
        gap: 40px;
    }

    .auto-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 800px) {
    .auto-services {
        padding: 50px 0;
    }

    .auto-feature-service {
        grid-template-columns: 1fr;
    }

    .auto-feature-image {
        height: 400px;
    }

    .auto-feature-content {
        text-align: center;
    }

    .auto-feature-list {
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
}


@media (max-width: 600px) {
    .auto-services {
        padding: 55px 0;
    }

    .auto-section-head {
        margin-bottom: 38px;
    }

    .auto-section-head h2 {
        font-size: 30px;
    }

    .auto-feature-image {
        height: 300px;
        border-radius: 16px;
    }

    .auto-feature-content h3 {
        font-size: 28px;
    }

    .auto-feature-list {
        grid-template-columns: 1fr;
    }

    .auto-service-grid {
        grid-template-columns: 1fr;
    }

    .auto-service-card {
        min-height: auto;
        padding: 28px 24px;
    }
}


@media (max-width: 1000px) {
    .auto-offer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 700px) {
    .auto-offer-section {
        padding: 50px 0;
    }

    .auto-offer-heading {
        margin-bottom: 38px;
    }

    .auto-offer-heading h2 {
        font-size: 30px;
    }

    .auto-offer-grid {
        grid-template-columns: 1fr;
    }

    .auto-offer-image {
        height: 220px;
    }

    .auto-offer-cta {
        margin-top: 40px;
        padding: 32px 22px;
        flex-direction: column;
        align-items: flex-start;
    }

    .auto-offer-cta h3 {
        font-size: 24px;
    }
}


@media (max-width: 450px) {
    .auto-offer-image {
        height: 200px;
    }

    .auto-offer-content {
        padding: 24px 20px;
    }
}


@media (max-width: 900px) {

    .auto-why-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .auto-stat-item:nth-child(2)::after {
        display: none;
    }
}


@media (max-width: 700px) {

    .auto-why-section {
        padding: 50px 0;
    }

    .auto-why-heading {
        margin-bottom: 38px;
    }

    .auto-why-heading h2 {
        font-size: 30px;
    }

    .auto-why-grid {
        grid-template-columns: 1fr;
    }

    .auto-why-card {
        padding: 30px 24px;
    }

    .auto-why-bottom {
        margin-top: 40px;
        padding: 40px 25px;
    }

    .auto-why-bottom h3 {
        font-size: 27px;
    }
}


@media (max-width: 500px) {

    .auto-why-stats {
        grid-template-columns: 1fr 1fr;
        padding: 35px 15px;
    }

    .auto-stat-number {
        font-size: 30px;
    }

    .auto-stat-text {
        font-size: 12px;
    }
}


@media (max-width: 900px) {

    .auto-faq-section {
        padding: 50px 0;
    }

    .auto-final-cta {
        padding: 50px 0;
    }

}


@media (max-width: 700px) {

    .auto-faq-section {
        padding: 50px 0;
    }

    .auto-faq-heading {
        margin-bottom: 35px;
    }

    .auto-faq-heading h2 {
        font-size: 30px;
    }

    .auto-faq-heading p {
        font-size: 15px;
    }

    .auto-faq-question {
        min-height: 65px;

        padding: 17px 16px;

        gap: 13px;

        font-size: 15px;
    }

    .auto-faq-plus {
        width: 34px;
        height: 34px;
        min-width: 34px !important;

        font-size: 20px;
    }

    .auto-faq-answer-inner {
        padding:
            0 16px 20px;

        font-size: 14px;
    }

    .auto-faq-help {
        padding: 28px 22px;

        flex-direction: column;
        align-items: flex-start;
    }

    .auto-faq-help-btn {
        width: 100%;
    }

    .auto-final-cta {
        padding: 55px 0;
    }

    .auto-final-box {
        padding: 50px 25px;

        border-radius: 18px;
    }

    .auto-final-content h2 {
        font-size: 30px;
    }

    .auto-final-content p {
        font-size: 15px;
    }

}


@media (max-width: 480px) {

    .auto-faq-help-content {
        align-items: flex-start;
    }

    .auto-faq-help-icon {
        width: 48px;
        height: 48px;
        min-width: 48px !important;

        font-size: 21px;
    }

    .auto-faq-help h3 {
        font-size: 19px;
    }

    .auto-final-box {
        padding: 42px 20px;
    }

    .auto-final-content h2 {
        font-size: 28px;
    }

    .auto-final-buttons {
        flex-direction: column;
    }

    .auto-final-primary,
    .auto-final-secondary {
        width: 100%;
    }

}


@media (max-width: 1024px) {

    .footer-locations,
    .footer-links-row {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .footer-locations,
    .footer-links-row {
        grid-template-columns: 1fr;
    }

    .footer-top-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media(max-width:991px) {
    .bf-hero-grid {
        grid-template-columns: 1fr;
    }

    .bf-hero-content h1 {
        font-size: 38px;
    }

    .bf-hero-image {
        height: 480px;
    }

    .bf-partner-list {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media(max-width:767px) {
    .bf-hero {
        padding: 30px 20px 40px;
    }

    .bf-hero-grid {
        gap: 30px;
    }

    .bf-hero-content {
        padding: 10px 0;
    }

    .bf-hero-content h1 {
        font-size: 30px;
        margin-bottom: 22px;
    }

    .bf-title-line {
        margin-bottom: 22px;
    }

    .bf-hero-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .bf-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .bf-btn {
        width: 100%;
        min-width: 0;
    }

    .bf-hero-image {
        height: 320px;
    }

    .bf-partner-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 15px;
    }

    .bf-partner-name {
        font-size: 17px;
    }

    .bf-enquiry {
        display: none;
    }
}


@media(max-width:991px) {

    .bf-section-heading h2 {
        font-size: 34px;
    }

    .bf-solution-card {
        padding: 28px;
    }

}


@media(max-width:767px) {

    .bf-solutions {
        padding: 65px 20px;
    }

    .bf-section-heading {
        margin-bottom: 35px;
    }

    .bf-section-heading h2 {
        font-size: 28px;
    }

    .bf-section-heading p {
        font-size: 15px;
    }

    .bf-solutions-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bf-solution-card {
        padding: 25px 20px;
    }

    .bf-solution-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 20px;

        font-size: 27px;
    }

    .bf-solution-card h3 {
        font-size: 20px;
    }

    .bf-solution-card p {
        font-size: 15px;
        line-height: 1.7;
    }

    .bf-solutions-cta {
        margin-top: 30px;
    }

}


@media(max-width:1100px) {

    .bf-specialized-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bf-online-container {
        gap: 35px;
    }

    .bf-online-content h2 {
        font-size: 34px;
    }

}


@media(max-width:767px) {

    .bf-specialized {
        padding: 65px 20px;
    }

    .bf-specialized-heading h2 {
        font-size: 28px;
    }

    .bf-specialized-heading p {
        font-size: 15px;
    }

    .bf-specialized-grid {
        grid-template-columns: 1fr;
    }

    .bf-specialized-card {
        min-height: auto;
        padding: 28px 20px;
    }


    /* ONLINE BANKING */

    .bf-online {
        padding: 65px 20px;
    }

    .bf-online-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .bf-online-image {
        height: 320px;
    }

    .bf-online-content h2 {
        font-size: 28px;
    }

    .bf-online-content p {
        font-size: 15px;
    }

    .bf-online-boxes {
        grid-template-columns: 1fr;
    }

}


@media(max-width:1100px) {

    .bf-brokerage-grid,
    .bf-enterprise-grid {
        gap: 40px;
    }

    .bf-p4-title {
        font-size: 34px;
    }

    .bf-payment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bf-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bf-process-grid::before {
        display: none;
    }

}


@media(max-width:767px) {

    .bf-p4-section {
        padding: 65px 20px;
    }


    /* BROKERAGE */

    .bf-brokerage-grid {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .bf-brokerage-content {
        order: 1;
    }

    .bf-brokerage-image {
        order: 2;

        height: 300px;
    }


    /* TITLES */

    .bf-p4-title {
        font-size: 28px;
    }

    .bf-p4-text {
        font-size: 15px;
    }


    /* PAYMENT */

    .bf-p4-heading {
        margin-bottom: 35px;
    }

    .bf-payment-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bf-payment-card {
        padding: 27px 21px;
    }


    /* ENTERPRISE */

    .bf-enterprise-grid {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .bf-enterprise-image {
        order: 2;

        height: 300px;
    }

    .bf-enterprise-content {
        order: 1;
    }

    .bf-enterprise-features {
        grid-template-columns: 1fr;
    }


    /* PROCESS */

    .bf-process-grid {
        grid-template-columns: 1fr;
    }

    .bf-process-content {
        min-height: auto;
    }

}


@media(max-width:1000px) {

    .bf-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media(max-width:767px) {

    .bf-why,
    .bf-final-cta,
    .bf-faq {
        padding: 65px 20px;
    }

    .bf-why-heading h2,
    .bf-faq-heading h2 {
        font-size: 28px;
    }

    .bf-why-heading p,
    .bf-faq-heading p {
        font-size: 15px;
    }

    .bf-why-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bf-why-card {
        padding: 27px 21px;
    }


    /* CTA */

    .bf-final-cta-box {
        display: block;
        padding: 42px 24px;
        text-align: center;
        border-radius: 15px;
    }

    .bf-final-cta-content h2 {
        font-size: 28px;
    }

    .bf-final-cta-content p {
        font-size: 15px;
    }

    .bf-final-cta-action {
        margin-top: 28px;
    }

    .bf-final-cta-btn {
        width: 100%;
    }


    /* FAQ */

    .bf-faq-heading {
        margin-bottom: 35px;
    }

    .bf-faq-question {
        min-height: 68px;
        padding: 17px 16px;
        gap: 14px;
        font-size: 15px;
    }

    .bf-faq-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 20px;
    }

    .bf-faq-answer-inner {
        padding: 0 16px 20px;
    }

    .bf-faq-answer p {
        font-size: 14px;
    }

}


@media (max-width: 1100px) {
    .cp-container {
        padding: 0 25px;
    }

    .cp-hero-grid,
    .cp-intro-grid {
        gap: 40px;
    }

    .cp-hero-image-box {
        height: 480px;
    }

    .cp-intro-image {
        height: 450px;
    }

    .cp-floating-card {
        left: 20px;
    }
}


@media (max-width: 850px) {
    .cp-hero {
        padding: 55px 0;
    }

    .cp-hero-grid,
    .cp-intro-grid {
        grid-template-columns: 1fr;
    }

    .cp-hero-content {
        text-align: center;
    }

    .cp-hero-title,
    .cp-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .cp-hero-line {
        margin-left: auto;
        margin-right: auto;
    }

    .cp-hero-buttons {
        justify-content: center;
    }

    .cp-hero-image-box {
        height: 500px;
    }

    .cp-intro {
        padding: 50px 0;
    }

    .cp-intro-content {
        text-align: center;
    }

    .cp-feature-item {
        text-align: left;
    }

    .cp-intro-content .cp-btn {
        margin: 0 auto;
    }
}


@media (max-width: 600px) {
    .cp-container {
        padding: 0 16px;
        margin-top: 106px;
        padding: 0 16px;
        height: 893px;
    }

    .cp-hero {
        padding: 40px 0 55px;
    }

    .cp-badge {
        font-size: 12px;
    }

    .cp-hero-title {
        font-size: 36px;
        letter-spacing: -0.8px;
    }

    .cp-hero-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .cp-hero-buttons {
        flex-direction: column;
    }

    .cp-btn {
        width: 100%;
    }

    .cp-hero-image-box {
        height: 350px;
        border-radius: 16px;
    }

    .cp-floating-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }

    .cp-intro {
        padding: 55px 0;
    }

    .cp-intro-image {
        height: 330px;
        border-radius: 16px;
    }

    .cp-section-title {
        font-size: 30px;
    }

    .cp-intro-content p {
        font-size: 16px;
    }

    .cp-feature-list {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 1000px) {
    .cp-services-box {
        padding: 55px 40px;
    }

    .cp-feature-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-info-card:last-child {
        grid-column: 1 / -1;
        max-width: 550px;
        width: 100%;
        margin: 0 auto;
    }
}


@media (max-width: 768px) {
    .cp-services-banner {
        padding: 10px 0 60px;
    }

    .cp-services-box {
        padding: 45px 25px;
        border-radius: 16px;
    }

    .cp-services-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .cp-service-list-item {
        font-size: 16px;
    }

    .cp-features-section {
        padding-bottom: 65px;
    }

    .cp-feature-cards {
        grid-template-columns: 1fr;
    }

    .cp-info-card,
    .cp-info-card:last-child {
        grid-column: auto;
        max-width: none;
        min-height: auto;
    }
}


@media (max-width: 480px) {
    .cp-services-box {
        padding: 38px 20px;
    }

    .cp-services-title {
        font-size: 27px;
    }

    .cp-services-button a {
        width: 100%;
    }

    .cp-info-card {
        padding: 35px 22px;
    }

    .cp-info-card h3 {
        font-size: 21px;
    }
}


@media (max-width: 1050px) {
    .cp-industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-industry-image {
        height: 250px;
    }
}


@media (max-width: 768px) {
    .cp-industries {
        padding: 50px 0;
    }

    .cp-industries-heading {
        margin-bottom: 35px;
    }

    .cp-industries-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .cp-industry-image {
        height: 300px;
    }

    .cp-industries-cta {
        flex-direction: column;
        text-align: center;
        padding: 30px 25px;
    }
}


@media (max-width: 480px) {
    .cp-industries {
        padding: 55px 0;
    }

    .cp-industries-heading h2 {
        font-size: 29px;
    }

    .cp-industries-heading p {
        font-size: 16px;
    }

    .cp-industry-image {
        height: 220px;
    }

    .cp-industry-content {
        padding: 24px 20px;
    }

    .cp-industry-content h3 {
        font-size: 21px;
    }

    .cp-industries-cta .cp-btn {
        width: 100%;
    }
}


@media (max-width: 1050px) {
    .cp-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-tech-banner {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}


@media (max-width: 768px) {

    .cp-why-section,
    .cp-process-section {
        padding: 50px 0;
    }

    .cp-why-grid,
    .cp-process-grid {
        grid-template-columns: 1fr;
    }

    .cp-tech-banner {
        padding: 35px 25px;
    }
}


@media (max-width: 480px) {
    .cp-section-head h2 {
        font-size: 29px;
    }

    .cp-section-head p {
        font-size: 15.5px;
    }

    .cp-why-card {
        padding: 28px 22px;
    }

    .cp-process-card {
        padding: 30px 22px;
    }

    .cp-tech-banner {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .cp-tech-list {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 768px) {

    .cp-final-cta {
        padding: 50px 0;
    }


    .cp-final-cta-box {
        padding:
            50px 28px;

        border-radius: 18px;
    }


    .cp-final-cta p {
        font-size: 16px;
    }


    .cp-faq-section {
        padding: 50px 0;
    }

}


@media (max-width: 480px) {

    .cp-final-cta {
        padding: 50px 0;
    }


    .cp-final-cta-box {
        padding:
            40px 20px;

        border-radius: 15px;
    }


    .cp-final-cta h2 {
        font-size: 29px;
    }


    .cp-final-cta p {
        font-size: 15px;
    }


    .cp-final-cta-btn {
        width: 100%;
    }


    .cp-faq-container {
        padding: 0 16px;
    }


    .cp-faq-heading {
        margin-bottom: 35px;
    }


    .cp-faq-heading h2 {
        font-size: 29px;
    }


    .cp-faq-heading p {
        font-size: 15px;
    }


    .cp-faq-question {
        min-height: 68px;

        padding:
            17px 16px;

        gap: 14px;

        font-size: 15px;
    }


    .cp-faq-icon {
        min-width: 34px;

        height: 34px;

        min-width: 34px;

        font-size: 20px;
    }


    .cp-faq-answer-inner {
        padding:
            0 16px 20px;
    }


    .cp-faq-answer p {
        font-size: 14.5px;
    }

}


@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    img,
    video,
    svg {
        max-width: 100%
    }

    h1,
    h2,
    h3,
    h4,
    p {
        overflow-wrap: anywhere;
        word-break: normal
    }
}


@media (max-width: 992px) {

    .education-hero {
        padding: 60px 5%;
    }

    .education-hero-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .education-hero-content {
        max-width: 100%;
    }

    .education-hero h1 {
        font-size: 42px;
    }

    .education-hero-image img {
        height: 480px;
    }

    .education-experience-box {
        left: 20px;
    }
}


@media (max-width: 600px) {

    .education-hero {
        padding: 45px 20px;
    }

    .education-hero h1 {
        font-size: 34px;
    }

    .education-hero p {
        font-size: 16px;
        line-height: 1.7;
    }

    .education-hero-buttons {
        flex-direction: column;
    }

    .education-btn {
        width: 100%;
    }

    .education-hero-image img {
        height: 360px;
        border-radius: 14px;
    }

    .education-experience-box {
        position: relative;
        left: auto;
        bottom: auto;

        margin-top: -35px;
        margin-left: 15px;
        margin-right: 15px;
    }

}


@media (max-width: 1100px) {

    .education-services-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 992px) {

    .education-intro {

        padding: 70px 5%;

    }

    .education-intro-container {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .education-intro-image img {

        height: 450px;

    }

    .education-intro-content h2 {

        font-size: 36px;

    }

}


@media (max-width: 700px) {

    .education-services {

        padding: 65px 20px;

    }

    .education-services-grid {

        grid-template-columns: 1fr;

    }

    .education-section-heading h2 {

        font-size: 32px;

    }

}


@media (max-width: 600px) {

    .education-intro {

        padding: 60px 20px;

    }

    .education-intro-image img {

        height: 320px;

    }

    .education-intro-content h2 {

        font-size: 30px;

    }

    .education-intro-content p {

        font-size: 16px;

    }

    .education-service-card {

        padding: 30px 25px;

    }

}


@media(max-width:1100px) {

    .edu-work-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media(max-width:992px) {

    .edu-detail-container,
    .edu-satisfaction-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .edu-detail-content {
        max-width: 100%;
    }

    .edu-detail-image img,
    .edu-satisfaction-image img {
        height: 450px;
    }

    .edu-detail-content h2,
    .edu-satisfaction-content h2 {
        font-size: 37px;
    }

}


@media(max-width:700px) {

    .edu-detail-section,
    .edu-work-section,
    .edu-satisfaction {
        padding: 70px 20px;
    }

    .edu-detail-container,
    .edu-satisfaction-container {
        gap: 35px;
    }

    .edu-detail-content h2,
    .edu-satisfaction-content h2,
    .edu-work-heading h2 {
        font-size: 30px;
    }

    .edu-detail-content p,
    .edu-satisfaction-content p {
        font-size: 15px;
    }

    .edu-detail-image img,
    .edu-satisfaction-image img {
        height: 320px;
        border-radius: 12px;
    }

    .edu-work-grid {
        grid-template-columns: 1fr;
    }

    .edu-work-card {
        min-height: auto;
    }

    .edu-stats {
        grid-template-columns: 1fr;
    }

    .edu-rating-box {
        position: relative;

        right: auto;
        bottom: auto;

        margin: -30px 15px 0;
    }

    .edu-detail-btn {
        width: 100%;
    }

}


@media(max-width:1100px) {

    .edu-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .edu-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .edu-process-grid::before {
        display: none;
    }

}


@media(max-width:700px) {

    .edu-innovative-section,
    .edu-process-section,
    .edu-final-cta {
        padding: 70px 20px;
    }

    .edu-innovative-heading h2,
    .edu-process-heading h2 {
        font-size: 30px;
    }

    .edu-solutions-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .edu-solution-card {
        padding: 30px 22px;
    }

    .edu-process-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .edu-process-number {
        width: 72px;
        height: 72px;
        font-size: 19px;
    }

    .edu-process-content {
        min-height: auto;
    }

    .edu-final-cta-container {
        display: block;
        padding: 45px 25px;
        text-align: center;
        border-radius: 15px;
    }

    .edu-final-cta-content h2 {
        font-size: 29px;
    }

    .edu-final-cta-content p {
        font-size: 15px;
    }

    .edu-final-cta-action {
        margin-top: 30px;
    }

    .edu-final-cta-btn {
        width: 100%;
    }

}


@media(max-width:767px) {

    /* HERO */

    .education-hero {
        padding-top: 50px;
    }

    .education-hero-container {
        grid-template-columns: 1fr;
    }

    .education-hero h1 {
        font-size: 34px;
        line-height: 1.2;
    }


    /* INTRO */

    .education-intro-container {
        display: flex;
        flex-direction: column;
    }

    .education-intro-image {
        order: 2;
    }

    .education-intro-content {
        order: 1;
    }


    /* SERVICES */

    .education-services-grid {
        grid-template-columns: 1fr;
    }


    /* DETAIL SECTIONS */

    .edu-detail-container {
        display: flex;
        flex-direction: column;
    }

    .edu-detail-content {
        order: 1;
    }

    .edu-detail-image {
        order: 2;
    }


    /* IMAGES */

    .education-hero-image img,
    .education-intro-image img,
    .edu-detail-image img,
    .edu-satisfaction-image img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }


    /* WORK */

    .edu-work-grid {
        grid-template-columns: 1fr;
    }


    /* SOLUTIONS */

    .edu-solutions-grid {
        grid-template-columns: 1fr;
    }


    /* PROCESS */

    .edu-process-grid {
        grid-template-columns: 1fr;
    }


    /* SATISFACTION */

    .edu-satisfaction-container {
        grid-template-columns: 1fr;
    }


    /* FAQ */

    .edu-faq-section {
        padding: 70px 20px;
    }

    .edu-faq-heading {
        margin-bottom: 40px;
    }

    .edu-faq-heading h2 {
        font-size: 30px;
    }

    .edu-faq-heading p {
        font-size: 15px;
    }

    .edu-faq-item {
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .edu-faq-question {
        min-height: 68px;

        padding: 17px 16px;

        gap: 15px;

        font-size: 15px;
        line-height: 1.45;
    }

    .edu-faq-icon {
        width: 34px;
        height: 34px;

        min-width: 34px;

        font-size: 21px;
    }

    .edu-faq-answer-inner {
        padding:
            0 16px 20px;
    }

    .edu-faq-answer p {
        font-size: 14px;
        line-height: 1.7;
    }

}


@media(max-width:480px) {

    .education-hero h1 {
        font-size: 31px;
    }

    .education-section-heading h2,
    .edu-detail-content h2,
    .edu-work-heading h2,
    .edu-satisfaction-content h2,
    .edu-innovative-heading h2,
    .edu-process-heading h2,
    .edu-faq-heading h2 {
        font-size: 28px;
    }

    .education-hero-image img,
    .education-intro-image img,
    .edu-detail-image img,
    .edu-satisfaction-image img {
        height: 260px;
    }

}


@media (max-width:767px) {
    .work-hero {
        padding: 50px 0 !important;
        min-height: auto !important
    }

    .work-hero h1 {
        font-size: clamp(2.3rem, 11vw, 3.4rem) !important;
        line-height: 1.08 !important
    }

    .work-hero p {
        font-size: 1rem !important
    }

    .principles-section,
    .metrics-section,
    .onboarding-section,
    .tech-stack-section,
    .partners-section,
    .consulting-section,
    .post-launch {
        padding: 70px 0 !important
    }

    .section-title,
    .principles-header h2,
    .onboarding-section h2,
    .partners-header h2 {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
        line-height: 1.12 !important
    }

    .principles-grid,
    .metrics-grid,
    .onboard-grid,
    .tech-grid,
    .consulting-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important
    }

    .principle-item {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 16px !important
    }

    .principle-text h4 {
        font-size: 1.35rem !important
    }

    .principle-text p {
        font-size: 15px !important
    }

    .metric-card-bg,
    .onboard-card,
    .tech-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        padding: 28px 22px !important
    }

    .metric-card-bg {
        min-height: 300px !important
    }

    .metric-card-bg h2 {
        font-size: 3rem !important
    }

    .partner-interactive {
        display: block !important
    }

    .partner-list,
    .partner-img-box {
        width: 100% !important;
        max-width: 100% !important
    }

    .partner-img-box {
        margin-top: 28px !important;
        height: 300px !important
    }

    .launch-banner {
        padding: 45px 22px !important
    }

    .launch-banner h2 {
        font-size: 2rem !important
    }
}


@media(max-width:1024px) {
    .ow-grid {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .ow-copy-wrap {
        order: -1;
        text-align: center
    }

    .ow-copy p.ow-desc {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto
    }
}


@media(max-width:600px) {
    .ow-section {
        padding: 60px 0
    }

    .ow-inner {
        padding: 0 20px
    }

    .ow-slide-overlay h3 {
        font-size: 19px
    }

    .ow-copy h2 {
        font-size: 26px
    }
}


@media(max-width:600px) {
    .orion-ai-overlay {
        padding: 0
    }

    .orion-ai-chat {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0
    }
}


@media (max-width: 991px) {
    .about-hero-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .about-hero-text p {
        max-width: 100% !important;
    }

    .btn-solid {
        width: 100%;
        text-align: center;
        display: block;
    }

    .story-grid {
        grid-template-columns: 1fr !important;
    }

    .story-img {
        height: 280px !important;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .vm-grid {
        grid-template-columns: 1fr !important;
    }

    .why-us-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ai-grid {
        grid-template-columns: 1fr !important;
    }

    .ai-features {
        grid-template-columns: 1fr !important;
    }

    .reviews-grid {
        grid-template-columns: 1fr !important;
    }

    .comp-layout {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .strategy-card {
        flex-direction: column !important;
        text-align: center;
        padding: 30px 20px !important;
        gap: 20px;
    }

    .btn-white {
        width: 100% !important;
    }

    .mkt-box {
        flex-direction: column !important;
    }

    .mkt-left {
        padding: 40px 25px !important;
    }

    .mkt-right {
        min-height: 220px !important;
    }

    .connect-box {
        padding: 30px 20px !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .input-group.full-width {
        grid-column: span 1 !important;
    }

    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .footer-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px;
    }

    .disruptors-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }

    .exp-grid {
        grid-template-columns: 1fr !important;
    }
}


@media (max-width: 768px) {
    .container {
        padding: 0 20px !important;
    }

    .about-hero {
        padding: 50px 0 !important;
    }

    .about-hero-text h1 {
        font-size: 2.2rem !important;
    }

    .section-title {
        font-size: 2rem !important;
    }

    .story-content h2 {
        font-size: 2rem !important;
    }

    .values-grid {
        grid-template-columns: 1fr !important;
    }

    .why-us-grid {
        grid-template-columns: 1fr !important;
    }

    .metrics-grid {
        grid-template-columns: 1fr !important;
    }

    .metric-card-bg {
        min-height: 260px !important;
    }

    .comp-left h2 {
        font-size: 2rem !important;
    }

    .mkt-left h2 {
        font-size: 2rem !important;
    }

    .connect-box h2 {
        font-size: 1.8rem !important;
    }

    .footer-links-grid {
        grid-template-columns: 1fr !important;
    }

    .disruptors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .vm-card {
        padding: 40px 20px !important;
    }

    .clients-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }
}


@media (max-width: 480px) {
    .about-hero-text h1 {
        font-size: 1.8rem !important;
    }

    .section-title {
        font-size: 1.6rem !important;
    }

    .disruptors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .clients-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ai-logo {
        font-size: 1.8rem !important;
    }
}


@media (max-width: 992px) {

    .media-hero {
        padding: 55px 5%;
    }

    .media-hero-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .media-hero-content {
        max-width: 100%;
    }

    .media-hero-content h1 {
        font-size: 40px;
    }

    .media-hero-image img {
        height: 450px;
    }

    .media-experience-box {
        left: 20px;
    }
}


@media (max-width: 600px) {

    .media-hero {
        padding: 40px 20px 55px;
    }

    .media-hero-container {
        gap: 35px;
    }

    .media-tag {
        font-size: 12px;
        padding: 8px 14px;
    }

    .media-hero-content h1 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .media-hero-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .media-hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .media-btn {
        width: 100%;
        min-width: 0;
    }

    .media-hero-image img {
        height: 330px;
        border-radius: 12px;
    }

    .media-hero-image::before {
        display: none;
    }

    .media-experience-box {
        position: relative;
        left: auto;
        bottom: auto;
        margin: -30px 15px 0;
        padding: 15px 20px;
    }
}


@media (max-width: 1100px) {

    .media-solutions-container {
        grid-template-columns:
            1fr;

        gap: 50px;
    }

    .media-solutions-image img {
        height: 500px;
    }

    .media-image-badge {
        right: 20px;
    }

}


@media (max-width: 600px) {

    .media-partners {
        padding:
            25px 20px;
    }

    .media-partner-item strong {
        font-size: 17px;
    }


    /* SOLUTIONS */

    .media-solutions {
        padding:
            55px 20px;
    }

    .media-solutions-container {
        gap: 35px;
    }

    .media-solutions-image img {
        height: 350px;

        border-radius: 12px;
    }

    .media-image-badge {
        position: relative;

        right: auto;
        bottom: auto;

        margin:
            -25px 15px 0;

        text-align: center;
    }

    .media-solutions-content h2 {
        font-size: 30px;
    }

    .media-solutions-content>p {
        font-size: 15px;
    }

    .media-solution-features {
        grid-template-columns:
            1fr;
    }

    .media-solutions-btn {
        width: 100%;

        justify-content: center;
    }

}


@media (max-width: 1100px) {

    .media-services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .media-service-content p {
        min-height: 0;
    }

}


@media (max-width: 700px) {

    .media-services {
        padding:
            60px 20px;
    }

    .media-services-heading {
        margin-bottom: 40px;
    }

    .media-services-heading h2 {
        font-size: 30px;
    }

    .media-services-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .media-services-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .media-service-image {
        height: 230px;
    }

    .media-service-content {
        padding:
            30px 22px 25px;
    }

    .media-service-content h3 {
        min-height: auto;

        font-size: 20px;
    }

    .media-service-content p {
        min-height: auto;

        font-size: 15px;
    }

}


@media (max-width: 400px) {

    .media-service-image {
        height: 210px;
    }

    .media-services-heading h2 {
        font-size: 27px;
    }

}


@media (max-width: 1050px) {

    .media-why-container {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .media-why-content {

        max-width: 800px;

    }


    .media-why-image {

        max-width: 850px;

    }


    .media-why-image img {

        height: 500px;

    }


    .media-experience-box {

        left: 25px;

    }

}


@media (max-width: 700px) {

    .media-why-choose {

        padding:
            65px 20px;

    }


    .media-why-container {

        gap: 45px;

    }


    .media-why-content h2 {

        font-size: 30px;

    }


    .media-why-description {

        font-size: 15px;

    }


    .media-why-features {

        grid-template-columns: 1fr;

        gap: 22px;

    }


    .media-why-image img {

        height: 350px;

        border-radius: 12px;

    }


    .media-experience-box {

        left: 15px;

        bottom: 15px;

        width: 160px;

        padding: 18px;

    }


    .media-experience-box strong {

        font-size: 30px;

    }


    /* STATS */

    .media-stats {

        padding:
            45px 20px;

    }


    .media-stats-container {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 30px 0;

    }


    .media-stat-item {

        border-right: none;

    }


    .media-stat-item h3 {

        font-size: 32px;

    }


    /* CTA */

    .media-cta {

        padding:
            70px 20px;

    }


    .media-cta-content h2 {

        font-size: 31px;

    }


    .media-cta-content p {

        font-size: 15px;

    }


    .media-cta-buttons {

        flex-direction: column;

        width: 100%;

    }


    .media-cta-primary,
    .media-cta-secondary {

        width: 100%;

        max-width: 350px;

    }

}


@media (max-width: 400px) {

    .media-why-content h2 {

        font-size: 27px;

    }


    .media-why-image img {

        height: 300px;

    }


    .media-stat-item h3 {

        font-size: 28px;

    }


    .media-cta-content h2 {

        font-size: 27px;

    }

}


@media (max-width: 700px) {

    .media-faq {
        padding:
            65px 20px;
    }

    .media-faq-heading {
        margin-bottom: 38px;
    }

    .media-faq-heading h2 {
        font-size: 30px;
    }

    .media-faq-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .media-faq-item {
        margin-bottom: 12px;
    }

    .media-faq-question {
        min-height: 68px;

        padding:
            17px 16px;

        gap: 15px;

        font-size: 15px;
    }

    .media-faq-icon {
        width: 34px;
        height: 34px;

        min-width: 34px;

        font-size: 20px;
    }

    .media-faq-answer-inner {
        padding:
            0 16px 20px;
    }

    .media-faq-answer p {
        font-size: 14px;
        line-height: 1.7;
    }

}


@media (max-width: 400px) {

    .media-faq-heading h2 {
        font-size: 27px;
    }

}


@media (max-width: 900px) {
    .op-portfolio-showcase {
        padding: 2rem 1rem 4rem 1rem;
    }

    .op-portfolio-header h1 {
        font-size: 2.2rem;
    }

    .op-accordion-row {
        flex-direction: column;
        height: auto;
        gap: 1rem;
    }

    .op-accordion-row:not(.op-featured-row) {
        height: 900px;
    }

    .op-featured-row {
        height: 650px;
    }

    .op-overlap-row {
        margin-top: -60px;
        /* Restored negative margin for mobile overlap */
    }

    .op-panel-content {
        padding: 1.5rem 2rem;
        /* Ensures the text doesn't get squished on mobile */
    }

    .op-featured-row .op-panel-details {
        padding-bottom: 90px;
    }

    .op-panel-title {
        font-size: 1.8rem;
    }

    .op-panel-desc {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .op-tech-tags {
        margin-bottom: 1.5rem;
    }

    .op-accordion-panel {
        width: 100%;
        border-radius: 16px;
    }

    .op-panel-title-vertical {
        writing-mode: horizontal-tb;
        transform: none;
        bottom: auto;
        top: 50%;
        left: 1.5rem;
        transform: translateY(-50%);
        font-size: 1.25rem;
    }

    .op-accordion-panel:hover .op-panel-title-vertical {
        display: none;
    }

    .op-panel-details {
        transform: translateY(20px);
    }

    .op-accordion-panel:hover .op-panel-details {
        transform: translateY(0);
    }
}


@media (max-width: 900px) {
    .op-portfolio-showcase .op-panel-content {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .op-portfolio-showcase .op-panel-details {
        padding-left: 0 !important;
    }
}


@media (max-width: 992px) {
    .re-hero {
        padding: 60px 5%;
    }

    .re-hero-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .re-hero-content {
        max-width: 750px;
    }

    .re-hero-image {
        height: 500px;
    }

    .re-floating-card {
        left: 20px;
    }
}


@media (max-width: 600px) {
    .re-hero {
        padding: 45px 20px 55px;
    }

    .re-hero-container {
        gap: 35px;
    }

    .re-hero-tag {
        font-size: 12px;
    }

    .re-hero-title {
        font-size: 36px;
        letter-spacing: -0.7px;
    }

    .re-hero-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .re-hero-buttons {
        flex-direction: column;
    }

    .re-btn {
        width: 100%;
    }

    .re-hero-image {
        height: 350px;
        border-radius: 16px;
    }

    .re-hero-image-bg {
        display: none;
    }

    .re-floating-card {
        position: relative;
        left: auto;
        bottom: auto;
        max-width: 100%;
        margin: -30px 15px 0;
    }
}


@media (max-width: 992px) {
    .re-web-section {
        padding: 60px 5%;
    }

    .re-web-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .re-web-image {
        height: 480px;
    }

    .re-web-content {
        max-width: 100%;
    }
}


@media (max-width: 600px) {
    .re-web-section {
        padding: 55px 20px;
    }

    .re-web-container {
        gap: 35px;
    }

    .re-web-image {
        height: 320px;
        border-radius: 15px;
    }

    .re-web-badge {
        right: 12px;
        bottom: 12px;
        padding: 11px 14px;
        font-size: 13px;
    }

    .re-web-title {
        font-size: 32px;
    }

    .re-web-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .re-web-features {
        grid-template-columns: 1fr;
    }

    .re-web-btn {
        width: 100%;
    }
}


@media (max-width: 1100px) {
    .re-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 700px) {
    .re-features-section {
        padding: 55px 20px;
    }

    .re-features-heading {
        margin-bottom: 35px;
    }

    .re-features-title {
        font-size: 31px;
    }

    .re-features-description {
        font-size: 16px;
    }

    .re-features-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .re-feature-card {
        padding: 30px 24px;
    }
}


@media (max-width: 900px) {
    .re-services-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {
    .re-services-section {
        padding: 55px 20px;
    }

    .re-services-heading {
        margin-bottom: 35px;
    }

    .re-services-title {
        font-size: 30px;
    }

    .re-services-description {
        font-size: 16px;
    }

    .re-service-card {
        padding: 25px 20px;
        gap: 16px;
    }

    .re-service-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
    }

    .re-service-icon svg {
        width: 27px;
        height: 27px;
    }

    .re-service-content h3 {
        font-size: 19px;
    }

    .re-service-content p {
        font-size: 14px;
    }

    .re-services-btn {
        width: 100%;
    }
}


@media (max-width: 450px) {
    .re-service-card {
        flex-direction: column;
    }
}


@media (max-width: 992px) {

    .re-idx-grid,
    .re-app-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .re-app-image-wrap {
        order: -1;
    }

    .re-idx-image,
    .re-app-image {
        height: 500px;
    }

}


@media (max-width: 600px) {

    .re-part5-container {
        width: calc(100% - 40px);
    }

    .re-idx-section,
    .re-app-section {
        padding: 55px 0;
    }

    .re-idx-image,
    .re-app-image {
        height: 350px;

        border-radius: 16px;
    }

    .re-idx-floating {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .re-idx-features,
    .re-app-list {
        grid-template-columns: 1fr;
    }

    .re-part5-btn {
        width: 100%;
    }

    .re-final-cta {
        padding: 50px 0;
    }

    .re-final-cta-box {
        padding: 45px 20px;

        border-radius: 16px;
    }

    .re-final-cta-content h2 {
        font-size: 29px;
    }

    .re-final-cta-content p {
        font-size: 15px;
    }

    .re-final-cta-btn {
        width: 100%;
    }

    .re-faq-section {
        padding: 50px 0;
    }

    .re-faq-question {
        padding: 17px 15px;

        font-size: 15px;
    }

    .re-faq-answer-inner {
        padding:
            0 15px 20px;

        font-size: 14.5px;
    }

}


@media (max-width: 992px) {

    .retail-hero {
        padding: 50px 0;
    }

    .retail-hero-wrapper {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .retail-hero-content {
        max-width: 100%;
    }

    .retail-hero-image-main img {
        height: 480px;
    }

    .retail-floating-card {
        left: 20px;
    }
}


@media (max-width: 600px) {

    .retail-container {
        width: 90%;
    }

    .retail-hero {
        padding: 45px 0 55px;
    }

    .retail-hero h1 {
        font-size: 36px;
        letter-spacing: -0.5px;
    }

    .retail-hero-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .retail-hero-buttons {
        flex-direction: column;
    }

    .retail-btn {
        width: 100%;
    }

    .retail-hero-image-main {
        border-radius: 16px;
    }

    .retail-hero-image-main img {
        height: 350px;
    }

    .retail-floating-card {
        position: relative;
        left: auto;
        bottom: auto;
        margin: -30px 15px 0;
        z-index: 5;
    }

    .retail-hero-image::before {
        width: 80px;
        height: 80px;
        right: -10px;
        top: -10px;
    }
}


@media (max-width: 992px) {

    .retail-trade-wrapper {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .retail-feature-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .retail-trade-image img {
        height: 480px;
    }

}


@media (max-width: 600px) {

    .retail-trade-section,
    .retail-feature-section {
        padding: 50px 0;
    }

    .retail-trade-image {
        border-radius: 15px;
    }

    .retail-trade-image img {
        height: 330px;
    }

    .retail-trade-badge {
        left: 15px;
        bottom: 15px;

        padding: 11px 15px;
        font-size: 13px;
    }

    .retail-trade-content h2 {
        font-size: 32px;
    }

    .retail-trade-content p {
        font-size: 16px;
    }

    .retail-check-list {
        grid-template-columns: 1fr;
    }

    .retail-feature-grid {
        grid-template-columns: 1fr;
    }

    .retail-feature-card {
        padding: 30px 24px;
    }

}


@media (max-width: 992px) {

    .retail-strategy-grid {
        grid-template-columns: 1fr;
    }

    .retail-strategy-cta {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .retail-strategy-section {
        padding: 50px 0;
    }

    .retail-strategy-heading {
        margin-bottom: 40px;
    }

    .retail-strategy-heading h2 {
        font-size: 31px;
    }

    .retail-strategy-heading p {
        font-size: 16px;
    }

    .retail-strategy-card {
        flex-direction: column;

        padding: 28px 22px;

        gap: 20px;
    }

    .retail-strategy-icon {
        width: 62px;
        height: 62px;

        flex: 0 0 62px;

        font-size: 27px;
    }

    .retail-strategy-content h3 {
        font-size: 21px;
    }

    .retail-strategy-cta {
        margin-top: 40px;

        padding: 32px 24px;

        border-radius: 15px;
    }

    .retail-strategy-cta-button {
        width: 100%;
    }

}


@media (max-width: 992px) {

    .advanced-retail-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .advanced-retail-section {
        padding: 50px 0;
    }

    .advanced-retail-heading {
        margin-bottom: 40px;
    }

    .advanced-retail-heading h2 {
        font-size: 30px;
    }

    .advanced-retail-heading p {
        font-size: 16px;
    }

    .advanced-retail-card {
        padding: 28px 22px;
    }

    .advanced-retail-icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .advanced-retail-card h3 {
        font-size: 21px;
    }

    .advanced-retail-bottom {
        margin-top: 40px;
        padding: 35px 22px;
        border-radius: 15px;
    }

    .advanced-retail-btn {
        width: 100%;
    }

}


@media (max-width: 992px) {

    .retail-why-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .retail-why {
        padding: 50px 0;
    }

    .retail-why-heading {
        margin-bottom: 40px;
    }

    .retail-why-heading h2 {
        font-size: 30px;
    }

    .retail-why-heading p {
        font-size: 15px;
    }

    .retail-why-grid {
        grid-template-columns: 1fr;
    }

    .retail-why-card {
        padding: 27px 22px;
    }


    /* FAQ */

    .retail-faq {
        padding: 50px 0;
    }

    .retail-faq-container {
        width: 90%;
    }

    .retail-faq-heading {
        margin-bottom: 38px;
    }

    .retail-faq-heading h2 {
        font-size: 29px;
    }

    .retail-faq-heading p {
        font-size: 15px;
    }

    .retail-faq-question {
        min-height: 68px;

        padding: 17px 16px;

        gap: 15px;

        font-size: 15px;
    }

    .retail-faq-icon {
        width: 34px;
        height: 34px;

        min-width: 34px;

        font-size: 20px;
    }

    .retail-faq-answer-inner {
        padding: 0 16px 20px;
    }

    .retail-faq-answer p {
        font-size: 14px;
    }

}


@media (max-width: 1024px) {

    .security-hero,
    .security-track,
    .security-track-record,
    .track-record,
    .security-stats,
    .security-hero .container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .security-hero h1,
    .security-track h1,
    .security-track-record h1,
    .track-record h1 {
        font-size: clamp(28px, 5vw, 52px) !important;
        line-height: 1.05 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        margin-top: 0 !important;
        max-width: 100% !important;
    }

    .security-hero .stats,
    .security-track .stats,
    .security-track-record .stats,
    .track-record .stats,
    .security-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px 22px !important;
        width: 100% !important;
        align-items: start !important;
    }

    .security-hero .stat,
    .security-track .stat,
    .security-track-record .stat,
    .track-record .stat,
    .security-stats>* {
        min-width: 0 !important;
        width: auto !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }

    .security-hero .stat h2,
    .security-hero .stat .number,
    .security-track .stat h2,
    .security-track .stat .number,
    .security-track-record .stat h2,
    .security-track-record .stat .number,
    .track-record .stat h2,
    .track-record .stat .number,
    .security-stats h2,
    .security-stats .number {
        font-size: clamp(36px, 6vw, 58px) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        margin: 0 0 14px !important;
    }

    .security-hero .stat p,
    .security-track .stat p,
    .security-track-record .stat p,
    .track-record .stat p,
    .security-stats p {
        font-size: 16px !important;
        line-height: 1.45 !important;
        width: auto !important;
        max-width: 100% !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
}


@media (max-width: 600px) {

    .security-hero,
    .security-track,
    .security-track-record,
    .track-record {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .security-hero .stats,
    .security-track .stats,
    .security-track-record .stats,
    .track-record .stats,
    .security-stats {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    .security-hero .stat,
    .security-track .stat,
    .security-track-record .stat,
    .track-record .stat,
    .security-stats>* {
        text-align: left !important;
    }

    .security-hero h1,
    .security-track h1,
    .security-track-record h1,
    .track-record h1 {
        font-size: clamp(38px, 12vw, 56px) !important;
    }

    .security-hero .stat h2,
    .security-hero .stat .number,
    .security-track .stat h2,
    .security-track .stat .number,
    .security-track-record .stat h2,
    .security-track-record .stat .number,
    .track-record .stat h2,
    .track-record .stat .number,
    .security-stats h2,
    .security-stats .number {
        font-size: 42px !important;
    }

    /* Prevent decorative/absolute elements from covering stats on phones */
    .security-hero img,
    .security-track img,
    .security-track-record img,
    .track-record img {
        max-width: 100% !important;
        height: auto !important;
    }
}


@media (max-width:767px) {
    .security-hero {
        padding: 50px 0 !important;
        min-height: auto !important
    }

    .security-hero-content {
        max-width: 100% !important
    }

    .security-hero h1,
    .security-hero-content h1 {
        font-size: clamp(2.2rem, 10vw, 2rem) !important;
        line-height: 1.08 !important
    }

    .security-hero p {
        font-size: 1rem !important
    }

    .capabilities,
    .global-metrics,
    .security-pillars,
    .uphold-security,
    .track-record,
    .why-security,
    .validate-section,
    .ai-security,
    .connect-section {
        padding: 65px 0 !important
    }

    .cap-grid,
    .metrics-color-grid,
    .pillars-grid,
    .uphold-grid,
    .why-grid,
    .ai-grid,
    .tr-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important
    }

    .cap-card,
    .mc-card,
    .pillar-card,
    .why-item,
    .ai-card,
    .tr-stat {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 28px 22px !important
    }

    .mc-card h3,
    .mc-card h3[style] {
        font-size: clamp(2.5rem, 14vw, 4rem) !important
    }

    .mc-card p {
        font-size: 15px !important;
        line-height: 1.65 !important
    }

    .uphold-left,
    .acc-wrapper,
    .tr-content,
    .tr-image,
    .validate-text,
    .validate-img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important
    }

    .uphold-grid,
    .track-record .container,
    .tr-banner,
    .validate-banner {
        display: block !important
    }

    .acc-wrapper,
    .tr-image,
    .validate-img {
        margin-top: 28px !important
    }

    .acc-head {
        font-size: 1.2rem !important;
        padding: 20px 0 !important
    }

    .acc-content {
        font-size: 15px !important;
        line-height: 1.65 !important
    }

    .section-title,
    .cap-header,
    .global-metrics h2,
    .uphold-left h2,
    .tr-content h2,
    .validate-text h2 {
        font-size: clamp(2rem, 9vw, 2rem) !important;
        line-height: 1.12 !important
    }

    .tr-banner,
    .validate-banner {
        padding: 30px 22px !important
    }

    .tr-stats {
        margin-top: 25px !important
    }
}


@media (max-width: 991px) {

    .travel-hero {
        padding: 50px 0;
    }

    .travel-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .travel-hero-content {
        max-width: 100%;
    }

    .travel-image-main {
        height: 500px;
    }

    .travel-booking-card {
        left: 25px;
    }
}


@media (max-width: 600px) {

    .travel-container {
        width: min(100% - 30px, 1280px);
    }

    .travel-hero {
        padding: 45px 0;
    }

    .travel-hero-grid {
        gap: 35px;
    }

    .travel-small-title {
        font-size: 12px;
    }

    .travel-hero h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .travel-hero-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .travel-hero-buttons {
        flex-direction: column;
    }

    .travel-btn {
        width: 100%;
    }

    .travel-image-main {
        height: 390px;
        border-radius: 20px;
    }

    .travel-booking-card {
        width: calc(100% - 30px);
        left: 15px;
        bottom: 15px;
    }

    .travel-stats {
        gap: 22px;
    }

    .travel-stat {
        width: calc(50% - 12px);
    }
}


@media (max-width: 991px) {
    .travel-software-section {
        padding: 50px 0;
    }

    .travel-software-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .travel-software-image-main {
        height: 550px;
    }

    .travel-software-badge {
        right: 25px;
    }
}


@media (max-width: 600px) {
    .travel-software-section {
        padding: 55px 0;
    }

    .travel-section-heading {
        margin-bottom: 35px;
        text-align: left;
    }

    .travel-software-grid {
        gap: 35px;
    }

    .travel-software-image-main {
        height: 400px;
        border-radius: 18px;
    }

    .travel-software-badge {
        width: calc(100% - 30px);
        right: 15px;
        bottom: 15px;
    }

    .travel-software-content h2 {
        font-size: 32px;
    }

    .travel-software-content>p {
        font-size: 16px;
    }

    .travel-accordion-header {
        min-height: 60px;
        padding: 14px;
        font-size: 15px;
    }

    .travel-software-cta {
        width: 100%;
    }
}


@media (max-width: 991px) {

    .travel-website-section {
        padding: 50px 0;
    }

    .travel-website-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .travel-website-content {
        max-width: 100%;
    }

    .travel-website-image-main {
        height: 540px;
    }

    .travel-website-floating {
        left: 25px;
    }
}


@media (max-width: 600px) {

    .travel-website-section {
        padding: 55px 0;
    }

    .travel-website-grid {
        gap: 35px;
    }

    .travel-website-content h2 {
        font-size: 32px;
    }

    .travel-website-content>p {
        font-size: 16px;
    }

    .travel-website-features {
        grid-template-columns: 1fr;
    }

    .travel-website-accordion-header {
        min-height: 60px;
        padding: 14px;
        font-size: 15px;
    }

    .travel-website-btn {
        width: 100%;
    }

    .travel-website-image-main {
        height: 410px;
        border-radius: 18px;
    }

    .travel-website-floating {
        width: calc(100% - 30px);
        left: 15px;
        bottom: 15px;
    }
}


@media screen and (max-width: 991px) {

    .travel-part4-marketing {
        padding: 50px 0;
    }

    .travel-part4-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .travel-part4-heading h2 {
        font-size: 38px;
    }

    .travel-part4-cta {
        padding: 50px 0;
    }

    .travel-part4-cta-box {
        padding: 60px 35px;
    }

    .travel-part4-cta h2 {
        font-size: 40px;
    }

}


@media screen and (max-width: 767px) {

    .travel-part4-container {
        width: 92%;
    }

    .travel-part4-marketing {
        padding: 50px 0;
    }

    .travel-part4-heading {
        margin-bottom: 38px;
    }

    .travel-part4-heading h2 {
        font-size: 32px;
    }

    .travel-part4-heading p {
        font-size: 15.5px;
        line-height: 1.7;
    }

    .travel-part4-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .travel-part4-card {
        min-height: auto;
        padding: 30px 24px;
    }

    .travel-part4-cta {
        padding: 55px 0;
    }

    .travel-part4-cta-box {
        padding: 50px 25px;

        border-radius: 18px;
    }

    .travel-part4-cta h2 {
        font-size: 32px;
    }

    .travel-part4-cta p {
        font-size: 15.5px;
        line-height: 1.7;
    }

}


@media screen and (max-width: 480px) {

    .travel-part4-marketing {
        padding: 50px 0;
    }

    .travel-part4-small-title {
        font-size: 12px;
    }

    .travel-part4-heading h2 {
        font-size: 28px;
    }

    .travel-part4-card {
        padding: 27px 20px;
        border-radius: 14px;
    }

    .travel-part4-icon {
        width: 58px;
        height: 58px;
        font-size: 25px;
    }

    .travel-part4-card h3 {
        font-size: 19px;
    }

    .travel-part4-card p {
        font-size: 14.5px;
    }

    .travel-part4-cta {
        padding: 45px 0;
    }

    .travel-part4-cta-box {
        padding: 42px 20px;
        border-radius: 15px;
    }

    .travel-part4-cta h2 {
        font-size: 28px;
    }

    .travel-part4-buttons {
        flex-direction: column;
        width: 100%;
    }

    .travel-part4-btn-primary,
    .travel-part4-btn-secondary {
        width: 100%;
    }

}


@media screen and (max-width: 991px) {

    .travel-part5-faq {
        padding: 50px 0;
    }

    .travel-part5-heading h2 {
        font-size: 38px;
    }

}


@media screen and (max-width: 767px) {

    .travel-part5-container {
        width: 92%;
    }

    .travel-part5-faq {
        padding: 50px 0;
    }

    .travel-part5-heading {
        margin-bottom: 35px;
    }

    .travel-part5-heading h2 {
        font-size: 32px;
    }

    .travel-part5-heading p {
        font-size: 15.5px;
        line-height: 1.7;
    }

    .travel-part5-list {
        border-radius: 15px;
    }

    .travel-part5-question {
        padding: 21px 20px;

        font-size: 16px;
    }

    .travel-part5-plus {
        flex: 0 0 34px;

        width: 34px;
        height: 34px;
    }

    .travel-part5-answer-content {
        padding:
            0 65px 23px 20px;

        font-size: 15px;
    }

    .travel-part5-help {
        padding: 30px 25px;

        flex-direction: column;
        align-items: flex-start;
    }

}


@media screen and (max-width: 480px) {

    .travel-part5-faq {
        padding: 50px 0;
    }

    .travel-part5-heading h2 {
        font-size: 28px;
    }

    .travel-part5-tag {
        font-size: 11px;
    }

    .travel-part5-question {
        padding: 19px 16px;

        gap: 12px;

        font-size: 15px;
    }

    .travel-part5-plus {
        flex: 0 0 31px;

        width: 31px;
        height: 31px;
    }

    .travel-part5-plus::before {
        width: 13px;
    }

    .travel-part5-plus::after {
        height: 13px;
    }

    .travel-part5-answer-content {
        padding:
            0 16px 20px;

        font-size: 14.5px;
    }

    .travel-part5-help {
        margin-top: 30px;

        padding: 27px 20px;

        border-radius: 14px;
    }

    .travel-part5-help-text h3 {
        font-size: 21px;
    }

    .travel-part5-help-btn {
        width: 100%;
    }

}


@media(max-width:900px) {

    .blog-detail-grid,
    .blog-content-wrapper,
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar,
    aside {
        position: static;
    }

    .blog-detail-container,
    .blog-details-container,
    .blog-wrapper,
    .blog-detail-wrapper {
        padding: 28px 16px;
    }

    .blog-main h1,
    .blog-content h1,
    article h1 {
        font-size: 34px;
    }

    .blog-main p,
    .blog-content p,
    article p,
    .blog-main li,
    .blog-content li,
    article li {
        font-size: 16px;
    }
}


@media (max-width:992px) {

    .container,
    .hero-container,
    .services-container,
    .metrics-container,
    .expertise-container,
    .industries-container,
    .marketing-container,
    .alliances-container,
    .connect-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .tab-list-grid {
        grid-template-columns: 2fr;
    }
}


@media (max-width:768px) {
    body {
        overflow-x: hidden;
    }

    section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero,
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 32px !important;
    }

    .hero-left,
    .hero-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .hero-left h1,
    .hero h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    .hero-left p,
    .hero p {
        font-size: 1rem !important;
    }

    .hero-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .services-grid,
    .metrics-grid,
    .expertise-grid,
    .industries-grid,
    .marketing-grid,
    .alliances-grid,
    .reviews-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    [class*="grid"] {
        gap: 20px !important;
    }

    [class*="card"] {
        width: 100% !important;
    }

    button,
    .btn,
    a.btn,
    .primary-btn,
    .secondary-btn {
        max-width: 320px;
        width: 100%;
    }

    nav {
        padding: 14px 18px !important;
    }

    .tab-content h3 {
        font-size: 2rem;
        line-height: normal;
    }

}


@media (max-width:480px) {
    h1 {
        font-size: 1.4rem !important;
    }

    h2 {
        font-size: 1.6rem !important;
    }

    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    section {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}


@media(max-width:1024px) {
    .universal-footer .footer-links-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 36px !important
    }

    .universal-footer .footer-locations {
        margin-left: 0 !important
    }
}


@media (min-width: 769px) {
    .universal-footer .footer-locations {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 60px 0 !important;
        display: block !important;
    }

    .universal-footer .location-card {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(320px, 0.9fr) minmax(480px, 1.35fr) !important;
        grid-template-rows: auto auto 1fr !important;
        column-gap: 48px !important;
        align-items: start !important;
        padding: 28px !important;
    }

    .universal-footer .location-card .loc-flag {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .universal-footer .location-card h4 {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .universal-footer .location-card p {
        grid-column: 1 !important;
        grid-row: 3 !important;
        margin: 0 !important;
    }

    .universal-footer .location-card .location-map-wrap {
        grid-column: 2 !important;
        grid-row: 1 / 4 !important;
        margin: 0 !important;
        width: 100% !important;
        align-self: stretch !important;
    }

    .universal-footer .location-card .embed-map-responsive {
        padding-bottom: 48% !important;
        min-height: 250px !important;
    }
}


@media (max-width:768px) {
    .universal-footer .location-card {
        display: block !important
    }

    .universal-footer .location-map-wrap {
        margin-top: 20px !important
    }
}






/* Main header */
html body header#universal-header {
    position: fixed !important;
    top: 37px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    background: #fff !important;
    transition: top 0.2s ease;
}

/* Scroll hone par header bilkul top par */
body.scrolled header#universal-header {
    top: 0 !important;
}

/* Page content spacing */
body {
    padding-top: 80px;
}



/* Mobile view */
@media (max-width: 767px) {
html body header#universal-header {
top: 0px !important;
}

}


































/* =========================
   WEB DEVELOPMENT TEMPLATE - ULTRA PREMIUM LIGHT
========================= */

.wd-page * { margin: 0; padding: 0; box-sizing: border-box; }

.wd-page {
    --primary: #1155cc;
    --primary-hover: #0b3d99;
    --primary-light: #2563eb;
    --primary-soft: #eff6ff;
    --accent: #0284c7;
    --accent-light: #38bdf8;
    --dark: #0f172a;
    --text: #1e293b;
    --text-light: #475569;
    --gray: #64748b;
    --gray-2: #94a3b8;
    --bg: #ffffff;
    --bg-soft: #fafbff;
    --bg-alt: #f8fafc;
    --border: #e2e8f0;
    --border-light: #eff2f7;
    --white: #ffffff;

    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wd-page h1,
.wd-page h2,
.wd-page h3,
.wd-page h4 {
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.025em;
    color: var(--dark);
    line-height: 1.2;
}

.wd-page .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

/* BG SHAPES */
.wd-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.wd-bg::before,
.wd-bg::after {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.10;
}

.wd-bg::before {
    background: var(--primary-light);
    top: -250px; left: -250px;
}

.wd-bg::after {
    background: var(--accent);
    bottom: -250px; right: -250px;
}

/* SECTIONS */
.wd-section {
    padding: 50px 0;
    position: relative;
}

.wd-section.wd-soft {
    background: var(--bg-alt);
}

.wd-section.wd-dark-soft {
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
}

.wd-section-header {
    max-width: 840px;
    margin: 0 auto 40px;
    text-align: center;
}

.wd-label {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 18px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wd-section-header h2 {
    font-size: clamp(34px, 4.5vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}

.wd-gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--primary-light) 50%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wd-section-header p {
    color: var(--gray);
    font-size: 18px;
    line-height: 1.8;
    max-width: 680px;
    margin: 0 auto;
}

/* BADGE */
.wd-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--primary-soft);
    border: 1px solid #dbeafe;
    border-radius: 100px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 28px;
}

.wd-badge::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--primary);
    animation: wdPulse 2s infinite;
}

@keyframes wdPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

/* BUTTONS - HOMEPAGE BRAND HOVER EFFECT */
.wd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    letter-spacing: -0.01em;
}

.wd-btn-primary {
    background: #1155cc;
    color: #ffffff !important;
    border: 2px solid #1155cc;
    box-shadow: 0 10px 25px rgba(17, 85, 204, 0.3);
}

.wd-btn-primary:hover {
    background: #0b3d99 !important;
    border-color: #0b3d99 !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(17, 85, 204, 0.4);
    color: #ffffff !important;
}

.wd-btn-ghost {
    background: rgba(255, 255, 255, 0.95);
    color: #1155cc !important;
    border: 2px solid #1155cc;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(17, 85, 204, 0.08);
}

.wd-btn-ghost:hover {
    background: #1155cc !important;
    border-color: #1155cc !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(17, 85, 204, 0.25);
}

/* ============ HERO ============ */
.wd-hero {
    padding: 50px 0;
    position: relative;
}

.wd-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 80px;
    padding-top: 50px;
}

.wd-hero h1 {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    line-height: 1.03;
    margin-bottom: 28px;
    letter-spacing: -0.035em;
}

.wd-hero-text {
    max-width: 580px;
    margin-bottom: 44px;
    color: var(--text-light);
    font-size: 18px;
    line-height: 1.75;
    font-weight: 400;
}

.wd-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 56px;
}



.wd-hero-stats strong {
    font-family: 'Manrope', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    letter-spacing: -0.03em;
}

.wd-hero-stats span {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wd-hero-visual {
    position: relative;
    height: 560px;
}

.wd-card-glow {
    position: absolute;
    inset: -20px;
    background: linear-gradient(135deg, rgba(17, 85, 204, 0.25), rgba(2, 132, 199, 0.25));
    border-radius: 40px;
    filter: blur(60px);
    opacity: 0.25;
}

.wd-main-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: 0 40px 100px rgba(15, 23, 42, 0.15);
}

.wd-main-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wd-floating-stat {
    position: absolute;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 18px 22px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: wdFloatY 5s ease-in-out infinite;
    z-index: 2;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
}

.wd-stat-1 { top: 40px; left: -40px; }
.wd-stat-2 { bottom: 40px; right: -40px; animation-delay: 2.5s; }

@media (max-width: 1200px) {
    .wd-stat-1 { left: 0 !important; }
    .wd-stat-2 { right: 0 !important; }
}

@media (max-width: 768px) {
    .wd-stat-1,
    .wd-stat-2 {
        position: static !important;
        transform: none !important;
        margin: 10px auto !important;
    }
}

@keyframes wdFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

.wd-icon-box {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.wd-stat-num {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    letter-spacing: -0.02em;
}

.wd-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
}

/* ============ SERVICES ============ */
.wd-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.wd-service-card {
    position: relative;
    padding: 44px 36px;
    border-radius: 26px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wd-service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.wd-service-card:hover {
    transform: translateY(-12px);
    border-color: transparent;
    box-shadow: 0 35px 70px rgba(29, 78, 216, 0.14);
}

.wd-service-card:hover::before {
    transform: scaleX(1);
}

.wd-service-icon {
    width: 72px; height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff, #e0e7ff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all 0.4s;
}

.wd-service-card:hover .wd-service-icon {
    transform: scale(1.08) rotate(-6deg);
    background: linear-gradient(135deg, #dbeafe, #ddd6fe);
}

.wd-service-icon svg {
    width: 32px; height: 32px;
    stroke: var(--primary);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wd-service-tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 6px 14px;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid #dbeafe;
}

.wd-service-card h3 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.wd-service-card p {
    margin: 0;
    color: var(--gray);
    font-size: 15px;
    line-height: 1.75;
    flex-grow: 1;
}

.wd-service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.wd-service-link:hover {
    color: var(--primary-dark);
    gap: 12px;
}

/* ============ PROCESS ============ */
.wd-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.wd-process-step {
    position: relative;
    padding: 40px 30px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: all 0.35s ease;
    overflow: hidden;
}

.wd-process-step::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 0;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    transition: height 0.4s;
}

.wd-process-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(29, 78, 216, 0.1);
    border-color: transparent;
}

.wd-process-step:hover::before {
    height: 100%;
}

.wd-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(29, 78, 216, 0.25);
    letter-spacing: -0.02em;
}

.wd-process-step h3 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.wd-process-step p {
    margin: 0;
    color: var(--gray);
    font-size: 14.5px;
    line-height: 1.7;
}

/* ============ PORTFOLIO ============ */
.wd-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1280px;
    margin: 0 auto;
}

.wd-portfolio-card {
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e5e9f0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.wd-portfolio-card:hover {
    transform: translateY(-10px);
    border-color: transparent;
    box-shadow: 0 35px 70px rgba(29, 78, 216, 0.15);
}

/* Image Container */
.wd-portfolio-img {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.wd-portfolio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-portfolio-card:hover .wd-portfolio-img img {
    transform: scale(1.1);
}

/* Overlay with Link Icon */
.wd-portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.85), rgba(8, 145, 178, 0.85));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.wd-portfolio-card:hover .wd-portfolio-overlay {
    opacity: 1;
}

.wd-portfolio-link {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d4ed8;
    text-decoration: none;
    transform: scale(0.6) rotate(-45deg);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.wd-portfolio-card:hover .wd-portfolio-link {
    transform: scale(1) rotate(0deg);
}

.wd-portfolio-link svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wd-portfolio-link:hover {
    background: #1155cc;
    color: #ffffff;
}

/* Info */
.wd-portfolio-info {
    padding: 28px 26px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.wd-portfolio-tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 6px 14px;
    background: #eff6ff;
    color: #1155cc;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1.5px solid #bfdbfe;
}

.wd-portfolio-info h3 {
    margin: 0 0 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.wd-portfolio-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.wd-portfolio-title-link:hover {
    color: #1155cc;
}

.wd-portfolio-info p {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 14.5px;
    line-height: 1.7;
    flex-grow: 1;
}

.wd-portfolio-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1155cc;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    margin-top: auto;
    transition: all 0.3s ease;
}

.wd-portfolio-readmore i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.wd-portfolio-readmore:hover {
    color: #0b3d99;
}

.wd-portfolio-readmore:hover i {
    transform: translateX(4px);
}

/* ============ TECH STACK (BRAND LOGOS) ============ */
.wd-tech-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    max-width: 1180px;
    margin: 0 auto;
}

.wd-tech-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 44px 24px;
    border-radius: 22px;
    background: var(--white);
    border: 1.5px solid var(--border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.wd-tech-logo-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s;
}

.wd-tech-logo-card:hover {
    transform: translateY(-10px);
    border-color: transparent;
    box-shadow: 0 30px 65px rgba(29, 78, 216, 0.15);
}

.wd-tech-logo-card:hover::before {
    transform: scaleX(1);
}

.wd-tech-logo-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-tech-logo-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wd-tech-logo-card:hover .wd-tech-logo-icon {
    transform: scale(1.15) rotate(-6deg);
}

.wd-tech-logo-card h4 {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.01em;
    text-align: center;
    transition: color 0.3s;
}

.wd-tech-logo-card:hover h4 {
    color: var(--primary);
}

/* ============ INDUSTRIES ============ */
.wd-industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.wd-industry-card {
    padding: 0;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.wd-industry-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.wd-industry-card:hover .wd-industry-img {
    transform: scale(1.1);
}

.wd-industry-content {
    padding: 0 24px 32px;
    position: relative;
}

.wd-industry-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transition: transform 0.4s;
}

.wd-industry-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(8, 145, 178, 0.12);
    border-color: transparent;
}

.wd-industry-card:hover::after {
    transform: scaleX(1);
}

.wd-industry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eff6ff, #ecfeff);
    margin-top: -32px;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(29, 78, 216, 0.18);
    border: 3px solid var(--white);
    transition: transform 0.35s;
}

.wd-industry-card:hover .wd-industry-icon {
    transform: scale(1.12) rotate(-5deg);
}

.wd-industry-icon svg {
    width: 28px; height: 28px;
    stroke: var(--primary);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wd-industry-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.wd-industry-card p {
    margin: 0;
    color: var(--gray);
    font-size: 14px;
    line-height: 1.6;
}

/* ============ WHY US (BENTO) - CENTERED + IMAGES ============ */
.wd-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 300px;
    gap: 24px;
}

.wd-bento-card {
    position: relative;
    padding: 40px 34px;
    border-radius: 26px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.wd-bento-card:hover {
    transform: translateY(-8px);
    border-color: #bfdbfe;
    box-shadow: 0 35px 70px rgba(17, 85, 204, 0.12);
}

.wd-bento-card.wd-large {
    grid-column: span 2;
    grid-row: span 2;
    padding: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border-color: #bfdbfe;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
}

.wd-bento-card.wd-large .wd-bento-img {
    width: 100%;
    height: 55%;
    object-fit: cover;
    display: block;
}

.wd-bento-card.wd-large .wd-bento-content {
    padding: 34px 40px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.wd-bento-card.wd-large .wd-bento-icon {
    display: none !important;
}

.wd-bento-card.wd-large::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(17, 85, 204, 0.12), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.wd-bento-icon {
    width: 64px; height: 64px;
    border-radius: 20px;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
    transition: transform 0.4s;
}

.wd-bento-card:hover .wd-bento-icon {
    transform: scale(1.1) rotate(-6deg);
}

.wd-bento-icon svg {
    width: 30px; height: 50px;
    stroke: var(--primary);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wd-bento-card h3 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 800;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
    text-align: center;
}

.wd-bento-card.wd-large h3 {
    font-size: 30px;
    line-height: 1.15;
    text-align: left;
    margin: 0 0 16px;
}

.wd-bento-card p {
    margin: 0;
    color: var(--gray);
    font-size: 15px;
    line-height: 1.75;
    position: relative;
    z-index: 1;
    text-align: center;
}

.wd-bento-card.wd-large p {
    font-size: 16px;
    color: var(--text-light);
    text-align: left;
}

/* ============ PRICING ============ */
.wd-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: center;
}

.wd-price-card {
    padding: 50px 40px;
    border-radius: 28px;
    background: var(--white);
    border: 1.5px solid var(--border);
    transition: all 0.4s ease;
    position: relative;
}

.wd-price-card.featured {
    border-color: var(--primary);
    box-shadow: 0 40px 90px rgba(29, 78, 216, 0.15);
    transform: scale(1.05);
}

.wd-price-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--white);
    padding: 6px 18px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.wd-price-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 35px 70px rgba(29, 78, 216, 0.12);
}

.wd-price-card.featured:hover {
    transform: scale(1.05) translateY(-8px);
}

.wd-price-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
}

.wd-price-card > p {
    color: var(--gray);
    font-size: 14px;
    margin-bottom: 28px;
}

.wd-price {
    font-family: 'Manrope', sans-serif;
    font-size: 52px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.03em;
}

.wd-price span {
    font-size: 16px;
    color: var(--gray);
    font-weight: 600;
    letter-spacing: 0;
}

.wd-price-desc {
    color: var(--gray);
    font-size: 14px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.wd-price-features {
    list-style: none;
    margin-bottom: 32px;
}

.wd-price-features li {
    padding: 10px 0;
    color: var(--text-light);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wd-price-features li::before {
    content: '';
    width: 18px; height: 18px;
    background: var(--primary-soft);
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.wd-price-card .wd-btn {
    width: 100%;
}

/* ============ FAQ ============ */
.wd-faq-list {
    max-width: 920px;
    margin: 0 auto;
}

.wd-faq-item {
    margin-bottom: 16px;
    border-radius: 20px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: all 0.35s ease;
    overflow: hidden;
}

.wd-faq-item:hover {
    border-color: #bfdbfe;
    box-shadow: 0 15px 40px rgba(29, 78, 216, 0.06);
}

.wd-faq-item.open {
    border-color: var(--primary);
    box-shadow: 0 20px 50px rgba(29, 78, 216, 0.1);
}

.wd-faq-q {
    padding: 28px 36px;
    color: var(--dark);
    font-size: 18px;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    position: relative;
    cursor: pointer;
    letter-spacing: -0.015em;
    padding-right: 80px;
    transition: color 0.3s;
}

.wd-faq-item.open .wd-faq-q {
    color: var(--primary);
}

.wd-faq-q::after {
    content: '+';
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: 300;
    color: var(--primary);
    transition: transform 0.35s;
    line-height: 1;
}

.wd-faq-item.open .wd-faq-q::after {
    transform: translateY(-50%) rotate(45deg);
}

.wd-faq-a {
    max-height: 0;
    overflow: hidden;
    padding: 0 36px;
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.85;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-faq-item.open .wd-faq-a {
    max-height: 400px;
    padding: 0 36px 30px;
}

/* ============ CTA ============ */
.wd-cta-box {
    position: relative;
    padding: 100px 70px;
    border-radius: 40px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 50%, #f0fdfa 100%);
    border: 1.5px solid #bfdbfe;
    text-align: center;
    overflow: hidden;
}

.wd-cta-box::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(17, 85, 204, 0.12), transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(2, 132, 199, 0.12), transparent 50%);
    animation: wdRotate 30s linear infinite;
}

@keyframes wdRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wd-cta-box > * {
    position: relative;
    z-index: 1;
}

.wd-cta-box h2 {
    font-size: clamp(34px, 4.5vw, 58px);
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.wd-cta-box p {
    max-width: 680px;
    margin: 0 auto 44px;
    color: var(--text-light);
    font-size: 18px;
    line-height: 1.8;
}
.wd-main-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: 0 40px 100px rgba(15, 23, 42, 0.15);
}

.wd-main-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============ REVEAL ============ */
.wd-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-reveal.wd-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
    .wd-services-grid { grid-template-columns: repeat(2, 1fr); }
    .wd-process-grid { grid-template-columns: repeat(2, 1fr); }
    .wd-portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .wd-tech-logo-grid { grid-template-columns: repeat(3, 1fr); }
    .wd-industries-grid { grid-template-columns: repeat(2, 1fr); }
    .wd-bento-grid { grid-template-columns: repeat(2, 1fr); }
    .wd-bento-card.wd-large { grid-column: span 2; }
}

@media (max-width: 900px) {
    .wd-page .container { padding: 0 24px; }
    .wd-section { padding: 50px 0; }
    .wd-section-header { margin-bottom: 32px; }
    .wd-hero { padding: 50px 0; }
    .wd-hero-grid { grid-template-columns: 1fr; gap: 50px; }
    .wd-hero-visual { height: 420px; }
    .wd-stat-1, .wd-stat-2 { display: none; }
    .wd-hero-stats { gap: 32px; }
    .wd-portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .wd-portfolio-img { height: 180px; }
    .wd-portfolio-info { padding: 22px 18px 24px; }
    .wd-portfolio-info h3 { font-size: 17px; }
    .wd-portfolio-info p { font-size: 13.5px; }
    .wd-tech-logo-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .wd-tech-logo-card { padding: 36px 20px; gap: 14px; }
    .wd-tech-logo-icon { width: 68px; height: 68px; }
    .wd-tech-logo-card h4 { font-size: 15px; }
}

@media (max-width: 640px) {
    .wd-page .container { padding: 0 20px; }
    .wd-page .wd-section,
    .wd-section { padding: 30px 0 !important; }
    .wd-section-header { margin-bottom: 24px; }
    .wd-hero { padding: 45px 0 30px !important; }
    .wd-hero h1 { font-size: 38px; margin-bottom: 20px; }
    .wd-hero-text { font-size: 16px; margin-bottom: 36px; }
    .wd-hero-grid { gap: 40px; }
    .wd-services-grid,
    .wd-process-grid,
    .wd-industries-grid,
    .wd-portfolio-grid,
    .wd-bento-grid { grid-template-columns: 1fr; gap: 20px; }
    .wd-portfolio-img { height: 220px; }
    .wd-portfolio-info { padding: 22px 20px 24px; }
    .wd-portfolio-tag { font-size: 10px; padding: 5px 12px; }
    .wd-portfolio-info h3 { font-size: 17px; }
    .wd-portfolio-info p { font-size: 13.5px; }
    .wd-portfolio-link { width: 52px; height: 52px; }
    .wd-portfolio-link svg { width: 20px; height: 20px; }
    .wd-bento-card.wd-large { grid-column: span 1; grid-row: span 1; }
    .wd-bento-card.wd-large h3 { font-size: 24px; }
    .wd-cta-box { padding: 55px 26px; border-radius: 26px; }
    .wd-hero-buttons { flex-direction: column; margin-bottom: 40px; gap: 12px; }
    .wd-hero-buttons .wd-btn { width: 100%; min-height: 56px; }
    .wd-hero-stats { gap: 24px; padding-top: 28px; }
    .wd-hero-stats strong { font-size: 26px; }
    .wd-hero-stats span { font-size: 12px; }
    .wd-faq-q { padding: 22px 24px; font-size: 16px; padding-right: 60px; }
    .wd-faq-a { padding: 0 24px; font-size: 15px; }
    .wd-faq-item.open .wd-faq-a { padding: 0 24px 24px; }
    .wd-faq-q::after { right: 24px; font-size: 26px; }
    .wd-faq-item { margin-bottom: 14px; }
    .wd-service-card { padding: 36px 28px; }
    .wd-process-step { padding: 32px 26px; }
    .wd-industry-img { height: 160px; }
    .wd-industry-content { padding: 0 20px 30px; }
    .wd-industry-icon { width: 58px; height: 58px; margin-top: -29px; }
    .wd-industry-icon svg { width: 26px; height: 26px; }
    .wd-bento-card { padding: 36px 28px; }
    .wd-bento-card.wd-large .wd-bento-img { height: 200px; }
    .wd-bento-card.wd-large .wd-bento-content { padding: 28px 24px; }
    .wd-tech-logo-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .wd-tech-logo-card { padding: 32px 18px; gap: 12px; border-radius: 18px; }
    .wd-tech-logo-icon { width: 62px; height: 62px; }
    .wd-tech-logo-card h4 { font-size: 14px; }
    .wd-label { margin-bottom: 16px; padding: 8px 18px; font-size: 11px; }
    .wd-section-header h2 { margin-bottom: 20px; }
    .wd-section-header p { font-size: 16px; }
}







/* ============================================
   TECH PILLS SECTION - FINAL FIXED CSS
============================================ */

/* Grid Layout */
.wd-tech-pills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Card */
.wd-tech-pill-card {
    background: #ffffff;
    border: 1px solid #e5e9f0;
    border-radius: 20px;
    padding: 28px 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 200px;
}

.wd-tech-pill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #1155cc, #0284c7);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.wd-tech-pill-card:hover {
    transform: translateY(-8px);
    border-color: #bfdbfe;
    box-shadow: 0 25px 60px rgba(17, 85, 204, 0.12);
}

.wd-tech-pill-card:hover::before {
    transform: scaleX(1);
}

/* Card Title */
.wd-tech-pill-title {
    margin: 0 0 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #1155cc;
    letter-spacing: -0.01em;
    padding-bottom: 14px;
    border-bottom: 1px solid #eff2f7;
    position: relative;
    width: 100%;
}

.wd-tech-pill-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #1155cc, #0284c7);
    border-radius: 2px;
}

/* ============ PILLS CONTAINER ============ */
.wd-tech-pill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
}

/* ============ PILL - BRAND COLOR THEME + COLOR ICON BADGE ============ */
.wd-pill {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.005em;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;

    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
    min-height: 52px;
    white-space: normal;
    line-height: 1.3;
    text-align: left;
    box-sizing: border-box;
}

.wd-pill-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.wd-pill-icon svg,
.wd-pill-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.wd-pill svg:not(.wd-pill-icon svg) {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
}

.wd-pill:hover {
    background: #eff6ff;
    color: #1155cc;
    border-color: #1155cc;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(17, 85, 204, 0.18);
}

.wd-pill:hover .wd-pill-icon {
    background: #ffffff;
    border-color: #1155cc;
    box-shadow: 0 2px 8px rgba(17, 85, 204, 0.2);
}

/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 1100px) {
    .wd-tech-pills-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .wd-tech-pills-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .wd-tech-pill-card {
        padding: 24px 22px;
        border-radius: 18px;
        min-height: auto;
    }
    .wd-tech-pill-title {
        font-size: 14px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
    .wd-pill {
        padding: 7px 10px 7px 8px;
        font-size: 11.5px;           /* ← aur small */
        gap: 5px;
        min-height: 48px;
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
    }
    .wd-pill svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 640px) {
    .wd-tech-pills-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .wd-tech-pill-card {
        padding: 22px 20px;
        border-radius: 16px;
    }
    .wd-tech-pill-title {
        font-size: 13px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }
    .wd-tech-pill-title::after {
        width: 30px;
    }
    .wd-tech-pill-tags {
        gap: 8px;
    }
    .wd-pill {
        padding: 6px 10px 6px 8px;
        font-size: 14px;             /* ← mobile pe sabse small */
        gap: 5px;
        min-height: 46px;
        flex: 0 0 calc(50% - 4px);   /* mobile pe bhi 2 per row */
        max-width: calc(50% - 4px);
    }
    .wd-pill svg {
        width: 15px;
        height: 15px;
    }
}