@import url(variables.css);

:root{

}


#index-contactus-container{
    height: 1000px;
    border-bottom: 4px solid var(--site-primary);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.84), rgba(1, 87, 161, 0.24));
}



#index-contactus-main{
    margin-top: 0px;
    border-radius: 20px;
    box-shadow: var(--bs-box-shadow-lg);
    backdrop-filter:  blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

#index-contactus-form{
    box-shadow: var(--bs-box-shadow-lg);
    width: 400px !important;
    border-radius: 20px;
    padding: 40px 35px 30px 35px;
}

.main-socials-container{
    visibility: visible ;
}

.index-form-input{
    background-color: var(--site-tertiary-second-der);
    color: var(--site-primary);
    resize: none;
    /*border-radius: 10px;*/
}
.index-form-input::placeholder{
    color: var(--site-primary)
}

.index-form-input:focus{
    background-color: var(--site-tertiary-second-der);
    color: var(--site-tertiary);
}
.index-form-input:focus::placeholder{
    color: var(--site-primary)
}

.form-button{
    background-color: var(--site-tertiary-second-der);
    color: var(--site-primary);
    border-radius: 10px;
}

.form-button:hover,.form-button:focus{
    background-color: var(--site-tertiary-second-der);
    color: var(--site-primary);
}

.contact-icon-brands:hover{
    background-color: var(--site-secondary);
}

.form-inputs::placeholder,.form-textarea::placeholder {
    color: var(--site-tertiary) !important;
}

.form-inputs{
    padding: 12px 18px !important;
}
.form-textarea{
    padding: 12px 18px 12px 18px !important;
}

.form-labels{
    color: var(--site-tertiary) !important;
}

/*input::placeholder, textarea::placeholder{*/
/*    color: var(--site-primary) !important;*/
/*}*/

@media screen and (min-width:  1400px) and (max-width: 1650px){
    #index-contactus-form{
        width: 80%;
    }
}

@media screen and (min-width:  1100px) and (max-width: 1399px){
    #index-contactus-main{
        width: 90%;
    }
    #index-contactus-form{
        width: 75%;
    }
}

@media screen and (min-width:  900px) and (max-width: 1099px){
    #index-contactus-main{
        width: 90%;
    }
    #index-contactus-form{
        width: 90%;
    }
}

@media screen and (min-width:  0px) and (max-width: 899px){
    #index-contactus-container{
        height: 1500px !important;
    }

    #index-contactus-main{
        justify-content: flex-start;
        align-items: start;
        flex-direction: column !important;
        flex-wrap: wrap;
        height: 88% !important;
    }
    #index-contactus-main #index-contactus-details{
        width: 100%;
        height: 50% !important;
    }

    #index-contactus-main #index-contactus-form-container{
        width: 100%;
        height: 50% !important;

    }
    #index-contactus-form{
        height: 95%;
    }
    #index-contactus-main{
        width: 90%;
    }
    #index-contactus-form{
        width: 90%;
    }

}

@media screen and (min-width:  0px) and (max-width: 649px){

    #index-contactus-details{
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    #index-contactus-main{
        width: 100%;
        border-radius: var(--default-radius);
    }
    .main-socials-container{
        visibility: visible  !important;
    }
    #index-contactus-details .vi-mi-title{
        padding: 10px 0px 10px 0px !important;
    }
    .contact-us-description{
        font-size: 14px;
    }

    .contact-text{
        font-size: 22px !important;
    }
    .contact-info{
        font-size: 14px ;
    }


    .phone-number, .email-address, .location-address{
        width: 95%;
    }


}




/* this part is regarding the height of the screen, and should not leave a certain height */
@media screen and (min-height: 0) and (max-height: 670px){
    #index-contact-container{
        height: 1000px;
    }
}