/* ===============================
   CUSTOM.CSS — Safe override area
   =============================== */

/* 1️⃣ Hero Image Fix */
.hero-img {
  display: block;
  margin: 25px auto 0;
  max-width: 480px;
  width: 90%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
@media(max-width:768px){
  .hero-img { max-width: 90%; margin-top: 20px; }
}

/* 2️⃣ Navigation Highlight Active */
nav a.active {
  background: #6a11cb;
  color: #fff;
  box-shadow: 0 2px 8px rgba(106,17,203,0.25);
}

/* 3️⃣ Header shrink shadow stronger */
header.shrink {
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* 4️⃣ Optional — Adjust button glow */
.order-btn:hover {
  background: #e65c00;
  box-shadow: 0 4px 10px rgba(255,111,0,0.3);
}

/* 5️⃣ Responsive tweaks (add your experiments here) */
@media(max-width:480px){
  .hero h1 { font-size: 22px; }
  .hero p { font-size: 14px; }
  .order-btn { font-size: 16px; padding: 12px 22px; }
}

/* Contact Section */
.contact-section {
  background:#f8f9fa;
  text-align:center;
  padding:60px 20px;
}
.contact-intro {
  max-width:600px;
  margin:0 auto 25px;
  color:#555;
  font-size:16px;
  line-height:1.7;
}
.contact-form {
  max-width:600px;
  margin:0 auto;
  background:#fff;
  padding:30px;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  text-align:left;
}
.contact-form .form-group { margin-bottom:18px; }
.contact-form label {
  display:block;
  font-weight:bold;
  margin-bottom:6px;
  color:#333;
}
.contact-form input,
.contact-form textarea {
  width:100%;
  padding:12px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:15px;
  box-sizing:border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color:#2575fc;
  outline:none;
  box-shadow:0 0 5px rgba(37,117,252,0.3);
}
.submit-btn {
  background:#ff6f00;
  color:#fff;
  border:none;
  padding:14px;
  width:100%;
  border-radius:6px;
  font-size:17px;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 4px #c65000;
}
.submit-btn:hover { background:#e65c00; }

.or-text { margin:25px 0 10px; font-weight:bold; color:#777; }

.whatsapp-btn {
  display:inline-block;
  background:#25d366;
  color:#fff;
  padding:12px 25px;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
  transition:background 0.2s;
}
.whatsapp-btn:hover { background:#1ebe5d; }

.contact-success {
  background:#e8f7e8;
  color:#2e7d32;
  padding:10px 12px;
  border-radius:6px;
  text-align:center;
  margin-top:15px;
  font-weight:bold;
}