/* ===== GLOBAL ===== */
body{
  font-family: 'Poppins', sans-serif;
  background:#f8f9fa;
}

/* ===== HERO ===== */
#hero{
  background: linear-gradient(rgba(11,37,69,0.95),rgba(13,45,86,0.85)),
              url("assets/images/women-hero.jpg") center/cover no-repeat;
  padding:120px 20px;
  text-align:center;
  color:#fff;
}

.hero-bg h1{
  font-size:42px;
  font-weight:700;
}

.hero-bg p{
  max-width:700px;
  margin:15px auto 30px;
}

.hero-bg button{
  margin:5px;
  padding:12px 25px;
  border:none;
  background:#038fed;
  color:#fff;
  font-weight:500;
  border-radius:5px;
  cursor:pointer;
}

/* ===== COMMON SECTION ===== */
section{
  padding:80px 20px;
}

section h2{
  text-align:center;
  margin-bottom:40px;
  font-weight:600;
  color:#6a1b6a;
}

/* ===== ABOUT ===== */

#about .container{
  max-width:900px;
  text-align:center;
}

#about .values span{
 display:none;
  margin:10px;
  font-weight:500;
}

/* ===== PROGRAMS ===== */
#programs .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

#programs .card{
  padding:25px;
  border:none;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  text-align:center;
}

/* ===== SUCCESS ===== */
#success .carousel{
  display:flex;
  gap:20px;
  justify-content:center;
  overflow-x:auto;
}

#success .story{
  background:#fff;
  padding:20px;
  min-width:260px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  text-align:center;
}


/* ================= MOBILE ================= */
@media(max-width: 768px){
  #events h2{
    font-size: 30px;
  }

  #events .event-card{
    padding: 28px 25px;
  }
}


/* ================= GALLERY (ADVANCED + ANIMATED) ================= */

#gallery{
  background: #f8fafc;
}

#gallery h2{
  font-size: 36px;
  color: #1e3a8a;
  margin-bottom: 50px;
}

/* grid */
#gallery .gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: auto;
}

/* image + video card */
#gallery .gallery-grid img,
#gallery .gallery-grid video{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
  transition: all 0.5s ease;
  cursor: pointer;
  position: relative;

  /* animation */
  opacity: 0;
  transform: scale(0.9) translateY(30px);
  animation: galleryFade 0.8s ease forwards;
}

/* BLUE BORDER LAYER */
#gallery .gallery-grid img::after,
#gallery .gallery-grid video::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  pointer-events: none;
}

/* stagger animation */
#gallery .gallery-grid img:nth-child(1),
#gallery .gallery-grid video:nth-child(1){ animation-delay: 0.1s; }

#gallery .gallery-grid img:nth-child(2),
#gallery .gallery-grid video:nth-child(2){ animation-delay: 0.25s; }

#gallery .gallery-grid img:nth-child(3),
#gallery .gallery-grid video:nth-child(3){ animation-delay: 0.4s; }

/* hover zoom + glow + border */
#gallery .gallery-grid img:hover,
#gallery .gallery-grid video:hover{
  transform: scale(1.05);
  box-shadow: 0 30px 60px rgba(37,99,235,0.35);
}

#gallery .gallery-grid img:hover::after,
#gallery .gallery-grid video:hover::after{
  border-color: #2563eb;
}

/* animation keyframes */
@keyframes galleryFade{
  to{
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ================= MOBILE ================= */
@media(max-width: 768px){
  #gallery .gallery-grid img,
  #gallery .gallery-grid video{
    height: 220px;
  }
}




/* ================= GET INVOLVED (ADVANCED + ANIMATED) ================= */



/* ================= MOBILE ================= */
@media(max-width: 768px){
  #involved h2{
    font-size: 30px;
  }
}


/* common */
.hero-bg button{
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 34px;
  border-radius: 10px;
}

/* JOIN OUR PROGRAMS (PRIMARY BLUE) */
#hero .hero-bg button:first-child{
  background-color: #2563eb;   /* BLUE */
  color: #ffffff;
  border: none;
}

/* hover */
#hero .hero-bg button:first-child:hover{
  background-color: #1e40af;
}


/* LEARN MORE (OUTLINE STYLE) */
.hero-bg button:last-child{
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.7);
}

/* hover */
.hero-bg button:last-child:hover{
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  transform: translateY(-4px);
}

/* ===== AOS-LIKE FADE-UP ANIMATION ===== */
.hero-bg h1{
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.9s ease forwards;
}

.hero-bg p{
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.9s ease forwards;
  animation-delay: 0.2s;
}

.hero-bg button{
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.9s ease forwards;
  animation-delay: 0.4s;
}

@keyframes fadeUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
/* Join Our Programs button */
#hero .hero-bg button:first-child{
  background-color: #2563eb;   /* BLUE */
  color: #ffffff;
  border: none;
}

/* hover effect (optional but same as rural) */
#hero .hero-bg button:first-child:hover{
  background-color: #d1d7ef;
}
/* ================= ABOUT SECTION (PROGRAMS STYLE MATCH) ================= */

#about{
  background: var(--bg-light);
}

/* container spacing same feel */
#about .container{
  margin-top: 20px;
}

/* title */
#about .section-title{
  font-size: 36px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 24px;

  /* animation */
  opacity: 0;
  transform: translateY(40px);
  animation: aboutFade 0.9s ease forwards;
}

/* text */
#about p{
  font-size: 15.5px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 14px;

  opacity: 0;
  transform: translateY(40px);
  animation: aboutFade 0.9s ease forwards;
}

/* stagger text animation */
#about p:nth-of-type(1){ animation-delay: 0.2s; }
#about p:nth-of-type(2){ animation-delay: 0.35s; }

/* VALUES – card feel like programs */
#about .values{
  margin-top: 18px;
}

#about .values span{
  display: inline-block;
  background: #ffffff;
  padding: 10px 22px;
  margin: 8px 10px 0 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  position: relative;
  overflow: hidden;

  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: all 0.35s ease;

  opacity: 0;
  transform: translateY(40px);
  animation: aboutFade 0.9s ease forwards;
}

/* stagger values */
#about .values span:nth-child(1){ animation-delay: 0.5s; }
#about .values span:nth-child(2){ animation-delay: 0.65s; }
#about .values span:nth-child(3){ animation-delay: 0.8s; }

/* hover like program cards */
#about .values span:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(37,99,235,0.35);
  color: #2563eb;
}

/* blue border animation */
#about .values span::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: all 0.35s ease;
}

#about .values span:hover::after{
  border-color: #2563eb;
}

/* IMAGE – same hover feel */
#about .about-img{
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.18);
  transition: all 0.6s ease;

  opacity: 0;
  transform: translateY(40px);
  animation: aboutFade 0.9s ease forwards;
  animation-delay: 0.3s;
}

#about .about-img:hover{
  transform: scale(1.05);
  box-shadow: 0 35px 70px rgba(37,99,235,0.35);
}

/* animation keyframes (same logic as programs) */
@keyframes aboutFade{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= MOBILE ================= */
@media(max-width: 991px){
  #about{
    text-align: center;
  }

  #about .section-title{
    font-size: 30px;
    text-align: center !important;
  }
}


/* ================= PROGRAMS SECTION (FINAL PROFESSIONAL) ================= */

#programs{
  background: var(--bg-section);
}

#programs h2{
  font-size: 36px;
  color: #1e3a8a;
}

/* GRID */
#programs .grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

/* CARD */
#programs .card{
  background: #ffffff;
  padding: 30px 25px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;

  /* animation */
  opacity: 0;
  transform: translateY(40px);
  animation: programFade 0.9s ease forwards;
}

/* stagger animation */
#programs .card:nth-child(1){animation-delay:0.1s;}
#programs .card:nth-child(2){animation-delay:0.2s;}
#programs .card:nth-child(3){animation-delay:0.3s;}
#programs .card:nth-child(4){animation-delay:0.4s;}
#programs .card:nth-child(5){animation-delay:0.5s;}
#programs .card:nth-child(6){animation-delay:0.6s;}
#programs .card:nth-child(7){animation-delay:0.7s;}
#programs .card:nth-child(8){animation-delay:0.8s;}

/* hover lift */
#programs .card:hover{
  transform: translateY(-12px);
  box-shadow: 0 25px 55px rgba(0,0,0,0.15);
}

/* top accent line */
#programs .card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg,#2563eb,#9333ea);
}

/* title */
#programs .card h3{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1e293b;
}

/* text */
#programs .card p{
  font-size: 15px;
  color: #475569;
  line-height: 1.6;
}

/* BUTTON */
#programs .card button{
  margin-top: 18px;
  padding: 12px 26px;
  border-radius: 30px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(135deg,#2563eb,#1e40af);
  color: #ffffff;
  transition: all 0.35s ease;
}

/* button hover */
#programs .card button:hover{
  background: linear-gradient(135deg,#1e40af,#172554);
  transform: scale(1.05);
}

/* animation keyframes */
@keyframes programFade{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= MOBILE ================= */
@media(max-width: 768px){
  #programs h2{
    font-size: 30px;
  }
}
/* ================= PROGRAMS HOVER EFFECTS ================= */

/* card glow + border animation */
#programs .card{
  position: relative;
}

#programs .card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 2px solid transparent;
  transition: all 0.4s ease;
}

#programs .card:hover::after{
  border-color: #2563eb;
}

/* title color change on hover */
#programs .card:hover h3{
  color: #2563eb;
  transition: 0.3s ease;
}

/* text smooth */
#programs .card p{
  transition: 0.3s ease;
}

#programs .card:hover p{
  color: #1e293b;
}

/* button glow */
#programs .card button{
  box-shadow: 0 10px 25px rgba(37,99,235,0.35);
}

#programs .card button:hover{
  box-shadow: 0 15px 35px rgba(30,64,175,0.6);
}

/* subtle background wave */
#programs .card:hover{
  background: linear-gradient(180deg,#ffffff,#f1f5ff);
}

/* ================= SUCCESS STORIES (ADVANCED LIKE PROGRAMS) ================= */

#success{
  background: var(--bg-light);
}

#success h2{
  font-size: 36px;
  color: #1e3a8a;
  margin-bottom: 60px;
  text-align: center;
}

/* GRID */
#success .carousel{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  max-width: 900px;
  margin: auto;
}

/* CARD */
#success .story{
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.45s ease;

  /* animation like programs */
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  animation: successFade 0.9s cubic-bezier(.22,.61,.36,1) forwards;
}

/* stagger animation */
#success .story:nth-child(1){ animation-delay: 0.15s; }
#success .story:nth-child(2){ animation-delay: 0.35s; }

/* top gradient strip */
#success .story::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,#2563eb,#9333ea);
}

/* image */
#success .story img{
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 18px;
  border: 5px solid #e0e7ff;
  transition: 0.4s ease;
}

/* name */
#success .story h4{
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1e293b;
  transition: 0.3s ease;
}

/* role */
#success .story .role{
  font-size: 13px;
  color: #2563eb;
  font-weight: 500;
  margin-bottom: 18px;
  display: block;
}

/* bio text */
#success .story p{
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  font-style: italic;
  transition: 0.3s ease;
}

/* hover effects (same level as programs) */
#success .story:hover{
  transform: translateY(-14px) scale(1.02);
  box-shadow: 0 35px 70px rgba(0,0,0,0.16);
}

#success .story:hover img{
  transform: scale(1.08);
  border-color: #2563eb;
}

#success .story:hover h4{
  color: #2563eb;
}

#success .story:hover p{
  color: #1e293b;
}

/* border glow */
#success .story::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 2px solid transparent;
  transition: 0.4s ease;
}

#success .story:hover::after{
  border-color: #2563eb;
}

/* animation keyframes */
@keyframes successFade{
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================= MOBILE ================= */
@media(max-width: 768px){
  #success h2{
    font-size: 30px;
  }
}
.scroll-top-btn{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 12px 24px rgba(37,99,235,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.scroll-top-btn.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
:root{
  --primary:#2563eb;
  --primary-dark:#1e3a8a;

  --bg-light:#f8fafc;
  --bg-section:#eef2f7;
  --bg-white:#ffffff;
  --bg-dark:#0f172a;

  --text-dark:#1e293b;
  --text-light:#64748b;
}

/* CTA Section */
.cta-section{
background: linear-gradient(135deg,#2563eb,#1e40af);
color:white;
border-top:1px solid rgba(255,255,255,0.1);
}

.section{
padding:80px 0;
}

.cta-section:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url('https://www.transparenttextures.com/patterns/diagonal-striped-brick.png');
opacity:0.1;
z-index:1;
}

.cta-content{
position:relative;
z-index:2;
}

.cta-title{
color:white !important;
}

.cta-btns .btn{
padding:0.75rem 2rem;
font-weight:600;
margin:0.5rem;
border-radius:8px;
font-size:1.1rem;
transition:all 0.3s ease;
}

.cta-btns .btn-light{
background:white;
color:var(--primary);
}

.cta-btns .btn-light:hover{
background:rgba(255,255,255,0.9);
transform:translateY(-3px);
box-shadow:0 10px 20px rgba(255,255,255,0.2);
}

.cta-btns .btn-outline-light:hover{
background:rgba(255,255,255,0.1);
transform:translateY(-3px);
}
#about h2::after,
#about .section-title::after{
  display: none !important;
}