/**
 * Contact Us page.
 *
 * A verbatim port of sections/contact-info.liquid.
 *
 * The hero is in page-hero.css, shared with the About page. The certifications
 * and testimonials further down are homepage sections whose CSS already ships
 * in style.css, so neither is repeated here.
 *
 * Loaded only on this page, per the per-page CSS rule.
 * Depends on tokens.css and base.css.
 *
 * @package maaz-dev
 */


.contact-page { padding: 64px 0; background: #FFFFFF; }
.contact-page__inner {
  max-width: 1100px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start;
}

.contact-page__form-title, .contact-page__info-title {
  font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #111111; margin: 0 0 24px;
}

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.contact-form__field label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #333333; }
.contact-form__field input, .contact-form__field textarea {
  padding: 12px 14px; border: 1.5px solid #E0E0E0; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: #111111; outline: none; resize: vertical; transition: border-color 0.15s ease;
}
.contact-form__field input:focus, .contact-form__field textarea:focus { border-color: #8B0000; }

.contact-form__submit {
  align-self: flex-start; padding: 13px 32px; background: #8B0000; color: #FFFFFF; border: none; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.18s ease;
}
.contact-form__submit:hover { background: #6B0000; }

.contact-form__success { padding: 14px 16px; background: #F0FFF0; color: #1B5E20; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; }
.contact-form__error { padding: 14px 16px; background: #FBEAEA; color: #8B0000; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; }

.contact-info-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.contact-info-item {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif; font-size: 14.5px; color: #444444; text-decoration: none;
}
a.contact-info-item:hover { color: #8B0000; }

.contact-faq { padding-top: 24px; border-top: 1px solid #EEEEEE; }
.contact-faq__title { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: #111111; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.contact-faq__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-faq__link { font-family: 'Inter', sans-serif; font-size: 14px; color: #666666; text-decoration: none; }
.contact-faq__link:hover { color: #8B0000; }

@media screen and (max-width: 900px) {
  .contact-page__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media screen and (max-width: 480px) {
  .contact-page { padding: 44px 0; }
  .contact-page__inner { padding: 0 20px; }
  .contact-form__row { grid-template-columns: 1fr; }
}