/* ============================================================
   CONTACT page (.page-contact) and 404 page (.page-notfound)
   Layout only. Colors, fonts, buttons, borders and section
   backgrounds come from iqup.css.
   ============================================================ */

/* ---------- Contact: info box ---------- */

/* logo and company name sit above the phone number */
.page-contact .contact .info-box .info-logo img {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
}

/* social icons: keep the round buttons on one line with a small gap */
.page-contact .contact .info-box .social-icon {
  display: flex;
  gap: 10px;
}

/* ---------- Contact: form validation messages ---------- */

/* line the validator's message up with the text inside the rounded field (inputs have 30px side padding) */
.page-contact .contact .form2 .help-block.with-errors {
  padding: 0 30px;
}

/* AJAX result box: same edges and 30px gap as the fields below it
   (the template's 15px column padding inside a row with -12px margins sets the fields 3px in) */
.page-contact .contact .form2 .messages .alert {
  margin: 0 3px 30px;
}

/* ---------- Contact: map ---------- */

.page-contact .google-map iframe {
  border: 0;
  display: block;
}

/* ---------- Contact: narrow phones ---------- */

@media (max-width: 575px) {
  /* the template's 40px side padding leaves too little room for the phone number */
  .page-contact .contact .info-box {
    padding: 60px 25px;
  }
  .page-contact .google-map {
    height: 360px;
  }
}

/* ---------- 404 ---------- */

/* taller video band so the 404 message fills the first screen */
.page-notfound .page-header-video {
  min-height: 80vh;
}