/* ===================== Contact Us ===================== */
.contact-head { padding: 27px 0 47px; text-align: center; color: var(--ink-2); }
.contact-head h1 { padding-bottom: 10px; font-size: 64px; font-weight: 700; line-height: 96px; }
.contact-sub { margin-top: 8px; padding-bottom: 10px; font-size: 22px; font-weight: 500; line-height: 33px; }

.contact-body { background: #f4f4f4; padding: 81px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
.contact-card { padding: 30px 50px 0; border: 1px solid #dbdbdb; border-radius: 5px; color: var(--ink-2); }
.contact-icon { width: 50px; height: auto; }

.contact-title { margin-top: 30px; font-size: 26px; font-weight: 700; line-height: 41.6px; }
@media (min-width: 1280px) {
  .contact-title span { display: block; max-width: 80%; }
}

/* opening hours */
.timing { margin: 20px 0 16px; padding: 0 0 23px 16px; }
/* inline-block items with the icon inline in the text, so two short items can share a line (as live) */
.timing li { display: inline-block; margin-right: 8px; font-size: 15px; line-height: 26px; }
.timing li:last-child { margin-right: 0; }
.timing li img { display: inline; width: 22px; vertical-align: -4px; }
.timing b { display: inline-block; margin-left: 5px; font-weight: 400; color: var(--orange); }

/* phone / email / social */
.reachout { padding-top: 30px; }
.reachout h3 { margin-bottom: 15px; padding-bottom: 10px; font-size: 26px; font-weight: 700; line-height: 31.2px; }
.reachout ul { display: flex; flex-wrap: wrap; align-content: center; }
.reachout li { display: inline-flex; align-items: center; font-size: 14px; line-height: 26px; }
.reachout li:first-child { padding-right: 35px; }
.reachout li img { max-width: 20px; margin-right: 5px; }
.reachout a { color: var(--orange); }
.social-boxes.tight { gap: 4px; margin-top: 2px; justify-content: flex-start; }
.reachout .social-boxes a { color: #000000; }
.reachout .social-boxes a:hover { color: var(--orange); }

/* form */
.short-info { margin-top: 18px; font-size: 14px; line-height: 22.4px; }
.contact-form { margin-top: 16px; padding-bottom: 76px; }
.contact-form button[type="submit"] { margin-top: 42px; }

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .contact-head { padding: 30px 0 50px; }
  .contact-head h1 { font-size: 34px; line-height: 51px; }
  .contact-sub br { display: none; }
  .contact-body { padding: 80px 0; }
  .contact-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .contact-card > :not(form) { max-width: 550px; margin-left: auto; margin-right: auto; }
  .contact-card > .contact-icon { margin-left: calc(50% - 275px); }
  .contact-card:first-child { padding-bottom: 87px; }
  .contact-form { margin-top: 30px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .contact-head h1 { font-size: 25px; line-height: 37.5px; }
  .contact-sub { font-size: 18px; line-height: 27px; }
  .contact-card { padding: 20px 20px 0; }
  .contact-card > .contact-icon { margin-left: 0; }
  .contact-title { font-size: 20px; line-height: 32px; }
  .contact-card:first-child { padding-bottom: 54px; }
  .contact-form { padding-bottom: 69px; }
}
@media (max-width: 580px) {
  .reachout li:first-child { margin-bottom: 10px; }
}