.donateHero{
  min-height:72vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(120deg, rgba(8,41,98,.88), rgba(70,152,47,.72)),
    url("../assets/children19.jpg") center/cover no-repeat;
  color:#fff;
  padding:130px 0 90px;
}

.donateHeroInner{
  max-width:850px;
}

.donateLabel{
  display:inline-block;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(12px);
  padding:10px 18px;
  border-radius:50px;
  font-weight:700;
  margin-bottom:22px;
}

.donateHero h1{
  font-size:clamp(42px,6vw,78px);
  line-height:1.05;
  margin-bottom:22px;
  max-width:850px;
}

.donateHero p{
  font-size:20px;
  line-height:1.8;
  max-width:760px;
  opacity:.95;
}

.donationCauses{
  padding:100px 0;
  background:#f7f8fb;
}

.donationGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:50px;
}

.donationCard{
  position:relative;
  background:#fff;
  padding:34px 28px;
  border-radius:28px;
  border:1px solid rgba(8,41,98,.08);
  box-shadow:0 20px 50px rgba(8,41,98,.08);
  transition:.35s ease;
  overflow:hidden;
}

.donationCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(70,152,47,.12), transparent 55%);
  opacity:0;
  transition:.35s ease;
}

.donationCard:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 70px rgba(8,41,98,.14);
}

.donationCard:hover::before{
  opacity:1;
}

.donationIcon{
  position:relative;
  width:68px;
  height:68px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:rgba(70,152,47,.12);
  color:#46982f;
  font-size:28px;
  margin-bottom:24px;
}

.donationCard h3{
  position:relative;
  color:#082962;
  font-size:23px;
  margin-bottom:14px;
}

.donationCard p{
  position:relative;
  color:#52606f;
  line-height:1.8;
  margin-bottom:28px;
}

.causeBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:50px;
  background:#082962;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  transition:.3s;
}

.causeBtn:hover{
  background:#46982f;
  transform:translateY(-2px);
}

@media(max-width:1000px){
  .donationGrid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:650px){
  .donateHero{
    min-height:62vh;
    padding:110px 22px 70px;
  }

  .donateHero p{
    font-size:17px;
  }

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

  .donationCauses{
    padding:70px 0;
  }
}