body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #e6f7ff; /* light blue page background */
    color: #000000;
} 
main.contact-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  /* Use explicit margin for top/bottom separation */
  margin: 2.5rem auto 3rem auto; 
  padding: 2rem 2.25rem;
  border: 2px solid #7cb0e3; /* Main border color */
  border-radius: 12px;
  background-color: #f0f8ff; /* Form background color */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* === Headings === */
main.contact-container h1 {
  text-align: center;
  margin-bottom: 0.75rem;
  color: #003366; /* Deep navy color */
  font-size: 1.75rem;
}

main.contact-container .note {
  text-align: center;
  color: #333;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* === Form Layout (Desktop Base) === */
main.contact-container form {
  display: flex;
  flex-direction: column;
}

/* DESKTOP VERTICAL SPACING: Apply margin-bottom to separate major form blocks */
main.contact-container form > *:not(.actions) {
    margin-bottom: 1.5rem;
}

/* Rows for side-by-side fields on desktop */
main.contact-container .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0; /* Reset row margin */
}

main.contact-container .field {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  margin: 0; 
}

/* DESKTOP HORIZONTAL SPACING: Use margin-right to separate the two fields in the row */
main.contact-container .row .field:first-child {
    margin-right: 1.5rem;
}

/* Reset horizontal margin on the last field */
main.contact-container .row .field:last-child {
    margin-right: 0;
}

/* === Labels === */
main.contact-container label {
  font-weight: 600;
  color: #003366;
  margin-bottom: 0.35rem; /* Small space between label and input */
}

/* === Inputs, selects, textareas === */
main.contact-container input,
main.contact-container select,
main.contact-container textarea {
  width: 100%;
  border: 2px solid #cce6ff;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 1rem;
  background-color: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin: 0; /* Ensure no residual margin */
}

/* Focus states */
main.contact-container input:focus,
main.contact-container select:focus,
main.contact-container textarea:focus {
  border-color: #007acc;
  box-shadow: 0 0 6px rgba(0, 122, 204, 0.3);
  outline: none;
}

/* Textarea styling */
main.contact-container textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.5;
}

/* === Actions === */
.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* GAP REMOVED: Rely on margin-bottom for spacing inside actions */
  margin-top: 1rem; 
}

/* Send Message Button: Apply margin for separation if needed, but rely on flex for alignment */
#sendMessageBtn {
  position: relative;
  display: block;
  width: 260px;
  height: 48px;
  margin: 0 auto;
  background-color: #007acc;
  border: 2px solid #00509e;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

#sendMessageBtn:hover {
  background-color: #00509e;
}

#sendMessageBtn:active {
  transform: scale(0.97);
  background-color: #003366;
}

/* === Alerts === */
#formAlert {
  text-align: center;
  font-weight: 600;
  padding: 0.75rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.alert.success {
  background-color: #e3f0fa;
  border: 1px solid #7cb0e3;
  color: #003366;
}

.alert.error {
  background-color: #fdeaea;
  border: 1px solid #f5b5b5;
  color: #660000;
}

/* ======================================================
  MOBILE STYLES (< 600px)
  ====================================================== */
@media (max-width: 600px) {
  main.contact-container {
    padding: 1rem 0.9rem;
    margin: 1.25rem auto 2rem auto;
  }
  
  /* CRITICAL FIX 1: Explicitly remove all horizontal margins added for desktop */
  main.contact-container .row .field:first-child {
      margin-right: 0;
  }
  
  /* 1. Force fields to stack vertically */
  main.contact-container .row {
    /* REMOVED: flex-direction: column; - Relying on flex-wrap and 100% field width */
    margin: 0; 
  }
  
  /* 2. Apply explicit margin-bottom to ALL direct children of the form to separate the major blocks */
  /* This is the new, single source of vertical spacing between major elements (rows, textarea, actions) */
  main.contact-container form > * {
    margin-bottom: 1.5rem; 
  }
  
  /* 3. Remove margin-bottom from the last direct child of the form (likely the .actions block) */
  main.contact-container form > *:last-child {
      margin-bottom: 0;
  }
  
  /* 4. Tightly space fields INSIDE a row (e.g., Name and Email) */
  main.contact-container .field {
    /* Set flex to 100% width on mobile to ensure stacking (overrides desktop 300px flex-basis) */
    flex: 1 0 100%;
    margin-bottom: 1rem; 
  }

  /* 5. Remove margin from the last field inside a row to prevent double spacing */
  main.contact-container .row .field:last-child {
      margin-bottom: 0;
  }
  
  /* 6. Tweak other styles */
  main.contact-container label {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
  }

  main.contact-container input,
  main.contact-container select,
  main.contact-container textarea {
    padding: 0.55rem 0.65rem;
    font-size: 0.95rem;
  }

  main.contact-container textarea {
      min-height: 120px;
  }
  
  .actions {
    margin-top: 1rem;
    /* No gap property here */
  }

  #sendMessageBtn {
    width: 100%;
    height: 44px;
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  text-align: center;
  padding: 15px 0;
  margin-top: 40px;
  background-color: black;
  color: white;
  font-size: 1rem;
  border-top: 1px solid #ccc;
  line-height: 1.8;
}

.site-footer .footer-links {
  display: block;
  margin-top: 8px;
  font-size: 1.1rem;
  font-weight: bold;
}

.site-footer a:link,
.site-footer a:visited {
  color: #cce6ff;
  text-decoration: none;
  margin: 0 1rem;
  transition: color 0.3s ease;
}