/* ================================
   Contact Section
================================ */

.contact-content {
  background: #f6f9fe;
}


/* ================================
   Contact Layout
================================ */

.contact-panel {
  margin: 0;

  padding:
    3rem
    3rem
    3.25rem;

  border-radius: 24px;

  background: #ffffff;

  box-shadow:
    0 24px 60px rgba(17, 17, 17, 0.07),
    0 8px 24px rgba(17, 17, 17, 0.04);
}


/* ================================
   Contact Form
================================ */

.contact-form {
  width: 100%;
}

.form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 1.5rem;

  width: 100%;

  margin-bottom: 1rem;
}

.form-row {
  width: 100%;

  margin-bottom: 1rem;
}

.form-row label {
  display: block;

  margin: 0 0 0.5rem;

  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #32279d;
}

.form-row input,
.form-row textarea {
  display: block;

  width: 100%;

  padding: 1rem;

  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 12px;

  background: #ffffff;

  color: #363636;

  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;

  box-sizing: border-box;

  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    background-color 200ms ease;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;

  border-color: #6f63d8;

  box-shadow:
    0 0 0 4px rgba(111, 99, 216, 0.10);
}

.form-row textarea {
  min-height: 160px;

  resize: vertical;
}


/* ================================
   Submit Button
================================ */

.contact-form .btn {
  width: fit-content;

  min-width: 180px;

  margin-top: 0.5rem;
}

.contact-form .btn.success {
  background: #1d7f39;

  border-color: #1d7f39;
}


/* ================================
   Success Message
================================ */

.form-success {
  display: none;

  margin-top: 1rem;

  padding:
    1rem
    1.25rem;

  border: 1px solid #b7e7c5;
  border-radius: 12px;

  background: #e7f8ec;

  color: #146c2e;

  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
}

.form-success.show {
  display: block;

  animation:
    successFade
    350ms
    ease;
}

@keyframes successFade {

  from {
    opacity: 0;

    transform: translateY(-4px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }

}


/* ================================
   Honeypot
================================ */

.form-honeypot {
  position: absolute;

  left: -9999px;

  width: 0;
  height: 0;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;
}


/* ================================
   Contact Methods
================================ */

.contact-methods {
  display: flex;
  flex-direction: column;

  gap: 1.5rem;
}

.contact-label {
  margin: 0 0 0.5rem;

  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #32279d;
}

.contact-method a {
  font-size: 1rem;
  font-weight: 500;

  color: #363636;
}

.contact-method a:hover {
  color: #32279d;
}


/* ================================
   Contact Spacing
================================ */

.page-hero.contact-hero {
  margin-bottom: 0;
}

.contact-hero .page-wrap {
  padding-bottom: 1rem;
}

.contact-content .page-wrap {
  padding-top: 0;
  padding-bottom: 4rem;
}


/* ================================
   Mobile
================================ */

@media (max-width: 767px) {

  .contact-panel {
    padding:
      1.5rem
      1.25rem
      1.75rem;

    border-radius: 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;

    gap: 0;
  }

  .contact-form .btn {
    width: fit-content;
  }

  .contact-content .page-wrap {
    padding-bottom: 3rem;
  }

}