#contact{
   background-image: url(../eMall-photo/contact.jpg);
}
#contact-details{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
#contact-details .details{
   width:40%;
}
#contact-details .details span{
   font-size: 12px;
}
#contact-details .details h2{
   font-size: 26px;
   line-height: 35px;
   padding:20px 0;
}
#contact-details .details h3{
   font-size: 16px;
   padding-bottom: 15px;
}
#contact-details .details li{
   list-style: none;
   display: flex;
   padding:10px 0;
}
#contact-details .details li i{
   font-size: 14px;
   padding-right: 22px;
}
#contact-details .details li p{
   margin:0;
   font-size:14px;
}
#contact-details .details a{
   text-decoration: none;
}
#contact-details .details a:hover{
   color:rgb(107, 46, 247);
}
#contact-details .details a:active{
   color:rgb(172, 104, 235);
}
#contact-details .map{
   width: 55%;
   height: 400px;
}
#contact-details .map iframe{
   width: 100%;
   height: 100%;
}
#form-details{
   display: flex;
   justify-content: space-between;
   margin:30px;
   padding:80px;
   border:1px solid rgb(177, 177, 177);
}
#form-details form{
   width: 65%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}
#form-details form span{
   font-size: 12px;
}
#form-details form h2{
   font-size: 26px;
   line-height: 35px;
   padding:20px 0;
}
#form-details form textarea,
#form-details form input{
   width: 100%;
   padding: 12px 15px;
   outline: none;
   margin-bottom: 20px;
   border:1px solid rgb(207, 207, 207);
}
#form-details form button{
   background-color: rgb(8, 125, 136);
   color:white;
}
.people-1{
   display:flex;
   overflow-x:auto;
   width:25%;
}
.profile-left,
.profile-right{
   padding-right: 50%;
}
.people-1 div{
   display:flex;
   flex-direction: column;
   padding-bottom: 15px;
   align-items: flex-start;
}
.people-1 div img{
   width: 65px;
   height: 65px;
   object-fit: cover;
   margin-right:15px;
   border-radius: 100%;
}
.people-1 div p{
   margin:0;
   font-size:13px;
   line-height: 25px;
   white-space: nowrap;
}
.people-1 div p a{
   text-decoration: none;
}
.people-1 div p a:hover{
   color:rgb(107, 46, 247);
}
.people-1 div p a:active{
   color:rgb(172, 104, 235);
}

.people-1 div p span{
   display: block;
   font-size:16px;
   font-weight:600;
   color:black;
}


@media (max-width:799px){
   #form-details {
     padding: 40px;
   }
   #form-details form{
      width: 50%;
   }
}
@media (max-width:477px){
   #contact-details{
      flex-direction: column;
   }
   #contact-details .details{
      width:100%;
      margin-bottom:30px;
   }
   #contact-details .map {
    width: 100%;
   }
   #form-details {
    margin: 10px;
    padding: 30px 10px;
    flex-wrap:wrap;
   }
   #form-details form {
    width: 100%;
    margin-bottom:30px;
   }
   .people-1{
      width:100%;
   }
   .profile-left,
   .profile-right{
      padding-right:30%;
   }
}