/* ============================================================
           ROOT VARIABLES
           ============================================================ */
        :root {
            --navy:       #2e3192;
            --navy-dark:  #1a1d6e;
            --navy-light: #4a4fb8;
            --teal:       #00aeac;
            --teal-light: #00cec9;
            --teal-dark:  #007a78;
            --gold:       #f5a623;
            --gold-light: #ffc555;
            --gold-dark:  #d4891a;
            --orange:     #e85d04;

            --white:      #ffffff;
            --off-white:  #f8f9fc;
            --light-gray: #eef0f6;
            --mid-gray:   #8b8fa8;
            --dark-gray:  #3a3d52;
            --near-black: #12142a;

            --font-heading: "Playfair Display", Georgia, serif;
            --font-body:    "DM Sans", system-ui, sans-serif;

            --shadow-sm: 0 2px 12px rgba(46,49,146,.08);
            --shadow-md: 0 8px 32px rgba(46,49,146,.14);
            --shadow-lg: 0 20px 60px rgba(46,49,146,.20);
            --shadow-xl: 0 30px 90px rgba(46,49,146,.28);

            --radius-sm:   6px;
            --radius-md:   12px;
            --radius-lg:   20px;
            --radius-xl:   32px;
            --radius-full: 999px;

            --ease:     cubic-bezier(.4,0,.2,1);
            --ease-out: cubic-bezier(0,0,.2,1);
            --fast:  .18s;
            --mid:   .32s;
            --slow:  .55s;
        }

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

        body {
            font-family: var(--font-body);
            background: var(--near-black);
            color: var(--white);
            -webkit-font-smoothing: antialiased;
        }

        /* ============================================================
           BREADCRUMB BANNER — PREMIUM DARK + GRID LINES
           ============================================================ */
        .xa-banner-breadcrumb-5 {
            position: relative;
            background: var(--near-black);
            padding: clamp(4rem,9vw,7.5rem) 0 clamp(3rem,6vw,5.5rem);
            overflow: hidden;
            isolation: isolate;
        }

        /* Layer 1 — fine teal grid */
        .xa-banner-breadcrumb-5::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(0,174,172,.14) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,174,172,.14) 1px, transparent 1px);
            background-size: 54px 54px;
            z-index: 0;
            pointer-events: none;
        }

        /* Layer 2 — radial vignette to fade grid at edges */
        .xa-banner-breadcrumb-5 .grid-vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 85% 110% at 50% 50%,
                transparent 35%, var(--near-black) 100%);
            z-index: 1;
            pointer-events: none;
        }

        /* Layer 3 — navy diagonal slab (right side depth) */
        .xa-banner-breadcrumb-5 .banner-slab {
            position: absolute;
            right: -8%; top: -40%;
            width: 52%; height: 220%;
            background: linear-gradient(148deg, var(--navy-dark) 0%, rgba(46,49,146,.18) 55%, transparent 80%);
            transform: skewX(-9deg);
            z-index: 2;
            pointer-events: none;
        }

        /* Layer 4 — teal radial glow bottom-left */
        .xa-banner-breadcrumb-5 .banner-glow {
            position: absolute;
            left: -100px; bottom: -80px;
            width: 450px; height: 450px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0,174,172,.2) 0%, transparent 68%);
            z-index: 2;
            pointer-events: none;
        }

        /* Layer 5 — gold accent bottom line */
        .xa-banner-breadcrumb-5 .banner-line {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 52%, transparent 100%);
            z-index: 4;
        }

        /* Content */
        .xa-banner-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(1.25rem,5vw,3rem);
            position: relative;
            z-index: 3;
        }

        .xa-banner-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            font-size: .7rem;
            font-weight: 600;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--teal);
            margin-bottom: 1rem;
        }
        .xa-banner-eyebrow::before {
            content: '';
            display: block;
            width: 24px; height: 1.5px;
            background: var(--teal);
            border-radius: 2px;
        }

        .xa-banner-title {
            font-family: var(--font-heading);
            font-size: clamp(2.4rem,5.5vw,4rem);
            font-weight: 700;
            color: var(--white);
            line-height: 1.1;
            margin-bottom: .6rem;
        }
        .xa-banner-title em { font-style: italic; color: var(--gold); }

        .xa-banner-sub {
            font-size: clamp(.85rem,1.5vw,1rem);
            color: var(--mid-gray);
            max-width: 540px;
            line-height: 1.7;
            margin-bottom: 1.8rem;
        }

        .xa-banner-breadcrumb-pill {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: var(--radius-full);
            padding: .45rem 1.1rem;
            font-size: .78rem;
            font-weight: 500;
            backdrop-filter: blur(8px);
        }
        .xa-banner-breadcrumb-pill a {
            color: rgba(255,255,255,.5);
            text-decoration: none;
            transition: color var(--fast) var(--ease);
        }
        .xa-banner-breadcrumb-pill a:hover { color: var(--teal-light); }
        .xa-banner-breadcrumb-pill a[aria-current="page"] {
            color: var(--teal-light); font-weight: 600;
        }
        .xa-banner-sep { color: rgba(255,255,255,.22); font-size: .7rem; }

        /* ============================================================
           SHARED
           ============================================================ */
        .hr-container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 clamp(1.25rem,5vw,3rem);
        }
        .xa-container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 clamp(1.25rem,5vw,3rem);
        }

        /* ============================================================
           INTRO — DARK DOTTED
           ============================================================ */
        .hr-analytics-section {
            padding: clamp(2.5rem,7vw,6.5rem) 0;
            background: #0e1022;
            position: relative;
            overflow: hidden;
        }
        .hr-analytics-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(0,174,172,.1) 1px, transparent 1px);
            background-size: 28px 28px;
            pointer-events: none;
        }
        .hr-analytics-section .hr-container { position: relative; z-index: 1; }

        .hr-title {
            font-family: var(--font-heading);
            font-size: clamp(1.7rem,3.5vw,2.6rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: 1.4rem;
            line-height: 1.2;
        }
        .hr-lead {
            font-size: clamp(.95rem,1.6vw,1.08rem);
            line-height: 1.9;
            color: rgba(255,255,255,.62);
            margin-bottom: 2rem;
           
        }
        .hr-content p {
            font-size: clamp(.88rem,1.4vw,1rem);
            line-height: 1.9;
            color: rgba(255,255,255,.55);
            margin-bottom: 1.2rem;
        }
        .hr-subtitle {
            font-family: var(--font-heading);
            font-size: clamp(1.15rem,2.2vw,1.5rem);
            font-weight: 700;
            color: var(--white);
            margin: 2.5rem 0 .85rem;
            position: relative;
            padding-left: 1.1rem;
        }
        .hr-subtitle::before {
            content: '';
            position: absolute;
            left: 0; top: .12em;
            width: 4px; height: 1.1em;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--teal) 0%, var(--navy-light) 100%);
        }
        .hr-content .fr-bullet-list {
            list-style: none; padding: 0;
            margin: .8rem 0 1.4rem;
            display: flex; flex-direction: column; gap: .65rem;
        }
        .hr-content .fr-bullet-list li {
            display: flex; align-items: flex-start; gap: .75rem;
            font-size: clamp(.87rem,1.3vw,.98rem);
            line-height: 1.75;
            color: rgba(255,255,255,.55);
        }
        .hr-content .fr-bullet-list li::before {
            content: '';
            flex: none; margin-top: .5em;
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--teal);
        }
        .fr-highlight-card {
            margin: 2.5rem 0;
            padding: 1.8rem 2rem;
            border-radius: var(--radius-lg);
            background: rgba(0,174,172,.07);
            border-left: 4px solid var(--teal);
            font-size: clamp(.9rem,1.4vw,1rem);
            line-height: 1.9;
            color: rgba(255,255,255,.72);
            font-style: italic;
        }

        /* ============================================================
           CORE OFFERINGS — DARK GRID BG
           ============================================================ */
        .xa-hr-services {
            padding: clamp(3.5rem,7vw,6.5rem) 0;
            background: var(--near-black);
            position: relative;
        }
        .xa-hr-services::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(46,49,146,.09) 1px, transparent 1px),
                linear-gradient(90deg, rgba(46,49,146,.09) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
        }
        .xa-hr-services .xa-container { position: relative; z-index: 1; }

        .xa-hr-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(2rem,5vw,5rem);
            align-items: center;
        }
        .xa-section-title {
            font-family: var(--font-heading);
            font-size: clamp(1.6rem,3vw,2.3rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: .5rem;
        }
        .xa-section-sub {
            font-size: .72rem;
            color: var(--teal);
            margin-bottom: 2rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .16em;
        }
        .xa-services-list { display: flex; flex-direction: column; gap: .6rem; }
        .xa-service-item {
            display: flex; align-items: flex-start; gap: 1rem;
            padding: 1rem 1.2rem;
            border-radius: var(--radius-md);
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.07);
            transition: border-color var(--mid) var(--ease), background var(--mid) var(--ease), transform var(--mid) var(--ease);
        }
        .xa-service-item:hover {
            border-color: rgba(0,174,172,.35);
            background: rgba(0,174,172,.06);
            transform: translateX(5px);
        }
        .xa-service-icon {
            flex: none;
            width: 38px; height: 38px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
            display: flex; align-items: center; justify-content: center;
            color: var(--white); font-size: .88rem;
            transition: background var(--mid) var(--ease);
        }
        .xa-service-item:hover .xa-service-icon {
            background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
        }
        .xa-service-title {
            font-size: clamp(.85rem,1.3vw,.95rem);
            font-weight: 500;
            color: rgba(255,255,255,.75);
            line-height: 1.55;
        }
        .xa-col-right { position: relative; }
        .xa-img-wrap {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: visible;
        }
        .xa-img-wrap img {
            width: 100%; height: auto;
            display: block; object-fit: cover;
            aspect-ratio: 4/3;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255,255,255,.07);
            box-shadow: var(--shadow-xl);
        }
        .xa-img-badge {
            position: absolute;
            bottom: 1.5rem; left: -1.5rem;
            background: var(--near-black);
            border: 1px solid rgba(0,174,172,.28);
            border-radius: var(--radius-md);
            padding: 1rem 1.4rem;
            box-shadow: 0 14px 44px rgba(0,0,0,.5);
            display: flex; align-items: center; gap: .8rem;
            min-width: 190px;
        }
        .xa-img-badge-icon {
            width: 38px; height: 38px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
            display: flex; align-items: center; justify-content: center;
            color: var(--white); font-size: .95rem; flex: none;
        }
        .xa-img-badge-label { font-size: .68rem; font-weight: 600; color: var(--mid-gray); text-transform: uppercase; letter-spacing: .07em; }
        .xa-img-badge-value { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--white); line-height: 1.1; }

        /* ============================================================
           BENEFITS
           ============================================================ */
        .xa-benefits {
            padding: clamp(3.5rem,7vw,6.5rem) 0;
            background: #0e1022;
        }
        .xa-benefits-head {
            max-width: 680px;
            margin: 0 auto 3rem;
            text-align: center;
        }
        .xa-benefits-title {
            font-family: var(--font-heading);
            font-size: clamp(1.5rem,3vw,2.2rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: .8rem;
        }
        .xa-benefits-lead {
            font-size: clamp(.88rem,1.4vw,1rem);
            line-height: 1.8;
            color: var(--mid-gray);
        }
        .xa-benefits-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.1rem;
        }
        .xa-benefit {
            display: flex; align-items: flex-start; gap: 1rem;
            padding: 1.4rem;
            border-radius: var(--radius-md);
            background: rgba(255,255,255,.035);
            border: 1px solid rgba(255,255,255,.07);
            transition: box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease), transform var(--mid) var(--ease);
        }
        .xa-benefit:hover {
            border-color: rgba(0,174,172,.3);
            box-shadow: 0 8px 32px rgba(0,174,172,.1);
            transform: translateY(-3px);
        }
        .xa-benefit-icon {
            flex: none;
            width: 42px; height: 42px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--navy-dark), var(--navy-light));
            color: var(--white);
            display: flex; align-items: center; justify-content: center;
            font-size: .92rem;
            transition: background var(--mid) var(--ease);
        }
        .xa-benefit:hover .xa-benefit-icon {
            background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
        }
        .xa-benefit-body {
            font-size: clamp(.83rem,1.3vw,.93rem);
            font-weight: 500;
            color: rgba(255,255,255,.62);
            line-height: 1.65;
        }

        /* ============================================================
           WHY CHOOSE
           ============================================================ */
        .xa-why-section {
            padding: clamp(3.5rem,7vw,6.5rem) 0;
            background: var(--near-black);
            position: relative;
        }
        .xa-why-section::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(46,49,146,.1) 1px, transparent 1px);
            background-size: 32px 32px;
            pointer-events: none;
        }
        .xa-why-section .xa-container { position: relative; z-index: 1; }
        .xa-closing-note {
            text-align: center;
            margin-top: 2.5rem;
            font-size: clamp(.85rem,1.3vw,.95rem);
            color: var(--mid-gray);
            line-height: 1.8;
        }

        /* ============================================================
           IMPLEMENTATION PROCESS
           ============================================================ */
        .xa-impl-section {
            padding: clamp(3.5rem,7vw,6.5rem) 0;
            background: #090b1a;
            position: relative;
            overflow: hidden;
        }
        .xa-impl-section::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(46,49,146,.14) 1px, transparent 1px),
                linear-gradient(90deg, rgba(46,49,146,.14) 1px, transparent 1px);
            background-size: 48px 48px;
            pointer-events: none;
        }
        .xa-impl-section::after {
            content: '';
            position: absolute;
            top: -80px; right: -80px;
            width: 360px; height: 360px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0,174,172,.13) 0%, transparent 68%);
            pointer-events: none;
        }
        .xa-impl-inner { position: relative; z-index: 1; }
        .xa-impl-title {
            font-family: var(--font-heading);
            font-size: clamp(1.6rem,3vw,2.3rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: .7rem;
        }
        .xa-impl-content > p {
            color: var(--mid-gray);
            font-size: clamp(.87rem,1.3vw,.98rem);
            margin-bottom: 2.5rem;
            line-height: 1.8;
        }
        .xa-impl-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
            gap: 1.1rem;
        }
        .xa-step {
            display: flex; gap: 1rem; align-items: flex-start;
            padding: 1.5rem;
            border-radius: var(--radius-md);
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.07);
            height: 100%;
            transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease);
        }
        .xa-step:hover {
            background: rgba(0,174,172,.08);
            border-color: rgba(0,174,172,.28);
        }
        .xa-step-num {
            flex: none;
            width: 34px; height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--teal-dark), var(--teal-light));
            color: var(--white);
            font-size: .8rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-heading);
        }
        .xa-step-body h4 {
            font-size: clamp(.85rem,1.3vw,.95rem);
            font-weight: 600;
            color: rgba(255,255,255,.8);
            line-height: 1.55;
        }

        /* ============================================================
           CLOSING CTA
           ============================================================ */
        .fr-closing {
            padding: clamp(4rem,8vw,7rem) 0;
            background: linear-gradient(135deg, var(--navy-dark) 0%, #0d1060 55%, var(--near-black) 100%);
            position: relative;
            overflow: hidden;
            text-align: center;
            isolation: isolate;
        }
        .fr-closing::before {
            content: '';
            position: absolute;
            top: -130px; left: 50%;
            transform: translateX(-50%);
            width: 800px; height: 560px;
            background: radial-gradient(ellipse at center, rgba(0,174,172,.2) 0%, transparent 68%);
            pointer-events: none;
        }
        .fr-closing::after {
            content: '';
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(0,174,172,.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,174,172,.07) 1px, transparent 1px);
            background-size: 52px 52px;
            pointer-events: none;
        }
        .fr-closing-inner {
            position: relative; z-index: 1;
            max-width: 820px;
            margin: 0 auto;
            padding: 0 clamp(1.25rem,5vw,3rem);
        }
        .fr-closing-label {
            display: inline-flex; align-items: center; gap: .55rem;
            font-size: .7rem; font-weight: 600;
            letter-spacing: .2em; text-transform: uppercase;
            color: var(--teal-light); margin-bottom: 1.2rem;
        }
        .fr-closing-label::before,
        .fr-closing-label::after {
            content: '';
            display: block;
            width: 22px; height: 1.5px;
            background: var(--teal-light); border-radius: 2px;
        }
        .fr-closing h2 {
            font-family: var(--font-heading);
            font-size: clamp(1.8rem,4.5vw,3.1rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: 1rem;
            line-height: 1.15;
        }
        .fr-closing h2 em { font-style: italic; color: var(--gold); }
        .fr-closing p {
            font-size: clamp(.88rem,1.5vw,1.02rem);
            line-height: 1.9;
            color: rgba(255,255,255,.52);
            margin-bottom: 1.4rem;
        }
        .fr-closing-actions {
            display: flex; gap: 1rem;
            justify-content: center; flex-wrap: wrap;
            margin-top: 2rem;
        }
        .btn-primary {
            display: inline-flex; align-items: center; gap: .55rem;
            padding: .9rem 2.1rem;
            background: var(--teal); color: var(--white);
            border-radius: var(--radius-full);
            font-size: .88rem; font-weight: 600; letter-spacing: .04em;
            text-decoration: none; border: none; cursor: pointer;
            transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
        }
        .btn-primary:hover {
            background: var(--teal-light);
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(0,174,172,.38);
        }
        .btn-outline {
            display: inline-flex; align-items: center; gap: .55rem;
            padding: .9rem 2.1rem;
            background: transparent; color: var(--white);
            border-radius: var(--radius-full);
            font-size: .88rem; font-weight: 600; letter-spacing: .04em;
            text-decoration: none;
            border: 1px solid rgba(255,255,255,.18);
            cursor: pointer;
            transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
        }
        .btn-outline:hover {
            border-color: rgba(255,255,255,.42);
            background: rgba(255,255,255,.05);
            transform: translateY(-2px);
        }

      
        @media (max-width: 900px) {
            .xa-hr-grid { grid-template-columns: 1fr; }
            .xa-img-badge { left: 1rem; }
        }
        @media (max-width: 600px) {
            .xa-impl-list { grid-template-columns: 1fr; }
            .xa-benefits-list { grid-template-columns: 1fr; }
            .fr-closing-actions { flex-direction: column; align-items: stretch; }
            .btn-primary, .btn-outline { justify-content: center; }
        }
        
        
        
        
        
        
        
        

        /* ===============================
   SBS PREMIUM ABOUT SECTION
================================ */
.sbs-about-premium {
    padding: 30px 0;
    background: linear-gradient(180deg, var(--off-white), var(--white));
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
}

.sbs-about-container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* LEFT CONTENT */
.sbs-about-eyebrow {
    display: inline-block;
    font-size: 14px;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sbs-about-title {
    font-family: var(--font-heading);
    font-size: 42px;
    line-height: 1.3;
    color: var(--navy-dark);
    margin-bottom: 20px;
}

.sbs-about-title span {
    color: var(--teal);
}

.sbs-about-text {
    color: var(--mid-gray);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 18px;
}

/* HIGHLIGHTS */
.sbs-about-highlights {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.sbs-highlight-box {
    background: var(--white);
    padding: 18px 22px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center;
    flex: 1;
    transition: var(--mid) var(--ease);
}

.sbs-highlight-box h4 {
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 5px;
}

.sbs-highlight-box p {
    font-size: 13px;
    color: var(--mid-gray);
}

.sbs-highlight-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* RIGHT CARDS */
.sbs-about-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.sbs-card {
    background: var(--white);
    padding: 28px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--mid) var(--ease);
    position: relative;
    overflow: hidden;
}

.sbs-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--teal), var(--navy));
}

.sbs-card-icon {
    width: 55px;
    height: 55px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--teal), var(--navy));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 20px;
    margin-bottom: 15px;
}

.sbs-card h3 {
    font-size: 18px;
    color: var(--navy-dark);
    margin-bottom: 10px;
}

.sbs-card p {
    font-size: 14px;
    color: var(--mid-gray);
    line-height: 1.6;
}

.sbs-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .sbs-about-container {
        grid-template-columns: 1fr;
    }

    .sbs-about-cards {
        grid-template-columns: 1fr;
    }

    .sbs-about-title {
        font-size: 32px;
    }
}


/* ===============================
   SBS MISSION VISION VALUES
================================ */
.sbs-mvv-premium {
    padding: 100px 0;
    background: var(--white);
    position: relative;
}

.sbs-mvv-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* HEADING */
.sbs-mvv-head {
    text-align: center;
    margin-bottom: 60px;
}

.sbs-mvv-eyebrow {
    color: var(--gold);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sbs-mvv-title {
    font-family: var(--font-heading);
    font-size: 40px;
    color: white;
    margin: 10px 0 15px;
}

.sbs-mvv-sub {
    color: var(--mid-gray);
    max-width: 650px;
    margin: auto;
    line-height: 1.7;
}

/* GRID */
.sbs-mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARDS */
.sbs-mvv-card {
    background: var(--off-white);
    padding: 35px 28px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--mid) var(--ease);
    position: relative;
    overflow: hidden;
}

.sbs-mvv-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(46,49,146,0.05));
    opacity: 0;
    transition: var(--mid);
}

.sbs-mvv-card:hover::after {
    opacity: 1;
}

.sbs-mvv-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

/* ICON */
.sbs-mvv-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--navy), var(--teal));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 22px;
    margin-bottom: 20px;
}

/* TEXT */
.sbs-mvv-card h3 {
    font-size: 20px;
    color: var(--navy-dark);
    margin-bottom: 12px;
}

.sbs-mvv-card p {
    color: var(--mid-gray);
    font-size: 15px;
    line-height: 1.7;
}

/* VALUES LIST */
.sbs-mvv-values {
    padding-left: 0;
    list-style: none;
}

.sbs-mvv-values li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    color: var(--mid-gray);
}

.sbs-mvv-values li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--teal);
    font-size: 14px;
}

/* WIDE CARD */
.sbs-mvv-card-wide {
    grid-column: span 1;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .sbs-mvv-grid {
        grid-template-columns: 1fr;
    }

    .sbs-mvv-title {
        font-size: 30px;
    }
}



.sbs-mvv-premium {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--navy-dark), var(--navy), var(--teal));
}