#contact{
  display: flex;
  margin-bottom:100px;
  justify-content: center;
}

#contact .bg-overlay{
  max-width:750px;
  width:100%;
  height:750px;
  margin-right:50px;
  border-radius:0 50px 50px 0;
  overflow: hidden;
}

#contact .bg-image{
  background-image: url( '../images/contact/bg_contact.png' );
  background-size: cover;
  background-position: center;
  width:100%;
  height:100%;
}

#contact .right-col{
  padding-top:23px;
  padding:23px 20px 0 0;
  max-width:655px;
  width:100%;
}

#contact .title{
  font-size:61px;
}

#contact .content{
  font-size:16px;
  margin-bottom:24px;
}

#contact .form-control{
  padding:14px 20px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  margin-bottom:12px;
}

#contact .form-control label{
  display: flex;
  flex-direction: column;
  font-size:12px;
  font-family: 'Clash Display';
}

#contact .form-control input,
#contact .form-control textarea{
  border:none;
  outline: none;
  font-size:16px;
  font-family:'Satoshi';
  background-color: transparent;
}

::placeholder{
  color:#CACACA;
  font-family:"Satoshi";
}

#contact .form-control textarea{
  min-height:110px;
}

#contact form{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#contact .red-submit{
  padding:12px 60px;
  border-radius: 12px;
  background-color:#F25749;
  border:none;
  color:white;
  font-family:"Satoshi";
  cursor: pointer;
  align-self: flex-end;
  font-size:16px;
}

#contact .checkbox-container{
  margin-bottom:12px;
}

#contact .checkbox label{
  cursor: pointer;
}

input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  min-width:24px;
  min-height:24px;
  width:24px;
  height:24px;
  background-color:#ffffff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  cursor: pointer;
  border-radius: 5px;
  margin-right:8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:7px 6px;
  outline: none;
}

input[type="checkbox"]::after{
  content:'';
  background-image:url( '../images/common/ico_checkbox.svg' );
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  width:100%;
  height:100%;
  display: none;
}

input[type="checkbox"]:checked{
  background-color:#F25749;
}

input[type="checkbox"]:checked:after{
  display: block;
}




#contact .checkbox-container p{
  font-size:20px;
  margin-bottom:8px;
}

#contact .checkbox-container .flex{
  display: flex; 
  flex-wrap:wrap;
}

#contact .checkbox-container .checkbox{
  max-width:180px;
  width:100%;
  margin:0 20px 12px 0;
  display: flex;
  align-items: flex-start; 
}

#map-section{
  margin-bottom:80px;
}

#map-section .title{
  font-size:49px;
  margin-bottom:4px;
}

#map-section .content{
  margin-bottom:12px;
}

#map-section .location-container{
  margin-bottom:16px;
}

#map-section .map-container{
  border-radius: 50px;
  overflow: hidden;
}

#map-section .map{
  width:100%
}

#map-section .location{
  display: flex;
  align-items: flex-start;
}

#map-section .location .iconify{
  margin-right:5px;
  min-width:16px;
  min-height:16px;
}

#map-section .location .address{
  font-weight:700;
  font-size:18px;
}

@media( max-width:768px ){
  #contact{
    flex-direction: column;
    margin-bottom:60px;
  }

  #contact .bg-overlay{
    height:258px;
    margin-bottom:40px;
    max-width:100%;
  }

  #contact .right-col{
    max-width:708px;
    width:100%;
    padding:0 20px;
    margin: auto;
  }

  #map-section{
    max-width:708px;
    padding:0 20px;
    margin: auto auto 40px auto;
  }
}

@media( max-width:480px ){
  
  #contact{
    margin-bottom:20px;
  }

  #contact .bg-overlay{
    height:150px;
    margin-bottom:20px;
  }

  #contact .form-control{
    padding:10px 15px;
  }

  #contact .title,
  #map-section .title{
    font-size:25px;
  }

  #contact .checkbox-container p{
    font-size:18px;
  }

  #contact .content,
  #contact form label,
  #map-section .content{
    font-size:16px;
  }

  #map-section .map-container,
  #map-section .map{
    height:200px;
  }


}