/* Reset basic styles */
* {
    box-sizing: border-box;
    font-family: 'Instrument Sans', sans-serif;
}



body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Instrument Sans', sans-serif;
    overflow-x: clip;
    background:#ffffff !important;

}

img,
video {
    max-width: 100%;
    display: block;
}

/* SAFE WRAPPER */
.page-wrapper {
    width: 100%;
    overflow-x: clip;
    /* 🔥 BEST FIX (modern safe version) */
}

.cta-button-1 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #0978FD, #054897);
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1;
}

.cta-button-1::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.45s ease;
    z-index: -1;
}

.cta-button-1:hover {
    box-shadow: 0px 0px 10px #005ed9;
}

.cta-button-1:hover::before {
    transform: scaleY(1);
}


.hero {
    width: 100%;
    height: 45vh;
    /* responsive height */
    min-height: 300px;
    max-height: 500px;
    background-image: url('assets/images/about1.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 36, 94, 1) 0%, rgba(0, 36, 94, 0.8) 30%, rgba(0, 36, 94, 0) 70%);
    display: flex;
    align-items: center;
}

.container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}

.hero-content {
    color: white;
    max-width: 700px;
    /* prevents text stretching on large screens */
}

.hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* responsive font */
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.breadcrumb {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: rgba(255, 255, 255, 0.8);
}

.breadcrumb a {
    color: white;
    text-decoration: none;
}

.breadcrumb span {
    margin: 0 10px;
    font-size: 0.9rem;
}

/* ===== Large Screens (1400px+) ===== */
@media (min-width: 1400px) {
    .hero {
        height: 50vh;
    }
}

/* ===== Laptop (1200px) ===== */
@media (max-width: 1200px) {
    .hero {
        height: 42vh;
    }
}

/* ===== Small Laptop / Tablet Landscape (1000px) ===== */
@media (max-width: 1000px) {
    .hero {
        height: 40vh;
    }

    .hero-content {
        max-width: 600px;
    }
}

/* ===== Tablet ===== */
@media (max-width: 768px) {
    .hero {
        height: 350px;
    }

    .hero-overlay {
        background: rgba(0, 36, 94, 0.75);
        justify-content: center;
        text-align: center;
        padding: 0 15px;
    }

    .hero-content {
        max-width: 100%;
    }
}

/* ===== Mobile ===== */
@media (max-width: 480px) {
    .hero {
        height: 300px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .breadcrumb {
        font-size: 0.85rem;
    }
}



/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;600;700&family=Inter:wght@400;700&display=swap');

/* =========================
   SECTION BASE
========================= */
.story-section {
    padding: 40px 20px;
    background-color: #ffffff;

}

/* STICKY LEFT SIDE */
.story-left {
    position: sticky;
    top: 120px; /* adjust based on your header height */
    align-self: start;
    height: fit-content;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 50px);
    align-items: start;
}

/* =========================
   LEFT SIDE
========================= */
.sub-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #4A90E2;
    margin-bottom: 15px;
}

.main-heading-about {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 35px);
    line-height: 122%;
    text-transform: capitalize;
    color: #000;
    margin: 10px 0 25px;
}

.main-heading-about .highlight {
    font-weight: 700;
    color: #0066FF;
}

.description {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(14px, 1.2vw, 15px);
    line-height: 1.6;
    color: #555;
    margin-bottom: 40px;
}

/* =========================
   IMAGE
========================= */
.image-container {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 538 / 385;
    border-radius: 28px;
    overflow: hidden;
    margin-top: 30px;
}

.story-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.story-image:hover {
    transform: scale(1.06);
    filter: brightness(0.85) contrast(1.1);
}

/* =========================
   RIGHT SIDE
========================= */
.story-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}


.timeline-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    margin-bottom: 7px;
}

/* TEXT */
.timeline-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* =========================
   TIMELINE CARD (SAFE FIX)
========================= */
.timeline-card {
    background-color: #f4f4f4;
    display: flex;
    align-items: flex-start;
    position: relative;
    cursor: pointer;

    min-height: 100px;
    box-sizing: border-box;

    border-radius: 15px;
    padding: 16px 22px;
    gap: 20px;
    

    /* base shadow */
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.05),
        0 12px 25px rgba(0, 0, 0, 0.06);

    /* 🔥 smooth animation */
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;

    transform-origin: center;
    perspective: 1000px;

    overflow: hidden;
}



/* Hover (NO layout change effects) */
.story-right .timeline-card:hover {
    transform: translateY(-4px);

     box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08),
        0 20px 40px rgba(0, 0, 0, 0.10);


    background-color: #ffffff;
}

/* =========================
   TOP LINE ANIMATION (SAFE)
========================= */
.timeline-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    height: 2px;
    width: 100%;

    background: linear-gradient(90deg, #0066FF, #00C6FF);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.35s ease;

    pointer-events: none;
}

.story-right .timeline-card:hover::before {
    transform: scaleX(1);
}

/* =========================
   YEAR BOX
========================= */
.year-box {
    background-color: #0066FF;
    color: white;

    font-family: 'Instrument Sans', sans-serif;
    font-weight: 700;

    font-size: clamp(14px, 1.5vw, 18px);

    min-width: 65px;
    height: 65px;

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

    border-radius: 12px;

    flex-shrink: 0;
}

/* =========================
   RESPONSIVE
========================= */
@media (min-width: 1400px) {
    .story-grid {
        max-width: 1300px;
        margin: 0 auto;
    }
}

@media (max-width: 1000px) {
    .story-grid {
        grid-template-columns: 1fr;
    }

    .image-container {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .story-grid {
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .main-heading-about {
        font-size: 24px;
    }

    .timeline-card {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        align-items: center;
    }

    .year-box {
        width: 55px;
        height: 55px;
    }
      .timeline-content h3 {
        font-size: 15px;
    }

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











/* third section ************************************************************/



.vision-mission-section {
    width: 100%;
    min-height: 469px;
    /* Dark blue overlay + background image */
    background: linear-gradient(rgba(0, 36, 94, 0.85), rgba(0, 36, 94, 0.85)), url('assets/images/about2.png');
    background-size: cover;
    background-position: center;
    padding: 60px 0;
    display: flex;
    align-items: center;
    color: #ffffff;
}

.section-main-heading {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 35px;
    line-height: 40px;
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 60px;
    margin-top: 0;
}

.cards-wrapper {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Glassmorphism Transparent Card */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 40px 30px;
    flex: 1;
    min-width: 300px;
    max-width: 590px;
    max-height: 350px;

    /* Remove the entrance animation */
    transform: translateY(0);
    opacity: 1;

    /* Keep hover & smooth transitions */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}


/* Hover effect: zoom, lift, subtle glow */
.glass-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
}

/* Entrance animation trigger: when visible */
.glass-card.show {
    transform: translateY(0);
    opacity: 1;
}

.card-sub-heading {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 27px;
    text-transform: uppercase;
    color: #0978FD;
    display: block;
    margin-bottom: 15px;
}

.card-title {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 10px;
    margin-top: 0;
}


.card-description {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 161%;
    color: rgba(255, 255, 255, 0.8);
}

/* Fully Responsive adjustments */
@media (max-width: 992px) {
    .cards-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .glass-card {
        width: 100%;
        max-width: 100%;
        max-height: 350px;

    }
}

@media (max-width: 480px) {
    .section-main-heading {
        font-size: 28px;
        line-height: 34px;
    }

    .glass-card {
        padding: 30px 20px;
        min-height: fit-content;
    }
}










/* 4th section ************************************************ */


.wwd-section {
    padding: 40px 0 80px 0;
    background-color: #ffffff;
    text-align: center;
}

.wwd-main-title {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 35px;
    line-height: 40px;
    margin-bottom: 50px;
    color: #000000;
    text-transform: capitalize;
    margin-top: 0;
}

.wwd-cards-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* Space between cards */
    flex-wrap: nowrap;
    /* Keeps 3 in a row on desktop */
}

/* Card with your exact specifications */
.wwd-service-item {
    width: 405px;
    height: 187px;
    background-color: #EDEDED;
    border: 1px solid #DADADA;
    border-radius: 24px;
    padding: 30px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.05),
        0 12px 30px rgba(0, 0, 0, 0.08);
}


/* Hover effect */
.wwd-service-item:hover {
    transform: translateY(-6px);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12),
        0 20px 40px rgba(0, 0, 0, 0.10);
}

.wwd-card-heading {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 35px;
    margin-bottom: 8px;
    color: #000000;
}

.wwd-card-text {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 26px;
    color: #4B4B4B;
}

/* Fully Responsive Adjustments */
@media (max-width: 1200px) {
    .wwd-cards-row {
        flex-wrap: wrap;
        /* Allows wrapping on smaller screens */
        gap: 25px;
    }

    .wwd-service-item {
        max-width: 405px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .wwd-section {
        padding: 50px 0;
    }

    .wwd-service-item {
        height: auto;
        /* Height adapts to text on mobile */
        min-height: 187px;
        padding: 25px;
    }

    .wwd-main-title {
        font-size: 28px;
    }
}








/* fifth section************************************************************************************ */

.process-section {
    width: 100%;
    background: url('assets/images/about3.jpg');
    background-size: cover;
    background-position: center;
    padding: clamp(20px, 6vw, 40px) 20px;
    color: #ffffff;
}

/* HEADER */
.process-header {
    text-align: left;
    margin: 0 auto 40px auto;
    max-width: 1300px;
}

.process-badge {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    color: #0978FD;
    display: block;
    margin-bottom: 20px;
}

.process-main-title {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.2;
    margin: 0;
}

.process-main-desc {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 5px 0;
}

/* GRID */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 24px);
    max-width: 1300px;
    margin: 0 auto;
}

/* CARD */
.process-card {
    position: relative;
    width: 100%;
    max-width: 297px;
    min-height: 320px;
    background: #F5F5F50F;

    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: clamp(20px, 3vw, 40px) clamp(18px, 2.5vw, 30px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    justify-self: center;
}

/* Hover */
.process-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 123, 255, 0.15);
    border: none;
}

/* Border Effect */
.process-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(120deg, transparent, rgba(0, 123, 255, 0.7), transparent);
    background-size: 200% 100%;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}

.process-card:hover::before {
    opacity: 1;
    animation: flashBorder 1s linear;
}

@keyframes flashBorder {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* CONTENT */
.card-number {
    width: clamp(50px, 5vw, 65px);
    height: clamp(50px, 5vw, 65px);
    background: #0978FD;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    margin-bottom: 25px;
}

.card-title {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 1.8vw, 26px);
    line-height: 1.3;
    margin: 0;
}

.card-info {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* ===== 1300px ===== */
@media (max-width: 1300px) {
    .process-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .process-section {
        padding: 60px 16px;
    }

    .process-header {
        margin-bottom: 40px;
    }

    .process-main-title {
        font-size: 26px;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .process-card {
        max-width: 100%;
        min-height: auto;
        align-items: center;
        text-align: center;
    }

    .card-number {
        margin-bottom: 18px;
    }

    .card-title {
        margin-bottom: 10px;
    }
}









.trust-section {
    padding: 80px 0 50px 0;
    background: #fff;
}

.trust-main-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(25px, 4vw, 40px);
    align-items: start;
    max-width: 1300px;

}

/* Left */
.trust-left-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trust-badge {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #0978FD;
    margin-bottom: 15px;
}

.trust-title {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 35px);
    line-height: 1.2;
    margin: 20px 0;
}

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

.trust-card p {
    margin-top: 3px;
}

.trust-card {
    width: 100%;
    max-width: 100%;
    height: 142px;

    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 23px;

    padding: 25px 35px;

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

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

    box-shadow:
        0 6px 15px rgba(0,0,0,0.05),
        0 2px 6px rgba(0,0,0,0.04);

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;
}


.trust-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 23px;
    padding: 1.5px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(9,120,253,0.9),
        transparent
    );

    background-size: 200% 100%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}


.trust-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 40px rgba(9,120,253,0.18),
        0 10px 25px rgba(0,0,0,0.08);

    border: none; /* 🔥 important */
}

.trust-card:hover::before {
    opacity: 1;
    animation: flashBorder 0.9s linear;
}

/* activate glow */
.trust-card:hover::before {
    opacity: 1;
}

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


.trust-card h3 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 1.8vw, 22px);
    margin-bottom: 8px;
}

.trust-card p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    color: #666;
}

/* Right Card */
.trust-right-card {
    width: 100%;
    max-width: 580px;
    height: 710px;
    background:
        linear-gradient(to top right,
            rgba(173, 216, 230, 0.7) 0%,
            rgba(173, 216, 230, 0.5) 40%,
            rgba(255, 255, 255, 0.6) 70%,
            rgba(255, 255, 255, 0.9) 100%),
        url('assets/images/about4.jpg');
    background-size: cover;
    border-radius: 23px;
    border: 1px solid #EEE;
    padding: clamp(30px, 4vw, 50px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    justify-self: end;
    /* ALIGN RIGHT FIX */
    font-family: 'Instrument Sans', sans-serif;
}

/* Right Content */
.culture-badge {
    color: #0978FD;
    font-size: 14px;
    text-transform: uppercase;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
}

.culture-title {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.2;
    margin: 20px 0;
}

.culture-desc {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(13px, 1.1vw, 14px);
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
    letter-spacing: 0.3px; /* 🔥 NEW */
    
}

/* Pills */
.status-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

.status-pill {
    background: #0056D2;
    color: white;
    padding: 12px;
    border-radius: 26px;
    text-align: center;
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    letter-spacing: 0.2px;
}

.status-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 86, 210, 0.3);
}

/* Bottom box */
.bottom-info-box {
    background: white;
    padding: 30px;
    border-radius: 20px;
    font-family: 'Instrument Sans';
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Footer */
.values-footer {
    text-align: center;
    margin-top: 50px;
}

.values-title {
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: clamp(20px, 2vw, 25px);
    margin-bottom: 40px;
    font-size: 35px;
}

.values-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.about-trust-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;

}

.value-item {
    flex: 1 1 240px;
    max-width: 264px;
    height: 66px;
    background: #F4F4F4;
    border: 1px solid #CECECE;
    border-radius: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: clamp(16px, 1.5vw, 21px);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 10px 20px rgba(0, 0, 0, 0.10);


      transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    }

.value-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.value-icon {
    width: 24px;
    height: 24px;
    fill: #000000;
    flex-shrink: 0;
}

.value-item:hover .value-icon {
    transform: scale(1.2);
    fill: #4389f3;
}

/* ===== 1000px ===== */
@media (max-width: 1000px) {
    .trust-main-grid {
        grid-template-columns: 1fr;
    }

    .trust-right-card,
    .trust-card {
        max-width: 100%;
        height: auto;
    }

    .trust-right-card {
        justify-self: stretch;
        /* reset alignment */
    }
}

/* ===== Tablet ===== */
@media (max-width: 768px) {
    .status-pill-grid {
        grid-template-columns: 1fr;
    }
}



.value-item:hover p {
    color: #3379e4;
}

.tech-section {
    text-align: center;
    /* padding: 60px 20px; */
}

.tech-subtitle {
    font-family: "Instrument Sans";
    font-weight: 700;
    font-size: 15px;
    line-height: 27px;
    text-transform: uppercase;
    color: #0978FD;
}



.tech-title {
    font-family: "Instrument Sans";
    font-weight: 600;
    font-size: 35px;
    line-height: 41px;
    margin: 10px 0 30px;
}

/* Tabs */
.tech-tabs {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.tab-btn {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 27px;
    color: #444;
    cursor: pointer;
    position: relative;
    padding-bottom: 6px;
}

/* underline */
.tab-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: #0978FD;
    transition: 0.3s;
}

.tab-btn.active {
    color: #0978FD;
    font-weight: 600;
}

.tab-btn.active::after {
    width: 100%;
}

/* Grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: auto;
}

.tech-card {
    background: #EDEDED;
    border-radius: 23px;
    padding: 25px;
    width: 209px;
    height: 145px;
}

.tech-card img {
    width: 40px;
    margin-bottom: 10px;
}

/* Hide content */
.tech-content {
    display: none;
}

.tech-content.active {
    display: block;
}




.faq-wrapper {
    padding: 20px 20px;
    padding-bottom: 30px;
    background-color: #ffffff;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.faq-inner {
    /* max-width: 1050px; */
    max-width: 1300px;
    padding: 0 20px;
    margin: 20px  auto 0 auto;
}

.sub-text {
    color: #0978FD;
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 0.8px;
}

.main-title {
    font-size: 36px;
    font-weight: 700;
    /* color: white; */
    margin-bottom: 30px;
    margin-top: 0;
}

.faq-list {
    text-align: left;
}

.faq-box {
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    transition: all 0.35s ease;
}

.faq-header {
    padding: 12px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #B4B4B41F;
    cursor: pointer;
    user-select: none;
}

.faq-header p {
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    color: #222;
    font-weight: 500;
    transition: color 0.3s ease;
}

.plus-icon {
    width: 35px;
    height: 35px;
    /* min-width: 48px; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    box-shadow: 0 8px 18px rgba(5, 72, 151, 0.25);
    transition: all 0.3s ease;
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #ffffff;
}

.faq-body-content {
    padding: 0 28px 28px;
    margin-top: 20px;
}

.faq-label {
    display: inline-block;
    padding: 2px 15px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 18px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
}

.faq-body-content p {
    margin: 0 0 16px;
    padding: 18px 20px;
    background: #f5f7fb;
    border-radius: 6px;
    color: #333;
    font-size: 17px;
    line-height: 1.8;
}

.faq-body-content p:last-child {
    margin-bottom: 0;
}

.faq-box.active .faq-header {
    background: #000;
}

.faq-box.active .faq-header p {
    color: #ffffff;
}

.faq-box.active .plus-icon {
    background: #ffffff;
    color: #054897;
    box-shadow: none;
}

@media (max-width: 768px) {
    .faq-wrapper {
        padding: 60px 15px;
    }

    .main-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .faq-header {
        padding: 18px 16px;
        gap: 12px;
    }

    .faq-header p {
        font-size: 16px;
    }

    .plus-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 24px;
    }

    .faq-body-content {
        padding: 0 16px 20px;
    }

    .faq-body-content p {
        font-size: 15px;
        line-height: 1.6;
        padding: 14px 15px;
    }
}













/* SECTION 1: PARTNERS */
.partners-section {
    width: 100%;
    padding: clamp(40px, 6vw, 80px) 20px;
    background: url('assets/images/about3.jpg') center bottom / cover no-repeat;

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

/* HEADER */
.partners-header {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 3vw, 35px);
    line-height: 1.2;
    color: white;
    margin-bottom: clamp(20px, 4vw, 40px);
    text-align: center;
}

/* LOGO ROW */
.partners-logo-row {
    display: flex;
    flex-wrap: wrap;
    /* IMPORTANT */
    justify-content: center;
    gap: clamp(12px, 2vw, 20px);
}

/* BOX */
.partner-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: clamp(10px, 1.5vw, 16px) clamp(16px, 2vw, 24px);
    border-radius: 999px;
    background: white;

    min-width: 160px;
    max-width: 240px;
    width: 100%;

    transition: all 0.3s ease;
    cursor: pointer;
}

/* HOVER */
.partner-box:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* IMAGE */
.partner-box img {
    width: clamp(28px, 4vw, 50px);
    height: clamp(28px, 4vw, 50px);
    object-fit: contain;
}

.container-partner {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}

/* TEXT */
.partner-box span {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 20px);
    color: #000;
}

/* ===== MOBILE ===== */
@media (max-width: 480px) {
    .partners-logo-row {
        flex-direction: column;
        align-items: center;
    }

    .partner-box {
        width: 100%;
        max-width: 280px;
    }
}











/* SECTION 2: GLOBAL IMPACT */
.impact-section {
    width: 100%;
    background: #F9F9FD;

    /* margin: 10px auto; */
    padding: clamp(50px, 6vw, 60px) 20px;
}

/* GRID */
.impact-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(30px, 5vw, 60px);
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
}

/* Background image */
.impact-grid::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 10%;
    width: clamp(200px, 30vw, 450px);
    height: clamp(200px, 30vw, 450px);
    background: url('assets/images/about5.png') no-repeat;
    background-size: contain;
    opacity: 0.15;
    z-index: 0;
}

/* Keep content above */
.impact-grid>* {
    position: relative;
    z-index: 1;
}

/* LEFT CONTENT */
.impact-sub {
    font-family: 'Instrument Sans';
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #0978FD;
    margin-bottom: 15px;
}

.impact-main {
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: clamp(26px, 3vw, 35px);
    line-height: 1.3;
    margin: 17px 0;
}

.impact-desc {
    font-family: 'Instrument Sans';
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
}

.impact-btn {
    width: fit-content;
    min-width: 220px;
    padding: 12px 24px;
    background: linear-gradient(90deg, #0978FD 0%, #054897 100%);
    border-radius: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: 15px;
    gap: 10px;
}

/* RIGHT GRID */
.impact-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 20px);
}

/* COMMON CARD */
.impact-card-1,
.impact-card-2,
.impact-card-3,
.impact-card-4 {
    width: 100%;
    aspect-ratio: 3 / 2;
    /* 🔥 responsive height */
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    animation: floatCard 6s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Images */
.impact-card-1 {
    background-image: url('assets/images/northAmerica.jpg');
}

.impact-card-2 {
    background-image: url('assets/images/asia.jpg');
}

.impact-card-3 {
    background-image: url('assets/images/middleEast.jpg');
}

.impact-card-4 {
    background-image: url('assets/images/europe.jpg');
}

/* Hover */
.impact-card-1:hover,
.impact-card-2:hover,
.impact-card-3:hover,
.impact-card-4:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

/* Floating animation */
@keyframes floatCard {

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

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

/* ===== 1000px ===== */
@media (max-width: 1000px) {
    .impact-grid {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .impact-right {
        max-width: 500px;
        margin: 0 auto;
    }

    .impact-grid::after {
        display: none;
        /* hide bg on small */
    }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .impact-section {
        padding: 50px 16px;
    }

    .impact-main {
        font-size: 24px;
    }

    .impact-right {
        grid-template-columns: 1fr;
    }

    .impact-btn {
        width: 100%;
        justify-content: center;
    }
}











/* .leadership-section {
    padding: 0 0 20px 0;
    background-color: #ffffff;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
} */
/* SECTION TITLE */
.leadership-main-title {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 35px);
    line-height: 1.2;
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 60px);
    color: #000;
    text-transform: capitalize;
    margin-top: 0;
}

/* GRID */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* CARD */
.leadership-card {
    width: 100%;
    max-width: 300px;
    min-height: 260px;
    /* flexible instead of fixed */
    background: #EDEDED;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(25px, 3vw, 40px) 15px;
    margin: 0 auto;
    text-align: center;

    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}

/* HOVER */
.leadership-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 102, 255, 0.15);
    border: 2px solid #0066FF;
}

/* PROFILE IMAGE */
.profile-circle {
    width: clamp(80px, 8vw, 110px);
    height: clamp(80px, 8vw, 110px);
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
}

.profile-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TEXT */
.leader-name {
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.2;
    margin-bottom: 5px;
    color: #000;
}

.leader-role {
    font-family: 'Instrument Sans';
    font-weight: 500;
    font-size: clamp(14px, 1.2vw, 16px);
    color: #666;
}

/* ===== 1200px ===== */
@media (max-width: 1200px) {
    .leadership-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== 900px ===== */
@media (max-width: 900px) {
    .leadership-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
    .leadership-grid {
        grid-template-columns: 1fr;
        padding: 0 16px 30px;
    }

    .leadership-card {
        max-width: 100%;
        min-height: auto;
        padding: 25px 15px;
    }
}










/* website development ******************************************************* */

:root {
    --bg-blue: #002878;
}

/* =========================
   HERO SECTION
========================= */
.hero-section-2 {
    background-color: var(--bg-blue);
    padding: clamp(60px, 6vw, 80px) 0;
    min-height: 607px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

/* =========================
   CONTAINER
========================= */
.container-2 {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;

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

    gap: clamp(30px, 5vw, 80px);
}

/* =========================
   LEFT SIDE
========================= */
.content-left-2 {
    flex: 1;
    min-width: 300px;
    padding-right: clamp(0px, 3vw, 40px);
}

/* BADGE */
.top-badge {
    width: fit-content;
    height: 30px;

    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);

    color: #fff;

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

    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;

    margin-bottom: 30px;
    padding: 2px 10px;
}

.top-badge-1 {
    width: fit-content;
    height: 30px;

    border-radius: 25px;
    background: #FFFFFF14;

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

    color: #4CA8FF;


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

    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;

    margin-bottom: 30px;
    padding: 2px 10px;
}


/* HEADING */
.main-heading-2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;

    font-size: clamp(30px, 4vw, 53px);
    line-height: 1.2;

    color: #fff;

    margin-bottom: 25px;
}
.main-heading-2-ui-ux {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;

    font-size: clamp(30px, 4vw, 53px);
    line-height: 1.2;

    color: #fff;
    width: 700px;
    margin-bottom: 25px;
}

.main-heading-2-seoChatGPT {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin-top: 0;
    font-size: clamp(30px, 4vw, 53px);
    line-height: 1.2;

    color: #fff;

    margin-bottom: 25px;
}


/* GRADIENT TEXT */
.gradient-text {
    background: linear-gradient(90deg, #0978FD 0%, #00E2EE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.description-2 {
    font-family: 'Instrument Sans', sans-serif;

    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;

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

    margin-bottom: 40px;
}

/* ================= BUTTONS ================= */
.btn-web-dev {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.chatgptSeoHeading {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* PRIMARY BUTTON */
.btn-web-dev-primary {
    position: relative;
    overflow: hidden;

    background: linear-gradient(90deg, #0978FD, #054897);
    color: #fff;

    padding: 15px 30px;
    border-radius: 50px;

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

    cursor: pointer;

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

    text-decoration: none;

    z-index: 1;
}

.btn-web-dev-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;

    transform: scaleY(0);
    transform-origin: bottom;

    transition: transform 0.45s ease;

    z-index: -1;
}

.btn-web-dev-primary:hover {
    box-shadow: 0px 0px 10px #005ed9;
}

.btn-web-dev-primary:hover::before {
    transform: scaleY(1);
}

/* SECONDARY BUTTON */
.btn-web-dev-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(8px);

    padding: 14px 28px;
    border-radius: 30px;

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

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-web-dev-secondary:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}

/* ================= RIGHT SIDE ================= */
.content-right-2 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ================= IMAGE SYSTEM (FIXED LIKE DESIGN) ================= */

/* WRAPPER = FIXED SIZE */
.hero-image-wrapper {
    position: relative;

    width: 568px;
    height: 341px;

    max-width: 100%;
}

/* BACKGROUND SHAPE */
.hero-image-bg {
    position: absolute;

    width: 100%;
    height: 297px;

    top: 60px;
    left: -60px;

    background: linear-gradient(180deg, #0381E6 0%, rgba(5, 72, 151, 0) 100%);
    border-radius: 65px;

    z-index: 1;
}

/* IMAGE */
.hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 65px;

    position: relative;
    z-index: 2;

    animation: floatSmooth 6s ease-in-out infinite;
}

/* FLOAT ANIMATION */
@keyframes floatSmooth {
    0% {
        transform: translateY(0);
    }

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

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

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

/* LARGE TABLET */
@media (max-width: 1200px) {
    .container-2 {
        width: 90%;
        gap: 40px;
    }

    .hero-image-wrapper {
        width: 500px;
        height: auto;
        aspect-ratio: 568 / 341;
    }

    .hero-image-bg {
        top: 50px;
        left: -40px;
    }
}

/* TABLET */
@media (max-width: 992px) {
    .container-2 {
        flex-direction: column;
        text-align: center;
        width: 90%;
    }

    .content-left-2 {
        padding-right: 0;
    }

    .btn-web-dev {
        justify-content: center;
    }

    .hero-image-wrapper {
        width: 100%;
        max-width: 500px;
        aspect-ratio: 568 / 341;
    }

    .hero-image-bg {
        height: 85%;
        top: 40px;
        left: -30px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .hero-section-2 {
        padding: 60px 15px;
    }

    .top-badge {
        margin: 0 auto;
    }

    .container-2 {
        width: 100%;
        padding: 0 10px;
    }

    .hero-image-wrapper {
        width: 100%;
        aspect-ratio: 568 / 341;
    }

    .hero-image-bg {
        top: 30px;
        left: -20px;
    }

    .main-heading-2 {
        font-size: 28px;
        line-height: 38px;
    }

     .main-heading-2-ui-ux {
        font-size: 28px;
        line-height: 38px;
        width: 100%;
    }
    .main-heading-2-seoChatGPT {
        font-size: 28px;
        line-height: 38px;
    }

    .description-2 {
        font-size: 14px;
    }

    .btn-web-dev {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .btn-web-dev-primary,
    .btn-web-dev-secondary {
        width: 100%;
        max-width: 280px;
    }
}



/* WRAPPER (LIKE OLD hero-about-image-wrapper) */
.nxh-aihero-v7__imageWrapper {
    position: relative;

    width: 568px;
    height: 341px;

    max-width: 100%;
}

/* BACKGROUND SHAPE (OLD STYLE) */
.nxh-aihero-v7__bgShape {
    position: absolute;

    width: 100%;
    height: 297px;

    top: 60px;
    left: -60px;

    background: linear-gradient(180deg, #0381E6 0%, rgba(5, 72, 151, 0) 100%);
    border-radius: 65px;

    z-index: 1;
}

/* SLIDER CONTAINER */
.nxh-aihero-v7__slider {
    position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    width: 100%;
    height: 100%;

    border-radius: 65px;
    overflow: hidden;

    z-index: 2;
}

/* SLIDES */
.nxh-aihero-v7__slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 65px;

    opacity: 0;

    transform: translateX(100px) scale(1.03);

    transition:
        transform 1.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.7s ease;

    z-index: 1;
}

/* ACTIVE */
.nxh-aihero-v7__slide.nxh-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 3;
}

/* EXIT */
.nxh-aihero-v7__slide.nxh-exit {
    opacity: 0;
    transform: translateX(-100px) scale(0.98);
    z-index: 2;
}



:root {
    --nxh-blue: #002878;
}

/* =========================
   HERO SECTION
========================= */
.nxh-aihero-v7 {
    background-color: var(--nxh-blue);
    padding: clamp(60px, 6vw, 80px) 0;
    min-height: 607px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

/* =========================
   CONTAINER
========================= */
.nxh-aihero-v7__wrap {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;

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

    gap: clamp(30px, 5vw, 80px);
}

/* =========================
   LEFT SIDE
========================= */
.nxh-aihero-v7__left {
    flex: 1;
    min-width: 300px;
    padding-right: clamp(0px, 3vw, 40px);
}

/* BADGES */
.nxh-aihero-v7__badgeRow {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.nxh-aihero-v7__badge {
    height: 30px;
    padding: 2px 10px;
    border-radius: 25px;

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

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

    border: 1px solid rgba(255,255,255,0.3);
}

.nxh-aihero-v7__badge--primary {
    background: #FFFFFF14;
    color: #4CA8FF;
}

.nxh-aihero-v7__badge--secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* TITLE */
.nxh-aihero-v7__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;

    font-size: clamp(30px, 4vw, 53px);
    line-height: 1.2;

    color: #fff;

    margin: 25px 0;
}

/* GRADIENT TEXT */
.nxh-aihero-v7__gradientText {
    background: linear-gradient(90deg, #0978FD 0%, #00E2EE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.nxh-aihero-v7__desc {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
    margin-bottom: 40px;
}

/* =========================
   BUTTONS
========================= */
.nxh-aihero-v7__btns {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* PRIMARY BUTTON */
.nxh-aihero-v7__btn--primary {
    background: linear-gradient(90deg, #0978FD, #054897);
    color: #fff;

    padding: 15px 30px;
    border-radius: 50px;

    font-weight: 600;
    text-decoration: none;

    position: relative;
    overflow: hidden;

    transition: all 0.3s ease;
}

/* 🔥 RESTORED PREMIUM HOVER */
.nxh-aihero-v7__btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0px 8px 20px rgba(0, 94, 217, 0.4);
}

/* SECONDARY BUTTON */
.nxh-aihero-v7__btn--secondary {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.3);

    color: #fff;
    padding: 14px 28px;
    border-radius: 30px;

    text-decoration: none;

    transition: all 0.3s ease;
}

/* CLEAN PREMIUM HOVER */
.nxh-aihero-v7__btn--secondary:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.15);
    box-shadow: 0 10px 25px rgba(255,255,255,0.15);
}

/* =========================
   RIGHT SIDE
========================= */
.nxh-aihero-v7__right {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* =========================
   SLIDER WRAPPER
========================= */
.nxh-aihero-v7__slider {
    position: relative;
    width: 568px;
    height: 341px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 65px;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}

/* SLIDES */
.nxh-aihero-v7__slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 65px;

    opacity: 0;

    transform: translateX(100px) scale(1.04);

    transition:
        transform 1.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.7s ease;

    z-index: 1;
}

/* ACTIVE */
.nxh-aihero-v7__slide.nxh-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 2;
}

/* EXIT */
.nxh-aihero-v7__slide.nxh-exit {
    opacity: 0;
    transform: translateX(-100px) scale(0.98);
    z-index: 1;
}

/* SLIDER HOVER DEPTH */
.nxh-aihero-v7__slider {
    transition: box-shadow 0.5s ease;
}

.nxh-aihero-v7__slider:hover {
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px) {
    .nxh-aihero-v7__wrap {
        width: 90%;
        gap: 40px;
    }

    .nxh-aihero-v7__slider {
        width: 500px;
    }
}

@media (max-width: 992px) {
    .nxh-aihero-v7__wrap {
        flex-direction: column;
        text-align: center;
    }

    .nxh-aihero-v7__left {
        padding-right: 0;
    }

    .nxh-aihero-v7__btns {
        justify-content: center;
    }

    .nxh-aihero-v7__slider {
        width: 100%;
        max-width: 500px;
        aspect-ratio: 568 / 341;
    }
}

@media (max-width: 600px) {
    .nxh-aihero-v7 {
        padding: 60px 15px;
    }

    .nxh-aihero-v7__title {
        font-size: 28px;
    }

    .nxh-aihero-v7__desc {
        font-size: 14px;
    }

    .nxh-aihero-v7__btns {
        flex-direction: column;
        align-items: center;
    }

    .nxh-aihero-v7__btn--primary,
    .nxh-aihero-v7__btn--secondary {
        width: 100%;
        max-width: 280px;
    }
}










/* =========================
   HERO SECTION
========================= */
.sw-dev-hero-section {
    background-color: #002878;
    padding: clamp(60px, 6vw, 80px) 0;
    min-height: 607px;

    display: flex;
    align-items: center;
    overflow: hidden;
}

/* =========================
   CONTAINER
========================= */
.sw-dev-container {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;

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

    gap: clamp(30px, 5vw, 80px);
}

/* =========================
   LEFT CONTENT
========================= */
.sw-dev-content-left {
    flex: 1;
    min-width: 300px;
    padding-right: clamp(0px, 3vw, 40px);
}

/* BADGE */
.sw-dev-top-badge {
    width: fit-content;
    height: 30px;

    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);

    color: #fff;

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

    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;

    margin-bottom: 30px;
    padding: 2px 10px;
}

/* HEADING */
.sw-dev-main-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;

    font-size: clamp(30px, 4vw, 53px);
    line-height: 1.2;

    color: #fff;
    margin-bottom: 10px;
}

/* SMALL HEADING */
.sw-small-heading {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

/* GRADIENT */
.sw-dev-gradient-text {
    background: linear-gradient(90deg, #0978FD 0%, #00E2EE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.sw-dev-description {
    font-family: 'Instrument Sans', sans-serif;

    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
}

/* ================= RIGHT SIDE ================= */
.sw-dev-content-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ================= IMAGE SYSTEM (SAME AS OTHERS) ================= */

/* WRAPPER */
.sw-dev-hero-image-wrapper {
    position: relative;

    width: 568px;
    height: 341px;

    max-width: 100%;
}

/* BACKGROUND SHAPE */
.sw-dev-hero-bg {
    position: absolute;

    width: 100%;
    height: 297px;

    top: 60px;
    left: -60px;

    background: linear-gradient(180deg, #0381E6 0%, rgba(5, 72, 151, 0) 100%);
    border-radius: 65px;

    z-index: 1;
}

/* IMAGE */
.sw-dev-hero-image {
    width: auto;
    height: 450px;

    object-fit: cover;

    /* border-radius: 65px; */

    position: relative;
    z-index: 2;

    animation: sw-dev-float 6s ease-in-out infinite;
}

/* FLOAT */
@keyframes sw-dev-float {
    0% {
        transform: translateY(0);
    }

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

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

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

/* LARGE TABLET */
@media (max-width: 1200px) {
    .sw-dev-container {
        width: 90%;
        gap: 40px;
    }

    .sw-dev-hero-image-wrapper {
        width: 500px;
        height: auto;
        aspect-ratio: 568 / 341;
    }

    .sw-dev-hero-bg {
        top: 50px;
        left: -40px;
    }
}

/* TABLET */
@media (max-width: 992px) {
    .sw-dev-container {
        flex-direction: column;
        text-align: center;
        width: 90%;
    }

    .sw-dev-content-left {
        padding-right: 0;
    }

    .sw-dev-hero-image-wrapper {
        width: 100%;
        max-width: 500px;
        aspect-ratio: 568 / 341;
    }

    .sw-dev-hero-bg {
        height: 85%;
        top: 40px;
        left: -30px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .sw-dev-hero-section {
        padding: 60px 15px;
    }

    .sw-dev-container {
        width: 100%;
        padding: 0 10px;
    }

    .mob-tech-card-title {
        margin: 0;
        padding: 0;
    }

    .sw-dev-hero-image-wrapper {
        width: 100%;
        aspect-ratio: 568 / 341;
    }

    .sw-dev-hero-bg {
        top: 30px;
        left: -20px;
    }

    .sw-dev-hero-image {
        height: auto;
        max-width: 100%;
    }

    .sw-dev-main-heading {
        font-size: 28px;
        line-height: 38px;
    }
}







.services-section {
    background: linear-gradient(90deg, rgb(0, 40, 87) 0%, rgb(5, 72, 151) 100%);
    padding: clamp(40px, 8vw, 60px) 0;
    color: white;
    font-family: 'Instrument Sans', sans-serif;
}

.services-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 20px);
}

/* HEADER */
.services-header {
    margin-bottom: clamp(40px, 6vw, 60px);
}

.sub-label {
    display: block;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #0978FD;
    margin-bottom: 15px;
    width: fit-content;
}

.main-title-about {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    margin-bottom: 20px;
    max-width: 100%;
}

.main-desc {
    font-size: clamp(14px, 1.3vw, 18px);
    opacity: 0.8;
    max-width: 100%;
}

/* GRID */
.services-grid-web {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 25px);
}

/* CARD */
.service-card {
    position: relative;
    width: 100%;
    max-width: 408px;
    min-height: 273px;
    background: hsba(0, 0%, 96%, 0.06);


    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: clamp(25px, 3vw, 40px);
    transition: transform 0.3s ease, background 0.3s;
    justify-self: center;
}

.service-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border: none;
}

/* BORDER EFFECT */
.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(120deg,
            transparent,
            rgba(0, 123, 255, 0.6),
            transparent);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover::before {
    opacity: 1;
    animation: flashBorder 1s linear;
}

@keyframes flashBorder {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ICON */
.icon-box {
    width: clamp(60px, 6vw, 85px);
    height: clamp(60px, 6vw, 85px);
    border-radius: 10px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.icon-box i {
    font-size: clamp(20px, 2vw, 24px);
    color: white;
}

/* TEXT */
.service-card h3 {
    font-weight: 600;
    font-size: clamp(18px, 2vw, 26px);
    margin-bottom: 15px;
}

.service-card p {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* ===== BREAKPOINTS ===== */

/* 1300px */
@media (max-width: 1300px) {
    .services-grid-web {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

/* 768px */
@media (max-width: 768px) {
    .services-grid-web {
        grid-template-columns: 1fr;
    }

    .service-card {
        max-width: 100%;
    }
}

/* SMALL MOBILE FIX (IMPORTANT) */
@media (max-width: 480px) {
    .services-section {
        padding: 50px 0;
    }

    .services-container {
        padding: 0 12px;
    }

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


















/* SECTION */
.uiux-services-section {
    background: linear-gradient(90deg, #002857 0%, #054897 100%);
    padding: clamp(20px, 8vw, 40px) 0;
    color: white;
    font-family: 'Instrument Sans', sans-serif;
}

/* CONTAINER */
.uiux-services-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 20px);
}

/* HEADER */
.uiux-services-header {
    margin-bottom: clamp(40px, 6vw, 60px);
}

.uiux-sub-label {
    display: block;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 15px;
}

.uiux-main-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 0;
}

.uiux-main-desc {
    font-size: clamp(14px, 1.3vw, 18px);
    opacity: 0.8;
}

/* GRID → ALWAYS RESPONSIVE (3 → 2 → 1) */
.uiux-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 25px);
}

/* CARD */
.uiux-service-card {
    position: relative;
    width: 100%;
    min-height: 273px;
    background: #F5F5F50F;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: clamp(25px, 3vw, 40px);
    transition: transform 0.3s ease, background 0.3s ease;
    overflow: hidden;
}

/* HOVER */
.uiux-service-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* BORDER EFFECT */
.uiux-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;

    background: linear-gradient(120deg,
            transparent,
            rgba(0, 123, 255, 0.6),
            transparent);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}

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

/* ICON */
.uiux-icon-box {
    width: clamp(60px, 6vw, 85px);
    height: clamp(60px, 6vw, 85px);
    border-radius: 10px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.uiux-icon-box i {
    font-size: clamp(20px, 2vw, 24px);
    color: white;
}

/* TEXT */
.uiux-service-card h3 {
    font-weight: 600;
    font-size: clamp(18px, 2vw, 26px);
    margin-bottom: 15px;
}

.uiux-service-card p {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

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

/* 1200px → still 3 but tighter */
@media (max-width: 1200px) {
    .uiux-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

/* 768px → 1 card */
@media (max-width: 768px) {
    .uiux-services-grid {
        grid-template-columns: 1fr;
    }
}

/* mobile fine tuning */
@media (max-width: 480px) {
    .uiux-services-section {
        padding: 50px 0;
    }

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












.vision-section {
    background: #fff;
    padding: 40px 10px 0 10px;

    /* IMPORTANT: DO NOT BREAK STICKY */
    overflow: visible;
}

/* =========================
   CONTAINER (STICKY FRIENDLY)
========================= */
.vision-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    display: flex;
    gap: clamp(30px, 5vw, 60px);

    padding: 0 clamp(16px, 4vw, 20px);

    align-items: flex-start;

    /* IMPORTANT FIX */
    overflow: visible;
}

/* =========================
   LEFT (STICKY FIXED)
========================= */
.vision-left {
    flex: 0.9;

    position: sticky;
    top: 90px;

    align-self: flex-start;

    height: fit-content;

    /* IMPORTANT */
    z-index: 10;

    /* prevents weird rendering bugs */
    will-change: transform;
}

/* =========================
   TITLE
========================= */
.vision-main-title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    margin-bottom: clamp(30px, 5vw, 50px);
    line-height: 1.1;
    max-width: 450px;
}

/* =========================
   STEP NAV
========================= */
.step-nav {
    position: relative;
    padding-left: 25px;
}

/* LINE */
.vertical-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #E0E0E0;
}

.line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0%;
    background: #000;
    transition: height 0.3s ease;
}

/* STEPS */
.step-item {
    margin-bottom: clamp(25px, 4vw, 40px);
    opacity: 0.3;
    transition: 0.3s ease;
    cursor: pointer;
}

.step-item.active {
    opacity: 1;
}

.step-num {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
}

.step-item h3 {
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 600;
    margin-top: 5px;
}

/* =========================
   RIGHT SIDE
========================= */
.vision-right {
    flex: 1.1;
    min-width: 0;
    /* VERY IMPORTANT */
}

/* INTRO */
.intro-text {
    font-size: clamp(16px, 1.5vw, 21px);
    line-height: 1.6;
    color: #444;
    margin-bottom: 40px;
}

/* BOX */
.info-box {
    background: #F5F5F5;
    border-radius: 24px;
    padding: clamp(20px, 3vw, 40px);
    margin-bottom: 30px;

    border: 1.5px solid transparent;
    transition: all 0.3s ease;
}

.info-box:hover {
    background: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: #ADD8E6;
}

/* TAG */
.box-tag {
    display: block;
    color: #0978FD;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 600;
    margin-bottom: 20px;
}

/* CONTENT */
.box-content {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    line-height: 1.4;
    color: #1a1a1a;
    margin-bottom: 20px;
}

/* PILLS */
.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pill {
    background: #0978FD;
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: clamp(13px, 1.2vw, 16px);
    font-weight: 500;
    transition: 0.3s ease;
}

.pill:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1000px) {
    .vision-container {
        flex-direction: column;
    }

    .vision-left {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {

    .vision-main-title,
    .intro-text {
        text-align: center;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .vision-section {
        padding: 50px 0;
    }

    .vision-container {
        padding: 0 12px;
    }

    .info-box {
        border-radius: 18px;
    }

    .pill {
        padding: 6px 14px;
    }
}










.why-section {
    padding: 30px 10px;
    background: #f5f5f5;
    font-family: 'Instrument Sans', sans-serif;
}

.why-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 80px;
    padding: 0 20px;
}

/* LEFT */
.why-left {
    flex: 1;
}

.why-left h2 {
    font-size: 42px;
    margin-bottom: 30px;
}

.why-left p {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
}

/* TIMELINE */
.timeline {
    flex: 1.2;
    position: relative;
    padding-left: 40px;
}

.content {
    padding: 0 20px;
}

/* CENTER LINE */
.line {
    position: absolute;
    left: 12px;
    top: 0;
    width: 2px;
    height: 100%;
    background: #ddd;
}

.line-fill {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0%;
    background: #000;
    transition: height 0.4s ease;
}

/* ITEM */
.timeline-item {
    position: relative;
    margin-bottom: 50px;
    opacity: 0.4;
    transition: 0.3s;
}

/* DOT */
.dot {
    position: absolute;
    left: -6px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid #0d6efd;
    background: #fff;
    transition: 0.3s;
}

/* ACTIVE */
.timeline-item.active {
    opacity: 1;
}

.timeline-item.active .dot {
    background: #0d6efd;
}

/* CONTENT */
.content h3 {
    font-size: 22px;
    margin-bottom: 5px;
}

.content p {
    color: #555;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .why-container {
        flex-direction: column;
    }

    .why-left h2 {
        font-size: 32px;
    }

    .timeline {
        padding-left: 30px;
    }
}






















/* SECTION (FULL WIDTH BACKGROUND) */
.impact-section-web {
    width: 100%;
    background: #002E65;
    display: flex;
    justify-content: center;
    padding: clamp(50px, 6vw, 50px) 15px;
}

/* CONTAINER */
.impact-container-web {
    width: 100%;
    max-width: 1300px;
    min-height: 550px;
    border-radius: 20px;
    padding: clamp(10px, 4vw, 10px) 0;
    font-family: 'Instrument Sans', sans-serif;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* TEXT */
.impact-small-heading {
    font-size: 14px;
    letter-spacing: 2px;
    opacity: 0.8;
    margin-bottom: 15px;
}

.main-heading {
    font-weight: 600;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.2;
    margin-bottom: 10px;
    margin-top: 0;
}

.main-description {
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: clamp(30px, 4vw, 50px);
    max-width: 900px;
}

/* GRID */
.card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(15px, 2vw, 25px);
    width: 100%;
}

/* CARD */
.card {
    width: 100%;
    min-height: 260px;
    background: #F5F5F50F;
    backdrop-filter: blur(10px);
    border-radius: 24px;
    /* padding: clamp(20px, 3vw, 38px); */
    padding: 30px 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.35s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

/* HOVER */
.card:hover {
    border: 1px solid #A3CEFF;
    box-shadow: 0 10px 40px rgba(163, 206, 255, 0.25);
    transform: translateY(-8px);
}

/* ICON */
.card-icon {
    font-size: 24px;
    border-radius: 10px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.card:hover .card-icon {
    transform: scale(1.1) rotate(6deg);
    background: #ffffff;
    color: #0978FD;
}

/* TEXT */
.card-heading {
    font-weight: 600;
    font-size: clamp(18px, 1.6vw, 22px);
    margin-bottom: 12px;
}

.card-text {
    font-weight: 400;
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.6;
    opacity: 0.85;
}

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

/* 1300px */
@media (max-width: 1300px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

/* TABLET */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
    }

    .impact-container-web {
        align-items: center;
        text-align: center;
    }

    .main-description {
        max-width: 100%;
    }

    .card {
        /* min-height: auto; */
        align-items: center;
        justify-content: center;
    }
}

/* MOBILE */
@media (max-width: 480px) {
    .impact-section-web {
        padding: 40px 12px;
    }

    .card {
        min-height: auto;
        align-items: center;
    }
}






















/* Section Scoping */
.ws-goals-section {
    padding: clamp(30px, 5vw, 50px) 20px;
    background-color: #ffffff;
    font-family: 'Instrument Sans', sans-serif;
}

/* Container */
.ws-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* ================= TYPOGRAPHY ================= */

.ws-small-heading {
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: #0978FD;
    display: block;
    margin-bottom: 12px;
}

.ws-main-heading {
    font-weight: 600;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    color: #111111;
    margin: 0 0 16px 0;
}

.ws-main-desc {
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 27px;
    color: #555555;
    margin-bottom: 48px;
}

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

.ws-card-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

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

.ws-card-item {
    background-color: #F5F5F5;
    border: 1px solid #00000026;
    border-radius: 24px;
    padding: 40px;
    width: 100%;
    min-height: 280px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ICON */
.ws-card-icon-box {
    width: 44px;
    height: 44px;
    background: #0978FD;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform 0.4s ease;
}

.ws-card-icon-box svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}

/* TEXT */
.ws-card-title {
    font-weight: 600;
    font-size: 26px;
    color: #111111;
    margin: 0 0 12px 0;
}

.ws-card-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #555555;
    margin: 0;
}

/* HOVER */
.ws-card-item:hover {
    background-color: #ffffff;
    border-color: #0978FD;
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(9, 120, 253, 0.1);
}

.ws-card-item:hover .ws-card-icon-box {
    transform: rotate(360deg) scale(1.1);
}

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

/* LAPTOP */
@media (max-width: 1200px) {
    .ws-card-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* TABLET */
@media (max-width: 768px) {
    .ws-card-wrapper {
        grid-template-columns: 1fr;
    }

    .ws-card-item {
        padding: 30px;
        min-height: auto;
    }

    .ws-main-heading {
        font-size: 32px;
    }
}

/* MOBILE */
@media (max-width: 480px) {
    .ws-goals-section {
        padding: 40px 15px;
    }

    .ws-card-item {
        padding: 22px;
    }

    .ws-card-title {
        font-size: 22px;
    }

    .ws-card-text {
        font-size: 14px;
        line-height: 22px;
    }
}












/* Main Section Styling */
.is-wrapper {
    width: 100%;
    min-height: 642px;
    /* Specific Height */
    margin: 0 auto;
    padding: 70px 24px;
    background: linear-gradient(90deg, #054897 0%, #002857 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Instrument Sans', sans-serif;
}

/* Typography */
.is-small-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    text-transform: uppercase;
    color: #3893FF;
    margin-bottom: 12px;
    text-align: center;
}

.is-main-heading {
    font-weight: 600;
    font-size: 40px;
    line-height: 1.15;
    color: #ffffff;
    margin: 0;
    text-align: center;
    max-width: 1400px;
}

.is-content {
    font-weight: 400;
    font-size: 17px;
    line-height: 27px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    max-width: 1400px;
    margin-bottom: 56px;
}

/* Grid Layout - Forced 5 per row */
.is-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 215px);
    /* Exactly 5 in one row */
    gap: 24px;
    justify-content: center;
    width: 100%;
}

/* Industry Box */
.is-box {
    width: 215px;
    height: 178px;
    background: #ffffff;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Icon Styling */
.is-icon {
    width: 68px;
    height: 54px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.is-icon img {
    width: 100%;
    height: 100%;
    /* Gradient Icon simulation using your colors */
    fill: #054897;
}

.is-label {
    font-weight: 500;
    font-size: 16px;
    line-height: 108%;
    color: #111111;
    text-align: center;
    padding: 0 10px;
}

/* Hover Effects */
.is-box:hover {
    transform: translateY(-12px);
    background: #fdfdfd;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.is-box:hover .is-icon {
    transform: scale(1.1);
}

/* Fully Responsive Logic */
@media (max-width: 1200px) {
    .is-grid-container {
        grid-template-columns: repeat(auto-fit, 215px);
    }
}

@media (max-width: 768px) {
    .is-wrapper {
        height: auto;
    }

    .is-main-heading {
        font-size: 32px;
    }

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

    .is-box {
        width: 100%;
    }
}















.cta-premium-banner-devops {
    width: 100%;
    max-width: 1280px;
    margin: clamp(20px, 3vw, 20px) auto;
    padding: 50px 20px;
    background: linear-gradient(90deg, #002857 0%, #054897 100%);
    border-radius: clamp(20px, 3vw, 40px);
    box-sizing: border-box;
    font-family: 'Instrument Sans', sans-serif;

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

    position: relative;
    overflow: hidden;

    height: fit-content;
    min-height: auto;
}








.cta-premium-banner {
    width: 100%;
    max-width: 1280px;
    margin: clamp(20px, 3vw, 40px) auto;

    padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 40px) clamp(30px, 5vw, 40px);

    background: linear-gradient(90deg, #002857 0%, #054897 100%);
    border-radius: clamp(18px, 3vw, 40px);

    box-sizing: border-box;
    font-family: 'Instrument Sans', sans-serif;

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

    position: relative;
    overflow: hidden;

    min-height: 300px;
}

/* ================= TITLE ================= */
.cta-premium-title {
    font-weight: 600;
    font-size: clamp(20px, 3vw, 40px);
    line-height: 1.15;
    color: #ffffff;

    margin: 0 0 clamp(14px, 2vw, 24px) 0;

    max-width: 100%;
    letter-spacing: -0.01em;

    word-break: break-word;
}




.nxh-abt-svc-v1-section {
  padding: 50px 20px 90px 20px;
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 45%, #eef6ff 100%);
  font-family: Arial, sans-serif;
}

.nxh-abt-svc-v1-container {
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
}

.nxh-abt-svc-v1-badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 50px;
  background: #e8f2ff;
  color: #0b5ed7;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.nxh-abt-svc-v1-container h2 {
  font-size: 44px;
  margin: 0;
  color: #071b3a;
  font-weight: 800;
}

.nxh-abt-svc-v1-subtitle {
  max-width: 720px;
  margin: 18px auto 55px;
  color: #526174;
  font-size: 18px;
  line-height: 1.7;
}

.nxh-abt-svc-v1-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.nxh-abt-svc-v1-card {
  position: relative;
  padding: 42px 34px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 94, 215, 0.12);
  box-shadow: 0 20px 50px rgba(7, 27, 58, 0.08);
  text-align: left;
 transition:
  transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
  box-shadow 0.6s ease,
  background 0.5s ease,
  color 0.4s ease;

  overflow: hidden;
}

.nxh-abt-svc-v1-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(11, 94, 215, 0.18), transparent 70%);
}

.nxh-abt-svc-v1-card:hover {
  transform: translateY(-12px) scale(1.02);

  background: linear-gradient(135deg, #071b3a, #0b5ed7);

  box-shadow:
    0 30px 70px rgba(7, 27, 58, 0.25),
    0 10px 30px rgba(11, 94, 215, 0.25);
    
}

.nxh-abt-svc-v1-card:hover h3,
.nxh-abt-svc-v1-card:hover p {
  color: #ffffff;
}

/* ICON CHANGE */
.nxh-abt-svc-v1-card:hover .nxh-abt-svc-v1-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}


.nxh-abt-svc-v1-featured {
  background: linear-gradient(135deg, #071b3a, #0b5ed7);
  color: #ffffff;
}
.nxh-abt-svc-v1-featured h3,
.nxh-abt-svc-v1-featured p,
.nxh-abt-svc-v1-featured span {
  color: #ffffff !important;
}

.nxh-abt-svc-v1-featured p,
.nxh-abt-svc-v1-featured h3 {
  color: #ffffff;
}

.nxh-abt-svc-v1-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #e0e7ef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 15px;
}

.nxh-abt-svc-v1-featured .nxh-abt-svc-v1-icon {
  background: rgba(255, 255, 255, 0.18);
}

.nxh-abt-svc-v1-card h3 {
  font-size: 24px;
  margin: 0 0 16px;
  color: #071b3a;
}

.nxh-abt-svc-v1-card p {
  font-size: 16px;
  line-height: 1.7;
  color: #526174;
  margin: 0;
}
@media (max-width: 1100px) {
  .nxh-abt-svc-v1-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .nxh-abt-svc-v1-grid {
    grid-template-columns: 1fr;
  }

  .nxh-abt-svc-v1-container h2 {
    font-size: 36px;
  }
}










/* ================= DESCRIPTION ================= */
.cta-premium-desc {
    font-weight: 400;
    font-size: clamp(13px, 1.4vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);

    margin: 0 0 clamp(20px, 3vw, 40px) 0;

    max-width: 100%;

    word-break: break-word;
}

/* ================= BUTTON ================= */
.cta-premium-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(90deg, #0978FD 0%, #054897 100%);
    color: #ffffff;

    font-weight: 600;
    font-size: clamp(12px, 1.1vw, 14px);

    text-decoration: none;

    padding: clamp(10px, 1.2vw, 12px) clamp(18px, 2.5vw, 32px);

    border-radius: 25px;

    transition: all 0.3s ease;

    white-space: nowrap;

    max-width: 100%;
}

/* hover */
.cta-premium-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

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

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

/* TABLET */
@media (max-width: 1024px) {
    .cta-premium-banner {
        border-radius: 28px;
    }
}

/* SMALL TABLET */
@media (max-width: 768px) {
    .cta-premium-banner {
        padding: 28px 18px;
        border-radius: 22px;
        margin: 20px;
    }

    .cta-premium-title {
        line-height: 1.2;
    }
    .cta-premium-desc{
        text-align: center;
    }
}

/* MOBILE */
@media (max-width: 480px) {
    .cta-premium-banner {
        padding: 22px 15px;
        margin: 15px;
    }

    .cta-premium-btn {
        width: 100%;
        text-align: center;
    }
}

/* VERY SMALL DEVICES */
@media (max-width: 360px) {
    .cta-premium-title {
        font-size: 18px;
    }

    .cta-premium-desc {
        font-size: 13px;
    }
}










.ds-services-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    /* or space-between */
    flex-wrap: wrap;
    /* allows responsive wrapping */
    padding: 30px 0;
}


.ds-service-box {
    width: 307px;
    height: 144px;
    background: linear-gradient(90deg, #054897 0%, #0381E6 100%);
    border-radius: 19px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1;
    /* ✅ ensures hover works */
}

/* Bottom Right Image Decoration */
.ds-service-box::after {
    content: "";
    position: absolute;
    bottom: -25px;
    right: -228px;
    width: 282px;
    height: 100px;
    background-image: url(assets/images/footer-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    pointer-events: none;
    /* ✅ prevents blocking hover */
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform-origin: bottom right;
    z-index: 0;
    /* ✅ stays behind content */
}

/* Content Styling */
.ds-box-heading {
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: 24px;
    line-height: 40px;
    color: #ffffff;
    margin: 0;
    text-align: center;
    text-transform: capitalize;
    position: relative;
    z-index: 2;
    /* ✅ above decoration */
}

.ds-box-desc {
    font-family: 'Instrument Sans';
    font-weight: 400;
    font-size: 16px;
    line-height: 135%;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    text-align: center;
    position: relative;
    z-index: 2;
    /* ✅ above decoration */
}

/* ✅ Hover Effects (same UI, just ensured working) */
.ds-service-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(5, 72, 151, 0.3);
}

.ds-service-box:hover::after {
    transform: scale(1.1) translate(-5px, -5px);
    opacity: 0.4;
}

/* Responsive */
@media (max-width: 768px) {
    .ds-services-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin: 0 auto;
    }

    .ds-service-box {
        width: 100%;
    }
}



























/* SECTION */
.tz-why-section {
    /* padding: 40px 20px; */
    background: white;
    font-family: 'Inter', sans-serif;
}

.tz-container {
    max-width: 1300px;
    margin: auto;
    padding: 40px 20px;

}

/* HEADER */
.tz-header {
    max-width: 1400px;
    margin-bottom: 50px;
}

.tz-subtitle {
    color: #0978FD;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.tz-title {
    font-size: 34px;
    font-weight: 700;
    margin: 10px 0;
    color: #111;
}

.tz-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* GRID */
.tz-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* CARD */
.tz-card {
    position: relative;
    background: #F5F5F5;
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid #00000033;
    transition: all 0.3s ease;
    overflow: hidden;
}

.tz-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* ICON */
.tz-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient
}

.tz-head {
    padding: 10px 0;
    margin: 0;
    font-weight: 600;
}

.tz-card p {
    margin: 10px 0 7px 0;
    font-size: 16px;
    font-family: 'Instrument Sans', sans-serif;
}

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

/* Mobile */
@media (max-width: 600px) {
    .tz-card-grid {
        grid-template-columns: 1fr;
    }

    .tz-card {
        text-align: center;
    }

    .tz-head {
        padding: 0;
    }

    .tz-title {
        font-size: 26px;
    }
}

















.vproc-section {
    max-width: 1300px;
    margin: 15px auto 30px auto;
    padding: 20px;
    font-family: 'Instrument Sans', sans-serif;
}

/* --- Top Header Area --- */
.vproc-small-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    text-transform: uppercase;
    color: #0978FD;
    display: block;
    margin-bottom: 12px;
}

.vproc-main-title {
    font-weight: 600;
    font-size: 35px;
    line-height: 122%;
    color: #111111;
    margin: 0 0 16px 0;
    /* max-width: 900px; */
}

.vproc-main-desc {
    font-weight: 400;
    font-size: 17px;
    line-height: 25px;
    color: #555555;
    /* max-width: 850px; */
    margin-bottom: 48px;
}

/* --- Layout Container --- */
.vproc-grid {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* --- Left Image Container --- */
.vproc-left-col {
    flex: 1;
    min-width: 320px;
    max-width: 580px;
    /* Specific Width */
    height: 611px;
    /* Specific Height */
    border-radius: 23px;
    overflow: hidden;
    background: #f0f0f0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.vproc-left-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vproc-left-col:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* --- Right Steps Container --- */
.vproc-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 320px;
    max-width: 599px;
    /* Specific Width */
}

.vproc-step-card {
    position: relative;
    width: 100%;
    height: 142px;

    border: 1px solid #CECECE;
    border-radius: 16px;
    padding: 30px;

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

    background: #ffffff;
    box-sizing: border-box;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.vproc-step-card:hover {
    background: #f9f9f9;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(9, 120, 253, 0.12);
    border: none; /* 🔥 important */
}
    .vproc-step-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1.5px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(9, 120, 253, 0.8),
        transparent
    );

    background-size: 200% 100%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}
.vproc-step-card:hover::before {
    opacity: 1;
    animation: flashBorder 0.8s linear;
}
@keyframes flashBorder {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.vproc-step-title {
    font-weight: 600;
    font-size: 22px;
    line-height: 29px;
    color: #111111;
    margin: 0 0 8px 0;
}

.vproc-step-desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #666666;
    margin: 0;
}

/* --- Hover Effects for Right Side --- */
.vproc-step-card:hover {
    border-color: #0978FD;
    background-color: #f9f9f9;
    transform: translateX(10px);
    box-shadow: 2px 5px 15px rgba(9, 120, 253, 0.08);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1100px) {

    .vproc-left-col,
    .vproc-right-col {
        max-width: 100%;
        height: auto;
    }

    .vproc-left-col {
        height: 400px;
    }

    .vproc-step-card {
        height: auto;
        min-height: 142px;
    }
}



















/* Unique Section Wrapper */
.bn-feature-container {
    display: flex;
    gap: 24px;
    max-width: 1280px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: 'Instrument Sans', sans-serif;
}

/* Common Card Logic */
.bn-card {
    flex: 1;
    min-height: 380px;
    border-radius: 24px;
    padding: 48px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    cursor: pointer;
}

/* --- Left Card (Gradient + Fixed Image) --- */
.bn-card-left {
    background: linear-gradient(90deg, #054897 0%, #0381E6 100%);
    color: #ffffff;
}

/* Fixed Image Logic (bottom-right) */
.bn-card-fix-img {
    position: absolute;
    bottom: 0;
    right: -285px;
    width: 372px;
    /* Adjust size based on fix.jpg content */
    height: auto;
    pointer-events: none;
    transition: transform 0.6s ease, opacity 0.4s ease;
    opacity: 0.6;
    /* Matches the subtle look in the UI */
    z-index: 1;
}

/* --- Right Card (Dark Blue) --- */
.bn-card-right {
    background: #001A33;
    color: #ffffff;
}

.bn-icon-box {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.bn-icon-box svg {
    width: 24px;
    height: 24px;
    fill: #054897;
}

/* Typography */
.bn-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
    margin: 0 0 20px 0;
    z-index: 2;
    /* Keep text above the background image */
}

.bn-desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 135%;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 440px;
    z-index: 2;
}

/* --- Hover Animations --- */
.bn-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Left card specific hover for the fixed image */
.bn-card-left:hover .bn-card-fix-img {
    transform: scale(1.1) translate(-10px, -10px);
    opacity: 1;
}

/* --- Responsive Styling --- */
@media (max-width: 992px) {
    .bn-feature-container {
        flex-direction: column;
    }

    .bn-card {
        min-height: auto;
        padding: 40px;
    }

    .bn-card-fix-img {
        width: 140px;
    }
}



















.main-title-ui-faq {
    color: black;
}

.faq-wrapper-ui {
    margin: 0;
    padding: 20px 0;
}

























/* ================= HERO WRAPPER ================= */
.dep-hero-wrapper {
    background: linear-gradient(rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)),
        linear-gradient(rgba(9, 120, 253, 0.25),
            rgba(9, 120, 253, 0.25)),
        url('assets/images/contactus-1.jpg') no-repeat center center;

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
    padding: 80px 20px;
    min-height: 70vh;
    font-family: 'Instrument Sans', sans-serif;
display:flex;
}

/* ================= MAIN LAYOUT ================= */
.dep-main-container {
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;

    display: flex;
    gap: 40px;

    /* align-items: stretch; */
    /* SAME HEIGHT */
}

/* ================= LEFT CONTENT ================= */
.dep-content-column {
    flex: 1;
    /* equal width */
    min-width: 0;

    /* BLACK TRANSPARENT PREMIUM BG */
    /* background: rgba(0, 0, 0, 0.15); */

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;

    padding: 60px;

    /* backdrop-filter: blur(12px); */

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: fit-content;

}
.dep-main-title{
font-size: 42px;
    margin-bottom: 20px;
}

.dep-sub-text{
font-size:18px;
/* Hover */
.dep-content-column:hover {
    transform: translateY(-10px);
   
 }


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

/* Tablet */
@media (max-width: 992px) {
    .dep-main-container {
        flex-direction: column;
    }

    .dep-content-column,
    .dep-form-column {
        width: 100%;
    }

    .dep-main-title {
        font-size: 2.2rem;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .dep-hero-wrapper {
        padding: 60px 15px;
    }

    .dep-main-title {
        font-size: 1.8rem;
    }

    .dep-input-row {
        flex-direction: column;
        gap: 15px;
    }

    .dep-process-grid {
        flex-direction: column;
    }

    .dep-form-card {
        padding: 25px;
    }
}























/* Container and Background Overlay */
.glt-testimonial-wrapper {
    /* Top: Black overlay transitioning into Deep Blue */
    background: linear-gradient(180deg, #000000 0%, #081e3d 30%, #004dff 100%);
    padding: 100px 20px;
    color: #ffffff;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    text-align: center;
}

.glt-main-container {
    max-width: 1200px;
    margin: 0 auto;
}

.glt-primary-heading {
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 60px;
    font-weight: 700;
}

/* Video Grid Layout */
.glt-video-grid-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 70px;
}

/* Hover Animation Logic */
.glt-video-item {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}

.glt-video-item:hover {
    transform: translateY(-15px);
}

.glt-video-item:hover .glt-media-holder {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
}

.glt-media-holder {
    width: 100%;
    aspect-ratio: 9/14;
    /* Portrait ratio matching the image */
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s ease;
}

.glt-media-holder iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.glt-leader-meta {
    margin-top: 20px;
}

.glt-leader-name {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
}

.glt-leader-role {
    font-size: 0.85rem;
    color: #a5b4fc;
    margin-top: 6px;
    opacity: 0.8;
}

/* Footer Section Buttons */
.glt-action-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.glt-cta-link {
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.3s;
}

.glt-cta-link:hover {
    background: rgba(255, 255, 255, 0.15);
}

.glt-scroll-top-btn {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.glt-scroll-top-btn:hover {
    transform: scale(1.05);
}

/* Fully Responsive Breakpoints */
@media (max-width: 1024px) {
    .glt-video-grid-track {
        grid-template-columns: repeat(2, 1fr);
    }

    .glt-primary-heading {
        font-size: 2rem;
    }
}

@media (max-width: 600px) {
    .glt-video-grid-track {
        grid-template-columns: 1fr;
    }

    .glt-action-footer {
        flex-direction: column;
        gap: 15px;
    }

    .glt-primary-heading {
        font-size: 1.7rem;
    }
}







:root {
    --is-bg: #000000;
    --is-card-surface: #111111;
    --is-border: #262626;
    --is-accent: #ffffff;
    --is-text-muted: #888888;
    --is-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.is-global-section {
    background-color: var(--is-bg);
    color: var(--is-accent);
    font-family: 'Instrument Sans', sans-serif;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.is-header-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 60px;
    letter-spacing: -0.02em;
}

/* Grid Layout */
.is-locations-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    max-width: 1100px;
    width: 100%;
}

/* Unique Card Styling */
.is-loc-card {
    background: var(--is-card-surface);
    border: 1px solid var(--is-border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: var(--is-transition);
    cursor: pointer;
}

/* Premium Hover Effect */
.is-loc-card:hover {
    border-color: #444;
    transform: translateY(-8px);
    background: #161616;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.is-loc-content h4 {
    font-size: 20px;
    margin: 0 0 12px 0;
    font-weight: 600;
}

.is-loc-address {
    color: var(--is-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.is-loc-phone {
    font-size: 14px;
    font-weight: 500;
    color: var(--is-accent);
}

/* Image Masking */
.is-loc-visual {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    filter: grayscale(1) contrast(1.1);
    transition: var(--is-transition);
}

.is-loc-card:hover .is-loc-visual {
    filter: grayscale(0);
    transform: scale(1.05);
}

.is-loc-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hidden Expansion Logic */
.is-hidden-nodes {
    display: none;
    /* Controlled by JS */
    opacity: 0;
    transform: translateY(30px);
    transition: var(--is-transition);
}

.is-expand-active {
    display: contents;
    /* Keeps the grid flow */
}

/* See More Button */
.is-trigger-btn {
    margin-top: 50px;
    background: transparent;
    color: white;
    border: 1px solid var(--is-border);
    padding: 14px 32px;
    border-radius: 100px;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: var(--is-transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.is-trigger-btn:hover {
    background: white;
    color: black;
    border-color: white;
}

/* Mobile Optimization */
@media (max-width: 600px) {
    .is-loc-card {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .is-loc-visual {
        width: 100%;
        height: 160px;
    }
}









:root {
    --tr-bg: #000000;
    --tr-text: #ffffff;
    --tr-muted: #a1a1a1;
    --tr-font: 'Instrument Sans', sans-serif;
}

.tr-hero-section {
    background-color: var(--tr-bg);
    color: var(--tr-text);
    font-family: var(--tr-font);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px;
}

.tr-container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

/* Content Styling */
.tr-content-box {
    z-index: 2;
}

.tr-tagline {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 10px;
    opacity: 0.9;
}

.tr-main-heading {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 24px 0;
    letter-spacing: -0.03em;
}

.tr-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--tr-muted);
    max-width: 500px;
}

/* Earth Image Styling & Animation */
.tr-visual-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.tr-earth-sphere {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: contain;
    /* Constant smooth rotation */
    animation: tr-spin 40s linear infinite;
    transition: transform 0.1s ease-out;
    user-select: none;
    -webkit-user-drag: none;
}

@keyframes tr-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Responsive Tweaks */
@media (max-width: 992px) {
    .tr-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tr-content-box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tr-earth-sphere {
        max-width: 350px;
    }
}

/* Force override default dropdown */
.iti .iti__country-list {
    /* background: rgba(20, 20, 20, 0.95) !important; */
    backdrop-filter: blur(10px);

    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(9, 120, 253, 0.2) !important;

    max-height: 250px !important;
    overflow-y: auto !important;
}

/* Country items */
.iti .iti__country {
    color: #fff !important;
    padding: 10px 15px !important;
}

/* Hover */
.iti .iti__country:hover {
    background: rgba(9, 120, 253, 0.2) !important;
}

/* Selected */
.iti .iti__country.iti__highlight {
    background: rgba(9, 120, 253, 0.3) !important;
}

/* Hide country name in dropdown */
.iti .iti__country-name {
    display: none;
}

/* Keep code + flag aligned */
.iti .iti__country {
    justify-content: flex-start;
    gap: 10px;
}

/* Only show flag + code nicely */
.iti__selected-flag {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Force dropdown to open below */
.iti {
    position: relative;
    /* make sure dropdown positioned correctly */
    z-index: 9999;
}

.iti__country-list {
    top: 100% !important;
    /* always below the input */
    bottom: auto !important;
}



















.custom-p {
    color: white;
    border: 1px solid white;
    border-radius: 50px;
    width: fit-content;
    padding: 7px 21px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

.content-custom-img-2 {
    width: 568;
    height: 359;
    opacity: 1;
    top: 204px;
    left: 813px;
    border-radius: 53px;

}



























/* Importing Instrument Sans for consistency */
@import url('https://googleapis.com');

.sw-solutions-wrapper {
    width: 100%;
    min-height: 456px;
    background-color: #EEF6FF;
    padding: clamp(50px, 5vw, 60px) 20px;
    font-family: 'Instrument Sans', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ================= CONTAINER ================= */
.sw-solutions-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.sw-header-group-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ================= TEXT ================= */
.sw-tagline {
    color: #0381E6;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 12px;
}

.sw-main-title {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    color: #111111;
    margin: 0;
}

.sw-main-desc {
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.6;
    color: #555555;
    margin-bottom: 45px;
    max-width: 955px;
}

/* ================= BUTTON GRID ================= */
.sw-button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

/* ================= BUTTON ================= */
.sw-pill-btn {
    width: 242px;
    height: 68px;
    background: linear-gradient(90deg, #0381E6 0%, #054897 100%);
    border-radius: 52px;

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

    padding: 0 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;

    position: relative;
    overflow: hidden; /* 🔥 required */

    transition: transform 0.35s ease, box-shadow 0.35s ease;

    box-shadow: 0 6px 18px rgba(3, 129, 230, 0.18);
}


/* ================= PROFESSIONAL HOVER ================= */
.sw-pill-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 30%; /* 👈 smaller = sharper flash */
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.5),
        transparent
    );

    transform: skewX(-20deg);
}

.sw-pill-btn:hover {
    transform: translateY(-4px) scale(1.04); /* 👈 lift + zoom */

    box-shadow:
        0 12px 30px rgba(3, 129, 230, 0.35); /* stronger shadow when lifted */
}

.sw-pill-btn:hover::before {
    animation: btnFlashFast 0.35s ease-out; /* 👈 fast */
}


@keyframes btnFlashFast {
    0% {
        left: -120%;
    }
    100% {
        left: 120%;
    }
}

/* ================= 1400px ================= */
@media (max-width: 1400px) {
    .sw-solutions-container {
        padding: 0 10px;
    }
}

/* ================= 1200px ================= */
@media (max-width: 1200px) {
    .sw-button-grid {
        justify-content: center;
    }
}

/* ================= 1000px TABLET ================= */
@media (max-width: 1000px) {
    .sw-main-title {
        font-size: 30px;
    }

    .sw-main-desc {
        font-size: 16px;
    }

    .sw-button-grid {
        justify-content: center;
    }
}

/* ================= 768px ================= */
@media (max-width: 768px) {
    .sw-solutions-wrapper {
        text-align: center;
    }

    .sw-solutions-container {
        text-align: center;
    }

    .sw-button-grid {
        justify-content: center;
    }

    .sw-pill-btn {
        width: 100%;
        max-width: 320px;
    }
}

/* ================= 480px MOBILE ================= */
@media (max-width: 480px) {
    .sw-main-title {
        font-size: 24px;
    }

    .sw-main-desc {
        font-size: 14px;
    }

    .sw-pill-btn {
        height: 60px;
        font-size: 14px;
    }
}
















.software-features-section {
    font-family: 'Instrument Sans', sans-serif;
    background-color: #ffffff;
}

/* ================= CONTAINER ================= */
.features-container {
    display: flex;
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
    align-items: stretch;
    padding: clamp(50px, 5vw, 90px) 20px;

}

/* ================= LEFT CARD ================= */
.main-feature-card {
    width: 100%;
    max-width: 511px;
    min-height: 436px;
    background: linear-gradient(135deg, #054897 0%, #0381E6 100%);
    border-radius: 29px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    color: #fff;
    flex-shrink: 0;
    transition: all 0.35s ease;
}

/* HOVER (PROFESSIONAL SOFT LIFT) */
.main-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(3, 129, 230, 0.35);
}

/* TEXT */
.main-heading {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
}

.main-description {
    font-size: clamp(14px, 1.2vw, 18px);
    opacity: 0.9;
    margin-bottom: 25px;
}

/* ================= BUTTON FIX ================= */
.btn-digitize {
    margin-top: auto;
    /* ✅ always bottom */
    width: fit-content;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    color: #fff;
    padding: 12px 22px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-digitize:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* BACKGROUND IMAGE */
.card-bg-image {
    position: absolute;
    bottom: 10px;
    right: -344px;
    width: 90%;
    height: 40%;
    background: url(./assets/images/footer-logo.png) no-repeat bottom right;
    background-size: contain;
    opacity: 0.25;
    pointer-events: none;
}

/* ================= RIGHT SIDE ================= */
.side-features-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

/* ================= FEATURE CARD ================= */
.feature-item-card {
    width: 100%;
    min-height: 136px;
    border-radius: 16px;
    border: 1px solid #CECECE;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: #F8F8F8;
    cursor: pointer;
    transition: all 0.35s ease;
}

/* HOVER */
.feature-item-card:hover {
    transform: translateY(-6px);
    border-color: #054897;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(5, 72, 151, 0.15);
}

/* ICON */
.icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(180deg, #0978FD, #054897);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.feature-item-card:hover .icon-box {
    transform: rotate(5deg) scale(1.08);
}

.icon-box img {
    width: 28px;
    height: 28px;
}

/* TEXT */
.feature-content {
    display: flex;
    flex-direction: column;
}

.feature-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
}

.feature-desc {
    font-size: 15px;
    color: #555;
}

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

/* 1400px */
@media (max-width: 1400px) {
    .features-container {
        padding: 0 10px;
    }
}

/* 1200px */
@media (max-width: 1200px) {
    .main-feature-card {
        max-width: 460px;
    }
}

/* 1000px (IMPORTANT BREAKPOINT) */
@media (max-width: 1000px) {
    .features-container {
        flex-direction: column;
        align-items: center;
        padding: 25px 20px;
    }

    .feature-title {
        margin-top: 0;
    }

    .main-feature-card {
        width: 100%;
        max-width: 100%;
    }

    .side-features-list {
        width: 100%;
    }
}

/* 768px */
@media (max-width: 768px) {
    .main-feature-card {
        padding: 30px;
    }

    .feature-item-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .feature-content {
        align-items: center;
    }
}

/* 480px */
@media (max-width: 480px) {
    .main-heading {
        font-size: 22px;
    }

    .main-description {
        font-size: 14px;
    }

    .btn-digitize {
        width: 100%;
        text-align: center;
    }
}







.custom-software-section {
    background: linear-gradient(90deg, #002857 0%, #054897 100%);
    padding: 50px 20px 100px 20px;
    color: white;
    font-family: 'Instrument Sans', sans-serif;
}

.services-container-web {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.services-header {
    margin-bottom: 40px;
}

.sub-label {
    display: block;
    width: fit-content;
    height: 17px;
    font-weight: 800;
    font-size: 14px;
    line-height: 100%;
    text-transform: uppercase;
    color: #0978FD;

    margin-bottom: 15px;
}

.main-title-web {
    font-size: 40px;
    font-weight: 600;
    margin: 0 0 20px 0;
    max-width: 1400px;
}

.main-desc {
    font-size: 18px;
    opacity: 0.8;
    max-width: 1400px;
}

/* Grid Layout */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 cards per row */
    gap: 25px;
    justify-items: center;
}

/* Card Styling */
.service-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px 30px;
    transition: transform 0.3s ease, background 0.3s;
    overflow: hidden;
}

.service-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* Flash border effect */
.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(120deg, transparent, rgba(0, 123, 255, 0.6), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover::before {
    opacity: 1;
    animation: flashBorder 1s linear;
}

@keyframes flashBorder {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Icon Box */

.service-card:hover .icon-box {
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(3, 129, 230, 0.3);
}

.icon-box i {
    font-size: 28px;
    color: white;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);

}

/* Text */
.service-card h3 {
    font-weight: 600;
    font-size: 26px;
    line-height: 29px;
    margin-bottom: 15px;
}

.service-card p {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.service-card:hover p {
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive Grid */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: 1fr;
        /* 1 card per row on tablets and below */
    }

    .service-card {
        padding: 30px 20px;
    }

    .main-title-web {
        font-size: 25px;
        text-align: left;
    }

    .main-desc {
        font-size: 16px;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .services-header {
        text-align: center;
    }

    .icon-box {
        margin: 0 auto 20px auto;
    }

    .service-card h3 {
        font-size: 20px;
        text-align: center;
    }

    .service-card p {
        font-size: 15px;
        text-align: center;
    }
}



























@import url('https://googleapis.com');

.custom-ai-sticky-section {

    font-family: 'Instrument Sans', sans-serif;
    background-color: #fff;
}

.custom-ai-container {
    display: flex;
    max-width: 1300px;
    margin: 0 auto;
    gap: 80px;
    padding: 50px 20px;
}

/* --- LEFT STICKY SIDE --- */
.custom-ai-left {
    flex: 1;
    position: relative;
}

.sticky-wrapper {
    position: sticky;
    top: 50px;
    /* Distance from top of screen when sticky */
    height: fit-content;
}

.custom-tag {
    color: #0381E6;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.custom-main-heading {
    font-size: 36px;
    font-weight: 600;
    line-height: 42px;
    margin-bottom: 20px;
    max-width: 500px;
}

.custom-main-desc {
    font-size: 18px;
    line-height: 135%;
    color: #555;
    margin-bottom: 40px;
    max-width: 508px;
}

.custom-main-image-box {
    width: 100%;
    max-width: 559px;

    /* 🔥 KEY FIX (maintains 559:666 ratio) */
    aspect-ratio: 559 / 666;

    border-radius: 27px;
    overflow: hidden;
    background: #f0f0f0;
}

/* Image */
.custom-main-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --- RIGHT SCROLLABLE SIDE --- */
.custom-ai-right {
    flex: 1;
    position: relative;
    padding-left: 60px;
}

.custom-scroll-track {
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 0;
    width: 2px;
    background: #E0E0E0;
}

.custom-scroll-fill {
    width: 100%;
    height: 0;
    background: #0381E6;
    position: absolute;
    top: 0;
    left: 0;
}

.custom-ai-item {
    position: relative;
    margin-bottom: 50px;
    padding-bottom: 20px;
}

.custom-dot {
    position: absolute;
    left: -66px;
    top: 15px;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #E0E0E0;
    border-radius: 50%;
    z-index: 5;
    transition: background 0.3s, border-color 0.3s;
}

.custom-dot.active {
    background: #0381E6;
    border-color: #0381E6;
}

.custom-icon-box {
    width: 55px;
    height: 55px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);

    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.custom-icon-box img {
    width: 29px;
    height: 27px;
    object-fit: contain;
}

.custom-item-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

.custom-item-desc {
    font-size: 16px;
    line-height: 25px;
    color: #666;
}

/* Responsive */
/* ================= LARGE SCREENS (1400px+) ================= */
@media (min-width: 1400px) {
    .custom-ai-container {
        gap: 100px;
    }

    .custom-main-heading {
        font-size: 40px;
        line-height: 46px;
    }

    .custom-main-desc {
        font-size: 19px;
    }
}

/* ================= TABLET (1024px and below) ================= */
@media (max-width: 1024px) {
    .custom-ai-container {
        flex-direction: column;
        gap: 50px;
    }

    .custom-ai-left {
        width: 100%;
    }

    .sticky-wrapper {
        position: relative;
        top: 0;
    }

    .custom-main-heading {
        font-size: 32px;
        line-height: 40px;
        max-width: 100%;
    }

    .custom-main-desc {
        font-size: 17px;
        max-width: 100%;
    }

    .custom-ai-right {
        width: 100%;
        padding-left: 30px;
        margin-top: 30px;
    }

    .custom-dot {
        left: -52px;
    }
}

/* ================= MOBILE (768px and below) ================= */
@media (max-width: 768px) {
    .custom-ai-sticky-section {
        padding: 60px 20px;
    }

    .custom-ai-container {
        gap: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .custom-main-heading {
        font-size: 28px;
        line-height: 36px;
    }

    .custom-main-desc {
        font-size: 16px;
        line-height: 24px;
    }

    .custom-ai-right {
        padding-left: 25px;
    }

    .custom-scroll-track {
        left: 0;
    }

    .custom-dot {
        left: -42px;
        width: 12px;
        height: 12px;
    }

    .custom-ai-item {
        margin-bottom: 60px;
    }

    .custom-icon-box {
        width: 50px;
        height: 50px;
    }

    .custom-icon-box img {
        width: 26px;
        height: 24px;
    }

    .custom-item-title {
        font-size: 20px;
    }

    .custom-item-desc {
        font-size: 15px;
        line-height: 24px;
    }
}

/* ================= SMALL MOBILE (480px and below) ================= */
@media (max-width: 480px) {
    .custom-ai-sticky-section {
        padding: 50px 15px;
    }

    .custom-main-heading {
        font-size: 24px;
        line-height: 32px;
    }

    .custom-main-desc {
        font-size: 14px;
    }

    .custom-ai-right {
        padding-left: 20px;
    }

    .custom-dot {
        left: -36px;
    }

    .custom-ai-item {
        margin-bottom: 50px;
    }

    .custom-icon-box {
        width: 45px;
        height: 45px;
    }

    .custom-icon-box img {
        width: 24px;
        height: 22px;
    }

    .custom-item-title {
        font-size: 18px;
    }

    .custom-item-desc {
        font-size: 14px;
    }
}










.custom-process-section {
    width: 100%;
    background: #ffffff;

    padding: clamp(40px, 5vw, 50px) clamp(15px, 3vw, 20px);

    color: #000;

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

    box-sizing: border-box;
    overflow-x: clip;
    /* FIX: prevents horizontal scroll */
}

/* HEADER */
.custom-process-header {
    text-align: left;
    margin-bottom: clamp(40px, 5vw, 60px);
    max-width: 1200px;
}

.custom-process-badge {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: #0978FD;
    display: block;
    margin-bottom: 20px;
}

.custom-process-main-title {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 600;
    line-height: 120%;
    /* margin-bottom: 20px; */
    margin: 0;
}

.custom-process-main-desc {
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 27px;
    color: rgba(0, 0, 0, 0.7);
    max-width: 1200px;
}

/* ================= GRID FIX ================= */
.custom-process-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* FIX */
    gap: clamp(16px, 2vw, 24px);

    align-items: stretch;
}

/* ================= CARD ================= */
.custom-process-card {
    position: relative;
    width: 100%;
    /* FIX */
    height: 400px;

    background: #F5F5F5;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 24px;

    padding: clamp(20px, 3vw, 40px) clamp(20px, 2.5vw, 30px);

    display: flex;
    flex-direction: column;

    transition: all 0.3s ease;

    box-sizing: border-box;
}

/* HOVER (UNCHANGED) */
.custom-process-card:hover {
    background: #f7f7f7;
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 123, 255, 0.15);
    border: none;
}

/* BORDER EFFECT (UNCHANGED) */
.custom-process-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;

    background: linear-gradient(120deg,
            transparent,
            rgba(0, 123, 255, 0.7),
            transparent);

    background-size: 200% 100%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-process-card:hover::before {
    opacity: 1;
    animation: flashBorder 1s linear;
}

@keyframes flashBorder {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* NUMBER */
.custom-card-number {
    width: 65px;
    background: #0978FD;
    border-radius: 12px;

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

    font-weight: 700;
    font-size: 24px;
    color: #fff;

    margin-bottom: 30px;
    padding: 20px 0;
}

/* TITLE */
.custom-card-title {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 600;

    margin: 0;
}

/* TEXT */
.custom-card-info {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 25px;
    color: rgba(0, 0, 0, 0.7);
}

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

/* 1400px */
@media (max-width: 1400px) {
    .custom-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 1200px */
@media (max-width: 1200px) {
    .custom-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1000px */
@media (max-width: 1000px) {
    .custom-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 768px */
@media (max-width: 768px) {
    .custom-process-grid {
        grid-template-columns: 1fr;
    }

    .custom-process-main-title {
        font-size: 30px;
    }

    .custom-process-card {
        height: auto;
        /* FIX: prevents overflow on mobile */
        min-height: 260px;
    }
}

/* 480px */
@media (max-width: 480px) {
    .custom-card-number {
        width: 55px;
        font-size: 20px;
        padding: 16px 0;
    }

    .custom-process-card {
        padding: 20px;
    }
}











.custom-software-impact {
    width: 100%;
    background: linear-gradient(90deg, #054897 0%, #002857 100%);
    /* Original background from your reference */
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    color: #fff;
    font-family: 'Instrument Sans', sans-serif;
}

.custom-software-container {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.custom-impact-small-heading {
    font-size: 14px;
    letter-spacing: 2px;
    opacity: 0.8;
    margin-bottom: 15px;
    display: block;
    color: #97d1ff;
    /* Slightly lighter blue for visibility */
    font-weight: 700px;
}

.custom-impact-main-heading {
    font-weight: 600;
    font-size: 40px;
    line-height: 115%;
    margin-bottom: 20px;
    color: #fff;
}

.custom-impact-description {
    font-weight: 400;
    font-size: 17px;
    line-height: 27px;
    max-width: 1400px;
    opacity: 0.9;
    margin-bottom: 50px;
    color: rgba(255, 255, 255, 0.85);
}

/* CARD GRID */
.custom-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: 100%;
}

/* INDIVIDUAL CARD */
.custom-card {
    width: 100%;
    height: 273px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 38px;
    border: 1px solid #00000026;
    transition: all 0.35s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* HOVER EFFECT */
.custom-card:hover {
    border: 1px solid #0978FD;
    box-shadow: 0 10px 40px rgba(9, 120, 253, 0.25);
    transform: translateY(-8px);
}

/* ICON */
.custom-card-icon {
    width: 70px;
    height: 70px;
    background: #0978FD;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    /* all icons uniform size */
    margin-bottom: 25px;
    transition: 0.3s ease;
    color: #fff;
}

/* ICON HOVER ANIMATION */
.custom-card:hover .custom-card-icon {
    transform: scale(1.1) rotate(6deg);
    background: #fff;
    color: #0978FD;
}

/* CARD TEXT */
.custom-card-heading {
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 12px;
}

.custom-card-text {
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    opacity: 0.85;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .custom-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .custom-software-container {
        align-items: center;
        text-align: center;
    }

    .custom-impact-main-heading {
        font-size: 28px;
    }

    .custom-impact-description {
        font-size: 15px;
    }

    .custom-card-grid {
        grid-template-columns: 1fr;
    }

    .custom-card {
        height: auto;
        padding: 25px;
    }

    .custom-card-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}


.custom-ai-solution {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 20px;
    font-family: 'Instrument Sans', sans-serif;
    color: #fff;
}























/* MAIN SECTION */
.ai-solutions-section {
    width: 100%;
    padding: clamp(40px, 6vw, 60px) 20px;
    background: #f8f9fa;
    display: flex;
    justify-content: center;
    font-family: 'Instrument Sans', sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}

/* WRAPPER */
.ai-solutions-wrapper {
    display: flex;
    gap: clamp(25px, 4vw, 40px);
    max-width: 1300px;
    width: 100%;
    align-items: flex-start;
}

/* LEFT COLUMN */
.ai-left-column {
    flex: 1;
    max-width: 600px;
    min-width: 280px;
}

/* STICKY LEFT */
.ai-left-sticky {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* TEXT */
.ai-section-tag {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0978FD;
}

.ai-section-heading {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    color: #1a1a1a;
    max-width: 400px;
    margin: 0;
}

.ai-section-desc {
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 26px;
    color: #555;
    max-width: 450px;
}

/* RIGHT COLUMN */
.ai-right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 280px;
}

/* FEATURE CARD */
.ai-feature-card {
    display: flex;
    align-items: self-start;
    gap: 25px;
    background: #F8F8F8;
    padding: 15px 15px;
    border-radius: 16px;
    border: 1px solid #CECECE;

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

    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease;

    box-sizing: border-box;
}
.ai-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1.5px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(9, 120, 253, 0.9),
        transparent
    );

    background-size: 200% 100%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}
.ai-feature-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(9,120,253,0.15),
        0 5px 15px rgba(0,0,0,0.08);

    border: none; /* 🔥 important */
}

.ai-feature-card:hover::before {
    opacity: 1;
    animation: flashBorder 0.8s linear;
}
@keyframes flashBorder {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}



/* ICON */
.ai-card-icon {
    flex-shrink: 0;
    width: 85px;
    height: 85px;
    border-radius: 10px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-card-icon img {
    width: 40px;
    height: 40px;
}

/* TEXT */
.ai-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ai-card-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 29px;
    color: #1a1a1a;
    margin: 0;
}

.ai-card-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: #555;
}

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

/* 1100px */
@media (max-width: 1100px) {
    .ai-solutions-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .ai-left-column,
    .ai-right-column {
        width: 100%;
        max-width: 700px;
    }

    .ai-left-sticky {
        position: relative;
        top: auto;
    }
}

/* 900px */
@media (max-width: 900px) {
    .ai-feature-card {
        padding: 20px;
        gap: 20px;
    }
}

/* 768px */
@media (max-width: 768px) {
    .ai-section-heading {
        font-size: 28px;
    }

    .ai-feature-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .ai-card-icon {
        width: 75px;
        height: 75px;
    }
}

/* 480px */
@media (max-width: 480px) {
    .ai-solutions-section {
        padding: 40px 15px;
    }

    .ai-card-title {
        font-size: 18px;
    }

    .ai-card-desc {
        font-size: 14px;
    }

    .ai-card-icon {
        width: 65px;
        height: 65px;
    }
}













/* SECTION */
.csd-implementation-section {
    width: 100%;
    background: #EEF6FF;
    display: flex;
    justify-content: center;
}

/* CONTAINER */
.csd-implementation-container {
    width: 100%;
    max-width: 1300px;
    padding: 40px 10px 60px 10px;
    font-family: 'Instrument Sans', sans-serif;
    color: #000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* TEXT */
.csd-implementation-tag {
    font-size: clamp(12px, 0.9vw, 14px);
    letter-spacing: 2px;
    color: #0978FD;
    margin-bottom: 15px;
    font-weight: 700;
}

.csd-implementation-title {
    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: 600;
    line-height: 115%;
    margin: 0;
}

.csd-implementation-desc {
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 27px;
    max-width: 1150px;
    opacity: 0.8;
    margin-bottom: 50px;
}

/* GRID */
.csd-implementation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* CARD */
.csd-implementation-card {
    min-height: 273px;
    background: #fff;
    border-radius: 24px;
    padding: clamp(20px, 2vw, 38px);
    border: 1px solid #00000026;
    box-shadow: 0px 17px 34px 0px #00000012;

    transition: all 0.35s ease;
    cursor: pointer;

    display: flex;
    flex-direction: column;

    position: relative;
    /* FIX for ::before */
    overflow: hidden;
}

/* HOVER */
.csd-implementation-card:hover {
    border-color: #0978FD;
    background: #f7f7f7;
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(9, 120, 253, 0.15);
    border: none;
}

/* ICON */
.csd-implementation-icon {
    width: 60px;
    height: 60px;
    background: #065fd4;
    color: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: 0.3s ease;
}

.csd-implementation-icon i {
    font-size: 26px;
}

/* ICON HOVER */
.csd-implementation-card:hover .csd-implementation-icon {
    transform: scale(1.1) rotate(6deg);
}

/* ANIMATED BORDER */
.csd-implementation-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;

    background: linear-gradient(120deg,
            transparent,
            rgba(0, 123, 255, 0.7),
            transparent);

    background-size: 200% 100%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}

.csd-implementation-card:hover::before {
    opacity: 1;
    animation: csdBorderFlash 1s linear;
}

@keyframes csdBorderFlash {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* TEXT */
.csd-implementation-card-title {
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 600;
    margin: 10px 0;
}

.csd-implementation-card-text {
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 23px;
    opacity: 0.8;
    margin: 10px 0 0 0;
}

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

/* 1200px - small desktop */
@media (max-width: 1200px) {
    .csd-implementation-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .csd-implementation-container {
        padding: 50px 25px;
    }
}

/* 1024px - tablet landscape */
@media (max-width: 1024px) {
    .csd-implementation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 768px - tablet */
@media (max-width: 768px) {
    .csd-implementation-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

/* 600px - mobile */
@media (max-width: 600px) {
    .csd-implementation-container {
        padding: 40px 20px;
        text-align: center;
        align-items: center;
    }

    .csd-implementation-grid {
        grid-template-columns: 1fr;
    }

    .csd-implementation-card {
        align-items: center;
        padding: 25px;
    }
}

/* 400px - small mobile */
@media (max-width: 400px) {
    .csd-implementation-title {
        font-size: 24px;
    }

    .csd-implementation-desc {
        font-size: 14px;
        line-height: 22px;
    }
}

.faq-wrapper-web-custom {
    padding: 0 0 10px 0;
}















:root {
    --usniq-verified-green: #28a745;
    --usniq-star-gold: #ffc107;
    --usniq-border: #f0f0f0;
    --usniq-text-main: #000;
    --usniq-text-sub: #777;
}

.usniq-review-section {
    padding: 10px 20px;
    font-family: 'Instrument Sans', sans-serif;
    max-width: 1300px;
    margin: 0 auto;
}

.usniq-heading {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 35px;
    line-height: 41px;
    letter-spacing: 0%;
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 40px;
    color: var(--usniq-text-main);
    margin-top: 15px;
}

.usniq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    justify-items: center;
}

.usniq-card {
    background: #fff;
    border: 1px solid var(--usniq-border);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 280px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease;
    cursor: pointer;
}

.usniq-card:hover {
    transform: translateY(-5px);
}

.usniq-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--usniq-verified-green);
    color: white;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.usniq-platform {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.usniq-platform-logo {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.usniq-platform-name {
    font-weight: 600;
    font-size: 16px;
    color: #0047AB;
    /* Standard brand blue */
}

.usniq-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.usniq-score {
    font-size: 28px;
    font-weight: 700;
    color: var(--usniq-text-main);
}

.usniq-stars {
    color: var(--usniq-star-gold);
    font-size: 14px;
}

.usniq-count {
    font-size: 12px;
    color: var(--usniq-text-sub);
    margin-top: 4px;
}

/* Mobile specific adjustments */
@media (max-width: 480px) {
    .usniq-heading {
        font-size: 28px;
        line-height: 34px;
    }

    .usniq-grid {
        grid-template-columns: 1fr;
    }
}




















/* === SECTION === */
.appdev-section {
    background: #F4F9FF;

    padding: 0 0 30px 0;
    font-family: 'Instrument Sans', sans-serif;
}

/* === CONTAINER === */
.appdev-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* === HEADER === */
.appdev-header {
    margin-bottom: 40px;
}

.appdev-sub-label {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #0978FD;
    margin: 0;
}

.appdev-main-title {
    font-size: 40px;
    font-weight: 600;
    margin: 15px 0;
    color: #0A0A0A;
}

.appdev-main-desc {
    font-size: 18px;
    color: #555;
    max-width: fit-content;
}

/* === GRID === */
.appdev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* === CARD === */
.appdev-card {
    width: 100%;
    max-width: 403px;
    min-height: 265px;

    background: #ffffff;
    border: 1px solid rgba(9, 120, 253, 0.43);
    /* #0978FD6E */
    border-radius: 24px;

    padding: 30px;
    position: relative;

    transition: all 0.3s ease;
}

/* Hover Effect */
.appdev-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(9, 120, 253, 0.15);
    border: none;
}

/* Optional Border Glow */
.appdev-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;

    background: linear-gradient(120deg,
            transparent,
            rgba(9, 120, 253, 0.7),
            transparent);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: 0.3s;
}

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

/* === ICON === */
.appdev-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;

    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);

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

    margin-bottom: 20px;
}

.appdev-icon-seo {
    width: 54px;
    height: 54px;
    border-radius: 12px;

    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);

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

    margin-bottom: 20px;

    /* 🔥 Number styling */
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}


.appdev-icon i {
    color: #fff;
    font-size: 22px;
}

/* === TEXT === */
.appdev-card h3 {
    font-size: 22px;
    font-weight: 600;
    color: #0A0A0A;
    margin-bottom: 12px;
}

.appdev-card p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
    .appdev-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .appdev-grid {
        grid-template-columns: 1fr;
    }

    .appdev-main-title {
        font-size: 30px;
    }

    .appdev-card {
        max-width: 100%;
    }
}










/* 1. Section */
.ai-impact-benefit-section {
    padding: 40px 20px;
    max-width: 1300px;
    margin: 0 auto;
    font-family: 'Instrument Sans', sans-serif;
    background-color: #ffffff;
    box-sizing: border-box;
}


.ai-impact-benefit-icon-seo-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;

    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    color: white;

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

    font-size: 24px;
    /* controls icon size */
}

/* 2. Header */
.ai-impact-benefit-tag {
    font-size: 14px;
    font-weight: 700;
    color: #0978FD;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.ai-impact-benefit-main-title {
    font-size: 42px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 12px;
    margin-top: 10px;
}

.ai-impact-benefit-sub-desc {
    font-size: 18px;
    color: #444;
    margin-bottom: 50px;
    max-width: auto;
}

/* 3. GRID (🔥 MAIN FIX) */
.ai-impact-benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

/* 4. CARD */
.ai-impact-benefit-card {
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    min-height: 280px;
}


/* Hover Effect */
.ai-impact-benefit-card:hover {
    border-color: #0978FD;
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* 5. Icon */
.ai-impact-benefit-icon-box {
    width: 55px;
    height: 55px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.ai-impact-benefit-icon-box i {
    color: #fff;
    font-size: 22px;
}

/* 6. Text */
.ai-impact-benefit-card-heading {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.ai-impact-benefit-card-text {
    font-size: 14px;
    color: #555;
    line-height: 21px;
}

/* ========================= */
/* 📱 RESPONSIVE BREAKPOINTS */
/* ========================= */

/* 1400px */
@media (max-width: 1400px) {
    .ai-impact-benefit-main-title {
        font-size: 38px;
    }
}

/* 1200px */
@media (max-width: 1200px) {
    .ai-impact-benefit-main-title {
        font-size: 34px;
    }
}

/* 1000px */
@media (max-width: 1000px) {
    .ai-impact-benefit-main-title {
        font-size: 30px;
    }

    .ai-impact-benefit-sub-desc {
        font-size: 16px;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .ai-impact-benefit-section {
        padding: 50px 16px;
        text-align: center;
    }

    .ai-impact-benefit-sub-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .ai-impact-benefit-card {
        align-items: center;
        text-align: center;
    }

    .ai-impact-benefit-icon-box {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .ai-impact-benefit-main-title {
        font-size: 26px;
    }

    .ai-impact-benefit-card {
        padding: 22px;
    }
}





:root {
    --ai-dev-blue: #0978FD;
    --ai-dev-card-bg: #F8F8F8;
    --ai-dev-card-border: #CECECE;
    --ai-dev-font: 'Instrument Sans', sans-serif;
}

/* ================= BASE FIX ================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: clip;
    /* FIX: prevents horizontal scroll without breaking layout */
    font-family: var(--ai-dev-font);
}

/* Section Container */
.ai-dev-section-wrapper {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px 60px 20px;

    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 5vw, 60px);
    align-items: stretch;

    box-sizing: border-box;
}

/* LEFT */
.ai-dev-content-left {
    flex: 1;
    min-width: 280px;
    /* FIX: prevents overflow on small screens */
    display: flex;
    flex-direction: column;
}

/* TEXT */
.ai-dev-tagline-small {
    color: var(--ai-dev-blue);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ai-dev-title-main {
    font-weight: 600;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 120%;
    color: #000000;
    margin: 0 0 20px 0;
}

.ai-dev-paragraph-desc {
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 25px;
    color: #444;
    margin-bottom: 40px;
}

/* VISUAL BOX */
.ai-dev-visual-container {
    width: 100%;
    max-width: 580px;
    height: clamp(200px, 25vw, 307px);
    /* FIX: image scaling issue */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-radius: 27px;
    overflow: hidden;
    margin-top: auto;
    position: relative;
    cursor: pointer;

    transform: translateZ(0);
    /* FIX: smoother rendering */
}

/* hover effects unchanged */
.ai-dev-visual-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.15));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.ai-dev-visual-container:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.4s ease;
}

.ai-dev-visual-container:hover::before {
    opacity: 1;
}

.ai-dev-visual-container::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -75%;
    width: 50%;
    height: 300%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent);
    transform: rotate(25deg);
    transition: all 0.6s ease;
    z-index: 2;
}

.ai-dev-visual-container:hover::after {
    left: 130%;
}

/* RIGHT SIDE */
.ai-dev-list-right {
    flex: 1;
    min-width: 280px;
    /* FIX */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CARD */
.ai-dev-feature-item {
    width: 100%;
    max-width: 586px;
    height: 65px;

    display: flex;
    align-items: center;

    background: var(--ai-dev-card-bg);
    border: 1px solid var(--ai-dev-card-border);
    border-radius: 11px;

    padding: 0px 25px;

    position: relative;
    overflow: hidden;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}
.ai-dev-feature-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 11px;
    padding: 1.5px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(9, 120, 253, 0.8),
        transparent
    );

    background-size: 200% 100%;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    pointer-events: none;
}
.ai-dev-feature-item:hover {
    transform: translateY(-5px) scale(1.02);
    background-color: white;

    box-shadow:
        0 12px 30px rgba(9, 120, 253, 0.15),
        0 6px 15px rgba(0,0,0,0.08);

}
.ai-dev-feature-item:hover::before {
    opacity: 1;
    animation: flashBorder 0.8s linear;
}
.ai-dev-feature-item:hover::before {
    opacity: 1;
    animation: flashBorder 0.8s linear;
}




.ai-dev-item-text {
    font-weight: 500;
    font-size: clamp(16px, 2vw, 20px);
    color: #222;
}

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

/* 1100px */
@media (max-width: 1100px) {
    .ai-dev-section-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .ai-dev-content-left,
    .ai-dev-list-right {
        width: 100%;
        max-width: 650px;
    }
}

/* 768px */
@media (max-width: 768px) {
    .ai-dev-section-wrapper {
        padding: 50px 15px;
    }

    .ai-dev-feature-item {
        max-width: 100%;
    }

    .ai-dev-visual-container {
        max-width: 100%;
    }
}

/* 600px */
@media (max-width: 600px) {
    .ai-dev-paragraph-desc {
        font-size: 15px;
    }
}

/* 480px */
@media (max-width: 480px) {
    .ai-dev-title-main {
        font-size: 24px;
    }

    .ai-dev-paragraph-desc {
        font-size: 14px;
    }

    .ai-dev-visual-container {
        height: 220px;
    }
}

/* 360px */
@media (max-width: 360px) {
    .ai-dev-feature-item {
        padding: 0 18px;
    }

    .ai-dev-item-text {
        font-size: 18px;
    }
}






/* SECTION BACKGROUND & SPACING */
.mob-tech-section {
    width: 100%;
    background: linear-gradient(90deg, #002857 0%, #054897 100%);

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

    padding: clamp(25px, 4vw, 30px) clamp(15px, 3vw, 20px);

    font-family: 'Instrument Sans', sans-serif;

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

    overflow-x: clip;
    /* FIX: prevents horizontal scroll */
    box-sizing: border-box;
}

/* CONTAINER */
.mob-tech-container {
    width: 100%;
    max-width: 1300px;
    color: #FFFFFF;
}

/* HEADER */
.mob-tech-tag {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #4A90E2;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.mob-tech-main-heading {
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.2;
    margin: 0px;
    max-width: 100%;
}

.mob-tech-description {
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: clamp(30px, 5vw, 40px);
    max-width: 100%;
}

/* GRID */
.mob-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(15px, 2.5vw, 30px);
}

/* CARD */
.mob-tech-card {
    background: #F5F5F50F;
    backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;

    padding: clamp(20px, 3vw, 40px);

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 391px;
    min-height: 320px;

    box-sizing: border-box;
}

/* HOVER */
.mob-tech-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ICON */
.mob-tech-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 12px;

    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);

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

    margin-bottom: 25px;

    color: white;
    font-size: 22px;

    flex-shrink: 0;

    border: 1px solid rgba(255, 255, 255, 0.2);
}

.mob-tech-card-title {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.mob-tech-card-body {
    font-size: clamp(13px, 1.2vw, 15px);
    line-height: 1.6;
    opacity: 0.75;
    margin-bottom: 25px;
}

/* LIST */
.mob-tech-list {
    list-style: none;
    padding: 0;
    margin: auto 0 0 0;
}

.mob-tech-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    font-size: clamp(13px, 1vw, 15px);
}

/* ICON DOT */
.mob-tech-list li i {
    width: 20px;
    height: 20px;

    border: 1.5px solid #4A90E2;
    border-radius: 50%;

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

    font-size: 12px;
    color: #4A90E2;
}

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

/* 1200px */
@media (max-width: 1200px) {
    .mob-tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .mob-tech-card {
        max-width: 100%;
    }
}

/* 768px */
@media (max-width: 768px) {
    .mob-tech-grid {
        grid-template-columns: 1fr;
    }

    .mob-tech-main-heading {
        font-size: 30px;
    }

    .mob-tech-card {
        padding: 28px;
    }
}

/* 480px */
@media (max-width: 480px) {
    .mob-tech-section {
        padding: 25px 15px;
    }

    .mob-tech-main-heading {
        font-size: 24px;
    }

    .mob-tech-card {
        padding: 22px;
    }

    .mob-tech-icon-box {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

/* 360px */
@media (max-width: 360px) {
    .mob-tech-card {
        padding: 18px;
    }
}



:root {
    --workflow-blue: #0978FD;
    --workflow-text-main: #000000;
    --workflow-text-muted: #555555;
    --workflow-line: #E0E0E0;
    --workflow-font: 'Instrument Sans', sans-serif;
}

.app-workflow-section {
    width: 100%;
    max-width: 1300px;
    margin: 60px auto;
    padding: 20px;
    font-family: var(--workflow-font);
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: stretch;
    /* Keeps left and right heights equal */
}

/* --- Left Column --- */
.app-workflow-left {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

.app-workflow-tag {
    color: var(--workflow-blue);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.app-workflow-title {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--workflow-text-main);
    margin: 0 0 20px 0;

}

.app-workflow-intro {
    font-size: 17px;
    line-height: 1.5;
    color: var(--workflow-text-muted);
    margin-bottom: 40px;
    max-width: 480px;
}

.app-workflow-image-box {
    width: 100%;
    max-width: 528px;
    height: 248px;
    border-radius: 27px;
    overflow: hidden;
    margin-top: auto;
    /* Pushes to bottom of left container */
    position: relative;
}

.app-workflow-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.app-workflow-image-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
}
.app-workflow-image-box:hover img {
    transform: scale(1.08); /* zoom */
}

.app-workflow-image-box:hover::after {
    animation: flashMove 0.8s ease;
}
@keyframes flashMove {
    0% {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}


/* --- Right Column (Timeline) --- */
.app-workflow-right {
    flex: 1;
    min-width: 320px;
    position: relative;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Vertical Line */
.app-workflow-right::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background-color: var(--workflow-line);
}

.app-workflow-step {
    position: relative;
    padding-bottom: 30px;
}

.app-workflow-step:last-child {
    padding-bottom: 0;
}

/* Timeline Blue Circle */
.app-workflow-dot {
    position: absolute;
    left: -40px;
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: white;
    border: 3px solid var(--workflow-blue);
    border-radius: 50%;
    z-index: 2;
}

.app-workflow-step-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--workflow-text-main);
    margin: 0 0 8px 0;
}

.app-workflow-step-desc {
    font-size: 16px;
    line-height: 1.5;
    color: var(--workflow-text-muted);
    max-width: 450px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .app-workflow-section {
        flex-direction: column;
    }

    .app-workflow-image-box {
        margin-bottom: 40px;
    }

    .app-workflow-right::before {
        left: 7px;
    }

    .app-workflow-step {
        padding-left: 0;
    }
}





/* === Section Styling === */
.core-values-section {
    width: 100%;
    background: linear-gradient(90deg, #002857 0%, #054897 100%);
    display: flex;
    justify-content: center;
    padding: clamp(50px, 6vw, 60px) clamp(15px, 3vw, 20px);
    font-family: 'Instrument Sans', sans-serif;
    box-sizing: border-box;
}

.core-values-container {
    width: 100%;
    max-width: 1300px;
    color: #FFFFFF;
}

/* ================= HEADER ================= */
.core-values-tag {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #4A90E2;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.core-values-heading {
    font-weight: 600;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.2;
    margin-bottom: 18px;
    max-width: 100%;
}

.core-values-description {
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.6;
    max-width: 100%;
    opacity: 0.85;
    margin-bottom: clamp(40px, 5vw, 60px);
}

/* ================= GRID ================= */
.core-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(15px, 2vw, 30px);
    align-items: stretch;
}

/* ================= CARD ================= */
.core-values-card {
    width: 100%;
    max-width: 408px;
    min-height: 313px;

    background: #F5F5F50F;
    backdrop-filter: blur(15px);
    border-radius: 24px;

    padding: clamp(20px, 2.5vw, 30px);

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

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.core-values-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ================= ICON ================= */
.core-values-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    font-size: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* ================= TEXT ================= */
.core-values-title {
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 600;
    margin: 0;
}

.core-values-body {
    font-size: clamp(14px, 1.2vw, 15px);
    line-height: 1.6;
    opacity: 0.75;
    margin-bottom: 20px;
}

/* ================= LIST ================= */
.core-values-list {
    list-style: none;
    padding: 0;
    margin: auto 0 0 0;
}

.core-values-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.core-values-list li i {
    width: 20px;
    height: 20px;
    border: 1.5px solid #4A90E2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #4A90E2;
}

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

/* 1200px */
@media (max-width: 1200px) {
    .core-values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 1024px */
@media (max-width: 1024px) {
    .core-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 768px */
@media (max-width: 768px) {
    .core-values-grid {
        grid-template-columns: 1fr;
    }

    .core-values-card {
        max-width: 100%;
        min-height: auto;
    }
}

/* 480px */
@media (max-width: 480px) {
    .core-values-heading {
        font-size: 26px;
    }

    .core-values-description {
        font-size: 14px;
    }

    .core-values-card {
        padding: 20px;
    }
}










:root {
    --tz-v3-accent: #0978FD;
    --tz-v3-grad: linear-gradient(180deg, #0977FB 0%, #064999 100%);
    --tz-v3-bg: #F8F8F8;
    --tz-v3-border: #CECECE;
}

body {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    background: #fff;
}

.tz-v3-master-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

/* --- LEFT COLUMN: CONTENT --- */
.tz-v3-column-left {
    flex: 1;
    max-width: 680px;
    /* Ensures text doesn't stretch too wide */
}

.tz-v3-label-upper {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--tz-v3-accent);
    margin-bottom: 15px;
    display: block;
}

.tz-v3-heading-main {
    font-size: 38px;
    font-weight: 600;
    line-height: 120%;
    margin: 0 0 20px 0;
    color: #000;
}

.tz-v3-desc-main {
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    color: #444;
    margin-bottom: 35px;
}

/* FIXED: Force Row on Large Screens */
.tz-v3-box-container-row {
    display: flex;
    flex-direction: row;
    /* Stays in row for big screens */
    gap: 20px;
    width: 100%;
}

.tz-v3-feature-unit {
    width: 323px;
    /* Exact size from your specs */
    min-height: 129px;
    background: var(--tz-v3-bg);
    border: 1px solid var(--tz-v3-border);
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.tz-v3-feature-unit:hover {
    border-color: var(--tz-v3-accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.tz-v3-unit-title {
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 10px 0;
}

.tz-v3-unit-body {
    font-size: 15px;
    line-height: 24px;
    color: #555;
    margin: 0;
}

/* --- RIGHT COLUMN: BLUE SHIELD --- */
.tz-v3-column-right {
    width: 611px;
    /* Exact size from your specs */
    min-height: 486px;
    background: var(--tz-v3-grad);
    border-radius: 44px;
    padding: 45px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 30px;
    
    position: relative;
    overflow: hidden;

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}
.tz-v3-column-right:hover {
    transform: translateY(-10px) scale(1.01);

    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.35),
        0 15px 35px rgba(0, 0, 0, 0.25);
}
.tz-v3-column-right::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 44px;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.15),
        transparent 40%
    );

    opacity: 0;
    transition: opacity 0.4s ease;

    pointer-events: none;
}

.tz-v3-column-right:hover::after {
    opacity: 1;
}
@keyframes flashBorder {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.tz-v3-shield-title {
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    line-height: 29px;
    margin: 0;
}

.tz-v3-list-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tz-v3-pill-item {
    background: #fff;
    border-radius: 100px;
    padding: 16px 25px;
    font-size: 15px;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.tz-v3-pill-item:hover {
    transform: scale(1.02);
    background: #fdfdfd;
}

.tz-v3-pill-item::before {
    content: "•";
    margin-right: 12px;
    color: var(--tz-v3-accent);
    font-weight: 900;
}

/* --- RESPONSIVENESS --- */

/* Tablet & Smaller Laptops (1200px and below) */
@media (max-width: 1200px) {
    .tz-v3-master-section {
        flex-direction: column;
        align-items: center;
        padding: 60px 20px;
    }

    .tz-v3-column-left {
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }

    .tz-v3-desc-main {
        margin-left: auto;
        margin-right: auto;
    }

    .tz-v3-box-container-row {
        justify-content: center;
    }
}

/* Mobile Devices (768px and below) */
@media (max-width: 768px) {
    .tz-v3-box-container-row {
        flex-direction: column;
        /* Stacks on mobile */
        align-items: center;
    }

    .tz-v3-feature-unit {
        width: 100%;
        max-width: 323px;
    }

    .tz-v3-column-right {
        width: 100%;
        min-height: auto;
        padding: 30px 20px;
        border-radius: 30px;
    }

    .tz-v3-heading-main {
        font-size: 30px;
    }
}
















:root {
    --zp-primary-blue: #F5F5F50F;
    --zp-card-bg: rgba(245, 245, 245, 0.06);
    --zp-card-border: rgba(255, 255, 255, 0.1);
    --zp-text-main: #ffffff;
}

/* SECTION */
.zenon-pricing-v1-layout {
    width: 100%;
    padding: 60px 20px;
    background: linear-gradient(90deg, #002857 0%, #054897 100%);
    box-sizing: border-box;
}

/* HEADER */
.zenon-pricing-v1-header-block {
    text-align: center;
    margin-bottom: 60px;
}

.zenon-pricing-v1-eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: rgba(9, 120, 253, 1);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.zenon-pricing-v1-heading-main {
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: 38px;
    color: var(--zp-text-main);
    margin: 15px 0;
}

.zenon-pricing-v1-description-lead,
.zenon-pricing-v1-description-lead-api {
    font-family: 'Instrument Sans';
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 750px;
    margin: 0 auto;
}

.zenon-pricing-v1-description-lead-api-seo {
    font-family: 'Instrument Sans';
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 1000px;
    margin: 0 auto;
}

/* GRID */
.zenon-pricing-v1-grid-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* CARD BASE (NO UI CHANGE) */
.zenon-pricing-v1-card-unit,
.zenon-pricing-v1-card-unit-api {
    width: 408px;
    height: auto;
    min-height: 440px;
    background: var(--zp-card-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--zp-card-border);
    border-radius: 24px;
    padding: 45px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
}

/* FIX SPECIFIC HEIGHTS (keep original feel) */
.zenon-pricing-v1-card-unit {
    min-height: 548px;
}

/* HOVER (UNCHANGED) */
.zenon-pricing-v1-card-unit:hover,
.zenon-pricing-v1-card-unit-api:hover {
    transform: translateY(-10px);
    border-color: var(--zp-primary-blue);
    background: rgba(245, 245, 245, 0.1);
}

/* PLAN TITLE */
.zenon-pricing-v1-plan-title {
    font-family: 'Instrument Sans';
    font-weight: 500;
    font-size: 28px;
    color: #fff;
    margin: 0 0 10px 0;
}

.zenon-pricing-v1-plan-title-seo {
    font-family: 'Instrument Sans';
    font-weight: 500;
    font-size: 28px;
    color: #fff;
    margin: 0 0 30px 0;

}

/* PRICE */
.zenon-pricing-v1-price-display {
    font-family: 'Instrument Sans';
    font-weight: 700;
    font-size: 40px;
    color: #fff;
    margin-bottom: 35px;
}

/* FEATURES */
.zenon-pricing-v1-feature-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: auto;
}

/* PILLS */
.zenon-pricing-v1-pill-item {
    background: #ffffff;
    color: #031b4e;
    padding: 14px 20px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    font-family: 'Instrument Sans';
}

.zenon-pricing-v1-pill-item-seo {
    background: #ffffff;
    color: #031b4e;
    border: 1px solid #1163FB;
    box-shadow: 0px 7px 22.3px 0px #00000014;

    padding: 20px 25px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    text-align: start;
    font-family: 'Instrument Sans';
}

/* FEATURED CARD */
.zenon-pricing-v1-card-unit--featured {
    background: rgba(1, 14, 38, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* FEATURED PILLS */
.zenon-pricing-v1-card-unit--featured .zenon-pricing-v1-pill-item {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* POPULAR TAG */
.zenon-pricing-v1-popular-tag {
    background: #0978FD;
    box-shadow: 0px 7px 22.3px 0px #00000014;
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: 13px;
    line-height: 29px;
    padding: 1px 13px;
    position: absolute;
    top: 47px;
    right: 43px;
    color: white;
    border-radius: 20px;
}

/* BUTTON */
.zenon-pricing-v1-action-trigger {
    width: 321px;
    max-width: 100%;
    height: 58px;
    background: #0978FD;
    color: #fff;
    border: none;
    border-radius: 64px;
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0px 7px 22.3px rgba(0, 0, 0, 0.08);
    margin: 25px auto 0;
    transition: 0.3s;
}

.zenon-pricing-v1-action-trigger:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
}

/* ================= RESPONSIVE (SAFE ONLY) ================= */

/* 1300px */
@media (max-width: 1300px) {

    .zenon-pricing-v1-card-unit,
    .zenon-pricing-v1-card-unit-api {
        width: 48%;
    }
}

/* 1024px */
@media (max-width: 1024px) {

    .zenon-pricing-v1-card-unit,
    .zenon-pricing-v1-card-unit-api {
        width: 100%;
        max-width: 420px;
    }

    .zenon-pricing-v1-heading-main {
        font-size: 30px;
    }
}

/* 768px */
@media (max-width: 768px) {
    .zenon-pricing-v1-layout {
        padding: 50px 15px;
    }

    .zenon-pricing-v1-grid-wrapper {
        gap: 20px;
    }

    .zenon-pricing-v1-popular-tag {
        top: 20px;
        right: 20px;
    }
}

/* 480px */
@media (max-width: 480px) {
    .zenon-pricing-v1-heading-main {
        font-size: 26px;
    }

    .zenon-pricing-v1-price-display {
        font-size: 30px;
    }

    .zenon-pricing-v1-card-unit,
    .zenon-pricing-v1-card-unit-api {
        padding: 30px 20px;
        min-height: auto;
    }

    .zenon-pricing-v1-action-trigger {
        font-size: 18px;
        height: 52px;
    }
}








.dv-solutions-wrapper {
    width: 100%;
    min-height: 456px;
    background: linear-gradient(270deg, #054897 0%, #011F43 100%);

    padding: clamp(50px, 5vw, 60px) 20px;
    font-family: 'Instrument Sans', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dv-solutions-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.dv-header-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dv-tagline {
    color: #0381E6;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.dv-main-title {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0;
}

.dv-main-desc {
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.6;
    color: #FFFFFF;
    margin-bottom: 45px;
    max-width: fit-content;
    align-items: center;
    text-align: center;
}

.dv-button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.dv-pill-btn {
    width: 242px;
    height: 68px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 19px;
    font-weight: 600;
    transition: all 0.35s ease;
    box-shadow: 0px 8px 48.9px 0px rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25)
}

.dv-pill-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(5, 72, 151, 0.28);
    filter: brightness(1.08);
}

/* Responsive */
@media (max-width: 1200px) {
    .dv-button-grid {
        justify-content: center;
    }
}

@media (max-width: 768px) {

    .dv-solutions-wrapper,
    .dv-solutions-container {
        text-align: center;
    }

    .dv-button-grid {
        justify-content: center;
    }

    .dv-pill-btn {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .dv-main-title {
        font-size: 24px;
    }

    .dv-main-desc {
        font-size: 14px;
    }

    .dv-pill-btn {
        height: 60px;
        font-size: 14px;
    }
}









:root {
    --dv2-accent: #0978FD;
    --dv2-grad: linear-gradient(180deg, #0977FB 0%, #064999 100%);
    --dv2-bg: #F8F8F8;
    --dv2-border: #CECECE;
}

body {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    background: #fff;
}

.dv2-master-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

/* --- LEFT COLUMN --- */
.dv2-column-left {
    flex: 1;
    max-width: 680px;
}

.dv2-label-upper {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--dv2-accent);
    margin-bottom: 15px;
    display: block;
}

.dv2-heading-main {
    font-size: 38px;
    font-weight: 600;
    line-height: 120%;
    margin: 0 0 20px 0;
    color: #000;
}

.dv2-desc-main {
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    color: #444;
    /* margin-bottom: 35px; */
}

.dv2-box-container-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.dv2-feature-unit {
    width: 323px;
    min-height: 129px;
    background: var(--dv2-bg);
    border: 1px solid var(--dv2-border);
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.dv2-feature-unit:hover {
    border-color: var(--dv2-accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.dv2-unit-title {
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 10px 0;
}

.dv2-unit-body {
    font-size: 15px;
    line-height: 24px;
    color: #555;
    margin: 0;
}

/* --- RIGHT COLUMN --- */
.dv2-column-right {
    width: 611px;
    min-height: 486px;
    background: linear-gradient(270deg, #054897 0%, #011F43 100%);

    border-radius: 44px;
    padding: 45px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;   /* required */
    overflow: hidden; 
    transition: 
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
    border: 2px solid #054897 ; /
}
.dv2-column-right::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 44px;
    padding: 1.5px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.95),
        transparent
    );

    background-size: 200% 100%;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    pointer-events: none;
}
.dv2-column-right:hover {
    transform: translateY(-8px); /* 👈 subtle “zoom/lift” feel */

    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.35),
        0 12px 30px rgba(9, 120, 253, 0.25);
}

.dv2-column-right:hover::before {
    opacity: 1;
    animation: flashBorder 1s linear;
}
@keyframes flashBorder {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}



.dv2-shield-title {
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    line-height: 29px;
    margin: 0;
}

.dv2-list-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dv2-pill-item {
    background: #fff;
    border-radius: 100px;
    padding: 16px 25px;
    font-size: 15px;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.dv2-pill-item:hover {
    transform: scale(1.02);
    background: #fdfdfd;
}

.dv2-pill-item::before {
    content: "•";
    margin-right: 12px;
    color: var(--dv2-accent);
    font-weight: 900;
}

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
    .dv2-master-section {
        flex-direction: column;
        align-items: center;
        padding: 60px 20px;
    }

    .dv2-column-left {
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }

    .dv2-desc-main {
        margin-left: auto;
        margin-right: auto;
    }

    .dv2-box-container-row {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .dv2-box-container-row {
        flex-direction: column;
        align-items: center;
    }

    .dv2-feature-unit {
        width: 100%;
        max-width: 323px;
    }

    .dv2-column-right {
        width: 100%;
        min-height: auto;
        padding: 30px 20px;
        border-radius: 30px;
    }

    .dv2-heading-main {
        font-size: 30px;
    }
}











.dv3-impact-section {
    width: 100%;
    background: url('./assets/images/about3.jpg') center/cover no-repeat;
    display: flex;
    justify-content: center;
    padding: clamp(50px, 6vw, 50px) 15px;
}

.dv3-impact-container {
    width: 100%;
    max-width: 1300px;
    /* min-height: 550px; */
    border-radius: 20px;
    padding: clamp(10px, 4vw, 10px) 0;
    font-family: 'Instrument Sans', sans-serif;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dv3-small-heading {
    font-size: 14px;
    letter-spacing: 2px;
    opacity: 0.8;
    margin-bottom: 15px;
}

.dv3-main-heading {
    font-weight: 600;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.2;
    margin: 0 0 35px 0;
}

/* GRID */
.dv3-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(15px, 2vw, 25px);
    width: 100%;
}

/* CARD */
.dv3-card {
    width: 100%;
    min-height: 260px;
    background: #F5F5F50F;
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: clamp(20px, 3vw, 38px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.35s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

/* HOVER */
.dv3-card:hover {
    border: 1px solid #A3CEFF;
    box-shadow: 0 10px 40px rgba(163, 206, 255, 0.25);
    transform: translateY(-8px);
}

/* NUMBER BOX (REPLACED ICON) */
.dv3-card-number {
    font-size: 22px;
    font-weight: 600;
    border-radius: 10px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: #fff;
    transition: all 0.3s ease;
}

.dv3-card:hover .dv3-card-number {
    transform: scale(1.1) rotate(6deg);
    background: #ffffff;
    color: #0978FD;
}

/* TEXT */
.dv3-card-heading {
    font-weight: 600;
    font-size: clamp(18px, 1.6vw, 22px);
    margin-bottom: 12px;
}

.dv3-card-text {
    font-weight: 400;
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.6;
    opacity: 0.85;
    margin: 10px 0;
}

/* RESPONSIVE */
@media (max-width: 1300px) {
    .dv3-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 768px) {
    .dv3-card-grid {
        grid-template-columns: 1fr;
    }

    .dv3-impact-container {
        align-items: center;
        text-align: center;
    }

    .dv3-card {
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .dv3-impact-section {
        padding: 40px 12px;
    }

    .dv3-card {
        min-height: auto;
        align-items: center;
    }
}













.dv-solutions-wrapper-api {
    width: 90%;
    margin: 30px auto 0 auto;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(90deg, #054897 0%, #0381E6 100%);

    padding: clamp(40px, 4vw, 40px) 20px;

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

    font-family: 'Instrument Sans', sans-serif;
}

/* IMPORTANT FIX: same background as wrapper */
.dv-solutions-container-api {
    width: 100%;
    background: transparent;
    /* FIX 2 */
}

/* CENTER EVERYTHING */
.dv-button-grid-api {
    display: flex;
    flex-wrap: wrap;
    /* allow responsive */
    gap: 16px;

    justify-content: center;
    /* FIX 1: center alignment */
    align-items: center;
    width: fit-content;
    margin: 0 auto;
}

/* BUTTON FIX */
.dv-pill-api {
    min-width: 200px;
    height: 64px;
    background: hsba(0, 0%, 100%, 0.08);


    border-radius: 52px;

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

    padding: 0 20px;

    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;

    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0px 8px 48.9px 0px rgba(0, 0, 0, 0.16);


    white-space: nowrap;

    transition: all 0.3s ease;

    /* IMPORTANT FIX 3 */
    position: relative;
    z-index: 1;
}

/* CLEAN HOVER (NO BREAKING) */
.dv-pill-api:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);

    z-index: 2;
    /* prevents overlap issue */
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .dv-solutions-wrapper-api {
        width: 90%;
        border-radius: 18px;
    }

    .dv-pill-api {
        min-width: 160px;
        height: 56px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .dv-solutions-wrapper-api {
        width: 95%;
    }

    .dv-pill-api {
        min-width: 140px;
        height: 52px;
        font-size: 13px;
    }
}















/* Layout & Spacing */
.api-dev-section {
    width: 100%;
    padding: 60px 0px 60px 0;
    font-family: 'Instrument Sans', sans-serif;
    background-color: #ffffff;
}

.api-dev-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* Pulls left and right to edges */
    gap: 40px;
    /* Controlled gap */
}

/* Left Content (approx 40%) */
.api-dev-left-wrapper {
    flex: 0 0 35%;
    /* Fixed width for left side */
}

.api-dev-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #2563eb;
    background: hsla(213, 96%, 99%, 1);
    padding: 4px 0;
    margin-bottom: 20px;
}

.api-dev-hero-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    color: #111;
    margin-bottom: 24px;
    margin-top: 0;
}

.api-dev-summary {
    font-size: 18px;
    line-height: 1.6;
    color: #52525b;
}

/* Right Grid (60%) */
.api-dev-right-grid {
    flex: 0 0 60%;
    /* Right side takes 60% */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Card Styling & Hover Effects */
.api-dev-feature-card {
    background: hsla(0, 0%, 96%, 1);
    border: 1px solid hsla(0, 0%, 0%, 0.1);
    border-radius: 24px;
    padding: 35px;
    height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smooth transition */
    cursor: default;
}

/* HOVER EFFECT */
.api-dev-feature-card:hover {
    background: #ffffff;
    transform: translateY(-8px);
    /* Lifts up */
    border-color: rgba(37, 99, 235, 0.3);
    /* Subtle blue border */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    /* Deep soft shadow */
}

.api-dev-card-label {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #000;
}

.api-dev-card-detail {
    font-size: 15px;
    line-height: 1.5;
    color: #52525b;
}

/* --- Responsive Adjustments --- */

/* For 1200px and below */
@media (max-width: 1200px) {
    .api-dev-hero-title {
        font-size: 36px;
    }

    .api-dev-left-wrapper {
        flex: 0 0 40%;
    }

    .api-dev-right-grid {
        flex: 0 0 55%;
    }
}

/* For 1000px and below (Stacked) */
@media (max-width: 1000px) {
    .api-dev-container {
        flex-direction: column;
    }

    .api-dev-left-wrapper,
    .api-dev-right-grid {
        flex: 0 0 100%;
        width: 100%;
    }

    .api-dev-hero-title {
        max-width: 100%;
    }
}

/* Mobile Devices */
@media (max-width: 650px) {
    .api-dev-right-grid {
        grid-template-columns: 1fr;
    }

    .api-dev-feature-card {
        height: auto;
    }
}














.api-development-section {
    width: 100%;
    min-height: 456px;
    background: linear-gradient(270deg, #054897 0%, #011F43 100%);
    padding: clamp(50px, 5vw, 60px) 20px;
    font-family: 'Instrument Sans', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.api-development-container {
    max-width: 1300px;
    width: 100%;
    text-align: center;
}

/* Header */
.api-development-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.api-development-tag {
    color: #0381E6;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.api-development-title {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
    margin-top: 0;
}

.api-development-desc {
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.6;
    color: #fff;
    margin-bottom: 45px;
    max-width: 800px;
}

/* GRID → 6 columns */
.api-development-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* Pill */
.api-development-pill {
    width: 100%;
    height: 68px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.api-development-pill:hover {
    transform: translateY(-6px);
    filter: brightness(1.1);
}

/* Responsive */
@media (max-width: 1200px) {
    .api-development-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .api-development-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 420px) {
    .api-development-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .api-development-pill {
        height: 60px;
        font-size: 14px;
    }
}















.api-development-services-wrapper {
    width: 100%;
    padding: 50px 0;
    font-family: 'Instrument Sans', sans-serif;
    background: hsba(0, 0%, 100%, 1);

    overflow-x: hidden;
}

.api-development-services-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.api-development-services-header {
    margin-bottom: 35px;
}

.api-development-services-top-label {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #0066FF;
    display: inline-block;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.api-development-services-main-heading {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    margin-bottom: 16px;
    margin-top: 0;
}

.api-development-services-lead-text {
    font-size: 16px;
    color: #555;
    max-width: 850px;
}

/* --- THE ONE-ROW GRID --- */
.api-development-services-row-grid {
    display: grid;
    /* Forces 5 equal columns in one row */
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: 100%;
}

.api-development-services-card-item {
    min-height: 232px;
    display: flex;
    flex-direction: column;

    background: #ffffff; /* keep white */
    border-radius: 24px;
    padding: 30px 20px;

    /* softer, premium border */
    border: 1px solid rgba(0, 0, 0, 0.05);

    /* layered shadow (this makes it premium) */
  box-shadow:
    0 4px 10px rgba(0,0,0,0.04),
    0 12px 30px rgba(0,0,0,0.06),
    0 30px 60px rgba(0,0,0,0.08),
    0 60px 120px rgba(0,0,0,0.05); /* soft far glow */

    position: relative;
    overflow: hidden;

    transition: 0.3s; /* keep your hover untouched */
}



.api-development-services-card-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(9, 120, 253, 0.8),
        transparent
    );

    background-size: 200% 100%;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    pointer-events: none;
}
.api-development-services-card-item:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 50px rgba(9, 120, 253, 0.12),
        0 10px 25px rgba(0, 0, 0, 0.08);
}


.api-development-services-card-item:hover::before {
    opacity: 1;
    animation: flashBorder 0.9s linear;
}
@keyframes flashBorder {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


.api-development-services-card-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 0;
}

.api-development-services-card-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

/* --- RESPONSIVENESS --- */

/* At 1200px - ensure it still fits or starts shrinking */
@media (max-width: 1250px) {
    .api-development-services-card-title {
        font-size: 19px;
    }

    .api-development-services-card-item {
        padding: 20px 15px;
    }
}

/* At 1024px - Move to 3 items per row for better readability */
@media (max-width: 1024px) {
    .api-development-services-row-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* On Mobile - 1 or 2 items per row */
@media (max-width: 768px) {
    .api-development-services-row-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .api-development-services-row-grid {
        grid-template-columns: 1fr;
    }
}









.zenon-pricing-v1-price-display-api {
    color: white;
    font-size: 15px;
    font-family: Instrument Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0%;
    padding: 20px 0 30px 0;
}












.api-connect {
    padding-bottom: 10px;
    font-family: Instrument Sans;
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    line-height: 29px;
    letter-spacing: 0%;
    color: white;

}















:root {
    --seo-gradient: linear-gradient(90deg, #011F43 0%, #054897 100%);
    --seo-white: hsla(213, 96%, 99%, 1);
    --seo-card-bg: hsla(0, 0%, 96%, 1);
    --seo-shadow: 0px 13px 24.2px 0px hsla(0, 0%, 0%, 0.18);
}

.quantum-seo-wrapper-unique-99 {
    background: var(--seo-gradient);
    padding: 80px 5%;
    font-family: 'Instrument Sans', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.quantum-seo-container-772 {
    display: flex;
    max-width: 1300px;
    width: 100%;
    gap: 40px;
    flex-wrap: wrap;
}

/* Left Side Content */
.quantum-seo-left-content-551 {
    flex: 0 0 520px;
    color: var(--seo-white);
}

.quantum-seo-eyebrow-110 {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 100%;
    margin-bottom: 20px;
    display: block;
    color: #0978FD;


}

.quantum-seo-main-title-882 {
    font-size: 38px;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 24px;
    margin-top: 0;
}

.quantum-seo-body-text-443 {
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    opacity: 0.9;
}

/* Right Side Grid */
.quantum-seo-right-grid-339 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.quantum-seo-card-item-661 {
    background: var(--seo-card-bg);
    border-radius: 24px;
    padding: 24px 30px;
    box-shadow: var(--seo-shadow);
    min-height: 152px;

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

    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

/* Hover Effect */
.quantum-seo-card-item-661:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* 🔵 Transparent Border Glow */
.quantum-seo-card-item-661::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;

    background: linear-gradient(120deg,
            rgba(0, 163, 255, 0.0),
            rgba(0, 163, 255, 0.5),
            rgba(9, 120, 253, 0.5),
            rgba(0, 163, 255, 0.0));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Show border on hover */
.quantum-seo-card-item-661:hover::before {
    opacity: 1;
}


.quantum-seo-card-title-221 {
    font-size: 26px;
    font-weight: 600;
    line-height: 29px;
    color: #000;
    margin-bottom: 15px;
    margin-top: 0;
}

.quantum-seo-card-desc-001 {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1000px) {
    .quantum-seo-container-772 {
        flex-direction: column;
    }

    .quantum-seo-left-content-551 {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .quantum-seo-right-grid-339 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .quantum-seo-right-grid-339 {
        grid-template-columns: 1fr;
    }

    .quantum-seo-main-title-882 {
        font-size: 32px;
    }
}




















.quantum-ecosystem-section-99x {
    background-color: #FFFFFF;
    padding: 40px 20px 70px 20px;
    font-family: 'Instrument Sans', sans-serif;
    display: flex;
    justify-content: center;
}

.quantum-ecosystem-container-77y {
    max-width: 1300px;
    width: 100%;
}

/* Header Styling */
.quantum-header-group-11z {
    margin-bottom: 48px;
    max-width: 1200px;
    /* Keeping text readable */
}

.quantum-eyebrow-text-22a {
    color: #0978FD;

    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    display: block;
}

.quantum-main-heading-33b {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    color: #011F43;
    margin-bottom: 16px;
    margin-top: 0;
}

.quantum-sub-description-44c {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
}

/* Grid Layout */
.quantum-cards-grid-55d {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Card Styling */
/* Updated Professional Card Styles */
.quantum-service-card-66e {
    background: #F5F5F5;
    border-radius: 24px;
    padding: 40px;
    /* Your specific shadow and border */
    box-shadow: 0px 13px 24.2px 0px #0000002E;
    border: 1px solid #0978FD6E;

    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    top: 0;

    /* Consolidated transition for the professional cubic-bezier feel */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.quantum-service-card-66e:hover {
    top: -8px;
    /* Subtle lift */
    background: #FFFFFF;
    /* Brightens on interaction */

    /* Shifts to your brand-specific blue border on hover */
    border-color: #054897;

    /* Enhanced lifting shadow */
    box-shadow: 0px 22px 40px 0px rgba(0, 0, 0, 0.12);
}

/* Text emphasis on hover */
.quantum-service-card-66e:hover .quantum-card-title-77f {
    color: #054897;
    transition: color 0.3s ease;
}

/* Optional: Smooth transition for the body text as well */
.quantum-service-card-66e:hover .quantum-card-body-88g {
    color: #000000;
    transition: color 0.3s ease;
}

.quantum-card-title-77f {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 20px;
}

.quantum-card-body-88g {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #444;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .quantum-main-heading-33b {
        font-size: 34px;
    }

    .quantum-cards-grid-55d {
        gap: 20px;
    }
}

@media (max-width: 1000px) {
    .quantum-cards-grid-55d {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for tablet */
    }

    .quantum-main-heading-33b {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .quantum-cards-grid-55d {
        grid-template-columns: 1fr;
        /* 1 column for mobile */
    }

    .quantum-service-card-66e {
        padding: 30px;
    }
}















.quantum-outcome-section-332 {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: 'Instrument Sans', sans-serif;
    display: flex;
    justify-content: center;
}

.quantum-outcome-container-884 {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
}

/* Header area */
.quantum-outcome-header-112 {
    margin-bottom: 50px;
}

.quantum-outcome-eyebrow-001 {
    color: #0978FD;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.quantum-outcome-h2-223 {
    font-size: 38px;
    font-weight: 600;
    color: #011F43;
    line-height: 1.2;
    margin-bottom: 15px;
    margin-top: 0;
}

.quantum-outcome-p-445 {
    font-size: 16px;
    color: #444;
    max-width: 1200px;
    line-height: 1.6;
}

/* ================= GRID ================= */
.quantum-outcome-grid-layout-556 {
    display: grid;
    grid-template-columns: 580px 1fr;
    /* ✅ FIXED */
    gap: 40px;
    align-items: stretch;
    width: 100%;
}

/* ================= IMAGE ================= */
.quantum-outcome-img-box-667 {
    width: 100%;
    max-width: 580px;
    height: 611px;
    border-radius: 23px;
    overflow: hidden;
}

.quantum-outcome-img-box-667 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.quantum-outcome-img-box-667:hover img {
    transform: scale(1.05);
}

/* ================= CARD STACK ================= */
.quantum-outcome-card-stack-778 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 611px;
    width: 100%;
}

/* Cards now FULL WIDTH */
.quantum-outcome-item-990 {
    width: 100%;
    height: 142px;
    background: #F8F8F8;
    border: 1px solid #CECECE;
    border-radius: 16px;
    padding: 24px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}

/* Hover */
.quantum-outcome-item-990:hover {
    background: #FFFFFF;
    border-color: #054897;
    transform: translateX(10px);
    box-shadow: 0px 13px 24.2px rgba(0, 0, 0, 0.1);
}

.quantum-outcome-card-h3-112 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
    margin-top: 0;
}

.quantum-outcome-card-p-334 {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    margin-top: 5px;
}

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

/* Large screens */
@media (max-width: 1200px) {
    .quantum-outcome-grid-layout-556 {
        grid-template-columns: 1fr 1fr;
    }

    .quantum-outcome-img-box-667 {
        height: auto;
        aspect-ratio: 580 / 611;
    }

    .quantum-outcome-card-stack-778 {
        height: auto;
        gap: 20px;
    }

    .quantum-outcome-item-990 {
        height: auto;
        min-height: 120px;
    }
}

/* Tablet */
@media (max-width: 1000px) {
    .quantum-outcome-grid-layout-556 {
        grid-template-columns: 1fr;
    }

    .quantum-outcome-img-box-667 {
        max-width: 100%;
    }
}

/* Small devices */
@media (max-width: 600px) {
    .quantum-outcome-img-box-667 {
        aspect-ratio: 1 / 1;
    }

    .quantum-outcome-item-990 {
        padding: 20px;
    }
}










.quantum-case-study-root {
    background: linear-gradient(90deg, #002857 0%, #054897 100%);

    padding: 60px 20px;
    font-family: 'Instrument Sans', sans-serif;
    display: flex;
    justify-content: center;
    color: #ffffff;
}

.quantum-case-study-container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
.quantum-cs-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 1300px;
}

.quantum-cs-eyebrow {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0978FD;

    margin-bottom: 15px;
    display: block;

    font-family: Instrument Sans;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 100%;


}

.quantum-cs-title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
    margin-top: 0px;
}

.quantum-cs-desc {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.6;
    opacity: 0.8;
    max-width: 1000px;
    margin: 0 auto;
}

/* Glass Cards Grid */
.quantum-cs-glass-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 24px;
    width: 100%;
    margin-bottom: 60px;
}

.quantum-cs-card {
    min-height: 273px;
    background: #F5F5F50F;
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid rgba(255, 255, 255, 0.1);

    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

/* Hover lift */
.quantum-cs-card:hover {
    transform: translateY(-8px);
    border: none;
}

/* 🔵 Animated Border Layer */
.quantum-cs-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    /* border thickness */

    background: linear-gradient(120deg,
            transparent,
            rgba(0, 163, 255, 0.6),
            rgba(9, 120, 253, 0.6),
            transparent);

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Animate on hover */
.quantum-cs-card:hover::before {
    opacity: 1;
    animation: borderMove 2s linear infinite;
}

/* 🔁 Animation */
@keyframes borderMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}



.quantum-cs-card-h3 {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    margin-bottom: 20px;
}

.quantum-cs-card-p {
    font-size: clamp(13px, 1.5vw, 14px);
    line-height: 1.6;
    opacity: 0.8;
}

/* Stats Grid */
.quantum-cs-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
}

.quantum-cs-stat-button {
    height: 120px;
    background: #FFFFFF;
    border-radius: 64px;
    border: 1px solid #1163FB;
    box-shadow: 0px 7px 22.3px 0px #00000014;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.quantum-cs-stat-button:hover {
    transform: translateY(-5px);
}

.quantum-cs-stat-val {
    color: #0978FD;
    font-weight: 700;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1;
    margin-bottom: 5px;
}

.quantum-cs-stat-label {
    color: #444;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

/* ✅ Responsive Breakpoints */

/* Tablet */
@media (max-width: 1024px) {
    .quantum-cs-glass-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* Mobile */
@media (max-width: 640px) {
    .quantum-case-study-root {
        padding: 40px 15px;
    }

    .quantum-cs-header {
        margin-bottom: 40px;
    }

    .quantum-cs-glass-grid {
        grid-template-columns: 1fr;
    }

    .quantum-cs-stats-grid {
        grid-template-columns: 1fr;
    }

    .quantum-cs-card {
        border-radius: 18px;
        min-height: auto;
    }

    .quantum-cs-stat-button {
        height: 110px;
        border-radius: 40px;
    }
}







/* Import font if not already in your project */
@import url('https://googleapis.com');

.smm-services-section {
    padding: 50px 20px;
    font-family: 'Instrument Sans', sans-serif;
    max-width: 1300px;
    margin: 0 auto;
}

.smm-services-section {
    padding: 60px 20px;
    font-family: 'Instrument Sans', sans-serif;
    max-width: 1300px;
    margin: 0 auto;
}

.smm-main-heading {
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: 38px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 50px;
    color: #000;
    margin-top: 0;
}

.smm-cards-container {
    display: grid;
    /* Responsiveness: 3 columns for desktop, 2 for tablet, 1 for mobile */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    justify-items: center;
}

.smm-service-card {
    width: 100%;
    max-width: 403px;
    /* min-height: 177px; */
    padding: 40px 30px;
    box-sizing: border-box;

    background: #FFFFFF;
    border-radius: 24px;

    /* ✅ KEEP ORIGINAL BORDER ALWAYS */
    border: 1px solid rgba(9, 120, 253, 0.43);

    box-shadow: 0px 17px 34px rgba(0, 0, 0, 0.07);

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

    position: relative;
    transition: all 0.35s ease;
}

/* Hover lift only */
.smm-service-card:hover {
    transform: translateY(-8px);
}

/* 🔵 Animated Border (SEPARATE LAYER — does NOT touch original border) */
.smm-service-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    /* slightly outside so it doesn't overlap original border */
    border-radius: 24px;
    pointer-events: none;

    border: 1.5px solid transparent;
    background: linear-gradient(120deg,
            transparent,
            rgba(9, 120, 253, 0.8),
            transparent) border-box;

    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show animated border on hover */
.smm-service-card:hover::after {
    opacity: 1;
    animation: borderMove 1.5s linear infinite;
}

/* Animation */
@keyframes borderMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}


/* Show glow on hover */
.smm-service-card:hover::before {
    opacity: 1;
}

.smm-card-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #000;
}

.smm-card-text {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    margin: 0;
}

/* Specific Media Queries for fine-tuning */
@media (max-width: 1000px) {
    .smm-main-heading {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    .smm-main-heading {
        font-size: 28px;
    }

    .smm-service-card {
        min-height: auto;
        padding: 24px;
        /* Let content dictate height on very small screens */
    }
}












/* === SECTION (FULL WIDTH BACKGROUND) === */
.social-services-section {
    width: 100%;
    padding: 40px 20px 60px 20px;
    font-family: 'Instrument Sans', sans-serif;
    background: linear-gradient(90deg, #032a5a 0%, #0a4fa3 100%);
    color: #fff;
}

/* === CONTAINER === */
.social-marketing-2 {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

/* === HEADING === */
.social-services-heading {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 600;
    margin-bottom: 15px;
}

/* === SUBTEXT === */
.social-marketing-2 p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 800px;
    margin: 0 auto 0 auto;
    line-height: 1.6;
    font-size: clamp(14px, 2vw, 16px);
}

/* === GRID === */
.social-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

/* === CARD === */
.social-service-card {
    width: 100%;
    /* min-height: 177px; */
    padding: 40px 30px;
    border-radius: 20px;

    background: #F5F5F50F;

    backdrop-filter: blur(12px);

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

    text-align: left;
    border-color: rgba(255, 255, 255, 0.1);

    transition: all 0.35s ease;
}

/* Hover */
.social-service-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* TEXT */
.social-service-title {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 600;
    margin-bottom: 10px;
}

.social-service-text {
    font-size: clamp(14px, 1.8vw, 15px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

/* === RESPONSIVE === */

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

/* Mobile */
@media (max-width: 640px) {
    .social-services-section {
        padding: 60px 15px;
    }

    .social-services-grid {
        grid-template-columns: 1fr;
    }

    .social-service-card {
        padding: 24px;
        min-height: auto;
    }
}










.smm-benefits-section {
    padding: 50px 20px 70px 20px;
    font-family: 'Instrument Sans', sans-serif;
    max-width: 1300px;
    margin: 0 auto;
}

.smm-benefits-section-llm {
    padding: 50px 20px 40px 20px;
    font-family: 'Instrument Sans', sans-serif;
    max-width: 1300px;
    margin: 0 auto;
}

.smm-benefits-heading {
    font-weight: 600;
    font-size: 38px;
    line-height: 120%;
    text-align: center;
    margin-bottom: 40px;
    color: #000;
    margin-top: 0;
}

.smm-benefits-grid {
    display: grid;
    /* Adjusts from 4 columns to 1 based on screen width */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-items: center;
}

.smm-benefit-pill {
    width: 100%;
    max-width: 298px;
    height: 123px;

    background: #D9D9D954;
    border-radius: 64px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 25px;
    box-sizing: border-box;

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

    transition: all 0.35s ease;
}

/* soft shine layer */
.smm-benefit-pill::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent);
    transform: skewX(-20deg);
    transition: all 0.6s ease;
}

/* HOVER */
.smm-benefit-pill:hover {
    transform: translateY(-6px) scale(1.03);
    background: rgba(217, 217, 217, 0.75);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* shine move */
.smm-benefit-pill:hover::before {
    left: 130%;
}


.smm-pill-title {
    font-size: 21px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #000;
}

.smm-pill-text {
    font-size: 15px;
    line-height: 1.4;
    color: #333;
    margin: 0;
}

/* Responsiveness for mobile */
@media (max-width: 600px) {
    .smm-benefit-pill {
        max-width: 100%;
        /* Pills take full width on mobile */
        height: auto;
        padding: 30px 20px;
    }
}








:root {
    --section-bg: linear-gradient(270deg, #054897 0%, #012959 100%);
    --card-bg: rgba(245, 245, 245, 0.06);
    /* #F5F5F50F equivalent */
    --card-hover-bg: rgba(245, 245, 245, 0.12);
    --font-family: 'Instrument Sans', sans-serif;
    --text-color: #FFFFFF;

}


/* Unique Section Class */
.smm-process-section {
    background: var(--section-bg);
    padding: 60px 20px 80px 20px;
    font-family: var(--font-family);
    color: var(--text-color);
    display: flex;
    justify-content: center;
}

.smm-container {
    max-width: 1300px;
    width: 100%;
}

.smm-header {
    margin-bottom: 50px;
}

.smm-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 120%;
    text-transform: capitalize;
    margin-bottom: 20px;
    margin-top: 0;
}

.smm-intro {
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    max-width: 1000px;
    opacity: 0.9;
}

/* Grid Layout - Responsive */
.smm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns for desktop */
    gap: 24px;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .smm-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

}

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

    .smm-title {
        font-size: 32px;
    }


}

/* Card Styling */
.smm-card {
    background: #F5F5F50F;

    border-radius: 24px;
    padding: 32px;
    /* min-height: 358px; */
    /* Matching your height */
    box-sizing: border-box;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

/* Hover Effect */
.smm-card:hover {
    background: var(--card-hover-bg);
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.step-label {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
    display: block;
    color: #308EFF;

}

.card-heading {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3;
}

.card-desc {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    opacity: 0.8;
}







.case-study-aligned-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Instrument Sans', sans-serif;
}

.case-study-title {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 40px;
    margin-top: 0;
}

/* The Flex Container */
.case-study-flex-row {
    display: flex;
    gap: 24px;
    align-items: stretch;
    /* This forces both sides to be equal height */
}

/* Left Side: Image Container */
.case-img-wrapper {
    flex: 1;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

.case-img-wrapper img {
    width: 100%;
    height: 100%;
    /* Important: Takes full height of the parent flex box */
    object-fit: cover;
    /* Ensures image isn't distorted */
    display: block;
    transition: transform 0.5s ease;
}

.case-img-wrapper:hover img {
    transform: scale(1.08);
}

/* Right Side: Cards Container */
.case-cards-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Spreads cards to fill the height */
    gap: 20px;
}

.case-hard-card {
    flex-grow: 1;
    background: rgb(248, 248, 248);
    border: 1px solid rgb(206, 206, 206);
    border-radius: 16px;
    padding: 28px;

    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* soft light sweep effect */
.case-hard-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent);
    transform: skewX(-20deg);
    transition: all 0.6s ease;
}

/* HOVER STATE */
.case-hard-card:hover {
    transform: translateY(-8px);
    border-color: rgb(180, 180, 180);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    background: rgb(252, 252, 252);
}

/* shine animation */
.case-hard-card:hover::before {
    left: 130%;
}

.case-hard-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #000;
}

.case-hard-card p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    color: #444;
}

/* Responsive */
@media (max-width: 1000px) {
    .case-study-flex-row {
        flex-direction: column;
    }

    .case-img-wrapper {
        aspect-ratio: 16/9;
        /* Set a fixed shape for mobile */
    }
}







/* Main Section Wrapper */
.smm-zenon-workflow-block {
    background: linear-gradient(270deg, #054897 0%, #012959 100%);
    padding: 60px 20px;
    font-family: 'Instrument Sans', sans-serif;
    color: #ffffff;
    display: flex;
    justify-content: center;
}

.smm-zenon-layout-grid {
    max-width: 1300px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    /* Two column desktop layout */
    gap: 60px;
    align-items: center;
}

/* --- Left Column Elements --- */
.smm-zenon-content-stack {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.smm-zenon-main-heading {
    font-size: 38px;
    font-weight: 600;
    line-height: 120%;
    margin: 0;
    text-transform: capitalize;
}

.smm-zenon-primary-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    opacity: 0.85;
    margin: 0;
}

.smm-zenon-feature-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.smm-zenon-list-item {
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}

.smm-zenon-list-item::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: bold;
}

.smm-zenon-showcase-image {
    width: 100%;
    max-width: 580px;
    height: auto;
    border-radius: 23px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.smm-zenon-showcase-image:hover {
    transform: scale(1.03);
}

/* --- Right Column (The Glass Container) --- */
.smm-zenon-process-panel {
    background: #00000036;
    border-radius: 44px;
    padding: 55px 45px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.smm-zenon-step-card {
    background: rgba(248, 248, 248, 0.11);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0px 4px 35.7px 0px rgba(0, 0, 0, 0.13);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.smm-zenon-step-card:hover {
    background: rgba(248, 248, 248, 0.18);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.smm-zenon-card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 29px;
    margin: 0 0 10px 0;
    color: #ffffff;
}

.smm-zenon-card-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    opacity: 0.8;
    margin: 0;
}

/* --- Full Responsiveness --- */
@media (max-width: 1150px) {
    .smm-zenon-layout-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .smm-zenon-content-stack {
        text-align: center;
        align-items: center;
    }

    .smm-zenon-main-heading {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .smm-zenon-workflow-block {
        padding: 60px 15px;
    }

    .smm-zenon-process-panel {
        padding: 40px 25px;
        border-radius: 32px;
    }

    .smm-zenon-list-item {
        font-size: 18px;
        line-height: 30px;
        text-align: left;
    }

    .smm-zenon-main-heading {
        font-size: 28px;
    }
}







.ppc-services-section {
    max-width: 1300px;
    margin: 40px auto 60px auto;
    padding: 0 20px;
    font-family: 'Instrument Sans', sans-serif;
}

.ppc-main-heading {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 38px;
    line-height: 120%;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 0;
    color: #000;
}

.ppc-services-grid {
    display: grid;
    /* This handles the 2-column to 1-column switch automatically */
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 24px;
}

.ppc-service-card {
    background: #F8F8F8;
    border: 1px solid #CECECE;
    border-radius: 20px;
    /* Matching the rounded corners in image */
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    transition: transform 0.3s ease;
}

.ppc-service-card:hover {
    transform: translateY(-5px);
}

.ppc-icon-box {
    min-width: 85px;
    height: 85px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ppc-icon-box i {
    color: white;
    font-size: 32px;
}

.ppc-text-content h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
}

.ppc-text-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
}

/* Responsive adjustments for smaller tablets and phones */
@media (max-width: 1000px) {
    .ppc-services-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .ppc-service-card {
        flex-direction: column;
        /* align-items: flex-start; */
        text-align: center;
        justify-content: center;
        align-items: center;
    }
}

.ppc-main-heading {
    font-size: 32px;
}

.social-services-cta {
    background: #F5F5F50F;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 50px 40px;
    border-radius: 24px;
    text-align: left;
    max-width: 100%;
    margin: 40px 0;
    box-sizing: border-box;
    transition: all 0.35s ease;
}

.social-services-cta:hover {
    background: rgba(245, 245, 245, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(-6px);
}

.social-service-title {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: left;
    margin-top: 0;
}

.social-service-text-cta {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* 📱 Tablet */
@media (max-width: 992px) {
    .social-services-cta {
        padding: 40px 25px;
    }

    .social-service-title {
        font-size: 24px;
    }

    .social-service-text-cta {
        font-size: 15px;
    }
}

/* 📱 Mobile */
@media (max-width: 576px) {
    .social-services-cta {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .social-service-title {
        font-size: 20px;
    }

    .social-service-text-cta {
        font-size: 14px;
        line-height: 1.5;
    }
}






/* Container and Typography */
.ppc-ai-optimization-section {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 20px;
    text-align: center;
    font-family: 'Instrument Sans', sans-serif;
}

.ppc-ai-heading {
    font-size: 38px;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 15px;
    color: #000;
    margin-top: 0;
}

.ppc-ai-description {
    max-width: 1000px;
    margin: 0 auto 40px auto;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* AI Points/Buttons Layout */
.ppc-ai-points-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Allows wrapping on smaller screens */
    gap: 20px;
}

.ppc-ai-point {
    /* Exact styles provided */
    background: linear-gradient(90deg, #0978FD 0%, #054897 100%);
    width: 357px;
    height: 68px;
    border-radius: 52px;

    /* Centering text inside the box */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Text styling */
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.ppc-ai-point:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(9, 120, 253, 0.3);
}

/* Responsiveness for different devices */
@media (max-width: 1200px) {
    .ppc-ai-point {
        width: 300px;
        /* Slightly smaller for 1200px screens */
        font-size: 17px;
    }
}

@media (max-width: 1000px) {
    .ppc-ai-heading {
        font-size: 32px;
    }

    .ppc-ai-point {
        width: 100%;
        /* Full width on tablets/mobile */
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .ppc-ai-heading {
        font-size: 28px;
    }

    .ppc-ai-point {
        height: 60px;
        font-size: 16px;
    }
}



.ppc-process-section {
    /* Exact Background Gradient Requested */
    background: linear-gradient(90deg, #054897 0%, #002857 100%);
    padding: 50px 20px;
    font-family: 'Instrument Sans', sans-serif;
}

.ppc-process-main-title {
    color: #ffffff;
    text-align: center;
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 50px;
    margin-top: 0;
}

.ppc-process-grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    /* Responsive Grid: 4 columns on desktop, auto-adjusts below */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.ppc-process-card {
    background: #ffffff;
    border-radius: 25px;
    /* Rounded corners like the image */
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease;
}

.ppc-process-card:hover {
    transform: translateY(-10px);
}

.ppc-process-number {
    /* Exact Icon Box Styles Requested */
    width: 54px;
    height: 54px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    border-radius: 12px;

    /* Centering the Number */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Number Typography */
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 25px;
}

.ppc-process-card h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #000;
}

.ppc-process-card p {
    font-size: 15px;
    line-height: 1.5;
    color: #444;
    margin: 0;
}

/* Responsiveness for Tablet/Mobile */
@media (max-width: 1200px) {
    .ppc-process-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for 1200px and 1000px */
    }
}

@media (max-width: 768px) {
    .ppc-process-grid {
        grid-template-columns: 1fr;
        /* 1 column for mobile */
    }

    .ppc-process-main-title {
        font-size: 32px;
    }

    .ppc-process-card {
        padding: 25px;
        align-items: center;
    }
}


/* SECTION */
.ppc-solutions-section {
    width: 100%;
    padding: clamp(40px, 6vw, 60px) 20px;
    background: #f8f9fa;
    display: flex;
    justify-content: center;
    font-family: 'Instrument Sans', sans-serif;
    box-sizing: border-box;
}

/* WRAPPER */
.ppc-solutions-wrapper {
    display: flex;
    gap: clamp(25px, 4vw, 40px);
    max-width: 1300px;
    width: 100%;
    align-items: stretch;
    /* ✅ KEY */
}

/* LEFT COLUMN */
.ppc-left-column {
    flex: 1;
    display: flex;
}

/* LEFT CONTENT */
.ppc-left-sticky {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* ✅ required */
    gap: 20px;
    width: 100%;
}

/* HEADING */
.ppc-section-heading {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0;
}

/* IMAGE WRAPPER */
.ppc-left-image {
    margin-top: 0;
    /* 🔥 pushes image to bottom */
    overflow: hidden;
    border-radius: 15px;
}

/* IMAGE */
.ppc-left-image img {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* hover effect */
.ppc-left-image:hover img {
    transform: scale(1.05);
    /* smooth zoom */
    filter: brightness(0.95);
    /* slight dark */
}

/* RIGHT COLUMN */
.ppc-right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CARD */
.ppc-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    background: #F8F8F8;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #CECECE;
    transition: all 0.3s ease;
}

.ppc-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* ICON */
.ppc-card-icon {
    min-width: 85px;
    height: 85px;
    border-radius: 10px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ppc-card-icon img {
    width: 40px;
    height: 40px;
}

/* TEXT */
.ppc-card-content {
    display: flex;
    flex-direction: column;
}

.ppc-card-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #1a1a1a;
}

.ppc-card-desc {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    margin: 0;
}

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

/* TABLET */
@media (max-width: 1100px) {
    .ppc-solutions-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .ppc-left-column,
    .ppc-right-column {
        width: 100%;
        max-width: 700px;
    }

    .ppc-left-sticky {
        height: auto;
    }

    .ppc-left-image {
        margin-top: 0;
        /* reset */
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .ppc-section-heading {
        font-size: 26px;
    }

    .ppc-feature-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 15px;
    }

    .ppc-card-icon {
        width: 70px;
        height: 70px;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
    .ppc-solutions-section {
        padding: 40px 15px;
    }

    .ppc-card-title {
        font-size: 18px;
    }

    .ppc-card-desc {
        font-size: 14px;
    }

    .ppc-card-icon {
        width: 60px;
        height: 60px;
    }
}









.app-store-optimization {
    padding: 40px 20px 50px 20px;
    background-color: #fff;
}

/* CONTAINER */
.app-store-optimization .aso-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1300px;
    margin: 0 auto;
    gap: 50px;
}

/* IMAGE SIDE */
.app-store-optimization .aso-image-side {
    flex: 1 1 500px;
    max-width: 600px;
    overflow: hidden;
    border-radius: 30px;
}

.app-store-optimization .aso-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔥 keeps layout clean */
    display: block;
    border-radius: 30px;
    transition: transform 0.5s ease;
}

.app-store-optimization .aso-image-side:hover img {
    transform: scale(1.06);
}

/* TEXT SIDE */
.app-store-optimization .aso-content-side {
    flex: 1 1 500px;
    max-width: 600px;
}

/* HEADING */
.app-store-optimization h1 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #000;
}

/* TEXT */
.app-store-optimization p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* ========================= */
/* 💻 LARGE TABLETS (1024px) */
/* ========================= */
@media (max-width: 1024px) {
    .app-store-optimization .aso-container {
        gap: 30px;
    }

    .app-store-optimization h1 {
        font-size: 34px;
    }
}

/* ========================= */
/* 📱 TABLET (768px) */
/* ========================= */
@media (max-width: 768px) {
    .app-store-optimization .aso-container {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .app-store-optimization .aso-image-side,
    .app-store-optimization .aso-content-side {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .app-store-optimization h1 {
        font-size: 28px;
    }

    .app-store-optimization p {
        font-size: 15px;
    }
}

/* ========================= */
/* 📱 SMALL MOBILE (480px) */
/* ========================= */
@media (max-width: 480px) {
    .app-store-optimization {
        padding: 50px 15px;
    }

    .app-store-optimization h1 {
        font-size: 24px;
        line-height: 1.3;
    }

    .app-store-optimization p {
        font-size: 14px;
    }

    .app-store-optimization .aso-image-side {
        border-radius: 20px;
    }

    .app-store-optimization .aso-image-side img {
        border-radius: 20px;
    }
}






.aso2-features {
    background: linear-gradient(90deg, #002857 0%, #054897 100%);
    padding: 40px 20px 80px 20px;
    color: #ffffff;
    font-family: 'Instrument Sans', sans-serif;
}

.aso2-features .aso2-container {
    max-width: 1300px;
    margin: 0 auto;
}

.aso2-section-heading {
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: 37px;
    line-height: 120%;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 0%;
}

.aso2-features-grid {
    display: grid;
    /* Default 3 columns for 1400px and 1200px */
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.aso2-feature-card {
    background: #F5F5F50F;
    /* Your exact card color */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.aso2-feature-card h3 {
    font-weight: 600;
    font-size: 26px;
    line-height: 29px;
    margin-bottom: 15px;
    letter-spacing: 0%;
    margin-top: 0;
}

.aso2-feature-card p {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

/* Premium Hover Effect */
.aso2-feature-card:hover {
    background: rgba(245, 245, 245, 0.15);
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Responsiveness */

/* Tablet View (around 1000px) */
@media (max-width: 1024px) {
    .aso2-features-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns */
    }
}

/* Mobile View (under 768px) */
@media (max-width: 768px) {
    .aso2-section-heading {
        font-size: 28px;
    }

    .aso2-features-grid {
        grid-template-columns: 1fr;
        /* 1 column */
    }

    .aso2-feature-card {
        padding: 30px 20px;
    }
}




*/
/* Specificity Boost: Using the section class prefix for every element */

.aso3-services-section {
    padding: 40px 0 80px 0;
    background-color: #ffffff;
    width: 100%;
    display: block;
}




.aso3-services-section .aso3-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 50px 20px 60px 20px;
}

.aso3-services-section .aso3-main-heading {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 37px;
    line-height: 120%;
    text-align: center;
    color: #000000;
    margin-bottom: 50px;
    margin-top: 0;
}

.aso3-services-section .aso3-grid-wrapper {
    display: grid;
    /* Desktop: 4 columns */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.aso3-services-section .aso3-card-item {
    background: #F5F5F5;
    border: 1px solid rgba(0, 0, 0, 0.2);
    /* #00000033 */
    border-radius: 24px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.aso3-services-section .aso3-card-title {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.2;
    color: #000000;
    margin: 0 0 15px 0;
}

.aso3-services-section .aso3-card-description {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: #444444;
    margin: 0;
}

/* Premium Hover State */
.aso3-services-section .aso3-card-item:hover {
    background: #ffffff;
    transform: translateY(-8px);
    border-color: #0b55a3;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Responsive Logic */

/* 1200px and below - 3 columns */
@media screen and (max-width: 1200px) {
    .aso3-services-section .aso3-grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 1000px and below - 2 columns */
@media screen and (max-width: 1000px) {
    .aso3-services-section .aso3-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .aso3-services-section .aso3-main-heading {
        font-size: 32px;
    }
}

/* 600px and below - 1 column */
@media screen and (max-width: 600px) {
    .aso3-services-section .aso3-grid-wrapper {
        grid-template-columns: 1fr;
    }

    .aso3-services-section .aso3-main-heading {
        font-size: 26px;
    }

    .aso3-services-section .aso3-card-item {
        padding: 20px;
    }
}









.asov1-sec-wrap {
    max-width: 100%;
    /* margin: 40px auto 60px; */
    padding: 0 20px;
    font-family: 'Instrument Sans', sans-serif;
    background: linear-gradient(90deg, #002857 0%, #054897 100%);

}

.asov1-main-title {
    font-weight: 600;
    font-size: 38px;
    line-height: 120%;
    text-align: center;
    margin-bottom: 15px;
    color: #FFFFFF;
    margin-top: 0;
}

.asov1-description {
    color: #FFFFFF;
    margin: 0 auto 60px auto;
    text-align: center;
    font-weight: 400px;
    font-size: 16px;
    font-family: instrument sans;
}

/* GRID */
.asov1-grid-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 24px;

}

.asov1-container {
    padding: 40px 20px 80px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* CARD */
.asov1-card-item {
    background: #FFFFFF;
    border: 1px solid #CECECE;
    border-radius: 20px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    transition: all 0.3s ease;
}

.asov1-card-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* ICON */
.asov1-icon-wrap {
    min-width: 85px;
    height: 85px;
    background: linear-gradient(180deg, #0978FD 0%, #054897 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asov1-icon-wrap img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

/* TEXT */
.asov1-text-wrap h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
}

.asov1-text-wrap p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
}

/* TABLET */
@media (max-width: 1000px) {
    .asov1-grid-box {
        grid-template-columns: 1fr;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .asov1-card-item {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }

    .asov1-main-title {
        font-size: 28px;
    }

    .asov1-text-wrap h3 {
        font-size: 20px;
    }

    .asov1-text-wrap p {
        font-size: 14px;
    }

    .asov1-icon-wrap {
        width: 75px;
        height: 75px;
    }

    .asov1-icon-wrap img {
        width: 36px;
        height: 36px;
    }
}








/* --- ASO SECTION CORE STYLES --- */
.obfl-canvas-root-99 {
    max-width: 1300px;
    /* margin: 15px auto 40px auto; */
    padding: 40px 20px 40px 20px;
    text-align: center;
    box-sizing: border-box;
    margin: 0 auto;
}

.obfl-header-alpha-v1 {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    font-weight: 600;
    margin-bottom: 40px;
    color: #000000;
    letter-spacing: -0.5px;
    margin-top: 0;
}

/* --- GRID ARCHITECTURE --- */
.obfl-grid-matrix-01 {
    display: grid;
    /* Automatically handles columns based on screen size */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* --- INTERACTIVE COMPONENT --- */
.obfl-card-bento-88 {
    background: #ffffff;
    border: 1px solid #0978FD;
    border-radius: 21px;
    padding: 20px 25px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    box-shadow: 0px 13px 20px 0px #00000012;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
}

/* HOVER LOGIC */
.obfl-card-bento-88:hover {
    transform: translateY(-8px);
    border-color: #007bff;
    box-shadow: 0 20px 25px -5px rgba(0, 123, 255, 0.1), 0 10px 10px -5px rgba(0, 123, 255, 0.04);
}

.obfl-title-tag-22 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #000000;
}

.obfl-text-body-x {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555555;
    margin: 0;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 600px) {
    .obfl-canvas-root-99 {
        padding: 10px;
    }

    .obfl-card-bento-88 {
        padding: 30px 20px;
    }
}







.kx-case-wrapper-77 {
    width: 100%;
    padding: 40px 20px 50px 20px;
    font-family: 'Instrument Sans', sans-serif;
    background: #F4F4F4;
    border-radius: 20px;
}

/* CONTAINER */
.kx-case-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* HEADING */
.kx-main-title-v9 {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #111;
    margin-top: 0;

}

/* ================= MAIN LAYOUT ================= */
.kx-main-container-x1 {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    /* 🔥 center alignment like UI */
}

/* ================= IMAGE SIDE ================= */
.kx-media-base-44 {
    flex: 1.2;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    max-height: 360px;
    /* 🔥 controls image height */
}

.kx-asset-fluid-88 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.kx-media-base-44:hover .kx-asset-fluid-88 {
    transform: scale(1.03);
}

/* ================= CONTENT SIDE ================= */
.kx-stack-column-32 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* CARD */
.kx-info-card-z5 {
    background: #ffffff;
    padding: 22px 26px;
    border-radius: 16px;
    border: 1px solid #CECECE;
    transition: all 0.3s ease;
}

.kx-info-card-z5:hover {
    transform: translateX(-6px);
    border-color: #007bff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

/* TEXT */
.kx-label-accent-2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: #000;
}

.kx-detail-text-v0 {
    font-size: 0.95rem;
    color: #444;
    margin: 0;
    line-height: 1.5;
}

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

/* 💻 Tablet */
@media (max-width: 1024px) {
    .kx-main-container-x1 {
        gap: 20px;
    }

    .kx-main-title-v9 {
        font-size: 1.8rem;
    }

    .kx-media-base-44 {
        max-height: 320px;
    }
}

/* 📱 Tablet */
@media (max-width: 900px) {
    .kx-main-container-x1 {
        flex-direction: column;
        align-items: stretch;
    }

    .kx-media-base-44 {
        max-height: none;
        height: 280px;
    }

    .kx-info-card-z5:hover {
        transform: translateY(-5px);
    }
}

/* 📱 Mobile */
@media (max-width: 600px) {
    .kx-case-wrapper-77 {
        padding: 40px 15px;
    }

    .kx-main-title-v9 {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }

    .kx-media-base-44 {
        height: 220px;
        border-radius: 14px;
    }

    .kx-info-card-z5 {
        padding: 18px;
    }

    .kx-label-accent-2 {
        font-size: 1rem;
    }

    .kx-detail-text-v0 {
        font-size: 0.88rem;
    }
}

/* 📱 Small Mobile */
@media (max-width: 400px) {
    .kx-media-base-44 {
        height: 190px;
    }

    .kx-main-title-v9 {
        font-size: 1.3rem;
    }
}






.tx-vortex-99-wrapper {
    background: linear-gradient(90deg, #002857 0%, #054897 100%);
    font-family: 'Inter', -apple-system, sans-serif;
    color: #ffffff;
    overflow: hidden;
}

.tx-vortex-99-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 20px 50px 20px;
}

.tx-vortex-99-head-group {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 0;
}

.tx-vortex-99-title-main {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.tx-vortex-99-subtitle-sub {
    font-size: 1.05rem;
    opacity: 0.85;
    max-width: 700px;
    margin: 0 auto;
}

/* --- GRID SYSTEM --- */
.tx-vortex-99-grid-matrix {
    display: flex;
    gap: 30px;
}

/* --- PREMIUM CARD DESIGN --- */
.tx-vortex-99-bento-unit {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    /* Ultra-subtle glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    backdrop-filter: blur(10px);
    position: relative;
}

/* PREMIUM HOVER EFFECT */
.tx-vortex-99-bento-unit:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4);
}

.tx-vortex-99-flex-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.tx-vortex-99-ico-asset {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.tx-vortex-99-ico-label {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.tx-vortex-99-copy-body {
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    text-align: left;
}

/* --- RESPONSIVE LOGIC --- */
@media (max-width: 992px) {
    .tx-vortex-99-grid-matrix {
        flex-direction: column;
        align-items: center;
    }

    .tx-vortex-99-bento-unit {
        width: 100%;
        max-width: 600px;
        padding: 30px;
    }
}

@media (max-width: 480px) {
    .tx-vortex-99-wrapper {
        padding: 50px 15px;
    }

    .tx-vortex-99-ico-label {
        font-size: 1.2rem;
    }
}





.qs-vortex-z9-frame {
    max-width: 1300px;
    margin: 40px auto 60px auto;
    padding: 0 20px;
    text-align: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.qs-vortex-z9-headline {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    color: #000000;
    margin-bottom: 45px;
    letter-spacing: -0.02em;
    margin-top: 0;
}

/* --- RESPONSIVE GRID --- */
.qs-vortex-z9-matrix {
    display: grid;
    /* Adapts from 1 column on mobile to 4 columns on desktop */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    justify-content: center;
}

/* --- PILL COMPONENT --- */
.qs-vortex-z9-pill-item {
    background: linear-gradient(90deg, #007bff 0%, #004494 100%);
    padding: 22px 30px;
    border-radius: 100px;
    /* Perfect pill shape */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* PREMIUM HOVER: Scale + Glow + Lift */
.qs-vortex-z9-pill-item:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0, 68, 148, 0.4);
    filter: brightness(1.1);
}

.qs-vortex-z9-pill-label {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* --- MOBILE TWEAKS --- */
@media (max-width: 600px) {
    .qs-vortex-z9-matrix {
        grid-template-columns: 1fr;
        /* Stack buttons on small screens */
        max-width: 320px;
        margin: 0 auto;
    }

    .qs-vortex-z9-pill-item {
        padding: 18px 25px;
    }

    .qs-vortex-z9-pill-label {
        font-size: 1rem;
    }
}






/* =========================
   SECTION BASE
========================= */
.aiSeo-store-optimization {
    padding: 40px 20px 40px 20px;
    background-color: #fff;
    max-width: 1300px;
    background: linear-gradient(180deg, rgba(3, 129, 230, 0.12) 0%, rgba(5, 72, 151, 0) 100%);
    border-radius: 30px;
    margin: 20px auto;
}

/* =========================
   CONTAINER
========================= */
.aiSeo-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 50px;
}

/* =========================
   IMAGE SIDE (IMPORTANT FIX)
========================= */
.aiSeo-store-optimization .aiSeo-image-side {
    flex: 1 1 500px;
    max-width: 600px;

    position: relative; /* 🔥 REQUIRED */
    overflow: hidden;
    border-radius: 30px;
}

/* =========================
   SLIDER WRAPPER (FIXED HEIGHT)
========================= */
.aiSeo-slider {
    position: relative;
    width: 100%;

    aspect-ratio: 4 / 3; /* 🔥 RESPONSIVE HEIGHT FIX */
}

/* =========================
   SLIDES
========================= */
.aiSeo-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 30px;

    opacity: 0;

    /* start from right */
    transform: translateX(80px) scale(1.03);

    transition:
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.6s ease;
}

/* ACTIVE IMAGE */
.aiSeo-slide.aiSeo-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 2;
}

/* EXIT IMAGE */
.aiSeo-slide.aiSeo-exit {
    opacity: 0;
    transform: translateX(-80px) scale(0.98);
    z-index: 1;
}

/* =========================
   HOVER EFFECT (FIXED)
========================= */
.aiSeo-image-side:hover .aiSeo-slide.aiSeo-active {
    transform: translateX(0) scale(1.06);
}

/* =========================
   TEXT SIDE
========================= */
.aiSeo-store-optimization .aiSeo-content-side {
    flex: 1 1 500px;
    max-width: 600px;
}

/* =========================
   HEADING
========================= */
.aiSeo-store-optimization h1 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #000;
}

/* =========================
   TEXT
========================= */
.aiSeo-store-optimization p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* =========================
   TABLET (1024px)
========================= */
@media (max-width: 1024px) {
    .aiSeo-store-optimization .aiSeo-container {
        gap: 30px;
    }

    .aiSeo-store-optimization h1 {
        font-size: 34px;
    }
}

/* =========================
   TABLET (768px)
========================= */
@media (max-width: 768px) {
    .aiSeo-store-optimization .aiSeo-container {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .aiSeo-store-optimization .aiSeo-image-side,
    .aiSeo-store-optimization .aiSeo-content-side {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .aiSeo-store-optimization h1 {
        font-size: 28px;
    }

    .aiSeo-store-optimization p {
        font-size: 15px;
    }
}

/* =========================
   MOBILE (480px)
========================= */
@media (max-width: 480px) {
    .aiSeo-store-optimization {
        padding: 50px 15px;
    }

    .aiSeo-store-optimization h1 {
        font-size: 24px;
        line-height: 1.3;
    }

    .aiSeo-store-optimization p {
        font-size: 14px;
    }

    .aiSeo-store-optimization .aiSeo-image-side {
        border-radius: 20px;
    }

    .aiSeo-slide {
        border-radius: 20px;
    }
}



/* === SECTION === */
.kx-aiseo-svc-section {
    background: #FFFFFF;
    padding: 0 0 30px 0;
    font-family: 'Instrument Sans', sans-serif;
}

/* === CONTAINER === */
.kx-aiseo-svc-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === HEADER === */
.kx-aiseo-svc-header {
    margin-bottom: 40px;
}

.kx-aiseo-svc-title {
    font-size: 40px;
    font-weight: 600;
    margin: 15px 0;
    color: #0A0A0A;
    text-align: center;
}

/* === GRID === */
.kx-aiseo-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* === CARD === */
.kx-aiseo-svc-card {
    width: 100%;
    max-width: 403px;
    min-height: 265px;
    box-shadow: 0px 17px 34px 0px #00000012;

    background: #ffffff;
    border: 1px solid #0978FD6E;
    border-radius: 24px;

    padding: 20px 30px;
    position: relative;

    transition: all 0.3s ease;
}

/* Hover */
.kx-aiseo-svc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(9, 120, 253, 0.15);
    border: none;
}

/* Glow */
.kx-aiseo-svc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;

    background: linear-gradient(120deg,
            transparent,
            rgba(9, 120, 253, 0.7),
            transparent);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: 0.3s;
}

.kx-aiseo-svc-card:hover::before {
    opacity: 1;
}

/* TEXT */
.kx-aiseo-svc-card h3 {
    font-size: 22px;
    font-weight: 600;
    color: #0A0A0A;
    margin-bottom: 12px;
}

.kx-aiseo-svc-card p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .kx-aiseo-svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .kx-aiseo-svc-grid {
        grid-template-columns: 1fr;
    }

    .kx-aiseo-svc-title {
        font-size: 30px;
    }

    .kx-aiseo-svc-card {
        max-width: 100%;
    }
}




/* --- FULL WIDTH SECTION --- */
.kx-aso-bnf-section {
    width: 100%;
    background: linear-gradient(270deg, #054897 0%, #012959 100%);
    padding: 60px 20px;
    box-sizing: border-box;
}

/* --- INNER CONTAINER (CENTERED) --- */
.kx-aso-bnf-container {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

/* --- TITLE --- */
.kx-aso-bnf-title {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    font-weight: 600;
    margin-bottom: 40px;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-top: 0;
}

/* --- GRID --- */
.kx-aso-bnf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* --- CARD --- */
.kx-aso-bnf-card {
    background: #F5F5F50F;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 21px;
    padding: 30px 25px;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;

    box-shadow: 0px 13px 20px 0px #00000012;

    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;

    backdrop-filter: blur(8px);
}

/* --- HOVER --- */
.kx-aso-bnf-card:hover {
    transform: translateY(-8px);
    border-color: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(255, 255, 255, 0.1),
        0 10px 10px -5px rgba(255, 255, 255, 0.05);
}

/* --- TEXT --- */
.kx-aso-bnf-card-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
}

.kx-aso-bnf-card-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #E0E0E0;
    margin-bottom: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .kx-aso-bnf-section {
        padding: 40px 15px;
    }

    .kx-aso-bnf-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .kx-aso-bnf-card {
        padding: 20px;
    }
}





.stats-wrapper {
    font-family: 'Instrument Sans', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Auto-fit creates columns based on available space */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px 20px 60px 20px;
}

.stat-card {
    /* Your requested gradient */
    background: linear-gradient(90deg, #0978FD 0%, #054897 100%);
    color: #ffffff;
    padding: 40px 20px;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}

.stat-text {
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.9;
    text-transform: capitalize;
}

/* Adjustments for smaller mobile screens */
@media (max-width: 480px) {
    .stat-number {
        font-size: 2.8rem;
    }

    .stat-text {
        font-size: 1rem;
    }
}







.seo-nexus-hub {
    background-color: #032a6d;
    /* Deep blue background */
    padding: 50px 20px 80px 20px;
    font-family: 'Instrument Sans', sans-serif;
    color: #ffffff;
}

.seo-nexus-container {
    max-width: 1300px;
    margin: 0 auto;
}

.seo-nexus-header {
    margin-bottom: 50px;
    text-align: center;
}

.seo-nexus-title {
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 0;
}

.seo-nexus-subtitle {
    font-size: 16px;
    color: #FFFFFFD9;
    margin: 0 auto;
    /* Light blue accent color */
    line-height: 1.6;
    max-width: 800px;
}

/* Grid Layout */
.seo-nexus-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 2 columns for desktop */
    gap: 24px;
}

/* Card Styling */
.seo-nexus-card {
    /* background: rgba(255, 255, 255, 0.05); */
    /* Subtle glassmorphism effect */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    border-radius: 12px;
    padding: 20px 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, background 0.3s ease;
}

.seo-nexus-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
}

/* Default accent (blue) */
.seo-nexus-card::before {
    background-color: #4db3ff;
}

/* Alternate rows (2nd, 4th, etc.) */
.seo-nexus-card:nth-child(4n+3)::before,
.seo-nexus-card:nth-child(4n+4)::before {
    background-color: #ffffff;
}


/* Left side accent border */
.seo-nexus-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 4px;
    background-color: #4db3ff;
    border-radius: 0 4px 4px 0;
}

.seo-nexus-number {
    font-size: 1.8rem;
    font-weight: 700;
    opacity: 0.8;
    min-width: 40px;
}

.seo-nexus-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
    font-family: 'Instrument Sans', sans-serif;
}

.seo-nexus-content p {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.7;
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    color: #FFFFFFBA;

}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .seo-nexus-grid {
        grid-template-columns: 1fr;
        /* 1 column for mobile/tablets */
    }

    .seo-nexus-title {
        font-size: 2rem;
    }

    .seo-nexus-card::before {
        background-color: #4db3ff;
    }

    .seo-nexus-card:nth-child(even)::before {
        background-color: #ffffff;
    }
}




.comp-nexus-section {
    padding: 20px 20px 40px 20px;
    font-family: 'Instrument Sans', sans-serif;
    background-color: #ffffff;
    color: #1a1a1a;
}

.comp-nexus-container {
    max-width: 1300px;
    margin: 0 auto;
}

.comp-nexus-header {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 0;
}

.comp-nexus-main-title {
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 15px;
}

.comp-nexus-intro {
    font-size: 16px;
    color: #666;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.5;
}

/* GRID */
.comp-nexus-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

/* COMMON CARD */
.comp-nexus-card {
    padding: 50px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    gap: 35px;

    position: relative;
    overflow: hidden;
}

/* ================= LIGHT CARD ================= */
.comp-nexus-card-light {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        background 0.35s ease;

    /* 🔥 remove perspective */
    transform: translateZ(0);

    border: 1px solid #0978FD75;
    box-shadow: 0px 18px 39.9px 0px #0000000F;
    background: #F5FAFF;

    /* 🔥 stabilize text */
    backface-visibility: hidden;
    will-change: transform;
}

/* 🔥 Hover */
.comp-nexus-card-light:hover {
    /* ❌ removed scale + perspective */
    transform: translateY(-12px);

    background: #F5FAFF;

    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.05),
        0 25px 50px rgba(9, 120, 253, 0.18),
        0 40px 80px rgba(9, 120, 253, 0.12);
}



/* ================= DARK CARD ================= */
.comp-nexus-card-dark {
    background: linear-gradient(180deg, #01295A 0%, #054897 100%);
    box-shadow: 0px 18px 39.9px 0px #0000000F;
    color: #ffffff;

    transform: translateZ(0);

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;

    backface-visibility: hidden;
    will-change: transform;
}

.comp-nexus-card-dark:hover {
    transform: translateY(-12px);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.25),
        0 30px 70px rgba(0, 0, 0, 0.35),
        0 50px 100px rgba(0, 0, 0, 0.25);
}


/* CONTENT */
.comp-nexus-item-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comp-nexus-label {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.comp-nexus-description {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
}

/* DARK TEXT */
.comp-nexus-card-dark .comp-nexus-label {
    color: #FFFFFF;
}

.comp-nexus-card-dark .comp-nexus-label-white {
    color: #ffffff;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .comp-nexus-wrapper {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    .comp-nexus-card {
        padding: 35px;
    }

    .comp-nexus-main-title {
        font-size: 2rem;
    }
}





/* SECTION */
.kx-aso-ai-block-77 {
    padding: 0 20px 50px 20px;
    background-color: #fff;
}

/* CONTAINER */
.kx-aso-ai-block-77 .kx-aso-ai-container-77 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1300px;
    margin: 0 auto;
    gap: 50px;
}

/* IMAGE SIDE */
.kx-aso-ai-block-77 .kx-aso-ai-media-77 {
    flex: 1 1 500px;
    max-width: 600px;
    overflow: hidden;
    border-radius: 30px;
}

.kx-aso-ai-block-77 .kx-aso-ai-media-77 img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 30px;
    transition: transform 0.5s ease;
}

.kx-aso-ai-block-77 .kx-aso-ai-media-77:hover img {
    transform: scale(1.06);
}

/* TEXT SIDE */
.kx-aso-ai-block-77 .kx-aso-ai-content-77 {
    flex: 1 1 500px;
    max-width: 600px;
}

/* HEADING */
.kx-aso-ai-block-77 .kx-aso-ai-title-77 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #000;
}

/* TEXT */
.kx-aso-ai-block-77 .kx-aso-ai-desc-77 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* ========================= */
/* 💻 LARGE TABLETS (1024px) */
/* ========================= */
@media (max-width: 1024px) {
    .kx-aso-ai-block-77 .kx-aso-ai-container-77 {
        gap: 30px;
    }

    .kx-aso-ai-block-77 .kx-aso-ai-title-77 {
        font-size: 34px;
    }
}

/* ========================= */
/* 📱 TABLET (768px) */
/* ========================= */
@media (max-width: 768px) {
    .kx-aso-ai-block-77 .kx-aso-ai-container-77 {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .kx-aso-ai-block-77 .kx-aso-ai-media-77 img {
        min-height: auto;
    }

    .kx-aso-ai-block-77 .kx-aso-ai-media-77,
    .kx-aso-ai-block-77 .kx-aso-ai-content-77 {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .kx-aso-ai-block-77 .kx-aso-ai-title-77 {
        font-size: 28px;
    }

    .kx-aso-ai-block-77 .kx-aso-ai-desc-77 {
        font-size: 15px;
    }
}

/* ========================= */
/* 📱 SMALL MOBILE (480px) */
/* ========================= */
@media (max-width: 480px) {
    .kx-aso-ai-block-77 {
        padding: 50px 15px;
    }

    .kx-aso-ai-block-77 .kx-aso-ai-title-77 {
        font-size: 24px;
        line-height: 1.3;
    }

    .kx-aso-ai-block-77 .kx-aso-ai-desc-77 {
        font-size: 14px;
    }

    .kx-aso-ai-block-77 .kx-aso-ai-media-77 {
        border-radius: 20px;
    }

    .kx-aso-ai-block-77 .kx-aso-ai-media-77 img {
        border-radius: 20px;
    }
}


.seo-comp-u7 {
    padding: 30px 20px 30px 20px;
    background-color: #ffffff;
    font-family: 'Instrument Sans', sans-serif;
}

/* =========================
   CONTAINER
========================= */
.seo-comp-u7__container {
    max-width: 1100px;
    margin: 0 auto;
}

/* =========================
   HEADER
========================= */
.seo-comp-u7__header {
    text-align: center;
    margin-bottom: 30px;
}

.seo-comp-u7__main-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
}

.seo-comp-u7__intro-text {
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* =========================
   GRID
========================= */
.seo-comp-u7__grid {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* =========================
   SECTIONS
========================= */
.seo-comp-u7__section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;

    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
}

/* alignment */
.seo-comp-u7__section--left {
    text-align: right;
    animation-delay: 0.2s;
}

.seo-comp-u7__section--right {
    text-align: left;
    animation-delay: 0.4s;
}

/* =========================
   💎 PREMIUM ITEM HOVER
========================= */
.seo-comp-u7__item {
    padding: 12px 14px;
    border-radius: 12px;
    position: relative;

    transition: all 0.35s ease;
    border: 1px solid transparent;
}

/* hover effect */
.seo-comp-u7__item:hover {
    transform: translateY(-5px);
    background: rgba(248, 250, 252, 0.75);

    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.10);
}

/* =========================
   LABEL
========================= */
.seo-comp-u7__label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2563eb;
    margin: 0 0 8px 0;

    transition: color 0.3s ease;
}

.seo-comp-u7__item:hover .seo-comp-u7__label {
    color: #1d4ed8;
}

/* =========================
   DETAIL TEXT
========================= */
.seo-comp-u7__detail {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;

    opacity: 0.85;
    transition: all 0.3s ease;
}

.seo-comp-u7__item:hover .seo-comp-u7__detail {
    color: #1e293b;
    opacity: 1;
}

/* =========================
   ANIMATION
========================= */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 800px) {

    .seo-comp-u7__grid {
        flex-direction: column;
        gap: 60px;
    }

    .seo-comp-u7__section {
        text-align: center;
    }

    .seo-comp-u7__section--left {
        background-color: #f8fafc;
        text-align: center;
        padding: 20px;
        border-radius: 12px;
    }

    .seo-comp-u7__section--right {
        text-align: center;
        padding: 20px;
        border-radius: 12px;
    }

    .seo-comp-u7__main-title {
        font-size: 1.8rem;
    }
}












/* =========================
   SECTION (NO BACKGROUND BOX)
========================= */
.llm-seo-section {
    padding: 60px 20px;
    background: #ffffff; /* clean base only */
    font-family: 'Instrument Sans';
}

/* =========================
   CONTAINER
========================= */
.llm-seo-container {
    max-width: 1300px;
    margin: 0 auto;

    display: flex;
    gap: 50px;
    align-items: stretch; /* 🔥 KEY FIX (equal height) */
}

/* =========================
   IMAGE SIDE
========================= */
.llm-seo-image {
    flex: 1;
    border-radius: 30px;
    overflow: hidden;

    display: flex;          /* 🔥 equal height support */
}

/* slider full height */
.llm-seo-slider {
    width: 100%;
    height: 100%;
    aspect-ratio: unset; /* remove restriction */
}

/* image */
.llm-seo-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 30px;

    /* IMPORTANT for smooth hover */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.8s ease;
    will-change: transform;
}

/* ================= HOVER EFFECT ================= */
.llm-seo-image:hover .llm-seo-slide {
    transform: scale(1.06);
    filter: brightness(1.05) contrast(1.05);
}

/* =========================
   CONTENT SIDE
========================= */
.llm-seo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center */
}

/* heading */
.llm-seo-content h1 {
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #0b1b3a;
}

/* paragraph */
.llm-seo-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
    .llm-seo-container {
        gap: 30px;
    }

    .llm-seo-content h1 {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .llm-seo-container {
        flex-direction: column;
    }

    .llm-seo-image {
        height: 320px; /* fixed mobile height */
    }
}

@media (max-width: 480px) {
    .llm-seo-content h1 {
        font-size: 26px;
    }

    .llm-seo-content p {
        font-size: 14px;
    }
}







/* Scoped Styles to prevent global conflicts */
.llm-svc-main-wrapper {
    margin: 0;
    padding: 30px 20px 80px 20px;
    background: linear-gradient(180deg, rgba(3, 129, 230, 0.08) 0%, rgba(5, 72, 151, 0) 100%);
    font-family: 'Instrument Sans', sans-serif;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.llm-svc-content-container {
    max-width: 1300px;
    width: 100%;
}

.llm-svc-main-heading {
    text-align: center;
    font-size: 38px; /* Responsive font size */
    font-weight: 600;
    margin-bottom: 50px;
    color: #111;
}

.llm-svc-cards-grid {
    display: grid;
    /* Responsive Grid: 3 columns on desktop, 2 on tablet, 1 on mobile */
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px;
}

.llm-svc-grid-item {
    background: #ffffff;
    padding: 45px 35px;
    border-radius: 24px;
    border: 1px solid #0978FD6E;
    box-shadow: 0px 17px 34px 0px #00000012;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease;
    cursor: default;
    display: flex;
    flex-direction: column;
}

.llm-svc-card-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
    line-height: 1.3;
    color: #000;
}

.llm-svc-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
    font-weight: 400;
}

/* Premium Hover State */
.llm-svc-grid-item:hover {
    transform: translateY(-10px);
    border-color: #0978FD;
    box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.1);
}

/* Tablet Layout (Max 1024px) */
@media (max-width: 1024px) {
    .llm-svc-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .llm-svc-main-wrapper {
        padding: 60px 20px;
    }
}

/* Mobile Layout (Max 600px) */
@media (max-width: 600px) {
    .llm-svc-cards-grid {
        grid-template-columns: 1fr;
    }
    .llm-svc-grid-item {
        padding: 30px 25px;
    }
    .llm-svc-main-heading {
        margin-bottom: 40px;
    }
}





.llm-seo-wrapper {
  padding: 40px 20px 60px 20px;

  background: linear-gradient(90deg, #002857 0%, #054897 100%);
  color: #ffffff;
  
}

.llm-seo-key{
    max-width: 1300px;
    margin: 0 auto;
    border-radius: 10px;
}

.llm-seo-main-title {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 37px;
  line-height: 120%;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0;
}

.llm-seo-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 20px;
}

.llm-seo-pill-item {
    background: #F5F5F50F;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    padding: 10px 26px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    letter-spacing: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ================= PREMIUM HOVER ================= */
.llm-seo-pill-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 1.5px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(0, 123, 255, 0.8),
        transparent
    );

    background-size: 200% 100%;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    transition: opacity 0.3s ease;
}

/* hover trigger */
.llm-seo-pill-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
}

/* show animated border */
.llm-seo-pill-item:hover::before {
    opacity: 1;
    animation: pillBorderGlow 1s linear;
}

/* animation */
@keyframes pillBorderGlow {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Tablet responsiveness */
@media (max-width: 1024px) {
  .llm-seo-grid-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .llm-seo-grid-layout {
    grid-template-columns: 1fr;
  }
  .llm-seo-main-title {
    font-size: 28px;
  }
}






 :root {
        --card-bg: #1a1a1a;
        /* Dark card color from your image */
        --accent: #ff6600;
        /* Orange arrow color */
        --text-main: black;
        --text-muted: #524242;
    }

    .blog-section {
        background-color: #ffffff;
        /* White section background */
        padding: 10px 20px 0 20px;
        font-family: 'Instrument Sans';

    }

    .blog-container {
        max-width: 1300px;
        margin: 0 auto;
        display: grid;
        /* Responsive Grid: 4 columns on desktop, 1 on mobile */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }

    .blog-card {
        background: white;
        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        border: 1px solid #e5e7eb;
        /* soft gray border */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
        /* very subtle shadow */


    }

    /* --- Premium Hover Effect --- */
    .blog-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }

    .image-box {
        position: relative;
        overflow: hidden;
        height: 200px;
    }

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

    .blog-card:hover .image-box img {
        transform: scale(1.1);
        /* Zoom effect on hover */
    }

    /* The Orange Arrow from your image */
    .arrow-icon {
        position: absolute;
        bottom: -50px;
        /* Hidden initially */
        right: 15px;
        background: #0066ff;
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-weight: bold;
    }

    .blog-card:hover .arrow-icon {
        bottom: 15px;
        /* Slides up on hover */
    }

    .card-content {
        padding: 20px;
        color: var(--text-main);
        flex-grow: 1;
    }

    .card-content h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;
        line-height: 1.4;
        font-weight: 600;
        margin-top: 5px;
    }

    .card-content p {
        color: var(--text-muted);
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .card-footer {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #c7b3b3;
        padding-top: 15px;
        font-size: 0.8rem;
        color: #8c8181;
        font-weight: 500;
        
    }
    .card-footer i{
        margin-right: 7px;
    }

    .our-blogs {
        font-size: 35px;
        font-weight: 700;
        color: #000;
        margin-bottom: 15px;
        margin-top: 0px !important;
        text-align: center;
    }
.blog-section a{
        text-decoration: none;
    }

    .blog-title-wrapper {
        display: flex;
        justify-content: center;
        font-size: 35px;
        font-weight: 700;
        color: #000;
        margin-bottom: 30px;
        margin-top: 15px !important;
        text-align: center;
    }













/* Hardened Architecture Component Reset */
.cfx-matrix-shield-wrapper__primary * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Parent Section with Integrated Background Image Layering */
.cfx-matrix-shield-wrapper__primary {
    position: relative;
    padding: 120px 40px;
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: center;
    /* Clean linear overlay blending transparent dark over your custom image asset */
    background-image: linear-gradient(rgb(26 28 35 / 86%), rgb(61 63 69 / 55%)), url(./assets/images/about1.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
}

/* Master Inner Flex Engine Layout */
.cfx-dynamic-flex-quantum-container__center {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Left Title Node Layout Wrapper */
.cfx-alpha-anchor-heading-node__static {
    flex: 0 0 28%;
    padding-right: 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.08); /* Leftmost primary border separator line */
}

.cfx-core-title-text-element__bold {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.cfx-brand-accent-text-highlight__inline {
    display: block;
    font-weight: 800;
}

/* 3-Column Pure Content Grid System with Dynamic Intersecting Border Matrix */
.cfx-omni-directional-grid-mesh__3-col {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Grid Cell Content Structural Layout & Box Border Alignment Engine */
.cfx-grid-cell-molecule__horizontal-align {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 40px 35px;
    cursor: pointer;
    position: relative;
}

/* Vertical and Horizontal Intersecting Border Lines tied structurally directly to grid index layout */

/* Adds internal border separating col 1 and col 2 */
.cfx-grid-cell-molecule__horizontal-align:nth-child(1),
.cfx-grid-cell-molecule__horizontal-align:nth-child(4) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Adds internal border separating col 2 and col 3 */
.cfx-grid-cell-molecule__horizontal-align:nth-child(2),
.cfx-grid-cell-molecule__horizontal-align:nth-child(5) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Adds horizontal border line between Row 1 and Row 2 elements */
.cfx-grid-cell-molecule__horizontal-align:nth-child(-n+3) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Monolithic Circle Node Icon System Metrics */
[class^="cfx-spherical-icon-capsule__"] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Interaction Hover Node Scaling Matrix */
.cfx-grid-cell-molecule__horizontal-align:hover [class^="cfx-spherical-icon-capsule__"] {
    transform: scale(1.15);
}

/* Exact Chromatic Hex Palettes From Screen Capture Reference */
.cfx-spherical-icon-capsule__upwork-yellow { background-color: #E2E93D; color: #15171c; }
.cfx-spherical-icon-capsule__project-coral  { background-color: #FF8585; color: #ffffff; }
.cfx-spherical-icon-capsule__years-lavender  { background-color: #A396FF; color: #ffffff; }
.cfx-spherical-icon-capsule__clients-cyan    { background-color: #5CE1E6; color: #ffffff; }
.cfx-spherical-icon-capsule__countries-amber { background-color: #FFBD59; color: #ffffff; }
.cfx-spherical-icon-capsule__awarded-emerald { background-color: #7ED957; color: #ffffff; }

/* Text Blocks Stack Layout Engine */
.cfx-data-metric-text-block__stacked {
    display: flex;
    flex-direction: column;
}

.cfx-numerical-value-header__heavy {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 4px;
    color: #ffffff;
}

/* Strict 18px Label Typography Configuration Specs */
.cfx-descriptive-label-paragraph__18px {
    font-size: 18px;
    color: #b0b6c2;
    font-weight: 400;
    line-height: 1.35;
}

/* ==========================================================================
   Responsive Adaptability Engine Breakpoints
   ========================================================================== */

/* Tablet & Mid-Size Monitor Responsive Reflow Matrix */
@media (max-width: 1200px) {
    .cfx-dynamic-flex-quantum-container__center {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .cfx-alpha-anchor-heading-node__static {
        flex: 1;
        width: 100%;
        padding-right: 0;
        padding-bottom: 30px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    .cfx-omni-directional-grid-mesh__3-col {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reset desktop cell grid structural line properties */
    .cfx-grid-cell-molecule__horizontal-align {
        border-right: none !important;
        border-bottom: none !important;
        padding: 30px 15px;
    }

    /* Apply custom responsive 2-column borders grid layer system */
    .cfx-grid-cell-molecule__horizontal-align:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .cfx-grid-cell-molecule__horizontal-align:nth-child(-n+4) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
}

/* Mobile Handheld Layout Matrix Optimization */
@media (max-width: 680px) {
    .cfx-matrix-shield-wrapper__primary {
        padding: 60px 20px;
    }

    .cfx-core-title-text-element__bold {
        font-size: 28px;
    }

    .cfx-omni-directional-grid-mesh__3-col {
        grid-template-columns: 1fr;
    }

    /* Clear all grid layout line grids to favor clean single stacked blocks layout */
    .cfx-grid-cell-molecule__horizontal-align {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 25px 0;
    }

    .cfx-grid-cell-molecule__horizontal-align:last-child {
        border-bottom: none !important;
    }
}
}