/*------------------------------------*\
    
    WebFX CF7 Customizations - Global styling for all CF7 Forms

    Add custom CF7 form styling to this file if it should be applied to all CF7 forms on the site
    Otherwise, put your block-specific styles in individual block stylesheets so that various block-specific styles aren't loaded on every CF7 form

\*------------------------------------*/

.contact-form {
    position: relative;
    z-index: 5;
}

.contact-form + .resources-text {
    padding-top: 0;
}

.contact-form-container {
    max-width: 872px;
    border-radius: 13px;
    padding: 40px 20px;
    background-color: var( --color-gray );
    margin: 0 auto;
}

.contact-form-container label {
    color: var(--color-dark-blue);
    font-size: 17px;
    font-style: italic;
    font-weight: 700;
}

.contact-form-container .form .row > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.contact-form-container :is( [type="text"], [type="email"], [type="tel"], textarea ) {
    border: 1px solid var(--color-light-blue-01);
    height: 40px;
    padding: 10px;
    display: block;
    width: 100%;
    outline: none;
    border-radius: 13px;
}

.contact-form-container textarea {
    height: 90px!important;
}

.contact-form-container .btn {
    margin-top: 10px;
    display: inline-block;
    max-width: 187px;
    padding: 15px 30px;
}

.bg-white + .contact-form {
    padding-top: 0;
}

@media( min-width : 1200px ) {
    .contact-form-container {
        padding: 40px 50px;
    }
}