@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

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

html, body{
  width:100%;
  min-height:100%;
}

body{
  overflow-x:hidden;
}

main{
  width:100%;
  min-height:100vh;
  background: linear-gradient(to top, rgb(93, 212, 146), white);
}

/* NAV */
.nav{
  width:100%;
  height:70px;
  background: linear-gradient(to right, #11998e, #088b3a);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
}

.nav img{
  width:80px;
  border-radius:10px;
  cursor:pointer;
}

.nav-items{
  display:flex;
  gap:1.2rem;
  list-style:none;
}

.nav-items a{
  text-decoration:none;
  color:white;
  font-weight:600;
  font-size:0.95rem;
  transition:0.3s;
}

.nav-items a:hover{
  color: rgb(4, 49, 9);
}

/* Hamburger Icon */
.nav-menu-i{
  display:none;
  color:white;
  font-size:1.4rem;
  cursor:pointer;
}

/* Ham Menu ✅ */
.Ham-menu{
  width:100%;
  height:100vh;
  background: linear-gradient(to right, #119925, #026829);
  position:fixed;
  top:0;
  left:-100%;
  z-index:999;
  display:none;
}

.Ham-Cross{
  position:absolute;
  top:20px;
  right:30px;
  font-size:2rem;
  font-weight:800;
  color: rgb(1, 53, 1);
  cursor:pointer;
  background:white;
  border-radius:50%;
  padding:0.5rem 0.7rem;
}

.Ham-items{
  list-style:none;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2rem;
}

.Ham-items li a{
  text-decoration:none;
  color:white;
  font-size:2rem;
  font-weight:700;
  transition:0.3s;
}

.Ham-items li a:hover{
  color: rgb(4, 49, 9);
}

/* HERO SECTION ✅ */
.Hero-Vdo{
  width:100%;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  position:relative;
}

.Hero-Vdo video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* HERO OVERLAY ✅ */
.hero-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:80px 18px 30px;
  background: rgba(0,0,0,0.35);
  color:white;
}

.hero-badge{
  display:inline-block;
  width:fit-content;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(17, 153, 142, 0.8);
  font-weight:700;
  letter-spacing:0.3px;
  margin-bottom:14px;
}

.hero-title{
  font-size:2.4rem;
  font-weight:900;
  line-height:1.15;
  max-width:850px;
}

.hero-subtitle{
  margin-top:12px;
  font-size:1rem;
  max-width:850px;
  opacity:0.95;
}

.hero-btns{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

.btn-primary{
  text-decoration:none;
  background: linear-gradient(to right, #11998e, #088b3a);
  color:white;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  cursor:pointer;
  transition:0.25s;
}

.btn-primary:hover{
  transform: translateY(-2px);
}

.btn-secondary{
  text-decoration:none;
  background: rgba(255,255,255,0.15);
  color:white;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,0.25);
  cursor:pointer;
  transition:0.25s;
}

.btn-secondary:hover{
  transform: translateY(-2px);
}

.hero-stats{
  margin-top:22px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.stat{
  background: rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:16px;
  padding:12px 14px;
  min-width:140px;
  backdrop-filter: blur(6px);
}

.stat h3{
  font-size:1.4rem;
  font-weight:900;
}

.stat p{
  font-size:0.9rem;
  opacity:0.92;
}

/* SECTION BASE */
.section{
  width:100%;
  padding:70px 0;
}

.container{
  width:min(1150px, 92%);
  margin:0 auto;
}

.section-head{
  text-align:center;
  margin-bottom:34px;
}

.section-tag{
  display:inline-block;
  width:fit-content;
  background: rgba(8, 139, 58, 0.15);
  color:#044d1c;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  margin-bottom:10px;
}

.section-title{
  font-size:2rem;
  font-weight:900;
  color:#033a17;
}

.section-desc{
  margin-top:10px;
  color:#0b3f1b;
  opacity:0.9;
  max-width:850px;
  margin-inline:auto;
  line-height:1.6;
}

/* ABOUT */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:20px;
  margin-top:26px;
}

.about-card{
  display:flex;
  gap:12px;
  padding:18px;
  border-radius:18px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom:14px;
}

.about-card i{
  font-size:1.8rem;
  color:#088b3a;
}

.about-card h3{
  font-size:1.1rem;
  color:#033a17;
  font-weight:900;
}

.about-card p{
  margin-top:6px;
  color:#114d23;
}

.about-box{
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.55));
  border: 1px solid rgba(0,0,0,0.06);
  border-radius:20px;
  padding:20px;
}

.about-box h3{
  color:#033a17;
  font-weight:900;
  margin-bottom:12px;
}

.about-box ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.about-box li{
  display:flex;
  align-items:center;
  gap:10px;
  color:#114d23;
  font-weight:700;
}

.about-box li i{
  color:#088b3a;
  font-size:1.2rem;
}

/* CARDS */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top:24px;
}

.info-card{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius:20px;
  padding:18px;
  text-align:left;
}

.info-card i{
  font-size:1.9rem;
  color:#088b3a;
}

.info-card h3{
  margin-top:10px;
  font-weight:900;
  color:#033a17;
}

.info-card p{
  margin-top:8px;
  color:#114d23;
  line-height:1.5;
}

/* GALLERY */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:24px;
}

.gallery-item{
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.6);
  height:220px;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.35s;
}

.gallery-item:hover img{
  transform: scale(1.06);
}

/* SERVICES */
.service-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:24px;
}

.service-card{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius:20px;
  padding:18px;
}

.service-card i{
  font-size:1.9rem;
  color:#088b3a;
}

.service-card h3{
  margin-top:10px;
  color:#033a17;
  font-weight:900;
}

.service-card p{
  margin-top:8px;
  color:#114d23;
  line-height:1.5;
}

/* REVIEWS */
.review-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:24px;
}

.review-card{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius:20px;
  padding:18px;
}

.stars{
  display:flex;
  gap:6px;
  color:#088b3a;
  font-size:1.1rem;
}

.review-text{
  margin-top:10px;
  color:#114d23;
  line-height:1.6;
  font-weight:600;
}

.review-user{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background: linear-gradient(to right, #11998e, #088b3a);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:white;
}

.review-user h4{
  font-weight:900;
  color:#033a17;
}

.review-user span{
  font-size:0.85rem;
  color:#114d23;
  opacity:0.9;
}

/* CONTACT */
.contact-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap:18px;
  margin-top:26px;
}

.contact-box{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius:20px;
  padding:16px;
  display:flex;
  gap:12px;
  margin-bottom:14px;
}

.contact-box i{
  font-size:1.8rem;
  color:#088b3a;
}

.contact-box h3{
  color:#033a17;
  font-weight:900;
}

.contact-box p{
  margin-top:4px;
  color:#114d23;
}

.contact-form{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius:20px;
  padding:18px;
}

.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.15);
  outline:none;
  margin-top:12px;
  font-size:0.95rem;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#088b3a;
}

.form-btn{
  margin-top:14px;
  width:100%;
  justify-content:center;
}

.form-note{
  margin-top:10px;
  font-weight:700;
  color:#033a17;
}

/* FOOTER */
.footer{
  background: linear-gradient(to right, #0f8f83, #026829);
  color:white;
  padding-top:40px;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:16px;
  padding-bottom:24px;
}

.footer-left h3{
  font-weight:900;
  margin-bottom:10px;
}

.footer-left p{
  opacity:0.95;
  line-height:1.6;
}

.footer-social{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.footer-social a{
  color:white;
  font-size:1.3rem;
  background: rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.2);
  padding:8px 10px;
  border-radius:12px;
  transition:0.25s;
  text-decoration:none;
}

.footer-social a:hover{
  transform: translateY(-2px);
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-links h4{
  font-weight:900;
  margin-bottom:8px;
}

.footer-links a{
  color:white;
  text-decoration:none;
  opacity:0.95;
  padding:6px 0;
  display:inline-block;
}

.footer-links a:hover{
  opacity:1;
  text-decoration:underline;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.18);
  padding:14px 0;
  text-align:center;
  opacity:0.95;
}

/* ✅ GSAP reveal default */
.reveal{
  opacity:0;
  transform: translateY(35px);
}

/* Responsive */
@media (max-width:992px){
  .cards-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .service-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .review-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .about-grid{
    grid-template-columns: 1fr;
  }
  .contact-grid{
    grid-template-columns: 1fr;
  }

  .footer-grid{
    grid-template-columns: 1fr 1fr;
    gap:20px;
    text-align:left;
  }

  .footer-social{
    flex-wrap:wrap;
  }
}

@media (max-width:768px){
  .nav-items{
    display:none;
  }
  .nav-menu-i{
    display:block;
  }

  .hero-title{
    font-size:2.65rem;
  }

  .gallery-item{
    height:190px;
  }
}

@media (max-width:600px){
  .footer-grid{
    grid-template-columns: 1fr;
    text-align:center;
  }

  .footer-links{
    align-items:center;
  }

  .footer-social{
    justify-content:center;
  }

  .footer-left p{
    max-width:350px;
    margin:0 auto;
  }
}

@media (max-width:520px){
  .hero-title{
    font-size:2.55rem;
  }

  .form-row{
    grid-template-columns: 1fr;
  }

  .cards-grid,
  .gallery-grid,
  .service-grid,
  .review-grid{
    grid-template-columns: 1fr;
  }

  .Ham-items li a{
    font-size:1.7rem;
  }
}