:root {
    --blue: #045592;
    --green: #1a9c40;
    --bg-light: #f4f7fb;
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-active-bg: #eef5fc;
    --text-dark: #0b0f19;
    --text-muted: #556275;
}

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    overflow-x: hidden;
    position: relative;
}

/* Subtle Animated Tech Grid Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(4, 85, 146, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(4, 85, 146, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
    pointer-events: none;
}

/* Floating Ambient Gradient Orbs for Depth */
.ambient-orb {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(26, 156, 64, 0.12) 0%, rgba(4, 85, 146, 0.06) 60%, transparent 100%);
    border-radius: 50%;
    z-index: 0;
    filter: blur(70px);
    pointer-events: none;
    animation: floatOrb 12s ease-in-out infinite alternate;
}   

@keyframes floatOrb {
    0% { transform: translateY(0px) scale(1); }
    100% { transform: translateY(40px) scale(1.08); }
}

/* Desktop Cursor Styling (z-index updated for Header fix) */
@media (min-width: 992px) {
    * { cursor: none; }
    .cursor {
        width: 22px;
        height: 22px;
        border: 2px solid var(--green);
        border-radius: 50%;
        position: fixed;
        pointer-events: none;
        z-index: 99999;
        transform: translate(-50%, -50%);
        transition: width 0.25s, height 0.25s, background-color 0.25s, border-color 0.25s;
    }
    .cursor.hover-active {
        width: 60px;
        height: 60px;
        background-color: rgba(26, 156, 64, 0.15);
        border-color: var(--green);
        backdrop-filter: blur(3px);
    }
}

.text-blue { color: var(--blue) !important; }
.text-green { color: var(--green) !important; }

/* HEADER STYLES */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
    transition: all .4s ease;
}

.main-header.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.header-container {
    max-width: 1320px;
    margin: auto;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 55px;
    display: block;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 35px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.nav-menu li a {
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    transition: .3s;
}

.nav-menu li a:hover,
.nav-menu li a.active {
    color: var(--green);
}

.main-header.scrolled .nav-menu li a {
    color: var(--text-dark);
}

.main-header.scrolled .nav-menu li a:hover,
.main-header.scrolled .nav-menu li a.active {
    color: var(--green);
}

.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    /* border: 2px solid #fff; */
    border-radius: 50px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}

.header-btn:hover {
    background: #fff;
    color: var(--text-dark);
}

.main-header.scrolled .header-btn {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.main-header.scrolled .header-btn:hover {
    background: var(--text-dark);
    border-color: var(--text-dark);
}

.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    transition: .3s;
}

.main-header.scrolled .menu-toggle {
    color: var(--text-dark)!important;
}

/* HERO VIDEO SECTIONS BASE STYLES */
.video-hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Default: Desktop video show, Mobile video hide */
.desktop-video-section {
    display: flex;
}

.mobile-video-section {
    display: none;
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 1;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    max-width: 800px;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

/* MARQUEE */
.marquee-container {
    width: 100%;
    overflow: hidden;
    background: var(--blue);
    padding: 1.3rem 0;
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(4, 85, 146, 0.25);
}
.marquee {
    display: flex;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}
.marquee span {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-right: 3rem;
    color: #fff;
    letter-spacing: 1px;
}
.marquee span i { color: #86efac; margin-right: 1rem; }

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

/* SERVICES SECTION */
.our-services {
    padding: 9rem 5%;
    background: linear-gradient(180deg, #f4f7fb 0%, #e6effa 100%);
    position: relative;
}

.section-title-box {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4.5rem auto;
}

.section-title-box span {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--green);
    background: rgba(26, 156, 64, 0.1);
    padding: 0.5rem 1.3rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(26, 156, 64, 0.2);
}

.section-title-box h2 {
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}

.services-grid-classic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
    max-width: 1300px;
    margin: 0 auto;
}

.service-box {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 28px;
    padding: 3rem 2.4rem;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-box.active-card {
    background: var(--card-active-bg);
    border: 1px solid var(--green);
    box-shadow: 0 20px 40px rgba(26, 156, 64, 0.1);
}

.service-box:hover {
    transform: translateY(-8px);
    border-color: var(--green);
    background: #ffffff;
    box-shadow: 0 25px 45px rgba(26, 156, 64, 0.15);
}

.service-icon {
    width: 70px;
    height: 70px;
    background: rgba(26, 156, 64, 0.08);
    border: 1px solid rgba(26, 156, 64, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: var(--green);
    margin-bottom: 2rem;
    transition: all 0.4s ease;
}

.service-box:hover .service-icon {
    background: var(--green);
    color: #ffffff;
    transform: scale(1.05);
}

.service-info h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.service-info p {
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    transition: color 0.3s ease, gap 0.3s ease;
}
.service-link i { color: var(--green); }
.service-box:hover .service-link { color: var(--green); gap: 12px; }

/* TESTIMONIALS SECTION */
.testimonials-section {
    padding: 9rem 5%;
    background: linear-gradient(180deg, #eef3f9 0%, var(--bg-light) 100%);
    position: relative;
    overflow: hidden;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
    max-width: 1300px;
    margin: 0 auto;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 28px;
    padding: 2.8rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: var(--blue);
    box-shadow: 0 22px 45px rgba(4, 85, 146, 0.12);
}

.testimonial-stars {
    color: #f59e0b;
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
}

.testimonial-text {
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 2rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 1.4rem;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(4,85,146,0.2);
}

.author-info h4 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
    color: var(--text-dark);
}

.author-info p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* CONTINUOUS INFINITE GALLERY SLIDER SECTION */
.gallery-section {
    padding: 9rem 0;
    background: linear-gradient(180deg, #e6effa 0%, #d5e4f2 100%);
    overflow: hidden;
    position: relative;
}

.gallery-track-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
}

.gallery-track {
    display: flex;
    width: max-content;
    gap: 30px;
    animation: infiniteGallery 26s linear infinite;
}

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

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

.gallery-card {
    width: 420px;
    height: 460px;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(4, 85, 146, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.gallery-card:hover {
    transform: translateY(-8px);
    border-color: var(--green);
}

.animated-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card:hover .animated-bg-image {
    transform: scale(1.12);
}

.gallery-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 15, 25, 0.05) 40%, rgba(11, 15, 25, 0.75) 100%);
    z-index: 1;
}

.image-motion-badge {
    position: absolute;
    top: 25px;
    left: 25px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--blue);
    z-index: 3;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    animation: floatBadge 3s ease-in-out infinite;
}

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

/* LOGO CRAWL SECTION */
.clients-slider-section {
    padding: 8rem 0;
    background: linear-gradient(180deg, var(--bg-light) 0%, #edf3f9 100%);
    overflow: hidden;
    position: relative;
}

.clients-track-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
}

.clients-track {
    display: flex;
    width: max-content;
    animation: clientCrawl 25s linear infinite;
}

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

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

.client-logo-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 1.6rem 2.2rem;
    margin: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(4, 85, 146, 0.04);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.client-logo-img {
    max-height: 55px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.4);
    opacity: 0.65;
    transition: all 0.3s ease;
}

.client-logo-card:hover {
    border-color: var(--green);
    background: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(26, 156, 64, 0.1);
}
.client-logo-card:hover .client-logo-img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* FOOTER */
footer {
    padding: 8rem 5% 3.5rem;
    background: linear-gradient(180deg, #e9eff7 0%, #dce5f2 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}

.footer-action-banner {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 32px;
    padding: 4.5rem 3.5rem;
    margin-bottom: 5rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.06);
}

.footer-links-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 5rem;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.footer-col h5 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 1rem; }
.footer-col ul li a, .footer-col ul li span {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
    display: inline-block;
}
.footer-col ul li a:hover { color: var(--green); transform: translateX(5px); }

.footer-huge {
    font-size: clamp(1.8rem, 7vw, 10rem);
    font-weight: 900;
    color: var(--green);
    text-shadow: 0 15px 35px rgba(26, 156, 64, 0.2);
    text-align: center;
    margin: 2rem 0;
    line-height: 0.9;
    transition: all 0.5s ease;
    cursor: pointer;
    user-select: none;
    transform: scale(1.02);
    opacity: 0.9;
}
.footer-huge:hover { opacity: 1; transform: scale(1.04); }

.footer-bottom-ultimate {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    padding: 2rem;
    max-width: 1300px;
    margin: 0 auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
}

.footer-bottom-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    align-items: center;
}
.footer-bottom-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.footer-bottom-links a:hover { color: var(--green); }

.footer-social-mini { display: flex; gap: 10px; justify-content: flex-end; }
.footer-social-mini a {
    width: 38px; height: 38px;
    background: rgba(4, 85, 146, 0.05);
    border: 1px solid rgba(4, 85, 146, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--blue); text-decoration: none; transition: 0.3s;
}
.footer-social-mini a:hover { background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-3px); }

/* Responsive Media Queries (Mobile, Tablets) */
@media (max-width: 992px) {
    /* Mobile view te Desktop video hide ho je gi te Mobile video show ho je gi */
    .desktop-video-section { 
        display: none !important; 
    }
    .mobile-video-section { 
        display: flex !important; 
        height: 75vh; 
    }

    .services-grid-classic, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-card { width: 320px; height: 380px; }
    .footer-huge { display: none !important; }
    footer { text-align: center !important; }
    .footer-action-banner { text-align: center !important; padding: 3rem 1.5rem; }
    .footer-links-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
    .footer-col .socials { justify-content: center; display: flex; }
    .footer-bottom-ultimate { text-align: center; }
    .footer-bottom-links { justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
    .footer-social-mini { justify-content: center; margin-top: 1rem; }
    
    .menu-toggle { display: block; }

    .nav-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 25px;
        display: none;
        flex-direction: column;
        box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }
    .nav-wrapper.active { display: flex; }
    .nav-menu {
        width: 100%;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .nav-menu li a { color: var(--text-dark); }
    .header-btn {
        width: 100%;
        justify-content: center;
        background: var(--green);
        border-color: var(--green);
        color: #fff;
    }
}

@media (max-width: 768px) {
    .mobile-video-section { 
        height: 65vh; 
    }
    .services-grid-classic, .testimonials-grid { grid-template-columns: 1fr; }
    .section-title-box h2 { font-size: 2rem; }
    .gallery-card { width: 280px; height: 350px; }
}


  .pulse-ring {
            position: absolute;
            bottom: 25px;
            right: 25px;
            width: 50px;
            height: 50px;
            background: rgba(26, 156, 64, 0.95);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            z-index: 3;
            box-shadow: 0 0 0 0 rgba(26, 156, 64, 0.7);
            animation: pulseGlow 2s infinite;
            text-decoration: none;
            transition: background 0.3s ease;
        }
        .pulse-ring:hover { background: var(--blue); color: #fff; }




        /* ============================About US-================================= */















                :root {
            --blue: #045592;
            --green: #1a9c40;
            --bg-light: #f4f7fb;
            --card-bg: rgba(255, 255, 255, 0.9);
            --card-active-bg: #eef5fc;
            --text-dark: #0b0f19;
            --text-muted: #556275;
        }

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

        body {
            font-family:Outfit, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            overflow-x: hidden;
            position: relative;
        }

        /* Subtle Animated Tech Grid Overlay */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to right, rgba(4, 85, 146, 0.03) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(4, 85, 146, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: -1;
            pointer-events: none;
        }

        /* Floating Ambient Gradient Orbs for Depth */
        .ambient-orb {
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(26, 156, 64, 0.12) 0%, rgba(4, 85, 146, 0.06) 60%, transparent 100%);
            border-radius: 50%;
            z-index: 0;
            filter: blur(70px);
            pointer-events: none;
            animation: floatOrb 12s ease-in-out infinite alternate;
        }

        @keyframes floatOrb {
            0% { transform: translateY(0px) scale(1); }
            100% { transform: translateY(40px) scale(1.08); }
        }

        /* Desktop Cursor Styling */
        @media (min-width: 992px) {
            * { cursor: none; }
            .cursor {
                width: 22px;
                height: 22px;
                border: 2px solid var(--green);
                border-radius: 50%;
                position: fixed;
                pointer-events: none;
                z-index: 9999;
                transform: translate(-50%, -50%);
                transition: width 0.25s, height 0.25s, background-color 0.25s, border-color 0.25s;
            }
            .cursor.hover-active {
                width: 22px;
                height: 22px;
                background-color: rgba(26, 156, 64, 0.15);
                border-color: var(--green);
                backdrop-filter: blur(3px);
            }
        }

        .text-blue { color: var(--blue) !important; }
        .text-green { color: var(--green) !important; }

        /* Navigation */
        nav {
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(16px);
            background: #fdfefe;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        }

        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: transform 0.3s ease;
        }
        .logo:hover { transform: scale(1.05); }
        .logo img {
            max-height: 38px;
            width: auto;
            object-fit: contain;
        }

        .nav-content-wrapper {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .nav-links a {
            color: var(--text-dark);
            text-decoration: none;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 1px;
            transition: color 0.3s, transform 0.3s;
            display: inline-block;
        }
        .nav-links a:hover { color: var(--green); transform: translateY(-2px); }

        .header-btn {
            background: var(--green);
            color: #fff !important;
            padding: 0.55rem 1.2rem;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 8px 20px rgba(26, 156, 64, 0.25);
            transition: all 0.3s ease;
        }
        .header-btn:hover {
            background: var(--blue);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(4, 85, 146, 0.3);
        }

        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.4rem;
            color: var(--text-dark);
            cursor: pointer;
            padding: 5px;
            z-index: 1001;
        }

        /* HERO SECTION */
        .hero-banner {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 5% 4rem 5%;
            background: linear-gradient(rgba(11, 15, 25, 0.75), rgba(11, 15, 25, 0.75)), url('./background.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
            color: #ffffff;
        }

        .hero-banner h1 {
            font-size: clamp(2.1rem, 5vw, 5.2rem);
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: 1.2rem;
            text-transform: uppercase;
            color: #ffffff;
        }

        .hero-banner p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.85);
            max-width: 580px;
            line-height: 1.6;
            margin-bottom: 2rem;
        }

        .hero-card-stack {
            position: relative;
            height: 340px;
            width: 100%;
            margin-top: 1.5rem;
        }

        .floating-hero-card {
            position: absolute;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border-radius: 20px;
            padding: 1.5rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: transform 0.3s ease;
        }
        .floating-hero-card:hover { transform: translateY(-5px); }

        .card-one { top: 0; right: 0; width: 85%; }
        .card-two { bottom: 0; left: 0; width: 75%; background: linear-gradient(135deg, rgba(255,255,255,0.95), #eefbf2); border-color: rgba(26, 156, 64, 0.3); }

        /* MARQUEE */
        .marquee-container {
            width: 100%;
            overflow: hidden;
            background: var(--blue);
            padding: 1.1rem 0;
            /*transform: rotate(-1deg) scale(1.02);*/
            position: relative;
            z-index: 10;
            box-shadow: 0 10px 30px rgba(4, 85, 146, 0.25);
        }
        .marquee {
            display: flex;
            white-space: nowrap;
            animation: marquee 30s linear infinite;
        }
        .marquee span {
            font-size: 1.2rem;
            font-weight: 800;
            text-transform: uppercase;
            margin-right: 2.5rem;
            color: #fff;
            letter-spacing: 1px;
        }
        .marquee span i { color: #86efac; margin-right: 0.8rem; }
        
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* SERVICES SECTION */
        .our-services {
            padding: 6rem 5%;
            background: linear-gradient(180deg, #f4f7fb 0%, #e6effa 100%);
            position: relative;
        }

        .section-title-box {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 3.5rem auto;
        }

        .section-title-box span {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--green);
            background: rgba(26, 156, 64, 0.1);
            padding: 0.4rem 1.1rem;
            border-radius: 50px;
            margin-bottom: 1rem;
            border: 1px solid rgba(26, 156, 64, 0.2);
        }

        .section-title-box h2 {
            font-size: clamp(1.8rem, 4vw, 3.5rem);
            font-weight: 900;
            letter-spacing: -0.02em;
            color: var(--text-dark);
        }

        .services-grid-classic {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.8rem;
            max-width: 1300px;
            margin: 0 auto;
        }

        .service-box {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 24px;
            padding: 2.2rem 1.8rem;
            position: relative;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .service-box.active-card {
            background: var(--card-active-bg);
            border: 1px solid var(--green);
            box-shadow: 0 20px 40px rgba(26, 156, 64, 0.1);
        }

        .service-box:hover {
            transform: translateY(-8px);
            border-color: var(--green);
            background: #ffffff;
            box-shadow: 0 25px 45px rgba(26, 156, 64, 0.15);
        }

        .service-icon {
            width: 60px;
            height: 60px;
            background: rgba(26, 156, 64, 0.08);
            border: 1px solid rgba(26, 156, 64, 0.2);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--green);
            margin-bottom: 1.5rem;
            transition: all 0.4s ease;
        }

        .service-box:hover .service-icon {
            background: var(--green);
            color: #ffffff;
            transform: scale(1.05);
        }

        .service-info h3 {
            font-size: 1.3rem;
            font-weight: 800;
            margin-bottom: 0.8rem;
            color: var(--text-dark);
        }

        .service-info p {
            color: var(--text-muted);
            font-size: 0.92rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .service-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-dark);
            transition: color 0.3s ease, gap 0.3s ease;
        }
        .service-link i { color: var(--green); }
        .service-box:hover .service-link { color: var(--green); gap: 12px; }

        /* TESTIMONIALS SECTION */
        .testimonials-section {
            padding: 6rem 5%;
            background: linear-gradient(180deg, #eef3f9 0%, var(--bg-light) 100%);
            position: relative;
            overflow: hidden;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.8rem;
            max-width: 1300px;
            margin: 0 auto;
        }

        .testimonial-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 24px;
            padding: 2.2rem;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-8px);
            border-color: var(--blue);
            box-shadow: 0 22px 45px rgba(4, 85, 146, 0.12);
        }

        .testimonial-stars {
            color: #f59e0b;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .testimonial-text {
            color: var(--text-muted);
            font-size: 0.98rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
            font-style: italic;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 12px;
            border-top: 1px solid rgba(0,0,0,0.05);
            padding-top: 1.2rem;
        }

        .author-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--blue);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            box-shadow: 0 8px 20px rgba(4,85,146,0.2);
            flex-shrink: 0;
        }

        .author-info h4 {
            font-size: 0.98rem;
            font-weight: 800;
            margin-bottom: 0.1rem;
            color: var(--text-dark);
        }

        .author-info p {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* CONTINUOUS INFINITE GALLERY SLIDER SECTION */
        .gallery-section {
            padding: 6rem 0;
            background: linear-gradient(180deg, #e6effa 0%, #d5e4f2 100%);
            overflow: hidden;
            position: relative;
        }

        .gallery-track-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: 1.5rem 0;
        }

        .gallery-track {
            display: flex;
            width: max-content;
            gap: 24px;
            animation: infiniteGallery 26s linear infinite;
        }

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

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

        .gallery-card {
            width: 360px;
            height: 400px;
            border-radius: 28px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 20px 40px rgba(4, 85, 146, 0.12);
            border: 2px solid rgba(255, 255, 255, 0.9);
            flex-shrink: 0;
            transition: transform 0.4s ease, border-color 0.4s ease;
        }

        .gallery-card:hover {
            transform: translateY(-8px);
            border-color: var(--green);
        }

        .animated-bg-image {
            position: absolute;
            inset: 0;
            background-size: cover; 
            background-position: center; 
            background-repeat: no-repeat;
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .gallery-card:hover .animated-bg-image {
            transform: scale(1.12);
        }

        .gallery-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(11, 15, 25, 0.05) 40%, rgba(11, 15, 25, 0.75) 100%);
            z-index: 1;
        }

        .image-motion-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            padding: 0.5rem 1.2rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--blue);
            z-index: 3;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .pulse-ring {
            position: absolute;
            bottom: 25px;
            right: 25px;
            width: 50px;
            height: 50px;
            background: rgba(26, 156, 64, 0.95);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            z-index: 3;
            box-shadow: 0 0 0 0 rgba(26, 156, 64, 0.7);
            animation: pulseGlow 2s infinite;
            text-decoration: none;
            transition: background 0.3s ease;
        }
        .pulse-ring:hover { background: var(--blue); color: #fff; }

        @keyframes pulseGlow {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(26, 156, 64, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 12px rgba(26, 156, 64, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(26, 156, 64, 0);
            }
        }

        /* LOGO CRAWL SECTION */
        .clients-slider-section {
            padding: 6rem 0;
            background: linear-gradient(180deg, var(--bg-light) 0%, #edf3f9 100%);
            overflow: hidden;
            position: relative;
        }

        .clients-track-wrapper {
            display: flex;
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: 1rem 0;
        }

        .clients-track {
            display: flex;
            width: max-content;
            animation: clientCrawl 25s linear infinite;
        }

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

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

        .client-logo-card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 16px;
            padding: 1.2rem 1.8rem;
            margin: 0 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 180px;
            box-shadow: 0 10px 30px rgba(4, 85, 146, 0.04);
            border: 1px solid rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }

        .client-logo-img {
            max-height: 45px;
            width: auto;
            object-fit: contain;
            filter: grayscale(100%) brightness(0.4);
            opacity: 0.65;
            transition: all 0.3s ease;
        }

        .client-logo-card:hover {
            border-color: var(--green);
            background: #ffffff;
            transform: translateY(-4px);
            box-shadow: 0 15px 35px rgba(26, 156, 64, 0.1);
        }
        .client-logo-card:hover .client-logo-img {
            filter: grayscale(0%) brightness(1);
            opacity: 1;
        }

        /* FOOTER */
        footer {
            padding: 6rem 5% 3rem;
            background: linear-gradient(180deg, #e9eff7 0%, #dce5f2 100%);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .footer-action-banner {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 28px;
            padding: 3.5rem 2rem;
            margin-bottom: 4rem;
            box-shadow: 0 25px 50px rgba(0,0,0,0.06);
        }

        .footer-links-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 2rem;
            margin-bottom: 4rem;
            max-width: 1300px;
            margin-left: auto;
            margin-right: auto;
        }

        .footer-col h5 {
            font-size: 1.05rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 1.2rem;
            color: var(--text-dark);
        }

        .footer-col ul { list-style: none; padding: 0; }
        .footer-col ul li { margin-bottom: 0.8rem; }
        .footer-col ul li a, .footer-col ul li span {
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s, transform 0.3s;
            display: inline-block;
            font-size: 0.92rem;
        }
        .footer-col ul li a:hover { color: var(--green); transform: translateX(5px); }

        .footer-huge {
            font-size: clamp(1.5rem, 6vw, 8rem);
            font-weight: 900;
            color: var(--green);
            text-shadow: 0 15px 35px rgba(26, 156, 64, 0.2);
            text-align: center;
            margin: 1.5rem 0;
            line-height: 0.9;
            transition: all 0.5s ease;
            cursor: pointer;
            user-select: none;
            opacity: 0.9;
        }
        .footer-huge:hover { opacity: 1; transform: scale(1.02); }

        .footer-bottom-ultimate {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 18px;
            padding: 1.5rem;
            max-width: 1300px;
            margin: 0 auto;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
        }

        .footer-bottom-links {
            display: flex;
            gap: 1.2rem;
            list-style: none;
            margin: 0;
            padding: 0;
            justify-content: flex-end;
            align-items: center;
        }
        .footer-bottom-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
        .footer-bottom-links a:hover { color: var(--green); }

        .footer-social-mini { display: flex; gap: 8px; justify-content: flex-end; }
        .footer-social-mini a {
            width: 34px; height: 34px;
            background: rgba(4, 85, 146, 0.05);
            border: 1px solid rgba(4, 85, 146, 0.1);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: var(--blue); text-decoration: none; transition: 0.3s;
            font-size: 0.9rem;
        }
        .footer-social-mini a:hover { background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-3px); }

        .btn-custom {
            background: var(--green);
            color: #fff;
            padding: 0.85rem 2rem;
            border-radius: 50px;
            font-weight: 700;
            text-transform: uppercase;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(26, 156, 64, 0.25);
            letter-spacing: 0.5px;
            font-size: 0.85rem;
            margin-top: 15px;
        }
        .btn-custom:hover {
            background: var(--blue);
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(4, 85, 146, 0.3);
        }

        /* --- ADVANCED MOBILE RESPONSIVE FIXES --- */
        @media (max-width: 992px) {
            .services-grid-classic, .testimonials-grid { 
                grid-template-columns: repeat(2, 1fr); 
            }
            .gallery-card { 
                width: 300px; 
                height: 360px; 
            }
            .footer-huge { 
                display: none !important; 
            }
            footer { 
                text-align: center !important; 
            }
            .footer-action-banner { 
                text-align: center !important; 
                padding: 2.5rem 1.2rem; 
            }
            .footer-links-grid { 
                grid-template-columns: 1fr; 
                gap: 2rem; 
                text-align: center; 
            }
            .footer-col .socials { 
                justify-content: center; 
                display: flex; 
            }
            .footer-bottom-ultimate { 
                text-align: center; 
            }
            .footer-bottom-links { 
                justify-content: center; 
                flex-wrap: wrap; 
                margin-top: 0.8rem; 
            }
            .footer-social-mini { 
                justify-content: center; 
                margin-top: 0.8rem; 
            }
            
            .menu-toggle { 
                display: block; 
            }
            
            /* Enhanced Full-Width Mobile Slide-down Menu */
            .nav-content-wrapper {
                position: fixed;
                top: 65px;
                left: 0;
                width: 100vw;
                height: calc(100vh - 65px);
                background: rgba(244, 247, 251, 0.98);
                backdrop-filter: blur(16px);
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                padding: 3rem 1.5rem;
                border-bottom: 1px solid rgba(0,0,0,0.05);
                box-shadow: 0 15px 30px rgba(0,0,0,0.08);
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                transition: clip-path 0.4s ease-in-out;
                overflow-y: auto;
                z-index: 999;
            }
            .nav-content-wrapper.active {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
            .nav-links {
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
                margin-bottom: 2rem;
                width: 100%;
            }
            .nav-links a { 
                font-size: 1.1rem; 
                letter-spacing: 2px;
                padding: 0.5rem 0;
                width: 100%;
                text-align: center;
            }
            .header-btn {
                font-size: 0.9rem;
                padding: 0.8rem 2rem;
                width: 100%;
                max-width: 250px;
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .services-grid-classic, .testimonials-grid { 
                grid-template-columns: 1fr; 
            }
            .hero-banner { 
                text-align: center; 
                padding-top: 7rem; 
                padding-bottom: 3rem;
            }
            .hero-banner .d-flex { 
                justify-content: center; 
            }
            .hero-banner p { 
                margin-left: auto; 
                margin-right: auto; 
            }
            .section-title-box h2 { 
                font-size: 2rem; 
            }
            .gallery-card { 
                width: 260px; 
                height: 330px; 
            }
            .hero-card-stack {
                height: 300px;
            }
            .floating-hero-card {
                padding: 1.2rem;
            }
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
        :root {
            --blue: #045592;
            --green: #1a9c40;
            --bg-light: #f4f7fb;
            --bg-card: #ffffff;
            --border-color: rgba(4, 85, 146, 0.08);
            --text-main: #0b0f19;
            --text-muted: #556275;
        }

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

        body {
            font-family: Outfit, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-main);
            overflow-x: hidden;
            position: relative;
        }

        h1, h2, h3, h4, h5, h6, .brand-font {
            font-family: Outfit, sans-serif;
        }

        /* Subtle Light Tech Grid Overlay */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to right, rgba(4, 85, 146, 0.03) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(4, 85, 146, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: -1;
            pointer-events: none;
        }

        /* Ambient Soft Gradient Orbs */
        .ambient-orb {
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(26, 156, 64, 0.1) 0%, rgba(4, 85, 146, 0.05) 60%, transparent 100%);
            border-radius: 50%;
            z-index: 0;
            filter: blur(50px);
            pointer-events: none;
            animation: floatOrb 12s ease-in-out infinite alternate;
        }

        @keyframes floatOrb {
            0% { transform: translateY(0px) scale(1); }
            100% { transform: translateY(20px) scale(1.04); }
        }

        /* Clean Light Glassmorphism Navigation */
        nav {
            padding: 1rem 4%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(16px);
            background:#fdfefe;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        }

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

        .nav-content-wrapper {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            list-style: none;
            margin-bottom: 0;
        }

        .nav-links a {
            color: var(--text-main);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: color 0.3s ease;
        }
        .nav-links a:hover, .nav-links a.active {
            color: var(--green);
        }

        .header-btn {
            background: var(--green);
            color: #fff !important;
            padding: 0.5rem 1.2rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 8px 20px rgba(26, 156, 64, 0.25);
            transition: all 0.3s ease;
        }
        .header-btn:hover {
            background: var(--blue);
            transform: translateY(-2px);
        }

        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.3rem;
            color: #ffffff!important;
            color: var(--text-main);
            cursor: pointer;
            z-index: 1001;
        }

        /* HERO BANNER */
        .page-hero {
            padding: 9rem 5% 4rem;
            background: linear-gradient(135deg, #045592 0%, #0b0f19 100%);
            color: #ffffff;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .page-hero h1 {
            font-size: clamp(2.2rem, 5vw, 4.5rem);
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 1rem;
            font-family:Outfit, sans-serif;;
        }
        .page-hero p {
            color: rgba(255, 255, 255, 0.8);
            font-size: clamp(0.95rem, 2vw, 1.1rem);
            max-width: 600px;
            margin: 0 auto;
        }

        /* LIVE ANIMATED METRICS COUNTERS STRIP */
        .metrics-section {
            padding: 3rem 4%;
            position: relative;
            z-index: 2;
        }
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.2rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        .metric-card {
            background: var(--bg-card);
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 20px;
            padding: 2rem 1.2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(4, 85, 146, 0.04);
            transition: all 0.3s ease;
        }
        .metric-card:hover {
            transform: translateY(-5px);
            border-color: rgba(26, 156, 64, 0.3);
        }
        .metric-icon {
            width: 50px;
            height: 50px;
            background: rgba(26, 156, 64, 0.1);
            border: 1px solid rgba(26, 156, 64, 0.2);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: var(--green);
            margin: 0 auto 1rem;
        }
        .metric-number-wrap {
            font-family: Outfit, sans-serif;
            font-size: clamp(2.2rem, 3.5vw, 3.5rem);
            font-weight: 800;
            color: var(--blue);
            line-height: 1;
            margin-bottom: 0.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2px;
        }
        .metric-label {
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* INTERACTIVE INNOVATION SHOWCASE SECTION */
        .showcase-section {
            padding: 4rem 4%;
            position: relative;
        }
        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 3rem;
        }
        .section-badge {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--green);
            background: rgba(26, 156, 64, 0.1);
            border: 1px solid rgba(26, 156, 64, 0.2);
            padding: 0.3rem 1rem;
            border-radius: 50px;
            margin-bottom: 1rem;
        }
        .section-header h2 {
            font-size: clamp(1.8rem, 3.5vw, 3.2rem);
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--text-main);
        }

        .bento-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 1.5rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        .bento-card {
            background: var(--bg-card);
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 24px;
            padding: 2rem 1.5rem;
            grid-column: span 6;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(4, 85, 146, 0.04);
        }
        @media(min-width: 768px) {
            .bento-card { padding: 2.5rem; }
        }
        .bento-card h3 {
            font-size: clamp(1.4rem, 2vw, 1.8rem);
            font-weight: 700;
            margin-bottom: 0.8rem;
            color: var(--text-main);
        }
        .bento-card p {
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        /* CIRCULAR METRIC RING CARD */
        .circle-progress-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f8fafc;
            border: 1px solid rgba(0, 0, 0, 0.04);
            border-radius: 16px;
            padding: 1.2rem;
            margin-bottom: 1rem;
            gap: 1rem;
        }
        .progress-circle-wrap {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #ffffff;
            border: 4px solid var(--green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Outfit, sans-serif;
            font-weight: 800;
            font-size: 0.9rem;
            color: var(--green);
            flex-shrink: 0;
        }

        /* AGENCY TIMELINE */
        .timeline-container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            padding: 1rem 0;
        }
        .timeline-container::before {
            content: '';
            position: absolute;
            top: 1rem; bottom: 1rem; left: 20px;
            width: 3px;
            background: rgba(4, 85, 146, 0.15);
        }
        .timeline-line-progress {
            position: absolute;
            top: 1rem; left: 20px;
            width: 3px;
            height: 0%;
            background: var(--blue);
            z-index: 1;
            transition: height 0.3s ease;
        }
        .timeline-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 3rem;
            width: 100%;
            position: relative;
            padding-left: 45px;
            z-index: 2;
        }
        .timeline-box {
            width: 100%;
            background: var(--bg-card);
            border: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(4, 85, 146, 0.05);
        }
        .timeline-node {
            position: absolute;
            left: 20px;
            top: 1.5rem;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: var(--green);
            border: 3px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 0 3px rgba(26, 156, 64, 0.2);
            z-index: 3;
        }

        @media (min-width: 992px) {
            .timeline-container::before, .timeline-line-progress { left: 50%; transform: translateX(-50%); }
            .timeline-item { flex-direction: row-reverse; justify-content: space-between; padding-left: 0; }
            .timeline-item:nth-child(odd) { flex-direction: row; }
            .timeline-box { width: 44%; padding: 2.2rem; }
            .timeline-node { left: 50%; top: 50%; transform: translate(-50%, -50%); }
        }

        /* FOOTER STYLING */
        footer {
            background-color: #041c2c;
            color: #ffffff;
            padding: 4rem 5% 2rem;
            position: relative;
        }
        footer h5 {
            color: #ffffff;
            font-weight: 700;
            margin-bottom: 1.2rem;
            font-size: 1.1rem;
        }
        footer p, footer li a {
            color: #b0c4de;
            font-size: 0.9rem;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        footer li a:hover {
            color: #1a9c40;
            padding-left: 4px;
        }
        .footer-social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 50%;
            color: #fff;
            margin-right: 8px;
            margin-bottom: 8px;
            transition: all 0.3s ease;
        }
        .footer-social-links a:hover {
            background: #1a9c40;
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 2rem;
            padding-top: 1.2rem;
            text-align: center;
            color: #8a9ba8;
            font-size: 0.85rem;
        }

        /* RESPONSIVE NAV DRAWER */
        @media (max-width: 992px) {
            .bento-card { grid-column: span 12 !important; }
            .menu-toggle { display: block; }
            .nav-content-wrapper {
                position: fixed;
                top: 65px; left: 0; width: 100%; height: calc(100vh - 65px);
                background:#fdfefe;
                backdrop-filter: blur(16px);
                flex-direction: column;
                justify-content: flex-start;
                padding: 3rem 2rem;
                gap: 2rem;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                transition: clip-path 0.4s ease-in-out;
            }
            .nav-content-wrapper.active {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
            .nav-links { flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; }
            .nav-links a { font-size: 1rem; }
        }





        /* Light Background Hero Banner with Image */
.light-hero-banner {
    /* Apni image da path ythe 'image.jpg' di jagah pao */
    background: linear-gradient(rgba(248, 250, 252, 0.9), rgba(248, 250, 252, 0.85)), url('image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #0b0f19;
    padding: 120px 0 80px 0;
    position: relative;
    overflow: hidden;
}

.banner-badge {
    background: rgba(4, 85, 146, 0.08);
    color: #045592;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(4, 85, 146, 0.2);
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 20px;
}

.banner-title {
    font-family: Outfit, sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #0b0f19;
    line-height: 1.15;
    margin-bottom: 20px;
}

.banner-desc {
    color: #475569;
    font-size: 1.15rem;
    max-width: 650px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.banner-btn-primary {
    background: #045592;
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.banner-btn-primary:hover {
    background: #033d6b;
    color: #ffffff;
    transform: translateY(-2px);
}

.banner-btn-outline {
    background: transparent;
    color: #0b0f19;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #cbd5e1;
    transition: 0.3s ease;
}

.banner-btn-outline:hover {
    border-color: #045592;
    color: #045592;
    transform: translateY(-2px);
}










/* ======FAQ======== */
/* ======FAQ======== */
.modern-faq-section {
    background: linear-gradient(135deg, #f4fbf7 0%, #e8f5e9 100%);
    padding: 80px 20px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.faq-wrapper {
    max-width: 850px;
    margin: 0 auto;
    text-align: center; /* <-- Isne badge, heading aur subtitle ko center kar ditta hai */
}

.faq-badge {
   display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green);
  background: rgba(26, 156, 64, 0.1);
  padding: 0.4rem 1.1rem;
  border-radius: 50px;
  margin-bottom: 1rem;
  border: 1px solid rgba(26, 156, 64, 0.2);
}

.faq-main-title {
    margin-bottom: 10px;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-dark);
        font-family: 'Outfit', sans-serif;
}

.faq-subtitle {
    font-size: 16px;
    color: #555555;
    margin-bottom: 50px;
}

.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left; /* <-- Sawaal apne jagah left-aligned hi rehnge taaki clean lage */
}

.faq-card {
    background: #ffffff;
    border: 1px solid #c8e6c9;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

.faq-card:hover {
    border-color: #81c784;
    box-shadow: 0 10px 15px -3px rgba(22, 96, 57, 0.05);
}

.faq-card.active {
    border-color: #166039;
    box-shadow: 0 10px 25px -5px rgba(22, 96, 57, 0.1);
}

.faq-question-box {
    padding: 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 20px;
}

.faq-q-number {
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
    font-family: monospace;
}

.faq-card.active .faq-q-number {
    color: #1a9c40;
}

.faq-q-text {
    font-size: 18px;
    font-weight: 600;
    color: #121212;
    margin: 0;
    flex-grow: 1;
    transition: color 0.2s ease;
}

.faq-card.active .faq-q-text {
    color: #1a9c40;
}

.faq-icon {
    width: 36px;
    height: 36px;
    background: #e8f5e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #166039;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.faq-card.active .faq-icon {
    background: #1a9c40;
    color: #ffffff;
    transform: rotate(180deg);
}

.faq-answer-box {
    padding: 0 24px 24px 64px;
    display: none;
}

.faq-card.active .faq-answer-box {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

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

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .modern-faq-section {
        padding: 40px 15px;
    }
    .faq-main-title {
        font-size: 28px;
    }
    .faq-answer-box {
        padding: 0 20px 20px 20px;
    }
    .faq-q-number {
        display: none;
    }
}



/* ========work processs===== */



.aw-pro-section {
        background: #f8fafc; /* Clean Light Background */
        background-image: radial-gradient(circle at 50% 20%, #ffffff 0%, #f1f5f9 100%);
        padding: 100px 20px;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        color: #0f172a;
        overflow: hidden;
    }

    .aw-pro-wrapper {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    .aw-pro-badge {
        display: inline-block;
        background: rgba(22, 163, 74, 0.1);
        color: #16a34a;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 6px 16px;
        border-radius: 50px;
        margin-bottom: 16px;
        border: 1px solid rgba(22, 163, 74, 0.2);
    }

    .aw-pro-title {
        font-size: 42px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 12px;
        letter-spacing: -1px;
    }

    .aw-pro-subtitle {
        font-size: 16px;
        color: #64748b;
        margin-bottom: 70px;
    }

    .aw-pro-container {
        position: relative;
        width: 500px;
        height: 500px;
        margin: 0 auto;
    }

    .aw-center-card {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 230px;
        height: 230px;
        background: #ffffff;
        backdrop-filter: blur(12px);
        border: 2px solid rgba(22, 163, 74, 0.3);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 0 30px rgba(22, 163, 74, 0.08);
        z-index: 10;
        transition: all 0.3s ease;
    }

    .hub-step-pill {
        font-size: 11px;
        font-weight: 800;
        color: #16a34a;
        background: rgba(22, 163, 74, 0.1);
        padding: 3px 10px;
        border-radius: 20px;
        margin-bottom: 6px;
        letter-spacing: 1px;
    }

    .hub-icon-wrap {
        width: 40px;
        height: 40px;
        background: rgba(22, 163, 74, 0.12);
        color: #16a34a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
    }

    .aw-center-card h3 {
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 4px 0;
    }

    .aw-center-card p {
        font-size: 12px;
        color: #64748b;
        margin: 0;
        line-height: 1.4;
    }

    .aw-rotating-ring {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px dashed rgba(203, 213, 225, 0.8);
        border-radius: 50%;
        animation: rotateRing 35s linear infinite reverse;
    }

    .aw-pro-container:hover .aw-rotating-ring {
        animation-play-state: paused;
    }

    @keyframes rotateRing {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .aw-node {
        position: absolute;
        top: 50%;
        left: 50%;
        background: #ffffff;
        border: 1px solid rgba(203, 213, 225, 0.8);
        padding: 10px 16px;
        border-radius: 40px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        --radius: 215px;
        transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle)));
        animation: counterRotate 35s linear infinite reverse;
    }

    .aw-pro-container:hover .aw-node {
        animation-play-state: paused;
    }

    @keyframes counterRotate {
        from { transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) rotate(-360deg); }
    }

    .aw-node.active-right {
        background: #16a34a;
        color: #ffffff;
        border-color: #16a34a;
        box-shadow: 0 10px 20px rgba(22, 163, 74, 0.3);
    }

    .aw-node.active-right span {
        color: #ffffff;
    }

    .aw-node.active-right .aw-icon {
        background: #ffffff;
        color: #16a34a;
    }

    .aw-icon {
        width: 28px;
        height: 28px;
        background: rgba(22, 163, 74, 0.1);
        color: #16a34a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .aw-node span {
        font-size: 13px;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
    }

    @media (max-width: 768px) {
        .aw-pro-section {
            padding: 60px 15px;
        }
        .aw-pro-title {
            font-size: 30px;
        }
        .aw-pro-container {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .aw-center-card {
            position: relative;
            top: unset;
            left: unset;
            transform: none;
            margin: 0 auto 24px auto;
            width: 100%;
            max-width: 280px;
            height: auto;
            padding: 24px;
            border-radius: 20px;
        }
        .aw-rotating-ring {
            position: relative;
            width: 100%;
            height: auto;
            border: none;
            border-radius: 0;
            animation: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .aw-node {
            position: relative;
            top: unset !important;
            left: unset !important;
            transform: none !important;
            width: 100%;
            border-radius: 14px;
            animation: none;
            justify-content: flex-start;
            padding: 14px 18px;
        }
    }











    /* ============Tech Stack / Software Tools============= */



.tech-tabs-section {
        background: #f8fafc;
        background-image: radial-gradient(circle at 50% 0%, #ffffff 0%, #f1f5f9 100%);
        padding: 100px 20px;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        color: #0f172a;
    }

    .tech-tabs-wrapper {
        max-width: 1100px;
        margin: 0 auto;
    }

    .tech-tabs-header {
        text-align: center;
        max-width: 650px;
        margin: 0 auto 50px auto;
    }

    .tech-tabs-badge {
        display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green);
  background: rgba(26, 156, 64, 0.1);
  padding: 0.4rem 1.1rem;
  border-radius: 50px;
  margin-bottom: 1rem;
  border: 1px solid rgba(26, 156, 64, 0.2);
    }

    .tech-tabs-title {
     font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-dark);
    }

    .tech-tabs-subtitle {
        font-size: 16px;
        color: #64748b;
        line-height: 1.6;
    }

    /* Main Container Layout */
    .tech-tabs-container {
        display: grid;
        grid-template-columns: 260px 1fr;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
    }

    /* Sidebar / Tab Buttons */
    .tech-tabs-sidebar {
        background: #ffffff;
        border-right: 1px solid #e2e8f0;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tech-tab-btn {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 14px 24px;
        background: transparent;
        border: none;
        font-size: 15px;
        font-weight: 600;
        color: #64748b;
        text-align: left;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
    }

    .tech-tab-btn .tab-icon {
        font-size: 18px;
    }

    .tech-tab-btn:hover {
        background: #f0fdf4;
        color: #059669;
    }

    .tech-tab-btn.active {
        background: #ecfdf5;
        color: #059669;
        font-weight: 700;
    }

    /* Active Indicator Green & Blue Accent Bar */
    .tech-tab-btn.active::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: linear-gradient(to bottom, #2563eb, #10b981);
        border-radius: 4px 0 0 4px;
    }

    /* Content Area */
    .tech-tabs-content-area {
        background: #f8fafc;
        padding: 40px;
        min-height: 400px;
        position: relative;
    }

    .tech-pane {
        display: none;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 20px;
        animation: fadeIn 0.4s ease-in-out;
    }

    .tech-pane.active {
        display: grid;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Individual Software Card */
    .tech-grid-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 24px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
        transition: all 0.3s ease;
    }

    .tech-grid-card:hover {
        transform: translateY(-4px);
        border-color: #2563eb;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1);
    }

    .card-logo {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        object-fit: contain;
    }

    .card-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .tech-grid-card h4 {
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
        margin: 0;
    }

    /* Responsive Design */
    @media (max-width: 850px) {
        .tech-tabs-container {
            grid-template-columns: 1fr;
        }
        .tech-tabs-sidebar {
            flex-direction: row;
            overflow-x: auto;
            border-right: none;
            border-bottom: 1px solid #e2e8f0;
            padding: 10px;
            gap: 8px;
        }
        .tech-tab-btn {
            white-space: nowrap;
            padding: 10px 16px;
            border-radius: 8px;
        }
        .tech-tab-btn.active::before {
            display: none;
        }
        .tech-tab-btn.active {
            background: #10b981;
            color: #ffffff;
        }
        .tech-tabs-content-area {
            padding: 24px;
        }
    }

    @media (max-width: 500px) {
        .tech-tabs-title {
            font-size: 28px;
        }
        .tech-pane {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    


    
    


    








    
    #green-blue-vimeo-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #020617; /* Deep Tech Dark Blue Base */
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 60px 20px;
}

/* Vimeo Background Iframe Styling */
.gb-vimeo-bg-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 Aspect Ratio */
  min-height: 100vh;
  min-width: 177.77vh;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.gb-vimeo-bg-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gb-overlay-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(2, 6, 23, 0.2) 20%, rgba(2, 6, 23, 0.9) 85%);
  z-index: 1;
  pointer-events: none;
}

/* 3-Column Layout Container */
.gb-grid-container {
  position: relative;
  z-index: 2;
  max-width: 1350px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 420px 1fr;
  align-items: center;
  gap: 40px;
}

.gb-col-left {
  padding-right: 15px;
}

.gb-story-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #38bdf8; /* Electric Blue Accent */
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.gb-dot {
  width: 7px;
  height: 7px;
  background-color: #10b981; /* Emerald Green Glow Dot */
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981, 0 0 20px #38bdf8;
}

.gb-col-left h2 {
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
}

.gb-col-spacer {
  /* Keeps center open for video */
}

.gb-col-right {
  padding-left: 15px;
}

.gb-col-right p {
  font-size: 15px;
  line-height: 1.85;
  color: #94a3b8;
  margin: 0;
}

/* Green & Blue Gradient Pill Highlight */
.gb-highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(56, 189, 248, 0.25));
  color: #e2e8f0;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 600;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

/* Responsive Styles for Tablets and Mobiles */
@media (max-width: 1024px) {
  .gb-grid-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .gb-col-left {
    padding-right: 0;
  }
  .gb-col-right {
    padding-left: 0;
  }
  .gb-story-tag {
    justify-content: center;
  }
}













.tech-slider-section {
    background-color: #f4f6f9; /* Light Background */
    padding: 90px 0;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.tech-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styling */
.tech-header-box {
    text-align: center;
    margin-bottom: 50px;
}

.tech-subtitle {
   display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--green);
  background: rgba(26, 156, 64, 0.1);
  border: 1px solid rgba(26, 156, 64, 0.2);
  padding: 0.3rem 1rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}

.tech-title {
font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.tech-desc {
    color: #666666;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Slider Container */
.tech-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    display: flex;
    align-items: center;
}

.tech-track {
    display: flex;
    gap: 25px;
    width: max-content;
    animation: infiniteScroll 25s linear infinite;
}

/* Pause animation on track hover */
.tech-slider-wrapper:hover .tech-track {
    animation-play-state: paused;
}

/* Card Base Styling */
.tech-card {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 20px;
    padding: 25px 20px;
    width: 140px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transform-origin: center center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.3s ease, 
                filter 0.3s ease, 
                background-color 0.3s ease, 
                box-shadow 0.3s ease, 
                border-color 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.tech-icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.tech-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tech-name {
    color: #444444;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: color 0.3s ease;
}

/* Spotlight Effect: Jadon track te hover hove, taan saare cards thode light/fade ho jan */
.tech-track:hover .tech-card {
    opacity: 0.4;
    filter: grayscale(40%);
}

/* Par jehde card utte mouse hove, oho dark, zoom te full bright ho jave */
.tech-track .tech-card:hover {
    opacity: 1;
    filter: none;
    background: #ffffff;
    border-color: var(--card-color);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 0 20px var(--card-color);
    transform: scale(1.2);
    z-index: 10;
}

.tech-track .tech-card:hover .tech-name {
    color: #000000;
    font-weight: 700;
}

.tech-track .tech-card:hover .tech-icon-box {
    transform: scale(1.1);
}

/* Infinite Scroll Keyframes */
@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .tech-title {
        font-size: 28px;
    }
    .tech-slider-section {
        padding: 60px 0;
    }
}



/**/

/* =========================================
   TABLET RESPONSIVE
   768px - 991px
========================================= */

@media (max-width: 991px) and (min-width: 768px) {

    .cards-stack-section {
        padding: 70px 25px;
    }

    .cards-container {
        display: flex;
        flex-direction: column;
        gap: 50px;
        max-width: 750px;
    }

    /* Left Content */
    .left-content {
        width: 100%;
        position: relative;
        top: auto;
        text-align: center;
    }

    .left-content h2 {
        font-size: 34px;
        line-height: 1.25;
        margin-bottom: 20px;
    }

    .left-content p {
        font-size: 16px;
        line-height: 1.7;
        max-width: 680px;
        margin: 0 auto;
    }

    /* Right Cards */
    .right-cards {
        width: 100%;
        gap: 50px;
        padding-bottom: 80px;
    }

    .card {
        position: sticky;
        min-height: 230px;
        padding: 35px;
        border-radius: 22px;
    }

    .card-1 {
        top: 100px;
    }

    .card-2 {
        top: 135px;
        margin-top: -60px;
    }

    .card-3 {
        top: 170px;
        margin-top: -60px;
    }

    .card-stat {
        font-size: 42px;
        line-height: 1.1;
        margin-bottom: 15px;
    }

    .card p {
        font-size: 15px;
        line-height: 1.7;
    }
}


/* =========================================
   MOBILE
   767px AND BELOW
========================================= */

@media (max-width: 767px) {

    .cards-stack-section {
        padding: 60px 18px;
    }

    .cards-container {
        display: flex;
        flex-direction: column;
        gap: 35px;
        width: 100%;
        max-width: 100%;
    }

    /* Left Heading */
    .left-content {
        width: 100%;
        position: relative;
        top: auto;
        text-align: center;
    }

    .left-content h2 {
        font-size: 30px;
        line-height: 1.25;
        margin-bottom: 18px;
    }

    .left-content p {
        font-size: 14px;
        line-height: 1.7;
        margin: 0 auto;
    }

    /* Right Cards */
    .right-cards {
        width: 100%;
        gap: 40px;
        padding-bottom: 60px;
    }

    .card {
        position: sticky;

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

        padding: 28px 22px;

        border-radius: 18px;
    }

    /* Sticky Stack */
    .card-1 {
        top: 80px;
    }

    .card-2 {
        top: 115px;
        margin-top: -45px;
    }

    .card-3 {
        top: 150px;
        margin-top: -45px;
    }

    .card-stat {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 12px;
    }

    .card p {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 0;
    }
}


/* =========================================
   SMALL MOBILE
   480px AND BELOW
========================================= */

@media (max-width: 480px) {

    .cards-stack-section {
        padding: 50px 15px;
    }

    .left-content h2 {
        font-size: 26px;
    }

    .left-content p {
        font-size: 13px;
    }

    .right-cards {
        gap: 35px;
    }

    .card {
        min-height: 190px;
        padding: 24px 18px;
        border-radius: 16px;
    }

    .card-stat {
        font-size: 25px;
    }

    .card p {
        font-size: 13px;
        line-height: 1.6;
    }

    .card-1 {
        top: 70px;
    }

    .card-2 {
        top: 100px;
        margin-top: -35px;
    }

    .card-3 {
        top: 130px;
        margin-top: -35px;
    }
}
/**/

.cards-stack-section {
  padding: 80px 20px;
  background-color: #ffffff;
}

.cards-container {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  gap: 50px;
  align-items: flex-start;
}

/* Left Content Sticky Setup */
.left-content {
  flex: 1;
  position: sticky;
  top: 120px; /* Adjust according to your navbar height */
}

.left-content h2 {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  color: #111;
}

/* Right Stacking Cards Setup */
.right-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 60px; /* Distance between cards scroll start */
  padding-bottom: 100px;
}

.card {
  position: sticky;
  padding: 40px;
  border-radius: 24px;
  min-height: 250px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Sticky top height & overlapping stacking order */
.card-1 {
  top: 120px;
  background-color: #f6f5f2;
  z-index: 1;
}

.card-2 {
  top: 160px; /* Offset to show top edge or overlay nicely */
  background-color: #e8dcd5;
  margin-top: -80px; /* Negative margin pulls card over previous one */
  z-index: 2;
}

.card-3 {
  top: 200px;
  background-color: #baff7a;
  margin-top: -80px;
  z-index: 3;
}

.card-stat {
  font-size: 56px;
  font-weight: 900;
  display: block;
  margin-bottom: 15px;
}


.service-hero{

    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:#fff;

}


/* Blur Shape */

.service-hero::before{

content:'';
position:absolute;
width:500px;
height:500px;
left:-150px;
bottom:-150px;
background:#24a859;
opacity:.15;
filter:blur(100px);
border-radius:50%;

}

.service-hero::after{

content:'';
position:absolute;
width:420px;
height:420px;
right:-120px;
top:-120px;
background:#24a859;
opacity:.08;
filter:blur(90px);
border-radius:50%;

}


.sub-title{

font-size:15px;
font-weight:700;
color:#20A44D;
letter-spacing:2px;
margin-right: 270px;

}

.hero-content h1{

font-size:55px;
font-weight:800;
line-height:1.15;
color:#09122b;
/* margin:15px 0; */
margin-right: 278px;

}

.hero-content h1 span{

display:block;
color:#20A44D;

}

.line{

width:90px;
height:5px;
background:#20A44D;
margin:25px 0;
border-radius:30px;

}

.hero-content p{

font-size:20px;
line-height:1.8;
color:#555;
max-width:520px;
text-align: start;
}


/* BUTTON */

.hero-btn{

display:inline-flex;
align-items:center;
gap:15px;
padding:18px 35px;
background:#20A44D;
color:#fff;
text-decoration:none;
border-radius:12px;
font-weight:600;
/* margin-top:35px; */
transition:.4s;
float: inline-start;
}

.hero-btn i{

width:42px;
height:42px;
background:#fff;
color:#20A44D;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
transition:.4s;

}

.hero-btn:hover{

transform:translateY(-5px);
box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.hero-btn:hover i{

transform:rotate(45deg);

}


/* IMAGE */

.hero-image{

position:relative;
text-align:center;

}

.main-image{

width:100%;
max-width:760px;
position:relative;
z-index:2;
animation:floatImage 5s ease-in-out infinite;
    border-radius: 45%;

}

.shape-circle{

position:absolute;
width:650px;
height:650px;
background:#e8f7ef;
border-radius:50%;
right:0;
top:50%;
transform:translateY(-50%);
z-index:1;

}


/* FLOAT CARD */

.floating-card{

position:absolute;
background:#fff;
padding:22px;
border-radius:18px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
z-index:5;
animation:floating 4s ease-in-out infinite;
margin-top: -60px;
    margin-left: -130px;
}

.card1{

top:70px;
left:80px;

}

.card2{

right:0;
bottom:60px;

}

.floating-card h5{

font-size:17px;
margin-bottom:8px;

}

.floating-card h3{

font-size:34px;
font-weight:700;
color:#20A44D;

}


/* IMAGE FLOAT */

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}


/* CARD FLOAT */

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}


/* RESPONSIVE */

@media(max-width:991px){

.service-hero{

padding:80px 0;

}

.hero-content{

text-align:center;
margin-bottom:50px;

}

.hero-content h1{

font-size:46px;

}

.hero-content p{

margin:auto;

}

.line{

margin:20px auto;

}

.card1{

left:20px;

}

.card2{

right:20px;

}

.shape-circle{

width:450px;
height:450px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:36px;

}

.hero-content p{

font-size:17px;

}

.hero-btn{

padding:15px 25px;

}

.card1,
.card2{

display:none;

}

.shape-circle{

width:320px;
height:320px;

}

}





/*==========================================
ABOUT SERVICES
==========================================*/

.about-services{
    position: relative;
    padding: 120px 0;
    background: #f8fbff;
    overflow: hidden;
}

.py-120{
    padding:120px 0;
}

/*==========================================
BACKGROUND SHAPES
==========================================*/

.shape{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.18;
    z-index:0;
}

.shape-1{
    width:320px;
    height:320px;
    background:#28d17c;
    top:-120px;
    left:-120px;
}

.shape-2{
    width:260px;
    height:260px;
    background:#4f46e5;
    right:-80px;
    top:80px;
}

.shape-3{
    width:250px;
    height:250px;
    background:#0ea5e9;
    bottom:-120px;
    left:40%;
}

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

.about-content{
    position:relative;
    z-index:5;
}

.section-badge{

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

    padding:10px 22px;

    border-radius:50px;

    background:#eafaf2;

    color:#16b364;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}

.section-badge i{
    font-size:14px;
}

.section-title{

    font-size:56px;

    font-weight:800;

    line-height:1.15;

    color:#111827;

    margin-bottom:25px;

}

.section-title span{

    color:#16b364;

}

.section-desc{

    font-size:17px;

    line-height:30px;

    color:#6b7280;

    margin-bottom:20px;

}

/*==========================================
BUTTONS
==========================================*/

.about-btns{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.theme-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:17px 34px;

    border-radius:60px;

    background:#16b364;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

}

.theme-btn:hover{

    background:#0d9b56;

    color:#fff;

    transform:translateY(-3px);

}

.video-btn{

    display:flex;

    align-items:center;

    gap:14px;

    color:#111827;

    text-decoration:none;

    font-weight:600;

}

.video-btn span{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

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

    color:#16b364;

    transition:.4s;

}

.video-btn:hover span{

    transform:scale(1.08);

}

/*==========================================
COUNTERS
==========================================*/

.counter-box{

    background:#fff;

    border-radius:18px;

    padding:22px;

    text-align:center;

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

    transition:.4s;

}

.counter-box:hover{

    transform:translateY(-8px);

}

.counter-box h3{

    font-size:42px;

    font-weight:700;

    color:#16b364;

    margin-bottom:10px;

}

.counter-box p{

    margin:0;

    color:#6b7280;

    font-size:15px;

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:991px){

.section-title{

font-size:42px;

}

.about-services{

padding:80px 0;

}

}

@media(max-width:576px){

.section-title{

font-size:34px;

}

.about-btns{

flex-direction:column;

align-items:flex-start;

}

.theme-btn{

width:100%;

justify-content:center;

}

}

/*==========================================
RIGHT IMAGE WRAPPER
==========================================*/

.about-image-wrapper{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

/* Main Image */

.main-image{
    position:relative;
    z-index:5;
}

.main-image img{

    width:100%;
    max-width:520px;
    border-radius:30px;

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

    transition:.5s;

}

.main-image:hover img{

    transform:translateY(-10px);

}

/*==========================================
BACKGROUND CIRCLE
==========================================*/

.bg-circle{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:linear-gradient(135deg,#16b364,#4f46e5);

    opacity:.08;

    z-index:0;

}

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

.dots{

    position:absolute;

    width:180px;

    height:180px;

    right:30px;

    top:30px;

    background-image:radial-gradient(#16b364 2px,transparent 2px);

    background-size:18px 18px;

    opacity:.35;

}

/*==========================================
FLOATING CARDS
==========================================*/

.floating-card{

    position:absolute;

    background:#fff;

    border-radius:18px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:

    0 20px 45px rgba(0,0,0,.08);

    transition:.4s;

    z-index:6;

}

.floating-card:hover{

    transform:translateY(-8px);

}

.floating-card i{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#16b364;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.floating-card h6{

    margin:0;

    font-size:17px;

    font-weight:700;

    color:#111827;

}

/* Card Positions */

.floating-card-1{

    top:40px;

    left:-20px;

}

.floating-card-2{

    right:-20px;

    top:220px;

}

.floating-card-3{

    bottom:40px;

    left:20px;

}

/*==========================================
FLOAT ANIMATION
==========================================*/

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.floating-card-1{

animation:floating 5s ease-in-out infinite;

}

.floating-card-2{

animation:floating 6s ease-in-out infinite;

}

.floating-card-3{

animation:floating 5.5s ease-in-out infinite;

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:991px){

.about-image-wrapper{

margin-top:70px;

min-height:auto;

}

.bg-circle{

width:380px;

height:380px;

}

.main-image img{

max-width:100%;

}

.floating-card{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin:18px auto;

width:100%;

max-width:320px;

}

.dots{

display:none;

}

}

@media(max-width:576px){

.bg-circle{

width:300px;

height:300px;

}

.floating-card{

padding:15px;

}

.floating-card h6{

font-size:15px;

}

.floating-card i{

width:45px;

height:45px;

font-size:18px;

}

}





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

.services-section{
    position:relative;
    padding:120px 0;
    background:#ffffff;
    overflow:hidden;
}

/*=============================
Heading
=============================*/

.services-section .section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:#e9fff4;

    color:#16b364;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.services-section .section-title{

    font-size:52px;

    font-weight:800;

    color:#111827;

    margin-bottom:20px;

    line-height:1.2;

}

.services-section .section-desc{

    max-width:700px;

    margin:auto;

    font-size:17px;

    line-height:30px;

    color:#6b7280;

}

/*=============================
Card
=============================*/

.service-card{

    position:relative;

    height:100%;

    background:#fff;

    border-radius:24px;

    padding:40px;

    border:1px solid #eef2f7;

    transition:.45s;

    overflow:hidden;

    box-shadow:

    0 15px 40px rgba(0,0,0,.05);

}

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:#16b364;

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.service-card:hover::before{

    transform:scaleX(1);

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.12);

}

/*=============================
Icon
=============================*/

.service-icon{

    width:75px;

    height:75px;

    border-radius:18px;

    background:#16b364;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;

    margin-bottom:30px;

    transition:.4s;

}

.service-card:hover .service-icon{

    transform:rotate(10deg) scale(1.1);

}

/*=============================
Content
=============================*/

.service-card h4{

    font-size:26px;

    font-weight:700;

    margin-bottom:18px;

    color:#111827;

}

.service-card p{

    color:#6b7280;

    line-height:28px;

    margin-bottom:22px;

}

.service-card ul{

    margin:0;

    padding:0;

    list-style:none;

}

.service-card ul li{

    padding:8px 0;

    color:#374151;

    font-size:15px;

}

.service-card ul li::before{

    content:"✔";

    color:#16b364;

    margin-right:10px;

}

.service-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    text-decoration:none;

    color:#16b364;

    font-weight:700;

}

.service-card a i{

    transition:.3s;

}

.service-card:hover a i{

    transform:translateX(6px);

}

/*=============================
Responsive
=============================*/

@media(max-width:991px){

.services-section{

padding:80px 0;

}

.services-section .section-title{

font-size:38px;

}

.service-card{

padding:30px;

}

}

@media(max-width:576px){

.services-section .section-title{

font-size:30px;

}

.service-card{

padding:25px;

}

}




/*@media(max-width:576px){*/
/*    background-color: #198754;*/
/*    margin-top: 15px;*/
/*    color: #ffffff;*/
/*    padding: 1.1rem 2.5rem;*/
/*    border-radius: 50px;*/
/*    font-weight: 600;*/
/*    text-decoration: none;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 10px;*/
/*    box-shadow: 0 10px 15px -3px rgba(25, 135, 84, 0.3);*/
/*    transition: all 0.3s ease;*/
/*}*/




/* =========================================================
   PRIVACY POLICY PAGE
   Digital View India 36T
   Fonts: Plus Jakarta Sans + Syne
========================================================= */

.privacy-page {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #172033;
    background: #f5f8fb;
}


/* =========================================================
   PRIVACY HERO
========================================================= */

.privacy-hero {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px 20px;
    text-align: center;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(29, 185, 91, 0.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06101d 0%,
            #081625 55%,
            #050d18 100%
        );
}

.privacy-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -180px;
    top: -270px;
    border: 1px solid rgba(30, 190, 96, 0.12);
    border-radius: 50%;
}

.privacy-hero::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    left: -180px;
    bottom: -250px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.privacy-hero-glow {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 20%;
    top: 35%;
    border-radius: 50%;
    background: rgba(28, 183, 89, 0.13);
    filter: blur(90px);
}

.privacy-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 850px;
}

.privacy-label {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 16px;

    border: 1px solid rgba(30, 190, 96, 0.25);
    border-radius: 50px;

    background: rgba(30, 190, 96, 0.08);

    color: #20c568;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.privacy-hero h1 {
    margin: 0 0 18px;

    color: #ffffff;

    font-family: "Syne", sans-serif;
    font-size: clamp(42px, 6vw, 68px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2px;
}

.privacy-hero h1 span {
    color: #20bb61;
}

.privacy-hero p {
    max-width: 650px;
    margin: 0 auto;

    color: #a9b5c6;

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

.privacy-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;

    margin-top: 25px;

    font-size: 10px;
}

.privacy-breadcrumb a {
    color: #20bd63;
    text-decoration: none;
    transition: 0.3s ease;
}

.privacy-breadcrumb a:hover {
    color: #ffffff;
}

.privacy-breadcrumb span {
    color: #667386;
}

.privacy-breadcrumb strong {
    color: #aab5c5;
    font-weight: 500;
}


/* =========================================================
   CONTENT AREA
========================================================= */

.privacy-content-area {
    padding: 80px 0;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(25, 169, 87, 0.035),
            transparent 25%
        ),
        #f5f8fb;
}

.privacy-container {
    width: min(1180px, 92%);
    margin: auto;

    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);

    gap: 45px;

    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.privacy-sidebar {
    position: sticky;
    top: 30px;
}

.privacy-menu {
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e2e9f0;
    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(26, 48, 75, 0.07);
}

.privacy-menu h3 {
    margin: 3px 12px 14px;

    color: #111b2c;

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

.privacy-menu a {
    display: block;

    margin: 3px 0;
    padding: 12px 14px;

    border-radius: 10px;

    color: #687587;

    font-size: 11px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.privacy-menu a:hover {
    color: #149b50;
    background: #effaf4;
    transform: translateX(3px);
}

.privacy-menu a.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #20b85f,
            #119447
        );

    box-shadow:
        0 8px 22px rgba(25, 169, 87, 0.22);
}

.privacy-menu a.active:hover {
    color: #ffffff;
    transform: none;
}


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

.privacy-help {
    position: relative;
    overflow: hidden;

    margin-top: 20px;
    padding: 25px 21px;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(29, 185, 91, 0.18),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #06101e,
            #0c1a2c
        );

    box-shadow:
        0 15px 35px rgba(7, 16, 33, 0.12);
}

.privacy-help::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -55px;
    bottom: -55px;

    border: 1px solid rgba(31, 190, 96, 0.18);
    border-radius: 50%;
}

.privacy-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 14px;

    border: 1px solid rgba(31, 190, 96, 0.25);
    border-radius: 50%;

    background: rgba(31, 190, 96, 0.08);

    color: #20c568;

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

.privacy-help h3 {
    margin: 0 0 8px;

    color: #ffffff;

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

.privacy-help p {
    margin: 0 0 17px;

    color: #9ba9bb;

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

.privacy-help a {
    color: #20c568;

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

    text-decoration: none;

    transition: 0.3s ease;
}

.privacy-help a i {
    margin-left: 5px;
    font-size: 9px;
}

.privacy-help a:hover {
    color: #ffffff;
}


/* =========================================================
   PRIVACY ARTICLE
========================================================= */

.privacy-article {
    min-width: 0;

    padding: 48px;

    background: #ffffff;

    border: 1px solid #e1e9f0;
    border-radius: 22px;

    box-shadow:
        0 15px 45px rgba(25, 49, 77, 0.06);
}


/* =========================================================
   LAST UPDATED
========================================================= */

.privacy-updated {
    display: inline-block;

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

    border: 1px solid #d8eee1;
    border-radius: 50px;

    background: #effaf4;

    color: #15984d;

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


/* =========================================================
   PRIVACY SECTIONS
========================================================= */

.privacy-section {
    margin-bottom: 30px;
    padding-bottom: 30px;

    border-bottom: 1px solid #edf1f5;
}

.privacy-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.privacy-section h2 {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0 0 16px;

    color: #101b2d;

    font-family: "Syne", sans-serif;

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

.privacy-section h2 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 38px;
    height: 38px;

    border-radius: 10px;

    background: #effaf4;

    border: 1px solid #d8eee1;

    color: #18a754;

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

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

.privacy-section p {
    margin: 0 0 13px;

    color: #657286;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.95;
}

.privacy-section p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LIST
========================================================= */

.privacy-section ul {
    margin: 15px 0 16px;

    padding-left: 21px;
}

.privacy-section li {
    margin-bottom: 8px;
    padding-left: 5px;

    color: #657286;

    font-size: 12px;
    line-height: 1.85;
}

.privacy-section li:last-child {
    margin-bottom: 0;
}

.privacy-section li::marker {
    color: #19aa58;
}


/* =========================================================
   CONTACT BOX
========================================================= */

.privacy-contact-box {
    margin-top: 20px;
    padding: 21px;

    border: 1px solid #dcefe4;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f5fbf7,
            #eef8f2
        );

    color: #5d6a7c;

    font-size: 11px;
    line-height: 1.9;
}

.privacy-contact-box strong {
    display: block;

    margin-bottom: 10px;

    color: #172235;

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

.privacy-contact-box div {
    margin-bottom: 6px;
}

.privacy-contact-box div:last-child {
    margin-bottom: 0;
}

.privacy-contact-box i {
    width: 18px;

    color: #18a754;

    font-size: 10px;
}

.privacy-contact-box a {
    color: #159b4e;

    text-decoration: none;

    transition: 0.3s ease;
}

.privacy-contact-box a:hover {
    color: #087d3a;
}


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

.privacy-cta {
    padding: 0 0 80px;

    background: #f5f8fb;
}

.privacy-cta-inner {
    width: min(1080px, 92%);
    margin: auto;

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

    gap: 30px;

    padding: 40px 45px;

    border: 1px solid #dce9e1;
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(25, 169, 87, 0.09),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #ffffff,
            #f0f8f4
        );

    box-shadow:
        0 12px 40px rgba(20, 48, 75, 0.06);
}

.privacy-cta-inner > div {
    flex: 1;
}

.privacy-cta-inner > div > span {
    color: #18a754;

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

    letter-spacing: 1.4px;
}

.privacy-cta-inner h2 {
    margin: 6px 0;

    color: #111c2d;

    font-family: "Syne", sans-serif;

    font-size: 25px;
    font-weight: 700;
    line-height: 1.35;
}

.privacy-cta-inner p {
    margin: 0;

    color: #788494;

    font-size: 10px;
}

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

    flex-shrink: 0;

    padding: 14px 24px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #20b85f,
            #119447
        );

    color: #ffffff !important;

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

    text-decoration: none;

    box-shadow:
        0 9px 25px rgba(25, 169, 87, 0.25);

    transition: 0.3s ease;
}

.privacy-cta-btn i {
    margin-left: 8px;
    font-size: 9px;
}

.privacy-cta-btn:hover {
    color: #ffffff !important;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(25, 169, 87, 0.32);
}


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

.footer-demo {
    padding: 35px 20px;

    background: #050b15;

    text-align: center;
}

.footer-demo p {
    margin: 0;

    color: #718096;

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

    font-size: 11px;
}


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

@media (max-width: 1000px) {

    .privacy-container {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 25px;
    }

    .privacy-article {
        padding: 38px;
    }

    .privacy-section h2 {
        font-size: 18px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .privacy-container {
        grid-template-columns: 1fr;
    }

    .privacy-sidebar {
        position: static;
    }

    .privacy-help {
        display: none;
    }

    .privacy-menu {
        display: grid;

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

        gap: 5px;
    }

    .privacy-menu h3 {
        grid-column: 1 / -1;
    }

}


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

@media (max-width: 600px) {

    .privacy-hero {
        min-height: 320px;
        padding: 60px 18px;
    }

    .privacy-label {
        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .privacy-hero h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .privacy-hero p {
        font-size: 11px;
        line-height: 1.8;
    }

    .privacy-breadcrumb {
        font-size: 9px;
    }

    .privacy-content-area {
        padding: 45px 0 55px;
    }

    .privacy-container {
        width: 92%;
    }

    .privacy-menu {
        display: block;
        padding: 14px;
    }

    .privacy-menu h3 {
        margin: 4px 10px 10px;
    }

    .privacy-menu a {
        padding: 11px 12px;
    }

    .privacy-article {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .privacy-updated {
        margin-bottom: 25px;
        font-size: 8px;
    }

    .privacy-section {
        margin-bottom: 25px;
        padding-bottom: 25px;
    }

    .privacy-section h2 {
        gap: 9px;
        font-size: 17px;
    }

    .privacy-section h2 span {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 8px;
    }

    .privacy-section p,
    .privacy-section li {
        font-size: 11px;
        line-height: 1.85;
    }

    .privacy-section ul {
        padding-left: 18px;
    }

    .privacy-contact-box {
        padding: 17px;
        font-size: 10px;
    }

    .privacy-cta {
        padding-bottom: 50px;
    }

    .privacy-cta-inner {
        width: 92%;

        flex-direction: column;
        align-items: flex-start;

        padding: 28px 22px;

        border-radius: 18px;
    }

    .privacy-cta-inner h2 {
        font-size: 20px;
    }

    .privacy-cta-inner p {
        font-size: 10px;
        line-height: 1.7;
    }

    .privacy-cta-btn {
        width: 100%;
    }

}


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

@media (max-width: 380px) {

    .privacy-hero h1 {
        font-size: 33px;
    }

    .privacy-article {
        padding: 24px 16px;
    }

    .privacy-section h2 {
        font-size: 16px;
    }

    .privacy-section p,
    .privacy-section li {
        font-size: 10.5px;
    }

}