/* -------------------- Reset -------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Bahnschrift SemiBold", Arial, sans-serif;
  font-size: 18px;
  background-color: #e6e2d3;   /* unified beige background */
  color: #000;
  line-height: 1.6;
}

/* -------------------- Contact Page -------------------- */
.contact-page {
  max-width: 1200px;
  margin: 100px auto;          /* ✅ adds spacing so it clears navbar/logo */
  padding: 40px 20px;
  background-color: #e6e2d3;   /* ✅ same as body background */
  border: 2px solid #c4b7a6;   /* ✅ subtle border around content */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Intro */
.intro { text-align: center; }
.intro h1 {
  font-size: 30px;
  font-weight: 900;
  color: #7e4a35;
  margin-bottom: 1rem;
}
.intro p {
  max-width: 700px;
  margin: 0 auto 2rem auto;
}

/* Layout */
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.contact-box, .contact-form {
  background-color: #e6e2d3;   /* ✅ consistent background */
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #c4b7a6;   /* ✅ inner separation */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Contact Info */
.contact-box h2 {
  margin-bottom: 20px;
  font-size: 22px;
  color: #7e4a35;
}
.info-block {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}
.info-block:hover { transform: translateX(5px); }
.info-block i { font-size: 20px; color: #7e4a35; }
.info-block div { font-size: 16px; }

/* Contact Form */
.contact-form h2 {
  margin-bottom: 15px;
  font-size: 22px;
  color: #7e4a35;
}
.form-group { margin-bottom: 15px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #c4b7a6;  /* ✅ themed border */
  font-size: 16px;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border: 1px solid #7e4a35;
  outline: none;
  box-shadow: 0 0 0 2px rgba(126, 74, 53, 0.2);
}
.contact-form button {
  background: #7e4a35;
  color: #e6e2d3;   /* ✅ no white */
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  width: 100%;
}
.contact-form button:hover { background: #5c3426; transform: translateY(-1px); }
.contact-form button:active { transform: translateY(0); }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Map */
.map-full { margin-top: 40px; }
.map-full iframe {
  border: none;
  width: 100%;
  height: 400px;
  border-radius: 10px;   /* ✅ matches design */
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  width: 60px; height: 60px;
  bottom: 20px; left: 20px;
  background-color: #25d366;
  color: #e6e2d3;   /* ✅ no white */
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 5px #999;
  z-index: 100;
}
.whatsapp-float i { margin-top: 15px; }
.whatsapp-float:hover { background-color: #1ebe57; }

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
  .contact-page { margin: 80px 15px; padding: 20px; } /* ✅ more compact */
  .contact-container { grid-template-columns: 1fr; gap: 20px; }
  .intro h1 { font-size: 24px; }
  .intro p { font-size: 16px; padding: 0 10px; }
  .contact-box h2, .contact-form h2 { font-size: 20px; }
  .contact-form input, .contact-form textarea { font-size: 15px; padding: 10px; }
  .contact-form button { font-size: 15px; padding: 10px 20px; }
  .map-full iframe { height: 250px; }
  .whatsapp-float {
    width: 50px; height: 50px;
    font-size: 26px; bottom: 15px; left: 15px;
  }
  .whatsapp-float i { margin-top: 12px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .intro h1 { font-size: 20px; }
  .contact-form button { font-size: 14px; padding: 8px 18px; }
}

/* ==============================
   Mobile Logo Always on Top
   ============================== */
@media (max-width: 576px) {
  /* Keep logo pinned to top center */
  .navbar-brand {
    position: fixed;
    top: 10px;                  /* distance from very top */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;               /* keep above everything */
  }

  .navbar-brand img {
    height: 50px;               /* slightly larger for clarity */
  }

  /* Adjust U-shape so it sits below the logo */
  .navbar-custom::after {
    top: 4px;                  /* pushed below logo */
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 70px;
  }

  /* Push menu down below logo + U-shape */
  .navbar-collapse {
    margin-top: 160px;          /* ensures dropdown doesn’t overlap logo */
    text-align: center;
  }
}