/* ==================================================
   CONTACT PAGE - Mobile First
================================================== */

/* ==================================================
   1. SECTION LAYOUT
================================================== */

.contact-section {
  text-align: center;
  padding-top: var(--space-xxxs);
}

.contact-inner {
  max-width: 700px;
  margin: 0 auto;
}

.contact-intro {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ==================================================
   2. FORM
================================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  text-align: left;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-group label {
  font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid transparent;
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: var(--color-text);
}

.form-group textarea {
  resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ==================================================
   3. FORM ACTIONS
================================================== */

.contact-form .btn {
  align-self: center;
  margin-top: var(--space-sm);
}

/* ==================================================
   4. FORM ANIMATION
================================================== */

.contact-form.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.contact-form.fade-up.animate {
  opacity: 1;
  transform: translateY(0);
}