:root{
      --bg:#f5f7f6;
      --text:#102018;
      --muted:#5d6c64;
      --accent:#2f6b4f;
      --accent-dark:#214c39;
      --card:#ffffff;
      --line:#dbe4df;
      --shadow:0 18px 45px rgba(16,32,24,.08);
      --radius:22px;
      --max:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.6;
    }
    img{max-width:100%;display:block}
    .container{
      width:min(var(--max), calc(100% - 40px));
      margin:0 auto;
    }
    section{
      padding:80px 0;
      scroll-margin-top:90px;
    }

    .top-nav{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(245,247,246,.96);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:16px 0;
    }
    .brand{
      color:var(--accent-dark);
      text-decoration:none;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:14px;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:20px;
      flex-wrap:wrap;
    }
    .nav-links a{
      color:var(--text);
      text-decoration:none;
      font-weight:600;
      transition:color .2s ease;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible{
      color:var(--accent);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 16px;
      border-radius:999px;
      background:var(--accent);
      color:#fff;
      text-decoration:none;
      font-weight:700;
      box-shadow:0 8px 20px rgba(47,107,79,.22);
      transition:transform .2s ease, background .2s ease;
    }
    .nav-cta:hover,
    .nav-cta:focus-visible{
      transform:translateY(-1px);
      background:var(--accent-dark);
    }
    .section-title{
      font-size:clamp(28px, 4vw, 46px);
      line-height:1.1;
      margin:0 0 18px;
      letter-spacing:-.03em;
    }
    .section-subtitle{
      color:var(--muted);
      max-width:760px;
      margin:0 0 30px;
      font-size:18px;
    }

    .hero{
      min-height:75vh;
        padding-top: 12rem;
      display:flex;
      align-items:flex;
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(rgba(10,20,16,.42), rgba(10,20,16,.42)),
        url("/images/slider1.jpg") center/cover no-repeat;
      color:#fff;
    }
    .hero-inner{
      width:100%;
      padding:120px 0 90px;
    }
    .hero h1{
      font-size:clamp(50px, 7vw, 85px);
      line-height:1;
      margin:0;
      max-width:100ch;
      letter-spacing:-.05em;
      text-transform:uppercase;
    }
    .hero-content{
      display:flex;
      flex-direction:column;
      align-items:flex;
      gap:22px;
      width:100%;
      padding:120px 0 90px;
  
    }
    .hero-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:13px 24px;
      border-radius:999px;
      margin-top: 2rem  ;
      background:#fff;
      color:var(--accent-dark);
      text-decoration:none;
      font-weight:700;
      box-shadow:0 10px 24px rgba(0,0,0,.18);
      transition:transform .2s ease, background .2s ease;
    }
    .hero-btn:hover,
    .hero-btn:focus-visible{
      transform:translateY(-2px);
      background:#f3f7f4;
    }

    .hero_logo {
      width: 150px;
      height: auto;
    }

    .about-grid,
    .feature-grid,
    .services-grid{
      display:grid;
      gap:24px;
    }
    .about-grid{
      grid-template-columns:1.15fr .85fr;
      align-items:center;
    }
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .about-box{
      padding:34px;
      margin-top:2rem;
      margin-bottom:2rem;
    }
    .about-image{
      min-height:420px;
      border-radius:var(--radius);
      background:
        linear-gradient(rgba(16,32,24,.12), rgba(16,32,24,.12)),
        url("/images/slider2.jpg") center/cover no-repeat;
    }

    .services-grid{
      grid-template-columns:repeat(3, 1fr);
    }
    .service{
      padding:28px;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .service h3,
    .feature h3{
      margin:0 0 10px;
      font-size:22px;
    }
    .service p,
    .feature p{
      margin:0;
      color:var(--muted);
    }
    .service-btn{
      margin-top:auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:fit-content;
      padding:10px 16px;
      border-radius:999px;
      background:var(--accent);
      color:#fff;
      text-decoration:none;
      font-weight:700;
      transition:transform .2s ease, background .2s ease;
    }
    .service-btn:hover,
    .service-btn:focus-visible{
      transform:translateY(-1px);
      background:var(--accent-dark);
    }

    .feature-grid{
      grid-template-columns:repeat(2, 1fr);
      align-items:stretch;
    }
    .feature-media{
      min-height:420px;
      border-radius:var(--radius);
      background:
        linear-gradient(rgba(16,32,24,.18), rgba(16,32,24,.18)),
        url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1200&q=80") center/cover no-repeat;
    }
    .feature-list{
      display:grid;
      gap:18px;
    }
    .feature{
      padding:24px;
    }

    .contact-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:24px;
      align-items:stretch;
    }
    .contact-box{
      padding:34px;
      margin-top:2rem;
      margin-bottom:2rem;
    }
    .contact-box p{
      margin:0 0 10px;
      color:var(--muted);
    }
    .map{
      min-height:420px;
      width:100%;
      border:0;
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      background:#e9eeeb;
    }

    footer{
      padding:28px 0 36px;
      border-top:1px solid var(--line);
      color:var(--muted);
    }

    @media (max-width: 900px){
      .about-grid,
      .services-grid,
      .feature-grid,
      .contact-grid{
        grid-template-columns:1fr;
      }
      .hero{
        min-height:80vh;
      }
      .hero-inner{
        padding:100px 0 70px;
      }
    }

    @media (max-width: 700px){
      .nav-inner{
        flex-wrap:wrap;
        justify-content:center;
      }
      .nav-links{
        justify-content:center;
        order:3;
        width:100%;
      }
      .nav-cta{
        width:100%;
      }
    }