/* =====================
   Contact Page Styles
   ===================== */

   #contact {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
  }

.contact-form-page {
  max-width: 1140px;
  margin: 4rem auto;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background-color: var(--lightest-grey);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.contact-form-information {
  flex: 1 1 300px;
  background-color: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-form-address img {
  max-width: 150px;
  margin-bottom: 1rem;
}

.contact-form-address strong {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-family: var(--header-font);
  color: var(--forest-green);
}

.contact-form-phone a {
  font-size: 1.25rem;
  font-weight: bold;
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent-orange);
}

.contact-form-hours {
  margin-top: 2rem;
}

.contact-form-hours-header {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--forest-green);
  font-size: 1rem;
}

.contact-form-hours-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.contact-form-footer {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--dark-grey);
}

.contact-form-footer span {
  display: block;
  margin-top: 0.5rem;
}

.contact-form-holder {
  flex: 1 1 500px;
  background-color: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-form-header {
  font-size: 1.5rem;
  font-family: var(--header-font);
  color: var(--forest-green);
  margin-bottom: 1.5rem;
}

.contact-form-select select,
.contact-form-input input,
.contact-form-textarea textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  font-size: 1rem;
  font-family: var(--body-font);
}

.contact-form-textarea textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form-submit button {
  background-color: var(--forest-green);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border: none;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form-submit button:hover {
  background-color: #043b01;
  transform: translateY(-2px);
}

/* Recaptcha styling */
.contact-us-recaptcha {
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .contact-form-page {
    flex-direction: column;
    padding: 1rem;
  }

  .contact-form-information,
  .contact-form-holder {
    padding: 1.5rem;
  }
}