@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root{
  --primary:#00A572;
  --dark:#0B1B2B;
  --muted:#6B7280;
  --bg:#f7fbfa;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.7);
}
*{box-sizing:border-box}body{margin:0;font-family:Poppins,system-ui,Arial;background:var(--bg);color:var(--dark);-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:20px}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,0.85);backdrop-filter:blur(6px);border-bottom:1px solid #e6f3ee}
.header-inner{display:flex;align-items:center;gap:16px;padding:14px 20px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:52px;height:52px;border-radius:10px;overflow:hidden;flex:0 0 52px;box-shadow:0 6px 24px rgba(0,165,114,0.12)}
.brand h1{margin:0;font-size:18px}
nav{margin-left:auto;display:flex;gap:14px;align-items:center}
nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:600}
nav a:hover{color:var(--dark);background:#f1fbf6}
.cta{background:var(--primary);color:#fff;padding:9px 14px;border-radius:12px;box-shadow:0 8px 28px rgba(0,165,114,0.12);text-decoration:none;font-weight:700}
.hamb{display:none;border:1px solid #e6f3ee;padding:8px;border-radius:8px;background:#fff}
/* Hero */
.hero{display:grid;grid-template-columns:1fr 480px;gap:28px;align-items:center;padding:48px 0}
.kicker{display:inline-block;background:#ecfdf7;color:var(--primary);padding:6px 10px;border-radius:999px;font-weight:700}
.hero h2{font-size:34px;margin:10px 0 0;line-height:1.02}
.lead{color:var(--muted);margin-top:12px;font-size:16px}
.hero .hero-card{background:var(--card);padding:18px;border-radius:16px;box-shadow:0 12px 40px rgba(2,132,199,0.04);border:1px solid #eef8f4}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--primary);color:#fff;text-decoration:none;font-weight:700}
.btn.ghost{background:#fff;color:var(--primary);border:1px solid #e6f3ee}
.lnk-std{background:#fff;color:var(--primary);border:1px solid #e6f3ee}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{background:var(--card);border-radius:12px;padding:18px;border:1px solid #eef7f3;box-shadow:0 8px 30px rgba(2,132,199,0.04)}
.two-col{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start;margin-top:28px}
.footer{background:#fff;border-top:1px solid #eef6f4;padding:24px;margin-top:40px;text-align:center;color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.faq-item{background:var(--card);padding:14px;border-radius:10px;border:1px solid #eef6f4;cursor:pointer}
.testimonial{background:var(--card);padding:16px;border-radius:12px;border:1px solid #eef6f4}
.contact-map{border-radius:12px;overflow:hidden;border:1px solid #eef6f4}
@media(max-width:980px){.hero{grid-template-columns:1fr}.services-grid{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}nav{display:none}.hamb{display:inline-flex}}
@media(max-width:600px){.services-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}header .container{padding:12px}}
#mainNav {
  display: none; /* hide menu by default on mobile */
}

#mainNav.open {
  display: block; /* show menu when open */
}

/* Example media query */
@media(min-width: 768px) {
  #mainNav {
    display: flex; /* always show menu on desktop */
  }
}



.hero-card {
  position: relative;
  width: 100%;
	height: 100%;

	
  max-width: 1200px;
  margin: auto;
  border-radius: 12px;
  overflow: hidden;
}


.hero-banner {
  position: relative;
  width: 100%;
	height: 100%;
	  height: 15vh;


	max-height: 2500x;
  max-width: 1200px;
  margin: auto;
  border-radius: 12px;
  overflow: hidden;
}

.slideshow-container {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 300px;
}

.slide {
  display: none;  /* hidden by default */
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

.fade {
  animation: fade 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Arrows */
.prev, .next {
  position: absolute;
  top: 50%;
  padding: 12px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.4);
  transform: translateY(-50%);
  z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover { background-color: rgba(0,0,0,0.7); }

@media(max-width: 768px) {
  .slideshow-container { height: 40vh; }
}

@media(max-width: 480px) {
  .slideshow-container { height: 30vh; }
  .prev, .next { font-size: 18px; padding: 8px; }
}




.hero-card {
    background: #fff;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.hero-card h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #2f4f4f;
}

/* Responsive video container */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 18px;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* Switch to single column */
    }
}
a {
    text-decoration: none;
}