/* =====================================================
   JSV TechGroup - Complete Stylesheet
   Clean, modern, light + dark sections
   Fully responsive
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f7fb;
    color: #1a1f2e;
    overflow-x: hidden;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* =========================
   3D HERO BACKGROUND (kept for future Three.js)
========================= */
#three-container {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
#three-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================================
   TOP BAR – always one row
========================================================= */
.top-bar {
    background: #0b1120;
    color: #cbd5e1;
    font-size: 13px;
    height: 36px;
    display: flex;
    align-items: center;
    z-index: 1001;
}

.top-bar-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.top-contact {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.top-email,
.top-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.25s ease;
    white-space: nowrap;
    font-size: 13px;
}

.top-email:hover,
.top-phone:hover {
    color: #00d4ff;
}

.top-email svg,
.top-phone svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.top-social {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.top-social a {
    color: #94a3b8;
    display: flex;
    transition: color 0.25s ease, transform 0.25s ease;
}

.top-social a:hover {
    color: #00d4ff;
    transform: translateY(-1px);
}

.top-social svg {
    width: 14px;
    height: 14px;
}

/* ---------- Responsive – still ONE row ---------- */
@media (max-width: 992px) {
    .top-bar-inner {
        padding: 0 4%;
    }
    .top-contact {
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .top-bar {
        height: 34px;
        font-size: 12px;
    }
    .top-bar-inner {
        padding: 0 16px;
    }
    .top-email,
    .top-phone {
        font-size: 12px;
        gap: 5px;
    }
    .top-contact {
        gap: 12px;
    }
    .top-social {
        gap: 10px;
    }
    .top-social svg {
        width: 13px;
        height: 13px;
    }
}

/* Very small phones – hide email text, keep only icon + phone */
@media (max-width: 480px) {
    .top-bar {
        height: 32px;
    }
    .top-bar-inner {
        padding: 0 12px;
    }
    .top-email span {
        display: none;          /* only envelope icon remains */
    }
    .top-email {
        gap: 0;
    }
    .top-phone {
        font-size: 11.5px;
    }
    .top-contact {
        gap: 10px;
    }
    .top-social {
        gap: 9px;
    }
    .top-social svg {
        width: 12px;
        height: 12px;
    }
}

/* =========================================================
   NAVBAR (sticky)
========================================================= */
.navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px;
    display: flex;
    align-items: center;
    padding: 0 6%;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 1000;
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 24px;
}
.logo-img {
    display: block;
    height: 75px;
    width: auto;
    max-width: 350px;
    object-fit: contain;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
    height: 100%;
}
.nav-links > a,
.nav-parent {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    color: #1a1f2e;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.25s ease;
}
.nav-links > a:hover,
.nav-parent:hover {
    color: #315efb;
}

/* Services dropdown */
.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.nav-parent {
    gap: 6px;
}
.arrow {
    font-size: 12px;
    transition: transform 0.25s ease;
}
.has-dropdown:hover .arrow {
    transform: rotate(180deg);
}
.dropdown {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    width: 240px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.22s ease;
}
.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.dropdown a {
    display: block;
    padding: 11px 14px;
    border-radius: 8px;
    color: #1a1f2e;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.dropdown a:hover {
    background: #f1f5ff;
    color: #315efb;
}

/* Get Started button */
.nav-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 40px;
    min-width: 124px;
    min-height: 40px;
    padding: 0 18px;
    box-sizing: border-box;
    border: none;
    border-radius: 9px;
    background: #315efb;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: visible;
    z-index: 1;
    box-shadow: 0 5px 14px rgba(49, 94, 251, 0.22);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.nav-button::before {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
    border-radius: 12px;
    background: conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 25deg,
            rgba(0, 212, 255, 0.15) 45deg,
            rgba(0, 212, 255, 0.95) 75deg,
            rgba(122, 92, 255, 0.95) 130deg,
            rgba(49, 94, 251, 0.55) 175deg,
            transparent 220deg,
            transparent 360deg
    );
    padding: 1.5px;
    box-sizing: border-box;
    z-index: -1;
    pointer-events: none;
    animation: navGlowRotate 3.5s linear infinite;
    filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.30));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
@keyframes navGlowRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.nav-button:hover {
    transform: translateY(-1px);
    background: #2d56e5;
    box-shadow: 0 7px 18px rgba(49, 94, 251, 0.30);
}
.nav-button:hover::before {
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.45));
}
.nav-links > a.nav-button {
    height: 50px !important;
    min-height: 40px !important;
    align-self: center;
}

/* Mobile toggle */
.mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
}
.mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 5px;
    background: #1a1f2e;
    transition: all 0.25s ease;
}
.mobile-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}
.mobile-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   HERO
========================================================= */
.hero {
    min-height: 100svh;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 6% 40px;
    background: linear-gradient(145deg, #05070d 0%, #0a1225 55%, #0d1a30 100%);
    color: #ffffff;
    overflow: hidden;
}
.hero-content {
    width: 50%;
    max-width: 620px;
    position: relative;
    z-index: 10;
    animation: contentIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes contentIn {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #bfc5d5;
    font-size: 13px;
    margin-bottom: 26px;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d4ff;
    box-shadow: 0 0 12px #00d4ff;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
.hero h1 {
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.15;
    letter-spacing: -1.5px;
    font-weight: 800;
}
.hero h1 span {
    display: block;
    background: linear-gradient(90deg, #00d4ff, #7a5cff, #00d4ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientMove 5s linear infinite;
}
@keyframes gradientMove {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
.hero p {
    margin-top: 20px;
    max-width: 540px;
    color: #a5aabb;
    font-size: 15px;
    line-height: 1.7;
}
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
    animation: buttonsIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
@keyframes buttonsIn {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0); }
}
.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.28s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.primary-button {
    background: #3b82f6;
    color: #ffffff;
}
.primary-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(59, 130, 246, 0.4);
}
.secondary-button {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.secondary-button:hover {
    background: rgba(255, 255, 255, 0.12);
}
.hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 48px;
    animation: statsIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}
@keyframes statsIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-stats div {
    display: flex;
    flex-direction: column;
}
.hero-stats strong {
    font-size: 15px;
    color: #ffffff;
}
.hero-stats small {
    font-size: 13px;
    color: #8a91a3;
    margin-top: 2px;
}

/* World + Stars */
.hero-visual {
    position: absolute;
    right: 0;
    top: 0;
    width: 58%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.stars,
.stars-2,
.stars-3 {
    position: absolute;
    inset: 0;
    background-image:
            radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
            radial-gradient(1.5px 1.5px at 40px 70px, rgba(255,255,255,0.9), transparent),
            radial-gradient(1px 1px at 90px 40px, #fff, transparent),
            radial-gradient(1.5px 1.5px at 130px 80px, rgba(255,255,255,0.8), transparent),
            radial-gradient(1px 1px at 160px 120px, #fff, transparent),
            radial-gradient(1.5px 1.5px at 200px 50px, rgba(255,255,255,0.7), transparent),
            radial-gradient(1px 1px at 250px 160px, #fff, transparent),
            radial-gradient(1.5px 1.5px at 300px 90px, rgba(255,255,255,0.85), transparent),
            radial-gradient(1px 1px at 350px 140px, #fff, transparent),
            radial-gradient(1.5px 1.5px at 400px 60px, rgba(255,255,255,0.75), transparent);
    background-repeat: repeat;
    background-size: 450px 200px;
    animation: starsMove 120s linear infinite;
    opacity: 0.7;
}
.stars-2 { background-size: 350px 180px; animation-duration: 90s; opacity: 0.45; }
.stars-3 { background-size: 280px 150px; animation-duration: 70s; opacity: 0.3; }
@keyframes starsMove {
    from { transform: translateY(0); }
    to   { transform: translateY(-200px); }
}
.world-wrapper {
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    width: min(680px, 90%);
    height: min(680px, 90%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.world {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.earth-img {
    width: min(520px, 76%);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
            0 0 0 1px rgba(0, 212, 255, 0.15),
            0 0 80px rgba(0, 212, 255, 0.3),
            0 0 160px rgba(122, 92, 255, 0.18),
            inset 0 0 50px rgba(0, 0, 0, 0.45);
    animation:
            earthZoom 1.6s cubic-bezier(0.22, 1, 0.36, 1) both,
            earthRotate 40s linear 1.6s infinite;
}
@keyframes earthZoom {
    0%   { transform: scale(0.25); opacity: 0; }
    70%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes earthRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.world-glow {
    position: absolute;
    width: 115%;
    height: 115%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.25) 0%, transparent 70%);
    filter: blur(60px);
    z-index: -1;
    animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.08); }
}
.orbit {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 212, 255, 0.25);
    animation: orbitSpin linear infinite;
}
.orbit-1 {
    width: 108%;
    height: 108%;
    animation-duration: 22s;
}
.orbit-2 {
    width: 122%;
    height: 122%;
    border-color: rgba(122, 92, 255, 0.2);
    animation-duration: 34s;
    animation-direction: reverse;
}
@keyframes orbitSpin {
    from { transform: rotateX(68deg) rotateZ(0deg); }
    to   { transform: rotateX(68deg) rotateZ(360deg); }
}
.visual-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 20px;
    background: rgba(10, 13, 24, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    font-size: 12.5px;
    color: #d6d9e3;
    pointer-events: none;
    white-space: nowrap;
}
.visual-label span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d4ff;
    box-shadow: 0 0 10px #00d4ff;
}
.label-1 { top: 14%; right: 18%; }
.label-2 { top: 48%; right: 4%; }
.label-3 { top: 78%; right: 16%; }

/* =========================================================
   RESPONSIVE – ALL BREAKPOINTS
========================================================= */

/* Large desktops / 1440+ */
@media (min-width: 1440px) {
    .navbar {
        padding-left: max(6%, calc((100% - 1400px) / 2));
        padding-right: max(6%, calc((100% - 1400px) / 2));
    }
    .hero {
        padding-left: max(6%, calc((100% - 1400px) / 2));
        padding-right: max(6%, calc((100% - 1400px) / 2));
    }
}

/* 4K / TV */
@media (min-width: 1920px) {
    .logo-img { height: 85px; max-width: 400px; }
    .nav-links { gap: 36px; }
    .nav-links > a,
    .nav-parent { font-size: 17px; }
    .hero h1 { font-size: clamp(40px, 2.8vw, 56px); }
    .world-wrapper {
        width: min(760px, 85%);
        height: min(760px, 85%);
    }
}

/* ≤ 1200 px */
@media (max-width: 1200px) {
    .world-wrapper {
        width: min(580px, 88%);
        height: min(580px, 88%);
        left: 55%;
    }
    .earth-img { width: min(440px, 76%); }
}

/* ≤ 1100 px */
@media (max-width: 1100px) {
    .navbar { padding: 0 4%; }
    .nav-links { gap: 18px; }
    .logo-img { height: 50px; max-width: 240px; }
}

/* =========================================================
   MOBILE / TABLET NAVIGATION
   Perfectly attached to navbar
========================================================= */

@media (max-width: 850px) {

    /* -----------------------------------------
       NAVBAR
    ----------------------------------------- */

    .navbar {
        position: sticky !important;
        top: 0;
        left: 0;

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

        padding: 0 16px !important;

        box-sizing: border-box;

        display: flex;
        align-items: center;

        z-index: 100000;

        isolation: isolate;
    }


    /* -----------------------------------------
       LOGO
    ----------------------------------------- */

    .logo-img {
        display: block;

        height: 48px;
        width: auto;
        max-width: 210px;

        object-fit: contain;
    }


    /* -----------------------------------------
       MOBILE MENU
    ----------------------------------------- */

    .nav-links {
        position: fixed !important;

        /*
         * IMPORTANT:
         * Navbar is exactly 68px.
         * Menu starts EXACTLY at 68px.
         */
        top: 68px !important;
        left: 0 !important;
        right: 0 !important;

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

        height: auto !important;
        max-height: calc(100dvh - 68px);

        margin: 0 !important;

        padding: 12px 16px 20px !important;

        box-sizing: border-box;

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

        gap: 0;

        /*
         * Completely opaque.
         * This prevents hero text/image from
         * appearing behind the menu.
         */
        background: #ffffff !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

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

        overflow-x: hidden;
        overflow-y: auto;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-10px);

        z-index: 99999;

        transition:
                opacity 0.2s ease,
                transform 0.2s ease,
                visibility 0s linear 0.2s;
    }


    /* -----------------------------------------
       OPEN MENU
    ----------------------------------------- */

    .nav-links.mobile-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) !important;

        z-index: 99999;

        transition:
                opacity 0.2s ease,
                transform 0.2s ease,
                visibility 0s linear 0s;
    }


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

    .nav-links > a,
    .nav-links > .nav-item > .nav-parent {

        position: relative;

        width: 100% !important;
        min-width: 0;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;

        padding: 0 16px !important;

        box-sizing: border-box;

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

        color: #1a1f2e !important;

        background: transparent;

        border: 0;

        border-radius: 10px;

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

        text-decoration: none;

        white-space: nowrap;

        transition:
                color 0.2s ease,
                background 0.2s ease,
                box-shadow 0.2s ease;
    }


    /* -----------------------------------------
       HOVER
    ----------------------------------------- */

    .nav-links > a:hover,
    .nav-links > .nav-item > .nav-parent:hover {
        color: #315efb !important;

        background: rgba(49, 94, 251, 0.05);
    }


    /* =================================================
       ACTIVE LINK
       NO ::before
       NO STICKY FIRST LETTER
    ================================================= */

    .nav-links > a.active,
    .nav-links > .nav-item > .nav-parent.active,
    .nav-links a.active {

        color: #315efb !important;

        background: rgba(49, 94, 251, 0.09) !important;

        font-weight: 700 !important;

        /*
         * This creates the blue active indicator
         * INSIDE the button.
         *
         * It cannot overlap the first letter.
         */
        box-shadow: inset 4px 0 0 #315efb !important;

        /*
         * Extra left space keeps text away from
         * the blue indicator.
         */
        padding-left: 20px !important;
    }


    /* REMOVE old active pseudo-element */
    .nav-links > a.active::before,
    .nav-links > .nav-item > .nav-parent.active::before,
    .nav-links a.active::before {
        display: none !important;
        content: none !important;
    }


    /* -----------------------------------------
       SERVICES
    ----------------------------------------- */

    .nav-item {
        width: 100% !important;
        height: auto !important;

        display: block !important;

        margin: 0 !important;
    }

    .nav-parent {
        justify-content: space-between !important;
    }


    /* -----------------------------------------
       SERVICES ARROW
    ----------------------------------------- */

    .arrow {
        flex-shrink: 0;

        margin-left: auto;

        transition: transform 0.25s ease;
    }

    .has-dropdown.mobile-dropdown-open .arrow {
        transform: rotate(180deg);
    }


    /* -----------------------------------------
       DROPDOWN
    ----------------------------------------- */

    .dropdown {

        position: static !important;

        width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding: 4px 0 8px 12px !important;

        box-sizing: border-box;

        display: none;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    .has-dropdown.mobile-dropdown-open > .dropdown {
        display: block !important;
    }


    .dropdown a {

        position: relative;

        width: 100% !important;

        min-height: 44px;

        margin: 0 !important;

        padding: 10px 14px !important;

        box-sizing: border-box;

        display: flex;
        align-items: center;

        color: #1a1f2e !important;

        background: transparent;

        border-radius: 8px;

        font-size: 14px;

        text-decoration: none;
    }


    .dropdown a:hover {
        color: #315efb !important;
        background: rgba(49, 94, 251, 0.06);
    }


    /* Active dropdown item */

    .dropdown a.active {

        color: #315efb !important;

        background: rgba(49, 94, 251, 0.09) !important;

        font-weight: 700 !important;

        box-shadow: inset 3px 0 0 #315efb !important;

        padding-left: 18px !important;
    }


    .dropdown a.active::before {
        display: none !important;
        content: none !important;
    }


    /* -----------------------------------------
       GET STARTED
    ----------------------------------------- */

    .nav-button.mobile-get-started {

        display: flex !important;

        width: 100% !important;

        min-width: 0 !important;

        height: 46px !important;
        min-height: 46px !important;

        margin: 10px 0 0 !important;

        padding: 0 18px !important;

        box-sizing: border-box;

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

        border-radius: 10px;

        background: #315efb !important;

        color: #ffffff !important;

        font-size: 15px;

        font-weight: 700;

        box-shadow: 0 6px 16px rgba(49, 94, 251, 0.20);
    }


    .nav-button::before {
        display: none !important;
        animation: none !important;
    }


    /* -----------------------------------------
       MOBILE TOGGLE
    ----------------------------------------- */

    .mobile-toggle {

        display: flex !important;

        position: relative;

        z-index: 100001;

        flex-shrink: 0;

        width: 44px;
        height: 44px;

        margin-left: auto;

        padding: 0;

        border: 0;
        border-radius: 8px;

        background: transparent;

        cursor: pointer;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;
    }


    .mobile-toggle span {

        display: block;

        width: 22px;
        height: 2px;

        border-radius: 5px;

        background: #1a1f2e;

        transition:
                transform 0.25s ease,
                opacity 0.2s ease;
    }


    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* ≤ 850 px – Mobile menu + Hero stack */
/* =========================================================
   HERO — FINAL RESPONSIVE FIX
   Mobile / Tablet
========================================================= */

/* -----------------------------------------
   TABLET: 851px – 1100px
----------------------------------------- */
@media (min-width: 851px) and (max-width: 1100px) {

    .hero {
        position: relative;

        min-height: 680px;
        height: auto;

        padding-top: 90px;
        padding-bottom: 80px;

        display: flex;
        align-items: center;
    }

    .hero-content {
        position: relative;

        width: 55%;
        max-width: 620px;

        z-index: 5;
    }

    .hero-visual {
        position: absolute;

        right: 0;
        top: 0;

        width: 52%;
        height: 100%;

        z-index: 1;

        overflow: hidden;

        opacity: 0.65;
    }

    .world-wrapper {
        top: 50%;
        left: 50%;

        width: min(500px, 90%);
        height: min(500px, 90%);

        transform: translate(-50%, -50%);
    }

    .earth-img {
        width: min(380px, 76%);

        opacity: 0.72;
    }

    .world-glow {
        opacity: 0.45;
    }
}


/* =========================================================
   HERO MOBILE — FINAL ALIGNMENT FIX
========================================================= */

@media (max-width: 850px) {

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {
        width: 100%;
        min-height: auto !important;
        height: auto !important;

        padding: 32px 0 38px !important;

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

        overflow: hidden !important;
        box-sizing: border-box;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .hero-content {
        width: 100% !important;
        max-width: 650px !important;

        margin: 0 auto !important;

        padding: 0 18px !important;

        box-sizing: border-box;

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

        text-align: center !important;

        position: relative;
        z-index: 10;
    }


    /* -----------------------------------------
       BADGE
    ----------------------------------------- */

    .hero-badge {
        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


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

    .hero h1 {
        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .hero p {
        width: 100% !important;
        max-width: 570px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* =================================================
       BUTTONS — FORCE PERFECT CENTER
    ================================================= */

    .hero-buttons {
        width: 100% !important;
        max-width: 360px !important;

        margin: 22px auto 0 !important;

        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;

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

        gap: 10px !important;

        box-sizing: border-box;
    }


    .hero-buttons a,
    .hero-buttons .primary-button,
    .hero-buttons .secondary-button {

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

        min-width: 0 !important;

        min-height: 46px !important;
        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 12px 18px !important;

        box-sizing: border-box;

        display: flex !important;

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

        text-align: center !important;

        float: none !important;

        transform: none;
    }


    /* -----------------------------------------
       STATS
    ----------------------------------------- */

    .hero-stats {
        width: 100% !important;
        max-width: 570px !important;

        margin: 25px auto 0 !important;

        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

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

        text-align: center !important;
    }


    .hero-stats > div {
        min-width: 0;
        text-align: center !important;
    }


    /* =================================================
       WORLD
    ================================================= */

    .hero-visual {
        position: absolute !important;

        inset: 0 !important;

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

        pointer-events: none !important;

        z-index: 1 !important;

        opacity: 0.42 !important;

        overflow: hidden !important;
    }


    /*
     * Keep the Earth behind the lower-middle
     * part of the hero.
     */
    .world-wrapper {

        position: absolute !important;

        top: 67% !important;
        left: 50% !important;

        width: min(390px, 92vw) !important;
        height: min(390px, 92vw) !important;

        margin: 0 !important;

        transform: translate(-50%, -50%) !important;

        display: flex !important;

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

        opacity: 1 !important;

        pointer-events: none !important;
    }


    /* -----------------------------------------
       EARTH — MORE VISIBLE
    ----------------------------------------- */

    .earth-img {

        display: block !important;

        width: min(285px, 72vw) !important;
        height: auto !important;

        margin: 0 auto !important;

        opacity: 0.72 !important;

        object-fit: contain;

        /*
         * Keep the original Earth appearance,
         * but make it slightly softer on mobile.
         */
        filter: saturate(0.92) brightness(0.92);

        box-shadow:
                0 0 35px rgba(0, 212, 255, 0.18),
                0 0 70px rgba(122, 92, 255, 0.10) !important;
    }


    /* -----------------------------------------
       GLOW
    ----------------------------------------- */

    .world-glow {
        opacity: 0.35 !important;

        filter: blur(42px) !important;
    }


    /* -----------------------------------------
       STARS
    ----------------------------------------- */

    .stars {
        opacity: 0.28 !important;
    }

    .stars-2 {
        opacity: 0.18 !important;
    }

    .stars-3 {
        opacity: 0.12 !important;
    }


    /* Hide labels on mobile */
    .visual-label {
        display: none !important;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 600px) {

    .hero {
        padding-top: 28px !important;
        padding-bottom: 34px !important;
    }

    .hero-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    .hero-buttons {
        width: 100% !important;
        max-width: 340px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .hero-buttons a,
    .hero-buttons .primary-button,
    .hero-buttons .secondary-button {
        width: 100% !important;
        max-width: 340px !important;
    }


    .world-wrapper {
        top: 68% !important;

        width: min(350px, 92vw) !important;
        height: min(350px, 92vw) !important;
    }


    .earth-img {
        width: min(260px, 72vw) !important;

        opacity: 0.68 !important;
    }


    .hero-visual {
        opacity: 0.40 !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .hero {
        padding-top: 25px !important;
        padding-bottom: 30px !important;
    }


    .hero-buttons {
        max-width: 310px !important;
    }


    .hero-buttons a,
    .hero-buttons .primary-button,
    .hero-buttons .secondary-button {
        max-width: 310px !important;
    }


    .world-wrapper {
        top: 69% !important;

        width: min(320px, 94vw) !important;
        height: min(320px, 94vw) !important;
    }


    .earth-img {
        width: min(235px, 70vw) !important;

        opacity: 0.62 !important;
    }


    .hero-visual {
        opacity: 0.36 !important;
    }
}

/* ≤ 480 px */
@media (max-width: 480px) {
    .logo-img {
        height: 44px;
        max-width: 180px;
    }
    .nav-button.mobile-get-started {
        height: 41px;
        min-height: 41px;
        font-size: 14px;
    }
}

/* =========================
   SECTION COMMON
========================= */
.section {
    position: relative;
    z-index: 2;
    padding: 100px 8%;
}

.section-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}

.section-heading span {
    color: #00b4d8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-heading h2 {
    margin-top: 12px;
    font-size: clamp(30px, 4vw, 46px);
    letter-spacing: -1.2px;
    color: #0d1117;
    font-weight: 800;
}

.section-heading h2 strong {
    color: #00b4d8;
}

.section-heading p {
    margin-top: 16px;
    color: #5a6478;
    font-size: 16px;
    line-height: 1.7;
}

.section-heading.left {
    text-align: left;
    margin: 0;
}

/* Light & Soft sections */
.section-light {
    background: #ffffff;
    color: #0d1117;
}

.section-soft {
    background: #f0f4f9;
    color: #0d1117;
}

.section-dark {
    background: #05070d;
    color: #ffffff;
}

.section-dark .section-heading h2 {
    color: #ffffff;
}

.section-dark .section-heading p {
    color: #9298aa;
}

/* =========================================================
   JSV TECHGROUP
   WHO WE ARE / INTRODUCTION SECTION
   ========================================================= */

.who-we-are-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 110px 7%;
}

.who-we-are-container {
    width: min(1200px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 70px;

    align-items: center;
}

.brand-domain {
    color: #00b4d8;
    font-weight: 700;
    position: relative;
    transition: all 0.3s ease;
}

.brand-domain:hover {
    color: #00d4ff;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.45);
}


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

.who-we-are-content {
    max-width: 760px;
}

.who-we-are-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #315efb;
}

.who-we-are-label::before {
    content: "";
    width: 30px;
    height: 2px;

    background: linear-gradient(
            90deg,
            #315efb,
            #00b4d8
    );

    border-radius: 10px;
}


.who-we-are-content h2 {
    margin: 0 0 25px;

    max-width: 760px;

    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;

    font-weight: 700;
    letter-spacing: -1.2px;

    color: #111827;
}

.who-we-are-content h2 strong {
    display: inline;
    color: #315efb;
}


.who-we-are-content p {
    margin: 0 0 17px;

    max-width: 750px;

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

    color: #4b5563;
}


.who-we-are-content .who-we-are-lead {
    font-size: 18px;
    line-height: 1.75;

    color: #1f2937;

    margin-bottom: 22px;
}


/* =========================
   RIGHT HIGHLIGHTS
   ========================= */

.who-we-are-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


.who-we-are-card {
    position: relative;

    padding: 27px 24px;

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

    border: 1px solid rgba(49, 94, 251, .12);

    border-radius: 18px;

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

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


.who-we-are-card:hover {
    transform: translateY(-5px);

    border-color: rgba(49, 94, 251, .28);

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


.who-we-are-card-number {
    display: inline-flex;

    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #315efb;
}


.who-we-are-card h3 {
    margin: 0 0 10px;

    font-size: 18px;
    line-height: 1.35;

    color: #111827;
}


.who-we-are-card p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #6b7280;
}


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

@media (max-width: 900px) {

    .who-we-are-section {
        padding: 85px 6%;
    }

    .who-we-are-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .who-we-are-content {
        max-width: 100%;
    }

    .who-we-are-content h2 {
        max-width: 850px;
    }

}


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

@media (max-width: 600px) {

    .who-we-are-section {
        padding: 70px 20px;
    }

    .who-we-are-container {
        gap: 35px;
    }

    .who-we-are-content h2 {
        font-size: 32px;
        line-height: 1.18;
        letter-spacing: -.7px;
    }

    .who-we-are-content .who-we-are-lead {
        font-size: 17px;
        line-height: 1.7;
    }

    .who-we-are-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .who-we-are-highlights {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .who-we-are-card {
        padding: 23px 21px;
    }

}

/* =========================
   COMPANY INTRO + BADGES
========================= */
.company-intro {
    padding: 90px 8%;
}

.intro-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: center;
}

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

.badge-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: 0.3s;
}

.badge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

.badge-card img {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    object-fit: contain;
}

.badge-card h4 {
    font-size: 15px;
    color: #0d1117;
    margin-bottom: 6px;
}

.badge-card p {
    font-size: 13px;
    color: #6b7280;
}

.company-text h2 {
    font-size: clamp(28px, 3.5vw, 38px);
    color: #0d1117;
    margin-bottom: 18px;
}

.company-text p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 28px;
}

/* =========================================================
INTRO / PROCESS – FIXED RESPONSIVE + ANIMATION
========================================================= */

.intro-section {
    width: 100%;
    padding: 100px 6%;
    box-sizing: border-box;
    background: rgb(238 250 255 / 0.98);
    overflow: hidden;
}

/* Heading */
.intro-section .section-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}

.intro-section .section-heading > span {
    display: inline-block;
    margin-bottom: 12px;
    color: #00a8cc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1.4;
    text-transform: uppercase;
}

.intro-section .section-heading h2 {
    margin: 0;
    color: #0d1117;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
}

.intro-section .section-heading h2 strong {
    color: #315efb;
}

.intro-section .section-heading .boxed-text {
    max-width: 720px;
    margin: 18px auto 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.75;
    text-align: center;
}

/* ---------- GRID – DESKTOP 4 COLUMNS ---------- */
.intro-grid {
    width: 100%;
    max-width: 1250px;
    margin: 55px auto 0;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    box-sizing: border-box;
}

/* ---------- CARD ---------- */
.intro-box {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 30px 26px;
    background: #ffffff;
    border: 2px solid #e7ebf3;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.055);
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;

    /* Hidden until animated */
    opacity: 0;
    transform: scale(0.65) translateY(40px);
}

/* When JS adds this class */
.intro-box.animate-in {
    animation: cardAppear 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: scale(0.65) translateY(40px);
    }
    70% {
        opacity: 1;
        transform: scale(1.05) translateY(-6px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Top line */
.intro-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #315efb, #00b4d8);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

/* Background number */
.intro-box::after {
    content: attr(data-number);
    position: absolute;
    right: 14px;
    bottom: -18px;
    color: rgba(49, 94, 251, 0.05);
    font-size: 95px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Title */
.intro-title {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
}

.intro-title span {
    flex-shrink: 0;
    color: #315efb;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.intro-title h3 {
    margin: 0;
    color: #101828;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

/* Paragraph – justified */
.intro-box p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.75;
    text-align: justify;
    hyphens: auto;
}

/* Desktop hover */
@media (hover: hover) and (min-width: 1051px) {
    .intro-box.animate-in:hover {
        transform: translateY(-8px) scale(1.02);
        border-color: rgba(49, 94, 251, 0.3);
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .intro-box.animate-in:hover::before {
        opacity: 1;
    }
}

/* Tap highlight */
.intro-box:active,
.intro-box:focus-visible {
    transform: scale(0.97) !important;
    border-color: rgba(49, 94, 251, 0.45);
    box-shadow: 0 6px 22px rgba(49, 94, 251, 0.14);
    outline: none;
}
.intro-box:active::before,
.intro-box:focus-visible::before {
    opacity: 1;
}

/* =========================================================
   TABLET + MOBILE = ALWAYS 1 COLUMN, 4 ROWS
========================================================= */
@media screen and (max-width: 1050px) {
    .intro-section {
        padding: 90px 5%;
    }

    .intro-section .section-heading h2 {
        font-size: clamp(30px, 4.5vw, 40px);
    }

    .intro-section .section-heading .boxed-text {
        font-size: 15px;
    }

    /* FORCE 1 COLUMN */
    .intro-grid {
        max-width: 720px;
        margin-top: 45px;
        grid-template-columns: 1fr !important;   /* ← never 2 columns */
        gap: 20px;
    }

    .intro-box {
        padding: 28px 24px;
    }

    .intro-title h3 {
        font-size: 21px;
    }

    .intro-box p {
        font-size: 15px;
    }

    .intro-box::after {
        font-size: 90px;
    }
}

/* Mobile */
@media screen and (max-width: 600px) {
    .intro-section {
        padding: 70px 20px;
    }

    .intro-section .section-heading > span {
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .intro-section .section-heading h2 {
        font-size: clamp(26px, 7.5vw, 32px);
    }

    .intro-section .section-heading .boxed-text {
        margin-top: 14px;
        font-size: 14px;
    }

    .intro-grid {
        margin-top: 36px;
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .intro-box {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .intro-title {
        gap: 8px;
        margin-bottom: 12px;
    }

    .intro-title span {
        font-size: 15px;
    }

    .intro-title h3 {
        font-size: 20px;
    }

    .intro-box p {
        font-size: 14px;
        line-height: 1.7;
    }

    .intro-box::after {
        right: 10px;
        bottom: -16px;
        font-size: 80px;
    }
}

/* Small phones */
@media screen and (max-width: 400px) {
    .intro-section {
        padding: 60px 16px;
    }

    .intro-section .section-heading h2 {
        font-size: clamp(24px, 8vw, 28px);
    }

    .intro-section .section-heading .boxed-text {
        font-size: 13.5px;
    }

    .intro-grid {
        margin-top: 30px;
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .intro-box {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .intro-title h3 {
        font-size: 18px;
    }

    .intro-box p {
        font-size: 13.5px;
        text-align: left;
    }

    .intro-box::after {
        font-size: 72px;
        right: 8px;
        bottom: -14px;
    }
}

@media screen and (max-width: 340px) {
    .intro-section {
        padding: 50px 12px;
    }

    .intro-box {
        padding: 20px 14px;
    }

    .intro-title h3 {
        font-size: 17px;
    }

    .intro-box p {
        font-size: 13px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .intro-box {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


/* =========================================================
   CHALLENGES SECTION
========================================================= */
.challenges-section {
    padding: 110px 6%;
    background: #fdf5ff;
    overflow: hidden;
}

.challenges-container {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.challenges-content h2 {
    font-size: clamp(28px, 3.8vw, 42px);
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    margin: 0 0 20px;
    letter-spacing: -0.5px;
}

.challenges-content h2 span {
    color: #315efb;
    display: inline; /* Changed from inline-block to allow text wrapping */
    white-space: normal; /* Ensures long text can break naturally if needed */
}


.challenges-intro {
    font-size: 18px;
    line-height: 1.75;
    color: #64748b;
    margin-bottom: 28px;
    max-width: 520px;
}

.challenges-content h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 18px;
}

.challenges-list {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
}

.challenges-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 13px;
    font-size: 15.5px;
    color: #475569;
    line-height: 1.5;
}

.challenges-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #315efb;
    font-weight: 700;
}

/* CTA Button */
.challenges-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    background: #ff4d4d;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 77, 77, 0.25);
}

.challenges-cta:hover {
    background: #e63939;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(255, 77, 77, 0.35);
}

/* RIGHT VISUAL */
.challenges-visual {
    position: relative;
}

.challenges-image-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
}

.challenges-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Problem Bubbles */
.problem-bubble {
    position: absolute;
    background: #ffffff;
    color: #315efb;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(49, 94, 251, 0.15);
    white-space: nowrap;
    z-index: 2;
    animation: float 4s ease-in-out infinite;
}

.bubble-1 { top: 12%; right: 8%;  animation-delay: 0s; }
.bubble-2 { top: 28%; left: 4%;   animation-delay: 0.6s; }
.bubble-3 { top: 42%; right: 2%;  animation-delay: 1.2s; }
.bubble-4 { bottom: 28%; left: 6%; animation-delay: 1.8s; }
.bubble-5 { bottom: 14%; right: 10%; animation-delay: 2.4s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px) {
    .challenges-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .challenges-visual {
        order: -1; /* image on top on mobile */
        max-width: 520px;
        margin: 0 auto;
    }

    .challenges-content h2 {
        text-align: center;
    }

    .challenges-intro {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .challenges-content h3 {
        text-align: center;
    }

    .challenges-list {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .challenges-cta {
        display: flex;
        justify-content: center;
        width: fit-content;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .challenges-section {
        padding: 80px 20px;
    }

    .problem-bubble {
        font-size: 12px;
        padding: 8px 13px;
    }

    .bubble-1, .bubble-2, .bubble-3, .bubble-4, .bubble-5 {
        /* slightly reposition for smaller screens if needed */
    }
}

/* =========================================================
   WHO WE ARE SECTION
========================================================= */
.who-we-are-section {
    padding: 90px 6%;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.who-we-are-layout {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* CENTERED HEADER */
.who-we-are-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.who-we-are-header .section-label {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: #315efb;
}

.who-we-are-header h2 {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.7px;
    color: #0f172a;
    text-wrap: balance;
}

/* BODY – TWO COLUMNS */
.who-we-are-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: 70px;
    align-items: start;
}

/* LEFT CONTENT */
.who-we-are-content {
    width: 100%;
    max-width: 590px;
}

.who-we-are-intro {
    margin: 0 0 28px;
    font-size: 15.5px;
    line-height: 1.75;
    color: #475569;
    text-align: justify;
    text-justify: inter-word;
}

.who-we-are-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.who-we-are-point {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.who-we-are-point:hover {
    transform: translateX(4px);
    border-color: rgba(49, 94, 251, 0.22);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.who-we-are-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(49, 94, 251, 0.12), rgba(0, 180, 216, 0.14));
    color: #315efb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.who-we-are-point p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    text-align: justify;
    text-justify: inter-word;
}

.who-we-are-point p strong {
    color: #0f172a;
    font-weight: 700;
}

.who-we-are-location {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid #dbe3eb;
    font-size: 13.5px;
    line-height: 1.65;
    color: #64748b;
    text-align: justify;
    text-justify: inter-word;
}

/* =========================================================
   CARDS + ICONS + TOP ANIMATION
========================================================= */
.who-we-are-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-content: start;
}

.who-we-are-section .who-we-are-cards .seo-card {
    min-height: 220px;
    padding: 28px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* TOP LINE ANIMATION */
.who-we-are-section .who-we-are-cards .seo-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #315efb, #00b4d8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.who-we-are-section .who-we-are-cards .seo-card:hover {
    transform: translateY(-7px);
    border-color: rgba(49, 94, 251, 0.18);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
}

.who-we-are-section .who-we-are-cards .seo-card:hover::before {
    transform: scaleX(1);
}

/* ICON */
.who-we-are-section .who-we-are-cards .seo-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(49, 94, 251, 0.10), rgba(0, 180, 216, 0.10));
    color: #315efb;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.who-we-are-section .who-we-are-cards .seo-icon svg {
    width: 26px;
    height: 26px;
}

/* ICON HOVER ANIMATION */
.who-we-are-section .who-we-are-cards .seo-card:hover .seo-icon {
    background: linear-gradient(135deg, #315efb, #00b4d8);
    color: #ffffff;
    transform: scale(1.08);
}

/* CARD TEXT */
.who-we-are-section .who-we-are-cards .seo-card h3 {
    margin: 0 0 9px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: #0f172a;
}

.who-we-are-section .who-we-are-cards .seo-card p {
    max-width: 220px;
    margin: 0 auto;
    font-size: 13.5px;
    line-height: 1.6;
    color: #64748b;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 950px) {
    .who-we-are-body {
        gap: 45px;
    }
    .who-we-are-section .who-we-are-cards .seo-card {
        min-height: 205px;
        padding: 24px 16px;
    }
    .who-we-are-section .who-we-are-cards .seo-card h3 {
        font-size: 16px;
    }
    .who-we-are-section .who-we-are-cards .seo-card p {
        font-size: 13px;
    }
}

@media (max-width: 780px) {
    .who-we-are-section {
        padding: 70px 5%;
    }
    .who-we-are-layout {
        gap: 40px;
    }
    .who-we-are-body {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .who-we-are-content {
        max-width: 700px;
    }
    .who-we-are-cards {
        max-width: 700px;
    }
}

@media (max-width: 600px) {
    .who-we-are-section {
        padding: 60px 20px;
    }
    .who-we-are-header h2 {
        font-size: 28px;
    }
    .who-we-are-intro {
        font-size: 14.5px;
    }
    .who-we-are-point {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding: 11px 12px;
    }
    .who-we-are-number {
        width: 36px;
        height: 36px;
        font-size: 11px;
    }
    .who-we-are-point p {
        font-size: 13.5px;
    }
    .who-we-are-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .who-we-are-section .who-we-are-cards .seo-card {
        min-height: 200px;
        padding: 21px 12px 18px;
        border-radius: 14px;
    }
    .who-we-are-section .who-we-are-cards .seo-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 13px;
    }
    .who-we-are-section .who-we-are-cards .seo-icon svg {
        width: 22px;
        height: 22px;
    }
    .who-we-are-section .who-we-are-cards .seo-card h3 {
        font-size: 14px;
    }
    .who-we-are-section .who-we-are-cards .seo-card p {
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .who-we-are-section {
        padding-left: 15px;
        padding-right: 15px;
    }
    .who-we-are-header h2 {
        font-size: 26px;
    }
    .who-we-are-cards {
        gap: 9px;
    }
    .who-we-are-section .who-we-are-cards .seo-card {
        min-height: 190px;
        padding-left: 9px;
        padding-right: 9px;
    }
    .who-we-are-section .who-we-are-cards .seo-card h3 {
        font-size: 13.5px;
    }
    .who-we-are-section .who-we-are-cards .seo-card p {
        font-size: 11.5px;
    }
}


/* =========================
   SEO SERVICES SECTION
========================= */
.seo-services-section {
    padding: 100px 6%;
    background: linear-gradient(180deg, #fef6ff 0%, #fbf2ff 50%, #f8ffff 100%);
    position: relative;
}

.seo-services-container {
    max-width: 1200px;
    margin: 0 auto;
}

.seo-services-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.seo-services-header .section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #315efb;
    margin-bottom: 14px;
}

.seo-services-header h2 {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 16px;
    line-height: 1.3;
}

.seo-services-header h2 strong {
    color: #315efb;
}

.seo-services-header p {
    font-size: 16.5px;
    line-height: 1.7;
    color: #64748b;
}

/* Grid */
.seo-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Card */
.seo-service-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 32px 26px;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.seo-service-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #315efb, #00d4ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.seo-service-card:hover {
    transform: translateY(-10px);
    background: #ffffff;
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.seo-service-card:hover::after {
    transform: scaleX(1);
}

/* Icon */
.seo-service-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(49, 94, 251, 0.12), rgba(0, 180, 216, 0.12));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #315efb;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.seo-service-icon svg {
    width: 26px;
    height: 26px;
}

.seo-service-card:hover .seo-service-icon {
    background: linear-gradient(135deg, #315efb, #00b4d8);
    color: #ffffff;
    transform: scale(1.08) rotate(-6deg);
}

.seo-service-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.seo-service-card p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

/* CTA */
.seo-services-cta {
    text-align: center;
    margin-top: 50px;
}

/* Responsive */
@media (max-width: 1000px) {
    .seo-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .seo-services-grid {
        grid-template-columns: 1fr;
    }
    .seo-services-section {
        padding: 70px 20px;
    }
}



/* =========================================================
   SERVICES SECTION
========================================================= */
.services-section {
    padding: 110px 6%;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.services-section::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: -200px;
    right: -150px;
    background: radial-gradient(circle, rgba(49, 94, 251, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Heading (shared look) */
.services-section .section-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.services-section .section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #00a8cc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.services-section .section-heading h2 {
    margin: 0;
    color: #0d1117;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
}

.services-section .section-heading h2 strong {
    color: #315efb;
}

.services-section .section-heading p {
    max-width: 720px;
    margin: 18px auto 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.75;
}

/* =========================================================
   GRID – Desktop 3 columns
========================================================= */
.service-grid {
    width: 100%;
    max-width: 1240px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    box-sizing: border-box;
}

/* =========================================================
   SERVICE CARD
========================================================= */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 32px 28px 28px;
    background: #ffffff;
    border: 2px solid rgba(226, 232, 240, 0.95);   /* thicker border */
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
    cursor: pointer;

    /* Start hidden – JS will animate */
    opacity: 0;
    transform: scale(0.7) translateY(36px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Class added by JS */
.service-card.animate-in {
    animation: serviceZoomIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes serviceZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(36px);
    }
    65% {
        opacity: 1;
        transform: scale(1.04) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Top accent line */
.service-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #315efb, #00b4d8, #00d4ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soft glow */
.service-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    bottom: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49, 94, 251, 0.12) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Desktop hover */
@media (hover: hover) and (min-width: 1051px) {
    .service-card.animate-in:hover {
        transform: translateY(-8px);
        border-color: rgba(49, 94, 251, 0.28);
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    }

    .service-card.animate-in:hover::after {
        transform: scaleX(1);
    }

    .service-card.animate-in:hover::before {
        opacity: 1;
    }

    .service-card.animate-in:hover .service-icon {
        transform: scale(1.08) rotate(-4deg);
        background: linear-gradient(135deg, #315efb, #00b4d8);
        color: #ffffff;
        box-shadow: 0 8px 20px rgba(49, 94, 251, 0.3);
    }

    .service-card.animate-in:hover .service-link {
        color: #1d4ed8;
        gap: 12px;
    }

    .service-card.animate-in:hover .service-link .arrow {
        transform: translateX(3px);
    }
}

/* Tap / click highlight (mobile + tablet) */
.service-card:active,
.service-card:focus-visible {
    transform: scale(0.97) !important;
    border-color: rgba(49, 94, 251, 0.4);
    box-shadow: 0 8px 24px rgba(49, 94, 251, 0.12);
    outline: none;
}

.service-card:active::after,
.service-card:focus-visible::after {
    transform: scaleX(1);
}

/* =========================================================
   ICON
========================================================= */
.service-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(49, 94, 251, 0.1), rgba(0, 180, 216, 0.1));
    color: #315efb;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

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

/* =========================================================
   TITLE + NUMBER
========================================================= */
.service-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.service-title span {
    font-size: 13px;
    font-weight: 700;
    color: #315efb;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.service-title h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

/* =========================================================
   DESCRIPTION
========================================================= */
.service-card p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
    flex-grow: 1;
    text-align: left;
}

/* =========================================================
   LEARN MORE
========================================================= */
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 14px;
    font-weight: 600;
    color: #315efb;
    transition: gap 0.3s ease, color 0.3s ease;
}

.service-link .arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

/* =========================================================
   CENTER BUTTON
========================================================= */
.center-button {
    text-align: center;
    margin-top: 52px;
}

/* =========================================================
   TABLET – 2 columns
========================================================= */
@media screen and (max-width: 1050px) {
    .services-section {
        padding: 90px 5%;
    }

    .services-section .section-heading h2 {
        font-size: clamp(30px, 4.5vw, 40px);
    }

    .services-section .section-heading p {
        font-size: 15px;
    }

    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 820px;
        gap: 20px;
        margin-top: 48px;
    }

    .service-card {
        min-height: 260px;
        padding: 28px 24px;
    }

    .service-title h3 {
        font-size: 19px;
    }
}

/* =========================================================
   MOBILE – 1 column only
========================================================= */
@media screen and (max-width: 640px) {
    .services-section {
        padding: 75px 18px;
    }

    .services-section .section-label {
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .services-section .section-heading h2 {
        font-size: clamp(26px, 7.5vw, 32px);
    }

    .services-section .section-heading p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.7;
    }

    .service-grid {
        grid-template-columns: 1fr !important;   /* force 1 column */
        gap: 16px;
        margin-top: 40px;
        max-width: 100%;
    }

    .service-card {
        min-height: auto;
        padding: 26px 22px;
        border-radius: 18px;
    }

    .service-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 18px;
    }

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

    .service-title h3 {
        font-size: 18px;
    }

    .service-card p {
        font-size: 14.5px;
    }

    .center-button {
        margin-top: 36px;
    }

    .center-button .primary-button {
        width: 100%;
        max-width: 320px;
    }
}

/* Small phones */
@media screen and (max-width: 400px) {
    .services-section {
        padding: 60px 16px;
    }

    .service-grid {
        gap: 14px;
    }

    .service-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .service-title h3 {
        font-size: 17px;
    }

    .service-card p {
        font-size: 14px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .service-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* =========================
   STATS SECTION
========================= */
.stats-section {
    position: relative;
    z-index: 2;
    padding: 100px 8%;
    text-align: center;
    color: #ffffff;
    overflow: hidden;

    /* Background */
    background-color: #0077b6; /* fallback color */
    background-image: linear-gradient(
            rgba(0, 20, 40, 0.75),
            rgba(0, 30, 60, 0.80)
    ),
    url('https://www.jsvtechgroup.com/images/stats-bg.jpg');   /* ← try with ../ if needed */

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Make the glass cards stand out more */
.stats-heading span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
}

.stats-heading h2 {
    margin-top: 12px;
    font-size: clamp(30px, 4vw, 44px);
    color: #ffffff;
}

.stats-heading strong {
    color: #00d4ff;               /* nice accent color */
}

.stats-grid {
    max-width: 1100px;
    margin: 55px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-box {
    padding: 32px 18px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.3s ease, background 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.16);
}

.stat-box strong {
    display: block;
    font-size: 44px;
    font-weight: 800;
    color: #ffffff;
}

.stat-box span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.stats-note {
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

/* ========== Mobile Fix ========== */
@media (max-width: 900px) {
    .stats-section {
        background-attachment: scroll;   /* fixed causes issues on mobile */
        padding: 80px 5%;
    }

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

@media (max-width: 520px) {
    .stats-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .stat-box strong {
        font-size: 38px;
    }
}

/* =========================
   DIFFERENCE / WHY US
========================= */
.difference-section {
    padding: 100px 8%;
    background: #ffebff;
}

.difference-content {
    max-width: 1150px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.difference-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.difference-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: 0.3s;
}

.difference-item:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}

.difference-item > span {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 180, 216, 0.12);
    color: #00b4d8;
    font-size: 14px;
    font-weight: 700;
}

.difference-item h3 {
    font-size: 16px;
    color: #0d1117;
}

.difference-item p {
    margin-top: 5px;
    color: #5a6478;
    font-size: 13px;
    line-height: 1.6;
}

/* =========================
   PRODUCTS PREVIEW - STYLISH
========================= */
.products-preview {
    padding: 120px 6%;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* subtle background glow */
.products-preview::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.08) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.products-grid {
    max-width: 1200px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* ===== Product Card ===== */
.product-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);

    /* Entrance animation */
    opacity: 0;
    transform: translateY(40px);
    animation: cardEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.product-card:nth-child(1) { animation-delay: 0.05s; }
.product-card:nth-child(2) { animation-delay: 0.12s; }
.product-card:nth-child(3) { animation-delay: 0.19s; }
.product-card:nth-child(4) { animation-delay: 0.26s; }
.product-card:nth-child(5) { animation-delay: 0.33s; }
.product-card:nth-child(6) { animation-delay: 0.40s; }

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

/* Top gradient line */
.product-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #00b4d8, #7a5cff, #00b4d8);
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Glow blob */
.product-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.15) 0%, transparent 70%);
    bottom: -80px;
    right: -60px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Hover State */
.product-card:hover {
    transform: translateY(-12px);
    border-color: transparent;
    box-shadow:
            0 25px 50px -12px rgba(15, 23, 42, 0.12),
            0 0 0 1px rgba(0, 180, 216, 0.1);
}

.product-card:hover::after {
    transform: scaleX(1);
    animation: gradientMove 3s linear infinite;
}

.product-card:hover::before {
    opacity: 1;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ===== Icon ===== */
.product-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0f7fa, #ede9fe);
    border-radius: 16px;
    color: #00b4d8;
    margin-bottom: 24px;
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 1;
}

.product-icon svg {
    width: 28px;
    height: 28px;
    transition: transform 0.4s ease;
}

.product-card:hover .product-icon {
    background: linear-gradient(135deg, #00b4d8, #7a5cff);
    color: #ffffff;
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 12px 25px rgba(0, 180, 216, 0.3);
}

.product-card:hover .product-icon svg {
    transform: scale(1.1);
}

/* More card special */
.product-card-more .product-icon {
    background: linear-gradient(135deg, #eff6ff, #e0f2fe);
    color: #315efb;
}

.product-card-more:hover .product-icon {
    background: linear-gradient(135deg, #315efb, #00b4d8);
    color: white;
}

/* Tag */
.product-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #00b4d8;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.product-card:hover .product-tag {
    color: #7a5cff;
}

/* Title */
.product-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

/* Description */
.product-card p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Link */
.product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #00b4d8;
    text-decoration: none;
    transition: all 0.3s ease;
}

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

.product-card:hover .product-link {
    color: #7a5cff;
    gap: 12px;
}

.product-card:hover .product-link span {
    transform: translateX(4px);
}

/* CTA */
.products-cta {
    text-align: center;
    margin-top: 60px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 640px) {
    .products-preview {
        padding: 80px 20px;
    }

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

    .product-card {
        padding: 28px 24px;
    }

    .product-icon {
        width: 52px;
        height: 52px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .product-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* =========================
   CTA + CONTACT FORM
========================= */
.cta-section {
    position: relative;
    z-index: 2;
    padding: 90px 8%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    background: #0a1225;
    color: #ffffff;
}

.cta-left span {
    color: #00d4ff;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
}

.cta-left h2 {
    margin-top: 12px;
    font-size: clamp(28px, 3.5vw, 42px);
    color: #ffffff;
}

.cta-left h2 strong {
    color: #00d4ff;
}

.cta-left p {
    margin-top: 14px;
    color: #9298aa;
    line-height: 1.7;
    max-width: 480px;
}

.contact-form {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgb(250 250 250);
    color: #000000;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: 0.25s;
}

.contact-form select{
    width: 100%;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: 0.25s;
}


.contact-form select {
    appearance: none;
    cursor: pointer;
}

.contact-form select option {
    background: #0a1225;
    color: #fff;
}

.contact-form button {
    margin-top: 6px;
    align-self: flex-start;
}

/* =========================
   FLOATING WHATSAPP
========================= */
.floating-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 999;

    width: 58px;
    height: 58px;
    border-radius: 50%;

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

    background: #25D366;
    color: #ffffff;

    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
}

.floating-whatsapp:hover {
    transform: scale(1.12) translateY(-4px);
    box-shadow: 0 14px 35px rgba(37, 211, 102, 0.55);
    background: #20bd5a;
}

.floating-whatsapp svg {
    width: 28px;
    height: 28px;
}

/* =========================
   BACK TO TOP
========================= */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 100px;          /* sits above WhatsApp */
    z-index: 998;

    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);

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

    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.9);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top:hover {
    background: #0f172a;
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-4px) scale(1.05);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 640px) {
    .floating-whatsapp {
        right: 18px;
        bottom: 22px;
        width: 45px;
        height: 45px;
    }

    .floating-whatsapp svg {
        width: 22px;
        height: 22px;
    }

    .back-to-top {
        right: 18px;
        bottom: 90px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}

/* =========================
   FOOTER
========================= */
.site-footer {
    position: relative;
    z-index: 2;
    background: #030509;
    color: #89909f;
}

.footer-main {
    max-width: 1250px;
    margin: 0 auto;
    padding: 80px 2% 60px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
    gap: 50px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-company {
    max-width: 340px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}

.footer-logo img {
    height: 60px;
    width: 160px;
}

.footer-company > p {
    margin-top: 0px;
    line-height: 1.7;
    font-size: 16px;
    color: #777f90;
}

.footer-column h3 {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 2px;
}

.footer-column > a {
    color: #777f90;
    font-size: 14px;
    transition: 0.25s;
}

.footer-column > a:hover {
    color: #00d4ff;
    transform: translateX(3px);
}

.company-details {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.company-details p {
    font-size: 14px;
    line-height: 1.6;
}

.company-details strong {
    color: #dce0e8;
}

.company-details a {
    color: #00d4ff;
}

/* Social Links with Icons */
.social-links {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.social-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8b93a7;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.social-links a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.social-links a:hover {
    color: #00d4ff;
    transform: translateX(4px);
}

.footer-contact-button {
    display: inline-flex !important;
    width: fit-content;
    margin-top: 12px;
    padding: 10px 16px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    color: #00d4ff !important;
    font-size: 13px;
    transition: 0.25s;
}

.footer-contact-button:hover {
    background: rgba(0, 212, 255, 0.1);
}

.footer-bottom {
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 13px;
    color: #565d6c;
}

.footer-bottom strong {
    color: #89909f;
}

.footer-bottom-links {
    display: flex;
    gap: 10px;
    align-items: center;
}

.footer-bottom-links a {
    color: #666d7c;
    transition: 0.25s;
}

.footer-bottom-links a:hover {
    color: #00d4ff;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px) {
    .intro-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .badge-grid {
        max-width: 500px;
    }

    .difference-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .cta-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .intro-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

@media (max-width: 900px) {
    .navbar {
        padding: 0 20px;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 90px;
        left: 0;
        right: 0;
        background: #ffffff;
        flex-direction: column;
        padding: 15px 20px 25px;
        gap: 0;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links > a,
    .nav-parent {
        padding: 14px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        width: 100%;
    }

    .mobile-toggle {
        display: flex;
    }

    .nav-item .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 0 15px;
        display: none;
        min-width: auto;
    }

    .nav-item.open .dropdown {
        display: block;
    }

    .dropdown a {
        padding: 10px 0;
        border-bottom: none;
    }

}


/* =========================
   FAQ (Home Page)
========================= */
.home-faq{
    background-color: #fcdbfd;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Individual Item */
.faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item[open] {
    border-color: #315efb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/* Question (summary) */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    list-style: none;          /* removes default marker */
    user-select: none;
}

.faq-question::-webkit-details-marker {
    display: none;             /* Chrome/Safari */
}

.faq-question::marker {
    display: none;             /* Firefox */
}

.faq-question:hover {
    background: #f8fafc;
}

.faq-item[open] .faq-question {
    background: #f8fafc;
    color: #315efb;
}

/* Arrow / + Icon */
.faq-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #315efb;
    transition: transform 0.3s ease;
}

/* If you are using the SVG arrow */
.faq-item[open] .faq-icon {
    transform: rotate(180deg);
}

/* If you prefer the + icon style (like service page) */
/* .faq-item[open] .faq-icon {
    transform: rotate(45deg);
} */

/* Answer – animated open/close */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 22px;
}

.faq-item[open] .faq-answer {
    max-height: 600px;          /* safely large so text is never cut */
    padding: 0 22px 20px;
}

.faq-answer p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

.faq-answer strong {
    color: #0f172a;
    font-weight: 600;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 700px) {
    .faq-question {
        padding: 16px 18px;
        font-size: 15.5px;
    }

    .faq-answer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .faq-item[open] .faq-answer {
        padding: 0 18px 18px;
    }

    .faq-answer p {
        font-size: 14.5px;
    }
}

@media (max-width: 480px) {
    .faq-question {
        padding: 15px 16px;
        font-size: 15px;
        gap: 12px;
    }

    .faq-icon {
        width: 18px;
        height: 18px;
    }

    .faq-item[open] .faq-answer {
        padding: 0 16px 16px;
    }
}



/* =========================================================
GET STARTED MODAL
========================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;

    background: rgba(5, 7, 13, 0.72);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    z-index: 9999;

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

    padding: 16px;

    opacity: 0;
    visibility: hidden;

    transition:
            opacity 0.3s ease,
            visibility 0.3s ease;

}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
MODAL BOX
========================================================= */

.modal-box {
    background: #ffffff;

    width: 100%;
    max-width: 520px;

    max-height: calc(100vh - 32px);

    overflow-y: auto;

    border-radius: 18px;

    padding: 28px 26px 24px;

    position: relative;

    transform:
            translateY(25px)
            scale(0.96);

    transition:
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

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

}

.modal-overlay.active .modal-box {
    transform:
            translateY(0)
            scale(1);
}

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

.modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    border: none;

    background: #f1f5f9;

    color: #64748b;

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

    cursor: pointer;

    transition: all 0.25s ease;

    z-index: 2;

}

.modal-close {
    background: #e2e8f0;

    color: #0f172a;

    transform: rotate(90deg);

}

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

.modal-header {
    margin-bottom: 22px;

    text-align: center;

    padding-right: 20px;

}

.modal-badge {
    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    color: #315efb;

    background: rgba(49, 94, 251, 0.1);

    padding: 5px 12px;

    border-radius: 30px;

    margin-bottom: 10px;

}

.modal-header h3 {
    font-size: 22px;

    font-weight: 800;

    color: #0f172a;

    margin: 0 0 6px;

}

.modal-header p {
    font-size: 14px;

    color: #64748b;

    margin: 0;

    line-height: 1.5;

}

/* =========================================================
FORM ROW
========================================================= */

.form-row {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 14px;

}

.form-row > label {
    width: 120px;

    flex-shrink: 0;

    font-size: 13.5px;

    font-weight: 600;

    color: #334155;

    padding-top: 13px;

}

/* =========================================================
INPUT WRAPPER
========================================================= */

.input-wrap {
    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

}

/* =========================================================
INPUT
========================================================= */

.form-row input {
    width: 100%;

    height: 42px;

    padding: 0 14px;

    border: 1.5px solid #e2e8f0;

    border-radius: 9px;

    font-size: 14.5px;

    color: #0f172a;

    background: #f8fafc;

    outline: none;

    transition:
            border-color 0.25s ease,
            background 0.25s ease,
            box-shadow 0.25s ease;

}

.form-row input::placeholder,
.form-group textarea::placeholder {
    color: #94a3b8;
}

.form-row input {
    border-color: #315efb;

    background: #ffffff;

    box-shadow:
            0 0 0 3px rgba(49, 94, 251, 0.12);

}

/* =========================================================
TEXTAREA
========================================================= */

.form-group {
    margin-bottom: 16px;
}

.form-group > label {
    display: block;

    font-size: 13.5px;

    font-weight: 600;

    color: #334155;

    margin-bottom: 7px;

}

.form-group textarea {
    width: 100%;

    min-height: 100px;

    padding: 12px 14px;

    border: 1.5px solid #e2e8f0;

    border-radius: 9px;

    font-size: 14.5px;

    line-height: 1.5;

    color: #0f172a;

    background: #f8fafc;

    outline: none;

    resize: vertical;

    font-family: inherit;

    transition:
            border-color 0.25s ease,
            background 0.25s ease,
            box-shadow 0.25s ease;

}

.form-group textarea {
    border-color: #315efb;

    background: #ffffff;

    box-shadow:
            0 0 0 3px rgba(49, 94, 251, 0.12);

}

/* =========================================================
ERROR MESSAGE
========================================================= */

.error-msg {
    font-size: 12px;

    line-height: 1.4;

    color: #e11d48;

    margin-top: 5px;

    display: none;

}

.error-msg.show {
    display: block;
}

/* =========================================================
FIELD ERROR
========================================================= */

input.error,
textarea.error {
    border-color: #e11d48 !important;

    background: #fff5f5 !important;

}

input.error,
textarea.error {
    box-shadow:
            0 0 0 3px rgba(225, 29, 72, 0.10) !important;
}

/* =========================================================
FIELD VALID
========================================================= */

input.valid,
textarea.valid {
    border-color: #22c55e !important;

    background: #fafffb !important;

}

/* =========================================================
GENERAL FORM ERROR
========================================================= */

.form-error {
    color: #e11d48;

    background: #fff1f2;

    border: 1px solid #fecdd3;

    border-radius: 8px;

    font-size: 13px;

    line-height: 1.4;

    text-align: center;

    padding: 9px 12px;

    margin-top: 10px;

    display: none;

}

/* =========================================================
SUBMIT BUTTON
========================================================= */

.modal-submit {
    width: 100%;

    min-height: 46px;

    border: none;

    border-radius: 10px;

    background:
            linear-gradient(
                    135deg,
                    #315efb,
                    #00b4d8
            );

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            opacity 0.2s ease;

    box-shadow:
            0 6px 20px rgba(49, 94, 251, 0.28);

}

.modal-submit:hover {
    transform: translateY(-2px);

    box-shadow:
            0 10px 25px rgba(49, 94, 251, 0.38);

}

.modal-submit {
    cursor: not-allowed;

    opacity: 0.75;

    transform: none;

}

/* =========================================================
SUBMIT LOADER
========================================================= */

.submit-loader {
    width: 17px;
    height: 17px;

    border: 2px solid rgba(255, 255, 255, 0.4);

    border-top-color: #ffffff;

    border-radius: 50%;

    display: none;

    animation: submitSpin 0.7s linear infinite;

}

@keyframes submitSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
SUCCESS INSIDE MODAL
========================================================= */

.success-message {
    text-align: center;

    padding: 28px 10px 10px;

}

.success-icon {
    width: 64px;
    height: 64px;

    background: #22c55e;

    color: #ffffff;

    font-size: 30px;

    font-weight: 700;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 18px;

    box-shadow:
            0 8px 24px rgba(34, 197, 94, 0.25);

}

.success-message h4 {
    font-size: 22px;

    color: #0f172a;

    margin: 0 0 10px;

}

.success-message p {
    font-size: 15px;

    color: #64748b;

    margin: 0 0 24px;

    line-height: 1.5;

}

/* =========================================================
SUCCESS TOAST
========================================================= */

.lead-toast {
    position: fixed;

    top: 24px;
    right: 24px;

    width: min(420px, calc(100vw - 32px));

    min-height: 76px;

    padding: 14px 14px 14px 16px;

    background: #ffffff;

    border: 1px solid #dcfce7;

    border-radius: 14px;

    display: flex;

    align-items: center;

    gap: 12px;

    z-index: 10000;

    box-shadow:
            0 15px 45px rgba(15, 23, 42, 0.18);

    transform:
            translateY(-25px)
            translateX(20px);

    opacity: 0;

    visibility: hidden;

    transition:
            opacity 0.3s ease,
            transform 0.35s ease,
            visibility 0.3s ease;

}

.lead-toast.show {
    opacity: 1;

    visibility: visible;

    transform:
            translateY(0)
            translateX(0);

}

.lead-toast-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22c55e;

    color: #ffffff;

    display: flex;

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

    font-size: 20px;

    font-weight: 700;

}

.lead-toast-content {
    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.lead-toast-content strong {
    font-size: 14px;

    color: #0f172a;

}

.lead-toast-content span {
    font-size: 13px;

    color: #64748b;

    line-height: 1.4;

}

.lead-toast-close {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    border: none;

    background: transparent;

    color: #94a3b8;

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

    border-radius: 6px;

}

.lead-toast-close {
    background: #f1f5f9;

    color: #334155;

}

/* =========================================================
   GET STARTED MODAL - IMPROVED RESPONSIVE
========================================================= */

/* Base modal adjustments (works with sticky navbar) */
.modal-overlay {
    padding-top: 80px;          /* space for sticky navbar */
    padding-bottom: 20px;
    align-items: flex-start;    /* start from top instead of center */
}

.modal-box {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    margin-top: 10px;
}

/* ---------- Mobile (≤ 600px) ---------- */
@media (max-width: 600px) {

    .modal-overlay {
        padding: 70px 10px 15px;   /* extra top padding for sticky nav */
    }

    .modal-box {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 90px);
        border-radius: 14px;
        padding: 18px 16px 16px;
        margin: 0;
    }

    /* Close button always visible */
    .modal-close {
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        z-index: 10;
    }

    /* Header more compact */
    .modal-header {
        margin-bottom: 16px;
        padding-right: 36px;      /* space for close button */
    }

    .modal-header h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .modal-header p {
        font-size: 13px;
        line-height: 1.4;
    }

    .modal-badge {
        font-size: 11px;
        padding: 3px 8px;
        margin-bottom: 8px;
    }

    /* ===== KEEP LABEL + INPUT ON SAME ROW ===== */
    .form-row {
        display: flex;
        flex-direction: row;      /* same row */
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .form-row > label {
        width: 95px;              /* fixed width so input has space */
        flex-shrink: 0;
        font-size: 13px;
        padding-top: 0;
        margin: 0;
        line-height: 1.3;
    }

    .input-wrap {
        flex: 1;
        min-width: 0;             /* important for flex */
    }

    .form-row input {
        width: 100%;
        font-size: 14px;
        padding: 9px 12px;
        height: 40px;
    }

    /* Message field */
    .form-group {
        margin-bottom: 14px;
    }

    .form-group label {
        font-size: 13px;
        margin-bottom: 5px;
        display: block;
    }

    .form-group textarea {
        min-height: 90px;
        font-size: 14px;
        padding: 10px 12px;
    }

    /* Submit button */
    .modal-submit {
        height: 44px;
        font-size: 15px;
        margin-top: 6px;
    }

    /* Error messages */
    .error-msg {
        font-size: 11px;
        margin-top: 3px;
    }

    .form-error {
        font-size: 13px;
        margin-top: 10px;
    }

    /* Success toast */
    .lead-toast {
        top: 70px;                /* below sticky navbar */
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

/* Extra small phones */
@media (max-width: 380px) {

    .form-row > label {
        width: 80px;
        font-size: 12px;
    }

    .form-row input {
        font-size: 13px;
        padding: 8px 10px;
    }

    .modal-box {
        padding: 16px 12px 14px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal-box,
    .modal-close,
    .modal-submit,
    .lead-toast {
        transition: none;
    }

    .submit-loader {
        animation: none;
    }
}

/* ========================================================= CTA CONTACT FORM - VALIDATION ========================================================= */
.contact-field { width: 100%; display: flex; flex-direction: column; }
/* ========================================================= ERROR MESSAGE ========================================================= */
.contact-error
{ min-height: 0; margin-top: 5px; padding-left: 3px; color: #ff6b6b; font-size: 12px; line-height: 1.4; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; }
.contact-error.show { opacity: 1; visibility: visible; }
/* ========================================================= VALID / ERROR INPUT ========================================================= */
.contact-form input.error, .contact-form select.error, .contact-form textarea.error
{
    border-color: #ff5c5c; background: rgba(255, 92, 92, 0.06);
}
.contact-form input.valid, .contact-form select.valid, .contact-form textarea.valid
{
    border-color: rgba(0, 212, 255, 0.65);
}
/* ========================================================= GENERAL FORM ERROR ========================================================= */
.contact-form-error
{
    display: none; width: 100%; padding: 11px 13px; border: 1px solid rgba(255, 92, 92, 0.3); border-radius: 9px; background: rgba(255, 92, 92, 0.08); color: #ff8585; font-size: 13px; line-height: 1.5;
}
/* ========================================================= SUBMIT BUTTON ========================================================= */
.contact-form button:disabled
{
    opacity: 0.7; cursor: not-allowed; transform: none;
}
/* ========================================================= LOADER ========================================================= */
.contact-submit-loader { display: none; width: 15px; height: 15px; margin-left: 8px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #ffffff; border-radius: 50%; animation: contactFormSpin 0.7s linear infinite; vertical-align: middle; } @keyframes contactFormSpin { to { transform: rotate(360deg); } } /* ========================================================= SUCCESS TOAST ========================================================= */ .contact-success-toast { position: fixed; top: 25px; right: 25px; z-index: 10000; width: min(420px, calc(100vw - 30px)); display: flex; align-items: center; gap: 13px; padding: 16px 17px; border: 1px solid rgba(0, 212, 255, 0.25); border-radius: 14px; background: rgba(10, 18, 37, 0.97); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(-15px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .contact-success-toast.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* ========================================================= SUCCESS ICON ========================================================= */ .contact-success-icon { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 212, 255, 0.12); border: 1px solid rgba(0, 212, 255, 0.3); color: #00d4ff; font-size: 20px; font-weight: 700; } /* ========================================================= SUCCESS CONTENT ========================================================= */ .contact-success-content { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; } .contact-success-content strong { color: #ffffff; font-size: 14px; font-weight: 700; } .contact-success-content span { color: #a5adbf; font-size: 13px; line-height: 1.45; } /* ========================================================= SUCCESS CLOSE ========================================================= */ .contact-success-close { width: 28px; height: 28px; flex: 0 0 28px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: #9298aa; font-size: 21px; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .contact-success-close:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .cta-section { grid-template-columns: 1fr; gap: 35px; } .form-row { grid-template-columns: 1fr; } .contact-form { padding: 24px; } .contact-success-toast { top: 15px; right: 15px; width: calc(100vw - 30px); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .contact-success-toast, .contact-error, .contact-submit-loader { transition: none; animation: none; } }

/* ===========================
   Contact Page Css
 =========================== */

/* =========================
   PAGE BANNER
========================= */
.page-banner {
    position: relative;
    height: 320px;
    background: url('https://www.jsvtechgroup.com/images/contact-banner.webp') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(5 7 13 / 0.7), rgb(15 23 42 / 0.65));
}

.page-banner-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 0 20px;
}

.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 18px;
    color: #94a3b8;
}

.breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.25s;
}

.breadcrumb a:hover {
    color: #00d4ff;
}

.breadcrumb .current {
    color: #00d4ff;
}

.page-banner h1 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    margin: 0 0 12px;
}

.page-banner p {
    font-size: 17px;
    color: #cbd5e1;
    margin: 0;
}

/* =========================
   CONTACT SECTION
========================= */
.contact-section {
    padding: 90px 6%;
    background: #f8fafc;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.contact-info h2,
.contact-form-wrapper h2 {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
}

.contact-intro {
    color: #64748b;
    margin-bottom: 35px;
    line-height: 1.6;
}

.info-item {
    display: flex;
    gap: 18px;
    margin-bottom: 28px;
}

.info-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(49,94,251,0.1), rgba(0,180,216,0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #315efb;
    flex-shrink: 0;
}

.info-icon svg {
    width: 22px;
    height: 22px;
}

.info-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.info-item p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}

.info-item a {
    color: #315efb;
    text-decoration: none;
}

.info-item a:hover {
    text-decoration: underline;
}

/* Form */
.contact-form-wrapper {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(15,23,42,0.06);
    border: 1px solid #e2e8f0;
}

.contact-form-wrapper p {
    color: #64748b;
    margin-bottom: 28px;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 7px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    background: #f8fafc;
    outline: none;
    transition: all 0.25s;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #315efb;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(49,94,251,0.1);
}

.contact-submit-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #315efb, #00b4d8);
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 8px 25px rgba(49,94,251,0.25);
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(49,94,251,0.35);
}

/* Map */
.map-section {
    padding: 0 0 90px;
    background: #f8fafc;
}

.map-container {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(15,23,42,0.08);
}

.map-container iframe {
    display: block;
}

/* =========================
   ACTIVE NAV LINK
========================= */
.nav-links a.active {
    color: #fa9292;
    position: relative;
}

.nav-links a.active::after {
    content: "";
    position: absolute;

    background: linear-gradient(90deg, #315efb, #00d4ff);
    border-radius: 3px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .form-row-2 {
        grid-template-columns: 1fr;
    }

    .page-banner {
        height: 260px;
    }
}

/* Contact Main Layout */
.contact-main {
    padding: 80px 6%;
    background: #f1f5f9;
}

.contact-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 30px;
}

/* Left Dark Card */
.contact-info-card {
    background: linear-gradient(160deg, #0f172a, #1e293b);
    color: #ffffff;
    padding: 40px 32px;
    border-radius: 20px;
    height: fit-content;
}

.contact-info-card h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.contact-info-card > p {
    color: #94a3b8;
    font-size: 14.5px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.info-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 22px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease;
}

.info-row:hover {
    transform: translateX(5px);
}

.info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon.call { background: rgba(49, 94, 251, 0.2); color: #60a5fa; }
.info-icon.email { background: rgba(234, 179, 8, 0.15); color: #fbbf24; }
.info-icon.whatsapp { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.info-icon.location { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.info-icon svg { width: 20px; height: 20px; }

.info-row span {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 3px;
}

.info-row strong {
    font-size: 15px;
    font-weight: 600;
}

/* Form Card */
.contact-form-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
}

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

.form-group.full {
    grid-column: 1 / -1;
}

/* Quick Contact Cards */
.quick-contact {
    padding: 70px 6%;
    background: #ffffff;
}

.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    height: 50px;

    margin-top: 10px;
    padding: 0 24px;

    border: none;
    border-radius: 12px;

    background: linear-gradient(135deg, #315efb, #00b4d8);
    color: #ffffff;

    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.3px;

    cursor: pointer;
    position: relative;
    overflow: hidden;

    box-shadow: 0 8px 25px rgba(49, 94, 251, 0.3);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.submit-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

/* Shine effect */
.submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
    );
    transition: left 0.5s ease;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(49, 94, 251, 0.4);
    background: linear-gradient(135deg, #2563eb, #0891b2);
}

.submit-btn:hover::before {
    left: 120%;
}

.submit-btn:hover svg {
    transform: translateX(4px);
}

.submit-btn:active {
    transform: translateY(-1px);
}

.quick-grid {
    max-width: 1200px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.quick-card {
    padding: 28px 22px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.35s ease;
    border: 1px solid transparent;
}

.quick-card.call { background: #eff6ff; }
.quick-card.whatsapp { background: #f0fdf4; }
.quick-card.email { background: #fefce8; }
.quick-card.location { background: #fef2f2; }

.quick-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
}

.quick-icon {
    font-size: 28px;
    margin-bottom: 14px;
}

.quick-card h4 {
    font-size: 17px;
    margin-bottom: 8px;
    color: #0f172a;
}

.quick-card p {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 14px;
}

.quick-card span {
    font-size: 13.5px;
    font-weight: 600;
    color: #315efb;
}

.social-follow {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-follow span {
    display: block;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons a {
    width: 36px;               /* smaller */
    height: 36px;              /* smaller */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    transition: all 0.25s ease;
}

.social-icons a svg {
    width: 16px;               /* smaller icon */
    height: 16px;
}

.social-icons a:hover {
    background: #315efb;
    color: #ffffff;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 1000px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
    .quick-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .quick-grid {
        grid-template-columns: 1fr;
    }
}

/*  contact seo text */
.contact-seo-text {
    padding: 50px 6%;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.contact-seo-text .container {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.contact-seo-text p {
    font-size: 17px;
    line-height: 1.8;
    color: #334155;
    margin: 0;
    padding: 28px 32px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    border: 1px solid #e2e8f0;
    position: relative;
}

.contact-seo-text strong {
    color: #315efb;
    font-weight: 700;
}

/* Optional decorative quote style */
.contact-seo-text p::before {
    content: "“";
    position: absolute;
    top: 8px;
    left: 18px;
    font-size: 48px;
    color: #315efb;
    opacity: 0.15;
    font-family: Georgia, serif;
    line-height: 1;
}

/* =========================================================
   CONTACT FORM VALIDATION
========================================================= */
/* ==========================================
           CONTACT FORM MESSAGE
        ========================================== */

.contact-message {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    width: 100%;

    box-sizing: border-box;

    padding: 16px 18px;

    margin-bottom: 22px;

    border-radius: 12px;

    animation:
            contactMessageIn
            0.35s
            ease;

}


.contact-message .message-icon {

    width: 32px;

    height: 32px;

    min-width: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 18px;

    font-weight: 700;

}


.contact-message strong {

    display: block;

    font-size: 16px;

    margin-bottom: 4px;

}


.contact-message p {

    margin: 0;

    font-size: 14px;

    line-height: 1.5;

}


/* SUCCESS */

.contact-success {

    background: #eafaf3;

    border: 1px solid #9be4c2;

    color: #126b48;

}


.contact-success .message-icon {

    background: #20b778;

    color: #ffffff;

}


/* ERROR */

.contact-error {

    background: #fff1f1;

    border: 1px solid #f1aaaa;

    color: #9b2525;

}


.contact-error .message-icon {

    background: #dc3545;

    color: #ffffff;

}


@keyframes contactMessageIn{} /* ========== Enquiry Form Card ========== */
.contact-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #eef0f4;
}

.contact-form-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 6px;
}

.form-subtitle {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0 0 24px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full {
    grid-column: 1 / -1;
    margin-top: 6px;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #111;
    background: #fafbfc;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-group input.error,
.form-group textarea.error {
    border-color: #ef4444;
    background: #fef2f2;
}

.form-group input.valid,
.form-group textarea.valid {
    border-color: #22c55e;
}

.form-group textarea {
    resize: vertical;
    min-height: 110px;
}

.field-error {
    font-size: 0.8rem;
    color: #ef4444;
    display: none;
    margin-top: 2px;
}

.field-error.show {
    display: block;
}

.form-general-error {
    font-size: 0.9rem;
    color: #ef4444;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 12px 0 0;
    display: none;
}

.form-general-error.show {
    display: block;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    margin-top: 20px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.submit-btn svg {
    flex-shrink: 0;
}

.submit-loader {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== Toast ========== */
.enq-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: #111;
    color: #fff;
    padding: 16px 20px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    z-index: 9999;
    max-width: 380px;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s;
}

.enq-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.enq-toast-icon {
    width: 36px;
    height: 36px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.enq-toast-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.enq-toast-content strong {
    font-size: 0.95rem;
}

.enq-toast-content span {
    font-size: 0.85rem;
    opacity: 0.85;
    line-height: 1.35;
}

.enq-toast-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    opacity: 0.6;
    padding: 0 4px;
    line-height: 1;
    margin-left: 4px;
}

.enq-toast-close:hover {
    opacity: 1;
}

/* ========== Responsive ========== */
@media (max-width: 640px) {
    .contact-form-card {
        padding: 24px 18px;
        border-radius: 12px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-form-card h2 {
        font-size: 1.3rem;
    }

    .enq-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }
}


/* =========================
         About Section
 ======================== */

/* =========================
   ABOUT PAGE BANNER ONLY
   (Does not affect Contact page)
========================= */
.page-banner.about-banner {
    height: 340px;
    background: url('https://www.jsvtechgroup.com/images/about-banner.jpg') center/cover no-repeat;
    color: #ffffff;
}

.page-banner.about-banner .page-banner-overlay {
    background: linear-gradient(135deg, rgb(5 7 13 / 0.6), rgb(15 23 42 / 0.7));
}

.page-banner.about-banner .breadcrumb {
    color: #94a3b8;
}

.page-banner.about-banner .breadcrumb a {
    color: #94a3b8;
}

.page-banner.about-banner .breadcrumb a:hover {
    color: #00d4ff;
}

.page-banner.about-banner .breadcrumb .current {
    color: #00d4ff;
}

.page-banner.about-banner h1 {
    color: #ffffff;
}

.page-banner.about-banner p {
    color: #cbd5e1;
}

/* =========================
   WHO WE ARE SECTION
   Fully Responsive (Mobile → 4K)
========================= */

.about-who {
    padding: 100px 6%;
}

.about-who-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* =============================================
   ABOUT PAGE – Clean, Responsive, No Overflow
   ============================================= */

/* ---------- Shared ---------- */
.section-light {
    background: #ffffff;
}

.section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #315efb;
    margin-bottom: 14px;
}

.primary-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #315efb;
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.primary-button:hover {
    background: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(49, 94, 251, 0.3);
}

.primary-button span {
    transition: transform 0.3s ease;
}

.primary-button:hover span {
    transform: translateX(4px);
}

/* ---------- WHO WE ARE ---------- */
.about-who {
    padding: 100px 5%;
    overflow: hidden; /* prevents any accidental overflow */
}

.about-who-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-who-content h2 {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.28;
    margin-bottom: 20px;
}

.about-who-content h2 strong {
    color: #315efb;
}

.about-who-content p {
    font-size: 16.5px;
    line-height: 1.75;
    color: #64748b;
    margin-bottom: 18px;
}

/* Image Card */
.about-image-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12);
    height: 420px;
    max-width: 100%;
}

.about-image-bg {
    width: 100%;
    height: 100%;
    background: url('https://www.jsvtechgroup.com/images/about-team.png') center/cover no-repeat;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.about-image-card:hover .about-image-bg {
    transform: scale(1.06);
}

.about-image-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    padding: 14px 20px;
    border-radius: 14px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.about-image-badge strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.about-image-badge span {
    font-size: 13px;
    color: #94a3b8;
}

/* Screen reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- MISSION & VISION ---------- */
.about-mission {
    padding: 90px 5%;
    background: #0f172a;
    overflow: hidden;
}

.about-mission-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.mission-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    padding: 40px 32px;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.mission-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.25);
}

.mission-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(49, 94, 251, 0.25), rgba(0, 212, 255, 0.2));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00d4ff;
    margin-bottom: 22px;
}

.mission-icon svg {
    width: 26px;
    height: 26px;
}

.mission-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #ffffff;
}

.mission-card p {
    font-size: 15.5px;
    line-height: 1.75;
    color: #94a3b8;
    margin: 0;
}

/* ---------- APPROACH ---------- */
.about-approach {
    padding: 100px 5%;
    overflow: hidden;
}

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

.section-heading span {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #315efb;
    margin-bottom: 12px;
}

.section-heading h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.section-heading h2 strong {
    color: #315efb;
}

.approach-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.approach-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 32px 24px;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.approach-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #315efb, #00d4ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.approach-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1);
    border-color: #c7d2fe;
}

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

.approach-number {
    font-size: 30px;
    font-weight: 800;
    color: #315efb;
    margin-bottom: 14px;
    line-height: 1;
}

.approach-card h3 {
    font-size: 17.5px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0f172a;
}

.approach-card p {
    font-size: 14.5px;
    color: #64748b;
    line-height: 1.65;
    margin: 0;
}

/* ---------- WHAT WE DO ---------- */
.about-what-we-do {
    padding: 100px 5%;
    background: #f1f5f9;
    overflow: hidden;
}

.about-what-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-what-content h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 18px;
}

.about-what-content h2 strong {
    color: #315efb;
}

.about-what-content > p {
    font-size: 16.5px;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 8px;
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 36px;
}

.about-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: 15.5px;
    color: #334155;
    font-weight: 500;
}

.about-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #315efb;
    font-weight: 700;
    font-size: 16px;
}

.about-what-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.mini-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 26px 22px;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mini-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.09);
    border-color: #c7d2fe;
}

.mini-card h4 {
    font-size: 16.5px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #0f172a;
}

.mini-card p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ---------- ANIMATIONS (safe – no overflow) ---------- */
.animate-from-left,
.animate-from-right,
.animate-up {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.animate-from-left {
    transform: translateX(-40px);
}

.animate-from-right {
    transform: translateX(40px);
}

.animate-up {
    transform: translateY(35px);
    transition-delay: var(--delay, 0s);
}

.animate-from-left.in-view,
.animate-from-right.in-view,
.animate-up.in-view {
    opacity: 1;
    transform: translate(0, 0);
}

/* ---------- RESPONSIVE (fixes horizontal scroll) ---------- */
@media (max-width: 1100px) {
    .about-who,
    .about-approach,
    .about-what-we-do {
        padding: 80px 5%;
    }
    .about-mission {
        padding: 70px 5%;
    }
    .about-who-container,
    .about-what-container {
        gap: 45px;
    }
    .about-image-card {
        height: 380px;
    }
}

@media (max-width: 900px) {
    .about-who-container,
    .about-mission-container,
    .about-what-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-who-image {
        order: -1; /* image on top on mobile */
    }

    .about-image-card {
        height: 340px;
        max-width: 520px;
        margin: 0 auto;
    }

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

@media (max-width: 640px) {
    .about-who,
    .about-approach,
    .about-what-we-do {
        padding: 60px 4.5%;
    }
    .about-mission {
        padding: 55px 4.5%;
    }

    .about-image-card {
        height: 280px;
        border-radius: 18px;
    }

    .about-image-badge {
        bottom: 14px;
        left: 14px;
        padding: 11px 16px;
    }

    .approach-grid,
    .about-what-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mission-card {
        padding: 32px 24px;
    }

    .approach-card {
        padding: 28px 22px;
    }
}

@media (max-width: 400px) {
    .about-image-card {
        height: 240px;
    }
    .about-who-content h2,
    .about-what-content h2,
    .section-heading h2 {
        font-size: 24px;
    }
}

/* Extra safety – never allow horizontal scroll from these sections */
.about-who,
.about-mission,
.about-approach,
.about-what-we-do {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}



/* =======================
    Product Page
======================== */

/* =========================
   PRODUCTS PAGE BANNER
========================= */
/* =========================
   PRODUCTS PAGE BANNER (WebP)
========================= */
.page-banner.products-banner {
    height: 340px;
    background: url('https://www.jsvtechgroup.com/images/products-banner.webp') center/cover no-repeat;
    color: #ffffff;
}

.page-banner.products-banner .page-banner-overlay {
    background: linear-gradient(135deg, rgb(5 7 13 / 0.65), rgb(15 23 42 / 0.75));
}

/* =========================
   PRODUCTS INTRO
========================= */
.products-intro {
    padding: 70px 6% 40px;
    text-align: center;
}

.products-intro-container {
    max-width: 750px;
    margin: 0 auto;
}

.products-intro h2 {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 16px;
}

.products-intro h2 strong {
    color: #315efb;
}

.products-intro p {
    font-size: 16.5px;
    line-height: 1.7;
    color: #64748b;
}

/* =========================
   PRODUCT CATEGORY
========================= */
.products-category {
    padding: 70px 6%;
}

.category-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.category-header h2 {
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
}

.category-header h2 strong {
    color: #315efb;
}

.category-header p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
}

/* =========================
   PRODUCTS GRID & CARDS
========================= */
.products-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 32px 26px;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #315efb, #00d4ff);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.1);
    border-color: transparent;
}

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

.product-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(49, 94, 251, 0.1);
    color: #315efb;
}

.product-badge.featured {
    background: linear-gradient(135deg, #315efb, #00b4d8);
    color: #ffffff;
}

.product-icon {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, rgba(49, 94, 251, 0.1), rgba(0, 180, 216, 0.1));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #315efb;
    margin-bottom: 20px;
    transition: all 0.35s ease;
}

.product-icon svg {
    width: 26px;
    height: 26px;
}

.product-card:hover .product-icon {
    background: linear-gradient(135deg, #315efb, #00b4d8);
    color: #ffffff;
    transform: scale(1.08) rotate(-5deg);
}

.product-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.product-card > p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #64748b;
    margin-bottom: 16px;
}

.product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.product-features li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    color: #475569;
    margin-bottom: 6px;
}

.product-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #315efb;
    font-weight: 700;
}

.product-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #315efb;
    text-decoration: none;
    transition: all 0.25s ease;
}

.product-btn:hover {
    gap: 10px;
    color: #1d4ed8;
}

.product-coming {
    background: #f8fafc;
    border-style: dashed;
}

/* =========================
   WHY PRODUCTS
========================= */
.products-why {
    padding: 80px 6%;
}

.why-products-grid {
    max-width: 1100px;
    margin: 50px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.why-product-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 26px 20px;
    text-align: center;
    transition: all 0.35s ease;
}

.why-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.07);
}

.why-product-card h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #0f172a;
}

.why-product-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

/* =========================
   ANIMATIONS
========================= */
.animate-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0s);
}

.animate-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1000px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .why-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .products-grid,
    .why-products-grid {
        grid-template-columns: 1fr;
    }
    .products-category {
        padding: 50px 20px;
    }
}


/* =============================================
   SERVICES PAGE – Fully Responsive + No Overflow
   ============================================= */

/* ---------- Banner ---------- */
.page-banner.services-banner {
    height: 340px;
    background: url('https://www.jsvtechgroup.com/images/services-banner.webp') center/cover no-repeat;
    color: #ffffff;
}

.page-banner.services-banner .page-banner-overlay {
    background: linear-gradient(135deg, rgba(5, 7, 13, 0.65), rgba(15, 23, 42, 0.75));
}

/* ---------- SEO Text ---------- */
.services-seo-text {
    padding: 40px 5%;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
}

.services-seo-text .container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.services-seo-text p {
    font-size: 16.5px;
    line-height: 1.8;
    color: #334155;
    margin: 0;
    padding: 26px 28px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    border: 1px solid #e2e8f0;
}

.services-seo-text strong {
    color: #315efb;
    font-weight: 700;
}

/* ---------- Intro ---------- */
.services-intro {
    padding: 70px 5% 40px;
    text-align: center;
    overflow: hidden;
}

.services-intro-container {
    max-width: 750px;
    margin: 0 auto;
}

.section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #315efb;
    margin-bottom: 14px;
}

.services-intro h2 {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 16px;
    line-height: 1.3;
}

.services-intro h2 strong {
    color: #315efb;
}

.services-intro p {
    font-size: 16.5px;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* ---------- Service Detail Cards ---------- */
.services-main {
    padding: 40px 5% 90px;
    overflow: hidden;
}

.services-main-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.service-detail-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 36px 32px;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.service-detail-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #315efb, #00d4ff);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s ease;
}

.service-detail-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.1);
    border-color: transparent;
}

.service-detail-card:hover::before {
    transform: scaleY(1);
}

.service-detail-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(49, 94, 251, 0.12), rgba(0, 180, 216, 0.12));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #315efb;
    transition: all 0.35s ease;
    flex-shrink: 0;
}

.service-detail-icon svg {
    width: 28px;
    height: 28px;
}

.service-detail-card:hover .service-detail-icon {
    background: linear-gradient(135deg, #315efb, #00b4d8);
    color: #ffffff;
    transform: scale(1.08) rotate(-5deg);
}

.service-detail-content h2 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
    line-height: 1.3;
}

.service-detail-content > p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 18px;
}

.service-detail-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.service-detail-content ul li {
    position: relative;
    padding-left: 20px;
    font-size: 14.5px;
    color: #475569;
    line-height: 1.5;
}

.service-detail-content ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #315efb;
    font-weight: 700;
    font-size: 14px;
}

.service-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: #315efb;
    text-decoration: none;
    transition: all 0.25s ease;
}

.service-detail-btn:hover {
    gap: 10px;
    color: #1d4ed8;
}

/* ---------- FAQ ---------- */
.services-faq {
    padding: 90px 5%;
    overflow: hidden;
}

.section-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}

.section-heading span {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #315efb;
    margin-bottom: 12px;
}

.section-heading h2 {
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.section-heading h2 strong {
    color: #315efb;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.open {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
    border-color: #315efb;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    line-height: 1.4;
}

.faq-icon {
    font-size: 22px;
    color: #315efb;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.open .faq-answer {
    max-height: 400px;
    padding: 0 22px 22px;
}

.faq-answer p {
    font-size: 15px;
    line-height: 1.75;
    color: #64748b;
    margin: 0;
}

/* ---------- CTA (keep your existing if already good) ---------- */
.cta-section {
    padding: 80px 5%;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    text-align: center;
    overflow: hidden;
}

.cta-content h2 {
    font-size: clamp(26px, 4vw, 34px);
    color: #ffffff;
    margin-bottom: 14px;
}

.cta-content p {
    color: #94a3b8;
    font-size: 16.5px;
    margin-bottom: 28px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.primary-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #315efb;
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.primary-button:hover {
    background: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(49, 94, 251, 0.35);
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: all 0.3s ease;
}

.secondary-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* ---------- Animations (Safe – no overflow) ---------- */
.animate-from-left,
.animate-from-right {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.animate-from-left {
    transform: translateX(-40px);
}

.animate-from-right {
    transform: translateX(40px);
}

.animate-from-left.in-view,
.animate-from-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- RESPONSIVE – Fixes Horizontal Scroll ---------- */
@media (max-width: 900px) {
    .services-seo-text,
    .services-intro,
    .services-main,
    .services-faq,
    .cta-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .service-detail-card {
        grid-template-columns: 70px 1fr;
        gap: 22px;
        padding: 30px 24px;
    }
}

@media (max-width: 700px) {
    .service-detail-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 22px;
    }

    .service-detail-icon {
        width: 60px;
        height: 60px;
    }

    .service-detail-content ul {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .services-main {
        padding: 30px 4.5% 70px;
    }

    .services-faq {
        padding: 70px 4.5%;
    }
}

@media (max-width: 480px) {
    .services-seo-text p {
        padding: 22px 18px;
        font-size: 15.5px;
    }

    .service-detail-content h2 {
        font-size: 20px;
    }

    .faq-question {
        font-size: 15px;
        padding: 16px 18px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* Extra safety against horizontal scroll */
.services-seo-text,
.services-intro,
.services-main,
.services-faq,
.cta-section {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
}