:root{
      --green:#2e8b57;
      --green-2:#3aa76d;
      --green-soft:#e9f6ef;
      --dark:#1f2328;
      --text:#2b2f36;
      --muted:#606770;
      --card:#ffffff;
      --line:#e9ecef;
      --shadow: 0 14px 34px rgba(16,24,40,.10);
      --shadow2: 0 10px 22px rgba(16,24,40,.08);
      --radius: 14px;
    }

    *{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
    html{scroll-behavior:smooth;}
    body{background:#fff;color:var(--text);line-height:1.65;}

    /* Layout */
    section{padding:58px 18px;}
    .container{max-width:1200px;margin:0 auto;}
    .title{margin-bottom:34px;text-align:center;}
    .title h2{font-size:32px;color:var(--dark);letter-spacing:.2px;}
    .title p{margin:8px auto 0;max-width:920px;color:var(--muted);}

    /* Buttons */
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      background:var(--green);color:#fff;
      padding:12px 22px;border-radius:10px;text-decoration:none;font-weight:600;
      box-shadow: 0 10px 22px rgba(46,139,87,.22);
      border: 1px solid rgba(255,255,255,.25);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      cursor:pointer;
    }
    .btn:hover{transform: translateY(-1px);background:var(--green-2);box-shadow: 0 14px 28px rgba(46,139,87,.26);}
    .btn.outline{
      background:#fff;color:var(--green);
      border:1px solid rgba(46,139,87,.35);
      box-shadow:none;
    }
    .btn.outline:hover{background:var(--green-soft);}

    /* Header / Nav */
    header{
      position:sticky;top:0;z-index:999;
      background:#fff;border-bottom:1px solid var(--line);
    }
    nav{
      max-width:1200px;margin:0 auto;
      padding:14px 18px;
      display:flex;align-items:center;justify-content:space-between;gap:14px;
    }
    .brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
    .brand-badge{
      width:34px;height:34px;border-radius:10px;
      background:linear-gradient(135deg,var(--green),var(--green-2));
      box-shadow: 0 10px 18px rgba(46,139,87,.22);
      position:relative;
    }
    .brand-badge:before{
      content:""; position:absolute; inset:9px 8px 10px 8px;
      border-radius:8px; background:rgba(255,255,255,.18);
      transform:skewX(-10deg);
    }
    .brand strong{color:var(--green);font-size:20px;letter-spacing:.2px;}
    .nav-right{display:flex;align-items:center;gap:12px;}
    .nav-links{list-style:none;display:flex;gap:22px;align-items:center;}
    .nav-links a{
      text-decoration:none;color:#3a3f46;font-weight:600;font-size:14.5px;
      padding:8px 10px;border-radius:10px;
      transition: background .15s ease, color .15s ease;
    }
    .nav-links a:hover{background:var(--green-soft);color:var(--green);}

    .menu-toggle{
      display:none;
      width:44px;height:44px;border-radius:12px;
      border:1px solid var(--line);
      background:#fff;cursor:pointer;
      align-items:center;justify-content:center;
      box-shadow: 0 8px 16px rgba(16,24,40,.05);
    }
    .menu-toggle span{
      display:block;width:18px;height:2px;background:#3a3f46;border-radius:2px;position:relative;
    }
    .menu-toggle span:before,
    .menu-toggle span:after{
      content:"";position:absolute;left:0;width:18px;height:2px;background:#3a3f46;border-radius:2px;
    }
    .menu-toggle span:before{top:-6px;}
    .menu-toggle span:after{top:6px;}

    /* Mobile dropdown */
    .mobile-panel{
      display:none;
      border-top:1px solid var(--line);
      background:#fff;
    }
    .mobile-links{
      list-style:none;
      display:flex;flex-direction:column;
      padding:10px 10px;
    }
    .mobile-links a{
      text-decoration:none;color:#3a3f46;font-weight:650;
      padding:14px 12px;border-radius:12px;
      border:1px solid transparent;
    }
    .mobile-links a:hover{background:var(--green-soft);border-color:rgba(46,139,87,.18);color:var(--green);}
    .mobile-actions{display:flex;gap:10px;padding:0 10px 14px;}
    .mobile-actions .btn{flex:1;}

    /* Hero (Desktop) */
    .hero-desktop{
      background: radial-gradient(1200px 500px at 20% 10%, rgba(46,139,87,.18), transparent 55%),
                  linear-gradient(120deg,var(--green-soft),#fff);
      padding:0;
    }
    .hero-inner{
      max-width:1200px;margin:0 auto;
      padding:50px 18px 54px;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:34px;align-items:center;
    }
    .hero-kicker{
      display:inline-flex;align-items:center;gap:10px;
      background:#fff;border:1px solid rgba(46,139,87,.18);
      padding:8px 12px;border-radius:999px;color:var(--green);
      font-weight:650;font-size:13px;
      box-shadow: 0 12px 24px rgba(16,24,40,.06);
    }
    .dot{
      width:8px;height:8px;border-radius:999px;background:var(--green);
      box-shadow: 0 0 0 6px rgba(46,139,87,.12);
    }
    .hero-copy h1{
      margin-top:14px;
      font-size:44px;line-height:1.18;color:var(--dark);
      letter-spacing:.1px;
    }
    .hero-copy h1 span{color:var(--green);}
    .hero-copy p{
      margin-top:12px;
      color:var(--muted);
      font-size:15.8px;
      max-width: 56ch;
    }
    .hero-actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;}
    .hero-points{
      margin-top:18px;
      display:grid;gap:10px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .point{
      display:flex;gap:10px;align-items:flex-start;
      background:#fff;border:1px solid var(--line);
      padding:12px 12px;border-radius:14px;
      box-shadow: 0 10px 22px rgba(16,24,40,.05);
    }
    .tick{
      width:22px;height:22px;border-radius:8px;
      background:rgba(46,139,87,.12);
      display:flex;align-items:center;justify-content:center;
      color:var(--green);font-weight:800;font-size:13px;flex:0 0 auto;
    }
    .point b{display:block;color:var(--dark);font-size:13.5px;line-height:1.2;}
    .point span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;}

    .hero-media{
      position:relative;border-radius:18px;overflow:hidden;
      box-shadow: var(--shadow);
      border:1px solid rgba(255,255,255,.5);
      background:#fff;
    }
    .hero-media img{
      width:100%;height:100%;object-fit:cover;display:block;
      min-height:380px;
      transform: scale(1.02);
    }
    .hero-badge{
      position:absolute;left:14px;bottom:14px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(46,139,87,.18);
      backdrop-filter: blur(8px);
      padding:12px 12px;border-radius:14px;
      box-shadow: 0 12px 24px rgba(16,24,40,.10);
      max-width: 260px;
    }
    .hero-badge strong{display:block;color:var(--dark);font-size:13.6px;}
    .hero-badge small{display:block;color:var(--muted);font-size:12.2px;margin-top:2px;}

    /* Hero (Mobile) */
    .hero-mobile{
      display:none;
      background: radial-gradient(700px 360px at 40% 0%, rgba(46,139,87,.18), transparent 60%),
                  linear-gradient(120deg,var(--green-soft),#fff);
      padding:0;
    }
    .hero-mobile-inner{
      max-width:1200px;margin:0 auto;
      padding:46px 16px 44px;
      text-align:center;
    }
    .hero-mobile h1{
      font-size:30px;line-height:1.16;color:var(--dark);
      margin-top:10px;
    }
    .hero-mobile h1 span{color:var(--green);}
    .hero-mobile p{color:var(--muted);margin:12px auto 0;max-width: 52ch;font-size:14.5px;}
    .hero-mobile .hero-actions{justify-content:center;}
    .hero-mobile .hero-media{
      margin-top:18px;border-radius:18px;overflow:hidden;box-shadow: var(--shadow);
    }
    .hero-mobile .hero-media img{min-height:220px;}

    /* Cards */
    .grid-3{display:grid;gap:18px;grid-template-columns:repeat(3, minmax(0,1fr));}
    .grid-4{display:grid;gap:18px;grid-template-columns:repeat(4, minmax(0,1fr));}
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .card-pad{padding:18px;}
    .card h3{color:var(--dark);font-size:16px;line-height:1.25;}
    .card p{color:var(--muted);font-size:13.8px;margin-top:8px;}
    .pill{
      display:inline-flex;gap:8px;align-items:center;
      padding:6px 10px;border-radius:999px;
      background:rgba(46,139,87,.10);color:var(--green);
      font-weight:700;font-size:12px;border:1px solid rgba(46,139,87,.16);
    }

    /* About */
    .about-grid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap:22px;
      align-items:start;
    }
    .about-main{
      background:#fff;border:1px solid var(--line);border-radius:18px;
      box-shadow: var(--shadow2);
      padding:22px;
    }
    .about-main p{color:var(--muted);margin-top:10px;font-size:14.2px;line-height:1.85;}
    .about-main p strong{color:var(--dark);}
    .about-cols{
      margin-top:14px;
      display:grid;gap:12px;
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .mini{
      padding:14px;border-radius:14px;border:1px solid var(--line);
      background:linear-gradient(180deg,#fff,rgba(233,246,239,.55));
    }
    .mini b{display:block;color:var(--dark);font-size:13.5px;}
    .mini span{display:block;color:var(--muted);font-size:12.6px;margin-top:4px;}

    .about-side{display:grid;gap:12px;}
    .hl{
      background:#f9fbfa;
      border:1px solid rgba(46,139,87,.16);
      border-left:5px solid var(--green);
      border-radius:14px;
      padding:14px 14px;
      box-shadow: 0 10px 22px rgba(16,24,40,.05);
    }
    .hl b{display:block;color:var(--green);font-size:13.8px;}
    .hl span{display:block;color:var(--muted);font-size:12.8px;margin-top:4px;}

    .about-media{
      margin-top:16px;
      display:grid;gap:14px;
      grid-template-columns:repeat(3, minmax(0,1fr));
    }
    .about-media img{
      width:100%;height:160px;object-fit:cover;
      border-radius:16px;border:1px solid var(--line);
      box-shadow: 0 10px 22px rgba(16,24,40,.08);
    }

    /* Stats */
    .stats{background:linear-gradient(120deg,var(--green-soft),#fff);}
    .stat{
      padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);
      box-shadow: var(--shadow2);
    }
    .stat .big{font-size:30px;color:var(--green);font-weight:800;line-height:1;}
    .stat .label{margin-top:6px;color:var(--dark);font-weight:700;font-size:13.5px;}
    .stat .sub{margin-top:4px;color:var(--muted);font-size:12.6px;}

    /* Services */
    .services{display:grid;gap:18px;grid-template-columns:repeat(4, minmax(0,1fr));}
    .service{
      border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);
      box-shadow: var(--shadow2);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .service:hover{transform: translateY(-2px);box-shadow: var(--shadow);}
    .service img{width:100%;height:170px;object-fit:cover;display:block;}
    .service .body{padding:16px;}
    .service h3{color:var(--dark);font-size:15.8px;}
    .service p{margin-top:8px;color:var(--muted);font-size:13.6px;line-height:1.75;}
    .service ul{margin-top:10px;padding-left:16px;color:var(--muted);font-size:13.2px;line-height:1.7;}
    .service ul li{margin:4px 0;}

    /* Process */
    .steps{display:grid;gap:14px;grid-template-columns:repeat(4, minmax(0,1fr));}
    .step{
      padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line);
      box-shadow: var(--shadow2);
    }
    .step .num{
      width:34px;height:34px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(46,139,87,.12);
      color:var(--green);font-weight:900;
    }
    .step b{display:block;margin-top:10px;color:var(--dark);font-size:14px;}
    .step span{display:block;margin-top:6px;color:var(--muted);font-size:12.9px;line-height:1.7;}

    /* Gallery */
    .gallery{display:grid;gap:14px;grid-template-columns:repeat(4, minmax(0,1fr));}
    .gimg{
      border-radius:16px;overflow:hidden;border:1px solid var(--line);
      box-shadow: 0 10px 20px rgba(16,24,40,.08);
      background:#fff;
    }
    .gimg img{width:100%;height:190px;object-fit:cover;display:block;}
    .gcap{padding:10px 12px;color:var(--muted);font-size:12.6px;border-top:1px solid var(--line);}

    /* Testimonials */
    .testimonials{display:grid;gap:18px;grid-template-columns:repeat(3, minmax(0,1fr));}
    .t{
      background:#fff;border:1px solid var(--line);border-radius:18px;
      padding:18px;box-shadow: var(--shadow2);
    }
    .t .quote{color:var(--muted);font-size:13.7px;line-height:1.8;}
    .t .who{margin-top:12px;display:flex;align-items:center;gap:10px;}
    .avatar{
      width:38px;height:38px;border-radius:14px;
      background:linear-gradient(135deg,rgba(46,139,87,.18),rgba(58,167,109,.22));
      border:1px solid rgba(46,139,87,.22);
    }
    .who b{display:block;color:var(--dark);font-size:13.6px;line-height:1.2;}
    .who span{display:block;color:var(--muted);font-size:12.2px;margin-top:2px;}

    /* Certifications */
    .cert-wrap{
      background:linear-gradient(120deg,#fff, rgba(233,246,239,.55));
      border:1px solid var(--line);
      border-radius:18px;
      padding:18px;
      box-shadow: var(--shadow2);
    }
    .cert-grid{
      display:grid;gap:14px;
      grid-template-columns: 1.15fr .85fr;
      align-items:center;
    }
    .cert-text p{color:var(--muted);font-size:13.8px;line-height:1.85;margin-top:8px;}
    .logos{
      display:grid;gap:12px;
      grid-template-columns:repeat(4, minmax(0,1fr));
      align-items:center;
    }
    .logo{
      height:64px;border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
      display:flex;align-items:center;justify-content:center;
      box-shadow: 0 10px 18px rgba(16,24,40,.05);
      overflow:hidden;
    }
    .logo img{
      width:70%;height:70%;object-fit:contain;
      filter: grayscale(100%);opacity:.88;
    }

    /* FAQ */
    .faq{
      display:grid;gap:12px;max-width:980px;margin:0 auto;
    }
    details{
      border:1px solid var(--line);
      border-radius:16px;
      background:#fff;
      box-shadow: 0 10px 18px rgba(16,24,40,.05);
      overflow:hidden;
    }
    summary{
      cursor:pointer;
      padding:14px 16px;
      font-weight:700;
      color:var(--dark);
      list-style:none;
      position:relative;
    }
    summary::-webkit-details-marker{display:none;}
    summary:after{
      content:"+";
      position:absolute;right:16px;top:12px;
      width:28px;height:28px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(46,139,87,.10);
      color:var(--green);
      font-weight:900;
    }
    details[open] summary:after{content:"–";}
    details .ans{
      padding:0 16px 14px;
      color:var(--muted);
      font-size:13.6px;
      line-height:1.85;
    }

    /* Contact */
    .contact{
      display:grid;gap:16px;
      grid-template-columns: 1fr 1fr;
      align-items:stretch;
    }
    .form-card{
      border:1px solid var(--line);
      border-radius:18px;
      padding:18px;
      box-shadow: var(--shadow2);
      background:#fff;
    }
    .form-grid{
      display:grid;gap:12px;
      grid-template-columns: 1fr 1fr;
    }
    .field{display:flex;flex-direction:column;gap:6px;}
    .field label{font-size:12.2px;color:var(--muted);font-weight:650;}
    .field input,.field textarea,.field select{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid var(--line);
      outline:none;
      font-size:13.8px;
      background:#fff;
      transition: border .15s ease, box-shadow .15s ease;
    }
    .field input:focus,.field textarea:focus,.field select:focus{
      border-color: rgba(46,139,87,.45);
      box-shadow: 0 0 0 4px rgba(46,139,87,.12);
    }
    .field textarea{min-height:120px;resize:vertical;}
    .form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
    .help{margin-top:10px;color:var(--muted);font-size:12.6px;line-height:1.7;}

    .map{
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      box-shadow: var(--shadow2);
      background:#fff;
      min-height: 360px;
    }
    .map iframe{width:100%;height:100%;min-height:360px;border:0;display:block;}

    /* CTA */
    .cta{
      padding:0;
    }
    .cta-inner{
      max-width:1200px;margin:0 auto;
      padding:44px 18px;
      border-radius: 22px;
      background: linear-gradient(135deg,var(--green),var(--green-2));
      color:#fff;
      box-shadow: 0 18px 40px rgba(46,139,87,.28);
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      align-items:center;
    }
    .cta h3{font-size:28px;line-height:1.2;}
    .cta p{margin-top:8px;color:rgba(255,255,255,.88);font-size:13.8px;line-height:1.75;}
    .cta .cta-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
    .cta .btn{background:#fff;color:var(--green);box-shadow:none;border:1px solid rgba(255,255,255,.35);}
    .cta .btn:hover{background:rgba(255,255,255,.92);}

    /* Footer */
    footer{
      border-top:1px solid var(--line);
      padding:22px 18px;
      color:var(--muted);
      text-align:center;
      font-size:13px;
      background:#fff;
    }

    /* Responsive breakpoints */
    @media (max-width: 1100px){
      .services{grid-template-columns:repeat(2, minmax(0,1fr));}
      .steps{grid-template-columns:repeat(2, minmax(0,1fr));}
      .gallery{grid-template-columns:repeat(2, minmax(0,1fr));}
      .cert-grid{grid-template-columns:1fr;}
      .logos{grid-template-columns:repeat(4, minmax(0,1fr));}
      .stats{grid-template-columns:repeat(4, minmax(0,1fr));}
    }
    @media (max-width: 900px){
      section{padding:50px 16px;}
      .hero-desktop{display:none;}
      .hero-mobile{display:block;}
      .about-grid{grid-template-columns:1fr;}
      .about-media{grid-template-columns:1fr 1fr;}
      .testimonials{grid-template-columns:1fr;}
      .contact{grid-template-columns:1fr;}
      .cta-inner{grid-template-columns:1fr;}
      .cta .cta-actions{justify-content:flex-start;}
      .menu-toggle{display:flex;}
      .nav-links{display:none;}
      .mobile-panel{display:none;}
      .nav-right .btn{display:none;}
    }
    @media (max-width: 560px){
      .title h2{font-size:26px;}
      .hero-mobile h1{font-size:26px;}
      .hero-actions{flex-direction:column;}
      .hero-actions .btn{width:100%;}
      .about-cols{grid-template-columns:1fr;}
      .about-media{grid-template-columns:1fr;}
      .services{grid-template-columns:1fr;}
      .steps{grid-template-columns:1fr;}
      .gallery{grid-template-columns:1fr;}
      .logos{grid-template-columns:repeat(2, minmax(0,1fr));}
      .form-grid{grid-template-columns:1fr;}
    }
/* =========================
   PAGE LOADER
   ========================= */
#pageLoader{
  position:fixed;
  inset:0;
  background:linear-gradient(135deg,#ffffff,var(--green-soft));
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}

#pageLoader.hide{
  opacity:0;
  visibility:hidden;
}

.loader-wrap{
  text-align:center;
}

.loader-logo{
  width:110px;
  margin:18px auto 10px;
  animation:fadeIn 1.4s ease forwards;
}

.loader-wrap p{
  color:var(--muted);
  font-size:14px;
  margin-top:8px;
  letter-spacing:.3px;
}

/* Solar rotating ring */
.solar-ring{
  width:90px;
  height:90px;
  border-radius:50%;
  border:4px solid rgba(46,139,87,.15);
  border-top-color:var(--green);
  animation:spin 1.1s linear infinite;
  margin:0 auto;
  box-shadow:0 0 0 8px rgba(46,139,87,.08);
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}

    /* Utility */
    .muted{color:var(--muted);}
    .bg-soft{background:linear-gradient(120deg,var(--green-soft),#fff);}