.contact-container{
min-height:50vh;
width: 100%;
max-width:1300px;
margin: 0 auto;
padding:50px 0;
 
}
.contact-box{
    /* border: 1px solid crimson; */
    padding:30px 0;
}

.upper-contact{
    /* border: 1px solid green; */
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap:10px;
    margin-top:100px;
} 

.upper-contact-unit{
border: 1px solid rgba(128, 128, 128, 0.493);
width: 300px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
padding:10px;
display: flex;
gap:20px;
align-items: center;
/* cursor: pointer; */
transition: all 400ms ease-in-out;
}
.uc-icon{
    background-color: var(--color-secondary);
    padding:10px;
    border-radius: 50%;
    color: white;
}
.uc-text{
    display: flex;
    flex-direction: column;
    justify-content:center;
}

.lower-contact{
    /* border: 1px solid green; */
    margin-top:100px;
}
.lower-contact img{
    width: 100%;
    max-width:500px;
}
.contact-form-box{
    /* border: 1px solid orange; */
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
  
}

.form-box{
border: 1px solid rgba(128, 128, 128, 0.462);
display: flex;
flex-direction:column;
justify-content:center;
gap:25px;
width:100%;
height: 470px;;
max-width:450px;
margin-top:30px;
margin-bottom: 10px;

z-index: 3;
background-color:white;
/* justify-content:center; */
padding:15px;
border-radius:5px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);


}
.form-box h2{
    color: var(--color-secondary);
}
.form-box form{
    display: flex;
    flex-direction:column;
    gap:5px;
}

.form-box input, .form-btn{
    padding:10px 20px;
    width: 100%;
    max-width:300px;
    /* background-color:var(--color-secondary); */
    cursor: pointer;
    
}
.form-btn{
    background-color: var(--color-primary);
    color: white;
    letter-spacing:1.5px;
    text-transform:uppercase;
    border: none;
    transition: all 400ms ease-in-out;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    
}
.form-box textarea{
    width: 80%;
    max-width:300px;
}
.form-image{
    background-color: var(--color-primary);
}

.form-image-lg{
display: none;
    
}
.form-image-sm{

  display:block;  
}
/* .form-btn{
    border: 2px solid crimson;
    width: 100%;
    max-width:300px
} */


@media only screen and (min-width: 900px) {

    .form-box{
        margin-right: -50px;
    }

    .upper-contact-unit:hover{

        transform:translateY(-5px)
    }

    .form-btn:hover{
background-color:var(--color-secondary);
transform:translateY(-3px);


    }

    .form-image-lg{
        display: block;
            
        }
        .form-image-sm{
        
          display:none;  
        }



}