/* 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: 95%; 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; 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}
/* HERO SECTION */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: url('back.png') center center/cover no-repeat;
  overflow: hidden;
  animation: fadeInHero 1.2s ease-in forwards;
  opacity: 0; /* start hidden for animation */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  opacity: 0;
  animation: fadeInOverlay 1.5s ease-in forwards;
  animation-delay: 0.2s;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  padding: 60px 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInContent 1.5s ease-out forwards;
  animation-delay: 0.4s;
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.2;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 25px;
  max-width: 600px;
  margin-inline: auto;
}

.hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 25px;
}

.hero .highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: inline-block;
}

.hero .highlights li {
  font-size: 0.95rem;
  margin-bottom: 6px;
  opacity: 0.9;
}

/* Fade-in keyframes */
@keyframes fadeInHero {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero {
    text-align: center;
    background-position: center top;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero .hero-ctas {
    justify-content: center;
  }

  .hero .highlights {
    text-align: center;
  }
}

.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}
}
/* --- WhatsApp Floating Button --- */
/* --- WhatsApp Floating Button --- */
/* --- WhatsApp Floating Button --- */
.whatsapp-float {
  position: fixed !important;
  bottom: 25px !important;
  right: 25px !important;
  background-color: #25d366;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  z-index: 998 !important;
  transition: transform 0.3s ease;
}
.whatsapp-float img {
  width: 30px;
  height: 30px;
}
.whatsapp-float:hover {
  transform: scale(1.1);
}

/* --- Back to Top Button --- */
#backToTop {
  position: fixed !important;
  bottom: 100px !important;  /* now clearly above WhatsApp */
  right: 25px !important;
  background-color: #229912;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  font-size: 22px;
  font-weight: bold;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 9999 !important; /* ensure always on top */
  transition: all 0.3s ease;
}
#backToTop:hover {
  background-color: #1c7e0e;
  transform: scale(1.1);
}


/* HERO SECTION */
.hero 
{
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: url('back.png') center center/cover no-repeat;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55); /* opacity */
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  padding: 60px 20px;
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 25px;
  max-width: 600px;
}

.hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 25px;
}

.hero .highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero .highlights li {
  font-size: 0.95rem;
  margin-bottom: 6px;
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero {
    text-align: center;
    background-position: center top;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero .hero-ctas {
    justify-content: center;
  }
}