:root{
  --primary:#2e7d32;
  --primary-dark:#245924;
  --accent:#ffd700;
  --soil:#8b5a2b;
  --muted:#6b6b6b;
  --radius:10px;
  --glass: rgba(255,255,255,0.85);
  --max-width:1100px;
  --nav-height:70px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Poppins",sans-serif;color:#222;background:#fbfdfb}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}

/* ================= NAVBAR ================= */
.navbar {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img {
  height: 50px;
  width: 50px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  padding: 4px;
  margin-right: 10px;
}
.brand .title {
  font-weight: 700;
  letter-spacing: 1px;
}

.navlinks {
  display: flex;
  gap: 16px;
  align-items: center;
  transition: all 0.3s ease;
}
.navlinks a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.3s ease, color 0.3s ease;
}
.navlinks a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn {
  background: var(--accent);
  color: #111;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.btn-call {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
}

.btn:hover,
.btn-call:hover {
  opacity: 0.85;
}

.lang-select {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 6px;
}

.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: white;
  transition: transform 0.3s ease;
}
.menu-toggle.active {
  transform: rotate(90deg);
}

@media (max-width: 880px) {
  .menu-toggle {
    display: block;
    z-index: 1001;
  }
  .navlinks {
    position: fixed;
    top: var(--nav-height);
    right: -100%;
    width: 75%;
    height: 100vh;
    background: linear-gradient(180deg, var(--primary-dark), var(--primary));
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 20px;
    gap: 20px;
    transition: right 0.35s ease-in-out;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
  }
  .navlinks.active {
    right: 0;
  }
  .navlinks a {
    display: block;
    width: 100%;
    font-size: 18px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .actions {display: none;}
}

.hero{
  padding:56px 18px;background:linear-gradient(180deg,rgba(46,125,50,0.06),rgba(139,90,43,0.02));
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;border-bottom:1px solid rgba(0,0,0,0.04);
}
.hero .left{flex:1;min-width:280px}
.hero h1{font-size:34px;margin:0 0 10px;color:var(--primary-dark)}
.hero p{margin:0 0 18px;color:var(--muted)}
.hero .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.card{background:var(--glass);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(34,34,34,0.05);border:1px solid rgba(0,0,0,0.03)}
.features{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.feature{flex:1;min-width:180px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fff,rgba(255,255,255,0.98));border:1px solid rgba(0,0,0,0.03)}
.product-grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
.product-info h2{margin-top:0;color:var(--primary-dark)}
.dosage li{margin-bottom:6px}
.owner{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  margin-top:12px;padding:12px;border-radius:10px;background:linear-gradient(90deg,#fff,#fbfbfb);
}
.owner img{width:120px;height:120px;border-radius:12px;object-fit:cover;border:4px solid rgba(46,125,50,0.08)}
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
.map-placeholder{height:260px;background:linear-gradient(90deg,rgba(0,0,0,0.03),rgba(0,0,0,0.02));border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.footer{padding:20px;text-align:center;color:var(--muted);font-size:14px;margin-top:28px;border-top:1px solid rgba(0,0,0,0.04)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.badge{background:var(--primary);color:#fff;padding:6px 10px;border-radius:20px;font-weight:700}
.cta{display:inline-block;padding:10px 16px;border-radius:12px;background:var(--primary);color:#fff;text-decoration:none}

@media(max-width:880px){
  .product-grid,.contact-grid{grid-template-columns:1fr}
  .navbar{padding:8px 12px}
  .brand img{height:40px}
  .hero{padding:30px 12px}
}

/* ---- Gallery Section ---- */
.gallery-section {position: relative;width: 100%;margin: 0 auto;overflow: hidden;}
.gallery-slider {display: flex;align-items: center;justify-content: center;overflow: hidden;width: 100%;}
.gallery-wrapper {overflow: hidden;width: 100%;}
.gallery-track {display: flex;transition: transform 0.4s ease;gap: 18px;padding: 10px 0;}
.gallery-item {
  flex: 0 0 33.33%;
  padding: 8px;
  width: 300px;
  height: 300px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  background: #fff;
}
.gallery-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ---- Lightbox ---- */
.lightbox {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);justify-content:center;align-items:center;z-index:9999;}
.lightbox img {max-width:90%;max-height:80%;border-radius:10px;box-shadow:0 0 20px rgba(255,255,255,0.2);}
.lightbox-close {position:absolute;top:20px;right:30px;color:white;font-size:32px;cursor:pointer;transition:0.3s;}
.lightbox-close:hover {color:#ff5252;}
.lightbox-prev,.lightbox-next {
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:36px;color:white;background:rgba(0,0,0,0.4);
  border:none;padding:10px 16px;border-radius:50%;cursor:pointer;transition:0.3s;
}
.lightbox-prev:hover,.lightbox-next:hover {background:rgba(255,255,255,0.3);}
.lightbox-prev {left:40px;}
.lightbox-next {right:40px;}

/* 📱 Smaller Logo */
@media (max-width: 600px) {
  .brand img {
    height: 40px;
    width: 40px;
    margin-right: 8px;
  }
}

/* ========================================================= */
/* ===  ENQUIRY FORM PREMIUM STYLING (ADDED NEW SECTION) ==== */
/* ========================================================= */

.enquiry-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enquiry-form label {
  font-weight: 600;
  color: #444;
  font-size: 14px;
}

.enquiry-form input,
.enquiry-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 15px;
  background: #fafafa;
  transition: all 0.3s ease;
  outline: none;
  resize: none;
}

.enquiry-form input:focus,
.enquiry-form textarea:focus {
  border: 1.8px solid #4CAF50;
  background: #fff;
  box-shadow: 0 0 8px rgba(76,175,80,0.25);
}

.enquiry-form button {
  background: linear-gradient(135deg, #4CAF50, #2f8f37);
  color: white;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: 0.3s;
}

.enquiry-form button:hover {
  background: linear-gradient(135deg, #3e9f47, #267a2d);
  box-shadow: 0 5px 16px rgba(0,0,0,0.20);
  transform: translateY(-2px);
}

/* Enquiry Card */
.card.enquiry-card {
  border-radius: 14px;
  padding: 22px;
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.card.enquiry-card:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,0.20);
}