/* ===== Right Contact Form ===== */
.contact-form-wrap{
    position: relative;
    z-index: 2;
}

.contact-form-head span{
    display: inline-block;
    font-size: 36px !important;
    line-height: 1.2 !important;
    color: #333e46 !important;
    font-weight: 700;
    letter-spacing: 1px;
}

.contact-form-desc{
    margin: 22px 0 28px;
}

.contact-form-desc p{
    margin: 0 0 8px;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}

.contact-form-box{
    width: 100%;
}

.contact-form-box .cf-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.contact-form-box .cf-row{
    min-width: 0;
}

.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea{
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #999;
    background: #fff;
    border-radius: 0;
    padding: 0 22px;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
    -webkit-appearance: none;
    appearance: none;
}

.contact-form-box input,
.contact-form-box select{
    height: 76px;
}

.contact-form-box textarea{
    height: 120px;
    padding-top: 18px;
    padding-bottom: 18px;
    resize: vertical;
}

.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder{
    color: #8a8a8a;
}

.contact-form-box input:focus,
.contact-form-box select:focus,
.contact-form-box textarea:focus{
    border-color: #00ace5;
    box-shadow: 0 0 0 3px rgba(0, 172, 229, 0.10);
}

.contact-form-box select{
    cursor: pointer;
    padding-right: 50px;
    background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
    background-position: calc(100% - 24px) calc(50% - 4px), calc(100% - 18px) calc(50% - 4px);
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
}

.contact-form-box .cf-row-textarea,
.contact-form-box .cf-row-submit,
.contact-form-box .cf-row-message{
    grid-column: 1 / -1;
}

.contact-form-box .cf-row-submit{
    margin-top: 2px;
}

.contact-form-box .cf-submit-btn{
    min-width: 180px;
    height: 50px;
    border: 0;
    border-radius: 0;
    background: #00ace5;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background-color .25s ease, opacity .25s ease;
}

.contact-form-box .cf-submit-btn:hover{
    background: #33bff0;
}

.contact-form-box .cf-submit-btn.is-loading{
    opacity: .85;
    cursor: not-allowed;
}

.contact-form-box .cf-form-message{
    display: none;
    margin-top: -4px;
    padding: 12px 16px;
    border: 1px solid #f0b6b6;
    background: #fff5f5;
    color: #c62828;
    font-size: 14px;
    line-height: 1.6;
}

.contact-form-box .cf-form-message.show{
    display: block;
}

.contact-form-box .cf-form-message.success{
    border-color: #b7e4c7;
    background: #f3fff7;
    color: #1f7a3d;
}

.contact-form-box .cf-error{
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.10) !important;
}

@media only screen and (max-width: 768px){
    .contact-form-head span{
        font-size: 28px !important;
    }

    .contact-form-desc{
        margin: 18px 0 22px;
    }

    .contact-form-desc p{
        font-size: 14px;
        line-height: 1.7;
    }

    .contact-form-box .cf-grid{
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-form-box input,
    .contact-form-box select{
        height: 58px;
        padding: 0 16px;
        font-size: 14px;
    }

    .contact-form-box textarea{
        height: 110px;
        padding: 14px 16px;
        font-size: 14px;
    }

    .contact-form-box .cf-submit-btn{
        width: 100%;
        min-width: 0;
        height: 44px;
        font-size: 15px;
    }
}