/* ========== VARIABLES ========== */
    :root{
      --brand: #0f6b5e;
      --accent: #9ad6c7;
      --bg: #f7faf7;
      --text: #0b2b2a;
      --muted: #556565;
      --max-width: 1200px;
      --radius: 10px;
      --gap: 1.25rem;
      --transition: 200ms ease;
    }

    /* ========== BASE ========== */
    * {box-sizing: border-box;}
    html,body {height:100%;}
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
      padding-bottom:2rem;
    }
    a{color:inherit;text-decoration:none;}
    img{max-width:100%;display:block;border-radius:6px;}
    .container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1rem;}

    /* ========== HEADER ========== */
    header{
      background:linear-gradient(90deg, rgba(15,107,94,0.06), rgba(15,107,94,0.02));
      backdrop-filter: blur(2px);
      position:sticky;
      top:0;
      z-index:50;
      border-bottom:1px solid rgba(11,43,42,0.06);
    }
    .topbar{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0;}
    .brand{display:flex;align-items:center;gap:0.75rem;}
    .logo{
      width:52px;height:52px;border-radius:8px;display:inline-grid;place-items:center;
      background:var(--brand);color:white;font-weight:700;font-size:18px;
      box-shadow: 0 6px 14px rgba(15,107,94,0.08);
    }
    .brand h1{margin:0;font-size:1rem;line-height:1;color:var(--text);font-weight:700;}
    .brand p{margin:0;font-size:0.78rem;color:var(--muted);}

    /* nav */
    nav{display:flex;align-items:center;gap:1rem;}
    .nav-links{display:flex;gap:0.5rem;align-items:center;}
    .nav-links a{padding: 10px 15px;border-radius:8px;color:var(--text);font-weight:600;}
    .nav-links a:hover{background:rgba(15,107,94,0.06);transform:translateY(-2px);transition:var(--transition);}

    /* action button */
    .btn-primary{
      background:var(--brand);
      color:#fff;
      padding:0.55rem 0.9rem;
      border-radius:8px;
      font-weight:700;
      box-shadow:0 6px 18px rgba(15,107,94,0.12);
    }

    /* hamburger (mobile) */
    .hamburger{
      display:none;
      width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;
      background:transparent;border:0;cursor:pointer;
    }
    .hamburger svg{width:20px;height:20px;color:var(--brand);}

    /* ========== HERO/BANNER ========== */
    .hero{
     /* margin-top:0.5rem;*/
      /* padding:2.5rem 0;*/
      /* background:
        linear-gradient(180deg, rgba(15,107,94,0.06), rgba(15,107,94,0.02)),
        url('https://images.unsplash.com/photo-1516646468541-1f1d6c3c3a0b?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&s=') center/cover no-repeat;*/
      border-radius:12px;
      color:var(--text);
    }
    .hero-inner{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center;}
    .hero h2{margin:0 0 .5rem;font-size:clamp(1.4rem,2.6vw,2.25rem);}
    .hero p{margin:0 0 1rem;color:var(--muted);}
    .hero .cta-row{display:flex;gap:0.75rem;flex-wrap:wrap;}
    .hero .card{background:rgba(255,255,255,0.85);padding:1rem;border-radius:10px;box-shadow:0 6px 20px rgba(11,43,42,0.04);}

    /* ========== DETAILS SECTION ========== */
    .details{padding: 20px 15px; background: #fff; margin: 15px 0px;}
    .details h3{margin:0 0 0.5rem;font-size:1.25rem;}
    .details p{line-height:1.7; text-align: justify; font-size: 18px; color: #040404;}
	
	.details2{padding: 20px 15px; background: #e6efee; margin: 15px 0px;  border-radius: 15px; }
    .details2 h3{margin:0 0 0.5rem;}
    .details2 p{margin:1.7; text-align: justify; font-size: 18px;}

    /* ========== FOUR-COLUMN GRID ========== */
    .grid-4{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:var(--gap);
      margin-top:1rem;
    }
    .card-item{
      background:#fff;padding:1rem;border-radius:12px;box-shadow:0 8px 20px rgba(11,43,42,0.04);
      display:flex;flex-direction:column;gap:0.75rem;min-height:220px;
    }
    .card-item h4{margin:0;font-size:1.05rem;}
    .card-item p{margin:0;color:var(--muted);font-size:0.95rem;flex:1;}

    /* ========== FOOTER ========== */
    footer{
      margin-top:2.5rem;padding:2rem 0;background:#1b1b1b;color:#ffffff;border-radius:10px;
    }
    .footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;}
    .footer-grid h5{margin:0 0 .5rem;font-size:1rem;color:#ffa110;}
    .footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.45rem;}
    .footer-grid a{color:#ffffff}
    .footer-bottom{margin-top:1rem;border-top:1px solid rgba(11,43,42,0.04);padding-top:1rem;font-size:0.9rem;color:#ffffff;}

    /* ========== RESPONSIVE ========== */
    @media (max-width: 1000px){
      .hero-inner{grid-template-columns:1fr; text-align:center;}
      .hero .card{margin:0 auto;}
      .grid-4{grid-template-columns:repeat(2,1fr);}
      .footer-grid{grid-template-columns:repeat(2,1fr);}
    }

    @media (max-width: 640px){
      .topbar{padding:0.6rem 0;}
      .nav-links{display:none;}
      .hamburger{display:flex;}
      .hero{padding:15px 0px ;border-radius:8px;}
      .grid-4{grid-template-columns:1fr;}
      .brand h1{font-size:0.95rem;}
      .brand p{display:none;}
      .footer-grid{grid-template-columns:1fr;}
    }

    /* Mobile slide-in menu */
    .mobile-menu{
      position:fixed;right:0;top:0;height:100vh;width:280px;background:#fff;box-shadow:-8px 0 30px rgba(11,43,42,0.08);
      transform:translateX(110%);transition:transform var(--transition);padding:1.25rem;z-index:80;border-left:1px solid rgba(11,43,42,0.04);
    }
    .mobile-menu.open{transform:translateX(0);}
    .mobile-menu nav{display:flex;flex-direction:column;gap:0.5rem;margin-top:1rem;}
    .mobile-close{display:flex;justify-content:flex-end;}
    .mobile-menu a{padding:0.6rem;border-radius:8px;}
	
	.faq-container{
      max-width:800px;
      margin:2rem auto;
      padding:0 1rem;
    }
    .faq-container h2{
      text-align:center;
      margin-bottom:1.5rem;
      font-size:1.75rem;
    }
    .faq-item{
      background:#fff;
      border-radius:var(--radius);
      box-shadow:0 4px 12px rgba(0,0,0,0.05);
      margin-bottom:1rem;
      overflow:hidden;
    }
    .faq-question{
      background:#fff;
      color:var(--brand);
      font-weight:600;
      cursor:pointer;
      padding:1rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:1rem;
    }
    .faq-question:hover{background:rgba(15,107,94,0.06);}
    .faq-answer{
      max-height:0;
      overflow:hidden;
      padding:0 1rem;
      color:var(--muted);
      font-size:0.95rem;
      transition:max-height 0.3s ease;
    }
    .faq-item.active .faq-answer{
      max-height:200px; /* enough space for text */
      padding:1rem;
    }
    .icon{
      transition:transform 0.3s;
    }
    .faq-item.active .icon{transform:rotate(180deg);}
	
	.services{
      max-width:1200px;
      margin:3rem auto;
      padding:0 1rem;
      text-align:center;
    }
    .services h2{
      font-size:2rem;
      color:#0f6b5e;
      margin-bottom:0.5rem;
    }
    .services p{
      color:#555;
      margin-bottom:2rem;
      font-size:1rem;
    }
    .service-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:1.5rem;
    }
    .service-card{
      background:#fff;
      border-radius:10px;
      box-shadow:0 4px 12px rgba(0,0,0,0.06);
      padding:2rem 1.5rem;
      transition:transform 0.3s ease;
    }
    .service-card:hover{
      transform:translateY(-5px);
    }
    .service-card img{
      /*width:60px;
      height:60px;*/
      margin-bottom:1rem;
    }
    .service-card h3{
      font-size:1.25rem;
      color:#0f6b5e;
      margin-bottom:0.5rem;
    }
    .service-card p{
      font-size:0.95rem;
      color:#555;
    }
	
	.pricing{
      max-width:1100px;
      margin:3rem auto;
      padding:0 1rem;
      text-align:center;
    }
    .pricing h2{
      font-size:2rem;
      color:#0f6b5e;
      margin-bottom:0.5rem;
    }
    .pricing p{
      color:#555;
      margin-bottom:2rem;
    }
    .price-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:1.5rem;
    }
    .price-card{
      background:#fff;
      border-radius:10px;
      box-shadow:0 4px 12px rgba(0,0,0,0.08);
      padding:2rem 1.5rem;
      transition:transform 0.3s ease;
      border-top:5px solid #0f6b5e;
    }
    .price-card:hover{transform:translateY(-6px);}
    .price-card h3{
      font-size:1.4rem;
      color:#0f6b5e;
      margin-bottom:0.5rem;
    }
    .price{
      font-size:1.8rem;
      font-weight:bold;
      margin:0.5rem 0 1rem;
      color:#222;
    }
    .price small{font-size:0.8rem;color:#777;}
    .price-card ul{
      list-style:none;
      padding:0;
      margin:0 0 1.5rem;
      color:#555;
      font-size:0.95rem;
      text-align:left;
    }
    .price-card ul li{
      padding:0.4rem 0;
      border-bottom:1px solid #eee;
    }
    .btn{
      display:inline-block;
      padding:0.7rem 1.5rem;
      border-radius:6px;
      background:#0f6b5e;
      color:#fff;
      text-decoration:none;
      font-weight:600;
      transition:background 0.3s;
    }
    .btn:hover{background:#0c554b;}
	
	.counter-section {
    max-width: 1100px;
    margin: 3rem auto;
    padding: 0 1rem;
    text-align: center;
  }
  .counter-section h2 {
    font-size: 2rem;
    color: #0f6b5e;
    margin-bottom: 0.5rem;
  }
  .counter-section p {
    color: #555;
    margin-bottom: 2rem;
  }
  .counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
  }
  .counter {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 2rem 1rem;
  }
  .counter h3 {
    font-size: 2rem;
    color: #0f6b5e;
    margin: 0.5rem 0;
  }
  .counter p {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
  }
  
  .testimonial-section{
    max-width: 1100px;
    margin: 3rem auto;
    padding: 0 1rem;
    text-align: center;
  }
  .testimonial-section h2{
    color: #0f6b5e;
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  .testimonial-section p{
    color: #555;
    margin-bottom: 2rem;
  }
  .testimonial-container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1.5rem;
  }
  .testimonial-card{
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .testimonial-card p{
    font-size: 0.95rem;
    color: #555;
    flex: 1;
  }
  .testimonial-card h4{
    margin:0;
    color: #0f6b5e;
    font-size:1rem;
  }
  .testimonial-card span{
    font-size:0.85rem;
    color:#777;
  }
  
/* Floating buttons container */
  .contact-buttons{
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
  }

  .contact-buttons a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s;
  }

  .contact-buttons a:hover{
    transform: scale(1.1);
  }

  .whatsapp{
    background: #25D366;
  }

  .call{
    background: #0f6b5e;
  }