.contact-form {

    display: flex;

    justify-content: center;

    align-items: center;

    height: auto;

    background-image: url("/assets/Website/images/Images/Desktop/hero-image-desktop.jpg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 144px 165px 88px 165px;

}







.contact-us-form-container {

    width: 1110px;

    height: auto;

    background-color: var(--white);

    border-radius: 24px;

    /* box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);  */

    padding: 40px 0px;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

}





.contact-us-business-container {

    width: 424px;

    height: 560px;

    margin-left: 88px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 32px;

}



.contact-title {

    font-size: 48px;

    line-height: 60px;

    letter-spacing: 0.5px;

    font-weight: var(--extraBold);

    color: var(--primary);

}





.contect-secondary-title {

    font-size: 18px;

    line-height: 24px;

    font-weight: var(--medium);

    color: var(--primary);

    letter-spacing: 0px;

}





.contact-info-container {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 24px;

}



.contact-single-info-container {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    padding: 24px;

    background-color: var(--neutral-01);

    border-radius: 16px;

    width: 100%;

    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);

    gap: 8px;

}



.contact-info-link {

    text-decoration: none;

    font-size: 14px;

    line-height: 24px;

    font-weight: var(--semiBold);

    color: var(--primary);

}





.contact-single-info-phone {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

}



.contact-us-newsletter-form {

    margin-left: 112px;

    padding-top: 8px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 32px;

}





.input-container {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 8px;

}



.input-label {

    font-size: 14px;

    line-height: 20px;

    color: var(--tertirary);

    font-weight: var(--semiBold);

}



.input-contact {

    width: 440px;

    background-color: var(--neutral-01);

    border: solid 1px var(--border-primary);

    border-radius: 18px;

    height: 40px;

    padding: 10px;

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--medium);

    color: var(--primary);

}



    .input-contact.message {

        height: 88px; /* Adjust height as needed */

        resize: none; /* Prevent resizing by the user (optional) */

        display: block;

    }



.terms-checkbox {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--tertirary);

}





.checkbox-box {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    border: solid 1px var(--border-primary);

}





.show-available-only {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    align-self: center;

}



.available-checkbox-contact {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: solid 1px var(--border-primary);

    display: flex;

    justify-content: center;

    align-items: center;

}





    .available-checkbox-contact:is(:hover, :focus-visible) {

        cursor: pointer;

    }



    .available-checkbox-contact.active .checkmark-icon {

        display: block;

    }



.checkmark-icon {

    display: none;

}



.available-text {

    font-size: 14px;

    line-height: 16px;

    font-weight: var(--medium);

    letter-spacing: 1px;

    color: #656565;

}







@media (width < 1100px) {



    .contact-section{

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        align-items: center;

        height: 1600px;



    }



    .contact-form{

        display: flex;

        justify-content: center;

        align-items: center;

        background-image: url("/assets/Website/images/Images/Desktop/hero-image-desktop.jpg");

        background-position: center;

        background-repeat: no-repeat;

        background-size: cover;

        height: 1200px;

        padding: 24px;

        width: 100%;

    }







    .contact-us-form-container{

        width: 1110px;

        height: auto;

        background-color: var(--white);

        border-radius: 24px;

        /* box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);  */

        padding: 40px 0px;

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        margin-top: -450px;

    }





    /* CONTACT SECTION */













    .content-front-container{

        position: relative;

        margin-top: -1100px;

        z-index: 100;

        height: auto;

        padding: 56px 52px 80px 52px;

        display: flex;

        justify-content: center;

        align-items: center;

    }





    .contact-us-form-container{

        width: 1110px;

        height: auto;



        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        background-color: transparent;



    }





    .contact-us-business-container{

        width: 520px;

        height: auto;

        margin-left: 0px;



    }













    .contact-single-info-container{

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

        width: 100%;

        min-height: 108px;

        box-shadow: 2px 4px 2px 2px rgba(0, 0, 0, 0.2);



    }











    .contact-us-newsletter-form{

        margin-left: 0px;

        margin-top: 48px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        background-color: var(--neutral-01);

        gap: 32px;

        padding: 40px 24px;

        border-radius: 24px;

        box-shadow: 0px 4px 6px 6px rgba(0, 0, 0, 0.5);







    }





    .input-container{



        width: 100%;

    }



    .input-label{

        font-size: 14px;

        line-height: 20px;

        color: var(--tertirary);

        font-weight: var(--semiBold);

    }



    .input-contact{

        width: 100%;



    }









}





@media (width < 700px){



    /* CONTACT SECTION */



    .contact-title{

        font-size: 32px;

        line-height: 40px;

        letter-spacing: 0px;



    }





    .contect-secondary-title{

        font-size: 14px;

        line-height: 20px;





    }



    .contact-section{

        height: 1500px;

        width: 100%;

        background-color: var(--white);



    }



    .content-front-container{



        padding: 56px 24px 80px 24px;



    }



    .contact-form{

        height: 1000px;

    }





    .contact-us-form-container{

        width: 100%;

        height: 808px;



        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        background-color: transparent;



    }





    .contact-us-business-container{

        width: 100%;

        max-width: 510px;

        height: auto;

        margin: 0px 24px;



    }













    .contact-single-info-container{

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

        width: 100%;

        min-height: 108px;

        box-shadow: 2px 4px 2px 2px rgba(0, 0, 0, 0.2);



    }











    .contact-us-newsletter-form{

        margin-left: 0px;

        margin-top: 48px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        background-color: var(--neutral-01);

        gap: 32px;

        padding: 40px 24px;

        border-radius: 24px;

        box-shadow: 0px 4px 6px 6px rgba(0, 0, 0, 0.5);







    }





    .input-container{



        width: 100%;

    }



    .input-label{

        font-size: 14px;

        line-height: 20px;

        color: var(--tertirary);

        font-weight: var(--semiBold);

    }



    .input-contact{

        width: 100%;



    }





    .available-checkbox-contact {

        width: 24px !important;

        height: 24px !important;

    }





}