*{
  font-family: "Josefin Sans", sans-serif;
  letter-spacing:.04em;
}


:root{
  --green:#2f7d32;
  --orange:#f57c00;
  --dark:#1f2b1f;
  --white:#ffffff;
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:'Inter',sans-serif;
  background:#fff;
  color:var(--dark);
  line-height:1.6;
}

/* CONTAINER */
.container{max-width:1200px;margin:auto;padding:0 20px;}

/* NAV */
.nav{
  position:fixed;top:0;width:100%;background:#fff;z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.nav-inner{
  display:flex;justify-content:space-between;align-items:center;height:80px;
}
.logo{height:65px;}
nav a{margin:0 15px;font-weight:600;color:var(--dark);}
nav a:hover{color:var(--orange);}
.lang-btn{border:2px solid var(--orange);color:var(--orange);background:none;padding:6px 12px}


body.mobile .hero{background-attachment:scroll;}
body.desktop .hero{background-attachment:fixed;}

/* HERO */
.hero{
  height:100vh;position:relative;display:flex;align-items:center;
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url("https://images.unsplash.com/photo-1501004318641-b39e6451bec6?q=80&w=2000")
    center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:url("assets/projects/wa1.jpg") center/cover no-repeat;
  opacity:.55;mix-blend-mode:screen;
}
.hero-content{position:relative;color:#fff;max-width:700px;padding:20px;}
.hero h1{font-size:52px;line-height:1.2;margin-bottom:20px;}
.hero p{font-size:20px;margin-bottom:30px;}
.btn{background:var(--orange);color:#fff;padding:12px 22px;border-radius:4px}

/* SECTIONS */
.section{padding:100px 0}
.section.alt{background:#f9fff9}
h2{text-align:center;font-size:40px;margin-bottom:50px}

/* GRID */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.card{background:#fff;padding:30px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08)}

/* SPLIT */
.split{display:grid;grid-template-columns:2fr 1fr;gap:40px}
.stat{background:var(--green);color:#fff;padding:40px;border-radius:10px;text-align:center}

/* GALLERY */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}
.gbox{height:220px;border-radius:10px;background-size:cover;background-position:center}

/* CTA */
.cta{text-align:center;background:var(--green);color:#fff;padding:80px 20px}
.cta p{margin-bottom:30px}

/* CONTACT */
.contact-line{text-align:center;margin:12px 0}
.contact-line i{color:var(--orange);margin-right:8px}
.contact-line a{color:var(--dark);font-weight:600}

/* FOOTER */
.footer{background:#111;color:#fff;text-align:center;padding:20px}

.carousel-wrapper{
  position:relative;
  width:100%;
  overflow:hidden;
}
.carousel{
  display:flex;
  gap:15px;
  transition:transform .5s ease;
}
.carousel .gbox{
  min-width:280px;
  height:220px;
  border-radius:10px;
  background-size:cover;
  background-position:center;
}

/* arrows */
.car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:32px;
  width:44px;height:44px;
  border-radius:50%;
  cursor:pointer;
}
.car-btn.prev{left:10px}
.car-btn.next{right:10px}
/* EARTH-STYLE FOOTER */
.earth-footer{
  background:#2b2b2b;
  color:#fff;
  padding:90px 20px 40px;
  font-family:'Inter',sans-serif;
  position:relative;
}

.earth-center{
  max-width:800px;
  margin:0 auto;
  text-align:center;
}

.earth-title{
  font-size:12px;
  letter-spacing:5px;
  font-weight:400;
  margin-bottom:25px;
  color:var(--orange);
}

.earth-line{
  font-size:11px;
  letter-spacing:3px;
  margin:12px 0;
  opacity:.85;
}

.earth-copy{
  position:absolute;
  bottom:20px;
  left:40px;
  font-size:10px;
  letter-spacing:4px;
  opacity:.4;
}
/* ===== MOBILE ADAPTATION ===== */
@media (max-width: 900px){

  .hero h1{font-size:32px;}
  .hero p{font-size:16px;}

  .nav-inner{
    flex-direction:column;
    height:auto;
    padding:10px 0;
  }

  .logo{height:50px;margin-bottom:10px;}

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

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

  .earth-copy{
    position:static;
    text-align:center;
    margin-top:30px;
  }

  .carousel .gbox{
    min-width:220px;
    height:180px;
  }
}
/* ===== MOBILE HEADER FIX ===== */
@media (max-width: 768px){

  .nav{
    position:relative;
    box-shadow:none;
  }

  .nav-inner{
    flex-direction:column;
    height:auto;
    padding:10px 0;
    gap:10px;
  }

  .logo{
    height:48px;
  }

  nav a{
    margin:5px 10px;
    font-size:14px;
  }

  .hero{
    min-height:90vh;
    padding-top:20px;
  }

  .hero-content{
    padding:20px;
  }

  .hero h1{
    font-size:28px;
    line-height:1.3;
  }

  .hero p{
    font-size:15px;
  }
}