html {
    scroll-behavior: smooth;
}

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

.faq-banner {

    /* background: linear-gradient(135deg, #052a73, #14aae8); */

    color: #052a73;

    padding: 80px 0;

    text-align: center;

}

.faq-banner h1 {

    font-size: 56px;

    font-weight: 700;

    margin-bottom: 15px;

}

.faq-banner p {

    /* max-width: 700px; */

    margin: auto;

    font-size: 20px;

    opacity: .95;

    color: #14aae8;

}

/* ==========================
           FAQ SECTION
        ========================== */

.faq-section {

    padding: 100px 0;

    background: #f8fbff;

}

.section-tag {

    color: #14aae8;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.section-title {

    color: #052a73;

    font-size: 42px;

    font-weight: 700;

    margin-top: 10px;

}

.accordion-item {

    border: none;

    border-radius: 18px !important;

    overflow: hidden;

    margin-bottom: 20px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

.accordion-button {

    font-weight: 600;

    color: #052a73;

    padding: 22px 25px;

    background: white;

}

.accordion-button:not(.collapsed) {

    background: #052a73;

    color: white;

    box-shadow: none;

}

.accordion-button:focus {

    box-shadow: none;

}

.accordion-body {

    padding: 25px;

    color: #555;

    line-height: 1.8;

}

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

.faq-cta {

    padding: 100px 0;

    background: white;

    text-align: center;

}

.faq-cta-box {

    background: linear-gradient(135deg, #052a73, #14aae8);

    color: white;

    border-radius: 30px;

    padding: 60px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);

}

.faq-cta h2 {

    font-size: 42px;

    font-weight: 700;

    margin-bottom: 15px;

}

.faq-cta p {

    max-width: 700px;

    margin: auto;

    margin-bottom: 30px;

    opacity: .95;

}

.faq-btn {

    display: inline-block;

    padding: 15px 35px;

    background: white;

    color: #052a73;

    text-decoration: none;

    border-radius: 50px;

    font-weight: 600;

    transition: .3s;

}

.faq-btn:hover {

    transform: translateY(-4px);

    color: #052a73;

}

@media(max-width:768px) {

    .faq-banner {

        padding: 80px 0;

    }

    .faq-banner h1 {

        font-size: 36px;

    }

    .section-title {

        font-size: 30px;

    }

    .faq-cta-box {

        padding: 40px 25px;

    }

    .faq-cta h2 {

        font-size: 30px;

    }

}