*{
    margin: 0;
    padding: 0 auto;
 }
 
 /* GENERAL */

 bg-brown{
   background: #1A1406;
 }

 .logo{
   width: calc(170px + 1vw);
   height: auto;
   margin: 0 auto;
   padding: 15px 15px;
   filter: drop-shadow(0 0 1px #f3f700);
}
 

 /* CONTACT */

#contact{
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 70vh;
   background: #fff;
   padding-top: 50px;
   padding-bottom: 200px;
}

/* #contact::before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: 50%;
   background: #fff38e;
} */

.contain{
   position: relative;
   min-width: 1100px;
   min-height: 550px;
   display: flex;
   z-index: 998;
}

 .contactinfo{
   position: absolute;
   top: 40px;
   color: #fff;
   width: 350px;
   height: calc(100% - 80px);
   background: #095a55;
   z-index: 1;
   padding: 40px;
   display: flex;
   justify-content: center;
   flex-direction: column;
   justify-content: space-between;
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
   overflow: hidden;
 }

 .contactinfo h2{
    color: #fff;
    font-size: 24px;
    font-weight: 500;
 }

 .info{
   position: relative;
   margin: 20px 0;
 }

.info li{
   position: relative;
   list-style: none;
   display: flex;
   margin: 20px 0;
   cursor: pointer;
   align-items: flex-start;

}
 
.info li span:nth-child(1){
   color: #fff;
   width: 30px;
   min-width: 30px;
}

.info li span:nth-child(1) img{
   max-width: 100%;
   filter: invert(1);
   opacity: 0.5;
}

.info li span:nth-child(2){
   color: #fff;
   margin-left: 10px;
   font-weight: 300;
   opacity: 0.5;
}

.info li:hover span:nth-child(1) img, .info li:hover span:nth-child(2){
   opacity: 1;
}

.sci{
   position: relative;
   display: flex;
}

.sci li{
   list-style: none;
   margin-right: 15px;
}

.sci li a{
   text-decoration: none;
}

.sci li a img{
   filter: invert(1);
   opacity: 0.5;
}

.sci li:hover a img{
   opacity: 1;
}

.contact-form{
   position: absolute;
   padding: 70px 50px;
   background: #fff;
   margin-left: 250px;
   padding-left: 150px;
   width: calc(100% - 150px);
   height: 100%;
   box-shadow: 0 50px 50px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-form h2{
   color: #0f3959;
   font-size: 24px;
   font-weight: 500;
}

.form-box{
   position: relative;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   padding-top: 30px;
}

.input-box{
   position: relative;
   margin-bottom: 35px;
}

.input-box.w50{
   width: 47%;
}

.input-box.w100{
   width: 100%;
}

.input-box input, .input-box textarea{
   width: 100%;
   padding: 5px 0;
   resize: none;
   font-size: 18px;
   font-weight: 300;
   color: #333;
   border: none;
   border-bottom: 1px solid #777;
   outline: none;
}

.input-box textarea{
   min-height: 120px;

}

.input-box span{
   position: absolute;
   left: 0;
   padding: 5px 0;
   font-size: 18px;
   font-weight: 300;
   color: #333;
   transition: 0.5s;
   pointer-events: none;
}

.input-box input ~ span, .input-box textarea ~ span,
.input-box input ~ span, .input-box textarea ~ span{
   transform: translateY(-21px);
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 1.5px;
   color: #1A1406;
} 

.input-box input:focus ~ span, .input-box textarea:focus ~ span{
   transform: translateY(-25px);
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 1.5px;
   color: #ff568c;
} 

.input-box input[type="submit"]{
   position: relative;
   cursor: pointer;
   background: #095a55;
   color: #fff;
   border: none;
   max-width: 150px;
   padding: 12px;
}

.input-box input[type="submit"]:hover{
   background: #0d948b;
}

@media (max-width : 1200px){
   .contain{
      width: 90%;
      min-width: auto;
      margin: 20px;
      box-shadow: 0 20px 50 px rgba(0, 0, 0, 0.2);
   }
   .contain .contactinfo{
      top: 0;
      /* height: 500px; */
      position: relative;
      box-shadow: none;
   }

   .contain .contact-form{
      position: relative;
      width: calc(100%-350px);
      padding: 40px;
      height: 550px;
      margin-left: 0;
      margin-right: 0;
      box-shadow: none;
   }
}

@media (max-width: 991px){

   .contain{
      display: flex;
      flex-direction: column-reverse;
   }
   .contain .contactinfo{
      width: 100%;
      height: auto;
   }
   .contain .contact-form{
      width: 100%;
      height: auto;
      flex-direction: row;
   }
   .sci{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
   }
}

@media(max-width: 600px){

   .contain .contact-form{
      padding: 25px;
      height: calc(100% + 450px);
   }
   .contain .contactinfo{
      padding: 25px;
      flex-direction: column;
      align-items: flex-start;
   }
   .sci{
      margin-top: 40px;
   }
   .input-box.w50{
      width: 100%;
   }
}