/* styles.css - Shared site styles */
:root{
  --bg:#f6f8fa; --text:#0b1220; --muted:#475569; --accent:#1d8136;
  --card:#ffffff; --radius:12px; --container:1200px;
  --brand-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--brand-font);font-size:16px;line-height:1.5}
.container{
  max-width: 100%; width: 95%; margin: 0 auto;
}
.site-header{background:#fff;border-bottom:1px solid #e6e9ee;position: sticky;top:0;z-index:40}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 28px}
.brand{font-weight:700;font-size:1.15rem;color:var(--text)} .brand .accent{color:var(--accent)}
.country-select{position:relative;cursor:pointer;color:var(--muted)}
.country-select ul{position:absolute;right:0;top:28px;background:var(--card);box-shadow:0 8px 20px rgba(11,17,32,0.08);border-radius:8px;list-style:none;padding:8px;margin:0}
.country-select li{padding:8px 12px;cursor:pointer} .country-select li:hover{background:#f2f5f8}
.hidden{display:none}
.menu-toggle{background:transparent;border:1px solid #e6e9ee;padding:8px;border-radius:8px;cursor:pointer}

.main-nav{background:#fff;border-top:1px solid #f1f4f7}
.main-nav ul{display:flex;gap:14px;padding:12px 28px;margin:0;list-style:none;flex-wrap:wrap}
.main-nav a{text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:8px}
.main-nav a:hover{color:var(--text);background:#f6f9fb}

.hero{padding:36px 0;background:linear-gradient(90deg,#ffffff 60%, #fcfbf9 40%)}
.hero-inner{display:flex;gap:28px;align-items:center;max-width:var(--container) 100%;margin:0 auto;padding:28px}
.hero-copy{flex:1} .hero-copy h1{font-size:2.1rem;margin:0 0 10px;color:var(--text)}
.hero-copy p{color:var(--muted);margin:0 0 14px}
.hero-ctas{display:flex;gap:10px;margin-bottom:14px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;cursor:pointer;border:0}
.primary{background:var(--accent);color:white}
.outline{background:transparent;border:1px solid #e6e9ee;color:var(--text)}
.small-link{color:var(--accent);font-weight:600}

.hero-media img{width:100%;max-width:800px; max-height: 600px :12px;box-shadow:0 10px 30px rgba(11,17,32,0.06)}

.section{padding:36px 0}
.section .container h2{margin:0 0 8px}
.section .container p{color:var(--muted);margin:0 0 18px}

.enquiry{background:#fff;margin-top:12px;border-top:1px solid #eef2f6;border-bottom:1px solid #eef2f6}
.enquiry .container{display:flex;align-items:center;justify-content:space-between;padding:18px}

.whatsapp-float {
  position:fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.whatsapp-float img {
  width: 35px;
  height: 35px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.whatsapp-float {
  animation: pulse 2s infinite;
}

.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px}
.card{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 8px 20px rgba(11,17,32,0.04)}
.card h3{margin:0 0 6px;font-size:1.05rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}

.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:20px}
.contact-form label{display:block;margin-bottom:10px}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border:1px solid #e6e9ee;border-radius:8px}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.form-feedback{margin-top:8px;color:#0b7b1a}

.site-footer{background:#fff;padding:18px;border-top:1px solid #eef2f6;margin-top:28px;text-align:center;color:var(--muted)}
.footer-links a{margin-left:12px;color:var(--muted);text-decoration:none}

/* responsive */
@media (max-width:980px){
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column}
  .contact-grid{grid-template-columns:1fr}
  .main-nav ul{display:none}
  .menu-toggle{display:inline-block}
}
@media (max-width:560px){
  .category-grid{grid-template-columns:1fr}
}
#backToTop {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 90px; /* place above WhatsApp button */
  right: 30px;
  z-index: 1000;
  font-size: 20px;
  border: none;
  outline: none;
  background-color: #267440;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#backToTop:hover {
  background-color: #1a4434;
  transform: scale(1.15);
}
