/* ============================================================
   Nimbus Computer Pvt. Ltd. — Main Stylesheet
   nimbus.in — Modern responsive design 2026
   ============================================================ */

/* --- RESET & BASE ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #1e293b;
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
ul { list-style: none; }

/* --- CSS VARIABLES ----------------------------------------- */
:root {
    --cyan:      #27a9d6;
    --navy:      #0c2461;
    --blue:      #1a56db;
    --blue-lt:   #2563eb;
    --electric:  #00b4d8;
    --green:     #06d6a0;
    --rog-red:   #e00000;
    --rog-dark:  #0a0a0a;
    --refurb:    #16a34a;
    --gold:      #f59e0b;
    --gray-50:   #f8fafc;
    --gray-100:  #f1f5f9;
    --gray-200:  #e2e8f0;
    --gray-400:  #94a3b8;
    --gray-500:  #64748b;
    --gray-700:  #334155;
    --gray-900:  #0f172a;
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow:     0 4px 16px rgba(0,0,0,.1);
    --shadow-lg:  0 12px 40px rgba(0,0,0,.15);
    --surface:    #f8fafc;
    --text-muted: #64748b;
    --radius:    14px;
    --radius-lg: 20px;
    --transition: all .25s ease;
}

/* --- UTILITY ----------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
.section-label {
    font-size: .75rem; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--blue); margin-bottom: 10px;
}
.section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800;
    color: var(--navy); line-height: 1.2; margin-bottom: 14px;
}
.section-sub { font-size: 1rem; color: var(--gray-500); max-width: 600px; line-height: 1.7; }
.text-center { text-align: center; }
.text-center .section-sub { margin: 0 auto; }

/* BUTTONS */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px; border-radius: 10px; font-weight: 700;
    font-size: .9rem; cursor: pointer; transition: var(--transition);
    border: 2px solid transparent; white-space: nowrap;
}
.btn-primary   { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--navy); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,86,219,.35); }
.btn-secondary { background: #fff; color: var(--blue); border-color: var(--gray-200); }
.btn-secondary:hover { border-color: var(--blue); background: #eff6ff; transform: translateY(-2px); }
.btn-dark      { background: var(--navy); color: #fff; }
.btn-dark:hover { background: #091a4a; transform: translateY(-2px); }
.btn-outline   { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-whatsapp1 {
    padding: 0 !important;
}

/* WhatsApp */
.header-cta .btn-whatsapp {
    height: 38px !important;
    min-height: 38px !important;
    min-width: 0 !important;
    padding: 0 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    background: #25D366 !important;
    color: #fff !important;

    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    border: none !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    transition: var(--transition);
}



.header-cta .btn-whatsapp:hover {
    background: #128C7E !important;
    transform: translateY(-2px);
}

.header-cta .btn-whatsapp svg {
    width: 15px !important;
    height: 15px !important;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
    margin: 0 !important;
}





/*-------HEADER-----*/

.btn-outline-sm { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border: 1px solid var(--gray-200); border-radius: 8px; font-size: .8rem;
    color: var(--gray-500); transition: var(--transition); }
.btn-outline-sm:hover { border-color: var(--blue); color: var(--blue); }

/*----LOGO------*/
.site-logo {
    display: flex;
    align-items: center;
}

.nimbus-logo {
    width: 180px;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    display: block;
}




/* --- HEADER ------------------------------------------------ */
.site-header {
    background: #fff; box-shadow: var(--shadow-sm);
    position: sticky; top: 0; z-index: 900;
    transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.12); }
.site-header .container {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 70px;
}

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow: visible;
}

.nimbus-logo {
    width: 210px !important;
    height: auto !important;
    max-width: none !important;
    display: block;
}
.logo-mark {
    width: 42px; height: 42px; background: linear-gradient(135deg, var(--navy), var(--blue));
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 900; font-size: 1.3rem; letter-spacing: -1px;
}
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-size: 1.05rem; font-weight: 900; color: var(--navy); letter-spacing: 1px; }
.logo-sub  { font-size: .62rem; color: var(--gray-500); font-weight: 500; letter-spacing: .5px; }



.main-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 20px;
    flex: 1;
    flex-wrap: nowrap;
}

.mobile-menu-close {
    display: none !important;
}

.nav-link {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--gray-700);
    transition: var(--transition);
    white-space: nowrap;
}


/* Header navigation fixes */
.main-nav .nav-link {
    white-space: nowrap !important;
    width: auto !important;
    min-width: max-content;
}

.nav-link:hover,
.nav-link.active {
    background: #eff6ff;
    color: var(--blue);
}



/* Dropdown */
.nav-dropdown { position: relative; }
.dropdown-menu {
    position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200); min-width: 320px; padding: 8px;
    opacity: 0; visibility: hidden; transition: var(--transition); pointer-events: none;
}
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; pointer-events: all; }
.dropdown-item {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px;
    border-radius: 10px; transition: var(--transition); color: var(--gray-700);
}
.dropdown-item:hover { background: var(--gray-50); }
.dropdown-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.dropdown-item strong { display: block; font-size: .9rem; color: var(--navy); }
.dropdown-item small { display: block; font-size: .78rem; color: var(--gray-400); margin-top: 2px; }

.site-header .header-cta {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--transition); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }


/* Social Icon */


.social-icon {
    width: 20px;
    height: 38px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #727475;
}


.social-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.social-icon:hover {
    color: #000;
}


/* ============================================================
   NIMBUS HOMEPAGE — DYNAMIC HERO SLIDER
============================================================ */

.hero {
    position: relative;
    width: 100%;
    height: 510px;
    padding: 0;
    overflow: hidden;

    background: #f4f8fc;
}


/* ============================================================
   SLIDER
============================================================ */

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}


/* ============================================================
   INDIVIDUAL SLIDES
============================================================ */

.hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .7s ease,
        visibility .7s ease;

    z-index: 1;
}


.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}


/* ============================================================
   CONTAINER
============================================================ */

.hero-slide .container {
    position: relative;

    width: 100%;
    height: 100%;

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

    padding: 0 5%;
}


/* ============================================================
   HERO GRID
============================================================ */

.hero-grid {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;
}


/* ============================================================
   LEFT CONTENT
============================================================ */

.hero-content {
    position: absolute;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 390px;
    max-width: 390px;

    z-index: 10;
}


/* ============================================================
   EYEBROW
============================================================ */

.hero-eyebrow {
    display: inline-block;

    margin-bottom: 13px;

    font-size: .66rem;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;

    color: #168fd0;
}


/* ============================================================
   MAIN HEADING
============================================================ */

.hero-content h1 {
    margin: 0 0 16px;

    font-size: 3.15rem;
    font-weight: 900;

    line-height: 1.02;
    letter-spacing: -.035em;

    color: #071225;
}


.hero-content h1 span {
    display: inline;
    color: #168fd0;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.hero-sub {
    max-width: 350px;

    margin: 0 0 24px;

    font-size: .78rem;
    font-weight: 500;

    line-height: 1.65;

    color: #4d5c6e;
}


/* ============================================================
   CTA
============================================================ */

.hero-cta {
    display: inline-flex;

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

    gap: 14px;

    min-height: 40px;

    padding: 0 19px;

    border-radius: 5px;

    background: #087fd1;
    color: #fff;

    font-size: .68rem;
    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(8,127,209,.20);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.hero-cta span {
    font-size: 1rem;
    line-height: 1;

    color: #fff;
}


.hero-cta:hover {
    transform: translateY(-2px);

    background: #056eb8;

    box-shadow:
        0 10px 24px rgba(8,127,209,.28);
}


/* ============================================================
   RIGHT PRODUCT VISUAL
============================================================ */

.hero-visual {
    position: absolute;
    top: 0;
    right: -3%;
    width: 72%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}


.hero-products {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 100%;
    height: auto;

    max-width: none;

    display: block;

    /* IMPORTANT:
       Do NOT use object-fit: cover
       Do NOT force height: 100%
    */

    filter:
        drop-shadow(0 18px 24px rgba(0,0,0,.12));
}


/* ============================================================
   SLIDE 1 — LAPTOPS
============================================================ */

.hero-slide:nth-child(1) {
    background:
        linear-gradient(
            105deg,
            #f9fcff 0%,
            #f4f9fd 45%,
            #eaf5fc 100%
        );
}


/* ============================================================
   SLIDE 2 — GAMING
============================================================ */

.hero-slide:nth-child(2) {
    background:
        radial-gradient(
            ellipse at 75% 50%,
            rgba(35,80,255,.18),
            transparent 50%
        ),
        linear-gradient(
            110deg,
            #030814 0%,
            #071225 48%,
            #10152e 100%
        );
}


.hero-slide:nth-child(2) .hero-content h1 {
    color: #fff;
}


.hero-slide:nth-child(2) .hero-sub {
    color: rgba(255,255,255,.75);
}


.hero-slide:nth-child(2) .hero-eyebrow {
    color: #20bce8;
}


.hero-slide:nth-child(2) .hero-content h1 span {
    color: #20bce8;
}


.hero-slide:nth-child(2) .hero-cta {
    background: #20aee0;
    box-shadow:
        0 7px 22px rgba(32,174,224,.25);
}


/* ============================================================
   SLIDE 3 — BUSINESS
============================================================ */

.hero-slide:nth-child(3) {
    background:
        linear-gradient(
            110deg,
            #f8fbfd 0%,
            #eef5f9 55%,
            #e5f0f6 100%
        );
}


.hero-slide:nth-child(3) .hero-content h1 span {
    color: #146fae;
}


/* ============================================================
   SLIDE 4 — PRINTING
============================================================ */

.hero-slide:nth-child(4) {
    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #f5f9fc 55%,
            #eaf3f8 100%
        );
}


.hero-slide:nth-child(4) .hero-content h1 span {
    color: #087fc5;
}


/* ============================================================
   SLIDE 5 — REFURBISHED
============================================================ */

.hero-slide:nth-child(5) {
    background:
        linear-gradient(
            110deg,
            #f8fcf9 0%,
            #f1faf4 52%,
            #e7f5ed 100%
        );
}


.hero-slide:nth-child(5) .hero-eyebrow {
    color: #198b50;
}


.hero-slide:nth-child(5) .hero-content h1 span {
    color: #198b50;
}


.hero-slide:nth-child(5) .hero-cta {
    background: #198b50;

    box-shadow:
        0 7px 20px rgba(25,139,80,.20);
}


.hero-slide:nth-child(5) .hero-cta:hover {
    background: #14753f;
}


/* ============================================================
   SLIDER CONTROLS
============================================================ */

/* ============================================================
   HERO SLIDER DOTS — CENTERED
============================================================ */

.hero-slider-controls {
    position: absolute;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    z-index: 20;

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


.hero-dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;
}


.hero-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(30,50,70,.25);

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.hero-dot.active {
    width: 24px;

    border-radius: 5px;

    background: #087fd1;
}


/* ============================================================
   DARK SLIDE CONTROLS
============================================================ */

.hero-slide:nth-child(2).active ~ .hero-slider-controls
.hero-slide:nth-child(2).active ~ .hero-slider-controls {
    border-color: rgba(255,255,255,.18);

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

    color: #fff;
}


/* ============================================================
   OLD HERO ELEMENTS — HIDE
============================================================ */

.hero-badge,
.hero-stats,
.hero-panel,
.hero-btns,
.hero-store-btns,
.hero-store-btn,
.hero-panel-divider {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   RATING SECTION
════════════════════════════════════════════════════════════ */

.rating {
    width: 100%;
    padding: 30px 0 35px;
    background: transparent;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
    border-bottom: 1px solid #e2e8f0;
}

.rating-eyebrow {
    display: block;
    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: #4d83ad;
    text-transform: uppercase;
}

.rating .section-title {
    margin: 0 0 7px;

    font-size: 31px;
    line-height: 1.1;
    font-weight: 700;
    color: #0c2461;
}

.rating .section-sub {
    width: 100%;
    margin: 0 auto;

    text-align: center !important;

    font-size: 12px;
    line-height: 1.5;
    color: #65717e;
}


/* ───────────────────────────────────────────────────────────
   RATING PILLS
─────────────────────────────────────────────────────────── */

.ratings-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}


.rating-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 38px;
    padding: 0 13px;

    background: #ffffff;
    border: 1px solid #dce3e8;
    border-radius: 999px;

    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);

    text-decoration: none !important;
    white-space: nowrap;

    box-sizing: border-box;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.rating-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.13);
}


/* SCORE */

.rating-pill-score {
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    color: #111111;
}


/* STAR */

.rating-pill-star {
    margin-left: 5px;

    font-size: 18px;
    line-height: 1;
    color: #fbbc04;
}


/* DIVIDER */

.rating-pill-divider {
    width: 1px;
    height: 20px;

    margin: 0 9px;

    background: #777777;
}


/* LOGO */

.rating-pill-logo {
    display: block;

    width: auto;
    max-width: 70px;
    height: 21px;

    object-fit: contain;
}



/* =========================================
   AS SEEN ON
========================================= */

.as-seen-on {
    width: 100%;
    padding: 55px 0 60px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}

.as-seen-on-header {
    text-align: center;
    margin-bottom: 35px;
}

.as-seen-on-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: #4d83ad;
    text-transform: uppercase;
}

.as-seen-on-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    color: #0c2461;
}


/* =========================================
   MARQUEE
========================================= */

.as-seen-on-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.as-seen-on-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: asSeenOnScroll 28s linear infinite;
    will-change: transform;
}

.as-seen-on-logo {
    width: 150px;
    height: 45px;
    margin-right: 55px;
    flex: 0 0 150px;

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

.as-seen-on-logo img {
    display: block;
    width: auto;
    height: 45px;
    object-fit: contain;

    transition:
        filter 0.25s ease,
        opacity 0.25s ease;
}

.as-seen-on-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* =========================================
   CONTINUOUS ANIMATION
========================================= */

@keyframes asSeenOnScroll {

    from {
        transform: translateX(0);
    }

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

}












/* ============================================================
   STORES GATEWAY
============================================================ */

.stores-gateway {
    padding: 58px 0 70px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(31, 98, 190, .08),
            transparent 35%
        ),
        #f7f9fc;
}

.stores-gateway-header {
    text-align: center;
    margin-bottom: 30px;
}

.stores-gateway-header .section-label {
    margin-bottom: 6px;
}

.stores-gateway-header .section-title {
    margin-bottom: 6px;
}

.stores-gateway-header .section-sub {
    max-width: 620px;
    margin: 0 auto;
}

.stores-gateway-header .section-title .nimbus-cyan {
    color: #27A9D6 !important;
}


/* ============================================================
   GRID
============================================================ */

.stores-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


/* ============================================================
   CARD
============================================================ */

.store-card {
    position: relative;
    min-height: 210px;
    border-radius: 12px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(15, 35, 70, .10);
}

.store-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(15, 35, 70, .16);
}


/* ============================================================
   REMOVE OLD CARD BODY LOOK
============================================================ */

.store-card-body {
    background: transparent !important;
    padding: 0 !important;
    position: static;
}


.store-card-features {
    display: none !important;
}


/* ============================================================
   SHOP.NIMBUS.IN CARD
============================================================ */

.store-card-shop {
    background:
        radial-gradient(
            circle at 82% 52%,
            rgba(48, 132, 255, .28),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #092b5d 0%,
            #071f47 55%,
            #103e7a 100%
        );

    color: #fff;
}

.store-card-shop .store-card-header {
    position: relative;
    z-index: 2;

    width: 52%;

    padding: 20px 26px !important;

    background: transparent;
    color: #fff;
}

.store-card-shop .store-card-image {
    width: 56%;
    right: -1%;
    bottom: -2%;
}


/* ============================================================
   REFURBWALA CARD
============================================================ */

.store-card-refurb {
    background:
        radial-gradient(
            circle at 88% 50%,
            rgba(112, 190, 128, .18),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #f8fbf8 0%,
            #eef7ef 55%,
            #e4f1e5 100%
        );

    color: var(--navy);
}

.store-card-refurb .store-card-header {
    position: relative;
    z-index: 3;

    width: 52%;

    padding: 25px 0 0 25px;

    background: transparent;
    color: var(--navy);
}

.store-card-refurb .store-card-image {
    width: 53%;
    right: 0;
    bottom: -3%;
}


/* ============================================================
   TEXT
============================================================ */

.store-intro {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.store-looking {
    font-size: .72rem;
    font-weight: 500;
    line-height: 1;
    opacity: .9;
}

.store-card-header .store-flag {
    font-size: 1rem;
    margin: 0;
    line-height: 1;
}

.store-card-header .store-domain {
    font-size: 1.45rem;
    line-height: 1.05;

    font-weight: 900;
    letter-spacing: -.03em;

    text-transform: uppercase;
}

.store-card-header .store-tagline {
    max-width: 100%;
    margin-top: 8px;

    font-size: .72rem;
    line-height: 1.45;

    opacity: .82;
}

.store-card-refurb .store-card-header .store-tagline {
    color: #314438;
    opacity: 1;
}


/* ============================================================
   CTA
============================================================ */

.store-cta {
    position: absolute;

    left: 25px;
    bottom: 25px;

    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 18px;

    border-radius: 5px;

    font-size: .68rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .01em;

    transition: transform .25s ease, filter .25s ease;
}

.store-card-shop .store-cta {
    background: rgba(255,255,255,.95);
    color: #173762;

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

.store-card-refurb .store-cta {
    background: #087638;
    color: #fff;

    box-shadow: 0 5px 14px rgba(0,80,35,.16);
}

.store-cta:hover {
    transform: translateX(4px);
    filter: brightness(1.04);
}

.store-cta .arrow {
    font-size: 1rem;
    line-height: 1;
}


.store-product-image {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 56%;
    max-height: 100%;

    object-fit: contain;
    object-position: right bottom;

    z-index: 2;

    pointer-events: none;
}



/* ============================================================
   WHY CHOOSE NIMBUS
============================================================ */

.why-nimbus {
   padding: 36px 0 48px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(31, 98, 190, .08),
            transparent 45%
        ),
        #f8fafc;
}


/* ============================================================
   HEADER
============================================================ */

.why-nimbus-header {
    text-align: center;
    margin-bottom: 14px;
}

.why-nimbus-header .section-title {
    margin: 0;

    font-size: 1.5rem;
    line-height: 1.2;

    font-weight: 900;
    letter-spacing: -.02em;

    color: var(--navy);
}

.why-nimbus-header .section-title span {
    color: var(--blue);
}


/* ============================================================
   STATS CONTAINER
============================================================ */

.why-nimbus-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    width: calc(100% + 300px);
    margin-left: -150px;

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

    border: 1px solid rgba(25, 68, 125, .12);
    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(15, 35, 70, .07);
}


/* ============================================================
   INDIVIDUAL STAT
============================================================ */

.why-stat {
    min-height: 70px;

    display: flex;
    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 12px 16px;

    position: relative;
}


/* Vertical divider */

.why-stat:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;

    top: 16%;

    width: 1px;

    height: 68%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(25, 68, 125, .13),
            transparent
        );
}


/* ============================================================
   ICON
============================================================ */

.why-stat-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    flex-shrink: 0;

    font-size: 1.65rem;

    filter:
        grayscale(1)
        sepia(.4)
        hue-rotate(160deg)
        saturate(2);
}


/* ============================================================
   TEXT
============================================================ */

.why-stat-content {
    display: flex;
    flex-direction: column;

    justify-content: center;
}

.why-stat-content strong {
    font-size: 1rem;

    line-height: 1.15;

    font-weight: 900;

    color: #244779;

    white-space: nowrap;
}

.why-stat-content span {
    margin-top: 3px;

    font-size: .66rem;

    line-height: 1.25;

    font-weight: 500;

    color: #42516a;
}


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

.why-stat {
    transition:
        background .25s ease,
        transform .25s ease;
}

.why-stat:hover {
    background: rgba(35, 151, 195, .05);
}

.why-stat:hover .why-stat-content strong {
    color: #2397c3;
}






/* ============================================================
   WHAT WE OFFER SECTION
============================================================ */

.categories-section {
    padding: 24px 0 28px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(31, 98, 190, .07),
            transparent 45%
        ),
        #f8fafc;
}

.categories-section .container {
    width: 100%;
    max-width: 1450px;
    padding-left: 35px;
    padding-right: 35px;
}


/* ============================================================
   WHAT WE OFFER HEADER
============================================================ */

.categories-header {
    text-align: center;
    margin-bottom: 8px;
}

.categories-header .section-title {
    margin: 0;

    font-size: 1.25rem;
    line-height: 1.2;

    font-weight: 900;
    letter-spacing: -.02em;

    color: var(--navy);
}


/* ============================================================
   6 CATEGORY CARDS
============================================================ */

.offer-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
     
    width: 100%;
    max-width: none;

    gap: 12px;
}


/* ============================================================
   WHAT WE OFFER INDIVIDUAL CARD
============================================================ */

.offer-card {
    min-height: 112px;

    display: flex;
    flex-direction: column;

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

    padding: 10px 12px;

    text-decoration: none;

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

    border: 1px solid rgba(25, 68, 125, .10);
    border-radius: 8px;

    box-shadow:
        0 3px 10px rgba(15, 35, 70, .05);

    overflow: hidden;

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

.offer-card:hover {
    transform: translateY(-3px);

    border-color: rgba(35, 151, 195, .35);

    box-shadow:
        0 8px 18px rgba(15, 35, 70, .10);
}


/* ============================================================
   WHAT WE OFFER PRODUCT IMAGE
============================================================ */

.offer-card img {
    display: block;

    width: 100%;
    height: 72px;

    object-fit: contain;
}


/* ============================================================
   WHAT WE OFFER CATEGORY NAME
============================================================ */

.offer-card span {
    margin-top: 4px;

    font-size: .92rem;
    line-height: 1.2;

    font-weight: 700;

    color: var(--navy);

    text-align: center;
}


/* ============================================================
   VIEW ALL PRODUCTS BUTTON
============================================================ */

.offer-button-wrap {
    display: flex;
    justify-content: center;

    margin-top: 4px;
}

.offer-view-all {
    display: inline-flex;

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

    gap: 9px;

    padding: 10px 24px;

    background: var(--blue);
    color: #fff;

    border-radius: 5px;

    text-decoration: none;

    font-size: .72rem;
    line-height: 1;

    font-weight: 800;

    transition:
        transform .25s ease,
        filter .25s ease;
}

.offer-view-all:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.offer-view-all span {
    font-size: .9rem;
    line-height: 1;
}






/* --- ROG SECTION ------------------------------------------- */


/* ============================================================
   ROG STORE BANNER
============================================================ */

.rog-section {
    padding: 0;
    background: #fff;
}


/* ============================================================
   MAIN BANNER
============================================================ */

.rog-banner {
    position: relative;

   width: 100%;
    min-height: 180px;

    display: grid;
    grid-template-columns: 140px 0.95fr 1.55fr;

    overflow: hidden;

    border-radius: 0px;

    background:
        linear-gradient(
            90deg,
            #03040d 0%,
            #050715 50%,
            #09051a 100%
        );

    box-shadow:
        0 10px 28px rgba(10, 15, 35, .14);
}


/* ============================================================
   SUBTLE GAMING LIGHT EFFECT
============================================================ */

.rog-banner::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(124, 29, 185, .22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 62%,
            rgba(120, 0, 255, .12) 100%
        );

    z-index: 1;
}


/* ============================================================
   LEFT — ROG LOGO
============================================================ */

.rog-brand {
    position: relative;
    z-index: 3;

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

    padding: 15px 10px 15px 25px;
}

.rog-logo {
    width: 95px;
}

.rog-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* ============================================================
   CENTER — CONTENT
============================================================ */

.rog-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 18px 15px 18px 0px;
}

.rog-heading {
    margin: 0 0 6px;

    font-size: 1.15rem;
    line-height: 1.15;

    font-weight: 900;
    letter-spacing: -.02em;

    color: #fff;
}

.rog-tagline {
    margin-bottom: 9px;

    font-size: .78rem;
    line-height: 1.3;

    font-weight: 500;

    color: rgba(255, 255, 255, .82);
}

.rog-description {
    margin-bottom: 12px;

    font-size: .66rem;
    line-height: 1.55;

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


/* ============================================================
   CTA
============================================================ */

.rog-cta {
    width: fit-content;

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

    gap: 18px;

    min-width: 150px;

    padding: 10px 15px;

    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 6px;

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

    color: #fff;

    text-decoration: none;

    font-size: .67rem;
    font-weight: 700;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.rog-cta:hover {
    background: rgba(255, 255, 255, .12);

    border-color: rgba(255, 255, 255, .9);

    transform: translateY(-2px);
}

.rog-arrow {
    font-size: 1rem;
    line-height: 1;
}


/* ============================================================
   RIGHT — SHOWROOM IMAGE
============================================================ */

.rog-visual {
    position: relative;
    z-index: 2;

    min-height: 180px;

    overflow: hidden;
}

.rog-showroom-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
    
    filter: brightness(1.08) contrast(1.03);
}


/* ============================================================
   BLEND IMAGE INTO DARK BACKGROUND
============================================================ */

.rog-visual::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #050715 0%,
            rgba(5, 7, 21, .65) 12%,
            transparent 35%
        );
}





/* ============================================================
   OUR SERVICES SECTION
============================================================ */

.our-services {
    padding: 24px 0 32px;
    background: #fff;
}


/* ============================================================
   HEADER
============================================================ */

.our-services-header {
    text-align: center;
    margin-bottom: 14px;
}

.our-services-header .section-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 900;
    color: var(--navy);
}


/* ============================================================
   SERVICES STRIP
============================================================ */

.our-services .container {
    max-width: 1380px;
}

.services-list {
    width: 100%;
    min-height: 82px;

    display: flex;
    flex-direction: row;
    align-items: stretch;

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

    border: 1px solid rgba(25, 68, 125, .10);
    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 3px 12px rgba(15, 35, 70, .05);
}


/* ============================================================
   SERVICE ITEM
============================================================ */

.services-list .service-item {
    flex: 1 1 0;
    min-height: 82px;

    min-width: 0;
    min-height: 66px;

    display: flex;
    flex-direction: column;

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

    position: relative;

    padding: 10px 12px;

    text-decoration: none;
    text-align: center;
}


/* ============================================================
   DIVIDERS
============================================================ */

.services-list .service-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 10px;
    bottom: 10px;
    right: 0;

    width: 1px;

    background: rgba(25, 68, 125, .10);
}


/* ============================================================
   ICON
============================================================ */

.services-list .service-icon {
    font-size: 1.7rem;
    line-height: 1;

    margin-bottom: 6px;
}


/* ============================================================
   SERVICE NAME
============================================================ */

.services-list .service-name {
    font-size: .68rem;
    line-height: 1.3;

    font-weight: 700;
    color: var(--navy);
}




/* ============================================================
   OUR TRUSTED PARTNERS
============================================================ */

.trusted-partners {
    padding: 18px 0 28px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(31, 98, 190, .04),
            transparent 55%
        ),
        #fff;
    overflow: hidden;
}

.trusted-partners .container {
    width: 100%;
    max-width: none;
    padding: 0 18px;
    box-sizing: border-box;
}


/* ============================================================
   SECTION HEADER
============================================================ */

.trusted-partners-header {
    text-align: center;
    margin-bottom: 12px;
}

.trusted-partners-header .section-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -.01em;
    color: var(--navy);
}


/* ============================================================
   PARTNERS VIEWPORT
============================================================ */

.partners-strip {
    width: 100%;
    position: relative;
    min-height: 82px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(20, 40, 80, .06);
    box-sizing: border-box;
}


/* ============================================================
   MOVING TRACK
============================================================ */

.partners-track {
    display: flex;
    align-items: center;
    width: max-content;
    min-height: 82px;
    will-change: transform;

    animation-name: partners-marquee !important;
    animation-duration: 80s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

/* Each complete logo sequence */

.partners-set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
}


/* Continuous movement */

@keyframes partners-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--partners-distance, 0px)));
    }
}


/* Pause while hovering */

.partners-strip:hover .partners-track {
    animation-play-state: paused;
}


/* ============================================================
   INDIVIDUAL PARTNER
============================================================ */

.partner-logo {
    position: relative;

    flex: 0 0 172px;
    width: 150px;
    height: 80px;
    min-width: 0;

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

    padding: 12px;
    box-sizing: border-box;
}

/* Vertical separators */

.partner-logo::after {
    content: "";
    position: absolute;

    top: 12px;
    right: 0;

    width: 1px;
    height: calc(100% - 24px);

    background: rgba(25, 68, 125, 0.10);
    pointer-events: none;
}

/* ============================================================
   CLICKABLE LOGOS
============================================================ */

.partner-logo a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    text-decoration: none;
}

/* Standardized logo display area */

.partner-logo img {
    display: block;

    width: 100px;
    height: 50px;

    max-width: 100%;

    object-fit: contain;
    object-position: center;

    flex-shrink: 0;

    transition: transform 0.25s ease;
}

/* Hover effect */

.partner-logo:hover img {
    transform: scale(1.04);
}







/* --- CLIENTS ----------------------------------------------- */
.clients-section { background: #fff; padding: 60px 0; }
.clients-label { text-align: center;  font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; color: var(--gray-400); margin-bottom: 32px; }

.client-chip img {
    display: block;
    max-width: 150px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.clients-marquee { overflow: hidden; position: relative; }
.clients-track {
    display: flex; gap: 40px; align-items: center;
    animation: marquee 25s linear infinite; width: max-content;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.client-chip {
    background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px;
    padding: 10px 22px; font-size: .85rem; font-weight: 700; color: var(--gray-700);
    white-space: nowrap; flex-shrink: 0;
}





/* --- TESTIMONIALS ------------------------------------------ */

.testimonials {
    width: 100%;
    padding: 55px 0 50px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}

.testimonial-header {
    text-align: center;
    margin-bottom: 32px;
}

.testimonial-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #075dcc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.testimonial-header h2 {
    margin: 0 0 10px;
    color: #101d45;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    font-weight: 800;
}

.testimonial-header p {
    margin: 0;
    color: #65717e;
    font-size: 14px;
    line-height: 1.6;
}


/* ==========================================================
   SLIDER LAYOUT
========================================================== */

.testimonial-slider-wrapper {
    position: relative;
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}

.testimonial-slider {
    display: grid;
    grid-auto-columns: calc((100% - 80px) / 5);
    grid-auto-flow: column;
    gap: 20px;

    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.testimonial-slider::-webkit-scrollbar {
    display: none;
}


/* ==========================================================
   TESTIMONIAL CARD
========================================================== */

.testimonial-card {
    min-width: 0;
    min-height: 300px;
    padding: 25px 24px 22px;

    display: flex;
    flex-direction: column;

    background: #ffffff;
    border: 1px solid #f0f2f7;
    border-radius: 17px;

    box-shadow: 0 5px 16px rgba(15, 35, 75, 0.07);

    box-sizing: border-box;
    scroll-snap-align: start;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(15, 35, 75, 0.11);
}


/* STARS */

.testimonial-stars {
    margin-bottom: 18px;
    color: #ffad24;
    font-size: 23px;
    letter-spacing: 3px;
    line-height: 1;
    white-space: nowrap;
}


/* REVIEW TEXT */

.testimonial-review {
    margin: 0;
    color: #53658e;
    font-size: 14px;
    line-height: 1.55;

    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testimonial-read-more {
    display: inline-block;
    align-self: flex-start;
    margin-top: 4px;

    color: #0066cc;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
}


/* CUSTOMER DETAILS */

.testimonial-customer {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: auto;
    padding-top: 22px;
}

.testimonial-customer img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    border-radius: 50%;
    object-fit: cover;
}

.testimonial-customer h3 {
    margin: 0 0 4px;
    color: #101d45;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
}

.testimonial-customer span {
    color: #7a8498;
    font-size: 12px;
}


/* ==========================================================
   NAVIGATION ARROWS
========================================================== */

.testimonial-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);

    width: 34px;
    height: 34px;

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

    border: 1px solid #dce3ec;
    border-radius: 50%;

    background: #ffffff;
    color: #536580;

    font-size: 15px;
    cursor: pointer;

    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.testimonial-arrow:hover {
    background: #075dcc;
    border-color: #075dcc;
    color: #ffffff;
}

.testimonial-prev {
    left: -12px;
}

.testimonial-next {
    right: -12px;
}

.testimonial-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ==========================================================
   PAGINATION DOTS
========================================================== */

.testimonial-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.testimonial-dot {
    width: 7px;
    height: 7px;
    padding: 0;

    border: none;
    border-radius: 50%;

    background: #a6a6a6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.testimonial-dot.active {
    width: 10px;
    height: 10px;
    background: #347cff;
}


/* GOOGLE REVIEWS CTA */

.testimonial-footer {
    margin-top: 25px;
    text-align: center;
}

.testimonial-google-link {
    color: #075dcc;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.testimonial-google-link:hover {
    text-decoration: underline;
}



/* =========================================================
   BUSINESS CTA
========================================================= */

.business-cta {
    padding: 28px 0;
    background: #fff;
}

.business-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 26px 30px;
    border-radius: 10px;
    background: linear-gradient(90deg, #075dcc 0%, #1478df 100%);
    box-shadow: 0 8px 24px rgba(0,60,150,.12);
}

.business-cta-text h2 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

.business-cta-text p {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: .78rem;
}

.business-cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.business-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 17px;
    border-radius: 6px;
    background: #fff;
    color: #075dcc;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease;
}

.business-cta-btn:hover {
    transform: translateY(-2px);
}

.business-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 6px;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255,255,255,.08);
}








/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    background: #061b3a;
    color: rgba(255, 255, 255, .75);
    border-top: 1px solid rgba(255, 255, 255, .08);
}


/* ------------------------------------------------------------
   MAIN FOOTER
------------------------------------------------------------ */

.footer-top {
    padding: 32px 0 18px;
}

.footer-grid {
    display: grid;
    grid-template-columns:
        1.35fr
        .9fr
        .9fr
        1.05fr
        1fr
        1.35fr;
    gap: 28px;
    align-items: start;
}


/* ------------------------------------------------------------
   BRAND
------------------------------------------------------------ */

.footer-brand {
    min-width: 0;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
}

.footer-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.footer-logo-mobile {
    display: none;
}

.footer-logo-desktop {
    display: flex;
}

.footer-description {
    margin: 0 0 13px;
    font-size: .78rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .65);
    text-align: center;
}


/* ------------------------------------------------------------
   SOCIAL ICONS
------------------------------------------------------------ */

.footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
}

.footer-socials a {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .75);
    transition: var(--transition);
}

.footer-socials svg {
    width: 15px;
    height: 15px;
}

.footer-socials a:hover {
    color: #fff;
    transform: translateY(-2px);
}


/* ------------------------------------------------------------
   HEADINGS
------------------------------------------------------------ */

.footer-heading {
    margin: 0 0 11px;
    color: #fff;
    font-size: .78rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}


/* ------------------------------------------------------------
   LINKS
------------------------------------------------------------ */

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

.footer-links li {
    margin-bottom: 5px;
}

.footer-links a,
.footer-links li span {
    font-size: .72rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .65);
    transition: color .2s ease;
}

.footer-links a:hover {
    color: #fff;
}


/* ------------------------------------------------------------
   OUR WEBSITES
------------------------------------------------------------ */

.footer-websites .website-link {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, .8);
    font-size: .78rem;
    font-weight: 600;
    transition: var(--transition);
}

.footer-websites .website-link:hover {
    color: #fff;
    transform: translateX(2px);
}

.website-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    font-size: .78rem;
    line-height: 1;
}

.refurb-icon {
    font-size: .85rem;
}


/* ------------------------------------------------------------
   CONTACT
------------------------------------------------------------ */

.footer-contact .footer-links li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
}

.contact-icon {
    width: 12px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .7);
    font-size: .58rem;
    line-height: 1.6;
    text-align: center;
}

.footer-contact .footer-links span:not(.contact-icon),
.footer-contact .footer-links a {
    font-size: .72rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .65);
}

.footer-contact .footer-links a:hover {
    color: #fff;
}


/* ------------------------------------------------------------
   BOTTOM BAR
------------------------------------------------------------ */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 9px 0;
}

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, .5);
    font-size: .64rem;
    line-height: 1.4;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-legal a {
    color: rgba(255, 255, 255, .5);
    font-size: .56rem;
    transition: color .2s ease;
}

.footer-legal a:hover {
    color: #fff;
}

.footer-legal span {
    color: rgba(255, 255, 255, .3);
    font-size: .56rem;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
   
   /* Desktop header alignment */
@media (min-width: 1100px) {
    .site-header .container {
        gap: 12px;
    }

    .site-logo {
        flex-shrink: 0;
    }

    .nimbus-logo {
        width: 210px !important;
    }

    .main-nav {
        margin-left: 12px;
        gap: 0;
    }

    .nav-link {
        padding: 8px 10px;
    }

    .header-cta {
        margin-left: 8px;
        gap: 12px;
    }

    .social-icon {
        width: 20px;
        flex: 0 0 20px;
    }

    .social-icon svg {
        width: 19px;
        height: 19px;
    }
}



@media (max-width: 1100px) {

    .footer-grid {
        grid-template-columns: 1.3fr 1fr 1fr 1fr;
        gap: 28px;
    }

    .footer-brand {
        grid-column: span 2;
    }

    .footer-contact {
        grid-column: span 2;
    }

}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 992px) {

    .why-nimbus-stats {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .why-stat:nth-child(3)::after {
        display: none;
    }

    .why-stat:nth-child(-n+3) {
        border-bottom:
            1px solid
            rgba(25, 68, 125, .10);
    }
    
    .rog-banner {
        grid-template-columns: 16% 52% 32%;
    }

    .rog-logo {
        width: 80px;
    }

    .rog-heading {
        font-size: 1rem;
    }

    .rog-description {
        font-size: .62rem;
    }
    
    /* =========================================
   AS SEEN ON
========================================= */

.as-seen-on {
        padding: 48px 0 52px;
    }

    .as-seen-on-logos {
        gap: 30px;
    }

    .as-seen-on-logo {
        width: 115px;
    }

    .as-seen-on-logo img {
        max-width: 110px;
        height: 29px;
    }
    
    /*==========================
    OUR TRUSTED PARTNERS
    ===========================*/
    
    .trusted-partners {
        padding: 22px 0 30px;
    }

    .partners-track {
        --partners-speed: 20s;
    }

    .partner-logo {
        flex-basis: 145px;
        width: 145px;
        height: 72px;
    }

    .partner-logo img {
        max-height: 75%;
    }
    
    /* ==========================================================
   TESTIMONIAL SECTION
========================================================== */

.testimonial-slider {
        grid-auto-columns: calc((100% - 40px) / 3);
        gap: 20px;
    }


}


@media (max-width: 768px) {
    
    
   /*------------------------
    FOOTER SECTION - MOBILE
--------------------------*/

    .footer-top {
        text-align: center;
    }

    .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 28px !important;
    width: 100% !important;
    text-align: center;
}

.footer-grid > .footer-col:nth-child(2) {
    grid-column: 1;
}

.footer-grid > .footer-col:nth-child(3) {
    grid-column: 2;
}

.footer-grid > .footer-col:nth-child(4) {
    grid-column: 1;
}

.footer-grid > .footer-col:nth-child(5) {
    grid-column: 2;
}

.footer-grid > .footer-contact {
    grid-column: 1 / -1;
}




    /* ========================================================
       BRAND
       ======================================================== */

    .footer-brand {
    grid-column: 1 / -1 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
}


/* LOGO */

.footer-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    margin: 0 auto !important;
}

.footer-logo img {
    display: block !important;
    margin: 0 auto !important;
}


/* DESKTOP LOGO HIDDEN ON MOBILE */

.footer-logo-desktop {
    display: none !important;
}


/* MOBILE LOGO */

.footer-logo-mobile {
    display: flex !important;
}


/* DESCRIPTION */

.footer-description {
    width: 100% !important;
    max-width: 330px !important;

    margin: 12px auto 0 !important;

    text-align: center !important;
}


/* SOCIAL ICONS */

.footer-socials {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 14px auto 0 !important;
}


    /* ========================================================
       FOOTER COLUMNS
       ======================================================== */

    .footer-col {
        width: 100%;
        text-align: center;
    }

    .footer-heading {
        margin-bottom: 14px;
        text-align: center;
    }

    .footer-links {
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
    }

    .footer-links li {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        margin-bottom: 8px;

        text-align: center;
    }

    .footer-links a,
    .footer-links li span {
        text-align: center;
    }


    /* ========================================================
       OUR WEBSITES
       ======================================================== */

    .footer-websites {
        text-align: center;
    }

    .footer-websites .website-link {
        display: flex;
        align-items: center;
        justify-content: center;

        width: fit-content;
        margin: 0 auto 10px;

        gap: 8px;
        text-align: center;
    }


    /* ========================================================
       CONTACT - FULL WIDTH
       ======================================================== */

    .footer-contact {
        grid-column: 1 / -1;

        width: 100%;
        text-align: center;
    }

    .footer-contact .footer-links {
        width: 100%;
    }

    .footer-contact .footer-links li {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        margin-bottom: 9px;

        text-align: center;
    }

    .footer-contact .footer-links span:not(.contact-icon),
    .footer-contact .footer-links a {
        text-align: center;
    }

    .footer-contact .contact-icon {
        flex: 0 0 auto;
        margin-right: 7px;
    }


    /* ───────────────────────────────────────────────────────
       BOTTOM BAR
    ─────────────────────────────────────────────────────── */

    .footer-bottom {
        text-align: center;
    }

    .footer-bottom .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;

        text-align: center;
    }

    .footer-bottom p {
        margin: 0;
        text-align: center;
    }

    .footer-legal {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        text-align: center;
    }

    .footer-legal a {
        text-align: center;
    }


    
/* =========================================================
       MOBILE HEADER
    ========================================================= */

    .site-header {
        position: relative !important;
        z-index: 1000000 !important;
        background: #fff !important;
    }

    .site-header .container {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 88px !important;

        padding: 0 20px !important;

        box-sizing: border-box !important;
    }


    /* =========================================================
       LOGO
    ========================================================= */

    .site-logo {
        display: flex !important;
        align-items: center !important;

        flex: 1 1 auto !important;
        min-width: 0 !important;

        margin: 0 !important;
    }

    .nimbus-logo {
        display: block !important;

        width: 175px !important;
        height: auto !important;

        max-width: 100% !important;

        object-fit: contain !important;
    }


    /* =========================================================
       HEADER CTA
    ========================================================= */

    .header-cta {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 10px !important;

        margin-left: auto !important;

        flex: 0 0 auto !important;

        position: relative !important;
        z-index: 1000002 !important;
    }


    /* =========================================================
       HIDE WHATSAPP ON MOBILE
    ========================================================= */

    .header-cta .header-whatsapp {
        display: none !important;
    }


    /* =========================================================
       TALK TO EXPERT
    ========================================================= */

    .header-cta .btn-whatsapp-quote {
        display: inline-flex !important;

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

        width: 110px !important;
        min-width: 110px !important;

        height: 44px !important;

        padding: 0 !important;

        background: #000080 !important;
        color: #fff !important;

        border: none !important;
        border-radius: 7px !important;

        font-size: .72rem !important;
        font-weight: 700 !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    /* =========================================================
       HAMBURGER
    ========================================================= */

    .hamburger {
        display: flex !important;

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

        flex-direction: column !important;

        width: 40px !important;
        min-width: 40px !important;

        height: 44px !important;

        padding: 0 !important;
        margin: 0 !important;

        gap: 5px !important;

        background: transparent !important;
        border: none !important;

        cursor: pointer !important;

        position: relative !important;
        z-index: 1000003 !important;

        pointer-events: auto !important;
    }


    .hamburger span {
        display: block !important;

        width: 27px !important;
        height: 2.5px !important;

        background: #0c2461 !important;

        border-radius: 2px !important;

        pointer-events: none !important;

        transition: transform .25s ease, opacity .25s ease !important;
    }


    /* =========================================================
       HAMBURGER → X
       IMPORTANT: JS uses .active
    ========================================================= */

    .hamburger.active span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg) !important;
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg) !important;
    }
    


    /* =========================================================
       STOP PAGE SCROLL
    ========================================================= */

    body.menu-open {
        overflow: hidden !important;
    }
    
    /* Hide normal header controls when menu is open */
body.menu-open .header-cta {
    visibility: hidden !important;
    pointer-events: none !important;
}
    
    /* =========================================================
   MOBILE MENU PANEL
========================================================= */

.main-nav {
    display: flex !important;

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    left: auto !important;

    width: 60% !important;
    max-width: 420px !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-direction: column !important;
    align-items: stretch !important;

    background: #ffffff !important;background: #ffffff !important;

    z-index: 999999 !important;

    overflow-y: auto !important;

    transform: translateX(100%) !important;

    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        transform .35s ease,
        visibility .35s ease !important;
}


/* =========================================================
   OPEN MENU
========================================================= */

.main-nav.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.mobile-menu-close {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 14px !important;

    width: 100% !important;
    height: 105px !important;

    flex-shrink: 0 !important;

    padding: 0 28px !important;
    margin: 0 !important;

    background: #f1f1f1 !important;
    color: #333333 !important;
    border-bottom: 1px solid #d8d8d8 !important;

    border: 0 !important;

    cursor: pointer !important;

    text-align: left !important;
}


.mobile-menu-close span {
    font-size: 1.5rem !important;
    font-weight: 300 !important;

    line-height: 1 !important;
}


.mobile-menu-close strong {
    font-size: 0.75rem !important;
    font-weight: 700 !important;

    letter-spacing: 2px !important;
}

/* =========================================================
   MENU LINKS
========================================================= */

.main-nav > a {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 30px !important;

    padding: 0 15px !important;
    margin: 0 !important;

    background: #ffffff !important;
    color: #333333 !important;
    border-bottom: 1px solid #dddddd !important;

    border: 0 !important;

    border-radius: 0 !important;

    font-size: 0.75rem !important;
    font-weight: 400 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;
}


/* RIGHT ARROW */

.main-nav > a::after {
    content: "›" !important;

    font-size: 1.55rem !important;
    font-weight: 300 !important;

    color: #333333 !important;
}


/* ACTIVE LINK */

.main-nav > a.active {
    background: #ffffff !important;
    color: #333333 !important;
}














    /* ========================================================
       HERO — MOBILE
    ======================================================== */

    .hero {
        height: 500px !important;
        min-height: 500px !important;
        padding: 0 !important;
        overflow: hidden;
    }


    .hero-slider {
        height: 500px !important;
    }


    .hero-slide {
        height: 500px !important;
    }


    .hero-slide .container {
        width: 100%;
        height: 100%;
        padding: 0 20px;
    }


    .hero-grid {
        display: block !important;

        width: 100%;
        height: 100% !important;

        min-height: 0 !important;

        overflow: hidden;
    }


    /* ========================================================
       TEXT
    ======================================================== */

   .hero-content {
        position: absolute !important;

        top: 38px !important;
        left: 0 !important;
        right: 0 !important;

        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 0 7% !important;
        margin: 0 !important;

        text-align: center !important;

        z-index: 10 !important;
    }


    .hero-eyebrow {
        display: inline-block;

        margin-bottom: 10px;

        font-size: .58rem;
        letter-spacing: .13em;
    }


    .hero-content h1 {
        margin: 0 0 13px;

        font-size: clamp(2rem, 9vw, 2.6rem);

        line-height: 1.04;
        letter-spacing: -.025em;
    }


    .hero-sub {
        max-width: 330px;

        margin: 0 0 18px;

        font-size: .72rem;

        line-height: 1.55;
    }


    /* ========================================================
       SINGLE CTA
    ======================================================== */

    .hero-cta {
        display: inline-flex;

        min-height: 37px;

        padding: 0 16px;

        gap: 11px;

        border-radius: 5px;

        font-size: .63rem;
    }


    .hero-cta span {
        font-size: .9rem;
    }


    /* ========================================================
       PRODUCT IMAGE
    ======================================================== */

    .hero-visual {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;

        top: 300px !important;
        bottom: auto !important;

        width: 100% !important;
        height: 300px !important;

        margin: 0 !important;

        z-index: 3;
        pointer-events: none;
    }


    .hero-products {
        position: absolute !important;

        left: 50% !important;
        right: auto !important;
        top: 0 !important;
        bottom: auto !important;

        width: 100% !important;
        height: auto !important;

        max-width: none !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;

        object-fit: contain !important;
        object-position: center top !important;

        filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
    }


    /* ========================================================
       SLIDER CONTROLS
    ======================================================== */

     .hero-slider-controls {
        position: absolute !important;

        left: 50% !important;
        bottom: 20px !important;

        transform: translateX(-50%) !important;

        z-index: 20;
    }


    .hero-prev,
    .hero-next {
        width: 27px;
        height: 27px;

        font-size: .72rem;
    }


    .hero-dots {
        display: flex;

        align-items: center;

        gap: 5px;
    }


    .hero-dot {
        width: 6px;
        height: 6px;
    }


    .hero-dot.active {
        width: 20px;
    }


    /* ========================================================
       REMOVE OLD MOBILE HERO ELEMENTS
    ======================================================== */

    .hero-btns,
    .hero-panel,
    .hero-badge,
    .hero-stats {
        display: none !important;
    }
    
    /* ═══════════════════════════════════════════════════════════
   RATING SECTION
════════════════════════════════════════════════════════════ */
    
    .rating {
        padding: 34px 0 40px;
    }

    .rating-header {
        margin-bottom: 18px;
    }

    .rating-eyebrow {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .rating .section-title {
        font-size: 25px;
    }

    .rating .section-sub {
        font-size: 11px;
        max-width: 310px;
    }

    .ratings-pills {
        gap: 8px;
    }

    .rating-pill {
        height: 34px;
        padding: 0 10px;
    }

    .rating-pill-score {
        font-size: 12px;
    }

    .rating-pill-star {
        margin-left: 4px;
        font-size: 16px;
    }

    .rating-pill-divider {
        height: 17px;
        margin: 0 7px;
    }

    .rating-pill-logo {
        max-width: 62px;
        height: 18px;
    }
    
    
    
    /* =========================================
   AS SEEN ON
========================================= */

    .as-seen-on {
        padding: 38px 0 42px;
    }

    .as-seen-on-header {
        margin-bottom: 25px;
    }

    .as-seen-on-eyebrow {
        margin-bottom: 6px;
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .as-seen-on-title {
        font-size: 24px;
        line-height: 1.2;
        padding: 0 15px;
    }

    .as-seen-on-track {
        animation-duration: 22s;
    }

    .as-seen-on-logo {
        width: 115px;
        height: 38px;
        margin-right: 30px;
        flex: 0 0 115px;
    }

    .as-seen-on-logo img {
        max-width: 100px;
        height: 26px;
    }

    
    
    
    
    
    
    
    
    
    
    /*---MOBILE SHOPS----*/
    
    .stores-gateway {
        padding: 50px 0;
    }

    .stores-gateway-header {
        margin-bottom: 25px;
    }

    .stores-gateway-header .section-title {
        font-size: 1.85rem;
    }

    .stores-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .store-card {
        min-height: 230px;
    }

    .store-card-shop .store-card-header,
    .store-card-refurb .store-card-header {
        width: 58%;
        padding: 22px 0 0 22px;
    }

    .store-card-header .store-domain {
        font-size: 1.25rem;
    }

    .store-card-header .store-tagline {
        font-size: .68rem;
    }

    .store-card::after {
        width: 58%;
    }

    .store-cta {
        left: 22px;
        bottom: 22px;

        padding: 11px 15px;

        font-size: .63rem;
    }
    
    .stores-gateway-header .section-title {
        line-height: 1.15;
    }

    .stores-gateway-header .section-title .two-websites,
    .stores-gateway-header .section-title .nimbus-cyan {
        display: block;
    }
    
    /* ============================================================
   WHY CHOOSE NIMBUS - MOBILE
============================================================ */
    
    .why-nimbus {
        padding: 55px 0 35px;
    }

    .why-nimbus-header {
        margin-bottom: 20px;
    }

    .why-nimbus-header .section-title {
        font-size: 1.35rem;
    }

    /* Full width */
    .why-nimbus .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .why-nimbus-stats {
        width: 100%;
        max-width: 100%;

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

        border-radius: 12px;

        margin: 0;
    }

    .why-stat {
        min-height: 82px;

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

        gap: 10px;

        padding: 14px 18px;

        border-bottom:
            1px solid rgba(25, 68, 125, .09);
    }

    /* Remove desktop vertical divider */
    .why-stat::after {
        display: none !important;
    }

    /* Add divider between the two columns */
    .why-stat:nth-child(odd) {
        border-right:
            1px solid rgba(25, 68, 125, .09);
    }

    /* Last row has no bottom border */
    .why-stat:nth-child(5),
    .why-stat:nth-child(6) {
        border-bottom: none;
    }

    .why-stat-icon {
        width: 30px;
        height: 30px;

        font-size: 1.45rem;

        flex-shrink: 0;
    }

    .why-stat-content strong {
        font-size: .95rem;
    }

    .why-stat-content span {
        font-size: .65rem;
    }
    
    /* ============================================================
   WHAT WE OFFER - MOBILE
============================================================ */

.categories-section {
    padding: 42px 0 45px;
}

.categories-header {
    margin-bottom: 18px;
}

.categories-header .section-title {
    font-size: 1.15rem;
}

.offer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.offer-card {
    min-height: 125px;
    padding: 12px;
}

.offer-card img {
    height: 82px;
}

.offer-card span {
    margin-top: 5px;
    font-size: .72rem;
}

.offer-button-wrap {
    margin-top: 16px;
}

.offer-view-all {
    padding: 11px 22px;
    font-size: .7rem;
}

/*------------
ROG SECTION - MOBILE
----------------*/

.rog-section {
        padding: 18px 0 28px;
    }

    .rog-banner {
        min-height: 390px;

        display: block;
    }

    .rog-brand {
        position: absolute;

        top: 20px;
        left: 20px;

        padding: 0;
    }

    .rog-logo {
        width: 78px;
    }

    .rog-content {
        position: relative;

        min-height: 390px;

        justify-content: flex-start;

        padding: 105px 24px 24px;
    }

    .rog-heading {
        max-width: 290px;

        font-size: 1.15rem;
    }

    .rog-tagline {
        font-size: .78rem;
    }

    .rog-description {
        max-width: 255px;

        font-size: .68rem;
        line-height: 1.55;
    }

    .rog-description br {
        display: none;
    }

    .rog-cta {
        margin-top: 2px;
    }

    .rog-visual {
        position: absolute;

        right: 0;
        bottom: 0;

        width: 72%;
        height: 58%;

        min-height: 0;

        z-index: 1;

        opacity: .85;
    }

    .rog-visual::before {
        background:
            linear-gradient(
                90deg,
                #050715 0%,
                rgba(5, 7, 21, .72) 22%,
                transparent 58%
            ),
            linear-gradient(
                0deg,
                rgba(5, 7, 21, .1),
                transparent 40%
            );
    }
    
    /* ============================================================
   OUR SERVICES — MOBILE
============================================================ */

     .our-services {
        padding: 36px 0 48px;
    }

    .our-services-header {
        margin-bottom: 22px;
    }

    .our-services-header .section-title {
        font-size: 1.65rem;
    }


    /* 2 SERVICES IN EACH ROW */

    .services-list {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        width: 100%;

        overflow: visible;

        padding: 0 20px;

        border: none;
        border-radius: 0;

        background: transparent;

        box-shadow: none;
    }


    /* INDIVIDUAL SERVICE BOX */

    .service-item {
        min-height: 145px;

        padding: 20px 12px;

        display: flex;
        flex-direction: column;

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

        border: 1px solid rgba(25, 68, 125, .10);

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

        text-decoration: none;
    }


    /* REMOVE INNER DUPLICATE BORDERS */

    .service-item:nth-child(1),
    .service-item:nth-child(2) {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .service-item:nth-child(7) {
        grid-column: 1 / -1;
    }


    /* ICON */

    .service-icon {
        font-size: 2rem;

        line-height: 1;

        margin-bottom: 12px;
    }


    /* SERVICE NAME */

    .service-name {
        font-size: .78rem;

        line-height: 1.35;

        font-weight: 700;

        text-align: center;
    }
    
    
   
    
    /* ============================================================
TRUSTED PARTNERS - MOBILE
============================================================ */
.trusted-partners {
        padding: 32px 0 40px;
    }

    .trusted-partners .container {
        padding: 0 14px;
    }

    .trusted-partners-header {
        margin-bottom: 18px;
    }

    .trusted-partners-header .section-title {
        font-size: 1.15rem;
    }

    .partners-strip {
        min-height: 64px;
        border-radius: 10px;
    }

    .partners-track {
        min-height: 64px;
        --partners-speed: 16s;
    }

    .partner-logo {
        flex-basis: 120px;
        width: 120px;
        height: 64px;
        padding: 8px 14px;
    }

    .partner-logo::after {
        top: 10px;
        height: calc(100% - 20px);
    }

    .partner-logo img {
        max-height: 100%;
    }
    
/*---------------------------
 TESTIMONIALS - MOBILE
 ------------------------------*/
 
 .testimonials-section {
        padding-top: 50px;
        padding-bottom: 48px;
    }

    .testimonials-header {
        margin-bottom: 26px;
    }

    .testimonials-header .section-title {
        font-size: 1.55rem;
    }

    .testimonials-header .section-sub {
        font-size: .78rem;
    }

    .testimonials-wrapper {
        display: block;
    }

    .testimonials-grid {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 2px 2px 8px;
    }

    .testimonials-grid::-webkit-scrollbar {
        display: none;
    }

    .testimonial-card {
        flex: 0 0 88%;
        scroll-snap-align: start;
        padding: 20px 22px 18px;
    }

    .testimonial-arrow {
        display: none;
    }
    
    
    /*---------------------------
BUSINESS CTA - MOBILE
 ------------------------------*/
 

    .business-cta {
        padding: 24px 0;
    }

    .business-cta-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 23px 30px;
    }

    .business-cta-text h2 {
        font-size: 1.05rem;
    }

    .business-cta-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .business-cta-btn,
    .business-whatsapp {
        flex: 1;
        justify-content: center;
    }
    
        /* ==========================================================
   TESTIMONIAL SECTION
========================================================== */

.testimonials {
        padding: 40px 0;
    }

    .testimonial-header {
        padding: 0 18px;
        margin-bottom: 25px;
    }

    .testimonial-header h2 {
        font-size: 25px;
    }

    .testimonial-header p {
        font-size: 13px;
    }

    .testimonial-slider-wrapper {
        padding: 0 18px;
    }

    .testimonial-slider {
        grid-auto-columns: 85%;
        gap: 14px;
    }

    .testimonial-card {
        min-height: 270px;
        padding: 22px 20px;
    }

    .testimonial-stars {
        font-size: 21px;
        margin-bottom: 15px;
    }

    .testimonial-review {
        font-size: 14px;
    }

    .testimonial-customer {
        padding-top: 18px;
    }

    .testimonial-arrow {
        display: none;
    }

    .testimonial-dots {
        margin-top: 22px;
    }
    
}


@media (max-width: 480px) {

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .footer-brand,
    .footer-contact {
        grid-column: span 1;
    }

    .footer-description {
        max-width: 290px;
    }

    .footer-links li {
        margin-bottom: 9px;
    }

    .footer-bottom .container {
        gap: 7px;
    }
    
  
}


/* --- FLOATING ELEMENTS ------------------------------------- */


/* --- FLOATING WHATSAPP ------------------------------------- */

/* Hidden by default on desktop */
.whatsapp-float {
    display: none;
}

/* Show floating WhatsApp only on mobile */
@media (max-width: 768px) {

    /* Hide desktop WhatsApp button */
    .header-whatsapp {
        display: none;
    }

    /* Show mobile floating WhatsApp */
    .whatsapp-float {
        position: fixed;
        bottom: 90px;
        right: 20px;
        z-index: 999;
        width: 58px;
        height: 58px;
        background: #25D366;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 24px rgba(37,211,102,.5);
        transition: var(--transition);
    }

    .whatsapp-float:hover {
        background: #128C7E;
        transform: scale(1.12);
    }
    

    .whatsapp-tooltip {
        display: none;
    }
    
    .whatsapp-float svg {
    width: 28px;
    height: 28px;
    fill: #fff;
    display: block;
    }
}



.scroll-top {
    position: fixed; bottom: 96px; right: 30px; z-index: 999;
    width: 42px; height: 42px; background: var(--blue); color: #fff; border: none;
    border-radius: 10px; font-size: 1rem; cursor: pointer; box-shadow: var(--shadow);
    opacity: 0; transform: translateY(10px); transition: var(--transition); display: flex;
    align-items: center; justify-content: center;
}
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--navy); }


/* ============================================================
   REDUCED MOTION ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {
    .partners-track {
        animation: none;
        transform: none;
    }
}




/* ------------------ ABOUT PAGE -------------------------------------------- */


/* =========================================
   ABOUT PAGE HERO
========================================= */

.about-page-hero {
    position: relative;
    width: 100%;
    min-height: 560px;
    background: #f7faff;
    overflow: hidden;
}

.about-hero-inner {
    width: 100%;
    min-height: 560px;

    display: grid;
    grid-template-columns: 45% 55%;

    position: relative;
}


/* LEFT */

.about-hero-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 50px 45px 50px max(6vw, 50px);

    background:
        radial-gradient(
            circle at 8% 85%,
            rgba(37, 99, 235, 0.07) 1px,
            transparent 1.5px
        );

    background-size: 14px 14px;
}

.about-hero-eyebrow {
    display: inline-block;
    margin-bottom: 14px;

    color: #075dcc;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-hero-content h1 {
    margin: 0;

    color: #101d45;

    font-size: clamp(2.4rem, 3.6vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 900;
}

.about-hero-content h1 span {
    color: #075dcc;
}

.about-hero-line {
    width: 46px;
    height: 3px;

    margin: 20px 0 16px;

    background: #075dcc;
    border-radius: 10px;
}

.about-hero-content p {
    max-width: 500px;

    margin: 0;

    color: #46536d;

    font-size: 0.94rem;
    line-height: 1.65;
    font-weight: 500;
}


/* RIGHT IMAGE */

.about-hero-image {
    width: 100%;
    min-width: 0;
    min-height: 560px;

    position: relative;
    display: flex;
    align-items: center;

    padding: 35px 55px 35px 25px;
    overflow: hidden;
}

.contact-location-grid {
    position: relative;
    z-index: 1;

    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 245px);

    gap: 16px;
}

.contact-location-card {
    position: relative;
    min-width: 0;
    height: 245px;

    overflow: hidden;
    border-radius: 16px;
    background: #eaf1fa;
}

.contact-location-card img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.contact-location-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 40px 15px 15px;

    color: #fff;

    background: linear-gradient(
        to top,
        rgba(5, 20, 50, 0.9),
        transparent
    );
}

.contact-location-overlay h3 {
    margin: 0 0 5px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

.contact-location-overlay p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}

.contact-location-link {
    display: block;
    text-decoration: none;
    color: inherit;
}


/* BLUE EDGE */

.about-hero-image::after {
    content: "";

    position: absolute;
    z-index: 3;

    top: 0;
    right: 0;

    width: 45px;
    height: 100%;

    background: linear-gradient(
        180deg,
        rgba(7, 92, 204, 0.95),
        rgba(29, 78, 216, 0.72)
    );

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%,
        55% 50%
    );

    pointer-events: none;
}



/* =========================================
   ABOUT — WHO WE ARE
========================================= */

.about-intro {
    padding: 48px 0 !important;
    background: #fff !important;
}

.about-intro-grid {
    display: grid !important;
    grid-template-columns: 38% 62% !important;
    align-items: center !important;
    min-height: 175px !important;
}


/* LEFT SIDE */

.about-intro-text {
    padding-right: 55px !important;
}

.about-intro-text .section-eyebrow {
    display: block !important;
    margin-bottom: 12px !important;
    color: #075dcc !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.about-intro-text h2 {
    margin: 0 0 14px !important;
    color: #101d45 !important;
    font-size: clamp(1.8rem, 2.7vw, 2.45rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    font-weight: 900 !important;
}

.about-intro-text h2 span {
    color: #075dcc !important;
}

.about-intro-text p {
    max-width: 430px !important;
    margin: 0 !important;
    color: #4d5870 !important;
    font-size: .78rem !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
}


/* =========================================
   STATS — ONE HORIZONTAL ROW
========================================= */

.about-intro-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;

    width: 100% !important;
    min-height: 140px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* INDIVIDUAL STAT */

.about-stat-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 140px !important;
    height: 140px !important;

    padding: 10px 15px !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    text-align: center !important;
}


/* VERTICAL SEPARATORS */

.about-stat-card:not(:last-child)::after {
    content: "" !important;

    position: absolute !important;
    top: 8px !important;
    right: 0 !important;

    width: 1px !important;
    height: 124px !important;

    background: #e3e7ee !important;
}


/* ICON */

.about-stat-icon {
    width: 34px !important;
    height: 30px !important;

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

    margin: 0 0 6px !important;

    color: #075dcc !important;

    font-size: 1.35rem !important;
    line-height: 1 !important;
}


/* NUMBER */

.about-stat-number {
    display: block !important;

    margin: 0 0 6px !important;

    color: #075dcc !important;

    font-size: 2.55rem !important;
    line-height: 1 !important;

    letter-spacing: -.045em !important;
    font-weight: 900 !important;
}


/* LABEL */

.about-stat-label {
    display: block !important;

    margin: 0 !important;

    color: #27334d !important;

    font-size: .7rem !important;
    line-height: 1.4 !important;

    font-weight: 600 !important;
}

/* =========================================================
   OUR JOURNEY — DARK TIMELINE
   ========================================================= */

.timeline-section {
    position: relative !important;
    padding: 55px 0 65px !important;
    background: #08264b !important;
    overflow: hidden !important;
}

.timeline-section .container {
    position: relative !important;
    z-index: 2 !important;
}

/* ---------------- HEADING ---------------- */

.timeline-section .section-header {
    text-align: center !important;
    margin: 0 auto 42px !important;
}

.timeline-section .section-eyebrow {
    display: block !important;
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.timeline-section .section-header h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 2rem !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}

.timeline-section .section-header p {
    margin: 8px auto 0 !important;
    color: rgba(255,255,255,.65) !important;
    font-size: .78rem !important;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.timeline {
    position: relative !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* central line */

.timeline::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: rgba(255,255,255,.55) !important;
}


/* =========================================================
   ITEMS
   ========================================================= */

.timeline-item,
.timeline-item.timeline-item-right {
    position: relative !important;
    width: 100% !important;
    min-height: 105px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;
}

.timeline-item {
    justify-content: flex-start !important;
}

.timeline-item.timeline-item-right {
    justify-content: flex-end !important;
}


/* =========================================================
   CONNECTING LINES
   ========================================================= */

.timeline-item::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    width: calc(50% - 25px) !important;
    height: 1px !important;
    background: rgba(255,255,255,.35) !important;
    transform: translateY(-50%) !important;
}

.timeline-item::before {
    left: 50% !important;
}

.timeline-item.timeline-item-right::before {
    left: auto !important;
    right: 50% !important;
}


/* =========================================================
   YEAR BADGE
   ========================================================= */

.timeline-marker {
    position: absolute !important;
    z-index: 10 !important;

    top: 50% !important;
    left: 50% !important;

    width: 46px !important;
    height: 27px !important;

    margin: 0 !important;
    padding: 0 6px !important;

    transform: translate(-50%, -50%) !important;

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

    box-sizing: border-box !important;

    background: #086ee8 !important;
    border: 0 !important;
    border-radius: 7px !important;

    color: #ffffff !important;
    font-size: .55rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    box-shadow:
        0 0 0 4px #08264b,
        0 2px 10px rgba(0,0,0,.3) !important;
}


/* =========================================================
   CARDS
   ========================================================= */

.timeline-card,
.timeline-item .timeline-card,
.timeline-item.timeline-item-right .timeline-card {
    position: relative !important;
    z-index: 5 !important;

    width: 400px !important;
    max-width: calc(50% - 55px) !important;
    min-height: 96px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 17px 20px !important;

    box-sizing: border-box !important;

    background: rgba(20,65,116,.88) !important;

    border: 1px solid rgba(103,170,239,.20) !important;
    border-radius: 7px !important;

    box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* left cards */

.timeline-item:not(.timeline-item-right) .timeline-card {
    margin-right: auto !important;
}


/* right cards */

.timeline-item.timeline-item-right .timeline-card {
    margin-left: auto !important;
}


/* blue accent */

.timeline-card::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 48px !important;
    height: 2px !important;

    background: #1677ff !important;

    border-radius: 7px 0 0 0 !important;
}


/* =========================================================
   TEXT
   ========================================================= */

.timeline-card h3,
.timeline-card .timeline-title {
    display: block !important;

    margin: 0 0 8px !important;

    color: #ffffff !important;

    font-size: .82rem !important;
    line-height: 1.3 !important;

    font-weight: 800 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.timeline-card p,
.timeline-card .timeline-desc {
    display: block !important;

    margin: 0 !important;

    color: rgba(255,255,255,.76) !important;

    font-size: .65rem !important;
    line-height: 1.55 !important;

    font-weight: 400 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.timeline-card em {
    color: rgba(255,255,255,.9) !important;
}

.timeline-card strong {
    color: #ffffff !important;
}


/* =========================================================
   TODAY
   ========================================================= */

.timeline-card-highlight {
    background: rgba(8,94,190,.42) !important;
    border: 1px solid #1197ff !important;
    box-shadow: 0 8px 25px rgba(0,105,220,.18) !important;
}


/* =========================================================
   WHY NIMBUS
   ========================================================= */

.why-nimbus-section {
    position: relative;
    padding: 30px 0 34px !important;
    background: #ffffff !important;
    overflow: hidden;
}

.why-nimbus-section .container {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.why-nimbus-header {
    text-align: center;
    margin-bottom: 18px;
}

.why-nimbus-header h2 {
    margin: 0 !important;

    color: #101d45 !important;

    font-size: 0.95rem !important;
    line-height: 1.2 !important;

    font-weight: 900 !important;

    letter-spacing: 0.01em;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.why-nimbus-grid {
    width: 100%;

    display: grid;

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

    border-top: 1px solid #edf0f5;
    border-bottom: 1px solid #edf0f5;
}


/* ---------------------------------------------------------
   ITEM
   --------------------------------------------------------- */

.why-nimbus-item {
    position: relative;

    min-height: 155px;

    padding: 8px 35px 14px;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    box-sizing: border-box;
}


/* vertical separators */

.why-nimbus-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 8px;
    right: 0;

    width: 1px;
    height: calc(100% - 16px);

    background: #edf0f5;
}


/* ---------------------------------------------------------
   BIG FADED NUMBER
   --------------------------------------------------------- */

.why-number {
    position: absolute;

    top: -3px;
    left: 28px;

    color: #eef1f6;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 3.2rem;
    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.06em;

    user-select: none;

    pointer-events: none;
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.why-icon {
    position: relative;
    z-index: 2;

    width: 48px;
    height: 48px;

    margin: 0 0 10px;

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

    border: 1px solid #aebed8;

    border-radius: 50%;

    background: #ffffff;

    color: #243d70;

    font-size: 1.3rem;
    line-height: 1;
}

.why-icon span {
    display: block;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.why-nimbus-item h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 7px !important;

    color: #101d45 !important;

    font-size: 0.78rem !important;
    line-height: 1.25 !important;

    font-weight: 800 !important;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.why-nimbus-item p {
    position: relative;
    z-index: 2;

    max-width: 180px;

    margin: 0 auto !important;

    color: #414b61 !important;

    font-size: 0.65rem !important;
    line-height: 1.55 !important;

    font-weight: 500 !important;
}



/* =========================================================
   OUR PHILOSOPHY
   ========================================================= */

.philosophy-section {
    position: relative;
    width: 100%;
    min-height: 275px;

    padding: 42px 0 32px;

    background:
        linear-gradient(
            90deg,
            #061b38 0%,
            #092b55 52%,
            #071f40 100%
        );

    color: #fff;

    overflow: hidden;
}


/* subtle background effect */

.philosophy-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 18% 50%,
            rgba(24, 104, 220, .20),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 40%,
            rgba(24, 104, 220, .12),
            transparent 35%
        );

    pointer-events: none;
}


/* dark overlay */

.philosophy-overlay {
    position: absolute;
    inset: 0;

    background: rgba(2, 18, 38, .20);

    pointer-events: none;
}


.philosophy-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.philosophy-layout {
    display: grid;

    grid-template-columns: 38% 62%;

    align-items: center;

    min-height: 200px;
}


/* =========================================================
   LEFT HEADING
   ========================================================= */

.philosophy-heading {
    padding-right: 35px;
}


.philosophy-eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #65a7ff;

    font-size: .68rem;
    line-height: 1;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.philosophy-heading h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(2rem, 3.2vw, 3rem);

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -.045em;
}


.philosophy-heading h2 span {
    color: #1976ff;
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.philosophy-content {
    padding-left: 35px;

    border-left: 1px solid rgba(255,255,255,.18);
}


.philosophy-intro {
    max-width: 560px;

    margin: 0 0 24px;

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

    font-size: .76rem;

    line-height: 1.65;

    font-weight: 500;
}


/* =========================================================
   PILLARS
   ========================================================= */

.philosophy-pillars {
    display: grid;

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

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

    padding-top: 16px;
}


.philosophy-pillar {
    position: relative;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    padding: 0 8px;
}


.philosophy-pillar:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 1px;
    height: 48px;

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


/* =========================================================
   ICON
   ========================================================= */

.philosophy-icon {
    width: 32px;
    height: 32px;

    margin-bottom: 7px;

    display: flex;

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

    color: #fff;

    font-size: 1.25rem;

    line-height: 1;

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

    border-radius: 7px;
}


.philosophy-pillar span {
    color: rgba(255,255,255,.9);

    font-size: .58rem;

    line-height: 1.25;

    font-weight: 600;
}


/* =========================================================
   LET'S WORK TOGETHER — ABOUT CTA
   ========================================================= */

.about-cta-section {
    position: relative;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    overflow: hidden;
}

.about-cta {
    position: relative;
    width: 100%;
    min-height: 105px;

    display: flex;
    align-items: center;

    gap: 22px;
    padding: 20px 30px;

    box-sizing: border-box;

    border-radius: 1px;

    background:
        linear-gradient(
            100deg,
            #064bd7 0%,
            #075ee8 48%,
            #123fd0 100%
        );

    overflow: hidden;
}


/* =========================================================
   SUBTLE BACKGROUND GLOW
   ========================================================= */

.about-cta::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -100px;
    top: -100px;

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

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   HANDSHAKE ICON
   ========================================================= */

.about-cta-icon {
    position: relative;
    z-index: 2;

    flex: 0 0 62px;

    width: 62px;
    height: 62px;

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

    border-radius: 50%;

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

    color: #ffffff;

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

.about-cta-icon .handshake-icon {
    width: 38px;
    height: 38px;

    display: block;

    color: #ffffff;

    fill: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

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

    flex: 1;
    min-width: 0;
}

.about-cta-content h2 {
    margin: 0 0 5px !important;

    color: #ffffff !important;

    font-size: 1.15rem !important;
    line-height: 1.2 !important;

    font-weight: 800 !important;
}

.about-cta-content p {
    max-width: 440px;

    margin: 0 !important;

    color: rgba(255,255,255,.78) !important;

    font-size: .67rem !important;
    line-height: 1.5 !important;

    font-weight: 500 !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.about-cta-actions {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 16px;

    flex-shrink: 0;
}

.about-cta-primary,
.about-cta-whatsapp {
    height: 46px;

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

    box-sizing: border-box;

    text-decoration: none;

    font-size: .68rem;
    font-weight: 800;

    border-radius: 5px;

    transition:
        transform .2s ease,
        background .2s ease;
}


/* =========================================================
   REQUEST QUOTE BUTTON
   ========================================================= */

.about-cta-primary {
    min-width: 172px;

    padding: 0 18px;

    gap: 10px;

    color: #0752c9 !important;

    background: #ffffff;
}

.about-cta-primary span {
    font-size: .9rem;
}


/* =========================================================
   WHATSAPP BUTTON
   ========================================================= */

.about-cta-whatsapp {
    min-width: 132px;

    padding: 0 18px;

    gap: 8px;

    color: #ffffff !important;

    background: transparent;

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

.about-cta-whatsapp .whatsapp-icon {
    width: 19px !important;
    height: 19px !important;

    display: block !important;

    flex-shrink: 0;

    color: #ffffff !important;
    fill: #ffffff !important;
}


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

.about-cta-primary:hover,
.about-cta-whatsapp:hover {
    transform: translateY(-2px);
}











/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .about-page-hero,
    .about-hero-inner {
        min-height: 330px;
    }

    .about-hero-content {
        padding-left: 35px;
        padding-right: 30px;
    }

    .about-hero-content h1 {
        font-size: clamp(2.3rem, 5vw, 3.2rem);
    }

    .about-hero-image::before {
        width: 80px;
    }

    .about-hero-image::after {
        width: 55px;
    }
}

@media (max-width: 768px) {
    
    .about-page-hero {
        min-height: auto;
    }

    .about-hero-inner {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    /* TEXT AREA */
    .about-hero-content {
        min-height: auto;
        padding: 38px 40px 42px;
        background-size: 14px 14px;
    }

    .about-hero-eyebrow {
        margin-bottom: 18px;
        font-size: .72rem;
    }

    .about-hero-content h1 {
        font-size: clamp(2.35rem, 9.5vw, 3rem);
        line-height: 1.02;
        letter-spacing: -0.045em;
    }

    .about-hero-line {
        width: 48px;
        height: 3px;
        margin: 22px 0 18px;
    }

    .about-hero-content p {
        max-width: 100%;
        margin: 0;
        font-size: .92rem;
        line-height: 1.6;
    }

    /* SHOP IMAGE */
    .about-hero-image {
        width: 100%;
        min-height: auto;
        padding: 15px 25px 35px;
        overflow: hidden;
    }

    .contact-location-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 190px);
        gap: 12px;
    }

    .contact-location-card {
        height: 190px;
        border-radius: 14px;
    }

    .contact-location-overlay {
        padding: 35px 10px 12px;
    }

    .contact-location-overlay h3 {
        font-size: 13px;
        line-height: 1.3;
    }

    .contact-location-overlay p {
        font-size: 11px;
        line-height: 1.4;
    }

    /* REMOVE DESKTOP DIAGONAL EFFECTS */

    .about-hero-image::before {
        display: none;
    }

    .about-hero-image::after {
        width: 18px;
    }

    /*-------------- WHO WE ARE --------*/
    
    
   .about-intro {
        padding: 42px 24px !important;
    }

    .about-intro-grid {
        display: block !important;
        min-height: auto !important;
    }

    .about-intro-text {
        padding-right: 0 !important;
        margin-bottom: 32px !important;
    }

    .about-intro-text h2 {
        font-size: clamp(2rem, 9vw, 2.6rem) !important;
        line-height: 1.05 !important;
    }

    .about-intro-text p {
        max-width: 100% !important;
        font-size: .88rem !important;
        line-height: 1.65 !important;
    }

    .about-intro-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;

        min-height: auto !important;

        border-top: 1px solid #e7ebf1 !important;
        border-left: 1px solid #e7ebf1 !important;
    }

    .about-stat-card {
        width: auto !important;
        height: 125px !important;
        min-height: 125px !important;

        padding: 15px 8px !important;

        border-right: 1px solid #e7ebf1 !important;
        border-bottom: 1px solid #e7ebf1 !important;
    }

    .about-stat-card:not(:last-child)::after {
        display: none !important;
    }

    .about-stat-number {
        font-size: 2rem !important;
    }

    .about-stat-label {
        font-size: .72rem !important;
    }
    
    .timeline-section {
        padding: 42px 18px 55px !important;
    }

    .timeline-section .section-header {
        margin-bottom: 38px !important;
    }

    .timeline-section .section-eyebrow {
        font-size: .68rem !important;
        margin-bottom: 10px !important;
    }

    .timeline-section .section-header h2 {
        font-size: 1.8rem !important;
        line-height: 1.08 !important;
    }

    .timeline-section .section-header p {
        max-width: 310px !important;
        font-size: .72rem !important;
        line-height: 1.5 !important;
    }


    /* -----------------------------------------
       TIMELINE CONTAINER
       ----------------------------------------- */

    .timeline {
        position: relative !important;

        width: 100% !important;

        /* space for the vertical line */
        padding-left: 42px !important;

        box-sizing: border-box !important;
    }


    /* vertical line */

    .timeline::before {
        left: 10px !important;
        top: 0 !important;
        bottom: 0 !important;

        width: 2px !important;

        transform: none !important;

        background: rgba(255,255,255,.52) !important;
    }


    /* -----------------------------------------
       EACH ITEM
       ----------------------------------------- */

    .timeline-item,
    .timeline-item.timeline-item-right {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        min-height: 0 !important;

        margin: 0 0 24px !important;

        padding: 0 !important;
    }


    /* remove desktop connector */

    .timeline-item::before,
    .timeline-item.timeline-item-right::before {
        display: none !important;
    }


    /* -----------------------------------------
       YEAR BADGE
       ----------------------------------------- */

    .timeline-marker {
        position: absolute !important;

        left: -32px !important;
        top: 17px !important;

        width: 44px !important;
        height: 27px !important;

        margin: 0 !important;
        padding: 0 5px !important;

        transform: none !important;

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

        z-index: 10 !important;

        background: #086ee8 !important;

        border-radius: 7px !important;

        color: #fff !important;

        font-size: .54rem !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        box-shadow:
            0 0 0 4px #08264b,
            0 3px 10px rgba(0,0,0,.25) !important;
    }


    /* -----------------------------------------
       CARDS
       ----------------------------------------- */

    .timeline-card,
    .timeline-item .timeline-card,
    .timeline-item:not(.timeline-item-right) .timeline-card,
    .timeline-item.timeline-item-right .timeline-card {

        display: block !important;

        position: relative !important;

        width: 100% !important;

        max-width: none !important;

        min-height: 0 !important;

        height: auto !important;

        margin: 0 !important;

        padding: 17px 17px 18px !important;

        box-sizing: border-box !important;

        background: rgba(20,65,116,.9) !important;

        border: 1px solid rgba(103,170,239,.2) !important;

        border-radius: 8px !important;

        overflow: visible !important;
    }


    /* blue accent */

    .timeline-card::before {
        width: 48px !important;
        height: 2px !important;
    }


    /* -----------------------------------------
       TEXT
       ----------------------------------------- */

    .timeline-card h3,
    .timeline-card .timeline-title {

        display: block !important;

        margin: 0 0 8px !important;

        padding: 0 !important;

        color: #fff !important;

        font-size: .78rem !important;

        line-height: 1.35 !important;

        font-weight: 800 !important;

        white-space: normal !important;

        overflow: visible !important;
    }


    .timeline-card p,
    .timeline-card .timeline-desc {

        display: block !important;

        margin: 0 !important;

        padding: 0 !important;

        color: rgba(255,255,255,.76) !important;

        font-size: .66rem !important;

        line-height: 1.58 !important;

        white-space: normal !important;

        overflow: visible !important;
    }


    .timeline-card strong {
        color: #fff !important;
    }

    .timeline-card em {
        color: rgba(255,255,255,.9) !important;
    }


    /* -----------------------------------------
       TODAY
       ----------------------------------------- */

    .timeline-card-highlight {
        background: rgba(8,94,190,.42) !important;

        border: 1px solid #1197ff !important;

        box-shadow:
            0 8px 24px rgba(0,105,220,.18) !important;
            
    }
    
    .why-nimbus-section {
        padding: 34px 20px 40px !important;
    }

    .why-nimbus-header {
        margin-bottom: 20px;
    }

    .why-nimbus-header h2 {
        font-size: 0.95rem !important;
    }


    .why-nimbus-grid {
        grid-template-columns: repeat(2, 1fr);

        border-top: 1px solid #edf0f5;
        border-left: 1px solid #edf0f5;
    }


    .why-nimbus-item {
        min-height: 155px;

        padding: 15px 15px 18px;

        border-right: 1px solid #edf0f5;
        border-bottom: 1px solid #edf0f5;
    }


    .why-nimbus-item:not(:last-child)::after {
        display: none;
    }


    .why-number {
        top: 8px;
        left: 12px;

        font-size: 2.5rem;
    }


    .why-icon {
        width: 44px;
        height: 44px;

        margin-bottom: 9px;

        font-size: 1.15rem;
    }


    .why-nimbus-item h3 {
        font-size: 0.78rem !important;
    }


    .why-nimbus-item p {
        max-width: 145px;

        font-size: 0.64rem !important;
        line-height: 1.5 !important;
    }
    
    .philosophy-section {
        min-height: auto;

        padding: 42px 22px 38px;
    }


    .philosophy-layout {
        display: block;

        min-height: auto;
    }


    .philosophy-heading {
        padding-right: 0;

        margin-bottom: 28px;
    }


    .philosophy-eyebrow {
        margin-bottom: 12px;

        font-size: .66rem;
    }


    .philosophy-heading h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);

        line-height: 1.03;
    }


    .philosophy-content {
        padding-left: 0;

        border-left: 0;

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

        padding-top: 24px;
    }


    .philosophy-intro {
        margin-bottom: 24px;

        font-size: .78rem;

        line-height: 1.6;
    }


    .philosophy-pillars {
        grid-template-columns: repeat(3, 1fr);

        row-gap: 20px;

        padding-top: 20px;
    }


    .philosophy-pillar {
        padding: 0 7px;
    }


    .philosophy-pillar:nth-child(3)::after {
        display: none;
    }


    .philosophy-pillar:nth-child(6)::after {
        display: none;
    }


    .philosophy-pillar:not(:last-child)::after {
        height: 45px;
    }


    .philosophy-icon {
        width: 34px;
        height: 34px;

        font-size: 1.1rem;
    }


    .philosophy-pillar span {
        font-size: .6rem;
    }
    
    .about-cta-section {
        padding: 0 !important;
        margin: 0 !important;
    }

    .about-cta {
        min-height: auto;

        display: grid;

        grid-template-columns: 52px 1fr;

        gap: 15px;

        padding: 24px 20px;

        border-radius: 0;
    }

    .about-cta-icon {
        width: 52px;
        height: 52px;
    }

    .about-cta-icon .handshake-icon {
        width: 32px;
        height: 32px;
    }

    .about-cta-content h2 {
        font-size: 1rem !important;
    }

    .about-cta-content p {
        font-size: .67rem !important;
        line-height: 1.55 !important;
    }

    .about-cta-actions {
        grid-column: 1 / -1;

        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 10px;

        margin-top: 5px;
    }

    .about-cta-primary,
    .about-cta-whatsapp {
        width: 100%;
        min-width: 0;
        height: 43px;

        font-size: .64rem;
    }

    .about-cta-whatsapp .whatsapp-icon {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 480px) {
    
}











/* --- SERVICES PAGE ----------------------------------------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card { background: #fff; border-radius: var(--radius); padding: 32px; border: 2px solid var(--gray-100); transition: var(--transition); }
.service-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-4px); }
.service-icon { font-size: 2.2rem; margin-bottom: 16px; }
.service-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.service-desc  { font-size: .85rem; color: var(--gray-500); line-height: 1.65; }










/* --- CONTACT PAGE ------------------------------------------ */



/* =========================================
   CONTACT HERO SECTION
========================================= */

.contact-hero {
    width: 100%;
    overflow: hidden;
    border: 1px solid #d5e5ff;
    border-radius: 2px;
    background: linear-gradient(
        110deg,
        #f1f7ff 0%,
        #e7f0ff 55%,
        #dceaff 100%
    );
}

.contact-hero-content {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    min-height: 490px;
}

/* LEFT CONTENT */

.contact-hero-text {
    position: relative;
    z-index: 2;
    padding: 55px 20px 55px 65px;
}

.contact-hero-label {
    display: inline-block;
    color: #0756bd;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 22px;
}

.contact-hero-label::after {
    content: "";
    display: block;
    width: 65px;
    height: 3px;
    background: #0756bd;
    margin-top: 15px;
    border-radius: 5px;
}

.contact-hero-text h1 {
    color: #102d53;
    font-size: clamp(38px, 4.2vw, 68px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin: 0 0 18px;
}

.contact-hero-text h1 span {
    display: block;
    color: #0756bd;
}

.contact-hero-text p {
    max-width: 650px;
    color: #63758e;
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 32px;
}

/* BUTTONS */

.contact-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.contact-btn-primary,
.contact-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 25px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-btn-primary {
    background: #0756bd;
    color: #ffffff;
    border: 1px solid #0756bd;
}

.contact-btn-primary:hover {
    background: #063f91;
    border-color: #063f91;
    color: #ffffff;
    transform: translateY(-2px);
}

.contact-btn-secondary {
    background: #ffffff;
    color: #0756bd;
    border: 1px solid #a9caff;
}

.contact-btn-secondary:hover {
    background: #0756bd;
    color: #ffffff;
    border-color: #0756bd;
    transform: translateY(-2px);
}

/* RIGHT IMAGE */

.contact-hero-image {
    position: relative;
    height: 100%;
    min-height: 490px;
    overflow: hidden;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}

.contact-hero-image::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -15%;
    left: 12%;
    width: 75px;
    height: 130%;
    background: rgba(89, 174, 255, 0.20);
    transform: skewX(-27deg);
    pointer-events: none;
}

.contact-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 490px;
    object-fit: cover;
    object-position: center;
}



















.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
.contact-form { background: #fff; border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-control {
    width: 100%; padding: 12px 16px; border: 2px solid var(--gray-200); border-radius: 10px;
    font-size: .9rem; font-family: inherit; color: var(--gray-700); transition: border-color .2s;
    background: #fff;
}
.form-control:focus { outline: none; border-color: var(--blue); }
textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control { cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-success { display: none; background: #f0fdf4; border: 1px solid #86efac; color: #166534;
    padding: 14px 18px; border-radius: 10px; font-size: .875rem; margin-top: 12px; }

/* =========================================================
   NIMBUS LOCATIONS
   ========================================================= */

.nimbus-locations-section {
    width: 100%;
    padding: 70px 0;
    background: #f8fafc;
}


/* ---------- Section Heading ---------- */

.nimbus-locations-heading {
    text-align: center;
    margin-bottom: 40px;
}

.nimbus-locations-heading > span {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #000080;
    text-transform: uppercase;
}

.nimbus-locations-heading h2 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: #0c2461;
}

.nimbus-locations-heading p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}


/* ---------- Location Grid ---------- */

.nimbus-locations-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}


/* ---------- Location Card ---------- */

.nimbus-location-card {
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 300px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nimbus-location-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}


/* ---------- Location Information ---------- */

.nimbus-location-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    min-width: 0;
}

.nimbus-location-type {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #000080;
    text-transform: uppercase;
}

.nimbus-location-info h3 {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #111827;
}

.nimbus-location-info p {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.55;
    color: #6b7280;
}

.nimbus-location-phone {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 600;
    color: #000080;
    text-decoration: none;
}

.nimbus-location-phone:hover {
    text-decoration: underline;
}


/* ---------- Directions Button ---------- */

.nimbus-location-directions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: auto;
    padding: 9px 13px;

    border-radius: 6px;
    background: #000080;
    color: #ffffff !important;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none !important;

    transition: background 0.2s ease,
                transform 0.2s ease;
}

.nimbus-location-directions span {
    font-size: 14px;
    line-height: 1;
}

.nimbus-location-directions:hover {
    background: #000060;
    color: #ffffff !important;
    transform: translateY(-1px);
}


/* ---------- Google Map ---------- */

.nimbus-location-map {
    min-width: 0;
    min-height: 300px;
    overflow: hidden;
    background: #e5e7eb;
}

.nimbus-location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {
    
    /* =========================================
   CONTACT HERO SECTION
========================================= */


.contact-hero {
        width: calc(100% - 40px);
    }

    .contact-hero-content {
        grid-template-columns: 48% 52%;
        min-height: 420px;
    }

    .contact-hero-text {
        padding: 40px 15px 40px 35px;
    }

    .contact-hero-text h1 {
        font-size: 43px;
    }

    .contact-hero-text p {
        font-size: 15px;
    }

    .contact-hero-image,
    .contact-hero-image img {
        min-height: 420px;
    }
    
    
    



    .nimbus-locations-grid {
        gap: 18px;
    }

    .nimbus-location-card {
        grid-template-columns: 45% 55%;
    }

    .nimbus-location-info {
        padding: 24px 20px;
    }

    .nimbus-location-info h3 {
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
    
    /* =========================================
   CONTACT HERO SECTION
========================================= */

.contact-hero {
        width: calc(100% - 24px);
        margin: 18px auto 35px;
        border-radius: 16px;
    }

    .contact-hero-content {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .contact-hero-text {
        width: 100%;
        padding: 35px 22px 25px;
        text-align: left;
    }

    .contact-hero-label {
        font-size: 12px;
        letter-spacing: 2.5px;
        margin-bottom: 18px;
    }

    .contact-hero-label::after {
        width: 48px;
        margin-top: 12px;
    }

    .contact-hero-text h1 {
        font-size: 36px;
        line-height: 1.12;
        letter-spacing: -0.8px;
        margin-bottom: 14px;
    }

    .contact-hero-text p {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 22px;
    }

    .contact-hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .contact-btn-primary,
    .contact-btn-secondary {
        width: 100%;
        min-height: 48px;
        font-size: 14px;
    }

    .contact-hero-image {
        width: 100%;
        height: 250px;
        min-height: 250px;
        clip-path: none;
        border-radius: 0 0 15px 15px;
    }

    .contact-hero-image img {
        width: 100%;
        height: 100%;
        min-height: 250px;
        object-fit: cover;
    }

    .contact-hero-image::before {
        display: none;
    }






    .nimbus-locations-section {
        padding: 45px 0;
    }

    .nimbus-locations-heading {
        margin-bottom: 25px;
    }

    .nimbus-locations-heading > span {
        font-size: 9px;
        letter-spacing: 1.6px;
        margin-bottom: 6px;
    }

    .nimbus-locations-heading h2 {
        font-size: 25px;
        margin-bottom: 7px;
    }

    .nimbus-locations-heading p {
        font-size: 12px;
        line-height: 1.5;
    }


    /* One card per row */

    .nimbus-locations-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    /* Information above map */

    .nimbus-location-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 9px;
    }

    .nimbus-location-info {
        padding: 22px 20px;
    }

    .nimbus-location-type {
        font-size: 8px;
        letter-spacing: 1.4px;
        margin-bottom: 7px;
    }

    .nimbus-location-info h3 {
        font-size: 17px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .nimbus-location-info p {
        font-size: 11px;
        line-height: 1.55;
        margin-bottom: 12px;
    }

    .nimbus-location-phone {
        font-size: 11px;
        margin-bottom: 16px;
    }

    .nimbus-location-directions {
        padding: 9px 12px;
        font-size: 10px;
    }


    /* Map */

    .nimbus-location-map {
        width: 100%;
        height: 230px;
        min-height: 230px;
    }

    .nimbus-location-map iframe {
        width: 100%;
        height: 230px;
        min-height: 230px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
    
    
    .contact-hero-text {
        padding: 28px 18px 22px;
    }

    .contact-hero-text h1 {
        font-size: 32px;
    }

    .contact-hero-image {
        height: 210px;
        min-height: 210px;
    }

    .contact-hero-image img {
        min-height: 210px;
    }
    
    
    
    
    
    
    
    
    
    

    .nimbus-locations-section {
        padding: 40px 0;
    }

    .nimbus-locations-heading h2 {
        font-size: 23px;
    }

    .nimbus-locations-heading p {
        font-size: 11px;
    }

    .nimbus-location-info {
        padding: 20px 18px;
    }

    .nimbus-location-info h3 {
        font-size: 16px;
    }

    .nimbus-location-info p {
        font-size: 10.5px;
    }

    .nimbus-location-map {
        height: 220px;
        min-height: 220px;
    }

    .nimbus-location-map iframe {
        height: 220px;
        min-height: 220px;
    }

}











/* =========================================
   FOOTER — DESKTOP SPACING REFINEMENT
   ========================================= */

@media (min-width: 769px) {

    .site-footer .footer-top {
        padding: 34px 0 22px;
    }

    .site-footer .footer-grid {
        grid-template-columns:
            minmax(190px, 1.35fr)
            minmax(100px, .9fr)
            minmax(120px, .9fr)
            minmax(145px, 1.05fr)
            minmax(135px, 1fr)
            minmax(190px, 1.35fr);

        column-gap: 24px;
        row-gap: 24px;
        align-items: start;
    }

    /* Brand logo and description */
    .site-footer .footer-brand {
        min-width: 0;
    }

    .site-footer .footer-description {
        line-height: 1.7;
        margin-bottom: 14px;
    }

    /* Social icons */
    .site-footer .footer-socials {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 13px;
    }

    .site-footer .footer-socials a {
        width: 20px;
        height: 22px;
        flex: 0 0 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .site-footer .footer-socials svg {
        width: 17px;
        height: 17px;
        display: block;
    }

    /* Headings and links */
    .site-footer .footer-heading {
        margin-bottom: 13px;
        line-height: 1.4;
    }

    .site-footer .footer-links li {
        margin-bottom: 8px;
    }

    .site-footer .footer-links li:last-child {
        margin-bottom: 0;
    }

    /* Contact readability */
    .site-footer .footer-contact .footer-links li {
        align-items: flex-start;
        line-height: 1.55;
    }

    /* Bottom bar */
    .site-footer .footer-bottom {
        padding: 10px 0;
    }
}

/* Tablet: avoid forcing six wide columns */
@media (min-width: 769px) and (max-width: 1100px) {
    .site-footer .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 24px;
    }

    .site-footer .footer-brand,
    .site-footer .footer-contact {
        grid-column: span 1;
    }
}










/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-panel { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .rog-grid { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .section { padding: 56px 0; }
    .section-title { font-size: 1.6rem; }
    .topbar { display: none; }
    .main-nav { display: none; position: fixed; top: 70px; left: 0; right: 0; background: #fff;
        flex-direction: column; gap: 0; padding: 16px; box-shadow: var(--shadow-lg); z-index: 800;
        border-top: 1px solid var(--gray-100); }
    .main-nav.open { display: flex; }
    .nav-link { padding: 14px 16px; border-radius: 10px; font-size: .95rem; }
    .nav-dropdown .dropdown-menu { position: static; transform: none; box-shadow: none;
        border: 1px solid var(--gray-100); opacity: 1; visibility: visible;
        pointer-events: all; margin-top: 8px; }
    .hamburger { display: flex; }
    .btn-whatsapp { display: none; }
    .hero { padding: 60px 0 40px; }
    .hero-btns { flex-direction: column; }
    .hero-stats { gap: 20px; }
    .stores-grid { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-top { padding: 40px 0 24px; }
    .contact-cta-inner { flex-direction: column; text-align: center; }
    .services-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .rog-stats { grid-template-columns: 1fr; }
    .whatsapp-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
    .scroll-top { right: 20px; bottom: 82px; }
    .hero-sub { font-size: .9rem; }
    
    
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-stat .num { font-size: 1.4rem; }
}

/* ============================================================
   INNER PAGES — Shared styles
   ============================================================ */

/* Page Hero */
.page-hero {
    background: linear-gradient(135deg, var(--navy) 0%, #1a3a8a 100%);
    color: #fff;
    padding: 80px 0 60px;
    text-align: center;
}
.page-hero-sm { padding: 60px 0 40px; }
.page-hero-content h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 12px; }
.page-hero-content p  { font-size: 1.05rem; color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto; }
.page-hero-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    color: var(--electric);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}



/* ── ABOUT PAGE ── */
.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.about-intro-text h2 { font-size: 1.8rem; margin-bottom: 16px; color: var(--navy); }
.about-intro-text p  { color: var(--gray-700); margin-bottom: 14px; line-height: 1.75; }
.about-intro-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.about-stat-card {
    background: var(--navy);
    color: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
}
.about-stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--electric);
    line-height: 1;
    margin-bottom: 6px;
}
.about-stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* Timeline */
.timeline { position: relative; padding: 20px 0; }
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--electric), var(--blue));
}
.timeline-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 calc(50% + 40px) 40px 0;
    position: relative;
}
.timeline-item-right {
    flex-direction: row-reverse;
    padding: 0 0 40px calc(50% + 40px);
}
.timeline-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: var(--electric);
    font-weight: 800;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 20px;
    border: 3px solid var(--electric);
    white-space: nowrap;
    top: 0;
    z-index: 1;
}
.timeline-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}
.timeline-card-highlight { border-color: var(--electric); border-width: 2px; }
.timeline-card h3 { font-size: 1.1rem; color: var(--navy); margin-bottom: 8px; }
.timeline-card p  { color: var(--gray-700); font-size: 0.95rem; line-height: 1.7; }

/* Offerings */
.offerings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.offering-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 24px 20px;
    border: 1px solid var(--gray-200);
    transition: box-shadow .2s, transform .2s;
}
.offering-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.offering-icon { font-size: 2rem; margin-bottom: 14px; }
.offering-card h3 { font-size: 1rem; color: var(--navy); margin-bottom: 8px; }
.offering-card p  { font-size: 0.88rem; color: var(--gray-500); line-height: 1.65; }

/* Brands */
.brands-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}
.brand-pill {
    background: #fff;
    border: 2px solid var(--gray-200);
    border-radius: 40px;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy);
    transition: border-color .2s, box-shadow .2s;
}
.brand-pill:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(26,86,219,.12); }

/* Clients grid */
.clients-grid-about {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.client-tag {
    background: var(--gray-100);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.88rem;
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
}

/* Pillars */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pillar-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 28px 24px;
    transition: background .2s;
}
.pillar-card:hover { background: rgba(255,255,255,0.1); }
.pillar-icon { font-size: 2rem; margin-bottom: 14px; }
.pillar-card h3 { color: var(--electric); font-size: 1.05rem; margin-bottom: 10px; }
.pillar-card p  { color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.65; }








/*----PRODUCTS PAGE------*/

/* =========================================================
   PRODUCTS PAGE — HERO
========================================================= */

.products-page-hero {
    position: relative;
    width: 100%;
    min-height: 320px;
    background: #f5f9fd;
    overflow: hidden;
}


/* HERO INNER */

.products-hero-inner {
    width: 100%;
    min-height: 320px;
    display: grid;
    grid-template-columns: 48% 52%;
    position: relative;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.products-hero-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 42px 45px 42px max(6vw, 50px);

    background:
        radial-gradient(
            circle at 8% 82%,
            rgba(37, 99, 235, 0.07) 1px,
            transparent 1.5px
        );

    background-size: 14px 14px;
}


/* EYEBROW */

.products-hero-eyebrow {
    display: block;
    margin-bottom: 12px;

    color: #075dcc;

    font-size: 0.68rem;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* HEADING */

.products-hero-content h1 {
    margin: 0;

    color: #101d45;

    font-size: clamp(2.6rem, 4vw, 4rem);
    line-height: 1.02;

    font-weight: 900;
    letter-spacing: -0.05em;
}

.products-hero-content h1 span {
    color: #075dcc;
}


/* DESCRIPTION */

.products-hero-content > p {
    max-width: 500px;

    margin: 18px 0 0;

    color: #4d5870;

    font-size: 0.82rem;
    line-height: 1.65;

    font-weight: 500;
}


/* =========================================================
   TRUST POINTS
========================================================= */

.products-hero-points {
    display: flex;
    align-items: center;

    margin-top: 25px;

    gap: 28px;
}


.products-hero-point {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;
}


.products-point-icon {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

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

    color: #075dcc;

    border: 1px solid rgba(7, 93, 204, 0.45);
    border-radius: 50%;

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


.products-point-icon svg {
    width: 17px;
    height: 17px;

    display: block;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.products-hero-point span {
    color: #263550;

    font-size: 0.61rem;
    line-height: 1.35;

    font-weight: 700;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.products-hero-visual {
    position: relative;

    min-height: 320px;

    overflow: hidden;
}


.products-hero-visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;
}


/* SOFT TRANSITION BETWEEN CONTENT + IMAGE */

.products-hero-visual::before {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    left: -1px;

    width: 95px;
    height: 100%;

    background: #f5f9fd;

    clip-path: polygon(
        0 0,
        100% 0,
        0 100%
    );
}


/* BLUE EDGE */

.products-hero-visual::after {
    content: "";

    position: absolute;

    z-index: 3;

    top: 0;
    right: 0;

    width: 55px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            rgba(7, 93, 204, 0.92),
            rgba(29, 78, 216, 0.62)
        );

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%,
        55% 50%
    );
}

/* =========================================================
   PRODUCTS PAGE — SHOP BY CATEGORY
========================================================= */

.products-categories-section {
    position: relative;
    width: 100%;
    padding: 30px 0 34px;
    background: #ffffff;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.products-section-heading {
    margin-bottom: 18px;
}

.products-section-heading h2 {
    margin: 0 0 5px !important;

    color: #101d45 !important;

    font-size: 1.35rem !important;
    line-height: 1.2 !important;

    font-weight: 900 !important;
    letter-spacing: -0.025em;
}

.products-section-heading p {
    margin: 0 !important;

    color: #69758a !important;

    font-size: 0.68rem !important;
    line-height: 1.5 !important;

    font-weight: 500;
}


/* =========================================================
   CATEGORY GRID
========================================================= */

.products-category-grid {
    display: grid;

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

    gap: 12px;

    width: 100%;
}


/* =========================================================
   CATEGORY CARD
========================================================= */

.product-category-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 185px;

    overflow: hidden;

    text-decoration: none !important;

    background: #f7faff;

    border: 1px solid #edf1f6;

    border-radius: 8px;

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


.product-category-card:hover {
    transform: translateY(-3px);

    border-color: rgba(7, 93, 204, 0.18);

    box-shadow:
        0 10px 25px rgba(20, 50, 100, 0.10);
}


/* =========================================================
   CATEGORY IMAGE
========================================================= */

.product-category-image {
    width: 100%;
    height: 105px;

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

    padding: 10px 14px 4px;

    box-sizing: border-box;

    overflow: hidden;
}


.product-category-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.25s ease;
}


.product-category-card:hover .product-category-image img {
    transform: scale(1.04);
}


/* =========================================================
   CATEGORY CONTENT
========================================================= */

.product-category-content {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 7px 12px 11px;
}


.product-category-content h3 {
    margin: 0 0 4px !important;

    color: #101d45 !important;

    font-size: 0.68rem !important;
    line-height: 1.25 !important;

    font-weight: 800 !important;
}


.product-category-content p {
    max-width: 100%;

    margin: 0 !important;

    color: #69758a !important;

    font-size: 0.55rem !important;
    line-height: 1.35 !important;

    font-weight: 500;
}


/* =========================================================
   EXPLORE LINK
========================================================= */

.product-category-content span {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 8px;

    color: #075dcc;

    font-size: 0.57rem;

    line-height: 1;

    font-weight: 800;
}


.product-category-content span b {
    font-size: 0.85rem;

    font-weight: 500;

    transition: transform 0.2s ease;
}


.product-category-card:hover .product-category-content span b {
    transform: translateX(3px);
}

/* =========================================================
   SHOP BY CATEGORY — TYPOGRAPHY REFINEMENT
========================================================= */

.products-section-heading h2 {
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
}

.products-section-heading p {
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
}


/* CATEGORY CARD */

.product-category-content h3 {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
}

.product-category-content p {
    font-size: 0.65rem !important;
    line-height: 1.45 !important;
}

.product-category-content span {
    font-size: 0.65rem !important;
}

.product-category-content span b {
    font-size: 0.9rem !important;
}


/* =========================================================
   PRODUCTS PAGE — ROG BANNER
========================================================= */

.products-rog-section {
    width: 100%;
    padding: 0 0 30px;
    background: #ffffff;
}


/* =========================================================
   ROG BANNER
========================================================= */

.products-rog-banner {
    position: relative;

    width: 100%;
    min-height: 160px;
    max-height: 100%;

    display: grid;
    grid-template-columns: 48% 52%;

    background-color: #080b14;
    background-image: url("/test/images/rog-banner.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 8px;

    box-shadow:
        0 8px 22px rgba(10, 20, 45, 0.12);
        
}

.products-rog-visual{
    display: none;
}

/* subtle gaming glow 

.products-rog-banner::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: 35%;
    top: -190px;

    background:
        radial-gradient(
            circle,
            rgba(225, 0, 80, 0.28) 0%,
            rgba(120, 0, 80, 0.12) 35%,
            transparent 70%
        );

    pointer-events: none;
    
}*/


/* =========================================================
   LEFT CONTENT
========================================================= */

.products-rog-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 25px 25px 25px 30px;
}


.products-rog-eyebrow {
    display: block;

    margin-bottom: 6px;

    color: #a8adba;

    font-size: 0.56rem;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.products-rog-content h2 {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: 1.3rem !important;
    line-height: 1.12 !important;

    font-weight: 900 !important;

    letter-spacing: -0.025em;
}


.products-rog-content h2 span {
    color: #ffffff;
}


.products-rog-content p {
    margin: 7px 0 12px !important;

    color: rgba(255, 255, 255, 0.68) !important;

    font-size: 0.63rem !important;
    line-height: 1.4 !important;

    font-weight: 500;
}


/* =========================================================
   BUTTON
========================================================= */

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

    width: fit-content;

    min-height: 29px;

    padding: 0 12px;

    gap: 9px;

    color: #ffffff !important;

    background: transparent;

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

    border-radius: 4px;

    text-decoration: none !important;

    font-size: 0.58rem;

    line-height: 1;

    font-weight: 700;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.products-rog-btn span {
    font-size: 0.75rem;

    transition: transform 0.2s ease;
}


.products-rog-btn:hover {
    background: rgba(255, 255, 255, 0.1);

    border-color: #ffffff;

    transform: translateY(-1px);
}


.products-rog-btn:hover span {
    transform: translateX(3px);
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.products-rog-visual {
    position: relative;
    min-width: 0;
    min-height: 145px;
    height: auto;
    overflow: hidden;
}


.products-rog-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 145px;
    object-fit: cover;
    object-position: center center;
}


/* dark gradient over image */

.products-rog-visual::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(8, 10, 18, 0.45) 0%,
        rgba(8, 10, 18, 0.12) 24%,
        transparent 55%
    );

    pointer-events: none;
}



/*-- =========================================================
     TRENDING NOW — NIMBUS COMPUTER
========================================================= --*/

.trending-section {
    width: 100%;
    padding: 44px 0;
    background: #ffffff;
    font-family: inherit;
    box-sizing: border-box;
}

.trending-section *,
.trending-section *::before,
.trending-section *::after {
    box-sizing: border-box;
}

.trending-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Section Header */
.trending-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.trending-heading h2 {
    margin: 0 0 8px;
    color: #171717;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.6px;
}

.trending-heading p {
    max-width: 600px;
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

/* View All Link */
.trending-view-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding-bottom: 3px;
    color: #171717;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.trending-view-all:hover {
    color: #555;
}

.trending-view-all span {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.trending-view-all:hover span {
    transform: translateX(3px);
}

/* Carousel Wrapper */
.trending-carousel {
    position: relative;
    width: 100%;
}

/* Horizontal Product Track */
.trending-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 4);
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    padding: 2px 2px 12px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.trending-track::-webkit-scrollbar {
    display: none;
}

/* Product Card */
.trending-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    scroll-snap-align: start;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.trending-card:hover {
    border-color: #d8d8d8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* Product Image */
.trending-image-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.trending-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 220px;
    padding: 18px;
    overflow: hidden;
    background: #ffffff;
}

.trending-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
}

.trending-card:hover .trending-image img {
    transform: scale(1.035);
}

/* Product Information */
.trending-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 17px;
    border-top: 1px solid #f0f0f0;
}

.trending-info h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 100%;
    min-height: 45px;
    margin: 0 0 10px;
    color: #202020;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.trending-info p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    width: 100%;
    margin: 0 0 16px;
    color: #707070;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.65;
}

/* Product Link */
.trending-product-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 8px;
    color: #171717;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.trending-product-link:hover {
    color: #555;
}

.trending-product-link span {
    font-size: 17px;
    transition: transform 0.2s ease;
}

.trending-product-link:hover span {
    transform: translateX(3px);
}

/* Carousel Navigation Arrows */
.trending-arrow {
    position: absolute;
    z-index: 3;
    top: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #222222;
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}

.trending-arrow:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #cccccc;
}

.trending-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.trending-prev {
    left: -18px;
}

.trending-next {
    right: -18px;
}












/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    
    /*----SHOP BY CATEGORY-----*/
    .products-category-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
     /*-- =========================================================
     TRENDING NOW — NIMBUS COMPUTER
========================================================= --*/
    
    .trending-section {
        padding: 36px 0;
    }

    .trending-container {
        padding: 0 22px;
    }

    .trending-track {
        grid-auto-columns: calc((100% - 40px) / 3);
        gap: 20px;
    }

    .trending-image {
        height: 200px;
    }

    .trending-arrow {
        top: 95px;
    }
}
    
}

@media (max-width: 900px) {
    
    /*----PRODUCT HERO------*/

    .products-hero-inner {
        grid-template-columns: 50% 50%;
    }

    .products-hero-content {
        padding-left: 35px;
        padding-right: 30px;
    }

    .products-hero-content h1 {
        font-size: clamp(2.25rem, 5vw, 3.2rem);
    }

    .products-hero-points {
        gap: 16px;
    }

    .products-hero-point span {
        font-size: 0.56rem;
    }
    
    /*---ROG SECTION-----*/
    .products-rog-banner {
        grid-template-columns: 50% 50%;
    }

    .products-rog-content {
        padding-left: 22px;
    }

    .products-rog-content h2 {
        font-size: 1.15rem !important;
    }
    
    /*-- =========================================================
     TRENDING NOW — NIMBUS COMPUTER
========================================================= --*/

    .trending-heading h2 {
        font-size: 26px;
    }

    .trending-heading p {
        font-size: 13px;
    }

    .trending-track {
        grid-auto-columns: calc((100% - 18px) / 2);
        gap: 18px;
    }

    .trending-image {
        height: 190px;
        padding: 14px;
    }

    .trending-arrow {
        top: 90px;
        width: 36px;
        height: 36px;
    }

    .trending-prev {
        left: -12px;
    }

    .trending-next {
        right: -12px;
    }

}


@media (max-width: 768px) {
    
    /*------PRODUCT HERO-----*/
    .products-page-hero {
        min-height: auto !important;
    }

    .products-hero-inner {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
    }

    /* CONTENT */
    .products-hero-content {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 40px 24px 34px !important;
    }

    .products-hero-eyebrow {
        margin-bottom: 15px !important;
        font-size: 0.67rem !important;
        letter-spacing: 0.16em !important;
    }

    .products-hero-content h1 {
        font-size: clamp(2.35rem, 10vw, 3.1rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.05em !important;
    }

    .products-hero-content > p {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 17px !important;
        font-size: 0.82rem !important;
        line-height: 1.6 !important;
    }


    /* TRUST POINTS */
    .products-hero-points {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin-top: 25px !important;
    }

    .products-hero-point {
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
        gap: 7px !important;
    }

    .products-point-icon {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    .products-point-icon svg {
        width: 17px !important;
        height: 17px !important;
    }

    .products-hero-point span {
        display: block !important;
        width: 100% !important;
        font-size: 0.56rem !important;
        line-height: 1.35 !important;
    }


    /* IMAGE — FULL WIDTH BELOW CONTENT */
    .products-hero-visual {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 230px !important;
        min-height: 230px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .products-hero-visual img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .products-hero-visual::before {
        display: none !important;
    }

    .products-hero-visual::after {
        width: 38px !important;
        opacity: 0.9 !important;
    }
    
    /*-----SHOP BY CATEGORY-------*/
    
    .products-categories-section {
        padding: 34px 20px 40px !important;
    }


    .products-section-heading {
        margin-bottom: 18px;
    }


    .products-section-heading h2 {
        font-size: 1.35rem !important;
    }


    .products-section-heading p {
        font-size: 0.67rem !important;
        line-height: 1.5 !important;
    }


    .products-category-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }


    .product-category-card {
        min-height: 190px;

        border-radius: 8px;
    }


    .product-category-image {
        height: 108px;

        padding: 10px 10px 3px;
    }


    .product-category-content {
        padding: 7px 10px 11px;
    }


    .product-category-content h3 {
        font-size: 0.68rem !important;
    }


    .product-category-content p {
        font-size: 0.55rem !important;
        line-height: 1.4 !important;
    }


    .product-category-content span {
        font-size: 0.56rem;
    }
    .products-section-heading h2 {
        font-size: 1.45rem !important;
    }

    .products-section-heading p {
        font-size: 0.72rem !important;
    }

    .product-category-card {
        min-height: 195px !important;
    }

    .product-category-image {
        height: 110px !important;
    }

    .product-category-content h3 {
        font-size: 0.78rem !important;
    }

    .product-category-content p {
        font-size: 0.62rem !important;
    }

    .product-category-content span {
        font-size: 0.62rem !important;
    }
    
    /*----ROG SECTION-----*/
    
    .products-rog-section {
        padding: 0 20px 30px !important;
    }


    .products-rog-banner {
        display: flex !important;
        flex-direction: column !important;

        min-height: auto;
        background-image: none !important;
        background:
        linear-gradient(
            100deg,
            #080b14 0%,
            #111526 48%,
            #080a12 100%
        )

        border-radius: 20px;
    }
    
    


    /* IMAGE FIRST */

    .products-rog-visual {
        display: block;
        order: 1;

        width: 100%;

        height: 125px;
        min-height: 125px;
        overflow: hidden;
        border-radius: 20px;
    }


    /* CONTENT BELOW IMAGE */

    .products-rog-content {
        order: 2;

        padding: 22px 20px 23px;
    }


    .products-rog-eyebrow {
        font-size: 0.54rem;
        margin-bottom: 7px;
    }


    .products-rog-content h2 {
        font-size: 1.18rem !important;
        line-height: 1.12 !important;
    }


    .products-rog-content p {
        margin: 7px 0 12px !important;

        font-size: 0.61rem !important;
    }


    .products-rog-btn {
        min-height: 30px;

        font-size: 0.57rem;
    }


    .products-rog-visual::before {
        background:
            linear-gradient(
                180deg,
                rgba(8, 10, 18, 0.05),
                rgba(8, 10, 18, 0.30)
            );
    }
    
    /*-- =========================================================
     TRENDING NOW — NIMBUS COMPUTER
========================================================= --*/
    
    .trending-section {
        padding: 26px 0 30px;
        overflow: hidden;
    }

    .trending-container {
        width: 100%;
        padding: 0 16px;
    }

    .trending-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 22px;
    }

    .trending-heading h2 {
        font-size: 25px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .trending-heading p {
        font-size: 13px;
        line-height: 1.6;
    }

    .trending-view-all {
        font-size: 13px;
    }

    /* Stack every product vertically */
    .trending-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px;
        width: 100%;
        overflow: visible !important;
        padding: 0;
        scroll-snap-type: none;
    }

    /* Full-width product card */
    .trending-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        height: auto;
        border: 1px solid #e8e8e8;
        border-radius: 12px;
        transform: none;
    }

    .trending-card:hover {
        transform: none;
        box-shadow: none;
    }

    /* Product image */
    .trending-image {
        width: 100%;
        height: 190px;
        padding: 18px;
        background: #fff;
    }

    .trending-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Product details */
    .trending-info {
        display: flex;
        flex-direction: column;
        padding: 15px;
        min-height: 0;
    }

    .trending-info h3 {
        min-height: 0;
        margin: 0 0 14px;
        font-size: 15px;
        line-height: 1.5;
    }

    .trending-info p {
        display: none !important;
    }

    .trending-product-link {
        margin-top: 0;
        padding-top: 0;
        font-size: 13px;
    }

    /* No carousel arrows in vertical mode */
    .trending-arrow {
        display: none !important;
    }
}

@media (max-width: 480px) {
    
    /*----SHOP BY CATEGORY---*/
    
    .products-category-grid {
        gap: 8px;
    }


    .product-category-card {
        min-height: 180px;
    }


    .product-category-image {
        height: 98px;
    }


    .product-category-content {
        padding-left: 9px;
        padding-right: 9px;
    }
    
    /*----ROG SECTION----*/
    .products-rog-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .products-rog-visual {
        height: 130px;
        min-height: 130px;
    }
    
    /*-- =========================================================
     TRENDING NOW — NIMBUS COMPUTER
========================================================= --*/
    
    .trending-container {
        padding: 0 16px;
    }

    .trending-track {
        grid-auto-columns: 88%;
        gap: 12px;
    }

    .trending-image {
        height: 165px;
    }

    .trending-info {
        padding: 12px;
    }
    
     }
















/*-------------------------Achievements PAGE----------------------------------*/



/* =========================================================
   AWARDS & RECOGNITIONS
   ========================================================= */

.achievements-awards-section {
    width: 100%;
    padding: 42px 0 55px;
    background: #ffffff;
}


/* ---------- Section Heading ---------- */

.achievements-section-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.achievements-heading-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;

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

    border-radius: 50%;
    background: #eef8fd;

    font-size: 27px;
}

.achievements-heading-content {
    min-width: 0;
}

.achievements-heading-content > span {
    display: block;
    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: #4d83ad;
    text-transform: uppercase;
}

.achievements-heading-content h2 {
    margin: 0 0 2px;

    font-size: 31px;
    line-height: 1.1;
    font-weight: 700;
    color: #0c2461;
}

.achievements-heading-content p {
    margin: 0;

    font-size: 11px;
    line-height: 1.4;
    color: #5f6b7a;
}


/* ---------- Awards Grid ---------- */

.achievements-awards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}


/* ---------- Award Card ---------- */

.achievement-award-card {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
    box-sizing: border-box;
}


.achievement-award-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(0,0,0,.12);
}

/* ---------- Award Image ---------- */

.achievement-award-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

.achievement-award-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 7px;
}


/* ---------- Award Caption ---------- */

.achievement-award-caption {
    padding: 11px 12px 13px;
    text-align: center;
    border-top: 1px solid #eef1f4;
    background: #fff;
}

.achievement-award-caption h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    color: #0c2461;
}



/* =========================================================
   PHOTO GALLERY
   ========================================================= */

.achievements-gallery-section {
    width: 100%;
    padding: 42px 0 55px;
    background: #f8fafc;
}


/* ---------- Gallery Heading ---------- */

.achievements-gallery-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.achievements-gallery-heading .achievements-heading-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;

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

    border-radius: 50%;
    background: #ffffff;

    font-size: 27px;
    color: #0c2461;
}

.achievements-gallery-heading .achievements-heading-content {
    min-width: 0;
}

.achievements-gallery-heading .achievements-heading-content > span {
    display: block;
    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: #4d83ad;
    text-transform: uppercase;
}

.achievements-gallery-heading .achievements-heading-content h2 {
    margin: 0 0 2px;

    font-size: 31px;
    line-height: 1.1;
    font-weight: 700;
    color: #0c2461;
}

.achievements-gallery-heading .achievements-heading-content p {
    margin: 0;

    font-size: 11px;
    line-height: 1.4;
    color: #5f6b7a;
}


/* ---------- View All Button ---------- */

.achievements-view-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-left: auto;
    padding: 9px 14px;

    background: #000080;
    color: #ffffff !important;

    border-radius: 6px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none !important;
    white-space: nowrap;

    transition: background .2s ease, transform .2s ease;
}

.achievements-view-all span {
    font-size: 14px;
}

.achievements-view-all:hover {
    background: #000060;
    color: #ffffff !important;
    transform: translateY(-1px);
}


/* ---------- Gallery Grid ---------- */

.achievements-gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}


/* ---------- Gallery Card ---------- */

.achievement-gallery-card {
    display: block;

    width: 100%;
    aspect-ratio: 1.35 / 1;

    padding: 4px;

    background: #ffffff;
    border: 1px solid #e1e6eb;
    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    text-decoration: none;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.achievement-gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.11);
}

.achievement-gallery-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 7px;

    transition: transform .3s ease;
}

.achievement-gallery-card:hover img {
    transform: scale(1.02);
}


.achievement-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.92);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.achievement-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.achievement-lightbox img {
    display: block;
    max-width: 90%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 5px;
}

.achievement-lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

body.achievement-lightbox-open {
    overflow: hidden;
}

.achievement-award-image {
    cursor: zoom-in;
}



/* ACHIEVEMENT GALLERY LIGHTBOX */

.achievement-gallery-card {
    cursor: zoom-in;
}

.achievement-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.92);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.achievement-gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.achievement-gallery-lightbox img {
    max-width: 90%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 5px;
}

.achievement-gallery-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 30px;
    cursor: pointer;
}

body.achievement-gallery-open {
    overflow: hidden;
}












/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    
}


@media (max-width: 900px) {
    

    
    /*-- =========================================================
     AWARDS & RECOGNITIONS
     ========================================================= --*/
     
     .achievements-awards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
    
    /* =========================================================
   PHOTO GALLERY
   ========================================================= */
   
   .achievements-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
     
}

@media (max-width: 768px) {
    
    /*-- =========================================================
     AWARDS & RECOGNITIONS
     ========================================================= --*/
     
     .achievements-awards-section {
        padding: 35px 0 45px;
    }

    .achievements-section-heading {
        gap: 12px;
        margin-bottom: 18px;
        justify-content: center;
        text-align: center;
    }

    .achievements-heading-icon {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        font-size: 21px;
    }

    .achievements-heading-content > span {
        font-size: 8px;
        letter-spacing: 1.7px;
        text-align: center;
    }

    .achievements-heading-content h2 {
        font-size: 24px;
        text-align: center;
    }

    .achievements-heading-content p {
        font-size: 9px;
        text-align: center;
    }


    /* 2 columns on mobile */

    .achievements-awards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .achievement-award-card {
        padding: 3px;
        border-radius: 8px;
    }

    .achievement-award-card img {
        border-radius: 6px;
        object-fit: contain;
    }
    .achievement-award-caption {
        padding: 9px 8px 11px;
    }

    .achievement-award-caption h3 {
        font-size: 10px;
        line-height: 1.35;
    }
    
    /* =========================================================
   PHOTO GALLERY
   ========================================================= */
   
   .achievements-gallery-section {
        padding: 35px 0 45px;
    }

    .achievements-gallery-heading {
        gap: 12px;
        margin-bottom: 18px;
        justify-content: center;
        text-align: center;
    }

    .achievements-gallery-heading .achievements-heading-icon {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        font-size: 21px;
    }

    .achievements-gallery-heading .achievements-heading-content > span {
        font-size: 8px;
        letter-spacing: 1.7px;
        text-align: center;
    }

    .achievements-gallery-heading .achievements-heading-content h2 {
        font-size: 24px;
        text-align: center;
    }

    .achievements-gallery-heading .achievements-heading-content p {
        font-size: 9px;
        text-align: center;
    }


    /* Keep View All button on same heading row */

    .achievements-view-all {
        padding: 8px 10px;
        font-size: 9px;
        gap: 5px;
    }

    .achievements-view-all span {
        font-size: 12px;
    }


    /* Two columns */

    .achievements-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .achievement-gallery-card {
        padding: 3px;
        border-radius: 8px;
    }

    .achievement-gallery-card img {
        border-radius: 6px;
    }
    
}


@media (max-width: 480px) {

    
    /*-- =========================================================
     AWARDS & RECOGNITIONS
     ========================================================= --*/
     
     .achievements-awards-grid {
        gap: 7px;
    }

    .achievements-heading-content h2 {
        font-size: 22px;
    }
    
    /* =========================================================
   PHOTO GALLERY
   ========================================================= */
   
   .achievements-gallery-heading {
        gap: 9px;
    }

    .achievements-gallery-heading .achievements-heading-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 19px;
    }

    .achievements-gallery-heading .achievements-heading-content h2 {
        font-size: 21px;
    }

    .achievements-gallery-heading .achievements-heading-content p {
        font-size: 8px;
    }

    .achievements-view-all {
        padding: 7px 8px;
        font-size: 8px;
    }

    .achievements-gallery-grid {
        gap: 7px;
    }
}



/*-------------------------Carrers PAGE----------------------------------*/

/* =========================================================
   CAREERS HERO
   ========================================================= */

.careers-hero {
    width: 100%;
    background: #f4faff;
    overflow: hidden;
}

.careers-hero-inner {
    width: 100%;
    min-height: 330px;
    display: grid;
    grid-template-columns: 46% 54%;
}


/* ---------- Content ---------- */

.careers-hero-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 45px 7vw;

    background:
        linear-gradient(
            110deg,
            #f4faff 0%,
            #edf8fd 72%,
            rgba(237,248,253,.82) 100%
        );
}


/* ---------- Eyebrow ---------- */

.careers-hero-eyebrow {
    display: block;
    margin-bottom: 10px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.8px;

    color: #159dcc;
    text-transform: uppercase;
}


/* ---------- Heading ---------- */

.careers-hero-content h1 {
    margin: 0 0 14px;

    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.02;

    font-weight: 800;
    letter-spacing: -1.5px;

    color: #071d49;
}

.careers-hero-content h1 span {
    color: #071d49;
}


/* ---------- Description ---------- */

.careers-hero-content p {
    max-width: 470px;

    margin: 0 0 20px;

    font-size: 13px;
    line-height: 1.6;

    color: #526276;
}


/* ---------- CTA ---------- */

.careers-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: fit-content;

    padding: 11px 17px;

    background: #159dcc;
    color: #fff !important;

    border-radius: 7px;

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

    text-decoration: none !important;

    box-shadow: 0 5px 14px rgba(21,157,204,.18);

    transition:
        transform .2s ease,
        background .2s ease;
}

.careers-hero-btn:hover {
    background: #0c88b5;
    transform: translateY(-2px);
}

.careers-btn-icon {
    font-size: 13px;
}

.careers-btn-arrow {
    font-size: 15px;
    line-height: 1;
}


/* ---------- Bottom Tags ---------- */

.careers-hero-tags {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 32px;
}

.careers-hero-tags span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #526b82;
}

.careers-hero-tags b {
    font-size: 8px;
    font-weight: 400;

    color: #9eb2c2;
}


/* ---------- Visual ---------- */

.careers-hero-visual {
    position: relative;
    min-height: 330px;
    overflow: hidden;
}

.careers-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(237,248,253,.95) 0%,
        rgba(237,248,253,.45) 8%,
        rgba(237,248,253,0) 25%
    );
}

.careers-hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
    object-position: center;
}

.careers-why-icon svg {
    width: 27px;
    height: 27px;
    fill: #159dcc;
}

/* =========================================================
   WHY WORK WITH NIMBUS
   ========================================================= */

.careers-why-section {
    width: 100%;
    padding: 38px 0 42px;
    background: #f5fbfe;
}


/* ---------- Section Eyebrow ---------- */

.careers-section-eyebrow {
    margin-bottom: 24px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;

    color: #159dcc;
    text-transform: uppercase;
}


/* ---------- Grid ---------- */

.careers-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* ---------- Card ---------- */

.careers-why-card {
    position: relative;

    padding: 0 28px;

    text-align: center;
}

.careers-why-card:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 8px;
    right: 0;

    width: 1px;
    height: 115px;

    background: #c9e0eb;
}


/* ---------- Icon ---------- */

.careers-why-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 12px;

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

    border-radius: 50%;

    background: #e2f4fc;

    color: #159dcc;

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


/* ---------- Heading ---------- */

.careers-why-card h3 {
    margin: 0 0 7px;

    font-size: 15px;
    line-height: 1.3;

    font-weight: 700;

    color: #071d49;
}


/* ---------- Description ---------- */

.careers-why-card p {
    max-width: 210px;

    margin: 0 auto;

    font-size: 11px;
    line-height: 1.55;

    color: #5c6d7d;
}

/* =========================================================
   OUR CULTURE
   ========================================================= */

.careers-culture-section {
    width: 100%;
    padding: 45px 0;
    background: #ffffff;
}

.careers-culture-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.25fr .55fr;
    align-items: center;
    gap: 35px;
}


/* ---------- Left Heading ---------- */

.careers-culture-title > span {
    display: block;
    margin-bottom: 8px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;

    color: #159dcc;
    text-transform: uppercase;
}

.careers-culture-title h2 {
    margin: 0;

    font-size: 30px;
    line-height: 1.12;

    font-weight: 800;
    letter-spacing: -.7px;

    color: #071d49;
}


/* ---------- Content ---------- */

.careers-culture-content {
    padding-left: 10px;
}

.careers-culture-content p {
    margin: 0;

    max-width: 470px;

    font-size: 12px;
    line-height: 1.7;

    color: #526276;
}


/* ---------- Sign ---------- */

.careers-culture-sign {
    display: flex;
    align-items: center;
    gap: 18px;

    min-height: 95px;

    border-left: 1px solid #cfe0e8;
    padding-left: 20px;
}

.careers-culture-sign span {
    font-family: "Brush Script MT", "Segoe Script", cursive;

    font-size: 20px;
    line-height: 1.15;

    font-style: italic;

    color: #4d5d70;
}

.careers-culture-line {
    display: none;
}

/* =========================================================
   CAREERS CTA
   ========================================================= */

.careers-cta-section {
    width: 100%;
    padding: 45px 0 55px;
    background: #f5fbfe;
}

.careers-cta-box {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    align-items: center;

    min-height: 220px;

    padding: 38px 45px;

    background: #071d49;
    border-radius: 12px;

    overflow: hidden;
    position: relative;
}


/* ---------- Decorative Glow ---------- */

.careers-cta-box::after {
    content: "";

    position: absolute;
    width: 300px;
    height: 300px;

    right: -100px;
    bottom: -170px;

    border-radius: 50%;

    background: rgba(21,157,204,.16);
}


/* ---------- Main Content ---------- */

.careers-cta-content {
    position: relative;
    z-index: 2;
}

.careers-cta-eyebrow {
    display: block;
    margin-bottom: 8px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;

    color: #4dd0f5;
    text-transform: uppercase;
}

.careers-cta-content h2 {
    margin: 0 0 11px;

    font-size: 32px;
    line-height: 1.08;

    font-weight: 800;
    letter-spacing: -.7px;

    color: #fff;
}

.careers-cta-content h2 span {
    color: #4dd0f5;
}

.careers-cta-content p {
    max-width: 520px;

    margin: 0 0 19px;

    font-size: 11px;
    line-height: 1.6;

    color: rgba(255,255,255,.76);
}


/* ---------- Button ---------- */

.careers-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 17px;

    background: #19a9dc;
    color: #fff !important;

    border-radius: 7px;

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

    text-decoration: none !important;

    transition:
        background .2s ease,
        transform .2s ease;
}

.careers-cta-btn:hover {
    background: #0d91c0;
    transform: translateY(-2px);
}

.careers-cta-btn span {
    font-size: 15px;
}


/* ---------- Contact ---------- */

.careers-cta-contact {
    position: relative;
    z-index: 2;

    padding-left: 35px;

    border-left: 1px solid rgba(255,255,255,.18);
}

.careers-cta-contact > span {
    display: block;
    margin-bottom: 8px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;

    color: rgba(255,255,255,.55);
}

.careers-cta-contact > a {
    display: inline-block;
    margin-bottom: 8px;

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

    color: #4dd0f5 !important;
    text-decoration: none !important;
}

.careers-cta-contact p {
    max-width: 190px;

    margin: 0;

    font-size: 10px;
    line-height: 1.55;

    color: rgba(255,255,255,.62);
}









/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    
}


@media (max-width: 900px) {
    /*---------------Careers hero--------------------------------*/
    .careers-hero-inner {
        grid-template-columns: 50% 50%;
        min-height: 300px;
    }

    .careers-hero-content {
        padding: 38px 5vw;
    }

    .careers-hero-content h1 {
        font-size: 38px;
    }

    .careers-hero-content p {
        font-size: 12px;
    }

    .careers-hero-visual,
    .careers-hero-visual img {
        min-height: 300px;
    }
    
    /* =========================================================
   WHY WORK WITH NIMBUS
   ========================================================= */
   
   .careers-why-card {
        padding: 0 18px;
    }

    .careers-why-card h3 {
        font-size: 14px;
    }

    .careers-why-card p {
        font-size: 10px;
    }
    
    /* =========================================================
   OUR CULTURE
   ========================================================= */
   .careers-culture-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: 25px;
    }

    .careers-culture-sign {
        grid-column: span 2;
        justify-content: center;

        min-height: auto;

        border-left: 0;
        border-top: 1px solid #d7e4eb;

        padding: 18px 0 0;
    }

    .careers-culture-title h2 {
        font-size: 27px;
    }
    
    /* =========================================================
   CAREERS CTA
   ========================================================= */
   
   .careers-cta-box {
        grid-template-columns: 1fr .7fr;
        padding: 32px;
    }

    .careers-cta-contact {
        padding-left: 25px;
    }
    
}
    
@media (max-width: 768px) {
    /*---------------Careers hero--------------------------------*/
    .careers-hero-inner {
        display: block;
        min-height: 0;
    }

    .careers-hero-content {
        min-height: 240px;

        padding: 34px 20px 28px;

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

        text-align: center;

        background:
            linear-gradient(
                135deg,
                #f4faff 0%,
                #eaf7fc 100%
            );
    }

    .careers-hero-eyebrow {
        margin-bottom: 8px;

        font-size: 9px;
        letter-spacing: 2.4px;
    }

    .careers-hero-content h1 {
        margin-bottom: 13px;

        font-size: 34px;
        line-height: 1.04;

        letter-spacing: -.8px;
    }

    .careers-hero-content p {
        max-width: 430px;

        margin: 0 auto 19px;

        font-size: 12px;
        line-height: 1.55;
    }

    .careers-hero-btn {
        padding: 11px 16px;

        font-size: 10px;
    }

    .careers-hero-tags {
        justify-content: center;

        margin-top: 25px;
    }

    .careers-hero-tags span {
        font-size: 7px;
        letter-spacing: 1.6px;
    }

    .careers-hero-visual {
        height: 190px;
        min-height: 190px;
    }

    .careers-hero-visual img {
        width: 100%;
        height: 190px;
        min-height: 190px;

        object-fit: cover;
        object-position: center;
    }

    .careers-hero-visual::before {
        background:
            linear-gradient(
                180deg,
                rgba(237,248,253,0) 45%,
                rgba(237,248,253,.15) 100%
            );
    }
    
    /* =========================================================
   WHY WORK WITH NIMBUS
   ========================================================= */
   
   .careers-why-section {
        padding: 32px 0 35px;
    }

    .careers-section-eyebrow {
        margin-bottom: 20px;

        text-align: center;

        font-size: 9px;
        letter-spacing: 2.2px;
    }

    .careers-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }

    .careers-why-card {
        padding: 0 14px;
    }

    .careers-why-card:nth-child(2)::after {
        display: none;
    }

    .careers-why-card:nth-child(4)::after {
        display: none;
    }

    .careers-why-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 10px;

        font-size: 19px;
    }

    .careers-why-card h3 {
        font-size: 13px;
        margin-bottom: 5px;
    }

    .careers-why-card p {
        max-width: 170px;

        font-size: 9.5px;
        line-height: 1.5;
    }
    
    /* =========================================================
   OUR CULTURE
   ========================================================= */
   
   .careers-culture-section {
        padding: 35px 0 38px;
    }

    .careers-culture-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;

        text-align: center;
    }

    .careers-culture-title > span {
        margin-bottom: 7px;

        font-size: 9px;
        letter-spacing: 2.2px;
    }

    .careers-culture-title h2 {
        font-size: 27px;
        line-height: 1.1;
    }

    .careers-culture-content {
        padding-left: 0;
    }

    .careers-culture-content p {
        max-width: 500px;

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

    .careers-culture-sign {
        width: 100%;

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

        min-height: auto;

        border-left: 0;
        border-top: 1px solid #d7e4eb;

        padding: 17px 0 0;
    }

    .careers-culture-sign span {
        font-size: 18px;
    }
    
    /* =========================================================
   CAREERS CTA
   ========================================================= */
   
   .careers-cta-section {
        padding: 35px 0 42px;
    }

    .careers-cta-box {
        display: flex;
        flex-direction: column;

        min-height: 0;

        padding: 32px 22px;

        text-align: center;
        border-radius: 10px;
    }

    .careers-cta-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .careers-cta-eyebrow {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .careers-cta-content h2 {
        font-size: 27px;
        line-height: 1.08;
    }

    .careers-cta-content p {
        max-width: 430px;

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

    .careers-cta-btn {
        font-size: 9px;
        padding: 10px 15px;
    }

    .careers-cta-contact {
        width: 100%;

        margin-top: 24px;
        padding: 19px 0 0;

        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.18);
    }

    .careers-cta-contact > span {
        font-size: 7px;
    }

    .careers-cta-contact > a {
        font-size: 13px;
    }

    .careers-cta-contact p {
        max-width: 280px;
        margin: 0 auto;
        font-size: 9px;
    }
    
}

@media (max-width: 480px) {
    
    /*---------------Careers hero--------------------------------*/
    
    .careers-hero-content {
        min-height: 245px;

        padding: 34px 20px 30px;
    }

    .careers-hero-content h1 {
        font-size: 30px;
    }

    .careers-hero-content p {
        font-size: 11px;
        line-height: 1.55;
    }

    .careers-hero-tags {
        margin-top: 22px;
    }

    .careers-hero-visual,
    .careers-hero-visual img {
        height: 190px;
        min-height: 190px;
    }
    
    /* =========================================================
   WHY WORK WITH NIMBUS
   ========================================================= */
    
    .careers-why-grid {
        row-gap: 24px;
    }

    .careers-why-card {
        padding: 0 9px;
    }

    .careers-why-icon {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .careers-why-card h3 {
        font-size: 12px;
    }

    .careers-why-card p {
        font-size: 8.5px;
    }
    
    /* =========================================================
   OUR CULTURE
   ========================================================= */
    .careers-culture-section {
        padding: 32px 0 35px;
    }

    .careers-culture-title h2 {
        font-size: 24px;
    }

    .careers-culture-content p {
        font-size: 10px;
        line-height: 1.6;
    }

    .careers-culture-sign span {
        font-size: 16px;
    }
    
    /* =========================================================
   CAREERS CTA
   ========================================================= */
   
   .careers-cta-section {
        padding: 30px 0 38px;
    }

    .careers-cta-box {
        padding: 28px 18px;
    }

    .careers-cta-content h2 {
        font-size: 24px;
    }

    .careers-cta-content p {
        font-size: 9px;
    }
}




/*-------------------------Partners PAGE----------------------------------*/

/* =========================================================
   PARTNERS HERO
   ========================================================= */

.partners-hero {
    width: 100%;
    background: #f3faff;
    overflow: hidden;
}

.partners-hero-inner {
    width: 100%;
    min-height: 320px;

    display: grid;
    grid-template-columns: 46% 54%;
}


/* ---------- Content ---------- */

.partners-hero-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 42px 7vw;

    background:
        linear-gradient(
            110deg,
            #f3faff 0%,
            #edf8fd 72%,
            rgba(237,248,253,.82) 100%
        );
}


/* ---------- Eyebrow ---------- */

.partners-hero-eyebrow {
    display: block;
    margin-bottom: 9px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.7px;

    color: #159dcc;
    text-transform: uppercase;
}


/* ---------- Heading ---------- */

.partners-hero-content h1 {
    margin: 0 0 12px;

    font-size: clamp(35px, 3.8vw, 52px);
    line-height: 1.04;

    font-weight: 800;
    letter-spacing: -1.4px;

    color: #071d49;
}

.partners-hero-content h1 span {
    color: #159dcc;
}


/* ---------- Description ---------- */

.partners-hero-content p {
    max-width: 470px;

    margin: 0 0 22px;

    font-size: 13px;
    line-height: 1.6;

    color: #526276;
}


/* =========================================================
   HERO POINTS
   ========================================================= */

.partners-hero-points {
    display: flex;
    align-items: center;
    gap: 24px;
}

.partners-hero-point {
    display: flex;
    align-items: center;
    gap: 8px;
}

.partners-point-icon {
    width: 30px;
    height: 30px;

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

    border: 2px solid #159dcc;
    border-radius: 50%;

    color: #159dcc;

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

.partners-hero-point > span:last-child {
    font-size: 8px;
    line-height: 1.35;

    color: #526276;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.partners-hero-visual {
    position: relative;
    min-height: 320px;

    overflow: hidden;
}

.partners-hero-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(237,248,253,.95) 0%,
            rgba(237,248,253,.45) 8%,
            rgba(237,248,253,0) 25%
        );
}

.partners-hero-visual img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 320px;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   TECHNOLOGY PARTNERS
   ========================================================= */

/* Main Section */
.partners-list-section {
    width: 100%;
    padding: 20px 10px 30px;
    box-sizing: border-box;
    overflow: hidden;
}

.partners-list-section * {
    box-sizing: border-box;
}

.partners-list-heading {
    margin-bottom: 12px;
}

.partners-list-heading > span {
    display: block;
    margin-bottom: 5px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.3px;

    color: #159dcc;
    text-transform: uppercase;
}

.partners-list-heading h2 {
    margin: 0 0 5px;

    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;

    color: #071d49;
}

.partners-list-heading p {
    margin: 0;

    font-size: 12px;
    line-height: 1.55;

    color: #5c6d7d;
}



/* =========================================================
   TABLE
   ========================================================= */

.partners-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #d7e3ed;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 38, 75, 0.06);
}

.partners-table {
    width: 100%;
    min-width: 760px;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    background: #ffffff;
}

/* Six column widths:
   Brand | Company | Phone | Brand | Company | Phone */

.partners-table th:nth-child(1),
.partners-table td:nth-child(1),
.partners-table th:nth-child(4),
.partners-table td:nth-child(4) {
    width: 12%;
}

.partners-table th:nth-child(2),
.partners-table td:nth-child(2),
.partners-table th:nth-child(5),
.partners-table td:nth-child(5) {
    width: 17%;
}

.partners-table th:nth-child(3),
.partners-table td:nth-child(3),
.partners-table th:nth-child(6),
.partners-table td:nth-child(6) {
    width: 21%;
}

/* Table Headings */
.partners-table thead th {
    padding: 9px 6px;
    background: #159fc7;
    color: #ffffff;
    border: 1px solid #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.3;
    vertical-align: middle;
}

/* Table Cells */
.partners-table tbody td {
    padding: 9px 7px;
    border: 1px solid #d7e3ed;
    color: #31577f;
    font-size: 10px;
    line-height: 1.45;
    vertical-align: middle;
    text-align: center;
    background: #ffffff;
}

/* Subtle alternating rows */
.partners-table tbody tr:nth-child(even) td {
    background: #f9fcfe;
}

.partners-table tbody tr:hover td {
    background: #f0f9fd;
}

/* Brand Logos */
.partners-table td:nth-child(1) img,
.partners-table td:nth-child(4) img {
    display: block;
    width: auto;
    max-width: 40%;
    height: auto;
    max-height: 40%;
    object-fit: contain;
    margin: 0 auto;
}

/* Brand and Company Links */
.partners-table td a:not(.partner-phone) {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: normal;
}

.partners-table td a:not(.partner-phone):hover {
    color: #159fc7;
    text-decoration: underline;
}

/* Remove any old phone icon inserted before every table link */
.partners-table td a::before {
    content: none !important;
    display: none !important;
}

/* ==========================================
   TELEPHONE LINKS
   ========================================== */

.partners-table .partner-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
    color: #237cb5;
    font-size: 10px;
    line-height: 1.4;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.partners-table .partner-phone svg {
    display: inline-block;
    width: 12px;
    height: 12px;
    min-width: 12px;
    flex-shrink: 0;
    fill: #159fc7;
}

.partners-table .partner-phone:hover {
    color: #087ca5;
    text-decoration: underline;
}



/* ==========================================
   MOBILE PARTNERS LIST
   ========================================== */
  
   /* Hidden on desktop */
.partners-mobile-list {
    display: none;
}








/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    
}


@media (max-width: 900px) {
    /* =========================================================
   PARTNERS HERO
   ========================================================= */
   .partners-hero-inner {
        grid-template-columns: 50% 50%;
        min-height: 290px;
    }

    .partners-hero-content {
        padding: 36px 5vw;
    }

    .partners-hero-content h1 {
        font-size: 37px;
    }

    .partners-hero-content p {
        font-size: 12px;
    }

    .partners-hero-points {
        gap: 14px;
    }

    .partners-hero-point {
        gap: 6px;
    }

    .partners-point-icon {
        width: 26px;
        height: 26px;
        font-size: 8px;
    }

    .partners-hero-point > span:last-child {
        font-size: 7px;
    }

    .partners-hero-visual,
    .partners-hero-visual img {
        min-height: 290px;
    }

    
}
    
@media (max-width: 768px) {
    /* =========================================================
   PARTNERS HERO
   ========================================================= */
   
   .partners-hero-inner {
        display: block;
        min-height: 0;
    }

    .partners-hero-content {
        min-height: 275px;

        padding: 38px 20px 32px;

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

        text-align: center;

        background:
            linear-gradient(
                135deg,
                #f3faff 0%,
                #eaf7fc 100%
            );
    }

    .partners-hero-eyebrow {
        margin-bottom: 8px;

        font-size: 9px;
        letter-spacing: 2.3px;
    }

    .partners-hero-content h1 {
        margin-bottom: 12px;

        font-size: 32px;
        line-height: 1.05;

        letter-spacing: -.8px;
    }

    .partners-hero-content p {
        max-width: 430px;

        margin: 0 auto 20px;

        font-size: 11px;
        line-height: 1.55;
    }

    .partners-hero-points {
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .partners-hero-point {
        gap: 6px;
    }

    .partners-point-icon {
        width: 26px;
        height: 26px;

        font-size: 8px;
    }

    .partners-hero-point > span:last-child {
        font-size: 7px;
        text-align: left;
    }

    .partners-hero-visual {
        height: 195px;
        min-height: 195px;
    }

    .partners-hero-visual img {
        width: 100%;
        height: 195px;
        min-height: 195px;

        object-fit: cover;
        object-position: center;
    }

    .partners-hero-visual::before {
        background:
            linear-gradient(
                180deg,
                rgba(237,248,253,0) 45%,
                rgba(237,248,253,.12) 100%
            );
    }
    
    /* =========================================================
   TECHNOLOGY PARTNERS
   ========================================================= */
   

    /* Hide desktop table */
    .partners-table-wrap {
        display: none !important;
    }

    /* Show mobile list */
    .partners-mobile-list {
        display: block;

        width: 100%;

        border: 1px solid #dce6ec;
        border-radius: 9px;

        overflow: hidden;

        background: #fff;

        box-shadow: 0 2px 8px rgba(0,0,0,.04);
    }
   
   .partners-list-section {
        padding: 18px 10px 25px;
    }

    .partners-list-heading h2 {
        font-size: 20px;
    }

    .partners-list-heading p {
        font-size: 12px;
    }

   

    /* Individual partner card */
    .partner-mobile-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        min-width: 0;
        overflow: hidden;
        border: 1px solid #d7e3ed;
        border-radius: 5px;
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(16, 38, 75, 0.05);
    }

    /* Brand logo + company name link */
    .partner-mobile-item > a:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 8px 5px;
        color: #31577f;
        text-align: center;
        text-decoration: none;
        border-right: 1px solid #e2e8ed;
    }

    .partner-mobile-item > a:first-child:hover {
        color: #159fc7;
    }

    /* Logo container */
    .partner-mobile-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 100%;
        padding: 3px 4px 6px;
    }

    /* Logo image */
    .partner-mobile-logo img {
        display: block;
        width: auto;
        max-width: 200%;
        max-height: 200%;
        object-fit: contain;
        margin: 0 auto;
    }

    /* Company name */
    .partner-mobile-company {
        width: 100%;
        padding: 0 2px 4px;
        font-size: 10px;
        line-height: 1.4;
        text-align: center;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Mobile phone link */
    .partner-mobile-phone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding: 7px 5px;
        color: #237cb5;
        font-size: 10px;
        line-height: 1.4;
        text-align: center;
        text-decoration: none;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .partner-mobile-phone svg {
        display: inline-block;
        width: 12px;
        height: 12px;
        min-width: 12px;
        flex-shrink: 0;
        fill: #159fc7;
    }

    .partner-mobile-phone:hover {
        color: #087ca5;
        text-decoration: underline;
    }
    
}

@media (max-width: 480px) {
    /* =========================================================
   PARTNERS HERO
   ========================================================= */
   
   .partners-hero-content {
        min-height: 255px;
        padding: 32px 18px 28px;
    }

    .partners-hero-content h1 {
        font-size: 29px;
    }

    .partners-hero-content p {
        font-size: 10px;
    }

    .partners-hero-points {
        gap: 9px;
    }

    .partners-hero-point > span:last-child {
        font-size: 6.5px;
    }

    .partners-hero-visual,
    .partners-hero-visual img {
        height: 180px;
        min-height: 180px;
    }
    
    /* =========================================================
   TECHNOLOGY PARTNERS
   ========================================================= */
   .partners-list-section {
        padding-right: 7px;
        padding-left: 7px;
    }

    .partner-mobile-list {
        gap: 7px;
    }

    .partner-mobile-item {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .partner-mobile-item > a:first-child {
        padding: 7px 3px;
    }

    .partner-mobile-logo {
        min-height: 36px;
    }

    .partner-mobile-logo img {
        max-height: 30px;
    }

    .partner-mobile-company,
    .partner-mobile-phone {
        font-size: 9px;
    }

    .partner-mobile-phone {
        gap: 3px;
        padding: 5px 3px;
    }

    .partner-mobile-phone svg {
        width: 10px;
        height: 10px;
        min-width: 10px;
    }
    
}



/-------------------------PRIVACY PAGE----------------------------------/


/* ==========================================
   PRIVACY POLICY — HERO SECTION
========================================== */

.privacy-hero {
    width: 100%;
    min-height: 264px;
    padding: 24px 0;
    box-sizing: border-box;
    background: #eaf5ff url("/test/images/privacy-hero-banner.webp")
        center center / 100% 100% no-repeat;
}

.privacy-hero-container {
    width: 100%;
    max-width: 1420px;
    min-height: 216px;
    margin: 0 auto;
    padding: 0 35px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.privacy-hero-content {
    width: 52%;
    max-width: 620px;
    position: relative;
    z-index: 1;
}

/* Eyebrow */
.privacy-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: #526579;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
}

.privacy-eyebrow span {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 2px;
    background: #0866e9;
}

/* Heading */
.privacy-hero-content h1 {
    margin: 0 0 4px;
    color: #101318;
    font-size: clamp(38px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.privacy-hero-content h1 span {
    color: #0866e9;
}

/* Subheading */
.privacy-hero-content h2 {
    margin: 0 0 10px;
    color: #3d4859;
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 600;
    line-height: 1.35;
}

/* Description */
.privacy-hero-content > p {
    max-width: 480px;
    margin: 0 0 14px;
    color: #43536a;
    font-size: 14px;
    line-height: 1.5;
}

/* Last updated */
.privacy-updated {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #45556b;
    font-size: 11px;
}

.privacy-updated > span:first-child {
    color: #0866e9;
    font-size: 17px;
}

/* The banner itself contains the laptop artwork */
.privacy-hero-image {
    display: none !important;
}

/* ==========================================
   PRIVACY POLICY — INTRODUCTION SERCTION
========================================== */

.privacy-intro {
    width: 100%;
    margin: 10px auto 12px;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    gap: 22px;

    background: #f0f6ff;
    border: 1px solid #e7effa;
    border-radius: 9px;
    box-sizing: border-box;
}

/* Building icon container */
.privacy-intro-icon {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #dfedff;
    border-radius: 50%;
}

.privacy-intro-icon span {
    color: #0866e9;
    font-size: 30px;
    line-height: 1;
}

/* Introduction text */
.privacy-intro-content {
    flex: 1;
    min-width: 0;
}

.privacy-intro-content p {
    margin: 0;
    color: #3e4c60;
    font-size: 14px;
    line-height: 1.5;
}

.privacy-intro-content strong {
    color: #202b3b;
    font-weight: 700;
}

.privacy-intro-content a {
    color: #075fe5;
    font-weight: 600;
    text-decoration: none;
}

.privacy-intro-content a:hover {
    text-decoration: underline;
}

    /* ==========================================
   PRIVACY POLICY — EXPANDABLE POLICY CARDS
========================================== */

.privacy-sections {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px 24px;
    box-sizing: border-box;
}

.privacy-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

/* Individual card */
.privacy-card {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 15px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 9px;
    box-shadow: 0 1px 4px rgba(17, 39, 72, 0.045);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.privacy-card:hover {
    border-color: #d5e5fa;
    box-shadow: 0 3px 10px rgba(17, 55, 105, 0.07);
}

/* Icon circle */
.privacy-card-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf3ff;
    color: #0866e9;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
}

/* Card content */
.privacy-card-content {
    flex: 1;
    min-width: 0;
}

.privacy-card-content h3 {
    margin: 2px 0 4px;
    color: #102b59;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.4;
}

.privacy-card-summary {
    margin: 0;
    color: #59677a;
    font-size: 12px;
    line-height: 1.45;
}

/* Expanded legal text */
.privacy-card-details {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #dce7f5;
    color: #4b5c72;
    font-size: 12px;
    line-height: 1.7;
}

.privacy-card-details[hidden] {
    display: none !important;
}

.privacy-card-details p {
    margin: 0 0 10px;
}

.privacy-card-details p:last-child {
    margin-bottom: 0;
}

/* Expand / collapse button */
.privacy-card-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0866e9;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.privacy-card-arrow {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    border: 1px solid #dce9fa;
    border-radius: 50%;
    background: #eff6ff;
    color: #0866e9;
    font-size: 21px;
    line-height: 1;
    transition: transform 0.2s ease, background 0.2s ease;
}

.privacy-card-toggle:hover .privacy-card-arrow {
    background: #dcecff;
}

.privacy-card-toggle:focus-visible {
    outline: 2px solid #0866e9;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Rotate arrow when expanded */
.privacy-card-toggle[aria-expanded="true"] .privacy-card-arrow {
    transform: rotate(90deg);
}

/* ==========================================
   PRIVACY POLICY — CONTACT US SECTION
========================================== */

.privacy-contact {
    width: calc(100% - 80px);
    max-width: 1420px;
    margin: 0 auto 14px;
    padding: 20px 26px;

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

    position: relative;
    overflow: hidden;

    background: linear-gradient(
        110deg,
        #e8f3ff 0%,
        #f2f8ff 100%
    );

    border: 1px solid #e0edfc;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Main icon */

.privacy-contact-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;

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

    background: #d8eaff;
    border-radius: 50%;
    color: #0866e9;
}

.privacy-contact-icon span {
    font-size: 27px;
    line-height: 1;
}

/* Contact content */

.privacy-contact-content {
    flex: 1;
    min-width: 0;

    position: relative;
    z-index: 1;
}

.privacy-contact-content h2 {
    margin: 0 0 3px;

    color: #0759d5;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.4;
}

.privacy-contact-intro {
    margin: 0 0 12px;

    color: #526176;
    font-size: 12px;
    line-height: 1.6;

    overflow-wrap: break-word;
}

/* ==========================================
   CONTACT BUTTON
========================================== */

.privacy-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 4px;
    padding: 11px 19px;

    background: #0866e9;
    border: 1px solid #0866e9;
    border-radius: 6px;

    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.privacy-contact-button span {
    font-size: 18px;
    line-height: 1;

    transition: transform 0.2s ease;
}

.privacy-contact-button:hover {
    background: #0754c4;
    border-color: #0754c4;
    color: #ffffff;

    box-shadow: 0 4px 12px rgba(8, 102, 233, 0.18);
}

.privacy-contact-button:hover span {
    transform: translateX(3px);
}

.privacy-contact-button:focus-visible {
    outline: 2px solid #0866e9;
    outline-offset: 3px;
}














/*=========RESPONSIVE===========================*/


/* Desktop and laptop: move Contact button to the right */
@media (min-width: 900px) {
    .privacy-contact {
        flex-wrap: wrap;
    }

    .privacy-contact-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 24px;
    }

    .privacy-contact-content h2,
    .privacy-contact-intro {
        grid-column: 1;
    }

    .privacy-contact-content h2 {
        grid-row: 1;
    }

    .privacy-contact-intro {
        grid-row: 2;
        margin-bottom: 0;
    }

    .privacy-contact-button {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: end;
        margin-top: 0;
        white-space: nowrap;
    }
}



/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {
    
    /* ==========================================
   PRIVACY POLICY — HERO SECTION
========================================== */


    .privacy-hero {
        min-height: 250px;
        background-size: cover;
        background-position: center;
    }

    .privacy-hero-container {
        min-height: 210px;
        padding: 24px;
    }

    .privacy-hero-content {
        width: 58%;
    }

    .privacy-hero-content h1 {
        font-size: clamp(36px, 5vw, 46px);
    }
    
    
    /* ==========================================
   PRIVACY POLICY — INTRODUCTION SERCTION
========================================== */
.privacy-intro {
        width: calc(100% - 40px);
        padding: 12px 16px;
        gap: 16px;
    }

    .privacy-intro-icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .privacy-intro-content p {
        font-size: 13px;
    }
    
        /* ==========================================
   PRIVACY POLICY — EXPANDABLE POLICY CARDS
========================================== */
.privacy-sections {
        padding: 0 22px 24px;
    }

    .privacy-sections-grid {
        gap: 9px;
    }

    .privacy-card {
        gap: 10px;
        padding: 12px;
    }

    .privacy-card-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 22px;
    }

    .privacy-card-content h3 {
        font-size: 13px;
    }
    
    /* ==========================================
   PRIVACY POLICY — CONTACT US SECTION
========================================== */

.privacy-contact {
        width: calc(100% - 40px);
        padding: 18px;
        gap: 15px;
    }
    
.privacy-contact-content {
        display: block;
    }


}




/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {
    
    /* ==========================================
   PRIVACY POLICY — HERO SECTION
========================================== */

    .privacy-hero {
        min-height: auto;
        padding: 28px 0;
        background-color: #edf6ff;
        background-image:
            linear-gradient(
                rgba(237, 246, 255, 0.82),
                rgba(237, 246, 255, 0.82)
            ),
            url("/test/images/privacy-hero-banner.webp");
        background-repeat: no-repeat;
        background-position: center, 65% center;
        background-size: cover;
    }

    .privacy-hero-container {
        min-height: auto;
        padding: 0 22px;
    }

    .privacy-hero-content {
        width: 100%;
        max-width: 100%;
    }

    .privacy-eyebrow {
        gap: 9px;
        margin-bottom: 12px;
        font-size: 10px;
        letter-spacing: 3px;
    }

    .privacy-hero-content h1 {
        font-size: clamp(34px, 8.5vw, 44px);
        line-height: 1.1;
        letter-spacing: -1.4px;
    }

    .privacy-hero-content h2 {
        margin-bottom: 12px;
        font-size: 20px;
    }

    .privacy-hero-content > p {
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    .privacy-updated {
        font-size: 12px;
    }
    
    
    /* ==========================================
   PRIVACY POLICY — INTRODUCTION SERCTION
========================================== */
 .privacy-intro {
        width: 100%;
        margin: 10px auto;
        padding: 14px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        border-radius: 9px;
        box-sizing: border-box;
    }

    .privacy-intro-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .privacy-intro-icon span {
        font-size: 23px;
    }

    .privacy-intro-content {
        flex: 1;
        min-width: 0;
    }

    .privacy-intro-content p {
        margin: 0;
        font-size: 12px;
        line-height: 1.6;
        overflow-wrap: break-word;
    }
        /* ==========================================
   PRIVACY POLICY — EXPANDABLE POLICY CARDS
========================================== */

.privacy-sections {
        padding: 0 14px 20px;
    }

    .privacy-sections-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .privacy-card {
        gap: 12px;
        padding: 13px;
        border-radius: 9px;
    }

    .privacy-card-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 22px;
    }

    .privacy-card-content h3 {
        margin-top: 1px;
        font-size: 14px;
        line-height: 1.4;
    }

    .privacy-card-summary {
        font-size: 12px;
        line-height: 1.55;
    }

    .privacy-card-details {
        font-size: 12px;
        line-height: 1.7;
    }

    .privacy-card-toggle {
        margin-top: 10px;
        font-size: 12px;
    }

/* ==========================================
   PRIVACY POLICY — CONTACT US SECTION
========================================== */

.privacy-contact {
        width: calc(100% - 28px);
        margin: 10px auto 16px;
        padding: 17px 15px;

        align-items: flex-start;
        gap: 12px;
    }

    .privacy-contact-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .privacy-contact-icon span {
        font-size: 22px;
    }

    .privacy-contact-content h2 {
        font-size: 15px;
    }

    .privacy-contact-intro {
        margin-bottom: 12px;
        font-size: 12px;
        line-height: 1.6;
    }

    .privacy-contact-button {
        padding: 10px 15px;
        gap: 10px;
        font-size: 12px;
    }

    .privacy-contact-art {
        display: none;
    }




}

/* Small phones */
@media (max-width: 380px) {
    
    /* ==========================================
   PRIVACY POLICY — HERO SECTION
========================================== */

    .privacy-hero-container {
        padding: 0 16px;
    }

    .privacy-hero-content h1 {
        font-size: 33px;
    }

    .privacy-hero-content h2 {
        font-size: 18px;
    }
    
    /* ==========================================
   PRIVACY POLICY — INTRODUCTION SERCTION
========================================== */



    /* ==========================================
   PRIVACY POLICY — EXPANDABLE POLICY CARDS
========================================== */


/* ==========================================
   PRIVACY POLICY — CONTACT US SECTION
========================================== */

 .privacy-contact {
        width: calc(100% - 24px);
        margin: 10px auto 16px;
        padding: 14px 12px;
        gap: 10px;
    }

    .privacy-contact-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .privacy-contact-icon span {
        font-size: 19px;
    }

    .privacy-contact-content h2 {
        font-size: 14px;
    }

    .privacy-contact-intro {
        font-size: 12px;
    }

    .privacy-contact-button {
        padding: 9px 12px;
        gap: 8px;
        font-size: 12px;
    }


}


/* FIX: Restore desktop Privacy Policy banner */
@media (min-width: 901px) {
    /* ==========================================
   PRIVACY POLICY — HERO SECTION
========================================== */
    section.privacy-hero {
        background-color: #eaf5ff !important;
        background-image: url("/test/images/privacy-hero-banner.webp") !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: 100% 100% !important;

        min-height: 300px !important;
        padding: 24px 0 !important;
        box-sizing: border-box;
    }

    section.privacy-hero .privacy-hero-container {
        min-height: 216px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .privacy-card,
    .privacy-card-arrow {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .privacy-contact-button,
    .privacy-contact-button span {
        transition: none;
    }
}





/-------------------------Terms & Conditions PAGE------------------------------/


/* =========================================
   TERMS OF USE — HERO SECTION
   ========================================= */
   
   .terms-page {
    background: #f7f9fc;
}

.terms-hero {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(
        115deg,
        #08234b 0%,
        #123c80 58%,
        #1755a4 100%
    );
}

/* Subtle decorative curves */
.terms-hero::before,
.terms-hero::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(91, 166, 255, 0.18);
    border-radius: 50%;
    pointer-events: none;
}

.terms-hero::before {
    left: -150px;
    bottom: -285px;
    box-shadow:
        0 0 0 18px rgba(91, 166, 255, 0.035),
        0 0 0 36px rgba(91, 166, 255, 0.035),
        0 0 0 54px rgba(91, 166, 255, 0.025);
}

.terms-hero::after {
    right: -140px;
    top: -285px;
    box-shadow:
        0 0 0 22px rgba(91, 166, 255, 0.035),
        0 0 0 44px rgba(91, 166, 255, 0.025);
}

/* Hero content */
.terms-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    padding: 18px 24px 32px;
    text-align: center;
}

/* Breadcrumb */
.terms-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    line-height: 1.5;
}

.terms-breadcrumb a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.terms-breadcrumb a:hover {
    color: #c9e1ff;
}

/* Page title */
.terms-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.8px;
}

/* Last updated */
.terms-last-updated {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.6;
}
   
   /* =========================================
   TERMS OF USE — CONTENT SECTION
   ========================================= */

.terms-content-section {
    padding: 36px 20px 44px;
    background: #f7f9fc;
}

.terms-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 34px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(15, 39, 75, 0.045);
}

/* Introductory paragraph */
.terms-content .terms-intro {
    margin: 0;
    padding: 0 0 22px;
    border-bottom: 1px solid #e5ebf3;
    color: #52647d;
    font-size: 14px;
    line-height: 1.8;
}

/* Links inside legal content */
.terms-content a {
    color: #1457b7;
    text-decoration: underline;
    text-decoration-color: rgba(20, 87, 183, 0.35);
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.terms-content a:hover {
    color: #083b83;
    text-decoration-color: currentColor;
}

/* Numbered legal sections */
.terms-content .terms-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 15px;
    padding: 21px 0;
    border-bottom: 1px solid #e5ebf3;
}

.terms-content .terms-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* Number circle */
.terms-content .terms-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 1px;
    border-radius: 50%;
    background: #e8f0ff;
    color: #1558b5;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

/* Section headings */
.terms-content .terms-item h2 {
    margin: 2px 0 7px;
    color: #103d7b;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.45;
}

/* Legal body text */
.terms-content .terms-item p {
    margin: 0;
    color: #52647d;
    font-size: 14px;
    line-height: 1.8;
}

.terms-content .terms-item p + p {
    margin-top: 10px;
}

.terms-content .terms-item strong {
    color: #263d5b;
    font-weight: 700;
}
   
   
   
   
   
   
   

/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    
    /* =========================================
   TERMS OF USE — HERO SECTION
   ========================================= */
   
   /* =========================================
   TERMS OF USE — CONTENT SECTION
   ========================================= */

    
}


@media (max-width: 900px) {
    
    /* =========================================
   TERMS OF USE — HERO SECTION
   ========================================= */
   
   /* =========================================
   TERMS OF USE — CONTENT SECTION
   ========================================= */
   
   .terms-content-section {
        padding: 24px 16px 32px;
    }

    .terms-content {
        padding: 24px 22px;
        border-radius: 12px;
    }

    .terms-content .terms-intro,
    .terms-content .terms-item p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    .terms-content .terms-item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 12px;
        padding: 18px 0;
    }

    .terms-content .terms-number {
        width: 29px;
        height: 29px;
        font-size: 13px;
    }

    .terms-content .terms-item h2 {
        font-size: 15px;
    }

    
}
    
@media (max-width: 768px) {
    
    /* =========================================
   TERMS OF USE — HERO SECTION
   ========================================= */
   .terms-hero-content {
        padding: 16px 20px 26px;
    }

    .terms-breadcrumb {
        margin-bottom: 14px;
        font-size: 11px;
    }

    .terms-hero h1 {
        font-size: 30px;
        letter-spacing: -0.4px;
    }

    .terms-last-updated {
        font-size: 12px;
    }
    
    /* =========================================
   TERMS OF USE — CONTENT SECTION
   ========================================= */

    
   
    
}

@media (max-width: 480px) {
    
    /* =========================================
   TERMS OF USE — HERO SECTION
   ========================================= */
    .terms-hero-content {
        padding: 14px 16px 24px;
    }

    .terms-hero h1 {
        font-size: 27px;
    }
    
    /* =========================================
   TERMS OF USE — CONTENT SECTION
   ========================================= */
   
   .terms-content-section {
        padding: 18px 12px 26px;
    }

    .terms-content {
        padding: 20px 15px;
        border-radius: 10px;
    }

    .terms-content .terms-intro,
    .terms-content .terms-item p {
        font-size: 13px;
        line-height: 1.75;
    }

    .terms-content .terms-item {
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 10px;
        padding: 16px 0;
    }

    .terms-content .terms-number {
        width: 27px;
        height: 27px;
        font-size: 12px;
    }

    .terms-content .terms-item h2 {
        font-size: 14px;
    }

    
    
}






/-------------------------FAQ PAGE----------------------------------/


/* =========================================
   FAQ PAGE — HERO SECTION
   ========================================= */
   
   .faq-page {
    background: #ffffff;
}

/* Hero background */
.faq-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        110deg,
        #f4f8ff 0%,
        #eaf2ff 58%,
        #d9eaff 100%
    );
    color: #0b254b;
}

/* Soft decorative shapes */
.faq-hero::before {
    content: "";
    position: absolute;
    top: -210px;
    right: 27%;
    width: 440px;
    height: 300px;
    border-radius: 0 0 50% 50%;
    background: rgba(255, 255, 255, 0.48);
    transform: rotate(-8deg);
    pointer-events: none;
}

.faq-hero::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -190px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(39, 105, 190, 0.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 22px rgba(39, 105, 190, 0.035),
        0 0 0 44px rgba(39, 105, 190, 0.025);
    pointer-events: none;
}

/* Main container */
.faq-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 28px 38px;
}

/* Breadcrumb */
.faq-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    color: #526987;
    font-size: 12px;
    line-height: 1.5;
}

.faq-breadcrumb a {
    color: #214c82;
    text-decoration: none;
    transition: color 0.2s ease;
}

.faq-breadcrumb a:hover {
    color: #0757c8;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Two-column hero layout */
.faq-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
    align-items: center;
    gap: 40px;
    min-height: 150px;
}

/* Hero text */
.faq-hero-text {
    max-width: 560px;
}

.faq-hero-text h1 {
    margin: 0;
    color: #092750;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.faq-hero-text p {
    max-width: 470px;
    margin: 15px 0 0;
    color: #455d7d;
    font-size: 16px;
    line-height: 1.7;
}

/* Computer illustration */
.faq-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 210px;
    width: 100%;
}

.faq-hero-visual img {
    display: block;
    width: 100%;
    max-width: 510px;
    height: auto;
    object-fit: contain;
}




/* =========================================
   FAQ PAGE — CATEGORIES & QUESTIONS
   ========================================= */
   
   
.faq-content-section {
    padding: 30px 20px 44px;
    background: #ffffff;
}

.faq-content {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Category card */
.faq-category {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e0eaf8;
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(15, 48, 91, 0.035);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-category:hover {
    border-color: #c9dcf7;
    box-shadow: 0 5px 18px rgba(15, 48, 91, 0.06);
}

/* Category header */
.faq-category-header {
    width: 100%;
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    border: 0;
    background: linear-gradient(105deg, #f2f7ff, #f8faff);
    color: #092750;
    text-align: left;
    cursor: pointer;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.faq-category-header:focus-visible {
    outline: 3px solid #78aaff;
    outline-offset: -3px;
}

/* Icon circle */
.faq-category-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0edff;
    color: #104f9f;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
}

/* Category heading and description */
.faq-category-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faq-category-title {
    color: #092750;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.4;
}

.faq-category-description {
    color: #536986;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
}

/* Chevron */
.faq-category-chevron {
    display: block;
    color: #0b3267;
    font-size: 23px;
    line-height: 1;
    text-align: center;
}

/* Category question area */
.faq-category-body {
    padding: 0 18px 12px;
    background: #ffffff;
}

.faq-category-body[hidden] {
    display: none;
}

/* Individual question */
.faq-item {
    margin: 0;
    border-bottom: 1px solid #e3eaf3;
}

.faq-item:last-child {
    border-bottom: 0;
}

.faq-item summary {
    position: relative;
    display: block;
    padding: 15px 32px 15px 10px;
    color: #102c52;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "";
    position: absolute;
    top: 19px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #183e70;
    border-bottom: 2px solid #183e70;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    transform: translateY(3px) rotate(225deg);
}

.faq-item summary:hover {
    color: #0757b8;
}

.faq-item summary:focus-visible {
    outline: 2px solid #78aaff;
    outline-offset: -2px;
    border-radius: 4px;
}

/* Answer */
.faq-answer {
    padding: 0 10px 17px;
}

.faq-answer p {
    margin: 0;
    color: #536783;
    font-size: 13.5px;
    line-height: 1.8;
}

/* =========================================
   FAQ PAGE — CONTACT SUPPORT SECTION
   ========================================= */
   
   .faq-contact-support {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 30px;
    padding: 30px 34px;
    border: 1px solid #dce8f8;
    border-radius: 14px;
    background: linear-gradient(
        110deg,
        #f0f6ff 0%,
        #e5efff 100%
    );
}

/* Contact text */
.faq-contact-text {
    max-width: 620px;
}

.faq-contact-text h2 {
    margin: 0;
    color: #092750;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.4px;
}

.faq-contact-text p {
    margin: 9px 0 0;
    color: #526783;
    font-size: 14px;
    line-height: 1.75;
}

/* Contact button */
.faq-contact-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    padding: 12px 20px;
    border: 1px solid #124b96;
    border-radius: 7px;
    background: #104b98;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.faq-contact-button span {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.faq-contact-button:hover {
    background: #083b7c;
    border-color: #083b7c;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(16, 75, 152, 0.16);
}

.faq-contact-button:hover span {
    transform: translateX(3px);
}

.faq-contact-button:focus-visible {
    outline: 3px solid #8bb9ff;
    outline-offset: 3px;
}

   
   
   
   

/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    
    /* =========================================
   FAQ PAGE — HERO SECTION
   ========================================= */
   
   /* =========================================
   FAQ PAGE — CATEGORIES & QUESTIONS
   ========================================= */
   
   /* =========================================
   FAQ PAGE — CONTACT SUPPORT SECTION
   ========================================= */
   
    
}


@media (max-width: 900px) {
    
    /* =========================================
   FAQ PAGE — HERO SECTION
   ========================================= */
   
   .faq-hero-content {
        padding: 24px 22px 30px;
    }

    .faq-breadcrumb {
        margin-bottom: 20px;
    }

    .faq-hero-layout {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr);
        gap: 20px;
        min-height: 140px;
    }

    .faq-hero-text h1 {
        font-size: 34px;
        letter-spacing: -0.8px;
    }

    .faq-hero-text p {
        font-size: 14px;
        line-height: 1.65;
    }

    .faq-hero-visual {
        min-height: 150px;
    }
    
    /* =========================================
   FAQ PAGE — CATEGORIES & QUESTIONS
   ========================================= */
   
   .faq-content-section {
        padding: 24px 16px 34px;
    }

    .faq-content {
        gap: 12px;
    }

    .faq-category-header {
        grid-template-columns: 54px minmax(0, 1fr) 20px;
        gap: 13px;
        padding: 13px 14px;
    }

    .faq-category-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

    .faq-category-title {
        font-size: 15px;
    }

    .faq-category-description {
        font-size: 12.5px;
    }

    .faq-category-body {
        padding: 0 14px 8px;
    }

    .faq-item summary {
        font-size: 13.5px;
    }

    .faq-answer p {
        font-size: 13px;
    }
    
    /* =========================================
   FAQ PAGE — CONTACT SUPPORT SECTION
   ========================================= */
   .faq-contact-support {
        gap: 20px;
        margin-top: 24px;
        padding: 25px 22px;
    }

    .faq-contact-text h2 {
        font-size: 21px;
    }

    .faq-contact-text p {
        font-size: 13px;
    }

    .faq-contact-button {
        padding: 11px 15px;
    }
   
    
}
    
@media (max-width: 768px) {
    
    /* =========================================
   FAQ PAGE — HERO SECTION
   ========================================= */
   .faq-hero-content {
        padding: 18px 18px 28px;
    }

    .faq-breadcrumb {
        margin-bottom: 18px;
        font-size: 11px;
    }

    .faq-hero-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        min-height: auto;
    }

    .faq-hero-text h1 {
        font-size: 31px;
        line-height: 1.17;
        letter-spacing: -0.7px;
        text-align: center;
    }

    .faq-hero-text p {
        margin-top: 12px;
        font-size: 14px;
        text-align: center;
    }

    .faq-hero-visual {
        min-height: 0;
    }

    .faq-hero-visual img {
        max-width: 340px;
    }

    .faq-hero::before {
        right: -120px;
        top: -180px;
    }
    
    /* =========================================
   FAQ PAGE — CATEGORIES & QUESTIONS
   ========================================= */
   
  .faq-content-section {
        padding: 20px 12px 28px;
    }

    .faq-content {
        gap: 12px;
    }

    .faq-category {
        border-radius: 10px;
    }

    .faq-category-header {
        grid-template-columns: 46px minmax(0, 1fr) 16px;
        gap: 11px;
        padding: 13px 12px;
    }

    .faq-category-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

    .faq-category-title {
        font-size: 14px;
        line-height: 1.4;
    }

    .faq-category-description {
        font-size: 11.5px;
        line-height: 1.5;
    }

    .faq-category-chevron {
        font-size: 20px;
    }

    .faq-category-body {
        padding: 0 12px 6px;
    }

    .faq-item summary {
        padding: 14px 28px 14px 4px;
        font-size: 13px;
    }

    .faq-item summary::after {
        right: 5px;
    }

    .faq-answer {
        padding: 0 4px 15px;
    }

    .faq-answer p {
        font-size: 12.5px;
        line-height: 1.75;
    } 
    
    /* =========================================
   FAQ PAGE — CONTACT SUPPORT SECTION
   ========================================= */
   .faq-contact-support {
        flex-direction: column;
        align-items: center;
        gap: 18px;
        margin-top: 22px;
        padding: 24px 18px;
        border-radius: 11px;
        text-align: center;
    }

    .faq-contact-text {
        max-width: 100%;
    }

    .faq-contact-text h2 {
        font-size: 20px;
        line-height: 1.4;
    }

    .faq-contact-text p {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.7;
    }

    .faq-contact-button {
        width: 100%;
        max-width: 260px;
        min-height: 45px;
    }
   
   
    
}

@media (max-width: 480px) {
    
    /* =========================================
   FAQ PAGE — HERO SECTION
   ========================================= */
   
   .faq-hero-content {
        padding-right: 15px;
        padding-left: 15px;
    }

    .faq-hero-text h1 {
        font-size: 28px;
    }
    
    /* =========================================
   FAQ PAGE — CATEGORIES & QUESTIONS
   ========================================= */
   
   /* =========================================
   FAQ PAGE — CONTACT SUPPORT SECTION
   ========================================= */
   
   
    
}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .faq-contact-button,
    .faq-contact-button span {
        transition: none;
    }
}



/-------------------------GALLERY PAGE----------------------------------/

/* =========================================
   GALLERY PAGE - HERO SECTION
========================================= */

/* Hero Background */

.gallery-hero {
    position: relative;
    width: 100%;
    background: linear-gradient(
        110deg,
        #f5f9ff 0%,
        #edf4ff 48%,
        #ffffff 100%
    );
    overflow: hidden;
}

.gallery-hero-content {
    max-width: 100%;
    margin: 0 auto;
    padding-left: 50px;
}

/* Breadcrumb */

.gallery-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #64748b;
}

.gallery-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.gallery-breadcrumb a:hover {
    color: #0756b9;
}

.gallery-breadcrumb span:last-child {
    color: #0756b9;
    font-weight: 600;
}

/* Hero Layout */

.gallery-hero-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    min-height: 480px;
    position: relative;
}

/* Hero Text */

.gallery-hero-text {
    position: relative;
    z-index: 2;
    padding: 35px 0 55px;
}

.gallery-hero-eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    color: #52647e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
}

.gallery-hero-text h1 {
    max-width: 620px;
    margin: 0 0 24px;
    color: #101828;
    font-size: clamp(42px, 5vw, 76px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.gallery-hero-text h1 span {
    display: block;
    color: #0756b9;
    font-weight: 750;
}

.gallery-hero-text p {
    max-width: 520px;
    margin: 0;
    color: #596579;
    font-size: 18px;
    line-height: 1.75;
}

.gallery-hero-text::after {
    content: "";
    display: block;
    width: 75px;
    height: 3px;
    margin-top: 32px;
    background: #0756b9;
}

/* Hero Image */

.gallery-hero-visual {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 8%,
        #000000 27%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 8%,
        #000000 27%
    );
}


/* =========================================
   GALLERY SECTION 2 - EXPLORE OUR GALLERY
========================================= */

.gallery-explore {
    width: 100%;
    padding: 18px 36px 28px;
    background: #ffffff;
}

.gallery-explore-container {
    max-width: 1500px;
    margin: 0 auto;
}

/* SECTION HEADING */

.gallery-explore-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.gallery-explore-heading h2 {
    margin: 0 0 3px;
    color: #101d38;
    font-size: 25px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.gallery-explore-heading h2 span {
    color: #0756b9;
}

.gallery-explore-heading p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

/* NAVIGATION CONTROLS */

.gallery-explore-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.gallery-explore-line {
    display: block;
    width: 95px;
    height: 1px;
    margin-right: 3px;
    background: #dce3ec;
}

.gallery-explore-prev,
.gallery-explore-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s ease,
                color 0.25s ease;
}

.gallery-explore-prev {
    color: #aab4c2;
    background: #eef1f5;
}

.gallery-explore-prev:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.gallery-explore-next {
    color: #ffffff;
    background: #0756b9;
}

.gallery-explore-next:hover {
    background: #06458f;
}


/* CATEGORY GRID */

.gallery-category-grid {
    display: flex;
    gap: 10px;
    overflow: hidden;
}

/* CATEGORY CARD */

.gallery-category-card {
   flex: 0 0 calc((100% - 40px) / 5);
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5ebf4;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(16, 40, 80, 0.055);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.gallery-category-card:hover {
    transform: translateY(-4px);
    border-color: #c5d9f5;
    box-shadow: 0 9px 22px rgba(16, 40, 80, 0.10);
}

/* CATEGORY IMAGE */

.gallery-category-image {
    width: 100%;
    height: 95px;
    overflow: hidden;
    background: #edf3fa;
}

.gallery-category-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.gallery-category-card:hover .gallery-category-image img {
    transform: scale(1.05);
}

/* CATEGORY INFORMATION */

.gallery-category-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 9px 10px;
    background: #f7faff;
}

/* CATEGORY ICON */

.gallery-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: #0756b9;
    background: #eaf2ff;
    border: 1px solid #dce9fc;
    border-radius: 50%;
}

.gallery-category-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* CATEGORY TEXT */

.gallery-category-text {
    flex: 1;
    min-width: 0;
}

.gallery-category-text h3 {
    margin: 0 0 3px;
    color: #14213b;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
}

.gallery-category-text p {
    margin: 0;
    color: #64748b;
    font-size: 10px;
    line-height: 1.35;
}

/* ARROW */

.gallery-category-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    color: #153d78;
    background: #ffffff;
    border: 1px solid #e0e8f3;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    transition: color 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease;
}

.gallery-category-card:hover .gallery-category-arrow {
    color: #ffffff;
    background: #0756b9;
    border-color: #0756b9;
}



/* =========================================
   GALLERY CATEGORY SECTION
========================================= */

.gallery-category-section {
    width: 100%;
    padding: 20px 36px 10px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Section heading */

.gallery-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.gallery-section-title {
    min-width: 0;
}

.gallery-section-title h2 {
    position: relative;
    margin: 0 0 3px;
    padding-left: 13px;
    color: #101d38;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.gallery-section-title h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 4px;
    height: 21px;
    background: #0755b8;
    border-radius: 2px;
}

.gallery-section-title p {
    margin: 0;
    padding-left: 13px;
    color: #687386;
    font-size: 13px;
    line-height: 1.5;
}

/* View More button */

.gallery-view-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 8px 15px;
    border: 1px solid #0755b8;
    border-radius: 30px;
    background: #ffffff;
    color: #0755b8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.gallery-view-more:hover {
    background: #0755b8;
    color: #ffffff;
}

.gallery-view-more span {
    font-size: 16px;
    line-height: 1;
}

/* Image grid */

.gallery-image-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
     width: 100%;
    min-width: 0;
}

.gallery-image {
    display: block;
    position: relative;
    width: 100%;
    height: 110px;
    overflow: hidden;
    border-radius: 7px;
    background: #edf2f8;
}

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

.gallery-image:hover img {
    transform: scale(1.05);
}

/* Extra images */

.gallery-extra-images {
    margin-top: 10px;
}

.gallery-extra-images[hidden] {
    display: none;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    background: rgba(0, 0, 0, 0.92);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.25s ease;
}

.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-lightbox img {
    max-width: 90%;
    max-height: 88vh;
    object-fit: contain;
}

.gallery-lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 45px;
    height: 45px;
    border: 0;
    border-radius: 50%;
    background: white;
    color: #111;
    font-size: 30px;
    cursor: pointer;
}

body.lightbox-open {
    overflow: hidden;
}

/* =========================================
   GALLERY CLOSING CTA
========================================= */

.gallery-cta {
    position: relative;
    display: grid;
    grid-template-columns: 42% 58%;
    align-items: stretch;

    width: calc(100% - 65px);
    max-width: 1460px;
    min-height: 430px;

    margin: 60px auto;
    padding: 0 0 0 52px;

    overflow: hidden;
    border: 1px solid #d5e5ff;
    border-radius: 24px;

    background: linear-gradient(
        110deg,
        #edf4ff 0%,
        #e8f1ff 55%,
        #dceaff 100%
    );
}

/* LEFT CONTENT */

.gallery-cta-content {
    position: relative;
    z-index: 3;
    align-self: center;
    max-width: 590px;
    padding: 35px 15px 35px 0;
}

.gallery-cta-label {
    display: inline-block;
    margin-bottom: 22px;
    color: #0756bd;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.gallery-cta-label::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin-top: 16px;
    background: #0756bd;
    border-radius: 5px;
}

.gallery-cta h2 {
    margin: 0 0 18px;
    color: #102b50;
    font-size: clamp(34px, 3.2vw, 56px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.gallery-cta h2 span {
    color: #0756bd;
}

.gallery-cta p {
    max-width: 570px;
    margin: 0 0 28px;
    color: #64748b;
    font-size: 17px;
    line-height: 1.7;
}

/* BUTTONS */

.gallery-cta-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.gallery-cta-primary,
.gallery-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;
    padding: 0 27px;

    border-radius: 9px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;

    transition: all 0.25s ease;
}

.gallery-cta-primary {
    color: #fff;
    background: #0756bd;
    border: 1px solid #0756bd;
}

.gallery-cta-primary:hover {
    color: #fff;
    background: #06469a;
    transform: translateY(-2px);
}

.gallery-cta-secondary {
    color: #0756bd;
    background: #fff;
    border: 1px solid #bcd3f5;
}

.gallery-cta-secondary:hover {
    color: #06469a;
    background: #f5f9ff;
    border-color: #0756bd;
    transform: translateY(-2px);
}

/* LOCATION ICON */

/* RIGHT IMAGE */

.gallery-cta-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 430px;
    overflow: hidden;
    border-radius: 0;
    isolation: isolate;
}

/* Diagonal transition */

.gallery-cta-image::before {
    content: "";
    position: absolute;
    z-index: 2;

    top: -20%;
    left: -105px;

    width: 150px;
    height: 145%;

    background: rgba(226, 239, 255, 0.85);
    transform: skewX(-29deg);

    pointer-events: none;
}

.gallery-cta-image::after {
    content: "";
    position: absolute;
    z-index: 2;

    top: -20%;
    left: -155px;

    width: 65px;
    height: 145%;

    background: rgba(255, 255, 255, 0.35);
    transform: skewX(-29deg);

    pointer-events: none;
}

.gallery-cta-image img {
    display: block;
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    min-height: 430px;

    object-fit: cover;
    object-position: center;
}







/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    
    /* =========================================
   GALLERY PAGE - HERO SECTION
========================================= */

/* =========================================
   GALLERY SECTION 2 - EXPLORE OUR GALLERY
========================================= */

/* =========================================
   GALLERY CATEGORY SECTION
========================================= */

/* =========================================
   GALLERY CLOSING CTA
========================================= */


    
}


@media (max-width: 900px) {
    
    /* =========================================
   GALLERY PAGE - HERO SECTION
========================================= */

.gallery-hero-content {
        padding: 28px 25px 0;
    }

    .gallery-hero-layout {
        grid-template-columns: 1fr 1fr;
        min-height: 400px;
    }

    .gallery-hero-text h1 {
        font-size: 48px;
    }

    .gallery-hero-text p {
        font-size: 16px;
    }

    .gallery-hero-visual {
        min-height: 400px;
    }
    
    

/* =========================================
   GALLERY SECTION 2 - EXPLORE OUR GALLERY
========================================= */

.gallery-explore {
        padding: 25px 22px 30px;
    }

.gallery-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

.gallery-category-image {
        height: 120px;
    }
    
    
/* =========================================
   GALLERY CATEGORY SECTION
========================================= */

.gallery-category-section {
        padding: 18px 24px 8px;
    }

    .gallery-image-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gallery-image {
        height: 120px;
    }
    
    
/* =========================================
   GALLERY CLOSING CTA
========================================= */

.gallery-cta {
        grid-template-columns: 45% 55%;
        width: calc(100% - 50px);
        min-height: 370px;
        padding-left: 35px;
    }

    .gallery-cta h2 {
        font-size: 38px;
    }

    .gallery-cta p {
        font-size: 15px;
    }

    .gallery-cta-primary,
    .gallery-cta-secondary {
        min-height: 48px;
        padding: 0 17px;
        font-size: 14px;
    }

    .gallery-cta-image,
    .gallery-cta-image img {
        min-height: 300px;
    }
    
}
    
@media (max-width: 768px) {
    
    /* =========================================
   GALLERY PAGE - HERO SECTION
========================================= */

    .gallery-hero-content {
        padding: 20px 18px 0;
    }

    .gallery-breadcrumb {
        margin-bottom: 15px;
        font-size: 13px;
    }

    .gallery-hero-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
    }

    .gallery-hero-text {
        padding: 20px 0 25px;
        text-align: center;
    }

    .gallery-hero-eyebrow {
        font-size: 11px;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    .gallery-hero-text h1 {
        font-size: 42px;
        letter-spacing: -1.5px;
        margin-bottom: 16px;
    }

    .gallery-hero-text p {
        font-size: 15px;
        line-height: 1.65;
        margin: 0 auto;
    }

    .gallery-hero-text::after {
        margin: 22px auto 0;
    }

    .gallery-hero-visual {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 290px;
        overflow: hidden;
    }

     .gallery-hero-visual img {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;

        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.5) 12%,
            #000000 30%
        );

        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.5) 12%,
            #000000 30%
        );
    }
    
/* =========================================
   GALLERY SECTION 2 - EXPLORE OUR GALLERY
========================================= */

    .gallery-explore {
        padding: 35px 0 30px;
    }

    .gallery-explore-container {
        width: 100%;
    }

    .gallery-explore-heading {
        padding: 0 18px;
        margin-bottom: 18px;
    }

    .gallery-explore-heading h2 {
        font-size: 23px;
    }

    .gallery-explore-heading p {
        font-size: 12px;
    }

    .gallery-category-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 2px 18px 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gallery-category-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-category-card {
        flex: 0 0 235px;
        scroll-snap-align: start;
    }

    .gallery-category-image {
        height: 125px;
    }

    .gallery-category-info {
        min-height: 62px;
        padding: 10px;
        gap: 9px;
    }

    .gallery-category-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .gallery-category-text h3 {
        font-size: 12px;
    }

    .gallery-category-text p {
        font-size: 10px;
    }
    
/* =========================================
   GALLERY CATEGORY SECTION
========================================= */

    .gallery-category-section {
        padding: 0 15px;
        margin: 35px 0;
    }

    /* Stack heading elements vertically */
    .gallery-section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

    /* Heading */
    .gallery-section-title {
        width: 100%;
    }

    .gallery-section-title h2 {
        font-size: 25px;
        line-height: 1.25;
        margin: 0 0 10px;
    }

    /* Description gets full width */
    .gallery-section-title p {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    text-align: center;
}

    /* Button below description */
    .gallery-view-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    min-height: 44px;
    padding: 10px 22px;
    margin: 0 auto;

    font-size: 14px;
    white-space: nowrap;
}

    /* Two-column image grid */
    .gallery-image-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .gallery-image {
        width: 100%;
        aspect-ratio: 1 / 0.85;
        height: auto;
        overflow: hidden;
        border-radius: 12px;
    }

    .gallery-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Show only four initial images */
    .gallery-category-section > .gallery-image-grid:not(.gallery-extra-images)
    .gallery-image:nth-child(n+5) {
        display: none;
    }

    .gallery-extra-images[hidden] {
        display: none !important;
    }

    
    
/* =========================================
   GALLERY CLOSING CTA
========================================= */

.gallery-cta {
        display: flex;
        flex-direction: column;
        width: calc(100% - 30px);
        min-height: auto;
        margin: 40px auto;
        padding: 32px 22px 22px;
        gap: 25px;
        border-radius: 16px;
    }

    .gallery-cta-content {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .gallery-cta-label {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .gallery-cta h2 {
        font-size: 32px;
        letter-spacing: -0.7px;
    }

    .gallery-cta p {
        font-size: 14px;
    }

    .gallery-cta-image {
        width: 100%;
        height: 230px;
        min-height: 230px;
        border-radius: 12px;
    }

    .gallery-cta-image img {
        height: 230px;
        min-height: 230px;
    }

    .gallery-cta-image::before,
    .gallery-cta-image::after {
        display: none;
    }

}

@media (max-width: 480px) {
    
    /* =========================================
   GALLERY PAGE - HERO SECTION
========================================= */

/* =========================================
   GALLERY SECTION 2 - EXPLORE OUR GALLERY
========================================= */

/* =========================================
   GALLERY CATEGORY SECTION
========================================= */

/* =========================================
   GALLERY CLOSING CTA
========================================= */
    
.gallery-cta {
        padding: 26px 17px 17px;
    }

    .gallery-cta h2 {
        font-size: 28px;
    }

    .gallery-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-cta-primary,
    .gallery-cta-secondary {
        width: 100%;
    }

    .gallery-cta-image {
        height: 190px;
        min-height: 190px;
    }

    .gallery-cta-image img {
        height: 190px;
        min-height: 190px;
    }

}






/*-------------------------404 PAGE----------------------------------*/


.error-page {
    position: relative;
    width: 100%;
    min-height: 650px;
    padding: 35px 20px 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #ffffff;

    background-image: radial-gradient(
        rgba(37, 99, 235, 0.14) 1px,
        transparent 1px
    );
    background-size: 24px 24px;
}

/* BLUE DIAGONAL EDGE */
.error-page::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 65px;
    height: 100%;
    background: linear-gradient(
        180deg,
        #075dcc,
        #4b83e8
    );
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* CONTENT */
.error-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}

/* LABEL */
.error-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #075dcc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* ILLUSTRATION */
.error-illustration {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 5px;
}

.error-illustration img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* HEADING */
.error-content h1 {
    margin: 0 0 12px;
    color: #101d45;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -2px;
}

.error-content h1 span {
    color: #075dcc;
}

/* SUBHEADING */
.error-content h2 {
    margin: 0 0 12px;
    color: #46536d;
    font-size: 19px;
    font-weight: 600;
}

/* DESCRIPTION */
.error-content p {
    max-width: 570px;
    margin: 0 auto 25px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

/* BUTTONS */
.error-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.error-btn-primary,
.error-btn-secondary {
    min-height: 48px;
    padding: 13px 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.error-btn-primary {
    color: #ffffff;
    background: #075dcc;
    box-shadow: 0 8px 20px rgba(7, 93, 204, 0.18);
}

.error-btn-primary:hover {
    background: #064ba5;
    transform: translateY(-2px);
}

.error-btn-secondary {
    color: #075dcc;
    border: 1.5px solid #075dcc;
    background: #ffffff;
}

.error-btn-secondary:hover {
    color: #ffffff;
    background: #075dcc;
}




/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    
}


@media (max-width: 900px) {
    
    .error-page {
        min-height: 600px;
        padding: 45px 25px 60px;
    }

    .error-illustration {
        height: 350px;
    }

    .error-content h1 {
        font-size: 46px;
    }
    
}
    
@media (max-width: 768px) {
    
    .error-page {
        min-height: auto;
        padding: 35px 20px 65px;
    }

    .error-page::before {
        width: 450px;
        height: 450px;
        top: -250px;
    }

    .error-page::after {
        width: 25px;
    }

    .error-illustration {
        height: 230px;
        margin-bottom: 15px;
    }

    .error-content h1 {
        font-size: 34px;
        line-height: 1.15;
        margin-bottom: 14px;
    }

    .error-content h2 {
        font-size: 17px;
    }

    .error-content p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    .error-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .error-btn-primary,
    .error-btn-secondary {
        width: 100%;
        max-width: 290px;
        min-height: 50px;
        font-size: 14px;
    }
    
}

@media (max-width: 480px) {
    
}








/* ── CONTACT PAGE ── */
.quick-contact-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
.quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: opacity .2s, transform .15s;
}
.quick-chip:hover { opacity: 0.88; transform: translateY(-2px); }
.quick-chip-blue  { background: var(--blue); color: #fff; }
.quick-chip-navy  { background: var(--navy); color: #fff; }
.quick-chip-green { background: #25d366; color: #fff; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 48px;
    align-items: start;
}
.contact-form-wrap h2 { font-size: 1.5rem; color: var(--navy); margin-bottom: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}
.required { color: #dc2626; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--gray-900);
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.btn-block { width: 100%; }

.contact-info-panel { display: flex; flex-direction: column; gap: 16px; }
.contact-info-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px 24px;
}
.contact-info-card h3 { font-size: 1rem; color: var(--navy); margin-bottom: 8px; }
.contact-info-card p  { font-size: 0.9rem; color: var(--gray-700); line-height: 1.6; }

.map-container { height: 380px; }

/* ── LEGAL PAGES ── */
.legal-doc {
    max-width: 800px;
    margin: 0 auto;
    color: var(--gray-700);
    line-height: 1.8;
}
.legal-doc h2 {
    font-size: 1.2rem;
    color: var(--navy);
    margin: 36px 0 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-200);
}
.legal-doc p  { margin-bottom: 14px; }
.legal-doc a  { color: var(--blue); text-decoration: underline; }

/* ── RESPONSIVE for inner pages ── */
@media (max-width: 1024px) {
    .about-intro-grid  { grid-template-columns: 1fr; gap: 40px; }
    .offerings-grid    { grid-template-columns: repeat(2, 1fr); }
    .services-grid     { grid-template-columns: repeat(2, 1fr); }
    .why-service-grid  { grid-template-columns: repeat(2, 1fr); }
    .pillars-grid      { grid-template-columns: repeat(2, 1fr); }
    .contact-grid      { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .timeline::before { left: 20px; }
    .timeline-item { padding: 0 0 36px 60px; justify-content: flex-start; }
    .timeline-item-right { flex-direction: row; padding: 0 0 36px 60px; }
    .timeline-marker { left: 20px; transform: none; font-size: 0.72rem; padding: 4px 10px; }
    .timeline-card { width: 100%; }
    .offerings-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid  { grid-template-columns: 1fr; }
    .why-service-grid { grid-template-columns: 1fr 1fr; }
    .pillars-grid   { grid-template-columns: 1fr; }
    .about-intro-stats { grid-template-columns: repeat(2, 1fr); }
    .amc-feature-card { flex-direction: column; gap: 16px; padding: 24px; }
    .amc-bullets { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .quick-contact-strip { gap: 8px; }
    .quick-chip { font-size: 0.85rem; padding: 10px 16px; }
}

@media (max-width: 480px) {
    .offerings-grid { grid-template-columns: 1fr; }
    .why-service-grid { grid-template-columns: 1fr; }
    .about-intro-stats { grid-template-columns: 1fr 1fr; }
}