@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


    * {
        font-family: "Inter", sans-serif;
    }



    .our_contact {
        width: 100%;
        height: auto;
        margin: 68px auto 0px;
        position: relative;
        z-index: 1;
    }

    .contact-row:before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        /*background: #0078cf;
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);*/
        background-image: url(../image/contact-bg.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }

.contact-row {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 57px 0px;
}

    .contact-col {
        width : 50%;
    }

    .contact-col h2 {
        width : fit-content;
        font-size: 14px;
        text-transform: uppercase;
        color: #ffffff;
        position : relative;
    }
    
    .contact-col h2:after {
        content: "";
        width: 100%;
        height: 1px;
        position: absolute;
        top: 8px;
        left: 120%;
        background: #dfdfdf;
    }
    
    .contact-col h3 {
        font-size: 50px;
        margin: 50px 0px 8px;
        color: #ffffff;
    }

    .contact-col h4 {
        color: #ffff;
        margin: 37px 0px 10px;
        font-size: 20px;
        font-weight: 500;
    }

    .contact-col p {
        font-size: 15px;
        font-weight: 500;
        color: #f1f1f1;
        line-height: 1.6;
    }

    #contactForm {
        width: 83%;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 83px 0px;
    }

    .form-group {
        display: flex;
        /*flex-direction: column;*/
        align-items: center;
        gap: 4px;
        position: relative;
        height: 45px;
        border-bottom: 1px solid #e7e7e7;
        color: #454545;
    }

    .form-group span {
        font-size : 15px;
    }

    .form-group i {
        color : #ffff;
    }


    .form-group label {
        font-size: 15px;
        font-weight: 500;
        font-style: normal;
        position: absolute;
        top: 50%;
        left: 18px;
        transform: translateY(-50%);
        transition: 300ms linear;
        background: transparent;
        color: #ffff;
        padding: 0px 10px;
        font-size: 14px;
    }


    .form-group input {
        height: 100%;
        width: 100%;
        padding: 0px 11px;
        border-radius: 6px;
        font-size: 14px;
        border: none;
        color: #efefef;
        background: transparent;
        text-transform : capitalize;
    }

        .form-group input:focus + label,
        .form-group input:not(:placeholder-shown) + label {
            top: 0;
            transform: translateY(-69%);
            font-size: 12px;
        }

    .form-group textarea:focus + label,
    .form-group textarea:not(:placeholder-shown) + label {
        top: 0;
        transform: translateY(-43%);
        font-size: 12px;
    }

    .messageBox {
        min-height: 100px !important;
    }

    .form-group textarea {
        width: 100%;
        min-height: auto;
        height: auto;
        padding: 6px 11px;
        border-radius: 6px;
        font-size: 14px;
        border: none;
        color: #efefef;
        background: transparent;
        text-transform: capitalize;
    }

    .form-group input:focus, textarea:focus {
        outline : none;
    }

    .submitBtnBox {
        border : none !important;
    }

    .form-group button {
        height: 45px;
        width: 100%;
        padding: 6px 11px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        background: #0094ff;
        color: #ffffff;
        border: none;
        cursor : pointer;
        transition : 300ms linear;
    }

    .form-group button:hover {
        background: #003d68;
    }

    #contactForm .error {
        color: #b10000;
        font-weight: 500;
        height: 17px;
        font-size: 12px;
        margin-top: -11px;
    }







@media screen and (max-width : 920px) {
    .contact-col p {
        width: 82%;
    }
}

@media screen and (max-width : 770px) {
    .contact-row {
        flex-direction: column;
        padding: 42px 0px;
    }

    .contact-col h2 {
        width: fit-content;
        font-weight: 500;
        font-size: 12px !important;
    }

    .contact-col h3 {
        font-size: 40px !important;
        margin: 28px 0px 8px;
    }

        .contact-col p {
        font-size : 14px;
    }

    .contact-col {
        width: 100%;
    }

    #contactForm {
        width: 94%;
        padding: 17px 0px;
        gap: 10px;
    }

    .messageBox {
        min-height: 60px !important;
    }
}


@media screen and (max-width: 650px) {
    .contact-col h3 {
        font-size: 32px !important;
        margin: 24px 0px 8px;
    }
}