:root{

}


#contact-container{
    min-height: 100vh;
}

#contact-behind-cover{
    height: 100vh;
    background-color: var(--site-primary-second-der);

}

#contact-parts-container{
    min-height: 50vh;
    backdrop-filter: blur(7px) brightness(.95);
    border-radius: 35px 35px 30px 30px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

#contact-part-one{
    margin-top: 60px;
    border-radius: 25px;
    background-color: white;
    box-shadow: var(--default-shadow);
}

.contact-us-title{

}

.contact-us-description{

}

#wave-image-contactus-1, #wave-image-contactus-2{
    bottom: 0;
    width: 120%;
    transform: translateX(-50%) rotate(180deg);
}



#index-contactus-container{
    height: 900px !important
}

#index-contactus-main{
    border-radius: var(--default-border-radius);
    box-shadow: var(--default-shadow);
    margin-top: 60px !important;
    height: 650px;
}

#index-contactus-form{
    border-radius: var(--default-border-radius);
}

.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-primary)
}
.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);
}


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: 100%;

        height: 750px;
    }
    #index-contactus-form{
        width: 90%;
    }
}

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

    #index-contactus-main{
        justify-content: flex-start;
        align-items: start;
        flex-direction: column !important;
        flex-wrap: wrap;

        height: 1150px;
    }
    #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: 500px){

    #contact-parts-container{
        width: 100%;
    }

    #index-contactus-details .vi-mi-title{
        padding: 10px 0px 10px 0px !important;
    }

    #index-contactus-container{
        height: 1600px !important
    }

    #index-contactus-main{
        justify-content: flex-start;
        align-items: start;
        flex-direction: column !important;
        flex-wrap: wrap;

        height: 1150px;
    }
    #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%;
    }
    #contact-parts-container{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


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

    .contact-us-description{
        font-size: 14px;
    }

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

    #wave-image-contactus-1, #wave-image-contactus-2{
        width: 190%;
    }

}