.outcomes {

    background:
        radial-gradient(circle at 15% 20%,
            rgba(16,185,129,.10),
            transparent 30%),

        radial-gradient(circle at 85% 15%,
            rgba(6,182,212,.08),
            transparent 35%),

        linear-gradient(
            135deg,
            #F8FAFC 0%,
            #F2FBF8 35%,
            #ECFDF5 70%,
            #F8FAFC 100%
        );
}


.whyus {
    background: linear-gradient(
        135deg,
        #061a17,
        #0b2924,
        #041513
    );
} 

.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);
    }
}