/*Android_app_development_page_css_start*/

:root {
    --fca-blue: #1563FF;
    --fca-blue-h: #0047E0;
    --fca-blue-lt: #EBF1FF;
    --fca-blue-pale: #F5F8FF;
    --fca-navy: #0B1D3E;
    --fca-text: #0f172a;
    --fca-muted: #64748b;
    --fca-light: #94a3b8;
    --fca-border: #e2e8f0;
    --fca-gray: #F8FAFC;
    --fca-green: #10b981;
    --accent: #3B82F6;
    --fca-red: #ef4444;
    --fca-shadow-sm: 0 1px 4px rgba(15,23,42,.08);
    --fca-shadow-md: 0 4px 20px rgba(21,99,255,.12);
    --fca-shadow-lg: 0 12px 48px rgba(21,99,255,.15);
    --fca-radius: 12px;
    --fca-radius-lg: 20px;
}

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

.fca-wrap {
    background: #fff;
    color: #0f172a;
    overflow-x: hidden
}

    .fca-wrap img {
        max-width: 100%;
        display: block
    }

/* ── SCROLL ANIMATIONS ── */
.fca-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)
}

    .fca-reveal.fca-visible {
        opacity: 1;
        transform: none
    }

.fca-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)
}

    .fca-reveal-left.fca-visible {
        opacity: 1;
        transform: none
    }

.fca-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)
}

    .fca-reveal-right.fca-visible {
        opacity: 1;
        transform: none
    }

.fca-delay-1 {
    transition-delay: .1s
}

.fca-delay-2 {
    transition-delay: .2s
}

.fca-delay-3 {
    transition-delay: .3s
}

.fca-delay-4 {
    transition-delay: .4s
}

/* ── KEYFRAMES ── */
@keyframes fca-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

@keyframes fca-pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(.65)
    }
}

@keyframes fca-spin-slow {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes fca-shimmer {
    0% {
        background-position: -200% center
    }

    100% {
        background-position: 200% center
    }
}

@keyframes fca-count {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fca-bounce-x {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(5px)
    }
}

@keyframes fca-scale-in {
    from {
        opacity: 0;
        transform: scale(.92)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes fca-gradient-x {
    0%,100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

/* ── NAVBAR ── */
.fca-nav {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow .3s
}

    .fca-nav.scrolled {
        box-shadow: 0 4px 24px rgba(15,23,42,.09)
    }

.fca-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px
}

.fca-brand {
    font-family: 'DM Sans',sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0B1D3E;
    text-decoration: none;
    letter-spacing: -.5px;
    transition: opacity .2s
}

    .fca-brand:hover {
        opacity: .85
    }

    .fca-brand em {
        font-style: normal;
        color: #1563FF
    }

.fca-navlinks {
    display: flex;
    align-items: center;
    gap: 2px
}

.fca-navlink {
    font-size: .875rem;
    font-weight: 500;
    color: #475569;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all .18s
}

    .fca-navlink:hover {
        color: #1563FF;
        background: #EBF1FF
    }

.fca-btn-nav {
    background: #1563FF;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 9px;
    text-decoration: none;
    border: none;
    transition: all .2s;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px
}

    .fca-btn-nav:hover {
        background: #0047E0;
        color: #fff;
        box-shadow: 0 4px 16px rgba(21,99,255,.35);
        transform: translateY(-1px)
    }

.fca-hamburger {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    color: #0f172a;
    transition: all .2s
}

    .fca-hamburger:hover {
        border-color: #1563FF;
        color: #1563FF
    }

/* ── HERO ── */
.fca-hero {
    /*background: linear-gradient(135deg,#060f24 0%,#0b1d3e 55%,#0d2654 100%);*/
    padding: 96px 0 0;
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.fca-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.fca-hero-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px);
    background-size: 30px 30px;
    opacity: 1
}

.fca-hero-orb1 {
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle,rgba(21,99,255,.18) 0%,transparent 65%);
    top: -200px;
    right: -100px;
    border-radius: 50%;
    animation: fca-float 8s ease-in-out infinite
}

.fca-hero-orb2 {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle,rgba(14,165,233,.12) 0%,transparent 65%);
    bottom: -80px;
    left: -120px;
    border-radius: 50%;
    animation: fca-float 10s ease-in-out infinite 2s
}

.fca-hero-orb3 {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 65%);
    top: 40%;
    right: 30%;
    border-radius: 50%;
    animation: fca-float 12s ease-in-out infinite 1s
}

.fca-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(21,99,255,.2);
    border: 1px solid rgba(96,165,250,.35);
    color: #93c5fd;
    font-size: .72rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: .6px;
    text-transform: uppercase
}

.fca-dot {
    width: 7px;
    height: 7px;
    background: #60a5fa;
    border-radius: 50%;
    animation: fca-pulse 2s ease-in-out infinite
}

.fca-hero h1 {
    font-family: 'DM Sans',sans-serif;
    font-size: clamp(2rem,5vw,3.4rem);
    font-weight: 800;
    line-height: 1.1;
    /*color: #fff;*/
    letter-spacing: -1.5px;
    margin-bottom: 22px
}

    .fca-hero h1 .fca-hl {
        background: linear-gradient(135deg, #25ca8e, #25ca8e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

.fca-hero-lead {
    /*color: rgba(255,255,255,.62);
    font-size: 12px;
    line-height: 1.8;*/
    margin-bottom: 32px;
    /*max-width: 520px*/
    margin-right: 80px;
}

.fca-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 32px
}

.fca-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.78);
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    transition: all .2s;
    backdrop-filter: blur(8px)
}

    .fca-pill:hover {
        border-color: rgba(96,165,250,.5);
        color: #93c5fd;
        transform: translateY(-1px);
        background: rgba(21,99,255,.18)
    }

    .fca-pill i {
        color: #60a5fa;
        font-size: .78rem
    }

.fca-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px
}

.fca-btn-primary {
    background: #005FAF;
    color: #fff;
    font-family: 'Inter',sans-serif;
    font-size: .9rem;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 10px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(21,99,255,.5)
}

    .fca-btn-primary:hover {
        background: #0047E0;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(21,99,255,.65)
    }

.fca-btn-outline {
    background: rgba(255,255,255,.08);
    color: #fff;
    font-family: 'Inter',sans-serif;
    font-size: .9rem;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,.2);
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px)
}

    .fca-btn-outline:hover {
        border-color: rgba(96,165,250,.6);
        color: #93c5fd;
        background: rgba(21,99,255,.18)
    }

.fca-proof {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1)
}

.fca-av-stack {
    display: flex
}

    .fca-av-stack img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.25);
        margin-left: -9px;
        object-fit: cover
    }

        .fca-av-stack img:first-child {
            margin-left: 0
        }

.fca-proof-txt {
    font-size: .83rem;
    color: rgba(255,255,255,.5);
    line-height: 1.45
}

    .fca-proof-txt strong {
        color: #fff;
        font-weight: 700
    }

.fca-stars {
    color: #f59e0b;
    font-size: .74rem
}

/* HERO FORM */
.fca-form-card {
    background: rgba(255, 255, 255, .97);
    border: 1.5px solid rgba(255, 255, 255, .15);
    border-radius: var(--fca-radius-lg);
    box-shadow: 0 0 2px rgba(0, 0, 0, .35);
    padding: 36px 40px;
    position: relative;
    animation: fca-scale-in .6s .3s both;
}

    .fca-form-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 4px;
        background: #005FAF;
        background-size: 200% auto;
        animation: fca-shimmer 3s linear infinite;
        border-radius: 0 0 4px 4px
    }

    .fca-form-card h3 {
        font-family: 'DM Sans',sans-serif;
        font-size: 1.25rem;
        font-weight: 800;
        color: #0B1D3E;
        margin-bottom: 4px
    }

.fca-fsub {
    font-size: .82rem;
    color: #64748b;
    margin-bottom: 22px
}

.fca-field {
    margin-bottom: 13px
}

    .fca-field label {
        display: block;
        font-size: .77rem;
        font-weight: 700;
        color: #334155;
        margin-bottom: 5px
    }

.fca-inp {
    width: 100%;
    background: #F8FAFC;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    padding: 10px 14px;
    color: #0f172a;
    font-size: .875rem;
    font-family: 'Inter',sans-serif;
    transition: all .18s;
    outline: none
}

    .fca-inp:focus {
        border-color: #1563FF;
        box-shadow: 0 0 0 3px rgba(21,99,255,.1);
        background: #fff
    }

    .fca-inp::placeholder {
        color: #94a3b8
    }

.fca-sel {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    cursor: pointer
}

.fca-submit {
    width: 100%;
    background: #005FAF;
    color: #fff;
    font-family: 'Inter',sans-serif;
    font-size: .9rem;
    font-weight: 700;
    padding: 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 4px 16px rgba(21,99,255,.3)
}

    .fca-submit:hover {
        background: #005FAF;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(21,99,255,.4)
    }

.fca-fnote {
    text-align: center;
    font-size: .73rem;
    color: ##94a3b8;
    margin-top: 10px
}

    .fca-fnote i {
        color: #10b981
    }

.fca-hero-bar {
    background: rgba(0,0,0,.25);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 24px 0;
    margin-top: 64px;
    backdrop-filter: blur(12px)
}

.fca-hbar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0
}

.fca-hbar-ico {
    width: 38px;
    height: 38px;
    background: rgba(21,99,255,.25);
    border: 1px solid rgba(96,165,250,.2);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    font-size: .95rem;
    flex-shrink: 0
}

.fca-hbar-item strong {
    font-size: .84rem;
    color: #fff;
    display: block;
    font-weight: 700
}

.fca-hbar-item p {
    font-size: .76rem;
    color: rgba(255,255,255,.45);
    margin: 0;
    font-weight: 500
}

/* ── STATS STRIP ── */
.fca-stats-strip {
    background: linear-gradient(135deg,#0B1D3E 0%,#1a3a7a 100%);
    padding: 52px 0;
    position: relative;
    overflow: hidden
}

    .fca-stats-strip::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px);
        background-size: 24px 24px
    }

.fca-stat-box {
    text-align: center;
    padding: 8px 12px;
    border-right: 1px solid rgba(255,255,255,.08)
}

    .fca-stat-box:last-child {
        border-right: none
    }

.fca-stat-n {
    font-family: 'DM Sans',sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    display: block;
    line-height: 1
}

    .fca-stat-n em {
        font-style: normal;
        color: #60a5fa
    }

.fca-stat-l {
    font-size: .78rem;
    color: rgba(255,255,255,.5);
    margin-top: 6px;
    display: block;
    font-weight: 500
}

/* ── SECTION COMMONS ── */
.fca-sec {
    padding: 65px 0;
}

.fca-sec-gray {
    background: #F8FAFC
}

.fca-sec-white {
    background: #fff
}

.fca-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EBF1FF;
    color: #1563FF;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    border: 1px solid rgba(21,99,255,.15)
}

.fca-stitle {
    font-family: 'DM Sans',sans-serif;
    font-size: clamp(1.65rem,3vw,2.25rem);
    font-weight: 800;
    color: #0B1D3E;
    line-height: 1.2;
    margin-bottom: 14px;
    letter-spacing: -.5px
}


.fca-slead {
    color: #64748b;
    font-size: .98rem;
    line-height: 1.8;
}

/* ── GRADIENT TEXT ── */
.fca-gradient-text {
    background: linear-gradient(135deg,#1563FF 0%,#0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

/* ── SERVICE CARDS ── */
.fca-svc-card {
    /* background: #f4f4f4; */
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px 24px;
    height: 100%;
    transition: all .28s cubic-bezier(.22,1,.36,1);
    position: relative;
    overflow: hidden;
    cursor: default;
    border-color: #727272;
    transform: translateY(-8px);
    box-shadow: var(--fca-shadow-lg);
    /* color: #eef6ff; */
    background: #eef6ff;
    /* border-bottom: 4px solid #005FAF; */
}

    .fca-svc-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,#EBF1FF,rgba(14,165,233,.06));
        opacity: 0;
        transition: opacity .28s
    }

    .fca-svc-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        /*        background: linear-gradient(90deg,#1563FF,#0ea5e9);*/
        transform: scaleX(0);
        transition: transform .28s;
        transform-origin: left
    }

    .fca-svc-card:hover {
        border-color: #005FAF;
        transform: translateY(-8px);
        box-shadow: var(--fca-shadow-lg);
    }

        .fca-svc-card:hover::before {
            opacity: 1
        }

        .fca-svc-card:hover::after {
            transform: scaleX(1)
        }

        .fca-svc-card:hover .fca-svc-ico {
            background: #005FAF;
            color: #fff;
            transform: scale(1.1) rotate(-5deg)
        }

.fca-svc-ico {
    width: 54px;
    height: 54px;
    background: #ffffff;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #005FAF;
    margin-bottom: 18px;
    transition: all .28s;
    position: relative;
    z-index: 1
}

.fca-svc-card h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #0B1D3E;
    margin-bottom: 10px;
    position: relative;
    z-index: 1
}

.fca-svc-card p {
    font-size: .855rem;
    color: #64748b;
    line-height: 1.68;
    margin: 0;
    position: relative;
    z-index: 1
}

.fca-svc-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1563FF;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    margin-top: 16px;
    transition: gap .18s;
    position: relative;
    z-index: 1
}

.fca-svc-card:hover .fca-svc-more i {
    animation: fca-bounce-x .6s ease-in-out infinite
}

/* ── IMAGE + CONTENT ── */
.fca-img-wrap {
    border-radius: var(--fca-radius-lg);
    overflow: visible;
    position: relative
}

    .fca-img-wrap img {
        width: 100%;
        /* height: 400px; */
        object-fit: cover;
        border-radius: var(--fca-radius-lg);
        /*        box-shadow: var(--fca-shadow-lg);*/
        display: block
    }

.fca-img-badge {
    position: absolute;
    bottom: -16px;
    left: 24px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 32px rgba(15,23,42,.16);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2
}

.fca-img-badge-ico {
    width: 40px;
    height: 40px;
    background: #EBF1FF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1563FF;
    font-size: 1.05rem;
    flex-shrink: 0
}

.fca-img-badge p {
    margin: 0;
    font-size: .77rem;
    color: #64748b
}

.fca-img-badge strong {
    font-size: .88rem;
    color: #0B1D3E;
    display: block;
    font-weight: 700
}

.fca-img-float {
    position: absolute;
    top: 20px;
    right: -16px;
    background: #1563FF;
    color: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 6px 20px rgba(21,99,255,.4);
    text-align: center;
    min-width: 90px;
    z-index: 2;
    animation: fca-float 5s ease-in-out infinite
}

    .fca-img-float strong {
        font-family: 'DM Sans',sans-serif;
        font-size: 1.7rem;
        font-weight: 800;
        display: block;
        line-height: 1
    }

    .fca-img-float span {
        font-size: .68rem;
        font-weight: 600;
        opacity: .85;
        margin-top: 2px;
        display: block
    }

.fca-check-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 28px
}

    .fca-check-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: .88rem;
        color: #334155;
        font-weight: 500;
        padding: 9px 0;
        border-bottom: 1px solid #f1f5f9
    }

        .fca-check-list li:last-child {
            border-bottom: none
        }

.fca-check-ico {
    width: 24px;
    height: 24px;
    background: #EBF1FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all .2s
}

.fca-check-list li:hover .fca-check-ico {
    background: #1563FF
}

    .fca-check-list li:hover .fca-check-ico i {
        color: #fff
    }

.fca-check-ico i {
    color: #1563FF;
    font-size: .65rem;
    transition: color .2s
}

.fca-check-list li span {
    color: #64748b;
    font-size: .82rem;
    display: block;
    font-weight: 400
}

.fca-outcome-box {
    background: linear-gradient(135deg,#EBF1FF,rgba(14,165,233,.08));
    border: 1px solid rgba(21,99,255,.15);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px
}

    .fca-outcome-box i {
        font-size: 24px;
        font-weight: 500;
        color: black;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    .fca-outcome-box p {
        font-size: .88rem;
        color: #1e3a6e;
        font-weight: 600;
        line-height: 1.65;
        margin: 0
    }

/* ── CHALLENGE CARDS ── */
.fca-chl {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 22px;
    height: 100%;
    transition: all .28s;
    position: relative;
    overflow: hidden
}

    .fca-chl::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,#ef4444,#f97316);
        transform: scaleX(0);
        transition: transform .28s;
        transform-origin: left
    }

    .fca-chl:hover {
        box-shadow: 0 4px 20px rgba(21,99,255,.12);
        transform: translateY(-4px)
    }

        .fca-chl:hover::before {
            transform: scaleX(1)
        }

.fca-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 11px;
    letter-spacing: .4px;
    text-transform: uppercase
}

.fca-badge-red {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca
}

.fca-badge-blue {
    background: #EBF1FF;
    color: #1563FF;
    border: 1px solid rgba(21,99,255,.2)
}

.fca-chl h5 {
    font-size: .97rem;
    font-weight: 700;
    color: #0B1D3E;
    margin-bottom: 8px
}

.fca-chl p {
    font-size: .85rem;
    color: #64748b;
    line-height: 1.65;
    margin-bottom: 12px
}

.fca-dot-list {
    list-style: none;
    padding: 0;
    margin: 0
}

    .fca-dot-list li {
        font-size: .83rem;
        color: #334155;
        padding: 5px 0 5px 18px;
        position: relative;
        font-weight: 500
    }

        .fca-dot-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 13px;
            width: 7px;
            height: 7px;
            background: #1563FF;
            border-radius: 50%
        }

hr.fca-dashed {
    border: none;
    border-top: 1.5px dashed #e2e8f0;
    margin: 14px 0
}

/* ── METRIC CARDS ── */
.fca-mcard {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 26px 20px;
    text-align: center;
    height: 100%;
    transition: all .28s;
    position: relative;
    overflow: hidden
}

    .fca-mcard::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,#1563FF,#0ea5e9);
        transform: scaleX(0);
        transition: transform .28s
    }

    .fca-mcard:hover {
        border-color: #1563FF;
        box-shadow: 0 4px 20px rgba(21,99,255,.12);
        transform: translateY(-5px)
    }

        .fca-mcard:hover::after {
            transform: scaleX(1)
        }

        .fca-mcard:hover .fca-mico {
            background: #1563FF;
            color: #fff;
            transform: scale(1.1)
        }

.fca-mico {
    width: 52px;
    height: 52px;
    background: #EBF1FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.15rem;
    color: #1563FF;
    transition: all .28s
}

.fca-mnum {
    font-family: 'DM Sans',sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #1563FF;
    display: block;
    line-height: 1;
    margin-bottom: 5px
}

.fca-mtitle {
    font-size: .88rem;
    font-weight: 700;
    color: #0B1D3E;
    margin-bottom: 5px
}

.fca-mdesc {
    font-size: .78rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0
}

/* ── TABS ── */
.fca-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 40px;
    padding-bottom: 0
}

.fca-tbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 11px 20px;
    font-family: 'Inter',sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all .2s;
    border-radius: 8px 8px 0 0
}

    .fca-tbtn:hover {
        color: #005da6;
        background: #EBF1FF
    }

    .fca-tbtn.fca-tactive {
        color: #005FAF;
        border-bottom-color: #005FAF;
        background: #EBF1FF
    }

.fca-tpane {
    display: none;
    animation: fca-scale-in .3s ease
}

    .fca-tpane.fca-tshow {
        display: block;
        border-radius: 20px;
        padding: 28px;
        border: 1px solid;
        border-image-source: linear-gradient(180deg, rgba(196, 200, 255, 0.5) 0%, rgba(134, 141, 245, 0.5) 100%);
        background: linear-gradient(180deg, rgba(220, 222, 255, 0.2) 0%, rgba(151, 158, 255, 0.2) 100%);
        backdrop-filter: blur(4px);
        box-shadow: 0px -2px 1px 0px #979eff66 inset, 0px 11.39px 22.34px 0px #353eb917;
    }

.fca-tab-grid {
    /*    display: grid;*/
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start
}

.fca-tab-text h3 {
    font-family: 'DM Sans',sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #0B1D3E;
    margin-bottom: 14px;
    letter-spacing: -.4px;
    line-height: 1.25
}

    .fca-tab-text h3 span {
        color: #005da6;
    }

.fca-tab-text p {
    color: #191919;
    font-size: .93rem;
    line-height: 1.8;
    margin-bottom: 18px
}

.fca-tab-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 28px
}

    .fca-tab-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: .875rem;
        color: #334155;
        font-weight: 600;
        padding: 8px 0;
        /*        border-bottom: 1px solid #f1f5f9*/
    }

        .fca-tab-list li:last-child {
            border-bottom: none
        }

        .fca-tab-list li i {
            color: #005FAF;
            margin-top: 3px;
            flex-shrink: 0
        }

.fca-tab-vis {
    background: #F8FAFC;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--fca-radius-lg);
    padding: 28px 24px
}

.fca-tv-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px
}

.fca-tv-icon {
    width: 48px;
    height: 48px;
    background: #1563FF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0
}

.fca-tv-head p {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0B1D3E
}

.fca-tv-head span {
    font-size: .78rem;
    color: #64748b
}

.fca-tab-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px
}

.fca-tsbox {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    transition: all .2s
}

    .fca-tsbox:hover {
        border-color: #1563FF;
        transform: translateY(-2px)
    }

.fca-tsnum {
    font-family: 'DM Sans',sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #1563FF;
    display: block;
    line-height: 1
}

.fca-tslbl {
    font-size: .72rem;
    color: #64748b;
    font-weight: 600;
    display: block;
    margin-top: 3px
}

.fca-tv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.fca-tv-tag {
    background: #EBF1FF;
    border: 1px solid rgba(21,99,255,.15);
    color: #1e4fcc;
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px
}

.fca-tv-lbl {
    font-size: .76rem;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .4px
}

/* ── TESTIMONIALS ── */
.fca-testi-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--fca-radius-lg);
    padding: 30px 26px;
    height: 100%;
    transition: all .28s;
    position: relative
}

    .fca-testi-card:hover {
        box-shadow: var(--fca-shadow-lg);
        transform: translateY(-6px);
        border-color: #1563FF
    }

.fca-testi-quote {
    font-size: 2.5rem;
    color: #EBF1FF;
    line-height: 1;
    margin-bottom: 14px;
    font-family: Georgia,serif
}

.fca-testi-card p {
    font-size: .9rem;
    color: #334155;
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 20px
}

.fca-testi-author {
    display: flex;
    align-items: center;
    gap: 12px
}

    .fca-testi-author img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #EBF1FF
    }

    .fca-testi-author strong {
        font-size: .87rem;
        color: #0B1D3E;
        display: block;
        font-weight: 700
    }

    .fca-testi-author span {
        font-size: .78rem;
        color: #64748b
    }

.fca-testi-stars {
    color: #f59e0b;
    font-size: .8rem;
    margin-bottom: 14px
}

/* ── PROCESS TIMELINE ── */
.fca-timeline {
    position: relative;
    padding-left: 32px
}

    .fca-timeline::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom,#1563FF,rgba(21,99,255,.1))
    }

.fca-tl-item {
    position: relative;
    padding: 0 0 40px 32px
}

    .fca-tl-item:last-child {
        padding-bottom: 0
    }

.fca-tl-dot {
    position: absolute;
    left: -32px;
    top: 0;
    width: 32px;
    height: 32px;
    background: #005FAF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    color: #fff;
    font-family: 'DM Sans',sans-serif;
    box-shadow: 0 0 0 4px #EBF1FF
}

.fca-tl-item h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #0B1D3E;
    margin-bottom: 6px
}

.fca-tl-item p {
    font-size: .855rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0
}

/* ── WHY US — BENTO GRID ── */
.fca-bento-grid {
    display: grid;
    /* grid-template-columns: repeat(3,1fr); */
    grid-template-rows: auto;
    gap: 16px
}

.fca-bento {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--fca-radius-lg);
    padding: 28px 24px;
    transition: all .28s;
    position: relative;
    overflow: hidden
}

    .fca-bento:hover {
        box-shadow: var(--fca-shadow-lg);
        transform: translateY(-4px);
        border-color: #1563FF
    }

.fca-bento-wide {
    grid-column: span 2
}

.fca-bento-tall {
    grid-row: span 2
}

.fca-bento-ico {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 16px
}

.fca-bento-ico-blue {
    background: #EBF1FF;
    color: #1563FF
}

.fca-bento-ico-green {
    background: #d1fae5;
    color: #059669
}

.fca-bento-ico-amber {
    background: #fef3c7;
    color: #d97706
}

.fca-bento-ico-purple {
    background: #ede9fe;
    color: #7c3aed
}

.fca-bento h4 {
    font-family: 'DM Sans',sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0B1D3E;
    margin-bottom: 8px
}

.fca-bento p {
    font-size: .855rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0
}

.fca-bento-big-num {
    font-family: 'DM Sans',sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #1563FF;
    line-height: 1;
    margin-bottom: 8px;
    background: linear-gradient(135deg,#1563FF,#0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.fca-bento-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px
}

.fca-bento-tag {
    background: #EBF1FF;
    color: #1e4fcc;
    font-size: .73rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px
}

/* ── INDUSTRY CARDS ── */
.fca-ind {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 18px;
    height: 100%;
    transition: all .25s;
    cursor: default
}

    .fca-ind:hover {
        border-color: #1563FF;
        transform: translateY(-4px);
        box-shadow: 0 4px 20px rgba(21,99,255,.12)
    }

        .fca-ind:hover .fca-ind-ico {
            background: #1563FF;
            color: #fff
        }

.fca-ind-ico {
    width: 44px;
    height: 44px;
    background: #EBF1FF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #1563FF;
    margin-bottom: 12px;
    transition: all .25s
}

.fca-ind h6 {
    font-size: .9rem;
    font-weight: 700;
    color: #0B1D3E;
    margin-bottom: 8px
}

.fca-ind-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.fca-ind-tag {
    background: #EBF1FF;
    color: #2255cc;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 5px
}

/* ── COMPARE TABLE ── */
.fca-tbl-wrap {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--fca-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,23,42,.08);
}

.fca-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem
}

    .fca-tbl thead th {
        padding: 16px 22px;
        font-weight: 700;
        border-bottom: 1.5px solid #e2e8f0;
        font-size: .88rem
    }

        .fca-tbl thead th:first-child {
            background: #F8FAFC;
            color: #64748b;
            width: 28%
        }

        .fca-tbl thead th.fca-tus {
            background: #EBF1FF;
        }

        .fca-tbl thead th.fca-tthem {
            background: #F8FAFC;
            color: #888
        }

    .fca-tbl tbody tr {
        border-bottom: 1px solid #f1f5f9;
        transition: background .12s
    }

        .fca-tbl tbody tr:last-child {
            border-bottom: none
        }

        .fca-tbl tbody tr:hover {
            background: #fafcff
        }

    .fca-tbl td {
        padding: 13px 22px;
        vertical-align: top;
        line-height: 1.55
    }

        .fca-tbl td:first-child {
            font-weight: 700;
            color: #0B1D3E;
            font-size: .84rem
        }

        .fca-tbl td.fca-yes {
            color: #ffffff;
            font-size: .84rem;
            /*            background: #005FAF;*/
            border-radius: 65px;
            background: linear-gradient(153.15deg, #5d4db0 0%, #2554e5 101.4%);
        }

        .fca-tbl td.fca-no {
            color: #323232;
            font-size: .84rem
        }

.fca-chk {
    color: #ffffff;
    margin-right: 6px
}

.fca-x {
    color: #ef4444;
    margin-right: 6px
}

/* ── TECH BADGES ── */
.fca-tech-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px
}

.fca-tech {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: .85rem;
    font-weight: 700;
    color: #0B1D3E;
    transition: all .2s
}

    .fca-tech:hover {
        border-color: #1563FF;
        color: #1563FF;
        transform: translateY(-3px);
        box-shadow: 0 4px 20px rgba(21,99,255,.12)
    }

    .fca-tech i {
        color: #1563FF;
        font-size: 1.05rem
    }

/* ── CTA ── */
.fca-cta {
    background: linear-gradient(135deg,#0B1D3E 0%,#1a3a7a 60%,#0B1D3E 100%);
    background-size: 200% 200%;
    animation: fca-gradient-x 8s ease infinite;
    padding: 100px 0;
    position: relative;
    overflow: hidden
}

.fca-cta-orb1 {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle,rgba(21,99,255,.2) 0%,transparent 65%);
    right: -100px;
    top: -150px;
    border-radius: 50%
}

.fca-cta-orb2 {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle,rgba(14,165,233,.12) 0%,transparent 65%);
    left: -80px;
    bottom: -100px;
    border-radius: 50%
}

.fca-cta h2 {
    font-family: 'DM Sans',sans-serif;
    font-size: clamp(1.9rem,4vw,2.7rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.5px;
    margin-bottom: 18px
}

    .fca-cta h2 em {
        font-style: normal;
        color: #60a5fa
    }

.fca-cta-lead {
    color: rgba(255,255,255,.65);
    font-size: .98rem;
    line-height: 1.8;
    max-width: 520px;
    margin-bottom: 30px
}

.fca-cta-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 34px
}

    .fca-cta-checks li {
        font-size: .875rem;
        color: rgba(255,255,255,.8);
        padding: 5px 0;
        display: flex;
        align-items: center;
        gap: 10px
    }

        .fca-cta-checks li i {
            color: #60a5fa;
            flex-shrink: 0
        }

.fca-btn-white {
    background: #fff;
    color: #1563FF;
    font-family: 'Inter',sans-serif;
    font-size: .92rem;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 10px;
    border: none;
    text-decoration: none;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

    .fca-btn-white:hover {
        background: #EBF1FF;
        color: #1563FF;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,.2)
    }

.fca-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.3);
    font-family: 'Inter',sans-serif;
    font-size: .92rem;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 10px;
    text-decoration: none;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

    .fca-btn-ghost:hover {
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.6);
        color: #fff
    }

.fca-cta-sbox {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    transition: all .2s
}

    .fca-cta-sbox:hover {
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.25)
    }

.fca-cta-snum {
    font-family: 'DM Sans',sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: #60a5fa;
    display: block;
    line-height: 1
}

.fca-cta-slbl {
    font-size: .77rem;
    color: rgba(255,255,255,.5);
    font-weight: 600;
    margin-top: 3px;
    display: block
}

/* ── FOOTER ── */
.fca-footer {
    background: #06101f;
    padding: 64px 0 28px
}

.fca-footer-brand {
    font-family: 'DM Sans',sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px
}

    .fca-footer-brand em {
        font-style: normal;
        color: #60a5fa
    }

.fca-fdesc {
    font-size: .83rem;
    color: rgba(255,255,255,.4);
    line-height: 1.72;
    margin-bottom: 20px
}

.fca-footer h6 {
    font-size: .74rem;
    font-weight: 700;
    color: rgba(255,255,255,.3);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1.2px
}

.fca-flist {
    list-style: none;
    padding: 0;
    margin: 0
}

    .fca-flist li {
        margin-bottom: 9px
    }

    .fca-flist a {
        color: rgba(255,255,255,.5);
        font-size: .84rem;
        text-decoration: none;
        transition: color .18s
    }

        .fca-flist a:hover {
            color: #60a5fa
        }

.fca-fhr {
    border-color: rgba(255,255,255,.07);
    margin: 32px 0 20px
}

.fca-fcopy {
    font-size: .8rem;
    color: rgba(255,255,255,.25);
    margin: 0
}

.fca-legal a {
    font-size: .78rem;
    color: rgba(255,255,255,.25);
    text-decoration: none;
    transition: color .18s
}

    .fca-legal a:hover {
        color: #60a5fa
    }

.fca-socials {
    display: flex;
    gap: 8px;
    margin-top: 20px
}

.fca-soc {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.4);
    font-size: .85rem;
    text-decoration: none;
    transition: all .2s
}

    .fca-soc:hover {
        background: rgba(96,165,250,.18);
        color: #60a5fa;
        border-color: rgba(96,165,250,.3)
    }

.fca-fcontact {
    font-size: .83rem;
    color: rgba(255,255,255,.45);
    display: flex;
    flex-direction: column;
    gap: 9px
}

    .fca-fcontact a {
        color: rgba(255,255,255,.5);
        text-decoration: none;
        transition: color .18s
    }

        .fca-fcontact a:hover {
            color: #60a5fa
        }

    .fca-fcontact i {
        color: #60a5fa;
        width: 16px;
        margin-right: 8px
    }

/* ── RESPONSIVE ── */
@media(max-width:1199px) {
    .fca-bento-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .fca-bento-wide {
        grid-column: span 1
    }

    .fca-bento-tall {
        grid-row: span 1
    }
}

@media(max-width:991px) {
    .fca-sec {
        padding: 70px 0 30px
    }

    .fca-hero {
        padding: 70px 0 0;
        min-height: auto
    }

    .fca-cta {
        padding: 70px 0
    }

    .fca-tab-grid {
        grid-template-columns: 1fr
    }

    .fca-img-float {
        right: 12px;
        top: 12px
    }

    .fca-stat-box {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.08)
    }

        .fca-stat-box:last-child {
            border-bottom: none
        }

    .fca-timeline {
        padding-left: 24px
    }

        .fca-timeline::before {
            left: 11px
        }

    .fca-tl-item {
        padding-left: 28px
    }

    .fca-tl-dot {
        left: -28px;
        width: 28px;
        height: 28px
    }
}

@media(max-width:767px) {
    .fca-hero h1 {
        font-size: 2rem;
        letter-spacing: -1px
    }

    .fca-hero-lead {
        font-size: .95rem
    }

    .fca-form-card {
        padding: 24px 18px;
        margin-top: 20px
    }

    .fca-tbtn {
        font-size: .78rem;
        padding: 9px 13px
    }

    .fca-bento-grid {
        grid-template-columns: 1fr
    }

    .fca-img-wrap img {
        height: 264px;
    }

    .fca-img-badge {
        bottom: -12px;
        left: 16px
    }

    .fca-img-float {
        right: 10px;
        top: 10px
    }

    .fca-stitle {
        font-size: 1.6rem
    }

    .fca-hero-actions .fca-btn-outline {
        display: none
    }

    .fca-stats-strip .col-6 {
        border-bottom: 1px solid rgba(255,255,255,.08)
    }
}

@media(max-width:480px) {
    .fca-hero h1 {
        font-size: 1.8rem
    }

    .fca-pills {
        gap: 7px
    }

    .fca-pill {
        font-size: .75rem;
        padding: 5px 11px
    }
    /*
    .fca-tbtn span {
        display: none
    }*/

    .fca-tbtn i {
        font-size: 1rem
    }
}



/*formcss*/

/* ── Card ── */
.fc-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    width: 100%;
    max-width: 620px;
    overflow: hidden;
}

    .fc-card::before {
        content: '';
        display: block;
        height: 4px;
        background: linear-gradient(90deg, #2563EB, #38BDF8);
    }

.fc-body {
    padding: 2rem 2.25rem 2.25rem;
}

/* ── Header ── */
.fc-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.02em;
    margin-bottom: 0.3rem;
}

.fc-subtitle {
    font-size: 0.82rem;
    color: #94A3B8;
    margin-bottom: 1.6rem;
}

/* ── Labels ── */
.fc-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 0.4rem;
}

.fc-star {
    color: #2563EB;
    margin-left: 2px;
}

/* ── Inputs ── */
.fc-input,
.fc-select {
    width: 100%;
    background-color: #F1F5F9;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 0.84rem;
    color: #0F172A;
    padding: 0.6rem 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

    .fc-input::placeholder {
        color: #94A3B8;
    }

    .fc-input:focus,
    .fc-select:focus {
        background-color: #ffffff;
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        outline: none;
    }

/* Select arrow */
.fc-select-wrap {
    position: relative;
}

    .fc-select-wrap::after {
        content: '\F282';
        font-family: 'bootstrap-icons';
        position: absolute;
        right: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: #94A3B8;
        pointer-events: none;
        font-size: 0.85rem;
    }

.fc-select {
    padding-right: 2.2rem;
    cursor: pointer;
}

/* Textarea */
.fc-textarea {
    width: 100%;
    background-color: #F1F5F9;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 0.84rem;
    color: #0F172A;
    padding: 0.6rem 0.85rem;
    min-height: 110px;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .fc-textarea::placeholder {
        color: #94A3B8;
    }

    .fc-textarea:focus {
        background-color: #ffffff;
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        outline: none;
    }

/* ── Field spacing ── */
.fc-field {
    margin-bottom: 0.85rem;
}

/* ── Submit Button ── */
.fc-btn {
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.78rem 1.5rem;
    width: 100%;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    cursor: pointer;
}

    .fc-btn:hover {
        opacity: 0.93;
        transform: translateY(-1px);
        box-shadow: 0 8px 28px rgba(37, 99, 235, 0.48);
    }

    .fc-btn:active {
        transform: translateY(0);
    }

/* ── Footer note ── */
.fc-footer {
    font-size: 0.76rem;
    color: #94A3B8;
    text-align: center;
    margin-top: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.fc-lock {
    color: #22C55E;
    font-size: 0.8rem;
}

/*rating-css*/

/* ================================================
     PREFIX: fcst- (Fusion Codes Stats)
     Scope: android-stats-section only
     No interference with existing project CSS
  ================================================ */

#android-stats-section {
    background: #002e78;
    padding: 80px 0;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 127px 0px 127px 0px;
}

.fcst-row {
    display: flex;
    align-items: center;
    gap: 72px;
}

.fcst-left {
    flex: 0 0 44%;
    max-width: 44%;
}

.fcst-right {
    flex: 1;
    min-width: 0;
}

/* Left side text */
.fcst-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 14px;
}

.fcst-heading {
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin: 0 0 16px;
}

    .fcst-heading span {
        color: #3b82f6;
    }

.fcst-desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.75;
    margin: 0 0 28px;
    max-width: 380px;
}

.fcst-trust-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.fcst-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

    .fcst-trust-item svg {
        flex-shrink: 0;
    }

    .fcst-trust-item span {
        font-size: 13px;
        color: #475569;
        font-weight: 500;
    }

/* Image card */
.fcst-img-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.fcst-img-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    /* padding: 32px 28px 24px; */
    position: relative;
    overflow: hidden;
}

.fcst-img-card-tint {
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at top right, rgba(59,130,246,0.06), transparent 70%);
    pointer-events: none;
}

.fcst-img-card img {
    width: 100%;
    height: auto;
    /* max-height: 240px; */
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
}

.fcst-img-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.fcst-img-dot {
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    flex-shrink: 0;
}

.fcst-img-footer span {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

/* Floating chips */
.fcst-chip {
    position: absolute;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
}

.fcst-chip-top {
    top: -14px;
    right: -14px;
}

.fcst-chip-bottom {
    bottom: -14px;
    left: -14px;
}

.fcst-chip-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fcst-chip-icon-blue {
    background: #3b82f6;
}

.fcst-chip-icon-dark {
    background: #0f172a;
}

.fcst-chip-val {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.fcst-chip-sub {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 1px;
}

/* Right: grid heading */
.fcst-grid-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 8px;
}

.fcst-grid-heading {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 28px;
}

/* Stats grid */
.fcst-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Stat card */
.fcst-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    cursor: default;
}

    .fcst-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: #005FAF;
        border-radius: 14px 0 0 14px;
    }

    .fcst-card:hover {
        background: #ffffff;
        border-color: #bfdbfe;
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
        transform: translateY(-2px);
    }

.fcst-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fcst-card-icon {
    width: 38px;
    height: 38px;
    background: #eff6ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.fcst-card-num {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -1px;
}

    .fcst-card-num span {
        font-size: 14px;
        color: #3b82f6;
        font-weight: 700;
        letter-spacing: 0;
    }

.fcst-card-num-sm {
    font-size: 24px;
    letter-spacing: -0.5px;
}

.fcst-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-top: 4px;
}

.fcst-card-sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 860px) {
    .fcst-row {
        flex-direction: column;
        gap: 48px;
    }

    .fcst-left {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

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

.cus-app-img img {
    /* width: 544px; */
    border-radius: 19px;
    margin-top: 24px;
}

.fcst-card-icon svg {
    width: 50px;
}


.fcst-card-inner p {
    font-size: 13px;
    margin-top: 5px;
}





.stats_grid {
    display: flex;
    gap: 25px;
    padding-top: 0px;
    justify-content: space-between;
    margin-right: 30px;
}

.stat_item {
    display: flex;
    align-items: center;
    gap: 6px;
    border-left: 1px solid #ffffff24;
    padding-left: 7px;
}

.stat_icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat_info span {
    font-size: 21px;
    font-weight: 800;
    margin: 0;
    /*color: #ffffff;*/
}

.stat_info p {
    font-size: 12px;
    margin: 0;
    /*color: #ffffffe3;*/
    font-weight: 400;
}


.cus-challenge-02 {
    border-radius: 20px;
    padding: 30px 40px;
    margin-bottom: 20px;
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgb(0 93 166 / 50%) 0%, rgb(186 225 255 / 21%) 100%);
    background: linear-gradient(180deg, rgb(224 241 255) 0%, rgb(0 93 166 / 15%) 100%);
    backdrop-filter: blur(4px);
    box-shadow: 0px -2px 1px 0px #005da629 inset, 0px 11.39px 22.34px 0px #d14e4e16;
}

.cus-scroll-properly {
    overflow-y: scroll;
    height: 300px;
}

.tab-content-box {
    padding: 10px 40px;
}


.cus-scroll-properly {
    margin: 25px 0;
}

    .cus-scroll-properly::-webkit-scrollbar {
        width: 5px;
        /*  height: 5px;*/
    }

    .cus-scroll-properly::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #f5f5f5;
        box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .cus-scroll-properly::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: linear-gradient(#005FAF, skyblue);
        box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .cus-scroll-properly::-webkit-scrollbar-corner {
        background: linear-gradient(red,yellow);
    }






/*Android_app_development_page_css_end*/


/* =========================================
       SCOPED CSS — prefix: .ias- (Industry App Section)
       No :root variables used intentionally
       ========================================= */

.ias-section {
    background: #002a4e;
    background-image: radial-gradient(ellipse 80% 60% at 70% 50%, #034b88 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 10% 80%, #3a0a6e44 0%, transparent 60%);
    font-family: 'DM Sans', sans-serif;
    padding: 80px 0 90px;
    min-height: 91vh;
    position: relative;
    overflow: hidden;
}

    /* Subtle grid pattern overlay */
    .ias-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
    }

/* ---- Header ---- */
.ias-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.ias-subtext {
    color: rgba(255,255,255,0.62);
    font-size: 0.97rem;
    line-height: 1.75;
    font-weight: 300;
}

/* ---- Left Tab Nav ---- */
.ias-tab-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: none;
    position: relative;
}

    .ias-tab-nav .nav-link {
        color: rgba(255, 255, 255, 0.52);
        font-family: 'DM Sans', sans-serif;
        font-weight: 400;
        font-size: 0.95rem;
        padding: 4px 19px 11px 16px;
        border-radius: 8px;
        border: none;
        text-align: left;
        position: relative;
        transition: color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .ias-tab-nav .nav-link .ias-tab-arrow {
            opacity: 0;
            color: #ffffff;
            font-size: 0.85rem;
            transition: opacity 0.2s, transform 0.2s;
            transform: translateX(-4px);
            flex-shrink: 0;
        }

        .ias-tab-nav .nav-link:hover {
            color: rgba(255,255,255,0.82);
            background: rgba(255,255,255,0.05);
            padding-left: 20px;
        }

        .ias-tab-nav .nav-link.active {
            color: #ffffff;
            font-weight: 600;
            background: rgba(192, 132, 252, 0.1);
            border-left: 3px solid #ffffff;
            padding-left: 17px;
        }

            .ias-tab-nav .nav-link.active .ias-tab-arrow {
                opacity: 1;
                transform: translateX(0);
            }

/* ---- Content Card ---- */
.ias-content-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    height: 100%;
}

.ias-content-inner {
    padding: 38px 36px 36px;
}

.ias-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(192,132,252,0.18);
    border: 1px solid rgba(192,132,252,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    font-size: 1.4rem;
    color: #ffffff;
}

.ias-content-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.55rem;
    color: #fff;
    margin-bottom: 14px;
}

.ias-content-desc {
    color: rgba(255,255,255,0.75);
    font-size: 0.93rem;
    line-height: 1.75;
    font-weight: 400;
    margin-bottom: 22px;
}

    .ias-content-desc strong {
        color: rgba(255,255,255,0.92);
        font-weight: 500;
    }

.ias-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .ias-features-list li {
        color: rgba(255,255,255,0.7);
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .ias-features-list li::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ffffff;
            flex-shrink: 0;
        }

.ias-btn-know {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 50px;
    border: 1.5px solid rgba(255,255,255,0.35);
    background: transparent;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, gap 0.2s;
    cursor: pointer;
}

    .ias-btn-know:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.6);
        color: #fff;
        gap: 12px;
    }

/* ---- Image Panel ---- */
.ias-img-panel {
    /*    height: 100%;*/
    min-height: 340px;
    position: relative;
    overflow: hidden;
}

    .ias-img-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
    }

.ias-content-card:hover .ias-img-panel img {
    transform: scale(1.04);
}

/* ---- Tab pane transition ---- */
.ias-tab-content .tab-pane {
    display: none;
}

    .ias-tab-content .tab-pane.active {
        display: flex;
    }

    /* fade-in on active */
    .ias-tab-content .tab-pane.ias-fade-in {
        animation: iasFadeIn 0.35s ease forwards;
    }

@keyframes iasFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .ias-tab-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 24px;
    }

        .ias-tab-nav .nav-link {
            padding: 8px 16px;
            font-size: 0.85rem;
        }

            .ias-tab-nav .nav-link.active {
                border-left: none;
                border-bottom: 2px solid #c084fc;
                background: rgba(192,132,252,0.1);
            }

    .ias-img-panel {
        min-height: 220px;
    }
}

#iasTabs .nav-item .nav-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    background: none;
    border-bottom: 1px solid #ffffff12;
}

.cus-like-21 {
    font-weight: 700;
    background-image: linear-gradient(267.43deg, var(--ztc-text-text-4) 4.95%, #005FAF 97.92%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 2rem;
}

#cus-fa-bi-02 i {
    font-size: 2.5rem;
    color: #005faf;
}


#cus-us-content h2 {
    font-size: 55px !important;
}







/*IOS_App_development_Css_start*/


#ios-gif-01 img {
    height: 461px;
}

#ios-page-devices .fca-tabs-nav {
    gap: inherit;
}

#ios-page-devices .fca-tbtn {
    gap: 3px;
}

#ios-page-long-term h3 {
    font-size: 45px;
}

#ios-page-slotutions h2 {
    font-size: 35px;
}

.ios-page-wel-02 .nav-link {
    padding: 11px 19px 11px 16px !important;
}



/*web-app-development-services-css*/


#cus-tabts-shield .fca-tbtn span {
    text-align: left;
}

#cus-tabts-shield .fca-tbtn {
    gap: 13px;
    margin: 12px;
    border-bottom: 1px solid #e9e9e9;
}

#cus-tabts-shield .cus-scroll-properly {
    height: 142px;
}

#cus-tabts-shield .fca-tpane.fca-tshow {
    padding: 19px;
}

#cus-tabts-shield .cus-scroll-properly {
    margin: 25px 43px 0px;
}

#cus-tabts-shield .fca-tabs-nav {
    border-bottom: inherit;
}

#cus-tabts-shield .cus-challenge-02 {
    padding: 20px 40px;
}

#cus-service-web {
    display: flex;
    align-items: center;
}

#cus-gif-height img {
    height: 440px;
    width: 100%;
}


#cus-fca-sec-gray {
    padding: 72px 0 15px;
}

.fca-tbl td.fca-yes {
    border-radius: inherit;
}


@media (min-width: 300px) and (max-width: 700px) {
    .stats_grid {
        display: block;
    }

    .cus-row-reverse-form {
        flex-direction: column-reverse;
    }

    .stat_item {
        gap: 8px;
        padding-top: 10px;
    }

    .cus-scroll-properly {
        margin: 34px -4px 0px;
    }

    #cus-us-content h2 {
        font-size: 42px !important;
    }

    #ios-gif-01 img {
        height: inherit;
        margin-bottom: 19px;
    }

    .cus-ios-img-wrap img {
        height: 111px;
    }

    #ios-page-devices {
        padding: 28px 0 25px;
    }

    #ios-page-long-term {
        padding: inherit;
    }

        #ios-page-long-term h3 {
            font-size: 27px;
            margin-bottom: 32px;
            line-height: 44px;
            font-weight: bold;
        }

    #cus-gif-height img {
        height: inherit;
        width: 100%;
        margin-bottom: 28px;
    }

    .cus-web-app-drive img {
        height: 142px;
    }

    #cus-tabts-shield {
        padding: 29px 0 30px;
    }

    .cus-application-02 h2 {
        font-size: 20px;
    }

    #cus-it-experts h2 {
        font-size: 40px !important;
    }

    #cus-growth-01 h2 {
        font-size: 30px !important;
        line-height: 40px;
    }

    #cus-growth-01 .section-title span {
        font-size: 9px;
    }
}


/*cross-app-development-services*/


.fca-hero-lead {
    /*color: rgba(255, 255, 255, .62);
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 19px;
     max-width: inherit;*/
}

#cus-cross-platform-546 .ias-tab-nav {
    flex-direction: inherit !important;
}

#cus-cross-platform-546 .nav-item {
    padding: 0 30px;
}

.iOS-App-icon {
    background: #C2DAFE;
    width: 40px;
    display: block;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border-radius: 10px;
}

#feature-tab .router-link-active.active {
    color: #202124;
    background-color: #f8f8f8;
    border-left: 3px solid #09b850;
}

#feature-tab .router-link-active .icon-lg {
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    text-align: center;
    font-size: 1.2rem;
}

#feature-tab .router-link-active {
    background-color: transparent;
    color: #606261;
    border: 3px solid transparent;
    white-space: normal;
}

    #feature-tab .router-link-active h3 {
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.25;
        margin-bottom: .5rem;
    }

.iOS-Engineering h2 {
      font-size: clamp(38px, 5vw, 2.9rem);
    font-weight: 700;
    line-height: 1.2;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 30px;
   
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
}

.hero-heading-android {
    font-size: clamp(2.4rem, 4vw, 3.9rem);;
    line-height: 1.12;
    font-weight: 700;
    /*margin-top: 26px;*/
}

    .hero-heading-android .highlight {
        color: #25ca8e;
        display: block;
    }

.underline-bar {
    width: 60px;
    height: 4px;
    background: #25ca8e;
    border-radius: 2px;
    margin-top: 22px;
}

.hero-description-android {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 2.25rem;
}

.stats-row-android {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8em;
    margin-bottom: 2.5rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgb(32 102 217 / 12%);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.4rem;
    position: relative;
}

.stat-card-android {
    text-align: left;
    /*padding: 1.15rem 1.2rem;*/
    /* background: rgba(255, 255, 255, 0.55); */
    /* border: 1px solid rgba(255, 255, 255, 0.6); */
    border-radius: var(--radius-md);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* box-shadow: var(--shadow-sm); */
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2f7ef0, #1656c9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}

.stat-card-android:first-child:after {
    content: none;
}

.stat-card-android:after {
    content: "";
    background: #d4e4e8;
    height: 100%;
    width: 1px;
    position: absolute;
    left: -14px;
}

.section-wrap {
    /*max-width: 1320px;*/
    margin: 0 auto;
    padding: 70px 24px 100px;
    position: relative;
    z-index: 2;
}

.blob.bottom-left {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at 30% 30%, #dbe7ff, #c7d8fb);
    left: -140px;
    bottom: -160px;
    opacity: 0.9;
}

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

    .blob.bottom-right {
        width: 260px;
        height: 260px;
        background: radial-gradient(circle at 60% 40%, #dbe7ff, #c7d8fb);
        right: -100px;
        bottom: -120px;
        opacity: 0.9;
    }

.dot-grid.top-left {
    top: 280px;
    left: 0;
}

.dot-grid {
    position: absolute;
    width: 130px;
    height: 130px;
    background-image: radial-gradient(#c9d6f2 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    z-index: 1;
    opacity: 0.9;
}

.fc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid rgba(37, 99, 235, .15);
}

.fc-heading {
    /* font-family: 'Manrope', sans-serif; */
    font-weight: 700;
       font-size: clamp(38px, 5vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--secondary);
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1) .12s, transform .8s cubic-bezier(.16, 1, .3, 1) .12s;
}

.fc-reveal.is-visible .fc-heading {
    opacity: 1;
    transform: translateY(0);
}

.fc-heading .fc-gradient {
    background:linear-gradient(90deg, #2563eb, #4f7cf7);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    animation: fcGradientFlow 5s ease-in-out infinite;
}

@keyframes fcGradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

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

.lead-card:hover {
    box-shadow: 0 20px 45px rgba(20, 40, 90, 0.12);
    transform: translateY(-4px);
}

.lead-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 10px 30px rgba(20, 40, 90, 0.06);
    height: 100%;
    opacity: 1;
    animation: fadeUp 0.8s ease 0.3s both;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.rocket-icon {
    width: 65px;
    height: 56px;
    background: #eaf0ff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f6bff;
    font-size: 1.4rem;
    margin-bottom: 20px;
    animation: floatY 3.2s ease-in-out infinite;
}

@keyframes floatY {
    0%, 100% {
        transform: translateY(0);
    }

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

.lead-card h3 .accent {
    color: #2f6bff;
}

.head-ing {
    display: flex;
    gap: 15px;
    align-items: center;
}

.code-window-inner img {
    border-radius: 9px;
}

.stat-text-center {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    text-align: center !important;
    padding: 40px 30px !important;
    min-height: 340px;
}

.fcst-card-num span {
    font-size: 14px;
    color: #3b82f6;
    font-weight: 700;
    letter-spacing: 0;
}

.stat-rule {
    width: 34px;
    height: 3px;
    background: #2f6bff;
    border-radius: 3px;
    margin: 10px 0 14px;
    transition: width 0.4s ease;
}

.stat-card:hover .stat-rule {
    width: 60px;
}

.fcst-card-inner {
    font-size: 13px;
    margin-top: 5px;
}

.fcst--icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 50%;
    background: #eaf0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #2f6bff;
}

.form-card {
    flex: 0 0 630px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(70, 130, 230, 0.35);
    border-radius: 16px;
    padding: 50px 50px 33px;
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.form-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

    .form-header .icon-circle {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 50%;
        background: linear-gradient(180deg, #2f7ef0, #1656c9);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    .form-header h2 {
        font-size: 21px;
        font-weight: 800;
        color: #101010;
    }

    .form-header .subtitle {
        margin-top: 6px;
        font-size: 13.5px;
        color: #9aa5bd;
        line-height: 1.5;
        font-weight: 300;
        letter-spacing: 0;
        text-transform: capitalize;
        margin-bottom: 10px;
    }

.field {
    margin-top: 20px;
}

    .field label {
        display: block;
        font-size: 13.5px;
        font-weight: 600;
        color: #1d1d1d;
        margin-bottom: 8px;
    }

    .field input, .field textarea, .field select {
        width: 100%;
        padding: 13px 15px;
        border-radius: 8px;
        border: 1px solid rgb(0 0 0 / 22%);
        background: rgba(255, 255, 255, 0.04);
        font-size: 14px;
        font-family: inherit;
        color: #000;
        appearance: none;
    }

.header-form-area {
    position: relative;
    padding: 1.5px;
    border-radius: calc(var(--radius-lg) + 1.5px);
    /* background: linear-gradient(135deg, var(--color-primary)
#2563EB
, #0e84ff, #a0cbf7); */
    animation: card-float 6s ease-in-out infinite;
    display: flex;
    justify-content: center;
}

.submit-btn {
    width: 100%;
    margin-top: 24px;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #2f7ef0, #4b3ff0);
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero-wrap-strategy {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.phones-stage {
    position: relative;
    min-height: 640px;
}

/* ===== Phone mockups ===== */
.phones-stage {
    position: relative;
    min-height: 640px;
}

.float-chip {
    position: absolute;
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(20,30,80,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--blue);
    z-index: 5;
}

.chip-code {
    top: 0%;
    left: 22%;
}

.chip-android {
    top: 48%;
    right: -10%;
    background: #3457f5;
    color: #fff;
}

.chip-chart {
    bottom: 2%;
    right: 28%;
}

.phone {
    position: absolute;
    width: 220px;
    height: 450px;
    background: #111;
    border-radius: 34px;
    padding: 10px;
    box-shadow: 0 20px 45px rgba(20,30,80,.25);
}

    .phone .screen {
        width: 100%;
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
        background: #fff;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .phone .notch {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 45%;
        height: 22px;
        background: #111;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        z-index: 3;
    }

.status-row {
    font-size: .62rem;
    display: flex;
    justify-content: space-between;
    padding: .5rem .8rem .2rem;
    color: #fff;
}

    .status-row.dark {
        color: #1a1a1a;
    }

.phone-left {
    left: 8%;
    top: 8%;
    z-index: 2;
}

    .phone-left .screen {
        background: linear-gradient(160deg,#4a5cf0, #3457f5 55%, #2c46d6);
        color: #fff;
        padding: 1.4rem 1.1rem 1.2rem;
    }

    .phone-left .mob-sc-in {
        font-weight: 800;
        font-size: 1.5rem;
        line-height: 1.2;
        margin-top: 1.6rem;
    }

    .phone-left p {
        font-size: .78rem;
        opacity: .9;
        margin-top: .5rem;
    }

.astro-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.btn-getstarted {
    background: #fff;
    color: var(--blue-dark);
    border-radius: 12px;
    font-weight: 700;
    font-size: .82rem;
    padding: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1rem;
}

.phone-center {
    left: 37%;
    top: 15%;
    width: 250px;
    height: 510px;
    z-index: 4;
}

    .phone-center .screen {
        padding: 0;
    }

.shop-header {
    padding: 1.6rem 1rem .6rem;
}

    .shop-header small {
        color: #8b8fa3;
        font-size: .68rem;
    }

    .shop-header h4 {
        font-weight: 800;
        font-size: 1.5rem;
        margin: .2rem 0;
    }

    .shop-header .count {
        color: #9a9dab;
        font-size: .72rem;
    }

.cat-pills {
    display: flex;
    gap: .4rem;
    padding: 0 1rem .6rem;
}

    .cat-pills span {
        font-size: .68rem;
        padding: .35rem .7rem;
        border-radius: 20px;
        background: #f1f2f8;
        color: #4b4f63;
        font-weight: 600;
    }

        .cat-pills span.active {
            background: #1a1a1a;
            color: #fff;
        }

.product-grid {
    display: flex;
    gap: .55rem;
    padding: 0 1rem;
    flex: 1;
    overflow: hidden;
}

.product-card {
    flex: 1;
    background: #f6f7fb;
    border-radius: 12px;
    overflow: hidden;
    font-size: .62rem;
}

    .product-card .ph-img {
        height: 95px;
        background: linear-gradient(135deg,#dfe3f5,#c9cff0);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7c85c9;
        font-size: 1.6rem;
        position: relative;
    }

    .product-card .heart {
        position: absolute;
        top: 6px;
        right: 6px;
        color: #fff;
        font-size: .75rem;
    }

    .product-card .info {
        padding: .5rem .55rem .6rem;
    }

        .product-card .info .name {
            font-weight: 700;
            color: #1a1a1a;
            font-size: .66rem;
            line-height: 1.25;
        }

        .product-card .info .brand {
            color: #9a9dab;
            font-size: .58rem;
        }

    .product-card .price {
        font-weight: 800;
        color: #1a1a1a;
        font-size: .68rem;
    }

    .product-card .old-price {
        text-decoration: line-through;
        color: #b7b9c6;
        font-size: .58rem;
        margin-left: .2rem;
    }

.bottom-nav {
    display: flex;
    justify-content: space-around;
    padding: .6rem 0;
    border-top: 1px solid #f0f1f6;
    font-size: .58rem;
    color: #9a9dab;
}

    .bottom-nav i {
        display: block;
        font-size: 1rem;
        margin-bottom: .15rem;
    }

.phone-right {
    right: 0%;
    top: 8%;
    z-index: 3;
}

    .phone-right .screen {
        padding: 0;
    }

.cat-header {
    padding: 1.5rem 1rem .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .cat-header h4 {
        font-weight: 800;
        font-size: .95rem;
        margin: 0;
    }

.cat-section {
    padding: 0 1rem;
}

    .cat-section .row-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .72rem;
        font-weight: 700;
        margin: .7rem 0 .4rem;
    }

        .cat-section .row-title span.view-all {
            color: #9a9dab;
            font-weight: 600;
            font-size: .62rem;
        }

.mini-grid {
    display: flex;
    gap: .5rem;
    margin-bottom: .3rem;
}

.mini-card {
    flex: 1;
    font-size: .58rem;
}

    .mini-card .ph-img {
        height: 60px;
        border-radius: 10px;
        background: linear-gradient(135deg,#f4d9b0,#e8b978);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a97a2e;
        font-size: 1.1rem;
        margin-bottom: .3rem;
    }

        .mini-card .ph-img.alt {
            background: linear-gradient(135deg,#d6c9f7,#b39ce8);
            color: #6a4bb3;
        }

    .mini-card .price {
        font-weight: 800;
        color: #1a1a1a;
    }

    .mini-card .old-price {
        text-decoration: line-through;
        color: #b7b9c6;
        margin-left: .15rem;
    }

@media (max-width: 991px) {
    .phones-stage {
        display: none;
    }
}

/* ===== Animations ===== */
@keyframes floatY {
    0%, 100% {
        transform: translateY(0);
    }

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

@keyframes floatChip {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(6deg);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(.92);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(52,87,245,.35);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(52,87,245,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52,87,245,0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -150% 0;
    }

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

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .phone {
        opacity: 0;
        animation: popIn .7s cubic-bezier(.22,1,.36,1) forwards, floatY 6s ease-in-out infinite;
    }

    .phone-left {
        animation-delay: .05s, 1.1s;
    }

    .phone-center {
        animation-delay: .25s, 1.3s;
    }

    .phone-right {
        animation-delay: .45s, 1.5s;
    }

    .float-chip {
        opacity: 0;
        animation: popIn .6s ease forwards, floatChip 4.5s ease-in-out infinite;
    }

    .chip-code {
        animation-delay: .8s, 1.6s;
    }

    .chip-android {
        animation-delay: 1s, 1.9s;
    }

    .chip-chart {
        animation-delay: 1.2s, 2.2s;
    }

    .chip-android {
        animation-name: popIn, floatChip, pulseRing;
        animation-duration: .6s, 4.5s, 2.4s;
        animation-iteration-count: 1, infinite, infinite;
        animation-timing-function: ease, ease-in-out, ease-out;
    }

    .product-card .ph-img,
    .mini-card .ph-img {
        background-size: 200% 100%;
        animation: shimmer 3.5s linear infinite;
    }

    .product-card .ph-img {
        background-image: linear-gradient(120deg,#dfe3f5 30%, #eef1ff 45%, #c9cff0 60%);
    }

    .mini-card .ph-img {
        background-image: linear-gradient(120deg,#f4d9b0 30%, #fdf1de 45%, #e8b978 60%);
    }

        .mini-card .ph-img.alt {
            background-image: linear-gradient(120deg,#d6c9f7 30%, #f1ecfd 45%, #b39ce8 60%);
        }

    .heart {
        animation: heartBeat 1.8s ease-in-out infinite;
    }

    .btn-getstarted {
        transition: transform .2s ease, box-shadow .2s ease;
    }

        .btn-getstarted:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(0,0,0,.18);
        }

    .cat-pills span {
        transition: transform .2s ease;
    }

        .cat-pills span:hover {
            transform: translateY(-2px);
        }
}

.display-headline {
    font-weight: 700;
        font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    line-height: 1.15;
    letter-spacing: -.5px;
    margin-bottom: 20px;
}

    .display-headline .accent {
        color: #0E84FF;
    }

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(20, 30, 80, .08);
}

.header-whyUs .subhead {
    max-width: 100%;
}

.feature-card {
    background: #fff;
    border: 1px solid #e7e9f7;
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 6px 20px rgba(20, 30, 80, .04);
    transition: transform .2s ease, box-shadow .2s ease;
}

.solution-card .icon-circle, .challenge-card .icon-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #eef1ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0E84FF;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-weight: 700;
    font-size: 1.22rem;
    margin-bottom: .6rem;
    margin-top:5px;
}

.stat-banner {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    border-radius: 16px;
    padding: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    color: #2a2a2a;
    border: 1px solid #00000014;
}

/* Cards */
.challenge-card {
    background: linear-gradient(135deg, #fff5f5 0%, #fdf7f5 100%);
    border: 1px solid #f5c2c2;
    border-left: 4px solid #e8536a !important;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.solution-card {
    background: #fff;
    border: 1px solid #cfe0fb;
    border-left: 4px solid #1a56db !important;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.feature-card .icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle.red {
    background: #fbdcdc;
}

.icon-circle.blue {
    background: #dbe7fd;
}

.solution-card .icon-circle svg, .challenge-card .icon-circle svg {
    width: 30px;
    height: 30px;
}

/*.title {
    font-size: 32px;
    font-weight: 800;
    color: #16223d;
}*/

.accent-red {
    color: #e8536a;
}

.accent-blue {
    color: #1a56db;
}

.underline {
    width: 60px;
    height: 3px;
    border-radius: 3px;
}

    .underline.red {
        background: linear-gradient(90deg, #e8536a, #f5c2c2);
    }

    .underline.blue {
        background: #1a56db;
    }

.card-body p {
    color: #4b5568;
    font-size: 16px;
    line-height: 1.7;
}

.link-text {
    color: #1a56db;
    font-weight: 700;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #eef1f6;
}

    .feature-item:last-child {
        border-bottom: none;
    }

.challengeTabsContent-feature-item .feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eaf1fe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0;
}

.feature-icon svg {
    width: 20px;
    height: 20px;
    color: #1a56db;
}

.feature-item span {
    color: #2c3548;
    font-size: 15px;
    line-height: 1.4;
}

.dots {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 60px;
    background-image: radial-gradient(circle, #d7deec 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    opacity: 0.6;
}

@media (min-width: 992px) {
    .vr-divider {
        width: 1px;
        background: #e3e8f0;
    }
}

#challengeTabs {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #e3e8f0;
    margin-bottom: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

    #challengeTabs .challengeTabs-tab .challengeTabs-link.active {
        color: #1a56db;
        background: transparent;
        border-bottom: 3px solid #1a56db;
    }

    #challengeTabs .challengeTabs-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 0 16px 0;
        font-size: 16px !important;
        font-weight: 600;
        color: #5b6474;
        cursor: pointer;
        border: none;
        background: none;
        position: relative;
        white-space: nowrap;
    }

.challengeTabs-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#challengeTabsContent {
    width: 100% !important;
    margin-top: 4rem;
}

.challengeTabsContent-feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #eef1f6;
}

    .challengeTabsContent-feature-item:last-child {
        border-bottom: none;
    }



















/*My-New-Page-Custom-Css*/


.ccc-section {
    background-color: #ffffff;
    padding: 80px 0;
    overflow: hidden;
}

.ccc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #e8f0fe;
    color: #1a56db;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    padding: 9px 20px;
    border-radius: 50px;
    margin-bottom: 24px;
}

    .ccc-badge i {
        font-size: 0.95rem;
        color: #1a56db;
    }

.ccc-heading {
    font-weight: 800;
    font-size: 2.75rem;
    line-height: 1.15;
    color: #0f1b2d;
    margin-bottom: 18px;
}

.ccc-underline {
    width: 60px;
    height: 4px;
    background-color: #1a56db;
    border-radius: 2px;
    margin-bottom: 26px;
}

.ccc-text {
    color: #5b6577;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* Right info card */
.ccc-info-card {
    background: linear-gradient(180deg, #f6f8fc 0%, #eef2fa 100%);
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

    .ccc-info-card .ccc-dots {
        position: absolute;
        right: -10px;
        top: 0;
        bottom: 0;
        width: 180px;
        background-image: radial-gradient(#c7d3ec 1.5px, transparent 1.5px);
        background-size: 16px 16px;
        -webkit-mask-image: linear-gradient(to left, black, transparent);
        mask-image: linear-gradient(to left, black, transparent);
        opacity: 0.6;
    }

.ccc-info-icon {
    width: 68px;
    height: 68px;
    background-color: #e3ebfc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #1a56db;
    margin-bottom: 22px;
}

.ccc-info-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: #0f1b2d;
    margin-bottom: 10px;
}

.ccc-info-text {
    color: #5b6577;
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 26px;
    max-width: 420px;
}

.ccc-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #1a4fd6;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 24px 8px 8px;
    border-radius: 50px;
    border: none;
    position: relative;
    z-index: 1;
}

    .ccc-pill-btn .ccc-arrow-circle {
        width: 34px;
        height: 34px;
        background-color: #ffffff;
        color: #1a4fd6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
    }

/* Tech / feature cards */
.ccc-tech-card {
    background-color: #ffffff;
    border: 1px solid #e9edf5;
    border-radius: 14px;
    padding: 34px 16px 26px;
    text-align: center;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease;
}

    .ccc-tech-card:hover {
        box-shadow: 0 10px 24px rgba(20, 40, 90, 0.08);
        transform: translateY(-3px);
    }

.ccc-tech-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    background-color: #eaf0fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #1a56db;
}

.ccc-tech-label {
    font-weight: 700;
    font-size: 1rem;
    color: #0f1b2d;
    margin-bottom: 12px;
    line-height: 1.3;
}

.ccc-tech-underline {
    width: 22px;
    height: 3px;
    background-color: #1a56db;
    border-radius: 2px;
    margin: 0 auto;
}

/* Bottom strip */
.ccc-bottom-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 56px;
    flex-wrap: wrap;
    text-align: center;
}

.ccc-bottom-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #eaf0fd;
    color: #1a56db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ccc-bottom-strip p {
    margin: 0;
    color: #5b6577;
    font-size: 1rem;
}

@media (max-width: 991.98px) {
    .ccc-heading {
        font-size: 2.1rem;
    }

    .ccc-info-card {
        margin-top: 32px;
    }
}

#cta-card .cta-right {
    float: right;
}

#cta-card .row {
    align-items: center;
}

#cta-card p {
    line-height: 1.5rem;
    max-width:100%;
}

/*
@media (min-width: 300px) and (max-width: 700px)
{
  .page-title .title
  {
           font-size: 48px;
        text-align: center;
  }
  .form-card {
    flex: 0 0 425px;
 }

.fc-heading {
    font-size: 40px;
   
}

.sec-wrp {
     margin: inherit;
    
}

}*/



.fcc-section {
    position: relative;
    z-index: 1;
}


.fcc-wrapper {
    border: 1px solid #e6e9f0;
    border-radius: 16px;
    overflow: hidden;
    background-color: #ffffff;
}

/* Scroll container for small screens */
.fcc-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fcc-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    margin-bottom: 0;
}

    .fcc-table thead th {
        font-weight: 700;
        font-size: 1.05rem;
        padding: 22px 24px;
        vertical-align: middle;
        border: none;
        white-space: nowrap;
    }

.fcc-th-features {
    background-color: #ffffff;
    color: #0f1b2d;
}

.fcc-th-fusion {
    background-color: #2f7bf5;
    color: #ffffff;
}

.fcc-th-agencies {
    background-color: #ffffff;
    color: #0f1b2d;
}

.fcc-th-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    margin-right: 10px;
    font-size: 0.95rem;
}

    .fcc-th-icon.fcc-icon-features {
        background-color: #eef1f8;
        color: #4a5568;
    }

    .fcc-th-icon.fcc-icon-fusion {
        background-color: rgba(255,255,255,0.22);
        color: #ffffff;
    }

    .fcc-th-icon.fcc-icon-agencies {
        background-color: #fdeceb;
        color: #e5484d;
    }

.fcc-table tbody td {
    padding: 20px 24px;
    border-top: 1px solid #eef0f5;
    vertical-align: top;
    font-size: 0.95rem;
    line-height: 1.55;
}

.fcc-table tbody tr:first-child td {
    border-top: none;
}

.fcc-feature-label {
    font-weight: 700;
    color: #0f1b2d;
    white-space: nowrap;
}

.fcc-row-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fcc-row-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    margin-top: 2px;
}

    .fcc-row-icon.fcc-check {
        background-color: #e3edfd;
        color: #2f7bf5;
    }

    .fcc-row-icon.fcc-cross {
        background-color: #fdeceb;
        color: #e5484d;
    }

.fcc-row-text {
    color: #4a5568;
}

.fcc-col-fusion {
    background-color: #f6f9ff;
}

/* Scrollbar styling (optional, harmless) */
.fcc-scroll::-webkit-scrollbar {
    height: 8px;
}

.fcc-scroll::-webkit-scrollbar-thumb {
    background-color: #d7dee9;
    border-radius: 8px;
}

@media (max-width: 575.98px) {
    .fcc-table thead th {
        font-size: 0.95rem;
        padding: 16px 18px;
    }

    .fcc-table tbody td {
        padding: 16px 18px;
        font-size: 0.88rem;
    }
}

















.global_secutiry-5842 {
    display: flex;
    align-items: center;
}

    .global_secutiry-5842 img {
        border-radius: 10px;
    }


.comparison-grid-548 {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(320px, 1.5fr) minmax(300px, 1.2fr);
    align-items: stretch;
}


/*React_native-page-css*/


.rnfw-section {
    --rnfw-ink: #1b232c;
    --rnfw-paper: #eef1f0;
    --rnfw-paper-2: #e2e7e5;
    --rnfw-navy: #14212c;
    --rnfw-rn: #f2b705; /* React Native / JS lane accent */
    --rnfw-rn-soft: #fbe9b8;
    --rnfw-fl: #17b8e0; /* Flutter / Dart lane accent */
    --rnfw-fl-soft: #cdeff7;
    --rnfw-line: #c9d0cd;
    background: var(--rnfw-paper);
    color: var(--rnfw-ink);
    font-family: 'Inter', system-ui, sans-serif;
    padding: 5rem 0 6rem;
    overflow: hidden;
    position: relative;
}

    .rnfw-section .rnfw-eyebrow {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--rnfw-navy);
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
    }

        .rnfw-section .rnfw-eyebrow::before {
            content: "";
            width: 22px;
            height: 2px;
            background: var(--rnfw-navy);
            display: inline-block;
        }

    .rnfw-section h2.rnfw-heading {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 2.1rem;
        line-height: 1.15;
        letter-spacing: -0.01em;
        margin: 1rem 0 1.4rem;
        color: var(--rnfw-navy);
    }

    .rnfw-section .rnfw-lede {
        font-size: 1.08rem;
        line-height: 1.7;
        /* max-width: 46rem;*/
        color: #3b4650;
    }

        .rnfw-section .rnfw-lede strong {
            color: var(--rnfw-navy);
            font-weight: 600;
        }

/* ---------- Fork layout ---------- */
.rnfw-fork {
    position: relative;
    margin-top: 3.5rem;
}

.rnfw-fork-connector {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.rnfw-lane {
    position: relative;
    z-index: 1;
    height: 100%;
    background: #fff;
    border: 1px solid var(--rnfw-line);
    border-radius: 4px;
    padding: 2rem 2rem 2.2rem;
}

.rnfw-lane-rn {
    border-top: 4px solid var(--rnfw-rn);
}

.rnfw-lane-fl {
    border-top: 4px solid var(--rnfw-fl);
}

.rnfw-lane-badge {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.65rem;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 1rem;
}

.rnfw-lane-rn .rnfw-lane-badge {
    background: var(--rnfw-rn-soft);
    color: #7a5b02;
}

.rnfw-lane-fl .rnfw-lane-badge {
    background: var(--rnfw-fl-soft);
    color: #0a6f89;
}

.rnfw-lane h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--rnfw-navy);
    margin-bottom: 1rem;
}

.rnfw-fit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .rnfw-fit-list li {
        display: flex;
        gap: 0.7rem;
        align-items: flex-start;
        font-size: 0.95rem;
        line-height: 1.55;
        color: #384249;
        padding: 0.6rem 0;
        border-top: 1px dashed var(--rnfw-line);
    }

        .rnfw-fit-list li:first-child {
            border-top: none;
            padding-top: 0;
        }

        .rnfw-fit-list li::before {
            content: "→";
            font-weight: 600;
            flex-shrink: 0;
            margin-top: 0.05rem;
        }

.rnfw-lane-rn .rnfw-fit-list li::before {
    color: var(--rnfw-rn);
}

.rnfw-lane-fl .rnfw-fit-list li::before {
    color: var(--rnfw-fl);
}

/* ---------- Convergence panel ---------- */
.rnfw-converge {
    margin-top: 2.5rem;
    background: var(--rnfw-navy);
    color: #eef1f0;
    border-radius: 4px;
    padding: 2.4rem 2.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    align-items: center;
    justify-content: space-between;
}

    .rnfw-converge .rnfw-converge-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #9fb3bd;
        margin-bottom: 0.5rem;
        display: block;
    }

    .rnfw-converge p {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.15rem;
        font-weight: 500;
        line-height: 1.5;
        max-width: 34rem;
        margin: 0;
    }

        .rnfw-converge p span {
            color: var(--rnfw-rn);
        }

            .rnfw-converge p span.rnfw-fl-word {
                color: var(--rnfw-fl);
            }

.rnfw-btn-converge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: #eef1f0;
    color: var(--rnfw-navy);
    border: none;
    border-radius: 3px;
    padding: 0.85rem 1.5rem;
    white-space: nowrap;
    transition: transform 0.15s ease, background 0.15s ease;
}

    .rnfw-btn-converge:hover {
        background: #fff;
        transform: translateY(-1px);
        color: var(--rnfw-navy);
    }

@media (max-width: 991.98px) {
    .rnfw-fork-connector {
        display: none;
    }

    .rnfw-lane {
        margin-bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rnfw-btn-converge {
        transition: none;
    }
}





/*Flutter-app-development-page-css*/


.flrn-section {
    --flrn-ink: #1b232c;
    --flrn-paper: #eef1f0;
    --flrn-navy: #14212c;
    --flrn-fl: #17b8e0; /* Flutter / Dart lane accent — ab primary */
    --flrn-fl-soft: #cdeff7;
    --flrn-rn: #f2b705; /* React Native / JS lane accent — ab secondary */
    --flrn-rn-soft: #fbe9b8;
    --flrn-line: #c9d0cd;
    background: var(--flrn-paper);
    color: var(--flrn-ink);
    font-family: 'Inter', system-ui, sans-serif;
    padding: 5rem 0 6rem;
    overflow: hidden;
    position: relative;
}

    .flrn-section .flrn-eyebrow {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--flrn-navy);
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
    }

        .flrn-section .flrn-eyebrow::before {
            content: "";
            width: 22px;
            height: 2px;
            background: var(--flrn-navy);
            display: inline-block;
        }

    .flrn-section h2.flrn-heading {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: clamp(1.9rem, 3.4vw, 2.9rem);
        line-height: 1.15;
        letter-spacing: -0.01em;
        margin: 1rem 0 1.4rem;
        color: var(--flrn-navy);
    }

    .flrn-section .flrn-lede {
        font-size: 1.08rem;
        line-height: 1.7;
        /*max-width: 46rem;*/
        color: #3b4650;
    }

        .flrn-section .flrn-lede strong {
            color: var(--flrn-navy);
            font-weight: 600;
        }

/* ---------- Fork layout ---------- */
.flrn-fork {
    position: relative;
    margin-top: 3.5rem;
}

.flrn-fork-connector {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.flrn-lane {
    position: relative;
    z-index: 1;
    height: 100%;
    background: #fff;
    border: 1px solid var(--flrn-line);
    border-radius: 4px;
    padding: 2rem 2rem 2.2rem;
}

.flrn-lane-fl {
    border-top: 4px solid var(--flrn-fl);
}

.flrn-lane-rn {
    border-top: 4px solid var(--flrn-rn);
}

.flrn-lane-badge {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.65rem;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 1rem;
}

.flrn-lane-fl .flrn-lane-badge {
    background: var(--flrn-fl-soft);
    color: #0a6f89;
}

.flrn-lane-rn .flrn-lane-badge {
    background: var(--flrn-rn-soft);
    color: #7a5b02;
}

.flrn-lane h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--flrn-navy);
    margin-bottom: 1rem;
}

.flrn-fit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .flrn-fit-list li {
        display: flex;
        gap: 0.7rem;
        align-items: flex-start;
        font-size: 1.1rem;
        line-height: 1.55;
        color: #384249;
        padding: 0.6rem 0;
        border-top: 1px dashed var(--flrn-line);
    }

        .flrn-fit-list li:first-child {
            border-top: none;
            padding-top: 0;
        }

        .flrn-fit-list li::before {
            content: "→";
            font-weight: 600;
            flex-shrink: 0;
            margin-top: 0.05rem;
        }

.flrn-lane-fl .flrn-fit-list li::before {
    color: var(--flrn-fl);
}

.flrn-lane-rn .flrn-fit-list li::before {
    color: var(--flrn-rn);
}

/* ---------- Convergence panel ---------- */
.flrn-converge {
    margin-top: 2.5rem;
    background: var(--flrn-navy);
    color: #eef1f0;
    border-radius: 4px;
    padding: 2.4rem 2.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    align-items: center;
    justify-content: space-between;
}

    .flrn-converge .flrn-converge-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #9fb3bd;
        margin-bottom: 0.5rem;
        display: block;
    }

    .flrn-converge p {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.15rem;
        font-weight: 500;
        line-height: 1.5;
        max-width: 34rem;
        margin: 0;
    }

        .flrn-converge p span.flrn-fl-word {
            color: var(--flrn-fl);
        }

        .flrn-converge p span.flrn-rn-word {
            color: var(--flrn-rn);
        }

.flrn-btn-converge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: #eef1f0;
    color: var(--flrn-navy);
    border: none;
    border-radius: 3px;
    padding: 0.85rem 1.5rem;
    white-space: nowrap;
    transition: transform 0.15s ease, background 0.15s ease;
}

    .flrn-btn-converge:hover {
        background: #fff;
        transform: translateY(-1px);
        color: var(--flrn-navy);
    }

@media (max-width: 991.98px) {
    .flrn-fork-connector {
        display: none;
    }

    .flrn-lane {
        margin-bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flrn-btn-converge {
        transition: none;
    }
}




/*saa-development-page-css*/



/* ---------- section shell ---------- */
.sdxh-hero {
    --sdxh-bg: #f7fafc;
    --sdxh-card: #ffffff;
    --sdxh-ink: #0e1c2e;
    --sdxh-muted: #52657c;
    --sdxh-faint: #7d8ea3;
    --sdxh-line: rgba(14, 40, 66, 0.13);
    --sdxh-teal: #0d9488;
    --sdxh-teal-bright: #14b8a6;
    --sdxh-teal-ink: #0b7a70;
    --sdxh-amber: #f59e0b;
    --sdxh-font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
    --sdxh-font-body: "Instrument Sans", "Segoe UI", sans-serif;
    --sdxh-font-mono: "JetBrains Mono", "Consolas", monospace;
    position: relative;
    overflow: hidden;
    background: radial-gradient(780px 520px at 80% 4%, rgba(20, 184, 166, 0.11), transparent 62%), radial-gradient(620px 440px at 4% 104%, rgba(59, 130, 246, 0.07), transparent 60%), var(--sdxh-bg);
    color: var(--sdxh-ink);
    font-family: var(--sdxh-font-body);
    padding: clamp(64px, 9vw, 112px) 24px;
    box-sizing: border-box;
}

    .sdxh-hero *,
    .sdxh-hero *::before,
    .sdxh-hero *::after {
        box-sizing: border-box;
    }

/* dotted engineering-paper backdrop */
.sdxh-bg-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(14, 40, 66, 0.14) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(115% 90% at 62% 18%, #000 40%, transparent 100%);
    mask-image: radial-gradient(115% 90% at 62% 18%, #000 40%, transparent 100%);
    opacity: 0.55;
}

.sdxh-shell {
    position: relative;
    /*    max-width: 1180px;*/
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(44px, 6vw, 84px);
    align-items: center;
}

/* ---------- left : copy ---------- */
.sdxh-copy > * {
    animation: sdxh-rise 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

    .sdxh-copy > *:nth-child(1) {
        animation-delay: 0.05s;
    }

    .sdxh-copy > *:nth-child(2) {
        animation-delay: 0.14s;
    }

    .sdxh-copy > *:nth-child(3) {
        animation-delay: 0.23s;
    }

    .sdxh-copy > *:nth-child(4) {
        animation-delay: 0.32s;
    }

    .sdxh-copy > *:nth-child(5) {
        animation-delay: 0.41s;
    }

.sdxh-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
        padding: 9px 16px 9px 12px;
    border: 1px solid rgba(13, 148, 136, 0.35);
    border-radius: 999px;
    background: rgba(13, 148, 136, 0.06);
    margin: 0 0 26px;
}

.sdxh-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sdxh-teal);
    box-shadow: 0 0 8px rgba(13, 148, 136, 0.7);
}

.sdxh-badge-code {
   
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sdxh-teal-ink);
}

.sdxh-badge-caret {
    width: 7px;
    height: 13px;
    background: var(--sdxh-teal);
    animation: sdxh-blink 1.1s steps(1) infinite;
}

.sdxh-title {
    font-size:  clamp(2.4rem, 4vw, 3.9rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.022em;
    margin: 0 0 22px;
    color: var(--sdxh-ink);
}

.sdxh-title-mark {
    position: relative;
    display: inline-block;
    background: #2563EB;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

    .sdxh-title-mark::after {
        content: "";
        position: absolute;
        left: 2%;
        right: 4%;
        bottom: 0.04em;
        height: 0.14em;
        border-radius: 999px;
        background: #2563eb36;
        transform: scaleX(0);
        transform-origin: left center;
        animation: sdxh-sweep 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) 0.65s forwards;
    }

.sdxh-lede {
    font-size: clamp(1rem, 0.4vw + 0.9rem, 1.13rem);
    line-height: 1.7;
    color: var(--sdxh-muted);
    max-width: 34em;
    margin: 0 0 34px;
}

.sdxh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 38px;
}

.sdxh-btn-main,
.sdxh-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 12px;
    font-family: var(--sdxh-font-body);
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.sdxh-btn-main {
    color: #ffffff;
    background: #2563EB;
    /* box-shadow: 0 14px 28px -12px rgba(13, 148, 136, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28); */
}

    .sdxh-btn-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 36px -12px rgba(13, 148, 136, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

.sdxh-btn-arrow {
    transition: transform 0.18s ease;
}

.sdxh-btn-main:hover .sdxh-btn-arrow {
    transform: translateX(4px);
}

.sdxh-btn-ghost {
    color: var(--sdxh-ink);
    border: 1px solid rgba(14, 40, 66, 0.22);
    background: rgba(255, 255, 255, 0.7);
}

    .sdxh-btn-ghost:hover {
        border-color: rgba(13, 148, 136, 0.55);
        background: rgba(13, 148, 136, 0.05);
        transform: translateY(-2px);
    }

.sdxh-hero a:focus-visible {
    outline: 2px solid var(--sdxh-teal);
    outline-offset: 3px;
    border-radius: 12px;
}

/* stats — mono readout */
.sdxh-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--sdxh-font-mono);
    font-size: 12.5px;
    letter-spacing: 0.01em;
    color: var(--sdxh-faint);
}

.sdxh-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}

    .sdxh-stat strong {
        font-weight: 700;
        font-size: 15px;
        color: #2563EB;
    }

    .sdxh-stat + .sdxh-stat::before {
        content: "//";
        margin: 0 16px;
        color: rgba(14, 40, 66, 0.2);
        font-weight: 400;
    }

/* ---------- right : orbital tenancy map ---------- */
.sdxh-stage {
    position: relative;
    animation: sdxh-panel-in 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) 0.25s both;
}

.sdxh-orbit {
    position: relative;
    width: min(552px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

/* concentric rings */
.sdxh-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.sdxh-ring-outer {
    inset: 2%;
    border: 1px solid rgba(14, 40, 66, 0.09);
}

.sdxh-ring-mid {
    inset: 16%;
    border: 1px dashed rgba(14, 40, 66, 0.16);
    animation: sdxh-spin 70s linear infinite;
}

.sdxh-ring-inner {
    inset: 31%;
    border: 1px solid rgba(13, 148, 136, 0.24);
}

/* soft radar sweep */
.sdxh-radar-sweep {
    position: absolute;
    inset: 2%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(13, 148, 136, 0.12), transparent 68deg);
    animation: sdxh-spin 9s linear infinite;
    pointer-events: none;
}

/* spokes + data pulses */
.sdxh-spokes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* central hub */
.sdxh-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(232px, 56%);
    text-align: center;
    padding: 18px 16px 15px;
    background: var(--sdxh-card);
    border: 1px solid rgba(13, 148, 136, 0.45);
    border-radius: 16px;
    box-shadow: 0 20px 44px -20px rgba(13, 60, 80, 0.4), 0 0 0 6px rgba(13, 148, 136, 0.06);
}

    .sdxh-hub::before {
        content: "";
        position: absolute;
        inset: -8px;
        border: 1px solid rgba(13, 148, 136, 0.25);
        border-radius: 22px;
        animation: sdxh-ring-pulse 3.2s ease-in-out infinite;
        pointer-events: none;
    }

.sdxh-hub-name {
    font-family: var(--sdxh-font-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sdxh-ink);
    margin: 0 0 5px;
}

.sdxh-hub-sub {
    font-family: var(--sdxh-font-mono);
    font-size: 10.5px;
    color: var(--sdxh-muted);
    margin: 0;
}

/* tenant satellites */
.sdxh-sat {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 11px 17px 9px;
    background: var(--sdxh-card);
    border: 1px solid var(--sdxh-line);
    border-radius: 13px;
    box-shadow: 0 14px 28px -18px rgba(13, 60, 80, 0.45);
    animation: sdxh-sat-glow 2.4s ease-in-out infinite;
}

.sdxh-sat-a {
    left: 19%;
    top: 32%;
    animation-delay: 0.73s;
}

.sdxh-sat-b {
    left: 81%;
    top: 32%;
    animation-delay: 1.53s;
}

.sdxh-sat-c {
    left: 50%;
    top: 86%;
    animation-delay: 2.33s;
}

.sdxh-sat-name {
    font-family: var(--sdxh-font-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sdxh-ink);
    margin: 0 0 3px;
    white-space: nowrap;
}

.sdxh-sat-sub {
    font-family: var(--sdxh-font-mono);
    font-size: 10px;
    color: var(--sdxh-faint);
    margin: 0;
    white-space: nowrap;
}

/* floating chips */
.sdxh-flag {
    position: absolute;
    top: 3.5%;
    right: -1%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sdxh-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: #7ef0dd;
    background: var(--sdxh-ink);
    border-radius: 999px;
    padding: 7px 13px;
    box-shadow: 0 14px 28px -14px rgba(14, 28, 46, 0.6);
}

.sdxh-flag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sdxh-amber);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.85);
}

.sdxh-scale-tag {
    position: absolute;
    left: -1%;
    bottom: 3%;
    font-family: var(--sdxh-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--sdxh-teal-ink);
    background: var(--sdxh-card);
    border: 1px solid rgba(13, 148, 136, 0.4);
    border-radius: 999px;
    padding: 8px 14px;
    transform: rotate(-2deg);
    box-shadow: 0 14px 28px -16px rgba(13, 60, 80, 0.45);
    animation: sdxh-float 5.5s ease-in-out infinite;
}

/* ---------- keyframes (namespaced) ---------- */
@keyframes sdxh-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes sdxh-panel-in {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sdxh-blink {
    0%, 55% {
        opacity: 1;
    }

    56%, 100% {
        opacity: 0;
    }
}

@keyframes sdxh-sweep {
    to {
        transform: scaleX(1);
    }
}

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

@keyframes sdxh-ring-pulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes sdxh-float {
    0%, 100% {
        transform: rotate(-2deg) translateY(0);
    }

    50% {
        transform: rotate(-2deg) translateY(-7px);
    }
}

@keyframes sdxh-sat-glow {
    0%, 68%, 100% {
        border-color: var(--sdxh-line);
    }

    82% {
        border-color: rgba(13, 148, 136, 0.6);
        box-shadow: 0 14px 28px -18px rgba(13, 60, 80, 0.45), 0 0 0 4px rgba(20, 184, 166, 0.14);
    }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
    .sdxh-shell {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .sdxh-orbit {
        width: min(460px, 100%);
    }
}

@media (max-width: 560px) {
    .sdxh-hero {
        padding: 56px 18px 72px;
    }

    .sdxh-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sdxh-btn-main, .sdxh-btn-ghost {
        justify-content: center;
    }

    .sdxh-stat + .sdxh-stat::before {
        margin: 0 10px;
    }

    .sdxh-hub {
        padding: 14px 12px 12px;
    }

    .sdxh-hub-name {
        font-size: 14px;
    }

    .sdxh-hub-sub {
        font-size: 9px;
    }

    .sdxh-sat {
        padding: 9px 12px 7px;
    }

    .sdxh-sat-name {
        font-size: 12px;
    }

    .sdxh-sat-sub {
        font-size: 9px;
    }

    .sdxh-flag {
        font-size: 10px;
        right: 0;
    }

    .sdxh-scale-tag {
        font-size: 10.5px;
        left: 0;
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sdxh-hero *,
    .sdxh-hero *::before,
    .sdxh-hero *::after {
        animation: none !important;
        transition: none !important;
    }

    .sdxh-title-mark::after {
        transform: scaleX(1);
    }

    .sdxh-pulses, .sdxh-radar-sweep {
        display: none;
    }
}


.sdst-band {
    --sdst-bg: #f7fafc; /* apne page background se match karne ke liye badal sakte hain */
    --sdst-card: #ffffff;
    --sdst-ink: #0e1c2e;
    --sdst-muted: #61738a;
    --sdst-line: rgba(14, 40, 66, 0.12);
    --sdst-teal: #0d9488;
    --sdst-teal-bright: #14b8a6;
    --sdst-teal-ink: #0b7a70;
    --sdst-font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
    --sdst-font-mono: "JetBrains Mono", "Consolas", monospace;
    background: var(--sdst-bg);
    padding: clamp(44px, 6vw, 76px) 24px;
    box-sizing: border-box;
}

    .sdst-band *,
    .sdst-band *::before,
    .sdst-band *::after {
        box-sizing: border-box;
    }

.sdst-shell {
    max-width: 1180px;
    margin: 0 auto;
}

/* ---------- grid ---------- */
.sdst-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- tile ---------- */
.sdst-tile {
    position: relative;
    background: var(--sdst-card);
    border: 1px solid var(--sdst-line);
    border-radius: 16px;
    padding: 30px 18px 24px;
    text-align: center;
    box-shadow: 0 10px 24px -18px rgba(13, 60, 80, 0.35);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

    .sdst-tile:hover {
        transform: translateY(-5px);
        border-color: rgba(13, 148, 136, 0.4);
        box-shadow: 0 22px 40px -20px rgba(13, 60, 80, 0.45);
    }

    /* viewfinder corner brackets */
    .sdst-tile::before,
    .sdst-tile::after {
        content: "";
        position: absolute;
        width: 15px;
        height: 15px;
        border: 0 solid #2563eb;
        transition: width 0.22s ease, height 0.22s ease, border-color 0.22s ease;
        pointer-events: none;
    }

    .sdst-tile::before {
        top: 10px;
        left: 10px;
        border-top-width: 2px;
        border-left-width: 2px;
        border-top-left-radius: 5px;
    }

    .sdst-tile::after {
        bottom: 10px;
        right: 10px;
        border-bottom-width: 2px;
        border-right-width: 2px;
        border-bottom-right-radius: 5px;
    }

    .sdst-tile:hover::before,
    .sdst-tile:hover::after {
        width: 22px;
        height: 22px;
        border-color: var(--sdst-teal);
    }

/* ---------- number + label ---------- */
.sdst-num {
    display: block;
    font-family: var(--sdst-font-display);
    font-size: clamp(2.05rem, 2.6vw + 0.9rem, 2.9rem);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: #2563eb;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 11px;
}

.sdst-label {
    display: block;
    font-family: unset;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.55;
    color: var(--sdst-muted);
}

/* ---------- scroll-in reveal ----------
   JS ".sdst-prep" lagata hai (hide) aur view me aate hi ".sdst-in" (reveal).
   Agar JS load na ho to tiles by default visible rehte hain. */
.sdst-prep:not(.sdst-in) .sdst-tile {
    opacity: 0;
}

.sdst-in .sdst-tile {
    animation: sdst-pop 0.65s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}

    .sdst-in .sdst-tile:nth-child(1) {
        animation-delay: 0.05s;
    }

    .sdst-in .sdst-tile:nth-child(2) {
        animation-delay: 0.15s;
    }

    .sdst-in .sdst-tile:nth-child(3) {
        animation-delay: 0.25s;
    }

    .sdst-in .sdst-tile:nth-child(4) {
        animation-delay: 0.35s;
    }

/* ---------- keyframes (namespaced) ---------- */
@keyframes sdst-pop {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

/* ---------- responsive ---------- */
@media (max-width: 920px) {
    .sdst-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 400px) {
    .sdst-band {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sdst-grid {
        gap: 11px;
    }

    .sdst-tile {
        padding: 24px 12px 19px;
        border-radius: 14px;
    }

    .sdst-label {
        font-size: 10px;
        letter-spacing: 0.06em;
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sdst-band *,
    .sdst-band *::before,
    .sdst-band *::after {
        animation: none !important;
        transition: none !important;
    }

    .sdst-prep:not(.sdst-in) .sdst-tile {
        opacity: 1;
    }
}






.sdpx-section {
    --sdpx-navy: #151b3f;
    --sdpx-muted: #5f6780;
    --sdpx-line: #dde2f0;
    /*font-family: 'Poppins', system-ui, -apple-system, sans-serif;*/
    position: relative;
    overflow: hidden;
    padding: 76px 0 88px 0;
    background: radial-gradient(900px 480px at 88% -80px, rgba(64,201,208,.16), transparent 62%), radial-gradient(760px 520px at -90px 140px, rgba(139,108,250,.12), transparent 60%), linear-gradient(180deg,#fbfaff 0%,#f6f6fd 55%,#f1fafb 100%);
}

.sdpx-z1 {
    z-index: 2;
}

/* ---------- Decorative elements ---------- */
.sdpx-dots {
    position: absolute;
    width: 132px;
    height: 112px;
    pointer-events: none;
    opacity: .55;
    z-index: 1;
    background-image: radial-gradient(circle, #b9a9fa 2.4px, transparent 2.9px);
    background-size: 22px 22px;
}

.sdpx-dots--tl {
    top: 28px;
    left: 36px;
}

.sdpx-dots--tr {
    top: 34px;
    right: 40px;
    background-image: radial-gradient(circle, #79d3d9 2.4px, transparent 2.9px);
}

.sdpx-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.sdpx-blob--l {
    width: 120px;
    height: 120px;
    left: 46px;
    top: 158px;
    background: #efeafd;
}

.sdpx-blob--r {
    width: 320px;
    height: 320px;
    right: -140px;
    top: -140px;
    background: radial-gradient(circle at 32% 68%, rgba(84,208,214,.26), rgba(84,208,214,0) 70%);
}

/* ---------- Header ---------- */
.sdpx-head {
    margin-bottom: 70px;
}

.sdpx-badge {
    display: inline-block;
    padding: .55rem 1.5rem;
    border-radius: 999px;
    background: #ece7fd;
    border: 1px solid #ded4fb;
    color: #6a4cf1;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .02em;
}

.sdpx-title {
    margin: 1rem 0 0;
    font-weight: 700;
    color: var(--sdpx-navy);
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1.12;
}

.sdpx-title-grad {
    font-weight: 700;
    background: #2563eb;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sdpx-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 1.15rem 0 1.25rem;
}

.sdpx-divider-bar {
    width: 92px;
    height: 4px;
    border-radius: 4px;
    background: #2563eb;
}

.sdpx-divider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2563eb;
}

.sdpx-sub {
    max-width: 560px;
    margin: 0 auto;
    color: var(--sdpx-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

/* ---------- Color themes (per step) ---------- */
.sdpx-theme-purple {
    --sdpx-accent: #7a5af8;
    --sdpx-icon-c: #7a5af8;
    --sdpx-icon-bg: linear-gradient(140deg,#f1ecff,#ddd2fe);
}

.sdpx-theme-teal {
    --sdpx-accent: #21b9ab;
    --sdpx-icon-c: #0fa39b;
    --sdpx-icon-bg: linear-gradient(140deg,#e3fbf5,#c6f2e9);
}

.sdpx-theme-indigo {
    --sdpx-accent: #6a5cf5;
    --sdpx-icon-c: #4b86f5;
    --sdpx-icon-bg: linear-gradient(140deg,#e9f1ff,#d2e3ff);
}

.sdpx-theme-green {
    --sdpx-accent: #2fc08c;
    --sdpx-icon-c: #1fae7d;
    --sdpx-icon-bg: linear-gradient(140deg,#e2f9ee,#c9f2e0);
}

.sdpx-theme-blue {
    --sdpx-accent: #4e7df6;
    --sdpx-icon-c: #4e7df6;
    --sdpx-icon-bg: linear-gradient(140deg,#e8efff,#d1e2ff);
}

/* Node dot colors */
.sdpx-dot--teal {
    background: #12a7bd;
}

.sdpx-dot--green {
    background: #2fc08c;
}

.sdpx-dot--purple {
    background: #7c4dea;
}

.sdpx-dot--blue {
    background: #4e6ef6;
}

/* ---------- Timeline ---------- */
.sdpx-timeline {
    position: relative;
    padding-bottom: 30px;
}

    .sdpx-timeline::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 80px;
        bottom: 70px;
        width: 2px;
        transform: translateX(-50%);
        background: var(--sdpx-line);
    }

.sdpx-item {
    position: relative;
}

.sdpx-node {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 6px 16px -8px rgba(21,27,63,.18);
}

.sdpx-node-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* ---------- Card ---------- */
.sdpx-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    background: #fff;
    border: 1px solid #edeff8;
    border-radius: 18px;
    padding: 34px 36px;
    z-index: 2;
    box-shadow: 0 24px 46px -24px rgba(90,80,190,.22), 0 6px 16px -8px rgba(21,27,63,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .sdpx-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 54px -24px rgba(90,80,190,.30), 0 8px 18px -8px rgba(21,27,63,.08);
    }

.sdpx-card-body {
    flex: 1 1 auto;
}

.sdpx-step {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: .55rem;
}

.sdpx-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sdpx-navy);
    line-height: 1.32;
    margin-bottom: .55rem;
}

.sdpx-underline {
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    margin-bottom: .9rem;
    background: linear-gradient(90deg, #2563eb, transparent);
    opacity: .65;
}

.sdpx-card p {
    margin: 0;
    color: var(--sdpx-muted);
    font-size: .93rem;
    line-height: 1.85;
}

.sdpx-icon {
    flex: 0 0 auto;
    width: 106px;
    height: 106px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.35rem;
    color: var(--sdpx-icon-c);
    background: var(--sdpx-icon-bg);
    border: 8px solid rgba(255,255,255,.75);
    box-shadow: 0 14px 28px -16px rgba(21,27,63,.28);
}

/* ---------- Connectors (arrow + line) ---------- */
.sdpx-arrow, .sdpx-cline {
    position: absolute;
    top: 50%;
}

.sdpx-arrow {
    width: 0;
    height: 0;
    border: 11px solid transparent;
    transform: translateY(-50%);
    z-index: 2;
}

.sdpx-cline {
    height: 2px;
    width: 44px;
    background: var(--sdpx-accent);
    opacity: .55;
    transform: translateY(-50%);
}

/* ---------- Desktop (lg and up) ---------- */
@media (min-width: 992px) {
    .sdpx-item--left .sdpx-col {
        padding-right: 74px;
    }

    .sdpx-item--right .sdpx-col {
        padding-left: 74px;
    }

    .sdpx-item + .sdpx-item {
        margin-top: -78px;
    }
    /* stagger / overlap jaisa design me hai */

    .sdpx-item--left .sdpx-arrow {
        right: -20px;
        border-left-color: var(--sdpx-accent);
        border-right-width: 0;
    }

    .sdpx-item--left .sdpx-cline {
        right: -46px;
    }

    .sdpx-item--right .sdpx-arrow {
        left: -20px;
        border-right-color: var(--sdpx-accent);
        border-left-width: 0;
    }

    .sdpx-item--right .sdpx-cline {
        left: -46px;
    }
}

/* ---------- Mobile / Tablet (below lg) : line left side aa jaati hai ---------- */
@media (max-width: 991.98px) {
    .sdpx-timeline::before {
        left: 26px;
        top: 14px;
        bottom: 30px;
    }

    .sdpx-item {
        margin-bottom: 26px;
    }

    .sdpx-col {
        padding-left: 68px;
    }

    .sdpx-node {
        left: 26px;
        width: 42px;
        height: 42px;
    }

    .sdpx-node-dot {
        width: 13px;
        height: 13px;
    }

    .sdpx-card {
        padding: 24px 22px;
        gap: 16px;
    }

    .sdpx-card-title {
        font-size: 1.15rem;
    }

    .sdpx-icon {
        width: 66px;
        height: 66px;
        font-size: 1.5rem;
        border-width: 6px;
    }

    .sdpx-arrow {
        left: -18px;
        border-width: 9px;
        border-left-width: 0;
        border-right-color: var(--sdpx-accent);
    }

    .sdpx-cline {
        left: -26px;
        width: 26px;
    }
}

@media (max-width: 420px) {
    .sdpx-icon {
        display: none;
    }
    /* bahut chhoti screen par sirf text */
}

/* ---------- Bottom wave ---------- */
.sdpx-wave {
    line-height: 0;
    margin-top: 50px;
    position: relative;
    z-index: 1;
}

    .sdpx-wave svg {
        width: 100%;
        height: 160px;
        display: block;
    }

.header-whyUs-saaspage {
    max-width: inherit;
}

.cards-saas-page {
    grid-template-columns: repeat(3, 1fr) !important;
}

.why-choose-section-saas-page {
    padding-bottom: inherit !important;
}

.cus-saas-card {
    display: flex;
}

    .cus-saas-card .hww-card-desc-saas-page {
        border: 1px solid #d5d5d5;
        padding: 4px 11px;
        margin: 6px 4px;
        BORDER-RADIUS: 27PX;
    }

.main-approch-sec-saas-page {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 300px) and (max-width: 700px) {
    .main-approch-sec-saas-page {
        grid-template-columns: inherit !important;
    }

    .cards-saas-page {
        grid-template-columns: inherit !important;
    }

    .cus-saas-card .hww-card-desc-saas-page {
        border: 1px solid #eaeaea;
        padding: 0px 11px;
        margin: 11px 4px;
    }

    /*.cus-saas-card {
        display: inherit !important;
    }*/

    .sdpx-node {
        display: none;
    }

    .sdpx-cline {
        display: none;
    }

    .sdpx-timeline::before {
        display: none;
    }

    /*.main-approch-sec {
        gap: inherit;
    }*/
}

.banner-gradient3-saas-54 {
    background: linear-gradient( 135deg, #060816 0%, #0b1228 40%, #111c3d 100% );
}

/*mvp-development-page-css*/

.mvpx-hero {
    --mvpx-ink: #17171f;
    --mvpx-body: #4c4c58;
    --mvpx-muted: #8a8a96;
    --mvpx-indigo: #5b4ce0;
    --mvpx-indigo-soft: #eceafb;
    --mvpx-orange: #0e84ff;
    --mvpx-green: #1ea555;
    --mvpx-green-soft: #eafaf0;
    --mvpx-paper: #f6f6f8;
    --mvpx-card-line: #ececf2;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--mvpx-paper);
    color: var(--mvpx-body);
    padding: 88px 0 96px;
    overflow: hidden;
}

.mvpx-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------- Left copy (same as before) ---------------- */
.mvpx-tag {
    display: inline-block;
    background: var(--mvpx-indigo-soft);
    border: 1px solid #dcd8f8;
    color: #4a3dd0;
    font-size: .85rem;
    font-weight: 600;
    padding: .45rem .95rem;
    border-radius: 9px;
}

.mvpx-h1 {
    font-weight: 700;
    color: var(--mvpx-ink);
    font-size: clamp(2.4rem, 4vw, 3.9rem);;
    line-height: 1.07;
    letter-spacing: -.02em;
    margin: 1.4rem 0 1.35rem;
}

.mvpx-h1-accent {
    color: #2563eb;
}

.mvpx-lead {
    font-size: 1.06rem;
    line-height: 1.8;
    max-width: 34rem;
    margin-bottom: 2.1rem;
}

.mvpx-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.mvpx-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .98rem;
    padding: .85rem 1.5rem;
    border-radius: 11px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

    .mvpx-btn:focus-visible {
        outline: 3px solid rgba(91,76,224,.45);
        outline-offset: 2px;
    }

.mvpx-btn--primary {
    background: #2563eb;
    color: #fff;
}


.mvpx-btn-arrow {
    transition: transform .2s ease;
}

.mvpx-btn--primary:hover .mvpx-btn-arrow {
    transform: translateX(4px);
}

.mvpx-btn--ghost {
    border-color: var(--mvpx-ink);
    color: var(--mvpx-ink);
    background: transparent;
}



.mvpx-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2rem;
    padding: 0;
    margin: 2.3rem 0 0;
    font-size: .85rem;
    color: var(--mvpx-muted);
}

    .mvpx-stats b {
        color: var(--mvpx-ink);
        font-weight: 700;
        margin-right: .4rem;
    }

/* ================= NEW RIGHT SIDE ================= */

/* Stage: dotted backdrop + indigo glow */
.mvpx-stage {
    position: relative;
    max-width: 560px;
    margin-inline: auto;
    padding: 46px 30px 100px;
}

    .mvpx-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, #cfcfdc 1.3px, transparent 1.7px);
        background-size: 20px 20px;
        border: 1px solid rgba(23,23,31,.06);
    }

    .mvpx-stage::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 340px;
        height: 340px;
        left: -70px;
        top: -70px;
        background: radial-gradient(circle, rgba(91,76,224,.18), transparent 68%);
        pointer-events: none;
    }

.mvpx-vis {
    position: relative;
    z-index: 2;
}

/* ----- Build terminal ----- */
.mvpx-term {
    background: #1d1c26;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
    margin-right: 36px;
    box-shadow: 0 34px 64px -30px rgba(23,23,31,.55), 0 8px 20px -10px rgba(23,23,31,.25);
}

.mvpx-term-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #16151e;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.mvpx-term-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.mvpx-term-dot--r {
    background: #ff5f57;
}

.mvpx-term-dot--y {
    background: #febc2e;
}

.mvpx-term-dot--g {
    background: #28c840;
}

.mvpx-term-title {
    margin-left: 10px;
    font-size: .72rem;
    color: #8b8b98;
}

.mvpx-term-body {
    padding: 20px 20px 22px;
    font-size: .84rem;
    line-height: 2;
}

    .mvpx-term-body p {
        margin: 0;
        color: #e8e8f0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.mvpx-t-prompt {
    color: #8f83ff;
    margin-right: .5ch;
}

.mvpx-t-arg {
    color: #f9a488;
}

.mvpx-t-ok {
    color: #7fe0a0;
}

.mvpx-t-dim {
    color: #6f6f7e;
    font-size: .76rem;
}

.mvpx-t-track {
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    height: 8px;
    border-radius: 99px;
    background: #33323f;
    overflow: hidden;
    margin-right: 10px;
}

.mvpx-t-fill {
    display: block;
    height: 100%;
    width: 75%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--mvpx-indigo), var(--mvpx-green));
}

.mvpx-cursor {
    display: inline-block;
    width: 8px;
    height: 15px;
    background: #7fe0a0;
    margin-left: 5px;
    vertical-align: -2px;
    animation: mvpxBlink 1s steps(1) infinite;
}

@keyframes mvpxBlink {
    50% {
        opacity: 0;
    }
}

/* ----- Launch report card (terminal ke upar overlap) ----- */
.mvpx-report {
    position: absolute;
    right: -6px;
    bottom: -46px;
    z-index: 3;
    width: 252px;
    background: #fff;
    border: 1px solid var(--mvpx-card-line);
    border-radius: 14px;
    padding: 15px 17px 14px;
    box-shadow: 0 26px 50px -22px rgba(23,23,31,.42), 0 6px 16px -8px rgba(23,23,31,.14);
}

.mvpx-report-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mvpx-report-title {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .13em;
    color: #5a5a66;
}

.mvpx-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mvpx-green-soft);
    color: #158a48;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .28rem .55rem;
    border-radius: 6px;
}

    .mvpx-live i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--mvpx-green);
        position: relative;
    }

        .mvpx-live i::after {
            content: "";
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 2px solid rgba(30,165,85,.4);
            animation: mvpxPulse 2.4s ease-out infinite;
        }

@keyframes mvpxPulse {
    0% {
        transform: scale(.55);
        opacity: 1;
    }

    70% {
        transform: scale(1.35);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.mvpx-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 64px;
    margin-bottom: 10px;
}

    .mvpx-bars i {
        flex: 1;
        height: var(--h, 40%);
        border-radius: 5px 5px 2px 2px;
        background: linear-gradient(180deg, #8f83ff, var(--mvpx-indigo));
        transform-origin: bottom;
        animation: mvpxGrow .7s ease both;
    }

        .mvpx-bars i:last-child {
            background: linear-gradient(180deg, #4fd48b, var(--mvpx-green));
        }

        .mvpx-bars i:nth-child(2) {
            animation-delay: .06s;
        }

        .mvpx-bars i:nth-child(3) {
            animation-delay: .12s;
        }

        .mvpx-bars i:nth-child(4) {
            animation-delay: .18s;
        }

        .mvpx-bars i:nth-child(5) {
            animation-delay: .24s;
        }

        .mvpx-bars i:nth-child(6) {
            animation-delay: .30s;
        }

        .mvpx-bars i:nth-child(7) {
            animation-delay: .36s;
        }

@keyframes mvpxGrow {
    from {
        transform: scaleY(0);
    }
}

.mvpx-report-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .66rem;
    color: #8a8a96;
}

.mvpx-report-ok {
    color: #158a48;
    font-weight: 700;
}

/* ----- Floating chips ----- */
.mvpx-chip {
    position: absolute;
    z-index: 4;
    background: #fff;
    border: 1px solid var(--mvpx-card-line);
    border-radius: 9px;
    padding: .5rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px rgba(23,23,31,.28);
    white-space: nowrap;
}

.mvpx-chip--top {
    top: 18px;
    right: 10px;
    color: var(--mvpx-indigo);
    animation: mvpxFloatA 3.2s ease-in-out infinite alternate;
}

.mvpx-chip--bottom {
    bottom: 24px;
    left: 12px;
    color: var(--mvpx-orange);
    animation: mvpxFloatB 3.2s ease-in-out infinite alternate;
    animation-delay: -1.6s;
}

@keyframes mvpxFloatA {
    from {
        transform: rotate(1.5deg) translateY(0);
    }

    to {
        transform: rotate(1.5deg) translateY(-6px);
    }
}

@keyframes mvpxFloatB {
    from {
        transform: rotate(-1.5deg) translateY(0);
    }

    to {
        transform: rotate(-1.5deg) translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mvpx-chip,
    .mvpx-cursor,
    .mvpx-bars i,
    .mvpx-live i::after {
        animation: none;
    }

    .mvpx-btn, .mvpx-btn-arrow {
        transition: none;
    }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
    .mvpx-hero {
        padding: 64px 0 72px;
    }

    .mvpx-stage {
        margin-top: 8px;
    }
}

@media (max-width: 575.98px) {
    .mvpx-stage {
        padding: 36px 14px 42px;
    }

    .mvpx-term {
        margin-right: 0;
    }

    .mvpx-term-body {
        padding: 16px 14px 18px;
        font-size: .76rem;
    }

    .mvpx-t-track {
        width: 110px;
    }

    .mvpx-report {
        position: static;
        width: 100%;
        margin-top: 16px;
    }

    .mvpx-chip--bottom {
        bottom: 10px;
    }

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

.cards-whyUs-mvp-page {
    grid-template-columns: repeat(2, 1fr);
}

.cus-mvp-single-service-box .single-services-box {
    border: 1px solid #b9b9b9;
}


.fc-approch-saas-mvp {
  padding-top:88px;
}

.fa-approch-container-saas-mvp {
    margin-bottom: 2rem;
}

/*Ui-Ux_design-page-css*/


.uxd-hero {
    /* -- scoped design tokens -- */
    --uxd-pink: #ec3f92;
    --uxd-pink-deep: #d92f81;
    --uxd-ink: #1d1936;
    --uxd-text: #514c6b;
    --uxd-purple: #6c57d6;
    --uxd-lavender: #e9e3f9;
    --uxd-bg: #f5f3fb;
    --uxd-line: #e7e3f3;
    --uxd-bar-purple: #a99ce9;
    --uxd-bar-grey: #dbd8e8;
    --uxd-rose-code: #9c3f63;
    --uxd-indigo-code: #40509f;
    --uxd-grid-line: rgba(29,25,54,.06);
    --uxd-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --uxd-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    background: var(--uxd-bg);
    font-family: var(--uxd-font-sans);
    color: var(--uxd-ink);
    padding: 96px 0 88px;
    overflow: hidden;
}

/* ---------------- Left column : copy ---------------- */

.uxd-tag {
    display: inline-block;
    font-family: var(--uxd-font-mono);
    font-size: .85rem;
    font-weight: 500;
    color: var(--uxd-purple);
    background: var(--uxd-lavender);
    padding: .5rem .9rem;
    border-radius: .5rem;
    margin-bottom: 1.6rem;
}

.uxd-title {
    font-size: clamp(2.4rem, 4vw, 3.9rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    /*color: var(--uxd-ink);*/
    margin-bottom: 1.4rem;
}

.uxd-title-accent {
    color: #1d50d9;
}

.uxd-lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--uxd-text);
    max-width: 33rem;
    margin-bottom: 2.2rem;
}

.uxd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.75rem;
}

/* Buttons — Bootstrap .btn ke upar apne styles, specificity
   .uxd-hero ke through high rakhi hai taaki theme override na kare */
.uxd-hero .uxd-btn {
    font-weight: 600;
    font-size: 1rem;
    padding: .8rem 1.7rem;
    border-radius: .55rem;
    border: 2px solid transparent;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

    .uxd-hero .uxd-btn:focus {
        box-shadow: none;
    }

    .uxd-hero .uxd-btn:focus-visible {
        outline: 3px solid var(--uxd-purple);
        outline-offset: 2px;
        box-shadow: none;
    }

.uxd-hero .uxd-btn--solid {
    background: #1d50d9;
    color: #fff;
}

    .uxd-hero .uxd-btn--solid:hover,
    .uxd-hero .uxd-btn--ghost {
        background: transparent;
        color: var(--uxd-ink);
        border-color: var(--uxd-ink);
    }

        .uxd-hero .uxd-btn--ghost:hover,
        .uxd-hero .uxd-btn--ghost:active {
            background: var(--uxd-ink);
            color: #fff;
        }

/* Stats strip */
.uxd-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.2rem;
    margin: 0;
}

.uxd-stat {
    font-size: .95rem;
}

    .uxd-stat strong {
        font-weight: 800;
        color: var(--uxd-ink);
        margin-right: .35rem;
    }

.uxd-stat-label {
    font-family: var(--uxd-font-mono);
    font-size: .84rem;
}

.uxd-stat-label--rose {
    color: var(--uxd-rose-code);
}

.uxd-stat-label--indigo {
    color: var(--uxd-indigo-code);
}

/* ---------------- Right column : design-tool mockup ---------------- */

/* Grid-paper stage jiske upar browser mockup baitha hai */
.uxd-stage {
    position: relative;
    padding: 2.5rem 1.9rem 2.9rem;
    border: 1px solid var(--uxd-line);
    border-radius: .5rem;
    background-image: linear-gradient(var(--uxd-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--uxd-grid-line) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* Floating chips: "prototype: live" & "<usability tested/>" */
.uxd-chip {
    position: absolute;
    z-index: 3;
    font-family: var(--uxd-font-mono);
    font-size: .8rem;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--uxd-line);
    border-radius: .5rem;
    padding: .45rem .8rem;
    box-shadow: 0 8px 18px rgba(29,25,54,.08);
    white-space: nowrap;
    animation: uxd-float 4s ease-in-out infinite alternate;
}

.uxd-chip--live {
    top: .65rem;
    right: .35rem;
    color: #1d50d9;
}

.uxd-chip--tested {
    bottom: 1.05rem;
    left: 2.4rem;
    color: var(--uxd-ink);
    animation-delay: 1.2s;
}

/* halka float animation — pasand na aaye to ye keyframes hata dena */
@keyframes uxd-float {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-5px);
    }
}

/* Browser window */
.uxd-browser {
    background: #fff;
    border: 1px solid var(--uxd-line);
    border-radius: .9rem;
    box-shadow: 0 24px 48px rgba(29,25,54,.10);
    overflow: hidden;
}

.uxd-browser-bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--uxd-line);
}

.uxd-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--uxd-bar-grey);
    display: inline-block;
}

.uxd-browser-title {
    font-family: var(--uxd-font-mono);
    font-size: .8rem;
    color: #3e3963;
    margin-left: .5rem;
}

.uxd-browser-body {
    display: flex;
    gap: 1rem;
    padding: 1rem;
}

/* Layers panel */
.uxd-layers {
    flex: 0 0 auto;
    width: 118px;
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--uxd-line);
    border-radius: .65rem;
    padding: .8rem .65rem .35rem;
}

.uxd-layers-heading {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8b86a6;
    margin-bottom: .6rem;
    padding-left: .15rem;
}

.uxd-layer {
    font-size: .8rem;
    font-weight: 500;
    color: #2b2650;
    background: #fff;
    border: 1px solid var(--uxd-line);
    border-radius: .45rem;
    padding: .38rem .6rem;
    margin-bottom: .5rem;
}

    .uxd-layer.is-active {
        border-color: #1d50d9;
        color: #1d50d9;
    }

/* Canvas (artboard) */
.uxd-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 236px;
    background: #fbfaff;
    border: 2px dashed #ded9ee;
    border-radius: .8rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

/* Skeleton frames inside canvas */
.uxd-frame {
    background: #fff;
    border: 1px solid #edeaf7;
    border-radius: .6rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 6px rgba(29,25,54,.04);
}

.uxd-bar {
    display: block;
    height: 10px;
    width: 60%;
    border-radius: 99px;
}

    .uxd-bar + .uxd-bar {
        margin-top: .6rem;
    }

.uxd-bar--purple {
    background: var(--uxd-bar-purple);
}

.uxd-bar--grey {
    background: var(--uxd-bar-grey);
}

.uxd-bar--sm {
    width: 38%;
}

.uxd-bar--lg {
    width: 52%;
}

/* "You" cursor */
.uxd-cursor {
    position: absolute;
    right: 1rem;
    bottom: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--uxd-font-mono);
    font-size: .78rem;
    font-weight: 600;
    color: #1d50d9;
}

    .uxd-cursor svg {
        display: block;
    }

/* ---------------- Responsive ---------------- */

@media (max-width: 991.98px) {
    .uxd-hero {
        padding: 64px 0;
    }
}

@media (max-width: 575.98px) {
    .uxd-stage {
        padding: 1.7rem 1rem 2.4rem;
    }

    .uxd-chip--tested {
        left: 1rem;
    }

    .uxd-browser-body {
        flex-direction: column;
    }

    .uxd-layers {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding: .7rem .65rem;
    }

    .uxd-layers-heading {
        flex-basis: 100%;
        margin-bottom: .1rem;
    }

    .uxd-layer {
        margin-bottom: 0;
    }

    .uxd-canvas {
        min-height: 200px;
    }
}

/* Accessibility: motion kam karne waale users ke liye */
@media (prefers-reduced-motion: reduce) {
    .uxd-chip {
        animation: none;
    }

    .uxd-hero .uxd-btn {
        transition: none;
    }

    .uxd-hero .uxd-btn--solid:hover {
        transform: none;
    }
}

/*.section-why-us-ui-ux {
    margin-top: 5rem;
}*/

.main-approch-sec-uiux-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.why-choose-section-page-45 {
    padding-top: inherit !important;
}



/*E-Commerce-development-page-css-start*/


.ecm-hero {
    /* -- scoped design tokens -- */
    --ecm-cream: #f6f1e6;
    --ecm-ink: #262433;
    --ecm-navy: #39405e;
    --ecm-navy-bold: #232a4d;
    --ecm-amber: #bc7c1d;
    --ecm-amber-deep: #a1690f;
    --ecm-olive: #75674a;
    --ecm-green: #149a66;
    --ecm-line: #e6ddc6;
    --ecm-card-cream: #f7f2e5;
    --ecm-muted: #8f8569;
    --ecm-step-idle: #e4dbc4; /* stepper idle dot border */
    --ecm-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --ecm-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ecm-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    font-family: var(--ecm-font-body);
    color: var(--ecm-ink);
    padding: 92px 0;
    overflow: hidden;
    background: #fff;
}

/* ---------------- Left column : copy (same as pehle) ---------------- */

.ecm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--ecm-font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #5c5540;
    background: #e6ecff;
    border: 1px solid var(--ecm-line);
    border-radius: 999px;
    padding: .55rem 1.05rem;
    margin-bottom: 1.7rem;
}

.ecm-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1d50d9;
}

.ecm-title {
    font-size:  clamp(2.4rem, 4vw, 3.9rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--ecm-ink);
    margin-bottom: 1.5rem;
}

.ecm-title-accent {
    color: #1d50d9;
}

.ecm-lead {
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--ecm-navy);
    max-width: 34rem;
    margin-bottom: 1.6rem;
}

    .ecm-lead strong {
        color: var(--ecm-navy-bold);
        font-weight: 700;
    }

.ecm-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 2.4rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

    .ecm-checklist li {
        position: relative;
        padding-left: 1.7rem;
        font-size: .98rem;
        color: #585859;
    }

        .ecm-checklist li::before {
            content: "\2713";
            position: absolute;
            left: 0;
            top: 0;
            color: #1d50d9;
            font-weight: 700;
        }

.ecm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ecm-hero .ecm-btn {
      font-weight: 600;
    font-size: 14.5px;
        padding: 15px 24px;
    border-radius: .55rem;
    border: 1px solid transparent;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

    .ecm-hero .ecm-btn:focus {
        box-shadow: none;
    }

    .ecm-hero .ecm-btn:focus-visible {
        outline: 3px solid var(--ecm-ink);
        outline-offset: 2px;
        box-shadow: none;
    }

.ecm-hero .ecm-btn--solid {
    background: #1d50d9;
    color: #fff;
}

.ecm-hero .ecm-btn--ghost {
    background: #fffdf7;
    color: var(--ecm-ink);
    border-color: #ddd3ba;
}

    .ecm-hero .ecm-btn--ghost:hover,
    .ecm-hero .ecm-btn--ghost:active {
        background: #ffffff;
        color: var(--ecm-ink);
        border-color: #b9ac8b;
    }

/* ---------------- Right column : ORDER JOURNEY panel (naya design, no price) ---------------- */

.ecm-panel {
    position: relative; /* "+1 new order" chip ke liye */
    background: #ffffff;
    border: 1px solid #efe8d8;
    border-radius: 1.15rem;
    box-shadow: 0 30px 60px rgba(58,48,22,.10);
    padding: 1.15rem 1.2rem 1.25rem;
}

/* Window bar with LIVE badge */
.ecm-win {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid #f0e9d8;
    margin-bottom: 1.1rem;
}

.ecm-win-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ddd3ba;
}

.ecm-win-title {
    font-family: var(--ecm-font-mono);
    font-size: .78rem;
    color: #5c5540;
    margin-left: .4rem;
}

.ecm-live {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    font-family: var(--ecm-font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--ecm-green);
}

.ecm-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ecm-green);
    animation: ecm-pulse 2s ease-out infinite;
}

/* Order journey stepper (looping animation) */
.ecm-journey {
    margin-bottom: 1.35rem;
}

.ecm-journey-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-family: var(--ecm-font-mono);
    font-size: .63rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ecm-muted);
    margin-bottom: 1rem;
}

.ecm-journey-tag {
    color: var(--ecm-amber-deep);
    background: rgba(188,124,29,.1);
    border-radius: 999px;
    padding: .25rem .6rem;
    letter-spacing: .08em;
}

.ecm-steps {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem;
}

    .ecm-steps::before {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        top: 6px;
        height: 3px;
        border-radius: 999px;
        background: #efe7d2;
    }

.ecm-steps-fill {
    position: absolute;
    left: 8px;
    top: 6px;
    height: 3px;
    width: 0;
    border-radius: 999px;
    background: var(--ecm-green);
    animation: ecm-journey 7s ease-in-out infinite;
}

.ecm-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.ecm-step-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--ecm-step-idle);
}

.ecm-step:nth-child(2) .ecm-step-dot {
    animation: ecm-step1 7s ease-in-out infinite;
}

.ecm-step:nth-child(3) .ecm-step-dot {
    animation: ecm-step2 7s ease-in-out infinite;
}

.ecm-step:nth-child(4) .ecm-step-dot {
    animation: ecm-step3 7s ease-in-out infinite;
}

.ecm-step:nth-child(5) .ecm-step-dot {
    animation: ecm-step4 7s ease-in-out infinite;
}

.ecm-step-name {
    font-family: var(--ecm-font-mono);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ecm-muted);
}

/* Store activity feed (no prices) */
.ecm-feed-head {
    font-family: var(--ecm-font-mono);
    font-size: .63rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ecm-muted);
    margin-bottom: .55rem;
}

.ecm-feed-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.05rem;
}

.ecm-activity {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: #fff;
    border: 1px solid #ece4d1;
    border-radius: .65rem;
    padding: .5rem .65rem;
    box-shadow: 0 2px 6px rgba(58,48,22,.04);
    animation: ecm-slide .5s ease backwards;
}

.ecm-feed-list .ecm-activity:nth-child(1) {
    animation-delay: .15s;
}

.ecm-feed-list .ecm-activity:nth-child(2) {
    animation-delay: .3s;
}

.ecm-feed-list .ecm-activity:nth-child(3) {
    animation-delay: .45s;
}

.ecm-activity-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ecm-activity-icon svg {
        width: 14px;
        height: 14px;
    }

.ecm-activity-icon--amber {
    background: rgba(233,165,62,.18);
    color: #b57614;
}

.ecm-activity-icon--mint {
    background: rgba(62,199,142,.18);
    color: var(--ecm-green);
}

.ecm-activity-icon--purple {
    background: rgba(129,119,217,.18);
    color: #6a60c9;
}

.ecm-activity-text {
    font-size: .85rem;
    font-weight: 600;
    color: #3a3550;
}

.ecm-activity-time {
    margin-left: auto;
    font-family: var(--ecm-font-mono);
    font-size: .66rem;
    color: var(--ecm-muted);
    white-space: nowrap;
}

/* Mini stats — sirf counts, koi amount nahi */
.ecm-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    margin-bottom: 1rem;
}

.ecm-stat {
    background: #1d50d91c;
    border: 1px solid var(--ecm-line);
    border-radius: .7rem;
    padding: .65rem .8rem;
}

.ecm-stat-label {
    display: block;
    font-family: var(--ecm-font-mono);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ecm-muted);
    margin-bottom: .3rem;
}

.ecm-stat-value {
    font-family: var(--ecm-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ecm-ink);
}

.ecm-stat-value--green {
    color: var(--ecm-green);
}

/* Platform chips footer */
.ecm-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.ecm-platform {
    font-family: var(--ecm-font-mono);
    font-size: .66rem;
    color: #6a6148;
    background: #1d50d930;
    border: 1px solid #8ba9f8;
    border-radius: 999px;
    padding: .3rem .65rem;
}

/* Floating "+1 new order" chip (loop pop) */
.ecm-pop {
    position: absolute;
    top: -14px;
    right: 22px;
    z-index: 3;
    font-family: var(--ecm-font-mono);
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    background: var(--ecm-green);
    border-radius: 999px;
    padding: .4rem .8rem;
    box-shadow: 0 10px 20px rgba(20,154,102,.35);
    opacity: 0;
    animation: ecm-pop 7s ease-in-out 2.4s infinite;
}

/* ---------------- Keyframes ---------------- */

@keyframes ecm-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(20,154,102,.45);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(20,154,102,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(20,154,102,0);
    }
}

/* Track fill: 0 -> full (70% tak), hold, phir fade + reset */
@keyframes ecm-journey {
    0% {
        width: 0;
        opacity: 1;
    }

    70%, 88% {
        width: calc(100% - 16px);
        opacity: 1;
    }

    93% {
        width: calc(100% - 16px);
        opacity: 0;
    }

    94%, 99% {
        width: 0;
        opacity: 0;
    }

    100% {
        width: 0;
        opacity: 1;
    }
}

/* Steps ek-ek karke light-up hote hain, end me sab reset */
@keyframes ecm-step1 {
    0%, 2% {
        background: #fff;
        border-color: var(--ecm-step-idle);
        transform: scale(1);
    }

    4% {
        transform: scale(1.35);
    }

    6%, 88% {
        background: var(--ecm-green);
        border-color: var(--ecm-green);
        transform: scale(1);
    }

    93%, 100% {
        background: #fff;
        border-color: var(--ecm-step-idle);
        transform: scale(1);
    }
}

@keyframes ecm-step2 {
    0%, 22% {
        background: #fff;
        border-color: var(--ecm-step-idle);
        transform: scale(1);
    }

    24% {
        transform: scale(1.35);
    }

    26%, 88% {
        background: var(--ecm-green);
        border-color: var(--ecm-green);
        transform: scale(1);
    }

    93%, 100% {
        background: #fff;
        border-color: var(--ecm-step-idle);
        transform: scale(1);
    }
}

@keyframes ecm-step3 {
    0%, 44% {
        background: #fff;
        border-color: var(--ecm-step-idle);
        transform: scale(1);
    }

    46% {
        transform: scale(1.35);
    }

    48%, 88% {
        background: var(--ecm-green);
        border-color: var(--ecm-green);
        transform: scale(1);
    }

    93%, 100% {
        background: #fff;
        border-color: var(--ecm-step-idle);
        transform: scale(1);
    }
}

@keyframes ecm-step4 {
    0%, 64% {
        background: #fff;
        border-color: var(--ecm-step-idle);
        transform: scale(1);
    }

    66% {
        transform: scale(1.35);
    }

    68%, 88% {
        background: var(--ecm-green);
        border-color: var(--ecm-green);
        transform: scale(1);
    }

    93%, 100% {
        background: #fff;
        border-color: var(--ecm-step-idle);
        transform: scale(1);
    }
}

@keyframes ecm-slide {
    from {
        opacity: 0;
        transform: translateX(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ecm-pop {
    0%, 100% {
        opacity: 0;
        transform: translateY(6px) scale(.92);
    }

    6%, 26% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    34% {
        opacity: 0;
        transform: translateY(-8px) scale(.95);
    }
}

/* ---------------- Responsive ---------------- */

@media (max-width: 991.98px) {
    .ecm-hero {
        padding: 64px 0;
    }
}

@media (max-width: 575.98px) {
    .ecm-panel {
        padding: .95rem 1rem 1.1rem;
    }

    .ecm-mini-stats {
        grid-template-columns: 1fr;
    }

    .ecm-step-name {
        font-size: .52rem;
    }

    .ecm-activity-time {
        font-size: .6rem;
    }

    .ecm-pop {
        right: 12px;
    }
}

/* Accessibility: motion kam karne waale users ke liye static "completed" state */
@media (prefers-reduced-motion: reduce) {
    .ecm-hero .ecm-btn {
        transition: none;
    }

    .ecm-hero .ecm-btn--solid:hover {
        transform: none;
    }

    .ecm-live-dot,
    .ecm-activity {
        animation: none;
    }

    .ecm-steps-fill {
        animation: none;
        width: calc(100% - 16px);
    }

    .ecm-step-dot {
        animation: none !important;
        background: var(--ecm-green);
        border-color: var(--ecm-green);
    }

    .ecm-pop {
        animation: none;
        display: none;
    }
}



.nx-intg-section {
    background: #f7f8fc;
}

.nx-intg-subtitle {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ff7b00;
    text-transform: uppercase;
    position: relative;
    padding-left: 55px;
}

    .nx-intg-subtitle:before {
        content: "";
        width: 40px;
        height: 2px;
        background: #ff7b00;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

.nx-intg-title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    color: #101828;
}

.nx-intg-desc {
    color: #667085;
    font-size: 17px;
    max-width: 650px;
}

.nx-intg-card {
    background: #fff;
    border-radius: 22px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid #edf1f7;
    transition: .35s;
}

    .nx-intg-card:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(180deg,#ff7b00,#ffbb00);
        transform: scaleY(0);
        transition: .35s;
        transform-origin: top;
    }

    .nx-intg-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 60px rgba(0,0,0,.12);
    }

        .nx-intg-card:hover:before {
            transform: scaleY(1);
        }

.nx-intg-tag {
    display: inline-block;
    background: #eef4ff;
    color: #2f5bea;
    padding: 8px 16px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    margin-bottom: 22px;
}

.nx-intg-icon {
    width: 45px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2f5bea, #6c8cff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 25px;
    margin-bottom: 25px;
    transition: .35s;
}

.nx-intg-card:hover .nx-intg-icon {
    transform: rotate(-8deg) scale(1.08);
}

.nx-intg-card h4 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
}

.nx-intg-card p {
    color: #667085;
    line-height: 1.8;
    margin: 0;
}

@media (max-width:991px) {

    .nx-intg-title {
        font-size: 34px;
    }
}

@media(max-width:576px) {

    .nx-intg-card {
        padding: 25px;
    }

    .nx-intg-title {
        font-size: 28px;
    }
}

/*.e-commerce-harm-css {
    margin-top: 8rem;
}*/

.cus-mvp-single-service-box .single-services-box p {
    height: inherit !important;
}


.panel-inner-e-commerce {
    display: inherit !important;
}

    .panel-inner-e-commerce .block-compare {
        display: flex;
        gap: 50px
    }

.hww-card-body ul li {
    font-size: 15px;
    line-height: 1.6rem;
}

.section-block-grey-5845 .single-services-box p {
    height: inherit !important;
}


/*.header-whyUs-584 {
    max-width: inherit !important;
    margin-top: 6rem;
}*/

.timeline-wrap-8741 .cards {
    grid-template-columns: repeat(3, 1fr) !important;
}

    .timeline-wrap-8741 .cards .step-num {
        font-size: 1.6rem !important;
    }

.cus-business-solutions-874 h1 {
    max-width: inherit !important;
}

.cus-business-solutions-874 p {
    max-width: inherit !important;
}

.fa-approch-container-541 {
    display: inherit !important
}

@media (min-width: 300px) and (max-width: 700px) {
    .panel-inner-e-commerce .block-compare {
        display: inherit
    }

    .timeline-wrap-8741 .cards {
        grid-template-columns: inherit !important
    }

    .e-commerce-harm-css {
        margin-top: 5px;
    }
}


/*E-commerce-development-page-css-end*/






/*Software-testing-page-css*/


:root {
    --fcqa-blue-900: #063E73;
    --fcqa-blue-700: #0A5AA5; /* logo deep blue  */
    --fcqa-blue-500: #17A9E5; /* logo bright blue */
    --fcqa-blue-100: #DCEBF8;
    --fcqa-ink: #0B1B2B;
    --fcqa-muted: #5B6B7A;
    --fcqa-bg: #EEF4FA;
    --fcqa-card: #FFFFFF;
    --fcqa-line: #D8E4F0;
    --fcqa-pass: #1F9D6B;
    --fcqa-fail: #D64541;
    --fcqa-run: #C98A1E;
    --fcqa-shadow: 0 24px 60px -28px rgba(6,62,115,.45);
}

.fcqa-hero {
    /*    background: radial-gradient(120% 90% at 85% -10%, rgba(23,169,229,.10), transparent 55%), var(--fcqa-bg);*/
    color: var(--fcqa-ink);
    font-family: 'Inter',system-ui,sans-serif;
    padding-block: clamp(3rem,7vw,6rem);
    overflow: hidden;
}

/* --- badge --- */
.fcqa-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--fcqa-card);
    border: 1px solid var(--fcqa-line);
    color: var(--fcqa-blue-700);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .45rem .9rem;
    border-radius: 999px;
}

.fcqa-badge-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--fcqa-blue-500);
    box-shadow: 0 0 0 4px rgba(23,169,229,.18);
}

/* --- headline --- */
.fcqa-title {
  
    font-size: clamp(2.4rem, 4vw, 3.9rem);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 22px;
    max-width: 590px;
}

.fcqa-title-accent {
    color: var(--fcqa-blue-500);
    position: relative;
}

.fcqa-lead {
    color: var(--fcqa-muted);
    font-size: 1.06rem;
    line-height: 1.7;
    max-width: 34rem;
    margin-top: 1.5rem;
}

    .fcqa-lead strong {
        color: var(--fcqa-ink);
        font-weight: 600;
    }

/* --- buttons (override look, not Bootstrap classes) --- */
.fcqa-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .98rem;
    padding: .85rem 1.6rem;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    .fcqa-btn:focus-visible {
        outline: 3px solid rgba(23,169,229,.55);
        outline-offset: 2px;
    }

.fcqa-btn-primary {
    background: var(--fcqa-blue-700);
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(10,90,165,.9);
}

    .fcqa-btn-primary:hover {
        background: var(--fcqa-blue-900);
        transform: translateY(-2px);
    }

.fcqa-btn-ghost {
    background: var(--fcqa-card);
    color: var(--fcqa-ink);
    border-color: var(--fcqa-line);
}

    .fcqa-btn-ghost:hover {
        border-color: var(--fcqa-blue-500);
        color: var(--fcqa-blue-700);
        transform: translateY(-2px);
    }

/* --- stats --- */
.fcqa-stat-num {
    font-family: 'Sora',sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--fcqa-ink);
    line-height: 1;
}

.fcqa-stat-label {
    font-family: Figtree, sans-serif;
    font-size: .72rem;
    color: var(--fcqa-muted);
    letter-spacing: .02em;
    margin-top: .4rem;
}

/* ==================== dashboard mockup ==================== */
.fcqa-panel {
    background: var(--fcqa-card);
    border: 1px solid var(--fcqa-line);
    border-radius: 20px;
    box-shadow: var(--fcqa-shadow);
    overflow: hidden;
}

.fcqa-spec span {
    font-family: Figtree, sans-serif
}

.fcqa-panel-bar {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.1rem;
    background: linear-gradient(180deg,#F3F8FD,#E9F1FA);
    border-bottom: 1px solid var(--fcqa-line);
}

.fcqa-dots {
    display: flex;
    gap: .4rem;
}

    .fcqa-dots span {
        width: .7rem;
        height: .7rem;
        border-radius: 50%;
        display: block;
    }

.fcqa-dot-r {
    background: #ec6a5e;
}

.fcqa-dot-y {
    background: #f4bf4f;
}

.fcqa-dot-g {
    background: #61c554;
}

.fcqa-url {
    flex: 1;
    background: #fff;
    border: 1px solid var(--fcqa-line);
    border-radius: 8px;
    padding: .35rem .7rem;
    font-family: 'JetBrains Mono',monospace;
    font-size: .78rem;
    color: var(--fcqa-muted);
    font-family: Figtree, sans-serif;
}

.fcqa-panel-body {
    padding: 1.15rem;
}

.fcqa-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

.fcqa-metric {
    border: 1px solid var(--fcqa-line);
    border-radius: 12px;
    padding: .7rem .75rem;
    background: #fff;
}

.fcqa-metric-k {
    font-family: 'JetBrains Mono',monospace;
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fcqa-muted);
}

.fcqa-metric-v {
    font-family: 'Sora',sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    margin-top: .25rem;
    color: var(--fcqa-ink);
}

    .fcqa-metric-v.is-pass {
        color: var(--fcqa-pass);
    }

    .fcqa-metric-v.is-fail {
        color: var(--fcqa-fail);
    }

    .fcqa-metric-v.is-run {
        color: var(--fcqa-run);
    }

.fcqa-cov {
    border: 1px solid var(--fcqa-line);
    border-radius: 12px;
    padding: .85rem;
    margin-bottom: 1rem;
    background: #fff;
}

.fcqa-cov-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono',monospace;
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fcqa-muted);
    margin-bottom: .55rem;
}

.fcqa-cov-track {
    height: .55rem;
    border-radius: 999px;
    background: var(--fcqa-blue-100);
    overflow: hidden;
}

.fcqa-cov-fill {
    height: 100%;
    width: 87%;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--fcqa-blue-700),var(--fcqa-blue-500));
}

.fcqa-spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .25rem;
    border-bottom: 1px solid var(--fcqa-line);
    font-family: 'JetBrains Mono',monospace;
    font-size: .82rem;
    color: var(--fcqa-ink);
}

    .fcqa-spec:last-child {
        border-bottom: 0;
    }

.fcqa-tag {
    font-family: 'JetBrains Mono',monospace;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .06em;
    padding: .2rem .55rem;
    border-radius: 999px;
}

.fcqa-tag-pass {
    background: rgba(31,157,107,.13);
    color: var(--fcqa-pass);
}

.fcqa-tag-fail {
    background: rgba(214,69,65,.13);
    color: var(--fcqa-fail);
}

.fcqa-tag-run {
    background: rgba(201,138,30,.15);
    color: var(--fcqa-run);
}

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

    .fcqa-panel {
        margin-top: 2.5rem;
    }
}

@media (prefers-reduced-motion:reduce) {
    .fcqa-btn {
        transition: none;
    }
}

.cus-driven-li li {
    font-size: 15px;
    line-height: 2rem;
}

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

.panel-8524 .panel-inner {
    align-items: center;
}





/*SEO_Service-page-css*/


.seo-showcase-wrap {
    max-width: 850px;
    margin: auto;
    padding: 35px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0,0,0,.08);
}

.seo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.seo-search-box {
    background: #f5f7fb;
    padding: 14px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #444;
}

    .seo-search-box i {
        color: #4f46e5;
    }

.seo-score {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg,#4f46e5,#7c3aed);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 15px 30px rgba(79,70,229,.3);
}

    .seo-score span {
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
    }

    .seo-score small {
        font-size: 11px;
        opacity: .9;
    }

.seo-results-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.seo-card {
    background: #fafafa;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: .35s;
    border: 1px solid #ececec;
}

    .seo-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(0,0,0,.08);
    }

.seo-card-active {
    background: linear-gradient(135deg,#eef3ff,#ffffff);
    border: 2px solid #4f46e5;
}

.seo-icon {
    width: 65px;
    height: 65px;
    border-radius: 16px;
    background: #4f46e5;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    flex-shrink: 0;
}

    .seo-icon.gray {
        background: #e9edf5;
        color: #777;
    }

.seo-content {
    flex: 1;
}

    .seo-content h3 {
        margin-bottom: 8px;
        font-size: 20px;
        font-weight: 700;
    }

    .seo-content p {
        color: #666;
        margin-bottom: 12px;
    }

.seo-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .seo-tags span {
        padding: 6px 12px;
        border-radius: 30px;
        background: #eef1ff;
        color: #4f46e5;
        font-size: 13px;
        font-weight: 600;
    }

.seo-rank {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: #16a34a;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

    .seo-rank.small {
        width: 55px;
        height: 55px;
        background: #d1d5db;
        color: #555;
        font-size: 18px;
    }

@media(max-width:768px) {

    .seo-card {
        flex-direction: column;
        text-align: center;
    }

    .seo-header {
        justify-content: center;
    }
}



.fcseo-alert-box {
    background: #ffffff;
    border: 2px solid #d8e7ff;
    border-radius: 20px;
    padding: 12px 24px;
    box-shadow: 0 15px 40px rgba(17,92,255,.08);
    margin-bottom: 27px;
}

.fcseo-alert-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px dashed #d9e6ff;
    transition: .35s;
}

    .fcseo-alert-item:hover {
        transform: translateX(8px);
    }

.fcseo-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#0057ff,#00b4ff);
    color: #fff;
    font-size: 15px;
    /* box-shadow: 0 8px 20px rgba(0,87,255,.25); */
}

.fcseo-content h5 {
    margin: 0;
    font-size: 14px;
    font-weight: normal;
    color: #202020;
    line-height: 1.5;
}

.fcseo-alert-item:hover .fcseo-icon 
{
    transform: rotate(-8deg) scale(1.08);
}

@media(max-width:767px) {

    .fcseo-alert-box 
    
    {
        padding: 15px;
    }

    .fcseo-alert-item {
        gap: 14px;
        align-items: flex-start;
    }

    .fcseo-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 18px;
    }

    .fcseo-content h5 {
        font-size: 17px;
    }
}



.grid-work-process-1235 {
    grid-template-columns: repeat(7, 0.7fr);
}

.support-text-457
{
    font-size: 40px!important
}


/*local-seo-page-css*/
/*local_seo-page ki css on page likhi hui hai*/
/*google-ads-management ki css on page likhi hui hai*/
/*content-writing ki css on page likhi hui hai*/
/*Meta-Ads-Management-content-writing ki css on page likhi hui hai*/
/*Abhi kahi koi images change nahi ki hai kisi bhi page me*/
/*ab industries ke pages ki css on page na likhkar mynewpage.css me likh rhe hai*/




/*Fintech&Banking_page_css-start*/


.bcflow-section {
    background: #f5f7fb;
}

.bcflow-wrapper {
    background: #005faf;
    border-radius: 18px;
    padding: 45px 35px;
    position: relative;
    overflow: hidden;
}

    .bcflow-wrapper::before {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: 165px;
        height: 1px;
        background: #ffff;
    }

.bcflow-heading {
    margin-bottom: 55px;
}

    .bcflow-heading span {
        color: #ffff;
        font-size: 13px;
        letter-spacing: 4px;
        text-transform: uppercase;
    }

.bcflow-card {
    position: relative;
    z-index: 2;
}

.bcflow-icon {
    width: 72px;
    height: 72px;
    margin: auto;
    border-radius: 50%;
    background: #fff;
    color: #2d6cff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    border: 6px solid #183055;
    margin-bottom: 22px;
    transition: .35s;
}

.bcflow-card:hover .bcflow-icon {
    transform: translateY(-8px);
    background: #2d6cff;
    color: #fff;
}

.bcflow-card .h5 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.bcflow-card p {
    color: #ffffff;
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media(max-width:991px) {

    .bcflow-wrapper::before {
        display: none;
    }

    .bcflow-card {
        padding-bottom: 20px;
    }

    .bcflow-icon {
        width: 65px;
        height: 65px;
        font-size: 24px;
    }
}


.bcinfo-section {
    background: #f5f8fc;
}

.bcinfo-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(18,38,63,.08);
    border: 1px solid #e7eef7;
}

.bcinfo-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 50px;
    background: #eef5ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 22px;
}

.bcinfo-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}

.bcinfo-title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    color: #101828;
    margin-bottom: 18px;
}

    .bcinfo-title span {
        color: #2563eb;
    }

.bcinfo-lead {
    font-size: 22px;
    font-weight: 600;
    color: #1d4ed8;
    margin-bottom: 20px;
}

.bcinfo-text {
    color: #667085;
    font-size: 17px;
    line-height: 1.9;
    margin: 0;
}

.bcinfo-featurebox {
    background: #f8fbff;
    border: 1px solid #e5edf8;
    border-radius: 20px;
    padding: 30px;
}

.bcinfo-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid #edf2f7;
}

    .bcinfo-feature:last-child {
        border-bottom: none;
    }

.bcinfo-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.bcinfo-feature span {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

@media(max-width:991px) {

    .bcinfo-card {
        padding: 35px;
    }

    .bcinfo-title {
        font-size: 34px;
    }

    .bcinfo-lead {
        font-size: 19px;
    }
}




.bcstack-section {
    padding: 80px 0;
    background: #f6f9fc;
}

.bcstack-box {
    background: #fff;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0,0,0,.08);
}

.bcstack-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: #edf5ff;
    border-radius: 50px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.bcstack-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: bcstackPulse 1.5s infinite;
}

.bcstack-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
}

.bcstack-subtitle {
    font-size: 20px;
    color: #2563eb;
    margin-bottom: 35px;
}

.bcstack-list {
    display: grid;
    gap: 18px;
}

.bcstack-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px;
    border-radius: 18px;
    background: #fbfcff;
    border: 1px solid #e8eef8;
    transition: .35s;
}

    .bcstack-item:hover {
        transform: translateX(10px);
        box-shadow: 0 15px 35px rgba(37,99,235,.12);
    }

.bcstack-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg,#2563eb,#4f8cff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.bcstack-item .h5 {
    margin-bottom: 8px;
    font-weight: 700;
}

.bcstack-item p {
    margin: 0;
    color: #6b7280;
    line-height: 1.7;
}

@keyframes bcstackPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.5);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(34,197,94,0);
    }
}

@media(max-width:768px) {

    .bcstack-box {
        padding: 30px;
    }

    .bcstack-title {
        font-size: 30px;
    }

    .bcstack-subtitle {
        font-size: 17px;
    }

    .bcstack-item {
        flex-direction: column;
    }
}

#cus-opreator-741 h3 {
    font-size: 1.2rem;
}








/*MLM-network-marketing-page-css*/



.trust-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.trust-chip {
    background: #f5f7fa;
    border: 1px solid #e4e7ee;
    border-radius: 100px;
    padding: 8px 16px;
    font-size: 13px;
    color: #4B5768;
    font-weight: 500;
}


/* box-sizing sirf component ke andar (global nahi) */
.gtree__card, .gtree__card * {
    box-sizing: border-box;
}

.gtree__card {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 16px;
    background: radial-gradient(120% 80% at 50% 0%, #16243f 0%, #0a1120 45%, #060b16 100%);
    /*box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(45,212,212,.06);*/
    padding: 8px;
    overflow: hidden;
    font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
}

.gtree__svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- connecting lines ---- */
.gtree__link {
    fill: none;
    stroke: #2dd4d4;
    stroke-width: 1.6;
    opacity: 0;
    animation: gtree-revealLine .6s ease forwards;
}

.gtree__link--dashed {
    stroke-dasharray: 5 6;
    animation: gtree-revealLine .6s ease forwards, gtree-dashFlow 1.1s linear infinite;
}

.gtree__link--solid {
    stroke: #2dd4d4;
    opacity: 0;
}

/* stagger reveal by depth */
.gtree--d1 {
    animation-delay: .15s, .8s;
}

.gtree--d2 {
    animation-delay: .55s, 1.1s;
}

.gtree--d3 {
    animation-delay: .95s;
}

@keyframes gtree-dashFlow {
    to {
        stroke-dashoffset: -22;
    }
}

@keyframes gtree-revealLine {
    from {
        opacity: 0;
    }

    to {
        opacity: .85;
    }
}

/* ---- nodes ---- */
.gtree__node {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: gtree-popIn .5s cubic-bezier(.2,.8,.3,1.4) forwards;
}

    .gtree__node circle {
        fill: #0a1526;
        stroke: #2dd4d4;
        stroke-width: 2;
        filter: drop-shadow(0 0 5px rgba(45,212,212,.55));
    }

.gtree__node--small circle {
    stroke-width: 1.8;
}

.gtree__node text {
    fill: #a9e9e9;
    font-size: 10px;
    letter-spacing: .5px;
    text-anchor: middle;
    dominant-baseline: middle;
}

.gtree__label {
    fill: #7fd6d6;
    font-size: 10px;
    letter-spacing: 1px;
    text-anchor: middle;
}

/* ambient breathing on network nodes */
.gtree__pulse circle {
    animation: gtree-breathe 3.2s ease-in-out infinite;
}

@keyframes gtree-breathe {
    0%,100% {
        filter: drop-shadow(0 0 4px rgba(45,212,212,.35));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(45,212,212,.85));
    }
}

/* ---- root "YOU" node ---- */
.gtree__node--root circle {
    fill: url(#gtreeGold);
    stroke: #e7c979;
    stroke-width: 2;
    animation: gtree-glow 2.4s ease-in-out infinite;
}

.gtree__node--root text {
    fill: #3a2a06;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}

@keyframes gtree-glow {
    0%,100% {
        filter: drop-shadow(0 0 6px rgba(217,164,65,.55));
    }

    50% {
        filter: drop-shadow(0 0 16px rgba(217,164,65,.95));
    }
}

/* node entrance stagger */
.gtree--n0 {
    animation-delay: .05s;
}

.gtree--n1 {
    animation-delay: .45s;
}

.gtree--n2 {
    animation-delay: .85s;
}

.gtree--n3 {
    animation-delay: 1.2s;
}

@keyframes gtree-popIn {
    0% {
        opacity: 0;
        transform: scale(.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.gtree__caption {
    fill: #5f8a7a;
    font-size: 11px;
    letter-spacing: .6px;
    text-anchor: middle;
    opacity: 0;
    animation: gtree-fadeIn .8s ease 1.5s forwards;
}

@keyframes gtree-fadeIn {
    to {
        opacity: .85;
    }
}

/* accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gtree__link, .gtree__node, .gtree__caption {
        animation: none !important;
        opacity: 1;
    }

    .gtree__link {
        opacity: .85;
    }

    .gtree__node {
        transform: none;
    }

    .gtree__pulse circle {
        animation: none !important;
    }
}

/* ---- DEMO-ONLY centering (project me daalte waqt ye block hata dena) ---- */
.gtree__demo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #05090f;
    padding: 24px;
}

.credibility-metrics-4123 {
    display: inherit !important;
}

.trust-panel-789456 {
    display: inherit !important;
}




.cplan {
    --cplan-bg: #ffffff;
    --cplan-card: #f7f9fc;
    --cplan-border: #e6ebf2;
    --cplan-accent: #0d9488; /* teal eyebrow / label */
    --cplan-icon: #14b8a6; /* icon strokes/dots     */
    --cplan-title: #0f1729;
    --cplan-body: #5b6472;
    --cplan-muted: #94a3b8;
    background: var(--cplan-bg);
    color: var(--cplan-title);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 72px 24px 96px;
}

    .cplan, .cplan * {
        box-sizing: border-box;
    }

.cplan__inner {
    max-width: 1080px;
    margin: 0 auto;
}

/* ---- section header ---- */
.cplan__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--cplan-accent);
    margin-bottom: 20px;
}

    .cplan__eyebrow::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--cplan-accent);
    }

.cplan__heading {
    font-size: clamp(28px, 4vw, 2.9rem);
    line-height: 1.15;
    font-weight:700;
    letter-spacing: -0.5px;
    /* max-width: 620px; */
    margin: 10px 0 22px;  
    width:60ch; 
}

.cplan__intro {
    font-size: 15px;
    line-height: 1.7;
    color: var(--cplan-body);
    margin: 0 0 52px;
}

/* ---- grid of cards ---- */
.cplan__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cplan__card {
    background: #ffffff;
    border: 1px solid var(--cplan-border);
    border-radius: 16px;
    padding: 26px 24px 28px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    /* subtle entrance */
    opacity: 0;
    animation: cplan-rise .55s ease forwards;
}

    .cplan__card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(15,23,41,.08);
        border-color: #cfe9e5;
    }

    /* staggered reveal */
    .cplan__card:nth-child(1) {
        animation-delay: .03s
    }

    .cplan__card:nth-child(2) {
        animation-delay: .08s
    }

    .cplan__card:nth-child(3) {
        animation-delay: .13s
    }

    .cplan__card:nth-child(4) {
        animation-delay: .18s
    }

    .cplan__card:nth-child(5) {
        animation-delay: .23s
    }

    .cplan__card:nth-child(6) {
        animation-delay: .28s
    }

    .cplan__card:nth-child(7) {
        animation-delay: .33s
    }

    .cplan__card:nth-child(8) {
        animation-delay: .38s
    }

    .cplan__card:nth-child(9) {
        animation-delay: .43s
    }

    .cplan__card:nth-child(10) {
        animation-delay: .48s
    }

    .cplan__card:nth-child(11) {
        animation-delay: .53s
    }

@keyframes cplan-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

/* ---- icon block ---- */
.cplan__icon {
    width: 48px;
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

    .cplan__icon svg {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .cplan__icon line,
    .cplan__icon path,
    .cplan__icon polyline {
        fill: none;
        stroke: var(--cplan-icon);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cplan__icon circle {
        fill: var(--cplan-icon);
    }

    .cplan__icon rect {
        fill: var(--cplan-icon);
    }

.cplan__label {
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cplan-accent);
    margin: 0 0 8px;
}

.cplan__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--cplan-title);
    margin: 0 0 10px;
}

.cplan__desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--cplan-body);
    margin: 0;
}

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

@media (max-width: 560px) {
    .cplan {
        padding: 48px 18px 64px;
    }

    .cplan__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cplan__card {
        animation: none !important;
        opacity: 1;
    }

        .cplan__card:hover {
            transform: none;
        }
}


.bcnet {
    --bcnet-bg: #ffffff;
    --bcnet-line: #8fd4cb; /* dotted connectors */
    --bcnet-accent: #0d9488;
    --bcnet-title: #0f1729;
    --bcnet-muted: #64748b;
    --bcnet-on: #16a34a; /* live/online green */

    background: var(--bcnet-bg);
    color: var(--bcnet-title);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 48px 20px 60px;
}

    .bcnet, .bcnet * {
        box-sizing: border-box;
    }

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

.bcnet__eyebrow {
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--bcnet-accent);
    margin: 0 0 6px;
}

.bcnet__sub {
    color: var(--bcnet-muted);
    font-size: 13px;
    margin: 0 0 28px;
    text-align: center;
}

/* horizontal scroll for small screens */
.bcnet__scroll {
    overflow-x: auto;
    padding: 8px 4px 4px;
}

/* ---- the tree (classic nested ul technique) ---- */
.bcnet__tree ul {
    display: flex;
    justify-content: center;
    padding-top: 24px;
    position: relative;
    margin: 0;
    list-style: none;
}

.bcnet__tree li {
    list-style: none;
    text-align: center;
    position: relative;
    padding: 24px 14px 0;
}
    /* upward connectors from each node */
    .bcnet__tree li::before,
    .bcnet__tree li::after {
        content: "";
        position: absolute;
        top: 0;
        right: 50%;
        border-top: 2px dotted var(--bcnet-line);
        width: 50%;
        height: 24px;
    }

    .bcnet__tree li::after {
        right: auto;
        left: 50%;
        border-left: 2px dotted var(--bcnet-line);
    }
    /* clean corners on first/last child */
    .bcnet__tree li:first-child::before,
    .bcnet__tree li:last-child::after {
        border: 0 none;
    }

    .bcnet__tree li:last-child::before {
        border-right: 2px dotted var(--bcnet-line);
        border-radius: 0 6px 0 0;
    }

    .bcnet__tree li:first-child::after {
        border-radius: 6px 0 0 0;
    }
    /* single child = just a straight drop */
    .bcnet__tree li:only-child {
        padding-top: 24px;
    }

        .bcnet__tree li:only-child::before,
        .bcnet__tree li:only-child::after {
            display: none;
        }
/* vertical drop from a parent to its children row */
.bcnet__tree ul ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px dotted var(--bcnet-line);
    width: 0;
    height: 24px;
}
/* root row has no incoming line */
.bcnet__tree > ul {
    padding-top: 0;
}

    .bcnet__tree > ul > li {
        padding-top: 0;
    }

        .bcnet__tree > ul > li::before,
        .bcnet__tree > ul > li::after {
            display: none;
        }

/* ---- nodes ---- */
.bcnet__node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    border-radius: 14px;
    padding: 12px 18px;
    min-width: 118px;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    box-shadow: 0 6px 16px rgba(15,23,41,.05);
}

.bcnet__ico {
    font-size: 20px;
    line-height: 1;
}

.bcnet__ttl {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--bcnet-title);
}

/* admin (root) */
.bcnet__node--admin {
    background: #ecfdf8;
    border-color: #a7e6dc;
    padding: 14px 22px;
}

    .bcnet__node--admin .bcnet__ttl {
        font-size: 14px;
    }

.bcnet__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bcnet-on);
    letter-spacing: .3px;
}

/* region */
.bcnet__node--region {
    padding: 14px 22px;
    min-width: 130px;
}

.bcnet__rtop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcnet__count {
    font-size: 20px;
    font-weight: 800;
    color: var(--bcnet-title);
}

.bcnet__cap {
    font-size: 10px;
    color: var(--bcnet-muted);
    letter-spacing: .5px;
}

/* csp leaf */
.bcnet__node--csp {
    flex-direction: row;
    gap: 8px;
    min-width: auto;
    padding: 9px 14px;
    background: #f5f8fc;
    border-color: #e2e8f0;
}

.bcnet__code {
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--bcnet-title);
}

/* live status dot */
.bcnet__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bcnet-on);
    display: inline-block;
    flex: none;
    box-shadow: 0 0 0 0 rgba(22,163,74,.5);
    animation: bcnet-pulse 1.8s ease-out infinite;
}

@keyframes bcnet-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(22,163,74,.55);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(22,163,74,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(22,163,74,0);
    }
}

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


#cus-form-dropdown-012 label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: .5rem !important;
}

#cus-form-dropdown-012 button {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    #cus-form-dropdown-012 button::after {
        display: inline-block;
        margin-left: .255em;
        vertical-align: .255em;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
        float: right;
        margin-top: 11px;
    }


/*recharge&utility_page-css*/



:root {
    --fcw-navy: #08335f;
    --fcw-primary: #0a5fa8; /* fusion blue        */
    --fcw-accent: #29abe2; /* code cyan          */
    --fcw-accent-lt: #56c1ea;
    --fcw-ink: #0f2438;
    --fcw-muted: #64748b;
    --fcw-line: #e6edf4;
    --fcw-bg: #eef3f8;
    --fcw-credit: #16a34a;
    --fcw-debit: #d64545;
}

.fcw-stage {
    /* min-height: 100vh; */
    /* background: var(--fcw-bg); */
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 28px 14px; */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* phone frame */
.fcw-phone {
    width: 100%;
    max-width: 340px;
    background: #ffffff;
    border: 1px solid var(--fcw-line);
    border-radius: 30px;
    box-shadow: 0 26px 60px rgba(8,51,95,.16);
    padding: 20px 18px 22px;
}

.fcw-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--fcw-muted);
    margin-bottom: 16px;
}

    .fcw-statusbar .fcw-app {
        color: var(--fcw-primary);
    }

/* balance card */
.fcw-balance {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--fcw-primary) 0%, var(--fcw-accent) 100%);
    color: #fff;
    border-radius: 20px;
    padding: 20px;
}

    .fcw-balance::after { /* soft light blob, jaise mockup me tha */
        content: "";
        position: absolute;
        top: -30px;
        right: -30px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(255,255,255,.12);
    }

.fcw-balance__label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .9;
    margin: 0;
}

.fcw-balance__amt {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.5px;
    margin: 4px 0 8px;
}

.fcw-balance__id {
    font-size: 12px;
    opacity: .95;
}

.fcw-addmoney {
    background: #fff;
    color: var(--fcw-primary);
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    position: relative;
    z-index: 1;
}

    .fcw-addmoney:hover {
        background: #f1f8fd;
        color: var(--fcw-navy);
    }

/* quick actions */
.fcw-action {
    text-decoration: none;
    display: block;
    text-align: center;
}

.fcw-action__tile {
    width: 52px;
    height: 52px;
    margin: 0 auto 6px;
    border-radius: 15px;
    background: #eef6fd;
    border: 1px solid #dcecf8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fcw-primary);
    font-size: 20px;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.fcw-action:hover .fcw-action__tile {
    transform: translateY(-3px);
    background: var(--fcw-primary);
    color: #fff;
}

.fcw-action__lbl {
    font-size: 11px;
    color: var(--fcw-ink);
    font-weight: 500;
}

/* section title */
.fcw-sect {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fcw-muted);
    font-weight: 600;
    margin: 4px 0 10px;
}

/* transactions */
.fcw-txn {
    display: flex;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--fcw-line);
}

    .fcw-txn:last-child {
        border-bottom: 0;
    }

.fcw-txn__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fcw-accent);
    flex: none;
    margin-right: 11px;
}

.fcw-txn__dot--credit {
    background: var(--fcw-credit);
}

.fcw-txn__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fcw-ink);
    line-height: 1.2;
}

.fcw-txn__meta {
    font-size: 11px;
    color: var(--fcw-muted);
}

.fcw-txn__amt {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.fcw-amt--debit {
    color: var(--fcw-debit);
}

.fcw-amt--credit {
    color: var(--fcw-credit);
}

.fcw-foot {
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--fcw-muted);
    text-align: center;
    margin: 16px 0 0;
}


.rfa {
    --rfa-blue: #3454dc; /* number + bar + hover fill (brand blue) */
    --rfa-icon: #2f3f6e; /* line icon color                        */
    --rfa-tint: #eef2fd; /* icon circle background                 */
    --rfa-title: #1b2440;
    --rfa-body: #6b7488;
    --rfa-div: #dbe1ec; /* dotted divider                          */

    background: #f7f7f7;
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
    padding: 44px 16px 56px;
}

    .rfa, .rfa * {
        box-sizing: border-box;
    }

.rfa__inner {
    max-width: 1180px;
    margin: 0 auto;
}

/* ---- cell + dotted row dividers ---- */
.rfa__col {
    padding: 30px 28px;
    transition: background .2s ease;
    border-radius: 14px;
}

    .rfa__col:hover {
        background: #f7f9ff;
    }

@media (min-width: 992px) {
    .rfa__col:not(:nth-last-child(-n+3)) {
        border-bottom: 2px dotted var(--rfa-div);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .rfa__col:not(:nth-last-child(-n+2)) {
        border-bottom: 2px dotted var(--rfa-div);
    }
}

@media (max-width: 767.98px) {
    .rfa__col:not(:last-child) {
        border-bottom: 2px dotted var(--rfa-div);
    }
}

/* ---- content ---- */
.rfa__icon {
    flex: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--rfa-tint);
    color: var(--rfa-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    margin-right: 20px;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

.rfa__col:hover .rfa__icon {
    background: var(--rfa-blue);
    color: #fff;
    transform: translateY(-3px);
}

.rfa__num {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--rfa-blue);
    margin: 4px 0 7px;
    font-variant-numeric: tabular-nums;
}

    .rfa__num::before {
        content: "";
        width: 3px;
        height: 15px;
        border-radius: 3px;
        background: var(--rfa-blue);
        display: inline-block;
    }

.rfa__title {
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--rfa-title);
    margin: 0 0 10px;
    line-height: 1.25;
    font-family: Figtree, sans-serif;
}

.rfa__desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--rfa-body);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .rfa__icon, .rfa__col {
        transition: none;
    }

        .rfa__col:hover .rfa__icon {
            transform: none;
        }
}

.grid-work-process-recharge {
    grid-template-columns: repeat(3, 0.7fr)!important;
}

.cus-recharge-851742
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fc-approch-48541
{
    margin-top: inherit!important
}



/*E-Commerce_&_retail-page-css*/


:root {
    --fce-blue: #0a5fa8;
    --fce-blue-d: #08335f;
    --fce-cyan: #29abe2;
    --fce-ink: #0f2438;
    --fce-muted: #5b6b7d;
}

.fce {
    background: #ffffff;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    padding: 10px 22px;
}

    .fce, .fce * {
        box-sizing: border-box;
    }

.fce-wrap {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 44px;
}

.fce-copy {
    flex: 1 1 380px;
    min-width: 300px;
}

.fce-art {
    flex: 1 1 440px;
    min-width: 300px;
}

.fce-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--fce-cyan);
    text-transform: uppercase;
    margin: 0 0 16px;
}

    .fce-eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--fce-cyan);
    }

.fce-h2 {
    font-size: clamp(26px,3.4vw,36px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--fce-ink);
    margin: 0 0 18px;
}

    .fce-h2 b {
        color: var(--fce-blue);
        font-weight: 800;
    }

.fce-p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--fce-muted);
    margin: 0;
    max-width: 520px;
}

.fce-svg {
    width: 100%;
    height: auto;
    display: block;
}

.cus-delivered-14741 {
    background: #f7f7f7
}

.cus-ecom-47102
{
    display:flex;
    justify-content: space-between;
    align-items: center
}



/*educaiton-page-css*/



:root {
    --vcls-blue: #0a5fa8;
    --vcls-cyan: #29abe2;
    --vcls-navy: #0f2438;
    --vcls-muted: #6b7789;
    --vcls-live: #e5484d;
    --vcls-line: #e7eef6;
    --vcls-tint: #eef6fd;
}

.vcls-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 14px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

    .vcls-stage * {
        box-sizing: border-box;
    }

.vcls-card {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border: 1px solid var(--vcls-line);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(10,51,95,.12);
    padding: 22px 22px 18px;
    animation: vcls-rise .6s ease both;
}

@keyframes vcls-rise {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* header */
.vcls-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--vcls-live);
}

    .vcls-live i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--vcls-live);
        display: inline-block;
        animation: vcls-blink 1.1s ease-in-out infinite;
    }

@keyframes vcls-blink {
    0%,100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(229,72,77,.5)
    }

    50% {
        opacity: .35;
        box-shadow: 0 0 0 6px rgba(229,72,77,0)
    }
}

.vcls-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--vcls-navy);
}

.vcls-timer {
    font-family: "SFMono-Regular",Menlo,Consolas,monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--vcls-blue);
}

    .vcls-timer .c {
        animation: vcls-colon 1s step-end infinite;
    }

@keyframes vcls-colon {
    50% {
        opacity: .25
    }
}

/* teacher strip */
.vcls-teacher {
    background: linear-gradient(90deg,var(--vcls-tint),#e6f6fd);
    border: 1px solid #d7ebf8;
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vcls-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vcls-navy);
}

.vcls-role {
    font-size: 11.5px;
    color: var(--vcls-muted);
}

.vcls-wave rect {
    fill: var(--vcls-cyan);
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: vcls-eq .9s ease-in-out infinite;
}

    .vcls-wave rect:nth-child(2) {
        animation-delay: .12s;
        fill: var(--vcls-blue)
    }

    .vcls-wave rect:nth-child(3) {
        animation-delay: .24s
    }

    .vcls-wave rect:nth-child(4) {
        animation-delay: .36s;
        fill: var(--vcls-blue)
    }

    .vcls-wave rect:nth-child(5) {
        animation-delay: .18s
    }

@keyframes vcls-eq {
    0%,100% {
        transform: scaleY(.35)
    }

    50% {
        transform: scaleY(1)
    }
}

/* student avatars */
.vcls-students {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.vcls-stu {
    position: relative;
    width: 64px;
    text-align: center;
}

.vcls-ava {
    display: block;
    transition: transform .2s ease;
}

.vcls-stu:hover .vcls-ava {
    transform: translateY(-3px);
}

.vcls-stu__lbl {
    font-size: 11px;
    color: var(--vcls-muted);
    margin-top: 4px;
    font-weight: 600;
}
/* active speaker ring */
.vcls-stu--active .vcls-ring {
    stroke: var(--vcls-cyan);
    animation: vcls-spk 1.6s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes vcls-spk {
    0% {
        opacity: .9;
        transform: scale(1)
    }

    70% {
        opacity: 0;
        transform: scale(1.18)
    }

    100% {
        opacity: 0;
        transform: scale(1.18)
    }
}
/* badges */
.vcls-badge {
    position: absolute;
    top: -4px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--vcls-line);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(10,51,95,.12);
}

.vcls-badge--hand {
    animation: vcls-hand 1.4s ease-in-out infinite;
}

@keyframes vcls-hand {
    0%,100% {
        transform: rotate(-8deg)
    }

    50% {
        transform: rotate(10deg)
    }
}

/* control bar */
.vcls-controls {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.vcls-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--vcls-line);
    background: #fff;
    color: var(--vcls-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .18s ease;
}

    .vcls-btn:hover {
        background: var(--vcls-blue);
        color: #fff;
        transform: translateY(-2px);
    }

.vcls-btn--off {
    color: var(--vcls-live);
    border-color: #f3c9cb;
}

.vcls-btn--primary {
    background: var(--vcls-blue);
    color: #fff;
}

    .vcls-btn--primary:hover {
        background: var(--vcls-cyan);
    }

/* stats rings */
.vcls-stat {
    text-align: center;
}

.vcls-stat__num {
    font-size: 19px;
    font-weight: 800;
    color: var(--vcls-navy);
}

.vcls-stat__lbl {
    font-size: 11px;
    color: var(--vcls-muted);
}

.vcls-track {
    stroke: #e6eef6;
}

.vcls-prog {
    stroke-linecap: round;
    stroke-dasharray: 213.6;
    stroke-dashoffset: 213.6;
    animation: vcls-fill 1.5s .3s ease forwards;
}

@keyframes vcls-fill {
    to {
        stroke-dashoffset: var(--off);
    }
}

.vcls-cap {
    font-family: "SFMono-Regular",Menlo,Consolas,monospace;
    font-size: 11.5px;
    color: var(--vcls-muted);
    text-align: center;
    margin: 0;
}

@media (prefers-reduced-motion:reduce) {
    .vcls-card, .vcls-live i, .vcls-wave rect, .vcls-ring, .vcls-badge--hand, .vcls-prog, .vcls-timer .c {
        animation: none !important;
    }

    .vcls-prog {
        stroke-dashoffset: var(--off);
    }
}


#education-p-054 h3
{
    font-size: 25px;
}

.orb-8452-abc {
    width: 340px!important;
    /* display: block; */
    margin: auto!!important;
    margin: 23px auto 42px!important;
}




/*Rechange_css*/

/*bankingpage-css*/

.grid-banking-582 {
    display: block !important;
}

.mini-change-work-step {
    /*margin: 0 auto!important;
    padding: 88px 64px 100px!important;*/
    /*background: radial-gradient(1100px 550px at 82% 8%, rgba(31, 165, 101, 0.06), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(60, 120, 220, 0.04), transparent 60%), var(--paper);
    border-radius: 24px;*/
}


/*android-app-development-css*/

.comparison-card-android
{
    max-width: inherit!important;
}

.section-s-interagtion {
    padding-bottom:88px;
}

.section-comparison {
    padding: 88px 0;
}

.service-heading {
    font-size: clamp(26px, 3.2vw, 2.9rem);
    font-weight: 700;
    margin: 16px 0 14px;
    text-wrap: balance;
    margin-top: 0;
}

.header .heading {
      font-size: clamp(26px, 3.2vw, 2.9rem);
    font-weight: 700;
    margin: 16px 0 14px;
    text-wrap: balance;
    margin-top: 0;
}

h2.heading .accent {
    /* background: linear-gradient(90deg, var(--blue), var(--sky)); */
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--color-primary);
}