@use "../../../../src/scss/utilities.scss"; 
.block_contactform{
    &__image{
        position: relative;
        h2.block_contactform__title{
            position: absolute;
            left: 5%;
            top: calc(50% - 1.75rem );
            z-index: 3;
        }
        &::after{
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(rgba(0,0,0,0.4), #0000003b), center;
            background-blend-mode: multiply;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: 2;
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            @media (max-width: 991.98px) {
                max-height: 200px;
            }
        }
    }
     
    &__content{
        width: 100%;
        height: 100%;
        display: flex; 
        justify-content: space-between;
        align-items: center;
        padding-left: 1.5rem;
    }
    h2.block_contactform__title{
        color: var(--a-blanco);
        font-size: 3.5rem !important;
        text-transform: uppercase;
        @media (max-width: 991.98px) {
            font-size: 2rem !important;
            left: 0;
            width: 100%;
            text-align: center;
        }
    }
    &__form{
        background-color: var(--cerulean);
        width: 100%;
        height: 100%;
        @media (max-width: 991.98px) {
            background-color: #f6fcff;
        }
        &--content{
            .ff-errors{
                padding-left: 10px;
                padding-top: 10px;
            }
            .freeform-label.freeform-required:after {
                @extend %openSans-font;
                content: "*";
                margin-left: 5px;
                color: var(--b-cereza);
            }
            .ff-form-success,.ff-form-errors{
                display: none;
            }
            .freeform-column .freeform-input 
            {
                border: solid 1px #93b0c2;
                border-radius: 0px; 
                line-height: 2rem;
                @extend %openSans-font;
            }
            .freeform-column .freeform-label.form-label{
                @extend %openSans-font; 
                font-weight: 600;
                color: var(--a-blanco);
                &::after{
                 color: var(--b-cereza) !important;
                }
                @media (max-width: 991.98px) {
                    color: #27251f;
                }
            } 
            .form-select{
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23991e66'%3E%3Cpath d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
            }
            select{
                border: solid 1px #93b0c2;
            }
            textarea{
                border: solid 1px #93b0c2;
            }
            .freeform-column .freeform-errors>li, .freeform-column .ff-errors>li {
                color: var(--a-blanco);
                @extend %openSans-font;
                @media (max-width: 991.98px) {
                    color: #27251f;
                }
            }
        
            .submit{
                @extend %VFSans-font;
                font-weight: 600;
                background-color: var(--b-cereza);
                color: var(--a-blanco);
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 1rem;
                padding: 0.5rem 1rem;
                border: none;
                &::after{
                    content: '';
                    background-image: url("data:image/svg+xml,%3Csvg width='22' height='17' viewBox='0 0 22 17' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='nonzero' stroke='%23fff' fill='none'%3E%3Cpath d='M1.306 8.194h19.388a.307.307 0 0 1 0 .613H1.306a.307.307 0 0 1 0-.613z'/%3E%3Cpath d='M13.01.5c.079 0 .157.03.217.09l7.684 7.695a.31.31 0 0 1 0 .434l-7.684 7.691a.306.306 0 1 1-.434-.434l7.467-7.474-7.467-7.478A.307.307 0 0 1 13.01.5z'/%3E%3C/g%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                    height: 17px;
                    width: 22px;
                }
                &:hover{
                    background-color: #991e66;
                }

            }
        }
    }
}