@media (min-width: 320px) and (max-width: 425px){

    .contact-form-row{
        padding: 2rem 0 2rem 0;
    }

    .contact-form-row .col-11{
        padding-top: 0;
        flex-direction: column;
    }

    .left-side-form{
        padding-top: 1rem;
        width: 100%;
        justify-content: left;
    }

    .left-side-form h1{
        font-size: 2rem;
    }
    
    .left-side-form p{
        font-size: 1rem;
        width: 100%;
    }    

    .left-side-form .ixon-box{
        width: 100%;
    }

    .right-side-form{
        width: 100%;
    }

    #contact-form .form-input-col{
        flex-direction: column;
        gap: 2rem;
    }

    #contact-form #name-input{
        width: 100%;
    }

    #contact-form textarea{
        height: 100px;
    }    
    
    #contact-form button{ 
        width: 100%;
        height: 50px;
        font-size: 1rem;
    }
}



@media (min-width: 425px) and (max-width: 768px){

    .contact-form-row{
        padding: 2rem 0 2rem 0;
    }

    .contact-form-row .col-11{
        padding-top: 0;
        flex-direction: column;
    }

    .left-side-form{
        padding-top: 1rem;
        width: 100%;
        justify-content: left;
    }

    .left-side-form h1{
        font-size: 2rem;
    }
    
    .left-side-form p{
        font-size: 1rem;
        width: 100%;
    }    

    .left-side-form .ixon-box{
        width: 100%;
    }

    .right-side-form{
        width: 100%;
    }

    #contact-form .form-input-col{
        flex-direction: column;
        gap: 2rem;
    }

    #contact-form #name-input{
        width: 100%;
    }

    #contact-form textarea{
        height: 100px;
    }    
    
    #contact-form button{ 
        width: 100%;
        height: 70px;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 991.98px){

    .contact-form-row{
        padding: 2rem 1rem 2rem 1rem;
    }

    .contact-form-row .col-11{
        padding-top: 0;
        flex-direction: column;
    }

    .left-side-form{
        padding-top: 1rem;
        
        width: 100%;
        justify-content: left;
    }

    .left-side-form h1{
        font-size: 2.4rem;
    }
    
    .left-side-form p{
        font-size: 1.3rem;
        width: 100%;
    }    

    .left-side-form .ixon-box{
        width: 100%;
    }

    .right-side-form{
        width: 100%;
    }

    #contact-form .form-input-col{
        flex-direction: column;
        gap: 2rem;
    }

    #contact-form #name-input{
        width: 100%;
    }

    #contact-form textarea{
        height: 100px;
    }    
    
    #contact-form button{ 
        width: 100%;
        height: 70px;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (min-width: 991.98px) and (max-width: 1400px){

    .contact-form-row{
        padding: 2rem 1rem 2rem 1rem;
    }

    .contact-form-row .col-11{
        padding-top: 0;
        /* flex-direction: column; */
    }

    .left-side-form{
        padding-top: 1rem;
        /* width: 100%; */
        justify-content: left;
    }

    .left-side-form h1{
        font-size: 2.4rem;
    }
    
    .left-side-form p{
        font-size: 1.3rem;
        width: 100%;
    }    

    .left-side-form .ixon-box{
        width: 100%;
    }


    #contact-form .form-input-col{
        flex-direction: column;
        gap: 2rem;
    }

    #contact-form #name-input{
        width: 100%;
    }

    #contact-form textarea{
        height: 100px;
    }    
    
    #contact-form button{ 
        width: 100%;
        height: 70px;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}