/* 
/ Page: Contact
/ Project: HOA Auto import
/ --------------------------
/ Creator:  Sharia.Design 👽
/ Web: https://Sharia.Design/ 💻
/ year: 2021 ⏳
*/


/* Page: Contact */

.header {
  border-bottom: 1px solid var(--dark-3);
}

.page-contact {
  margin: 83px 0 0 0;
}

.main-contact {
  padding-top : 69px;
  padding-left: 69px;
  background  : var(--white);
}

.contact-top {
  margin         : 0;
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
}

.contact-title {
  margin     : 0;
  font-size  : 29px;
  color      : var(--dark);
  line-height: 146%;
}

.contact-top-txt {
  margin     : 0;
  font-size  : 14px;
  line-height: 146%;
  color      : var(--dark-2);
  width      : 38%;
}

.contact-container {
  margin-top     : 69px;
  width          : 100%;
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  overflow       : hidden;
}

.form-container {
  margin  : 0;
  padding : 0;
  width   : 50%;
  overflow: hidden;
}

.contact-info {
  margin  : 0;
  padding : 0;
  overflow: hidden;
}

/* Contact Form */

.contact-form-group {
  margin-bottom  : 22px;
  display        : flex;
  justify-content: flex-start;
  align-items    : flex-start;
  width          : 100%;
  text-align     : left;
}

.contact-label {
  margin       : 0;
  padding-right: 47px;
  display      : block;
  color        : var(--dark);
  font-size    : 14px;
  cursor       : pointer;
  width        : 29%;
}

.contact-label:hover {
  color: var(--blue)
}

.contact-input-container .select {
  width: 300px;
}

.contact-input-container .hoa-input {
  width: 300px;
}

.contact-input-container {
  position: relative;
}

.contact-body {
  font-size  : 13px !important;
  line-height: 22px;
  font-weight: lighter !important;
  max-width  : 300px;
}

.btn-contact-send {
  margin               : 0 auto;
  padding              : 0 22px;
  float                : none;
  height               : 47px;
  outline              : none;
  border               : none;
  cursor               : pointer;
  text-align           : center;
  font-size            : 14px;
  font-weight          : bold;
  color                : var(--white);
  background           : var(--blue);
  will-change          : transform;
  border-radius        : 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius   : 5px;
  -ms-border-radius    : 5px;
  -o-border-radius     : 5px;
}

.contact-send {
  margin-left   : 11px;
  vertical-align: middle;
  background    : url(../icons/arrow-send.svg);
  width         : 22px;
  height        : 22px;
}

.btn-contact-send:hover {
  background: var(--black);
}

.btn-contact-send:active {
  background       : var(--dark);
  transform        : scale(.98);
  -webkit-transform: scale(.98);
  -moz-transform   : scale(.98);
  -ms-transform    : scale(.98);
  -o-transform     : scale(.98);
}

.hoa-asterix {
  position  : absolute;
  bottom    : 4px;
  right     : 2px;
  font-size : 18px;
  color     : var(--dark-2);
  font-style: normal;
}

/* #end Contact Form */

/* Info Box */
.contact-info {
  margin    : 0;
  padding   : 47px 69px 47px 38px;
  width     : 38%;
  background: var(--gray-f6);
  overflow  : hidden;
}

.contact-info--title {
  margin     : 0;
  font-size  : 16px;
  font-weight: bold;
  columns    : var(--black);
}

.contact-info--list {
  margin-top: 29px;
  width     : 100%;
}

.contact-info--item {
  margin-bottom  : 22px;
  display        : flex;
  justify-content: flex-start;
  align-items    : flex-start;
}

.contact-info--item:last-child {
  margin-bottom: 0;
}

.contact-info--icon {
  margin-right: 11px;
}

.c-info--icon {
  display          : block;
  width            : 29px;
  height           : 29px;
  background-repeat: no-repeat;
}

.c-info-icon--pin {
  background: url(../icons/map-gray.svg);
}

.c-info-icon--phone {
  background: url(../icons/phone-gray.svg);
}

.c-info-icon--email {
  background: url(../icons/envelope-gray.svg);
}

.c-info-icon--clock {
  background: url(../icons/clock-gray.svg);
}

.c-info--title {
  margin   : 0;
  font-size: 14px;
  color    : var(--dark);
}

.c-info--txt {
  margin   : 4px 0 0 0;
  font-size: 14px;
  color    : var(--dark);
}

/* #end Info Box */

.contact-hr {
  margin-top   : 69px;
  width        : calc(100% - 69px);
  border       : 1px solid var(--dark-2);
  clear        : both;
  border       : 0;
  border-bottom: 1px solid var(--dark-2);
  background   : var(--dark-3);
}

.map-container {
  margin     : 0;
  padding-top: 47px;
  width      : 100%;
  background : var(--white);
  overflow   : hidden;
}

.map-title {
  text-align: center;
  font-size : 29px;
  color     : var(--dark);
}

.map-title span {
  color: var(--blue);
}

#map {
  margin-top: 29px;
  width     : 100%;
  overflow  : hidden;
}

.map--iframe {
  margin : 0;
  padding: 0;
  width  : 100%;
  height : 330px;
}

/* #end Page: Contact */


@media all and (max-width: 1200px) {
  .main-contact {
    padding-top: 38px;
    padding-left: 22px;
    padding-right: 22px;
  }
  .contact-form-group,
  .contact-top {
    flex-direction: column;
  }
  .btn-contact-send,
  .form-container,
  .contact-info,
  .contact-top-txt {
    width: 100%;
  }
  .contact-container {
    margin-top: 29px;
    width: 100%;
    flex-direction: column-reverse;
    justify-content: flex-start;
  }
  .contact-top-txt {
    margin-top: 11px;
  }
  .form-container {
    margin-top: 22px;
  }
  .contact-label {
    margin-bottom: 5px;
  }

}