/* ================= GLOBAL ================= */

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

body{
  background:#f7f7f7;
  color:#24352f;
  line-height:1.6;
}

.container{
  max-width:1200px;
  margin:auto;
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

/* ================= BUTTON ================= */

.btn-primary{
  display: flex;
  align-items: center;
  gap: 12px;
  background:#ffffff;
  border:none;
  padding: 5px 5px 5px 20px;
  border-radius:30px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
.btn-primary-gold{
  display: flex;
  align-items: center;
  gap: 12px;
  background:linear-gradient(90deg, #E2BB53 0%, #FCE383 50%, #DDB64E 100%);
  border:none;
  padding: 5px 5px 5px 20px;
  border-radius:30px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.btn-primary-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.btn-primary .gold{
    background: linear-gradient(90deg, #E2BB53 0%, #FCE383 50%, #DDB64E 100%);
    height: 42px;
    width: 42px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 21px;
}
.btn-primary-gold .white{
    background: #ffffff;
    height: 42px;
    width: 42px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 21px;
}

.li-count{
    background: #fff;
    border-radius: 21px;
    padding: 5px 13px 5px 12px;
}

/* ================= HERO ================= */

.hero{
  height:720px;
  border-radius:24px;
  margin:30px;
  background:url("hero.png") center/cover no-repeat;
  position:relative;
  overflow:hidden;
  color:white;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.25) 60%
  );
}

.hero-content{
  position:relative;
  max-width:800px;
  padding:140px 80px;
}

.hero h1{
  font-size:48px;
  line-height:1.2;
  margin-bottom:20px;
}

/* ================= NAVBAR ================= */

.navbar{
  position:absolute;
  top:25px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  max-width:1200px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 24px;
  border-radius:50px;

  backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.15);
}

.logo{
  font-weight:700;
}

.logo img {
   width: 200px;
}

.nav-menu{
  list-style:none;
  display:flex;
  gap:15px;
  margin: 0;
}

.nav-menu li{
  cursor:pointer;
    padding: 1px 15px 2px 15px;
    border-radius: 50px;
    backdrop-filter: blur(12px);
    background: rgb(255 255 255 / 0%);
}

.nav-menu li.active{
    background: #fff;
    color: #000;
}

/* ================= SUPPORT ================= */

.support{
  background:linear-gradient(135deg,#dfe7e3,#f6f5ef);
  padding:80px 0;
  margin:30px;
  border-radius:24px;
}

.support img{
  width:100%;
  border-radius:18px;
}

.support h2{
  font-size:40px;
  margin-bottom:15px;
  color: #355244;
  font-family: math;
  font-weight: 700;
}

.features{
  margin-top:25px;
  list-style:none;
}

.features li{
  margin-bottom:10px;
}

/* ================= GOAL / STATS ================= */

.goal{
  margin:30px;
  border-radius:24px;
  padding:90px 60px;
  color:white;
  background:url("mission.png") center/cover no-repeat;
  position:relative;
}

.goal::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  border-radius:24px;
}

.goal-content{
  position:relative;
  max-width:700px;
}

.goal-content h2{
  font-family: emoji;
  font-size: 55px;
}

.stats{
  margin-top:40px;
  display:flex;
  gap:20px;
}

.stat{
    display: flex;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(6px);
    padding: 22px 90px 22px 26px;
    flex-direction: column;
    justify-content: space-between;
}

.stat h2 {
    color: #EED869;
}

.stat.highlight{
  background:url("stat-highlight.png") center/cover no-repeat;
  color:#ffffff;
}

/* ================= HOW ================= */

.how{
  margin:80px auto;
  padding: 60px 0px;
  text-align:center;
  background: linear-gradient(90deg, #355244 0%, #35524430 50%);
}

.how h2{
 color: #355244;
}

.icon-check{
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
}

.icon-check img {
    width: 40px;
}

.steps{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.step{
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding:16px;
  border-radius:12px;
  background:#ffffff;
  font-weight:500;
}





/* ================= BENEFITS ================= */

.benefits{
  margin:30px;
  padding:80px;
  border-radius:24px;
  background:url("benefits.png") center/cover no-repeat;
  display:flex;
  justify-content:center;
  gap:50px;
  position:relative;
}

.benefits::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  border-radius:24px;
}

.circle{
  position:relative;
  width:280px;
  height:280px;
  border-radius:50%;
  border:3px solid white;
  color:white;
  display:flex;
  gap: 10px;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:600;
}

/* ================= SERVICES ================= */

.services{
  text-align:center;
  padding:80px 0;
  text-align: -webkit-center;
}

.services h2{
    color: #355244;
     margin-bottom: 60px;
}

.service-grid{
  display:flex;
  justify-content:center;
  gap:30px;
  margin:40px 0;
}

.service-card{
  height: 330px;
  width:260px;
  border-radius:20px;
  overflow:hidden;
  background:white;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  align-content: end;
}

.service-card img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.service-card h3{
  padding:18px;
  font-size:16px;
  color: #ffff;
}

.service-card p{
  font-size:12px;
  color: #ffff;
}

/* ================= FOOTER ================= */

.footer{
  background:#2f4a40;
  color:white;
  margin:30px;
  border-radius:24px;
  padding:60px 60px 5px 60px;
}

.footer .phone{
    font-size: 30px;
    color: #EED869;
    margin: 0;
}

.footer .newsletter p{
font-size: 25px;
}

.footer-grid{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}

.footer input{
    width: 100%;
  padding:10px 15px;
  border-radius:30px;
  border:none;
  margin-top:10px;
}

.footer .links p{
    margin-bottom: 7px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

  .two-col{
    grid-template-columns:1fr;
  }

  .stats{
    flex-wrap:wrap;
  }

  .service-grid{
    flex-direction:column;
    align-items:center;
  }

  .benefits{
    flex-direction:column;
    align-items:center;
  }

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

  .hero-content{
    padding:120px 30px;
  }

}