.contact-title{
  
    color:#fff;
    opacity: .8;
}

.contact-title h2{
    font-weight:normal;
    padding:20px;
    letter-spacing: 1.6px;

}
.contact{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container{
    display:flex;
}
.contact{
    flex:1;
    max-width:500px;
    color:ghostwhite;
    text-shadow:2px 2px rgba(0,0,0,0.8);
}
.contact p{
    margin:10px 0px;
    text-align: center;
    padding:10px;
}
form{
box-shadow:2px 2px 4px rgba(0,0,0,0.8);
display:flex;
flex-direction:column;
color:ghostwhite;
margin-right:100px;
   width:700px;
   margin-bottom:20px;

}
.container-form,
.cont{
  
padding:20px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
label{
    margin-left:20px;
    text-align:center;
    font-size:12px;
}
input,
textarea{
    outline:none;
    border:none;
    margin-top:10px;

    padding:10px;
    border:none;
     border-bottom:1px solid black;
    font-size:14px;
    margin-left:20px;

}
input[type="submit"]{
    width:30%;
    margin-bottom:30px;
    background-color:blue;
    margin-left:70px;
    color:#fff;
    border-radius: 3px;
}
textarea{
    margin-bottom:10px;
    width:90%;
  
}
.errors{
    text-align:center;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:10px;
}

@media only screen and (max-width: 768px){
           .container{
          
            display:block;
           }
           .cont{
            display:block;
    
           }
              input[type="submit"]{
                width:50%;
              }
           label{
      display:block;
      margin-left:-80px;
           }
           .container form{
            display:block;
            margin-left:30px;
           }
     
 form{
    
   width:80%;
 }
 .contact-title{
    text-align:center;
 }

}