/* ═══════════════════════════════════════════════════════════ */
/* FAQ BANNER */
/* ═══════════════════════════════════════════════════════════ */

#faq-banner {
    margin: 0;
}

.faq-banner {
    position: relative;
    background-image: url('../../images/content/faq.webp');
    background-size: cover;
    background-position: 50% center;
    height: clamp(400px, 45vw, 600px);
    width: 100%;
}

.faq-heading-box {
    position: absolute;
    top: 30px;
    left: 0;
    background: linear-gradient(to bottom, rgba(172, 189, 202, 0.9), rgba(208, 210, 209, 0.9));
    padding: var(--spacing-md);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.faq-heading-box h1 {
    font-size: var(--font-size-hero);
    color: var(--brand-primary-500);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════ */
/* FAQ SECTION */
/* ═══════════════════════════════════════════════════════════ */

.faq section {
    margin: var(--spacing-md) 0;
}

.faq-heading {
    font-size: clamp(1rem, 0.67rem + 2.14vw, 1.4rem);
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.faq-category {
    padding: 0 var(--spacing-md);
}

/* ═══════════════════════════════════════════════════════════ */
/* MEDIA QUERIES */
/* ═══════════════════════════════════════════════════════════ */

/* SCREEN SIZE - SMALL */
@media screen and (min-width: 576px) {
    .faq-category {
        padding: 0 var(--spacing-xl);
    }

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