.blogHero{
    position:relative;
    min-height:450px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:url('../assets/children10.jpg') center center/cover;
    overflow:hidden;
}

.blogHeroOverlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(8,41,98,.85),
        rgba(8,41,98,.65)
    );
}

.blogHeroContent{
    position:relative;
    z-index:2;
    text-align:center;
    color:white;
    max-width:900px;
}

.blogLabel{
    display:inline-block;
    background:rgba(237,170,4,.18);
    color:#edaa04;
    padding:10px 18px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.15em;
    margin-bottom:20px;
}

.blogHero h1{
    color:white;
    font-size:clamp(48px,7vw,84px);
    margin-bottom:20px;
}

.blogHero p{
    color:rgba(255,255,255,.85);
    font-size:20px;
    line-height:1.8;
}

.featuredBlog{
    padding:100px 0;
    background:#f8fafb;
}

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

.featuredImage img{
    width:100%;
    height:450px;
    object-fit:cover;
    border-radius:32px;
    box-shadow:var(--shadow);
}

.category{
    color:var(--gold);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.featuredContent h2{
    text-align:left;
    margin:18px 0;
}

.featuredContent p{
    color:var(--muted);
    line-height:1.8;
    margin-bottom:24px;
}

.readMore{
    display:inline-block;
    background:var(--blue);
    color:white;
    padding:14px 24px;
    border-radius:999px;
    font-weight:800;
}

.blogSection{
    padding:40px 0 100px;
    background:white;
}

.blogGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.blogCard{
    background:white;
    border-radius:28px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:0 18px 52px rgba(8,41,98,.07);
    transition:.3s;
}

.blogCard:hover{
    transform:translateY(-6px);
}

.blogCard img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.blogBody{
    padding:24px;
}

.blogBody span{
    color:var(--green);
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.blogBody h3{
    margin:12px 0;
    color:var(--blue);
}

.blogBody p{
    color:var(--muted);
    line-height:1.7;
}

@media (max-width: 768px) {
  .campaignGrid,
  .blogGrid,
  .programGrid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .campaign,
  .blogCard,
  .programCard {
    width: 100%;
    max-width: 100%;
  }

  .campaignImage,
  .blogImage,
  .programImage {
    height: 240px;
  }

  .campaignImage img,
  .blogImage img,
  .programImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


@media (max-width: 768px) {
  .featuredGrid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .featuredImage {
    width: 100%;
    height: 280px;
  }

  .featuredImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 32px;
  }

  .featuredContent {
    width: 100%;
    text-align: left;
  }

  .featuredContent h2 {
    font-size: 2.2rem;
    line-height: 1.05;
  }

  .featuredContent p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .readMore {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}



@media (max-width: 420px) {
  .featuredContent h2 {
    font-size: 1.85rem;
  }

  .featuredImage {
    height: 240px;
  }

  .featuredBlog {
    padding: 50px 0;
  }
}