.service-hero {
background: linear-gradient(180deg, #020617 0%, #0f172a 40%, #042979 100%);
background: linear-gradient(
135deg,
#041F1E 0%,
#064E3B 35%,
#047857 70%,
#10B981 100%
);
padding-bottom: 60px;
}

.whyus {
    background:
        radial-gradient(circle at top left,
            rgba(16,185,129,0.10) 0%,
            transparent 35%),

        radial-gradient(circle at bottom right,
            rgba(59,130,246,0.08) 0%,
            transparent 35%),

        linear-gradient(
            135deg,
            #f8fafc 0%,
            #f1f5f9 45%,
            #ffffff 100%
        );
}

.process {
    background: linear-gradient(180deg, #020617 0%, #0f172a 40%, #042979 100%);
    background:
linear-gradient(
    135deg,
    #020617 0%,
    #0f172a 30%,
    #164e63 100%
);
background:
linear-gradient(
    135deg,
    #000000 0%,
    #0f172a 50%,
    #111827 100%
);
}


.card{
    /* background: rgba(17,24,39,.75);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
        0 10px 40px rgba(0,0,0,.35); */

    background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 20px 50px rgba(0,0,0,.35);
}


/* Remove browser arrow */

details summary::-webkit-details-marker {
    display: none;
}

details summary {
    list-style: none;
}


.FAQS {
background: linear-gradient(
    135deg,
    #f8fafc 0%,
    #f1f5f9 35%,
    #e0f2fe 100%
);
}

/* FAQ Card */

.faq-item {
    background: white;
    box-shadow:
        0 1px 2px rgba(0,0,0,.04);
}

/* Active card */

.faq-item[open] {
    background: #ffffff;

    border-color: #10b981;

    box-shadow:
        0 10px 30px rgba(16,185,129,.10);
}

/* Toggle */

.faq-toggle {
    position: relative;

    width: 24px;
    height: 24px;

    flex-shrink: 0;
}

/* Horizontal */

.faq-horizontal {
    position: absolute;

    width: 14px;
    height: 2px;

    background: #1459fb;

    top: 30%;

    transform: translateY(-50%);

    border-radius: 999px;
}

/* Vertical */

.faq-vertical {
    position: absolute;

    width: 2px;
    height: 14px;

    background: #1459fb;

    left: 30%;

    transform: translateX(-50%);

    border-radius: 999px;

    transition: all .3s ease;
}

/* + -> - */

.faq-item[open] .faq-vertical {
    height: 0;
    top: 50%;
}

/* Answer animation */

.faq-content {
    animation: faqAnimation .25s ease;
}

@keyframes faqAnimation {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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