/*------------------------------------*\
    
    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

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


/* Default Radio/Checkbox Style (if using CF7) */
.wpcf7-radio .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
    /* incase items go to 2 lines */
}

.wpcf7-radio .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item-label {
    margin-left: 5px;
}

/* CF7 Validation (Remove if not using CF7) */

/* Individual field error messages */
.wpcf7-not-valid-tip {

}

/* Entire form error message */
.wpcf7-response-output {

}

/* Styling for fields that have errors */
select.wpcf7-not-valid,
textarea.wpcf7-not-valid,
input.wpcf7-not-valid,
.wpcf7-not-valid .choices {
    
}

.contact__wrap {
    margin: 12px;
    height: auto;
    position: relative;
}

.contact__wrap__box {
    background: var(--c-blue);
    border-radius: 24px;
    height: 100%;
    position: relative;
    z-index: 1;
    color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
}

.contact__schedule_box {
    position: relative;
}

.contact__schedule_box .image-1 {
    border-radius: 24px;
}

.contact__schedule_box .image-2 {
    width: 226px;
    height: 200px;
    position: absolute;
    bottom: -8px;
    right: -16px;
    border-radius: 24px;
}

.contact__wrap__box a {
    color: var(--c-orange);
    z-index: 10;
    position: relative;
}

.contact__wrap__box h5 {
    color: var(--c-white);
}


.contact__wrap::before  {
    content: '';
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 155px;
    border-radius: 24px;
    border: 4px solid var(--c-orange);
    opacity: 0.3;
    top: -12px;

}

.bg-light-blue .contact__wrap::before  {
    border-color: var(--c-sky-blue);
    opacity: 0.5;

}

.contact__wrap::before  {
    right: -12px;
}

.contact__wrap::after  {
    content: '';
    position: absolute;
    z-index: -1;
    width: 278px;
    height: 155px;
    border-radius: 24px;
    background: var(--c-sky-blue);
    opacity: 0.2;
    bottom: -12px;
}

.contact__wrap::after  {
    right: -12px;
}

.contact__wrap::after  {
    left: -12px;
}

.bg-light-orange .contact__wrap::after  {
    background: var(--c-orange);
}

.contact__wrap__box .footer-social ul li a {
    background-color: var(--c-orange);
}

.contact__wrap__box .footer-social ul li a:hover {
    background-color: var(--c-sky-blue);
}

.contact__wrap__box .footer-social ul {
    justify-content: flex-start;
}

.form-wp .form-col-btn {
    text-align: left;
}

.box-bg {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.2;
    mix-blend-mode: soft-light;
    border-radius: 24px;
}

.schedule-consultation {
    margin: 20px auto;
    display: block;
    width: max-content;
}

@media (min-width: 768px) {
    .contact__schedule_box .image-2 {
        width: 443px;
    }
}

@media (min-width: 1200px) {
    .contact__wrap__box a:hover {
        color: var(--c-white);
    }
    
    .contact__schedule_box .image-2 {
        width: 226px;
    }
    
}