/* ===========================
   CONTACT US PAGE
   =========================== */

.main {
  grid-area: main;
}

/* Container for contact section using grid layout */
.contact-wrapper {
  display: grid;
  grid-template-areas:
    "title title"
    "info form"
    "submit submit";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr min-content;
  /*padding: 40px;*/
  padding: 10px 120px;
  background-color: white; /*#fdf0de*/
  justify-items: center;
  align-items: center;
  max-width: 100%;
}

/* Contact page title styling */
.contact-title {
  grid-area: title;
  text-align: center;
  color: black;
}

/* Container for the inquiries form */
.form-text {
  grid-area: form;
  width: 100%;
  margin: auto;
}

/* Style for the inquiry text inside the form */
.form-text textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  border: 2px solid #ccc;
  border-radius: 6px;
  background-color: #ffe5a7;    
  color: black;
  box-sizing: border-box;
  transition: background-color 0.2s ease,
              border-color 0.2s ease;
  min-height: 150px;             
}

.form-text textarea:focus {
  outline: none;
  border-color: #E69D00;
}

/* Container for contact info section */
.contact-info {
  grid-area: info;
  padding: 10px;
}

/* ===========================
   MOBILE LAYOUT ADJUSTMENTS (LESS THAN 768px)
   =========================== */
@media (max-width: 768px) {

  /* Stacks the contact-wrapper section vertically on mobile */
  .contact-wrapper {
    grid-template-areas:
      "title"
      "info"
      "form"
      "submit";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 20px 20px;
  }

}