/*
 * FAQ accordion.
 *
 * The items themselves reuse the accordion the services page already has
 * (`.accordion`, `.accordion-tem`, `.accordion-header`, `.accordion_content`
 * from the Webflow stylesheet), so a FAQ always looks like the rest of the site.
 * This file only adds the band and the wrapper around it.
 */

.section-faq {
    background-color: var(--_variable-collection---white);
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 80px;
    display: flex;
}

.faq-wrapper {
    width: 100%;
    max-width: 900px;
}

.faq-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.faq-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
}

/*
 * Inside a service page the FAQ sits in the main content wrapper, which is
 * already the light grey band. The width matches the text column above it
 * (`.service-detail-heading-and-text`), so the heading lines up with the
 * section headings instead of sitting slightly to the left of them.
 */
.servicedetail-faq-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
}

@media screen and (max-width: 991px) {
    .section-faq {
        padding: 56px 5vw;
    }
}

@media screen and (max-width: 479px) {
    .section-faq {
        padding: 40px 5vw;
    }
}