.hero {
  min-height: 100vh;
  background: #f7f7f5;
  padding: 80px 20px; /* less left/right outside space */
  overflow: hidden;
}
.logo {
  height: 150px;       /* Controls logo size */
  width: auto;        /* Keeps proportions */
  object-fit: contain;
  margin: 0px;
  padding: 0px;
}

.hero-container {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 140px; /* more whitespace between text and image */
  background:
        url("images/leaf-background.png")
        center/cover no-repeat;
}

.hero-content {
  flex: 0 0 42%;
  max-width:900px;
  z-index:2;
}

.hero-image {
  flex: 0 0 58%;
  display: flex;
  justify-content: flex-end;
  margin-left: 50px;

}

.image-shape {
  width: 100%;
  height: 85vh;
  overflow: hidden;

  border-radius:
    35% 0 0 35% /
    20% 0 0 20%;

  border: 12px solid #38a169;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.image-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile */
@media (max-width: 900px) {
  .hero {
    padding: 60px 20px;
  }

  .hero-container {
    flex-direction: column;
    gap: 50px;
    text-align: center;
  }

  .hero-content,
  .hero-image {
    flex: 0 0 100%;
    width: 100%;
  }

  .image-shape {
    height: 420px;
    border-radius: 30px;
  }

  .call-btn{
    display: none;
  }

  header{
    padding:20px;
    flex-direction:column;
    gap:15px;
  }

      nav a{
        margin:0 10px;
      }

      .hero h1{
        font-size:42px;
      }

      .about{
        grid-template-columns:1fr;
      }

      section{
        padding:60px 20px;
      }
}

/* NAVBAR */
    header{
      position:sticky;
      top:0;
      z-index:1000;
      background:white;
      padding:20px 40px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      box-shadow:0 2px 10px rgba(0,0,0,0.08);
    }


    nav a{
      text-decoration:none;
      margin-left:25px;
      color:#333;
      font-weight:600;
    }

    nav a:hover{
      color:#2f855a;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

    body{
      background:#f5f5f5;
      color:#222;
      line-height:1.6;
    }

    .btn-primary,
.btn-secondary{
  padding:16px 34px;
  border-radius:50px;
  text-decoration:none;
  font-weight:700;
  transition:0.3s ease;
}

.btn-primary{
  background:#38a169;
  color:white;
}

.btn-primary:hover{
  background:#2f855a;
}

.btn-secondary{
  border:2px solid #38a169;
  color:#38a169;
  background:transparent;
}

.btn-secondary:hover{
  background:#38a169;
  color:white;
}
.btn-primary,
.btn-secondary{
  padding:16px 34px;
  border-radius:50px;
  text-decoration:none;
  font-weight:700;
  transition:0.3s ease;
}

.btn-primary{
  background:#38a169;
  color:white;
}

.btn-primary:hover{
  background:#2f855a;
  color:white;
}

.btn-secondary{
  border:2px solid #38a169;
  color:#38a169;
  background:transparent;
}

.btn-secondary:hover{
  background:#38a169;
  color:white;
}

/* BUTTONS */
.hero-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
/* HERO SECTION */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:80px 8%;
  gap:60px;
  background:#f7f7f5;
  overflow:hidden;
}
.hero h1{
  font-size:clamp(4rem, 8vw, 7rem);
  line-height:0.95;
  color:#1e293b;
  margin-bottom:30px;
  font-weight:800;
}

.hero h1 span{
  color:#38a169;
}

.hero-text{
  font-size:20px;
  line-height:1.8;
  color:#555;
  max-width:550px;
  margin-bottom:40px;
}


    /* SECTIONS */
    section{
      padding:90px 40px;
      max-width:1500px;
      margin:auto;
    }

    .section-title{
      text-align:center;
      margin-bottom:50px;
    }

    .section-title h2{
      font-size:40px;
      margin-bottom:10px;
    }

    .section-title p{
      color:#666;
    }

    /* SERVICES */
    .services-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:25px;
    }

    .service-card{
      background:white;
      padding:30px;
      border-radius:16px;
      box-shadow:0 10px 25px rgba(0,0,0,0.08);
      transition:0.3s;
    }

    .service-card:hover{
      transform:translateY(-5px);
    }

    .service-card h3{
      margin-bottom:15px;
      color:#2f855a;
    }

    /* GALLERY */
    .gallery{
      position:relative;
      max-width:800px;
      margin:40px auto 0;
    }

    .gallery img{
      width:100%;
      border-radius:16px;
      display:none;
    }

    .gallery img.active{
      display:block;
    }

    .gallery-btn{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      border:none;
      background:rgba(0,0,0,0.6);
      color:white;
      padding:12px 16px;
      cursor:pointer;
      border-radius:8px;
    }

    .prev{
      left:15px;
    }

    .next{
      right:15px;
    }

    /* ABOUT */
    .about{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:40px;
      align-items:center;
    }

    .about img{
      width:100%;
      border-radius:16px;
    }

    /* CONTACT */
    .contact-box{
      background:white;
      padding:40px;
      border-radius:16px;
      box-shadow:0 10px 25px rgba(0,0,0,0.08);
      max-width:700px;
      margin:auto;
    }

    form{
      display:grid;
      gap:15px;
    }

    input,
    textarea{
      padding:14px;
      border:1px solid #ddd;
      border-radius:8px;
      font-size:16px;
    }

    button{
      border:none;
      padding:14px;
      background:#38a169;
      color:white;
      border-radius:8px;
      font-size:16px;
      cursor:pointer;
    }

    button:hover{
      background:#2f855a;
    }

    footer{
      background:#111;
      color:white;
      text-align:center;
      padding:30px;
      margin-top:60px;
    }



footer{
  background:#1e293b;
  padding:40px 8%;
  text-align:center;
}

.social-icons{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top: 15px;
}

.social-icons a{
  width:40px;
  height:40px;
  background:white;
  color:#1e293b;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  text-decoration:none;
  transition:0.3s ease;
}

.social-icons a:hover{
  background:#38a169;
  color:white;
  transform:translateY(-5px);
}