/* ==========================================================================
   Clarity DevTest — Contact Us page (contact-us.css)
   Depends on: base.css, home.css
   ========================================================================== */


/* ==========================================================================
   Page body
   ========================================================================== */

.contact_us_page_body {
    background-image:
        linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0) 35%),
        url('../images/our_services_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* ==========================================================================
   Intro
   ========================================================================== */

.contact_us_intro-section {
    padding: 7rem 1rem 3rem;
}

.contact_us_intro-section__intro {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 0.5rem;
    text-align: center;
}

.contact_us_intro-section__subhead {
    margin-bottom: 0;
    font-size: var(--text-base);
}


/* ==========================================================================
   Form section
   ========================================================================== */

.contact_us_form-section {
    padding: 0 1rem 5rem;
}

.contact_us_form-section__layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.contact_us_form-section__copy {
    text-align: center;
}

.contact_us_form-section__copy p {
    margin-bottom: 0;
}

.contact_us_form-card {
    background-color: var(--color-panel-white);
}

@media (max-width: 575px) {
    .contact_us_intro-section {
        padding-top: 6rem;
    }

    .contact_us_form-section__layout.container {
        --bs-gutter-x: 2rem;
    }
}