/* Mobile: make the footer form on Contact and Expertise match the About page. */
@font-face {
    font-family: AvenirLTStdHeavy;
    src: url(../fonts/AvenirLTStd-Heavy.otf);
    font-display: swap;
}

@media (max-width: 767px) {
    .form-container {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 20px 60px !important;
        background: #fff;
    }

    /* "Contact Us" / "We will contact you ASAP" row, styled like About's "Get in touch" */
    .form-container > div:first-child {
        display: flex !important;
        align-items: flex-start;
        width: 100% !important;
        margin: 40px 0 36px !important;
        padding: 0 !important;
    }

    .form-container > div:first-child h3 {
        width: 50% !important;
        margin: 0 !important;
        font-family: AvenirLTStdHeavy, Arial, sans-serif !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-transform: uppercase !important;
        text-align: left !important;
        color: #360568 !important;
    }

    .form-container > div:first-child h3 + h3 {
        text-align: right !important;
    }

    .form-container .registercontpage {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 29px !important;
    }

    .form-container .stepwizard {
        width: 100% !important;
        margin: 0 0 20px !important;
    }

    .form-container #basicform,
    .form-container #basicform .setup-content,
    .form-container #basicform .col-md-12,
    .form-container #basicform .form-group {
        box-sizing: border-box !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .form-container #basicform .input {
        width: 100% !important;
        min-height: 48px;
        padding: 0 !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 16px !important;
        color: #333 !important;
    }

    .form-container #basicform .nextBtn,
    .form-container #basicform #finalsubmit {
        float: none !important;
        display: block !important;
        width: 100% !important;
        min-height: 48px;
        margin: 14px 0 0 !important;
        padding: 10px 40px !important;
        border: 1px solid #A20BFB !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        text-transform: capitalize;
        color: #A20BFB !important;
    }

    .form-container #basicform .nextBtn:hover,
    .form-container #basicform #finalsubmit:hover,
    .form-container #basicform .nextBtn:focus-visible,
    .form-container #basicform #finalsubmit:focus-visible {
        background: #A20BFB !important;
        color: #fff !important;
    }
}

/* Contact page: remove the large empty gap under "Let's Collaborate" on mobile. */
@media (max-width: 767px) {
    #form.contact-form .contact-info {
        display: block !important;
        padding-bottom: 0 !important;
    }
}

/* Contact page: contact-mobile.css stacks the headings; put them side by side like About. */
@media (max-width: 767px) {
    #form.contact-form .form-container {
        padding: 0 0 60px !important;
    }

    #form.contact-form .form-container > div:first-child {
        display: flex !important;
        margin: 40px 0 36px !important;
    }

    #form.contact-form .form-container > div:first-child h3 {
        width: 50% !important;
        margin: 0 !important;
    }

    #form.contact-form .form-container > div:first-child h3 + h3 {
        text-align: right !important;
    }

    #form.contact-form .registercontpage {
        padding: 0 27px !important;
    }

    #form.contact-form #basicform .field,
    #form.contact-form #basicform .field > div {
        box-sizing: border-box !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}