/* =========================
   GLOBAL
========================= */
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: #f7f9fc;
  color: #1a2b4c;
}



/* HERO SLIDESHOW (GLOBAL FIX) */
/* ==========================================
   HERO
========================================== */

.hero{

    position:relative;

    height:90vh;

    overflow:hidden;

}

/* Slides */

.hero-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center center;

    opacity:0;

    transition:opacity 1.2s ease;

}

.hero-slide.active{

    opacity:1;

}

/* Dark overlay */

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:2;

}

/* Content */

.hero-content{

    position:absolute;

    left:4%;

    bottom:4%;

    max-width:1000px;

    color:white;

    z-index:3;

}
.hero-quote{

    font-size:1.15rem;

    font-style:italic;

    line-height:1.7;

    color:rgba(255,255,255,.95);

    margin-bottom:12px;

    max-width:650px;

}
.hero-author{

    display:block;

    font-size:1rem;

    color:rgba(255,255,255,.8);

    margin-bottom:28px;

    font-weight:500;
    opacity: .9;

}

.hero-content h1{

    font-size:3.2rem;
    font-weight:700;

    line-height:1.1;

    margin:0 0 18px;
    white-space:nowrap;

    text-transform:uppercase;

    letter-spacing:2px;

}



/* Mobile */

@media(max-width:768px){

.hero{

height:80vh;

}

.hero-content{

left:7%;

right:7%;

bottom:10%;

max-width:100%;

}

.hero-content h1{

font-size:2.5rem;

}

.hero-content p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

text-align:center;

}

}

/* ==========================================
   WHO WE ARE
========================================== */

.who-section{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

padding:100px 8%;

background:white;

}

.who-image{

flex:1;

}

.who-image img{

width:100%;

border-radius:24px;

display:block;

box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.who-content{

flex:1;

}

.section-label{

display:inline-block;

background:#f4e4e8;

color:#800020;

padding:8px 18px;

border-radius:40px;

font-size:.9rem;

font-weight:600;

letter-spacing:1px;

margin-bottom:20px;

}

.who-content h2{

font-size:2.8rem;

margin-bottom:25px;

color:#1a2b4c;

}

.who-content p{

font-size:1.08rem;

line-height:1.9;

margin-bottom:20px;

color:#555;

}

.home-btn{

display:inline-block;

margin-top:15px;

padding:14px 34px;

background:#800020;

color:white;

text-decoration:none;

border-radius:40px;

font-weight:600;

transition:.3s;

}

.home-btn:hover{

background:#600018;

}


/* ==========================================
   IMPACT
========================================== */

.impact-section{

padding:100px 8%;

background:#f8fafc;

text-align:center;

}

.impact-heading{

max-width:760px;

margin:auto;

margin-bottom:70px;

}

.impact-heading h2{

font-size:2.7rem;

margin:20px 0;

color:#1a2b4c;

}

.impact-heading p{

font-size:1.05rem;

line-height:1.8;

color:#666;

}

.impact-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.impact-card{

background:white;

padding:45px 30px;

border-radius:20px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.35s;

}

.impact-card:hover{

transform:translateY(-10px);

}

.impact-card h3{

font-size:3rem;

color:#800020;

margin-bottom:12px;

}

.impact-card p{

font-size:1rem;

font-weight:600;

color:#555;

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:900px){

.who-section{

flex-direction:column;

}

.impact-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:650px){

.impact-grid{

grid-template-columns:1fr;

}

.who-content h2{

font-size:2.2rem;

}

}
/* ==========================================
   GALLERY
========================================== */

.gallery-section{

padding:100px 8%;

background:white;

}

.gallery-header{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:60px;

}

.gallery-header h2{

font-size:2.7rem;

margin:20px 0;

}

.gallery-header p{

line-height:1.8;

color:#666;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}

.gallery-grid img{

width:100%;

height:260px;

object-fit:cover;

border-radius:18px;

transition:.35s;

cursor:pointer;

}

.gallery-grid img:hover{

transform:scale(1.05);

box-shadow:0 15px 35px rgba(0,0,0,.2);

}


/* ==========================================
   FEATURED PROJECT
========================================== */

.featured-project{

display:flex;

align-items:center;

gap:70px;

padding:100px 8%;

background:#f8fafc;

}

.featured-image{

flex:1;

}

.featured-image img{

width:100%;

border-radius:24px;

display:block;

box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.featured-content{

flex:1;

}

.featured-content h2{

font-size:2.8rem;

margin:20px 0;

color:#1a2b4c;

}

.featured-content p{

line-height:1.9;

margin-bottom:22px;

color:#555;

}


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

@media(max-width:900px){

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

.featured-project{

flex-direction:column;

}

}

@media(max-width:650px){

.gallery-grid{

grid-template-columns:1fr;

}

}
/* ==========================================
   HOME MISSION
========================================== */

.home-mission{

padding:40px 8%;

background:#ffffff;

}

.mission-container{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:70px;

align-items:center;

}

.section-label{

display:inline-block;

background:#eef4f8;

color:#7a003c;

padding:8px 18px;

border-radius:30px;

font-size:.8rem;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

}

.mission-text h2{

font-size:2.9rem;

margin:25px 0;

color:#1a2b4c;

line-height:1.2;

}

.mission-text p{

font-size:1.05rem;

line-height:1.9;

color:#555;

margin-bottom:22px;

}

.mission-features{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin:40px 0;

}

.feature{

background:#f8fafc;

padding:25px;

border-radius:18px;

text-align:center;

transition:.35s;

box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.feature:hover{

transform:translateY(-8px);

box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.feature span{

font-size:2rem;

display:block;

margin-bottom:12px;

}

.feature h4{

margin:0;

color:#1a2b4c;

font-size:1rem;

}

.home-btn{

display:inline-block;

margin-top:20px;

padding:14px 32px;

background:#7a003c;

color:white;

text-decoration:none;

border-radius:40px;

font-weight:600;

transition:.3s;

}

.home-btn:hover{

background:#5b002d;

transform:translateY(-3px);

}

.mission-image{

position:relative;

}

.mission-image img{

width:100%;

height:600px;

object-fit:cover;

border-radius:28px;

display:block;

box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.mission-image::after{

content:"";

position:absolute;

width:180px;

height:180px;

background:#7a003c;

opacity:.12;

border-radius:50%;

top:-30px;

right:-30px;

z-index:-1;

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:900px){

.mission-container{

grid-template-columns:1fr;

}

.mission-features{

grid-template-columns:1fr;

}

.mission-image img{

height:420px;

}

}
/* ==========================================
   HOME HELP
========================================== */

.home-help{

padding:40px 8%;

background:white;

}

.home-help-header{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:70px;

}

.home-help-header h2{

font-size:2.7rem;

margin:20px 0;

}

.home-help-header p{

line-height:1.8;

color:#666;

}

.help-cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.help-card{

background:#f8fafc;

padding:45px 35px;

border-radius:22px;

text-align:center;

transition:.35s;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.help-card:hover{

transform:translateY(-10px);

}

.help-icon{

font-size:3rem;

margin-bottom:20px;

}

.help-card h3{

margin-bottom:18px;

color:#1a2b4c;

}

.help-card p{

line-height:0.8;

margin-bottom:30px;

color:#666;

}


/* ==========================================
   PARTNERS
========================================== */

.partners{

padding:90px 8%;

background:#eef4f8;

text-align:center;

}

.partners h2{

margin:20px 0;

font-size:2.5rem;

}

.partners p{

max-width:760px;

margin:auto;

line-height:1.8;

color:#666;

margin-bottom:60px;

}

.partner-logos{

display:flex;

justify-content:center;

align-items:center;

gap:60px;

flex-wrap:wrap;

}

.partner-logos img{

height:70px;

opacity:.75;

transition:.3s;

}

.partner-logos img:hover{

opacity:1;

transform:scale(1.08);

}


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

@media(max-width:900px){

.help-cards{

grid-template-columns:1fr;

}

}

/* =========================
   ABOUT PAGE
   GLOBAL
========================= */
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: #fdfdfd;
  color: #1a2b4c;
}

/* =========================
   TOP BAR
========================= */
.top-bar {
  display: flex;
  align-items: center;
  padding: 15px 50px;
}

.logo-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-right: 12px;

  background-image: url("../images/home/logo-circle.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.centre-name {
  font-size: 28px;
  font-weight: 700;
}

/* =========================
   NAVBAR
========================= */
.navbar {
  background: white;
  display: flex;
  justify-content: center;
  gap: 26px;
  padding: 14px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar a {
  text-decoration: none;
  color: #1a2b4c;
  font-weight: 600;
  text-transform: uppercase;
}




/* =========================
   STORY SECTION
========================= */
.about-story {
  background-color: white;
  padding: 80px 8%;
}

.timeline {
  display: flex;
  justify-content: space-between;
  color: maroon;
  font-weight: bold;
  border-bottom: 2px solid maroon;
  padding-bottom: 15px;
  margin-bottom: 50px;
}

.story-content {
  display: flex;
  gap: 40px;
  align-items: center;
 
}
 
.story-text {
  flex: 1;
  font-size: 1rem;
  line-height: 1.7;
}

.story-slideshow {
  flex: 1;
  max-width: 350px;
}

.story-slideshow img {
  width: 100%;
  border-radius: 8px;
}

.mission-vision {
  background-color: white;
  padding: 60px 8%;
  display: flex;
  gap: 30px;
}

.mv-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  flex: 1;
}

/* ==========================================
   MEET THE HEARTS
========================================== */

.meet-hearts{
    padding:60px 8%;
    background:#f8f9fb;
}

.section-heading{

    width:100%;

    max-width:1000px;

    margin:0 auto 40px;

}

.section-heading h2{
    font-size:2.8rem;
    color:#1a2b4c;
    margin-bottom:10px;
}

.section-heading p{
    color:#666;
    font-size:1.1rem;
    line-height:1.8;
}
.heading-intro{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:100px;

    width:100%;

    margin-top:25px;

}

.heading-intro p{

    flex:1;

    margin:0;

    line-height:1.8;

    color:#666;

    font-size:1.05rem;

}


/* ==========================================
   STORY LAYOUT
========================================== */

.story-container{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:90px;

}

/* LEFT SIDE */

.story-left{

    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;

}

/* STACK OF PHOTOS */

.story-deck{
     transform:translateX(100px);

    position:relative;

    width:210px;
    height:170px;

    margin-bottom:40px;

}

.deck-card{

    position:absolute;

    width:150px;
    height:180px;

    object-fit:cover;

    background:white;

    padding:8px;

    border-radius:8px;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

/* Stack arrangement */

.deck1{

    top:0;
    left:0;

    transform:rotate(-8deg);

    z-index:5;

}

.deck2{

    top:10px;
    left:12px;

    transform:rotate(6deg);

    z-index:4;

}

.deck3{

    top:10px;
    left:24px;

    transform:rotate(-4deg);

    z-index:3;

}

.deck4{

    top:10px;
    left:36px;

    transform:rotate(5deg);

    z-index:2;

}

.deck5{

    top:10px;
    left:48px;

    transform:rotate(-5deg);

    z-index:1;

}

.deck6{

    top:10px;
    left:60px;

    transform:rotate(6deg);

    z-index:0;

}

/* Featured Photo */

.featured-photo{

    width:320px;
    height:400px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:0 20px 40px rgba(0,0,0,.15);
    transform:translateX(60px);

}

/* RIGHT SIDE */

.story-right{

    flex:1;

}

.story-right h2{

    font-size:2.5rem;

    color:#1a2b4c;

    margin-bottom:8px;
    transform:translateX(-80px);

}

.story-right h4{

    color:#800020;

    font-size:1.1rem;

    margin-bottom:25px;
    transform:translateX(-80px);

}

.story-right p{

    line-height:1.9;

    color:#555;

    font-size:1.05rem;

    margin-bottom:40px;
    transform:translateX(-80px);

}

/* Buttons */

.story-buttons{

    display:flex;
    gap:20px;

}

.story-buttons button{

    border:none;

    background:#400686;

    color:white;

    padding:14px 30px;

    border-radius:40px;

    cursor:pointer;

    font-size:1rem;

    transition:.3s;

}

.story-buttons button:hover{

    background:#12064a;

    transform:translateY(-2px);

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:900px){

.story-container{

    flex-direction:column;

    text-align:center;

}

.story-buttons{

    justify-content:center;

}

.story-right{

    margin-top:30px;

}

}
/* ==========================================
   OUR JOURNEY
========================================== */

.journey-story{

    margin-top:80px;
     background:white;

}

.journey-top{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:start;

    margin-bottom:70px;

}

.journey-image img{

    width:100%;
margin-left: 90px;
    display:block;

    border-radius:20px;

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

.image-caption{

    margin-top:18px;
margin-left: 90px;
    font-style:italic;

    color:#666;

    text-align:center;

    font-size:1rem;

}

.journey-intro p{
   max-width:500px;
    margin-bottom:24px;

    line-height:2;

    color:#555;
     margin-left: 90px;
    font-size:1.05rem;

}

.journey-columns{
    max-width:950px;
    column-count:2;
    margin-left: 70px;
    margin-right: -900px;
    column-gap:60px;

}

.journey-columns p{

    break-inside:avoid;

    margin-bottom:24px;

    line-height:2;

    color:#555;

}
@media (max-width:768px){

    .journey-top{

        grid-template-columns:1fr;

        gap:35px;

    }

    .journey-columns{

        column-count:1;

    }

}
/* EDUCATION PAGE */

/* HERO */


.slideshow-container {
  width: 100%;
  height: 100%;
  position: relative;
}



.slide-img {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  filter: brightness(70%);
}


/* EDUCATION CONTENT */
/* ==========================================
   EDUCATION PAGE
========================================== */

.edu-content{
    padding:80px 8%;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:90px;
}

/* TWO COLUMN SECTIONS */

.edu-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

.edu-item.reverse{
    flex-direction:row-reverse;
}

.edu-text{
    flex:1;
}

.edu-text h2{
    font-size:2.3rem;
    color:#1a2b4c;
    margin-bottom:18px;
}

.edu-text p{
    line-height:1.9;
    margin-bottom:18px;
    color:#555;
}

.edu-img{
    flex:1;
    max-width:480px;
}

.edu-img img{
    width:100%;
    border-radius:12px;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

/* ==========================================
   CHALLENGES
========================================== */

.education-challenges{
    text-align:center;
}

.education-challenges h2{
    font-size:2.4rem;
    color:#1a2b4c;
    margin-bottom:50px;
}

.challenge-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.challenge-card{
    background:#fafafa;
    padding:35px;
    border-radius:14px;
    text-align:left;
    transition:.3s;
    border:1px solid #eee;
}

.challenge-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.challenge-card h3{
    color:#800020;
    margin-bottom:15px;
}

.challenge-card p{
    line-height:1.8;
    color:#555;
}

/* ==========================================
   DREAM BOARD
========================================== */

/* DREAM BOARD */

.dream-board{

    text-align:center;

}

.dream-board h2{

    font-size:2.5rem;

    color:#1a2b4c;

}

.dream-board>p{

    margin-bottom:45px;

    color:#666;

}

/* CORK BOARD */

.cork-board{

    background:url("../images/education/cork-board.jpg");

    background-size:cover;

    background-position:center;

    border-radius:20px;

    padding:40px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:50px;

}

/* NOTES */

.sticky-note{

    position:relative;

    padding:30px;

    border-radius:8px;

    box-shadow:0 15px 30px rgba(0,0,0,.15);

    text-align:left;

    transition:.35s;

}

.sticky-note:hover{

    transform:scale(1.05) rotate(0deg);

}

.yellow{

    background:#fff8a8;

    transform:rotate(-4deg);

}

.blue{

    background:#dff4ff;

    transform:rotate(3deg);

}

.green{

    background:#dcffd9;

    transform:rotate(-2deg);

}

.pink{

    background:#ffe1ef;

    transform:rotate(4deg);

}

.sticky-note p{

    font-size:1.2rem;

    line-height:1.7;

}

.sticky-note span{

    display:block;

    margin-top:20px;

    font-weight:600;

    color:#800020;

}

/* PIN */

.pin{

    width:18px;

    height:18px;

    background:#c62828;

    border-radius:50%;

    position:absolute;

    top:12px;

    left:50%;

    transform:translateX(-50%);

    box-shadow:0 3px 5px rgba(0,0,0,.3);

}

@media(max-width:900px){

.cork-board{

    grid-template-columns:1fr;

}

}
/* ==========================================
   THE FUTURE BEGINS HERE
========================================== */

.future-section{

    padding:90px 8%;

    background:#fafafa;

    text-align:center;

}

.future-heading{

    max-width:700px;

    margin:0 auto 60px;

}

.future-heading h2{

    font-size:2.6rem;

    color:#1a2b4c;

    margin-bottom:18px;

}

.future-heading p{

    color:#666;

    line-height:1.9;

}

.future-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:45px;

}

.future-card{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.future-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.future-card img{

    width:170px;

    height:170px;

    object-fit:contain;

    margin-bottom:20px;

    animation:float 3s ease-in-out infinite;

}

.future-card:nth-child(even) img{

    animation-delay:.8s;

}

.future-card:nth-child(3) img{

    animation-delay:1.5s;

}

.future-card h3{

    color:#800020;

    font-size:1.3rem;

}

/* Floating Animation */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

@media(max-width:900px){

.future-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:650px){

.future-grid{

grid-template-columns:1fr;

}

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

@media(max-width:900px){

.edu-item,
.edu-item.reverse{

    flex-direction:column;

}

.challenge-grid,
.dream-grid{

    grid-template-columns:1fr;

}

.edu-img{

    max-width:100%;

}

}


/* ==========================
   AMENITIES SECTION
========================== */
html{
    scroll-behavior:smooth;
} 

.deserve-box{

    display:block;

    text-decoration:none;

    color:inherit;

    transition:.35s;

}

.deserve-box:hover{

    transform:translateY(-8px);

    box-shadow:0 10px 30px rgba(0,0,0,.1);

} 

.amenities-section{
    background:white;
    padding:80px 8%;
}

.amenity-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    margin-bottom:90px;
}

.amenity-row.reverse{
    flex-direction:row-reverse;
}

    .amenity-text{
    flex:1;
    max-width:490px;
    margin-left:40px;
}


.amenity-text h2{
    font-size:2.3rem;
    color:#7a1f47;
    margin-bottom:20px;
}

.amenity-text h3{
    color:#004080;
    margin:25px 0 10px;
    font-size:1.2rem;
}

.amenity-text p{
    color:#444;
    line-height:1.9;
    font-size:17px;
    margin-bottom:18px;
}

.amenity-card{
    flex:1;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
  
    max-width: 500px;
    margin-right: 40px;
    height: 500px;
}

.amenity-card img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:18px;
}

@media(max-width:900px){

.amenity-row,
.amenity-row.reverse{

    flex-direction:column;
  
}


.amenity-card{

    width:100%;

}

}


.slideshow-container {
  width: 100%;
  height: 100%;
  position: relative;
}


.slide-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(70%);
}

/* ================= EVERY CHILD DESERVES ================= */

.deserves-section{
    padding:90px 8%;
    background:#fff;
}

.deserves-heading{
    max-width:720px;
    margin-bottom:60px;
}

.deserves-heading .section-label{
    color:#8b0000;
    letter-spacing:2px;
    font-size:.8rem;
    font-weight:600;
}

.deserves-heading h2{
    margin:12px 0 18px;
    font-size:2.5rem;
    color:#1a2b4c;
}

.deserves-heading p{
    font-size:1.05rem;
    line-height:1.8;
    color:#555;
}

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

.deserve-box{
    padding:35px 30px;
    border:1px solid #ececec;
    border-radius:16px;
    transition:.3s;
    background:#fff;
}

.deserve-box:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.deserve-box img{
    width:55px;
    height:55px;
    margin-bottom:20px;
}

.deserve-box h3{
    color:#1a2b4c;
    margin-bottom:15px;
}

.deserve-box p{
    color:#666;
    line-height:1.8;
}

@media(max-width:900px){

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

}

@media(max-width:650px){

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

.deserves-heading h2{
font-size:2rem;
}

}
/* =========================
   STATS SECTION
========================= */

.partner-stats{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:50px 10%;

  background:white;

  text-align:center;
  gap:40px;
  flex-wrap:wrap;
}

.partner-stats h2{
  color:#7a1f47;
  font-size:2rem;
  margin-bottom:8px;
}

.partner-stats p{
  color:#666;
  font-size:0.95rem;
}

.stat-card{
  flex:1;
  min-width:200px;
}
/* =========================
   DONORS PARTNER BLOCKS
========================= */

.partner-block{
  display:flex;
  align-items:center;
  gap:60px;

  padding:80px 8%;

  background:white;
}

.partner-block.reverse{
  flex-direction:row-reverse;
  background: white;
}

.partner-image{
  flex:1;
}

.partner-image img{
  width:100%;
  height:650px;

  object-fit:contain;

  border-radius:20px;
}

.partner-text{
  flex:1;
}

.partner-text h2{
  color:#7a1f47;

  font-size:2rem;

  margin-bottom:20px;
}

.partner-text p{
  line-height:1.9;
  font-size:1rem;
}

/* MOBILE */

@media(max-width:900px){

  .partner-block,
  .partner-block.reverse{
    flex-direction:column;
  }

  .partner-image img{
    height:250px;
  }

}



/* DONORS PAGE */
/* ==========================
DONORS PAGE ADDITIONS
========================== */

/* INTRO */

.partner-intro{
    width:75%;
    margin:70px auto;
    text-align:center;
}

.partner-intro h2{
    font-size:2.3rem;
    color:#7b1e22;
    margin-bottom:20px;
}

.partner-intro p{
    font-size:1.05rem;
    line-height:1.9;
    color:#555;
}


/* IMPACT GRID */

.impact-grid{
    padding:30px 8% 80px;
}
.impact-grid h2{
    text-align:center;
    font-size:2rem;
    color:#7b1e22;
    margin-bottom:45px;
    padding-left:25px;
     margin-left:-60px;
    margin-bottom:45px;
}

.impact-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.impact-card{
    background:#fff;
    border-radius:15px;
    padding:35px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.impact-card:hover{
    transform:translateY(-8px);
}

.impact-icon{
    font-size:3rem;
    margin-bottom:15px;
}

.impact-card h3{
    color:#7b1e22;
    margin-bottom:10px;
}


/* GALLERY */

.volunteer-gallery{
    padding:80px 8%;
}

.volunteer-gallery h2{
    text-align:center;
    color:#7b1e22;
    font-size:2rem;
}

.volunteer-gallery>p{
    width:60%;
    margin:15px auto 50px;
    text-align:center;
    color:#666;
}

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

.gallery-item{
    overflow:hidden;
    border-radius:12px;
    background:white;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.gallery-item img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-item span{
    display:block;
    padding:15px;
    text-align:center;
    font-weight:600;
    color:#555;
}


/* QUOTE */

.quote-banner{
    width:75%;
    margin:90px auto;
    text-align:center;
}

.quote-banner blockquote{
    font-size:2rem;
    color:#7b1e22;
    font-style:italic;
    line-height:1.5;
}

.quote-banner span{
    display:block;
    margin-top:15px;
    color:#777;
}


/* TIMELINE */

.timeline-section{
    padding:80px 8%;
}

.timeline-section h2{
    text-align:center;
    color:#7b1e22;
    margin-bottom:45px;
}

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

.time-card{
    background:white;
    padding:35px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.time-card h3{
    color:#7b1e22;
}

.future{
    background:#fdf3e6;
}


/* HELP */

.help-section{
    padding:80px 8%;
}

.help-section h2{
    text-align:center;
    color:#7b1e22;
    margin-bottom:40px;
}

.help-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
}

.help-card{
    background:white;
    padding:40px 20px;
    text-align:center;
    border-radius:15px;
    font-size:1rem;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.help-card:hover{
    transform:translateY(-8px);
}

.help-card h3{
    margin-top:15px;
    font-size:1rem;
    color:#555;
}


/* RESPONSIVE */

@media(max-width:900px){

.gallery-grid,
.impact-cards,
.timeline-grid{
grid-template-columns:1fr;
}

.help-grid{
grid-template-columns:repeat(2,1fr);
}

.partner-intro,
.quote-banner,
.volunteer-gallery>p{
width:90%;
}

}


/* FAQ SECTION */
.faq-section {
  background-color: #fffafc;
  padding: 60px 8%;
  width: 80%;
  margin: auto;
}
.faq-item {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  box-shadow: 0 5px 12px rgba(0,0,0,0.08);
}

.faq-question {
  width: 100%;
  background-color: #d6f0ff;
  border: none;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
  transition: 0.3s;
}

.faq-question:hover {
  background: #106eac;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: white;
  transition: max-height 0.35s ease;
}

.faq-answer p {
  padding: 20px;
  margin: 0;
  line-height: 1.8;
}
/* =========================
   FAQ FORM
========================= */

.faq-form-section{
    background:WHITE;
    padding:70px 20px;
}

.faq-form-section h2{
    text-align:center;
    color:rgba(10, 10, 150, 0.525);
    margin-bottom:35px;
    font-size:2rem;
}

.faq-form{
    max-width:650px;
    margin:auto;
    background:white;
    padding:35px;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);

    display:flex;
    flex-direction:column;
    gap:18px;
}

.faq-form input,
.faq-form textarea{

    width:100%;
    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

    box-sizing:border-box;

    outline:none;

}

.faq-form input:focus,
.faq-form textarea:focus{

    border-color:#800020;

}

.faq-form textarea{

    resize:vertical;

    min-height:150px;

}

.faq-form button{

    background:rgb(3, 3, 87);

    color:white;

    border:none;

    padding:15px;

    border-radius:10px;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.faq-form button:hover{

    background:#2f08a5;

}
.faq-form input::placeholder,
.faq-form textarea::placeholder{
    font-size:14px;
    color:#888;
}
/* DONATION POPUP */

.donate-popup{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

justify-content:center;

align-items:center;

z-index:999;

}

.popup-content{

background:white;

width:90%;

max-width:550px;

padding:35px;

border-radius:20px;

position:relative;

animation:pop .3s;

}

@keyframes pop{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.close-popup{

position:absolute;

top:18px;

right:25px;

font-size:35px;

cursor:pointer;

}

.bank-details{

background:#fde6ef;

padding:20px;

border-radius:15px;

margin-top:20px;

}

.bank-details h3{

color:#c2185b;

margin-bottom:12px;

}

.bank-details button{

background:#c2185b;

color:white;

border:none;

padding:8px 15px;

border-radius:20px;

cursor:pointer;

margin-left:10px;

}

/* ==========================
BUTTONS
========================== */

.btn{
    display:inline-block;
    padding:15px 35px;
    border:none;
    border-radius:40px;
    background:#180572;
    color:#fff;
    text-decoration:none;
    font-size:1rem;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
    margin:10px;
}

.btn:hover{
    background:#a3154d;
    transform:translateY(-3px);
}

.btn.secondary{
    background:#ffffff;
    color:#c2185b;
}

.btn.secondary:hover{
    background:#f3f3f3;
}

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

.stats{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    padding:40px 8%;
    background:#fff;
}

.stat{
    background:#fff8fb;
    width:220px;
    padding:35px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.stat h2{
    font-size:3rem;
    color:#c2185b;
    margin-bottom:10px;
}

/* ==========================
CONTENT
========================== */

.content{
    padding:80px 10%;
    text-align:center;
    background:white;
}

.content h2{
    font-size:2.5rem;
    color:#800020;
    margin-bottom:30px;
}

.content p{
    max-width:900px;
    margin:25px auto;
    line-height:1.9;
    font-size:1.08rem;
}

/* ==========================
WAYS TO HELP
========================== */

.help-section{
    padding:80px 8%;
    background:#fff;
}

.help-section h2{
    text-align:center;
    color:#800020;
    font-size:2.5rem;
    margin-bottom:50px;
}

.help-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;
}

.help-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.35s;
}

.help-card:hover{
    transform:translateY(-8px);
}

.help-card img{
    width:100%;
    height:240px;
    object-fit:contain;
}

.help-card h3{
    text-align:center;
    margin-top:25px;
    color:#800020;
}

.help-card p{
    padding:20px 30px;
    line-height: 1.2em;;
    text-align:center;
}

.help-card .btn{
    margin:25px auto 35px;
    display:block;
    width:220px;
}

/* ==========================
POPUP
========================== */

.donate-popup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.popup-box{
    width:90%;
    max-width:650px;
    background:#fff;
    border-radius:25px;
    padding:40px;
    position:relative;
    animation:popup .3s;
}

@keyframes popup{

from{
transform:scale(.8);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}

.close{
    position:absolute;
    top:20px;
    right:28px;
    font-size:36px;
    cursor:pointer;
}

.bank-card{
    background:#fdeef4;
    padding:25px;
    border-radius:18px;
    margin:30px 0;
}

.bank-card p{
    margin:12px 0;
}

.bank-card button{
    margin-left:15px;
    background:#c2185b;
    color:white;
    border:none;
    padding:8px 18px;
    border-radius:20px;
    cursor:pointer;
}

.popup-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

/* CLEAN GRID */
.projects-container{
    display:grid;
    grid-template-columns:repeat(3, minmax(280px, 320px));
    justify-content:center;
    gap:75px;
}
/* CARD */
.project-card{
  background:white;
  border-radius:16px;
  padding:25px;
  min-height:340px;
  box-shadow:0 6px 15px rgba(0,0,0,0.1);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ICON */
.project-img{
  font-size:3rem;
}

/* TEXT */
.project-card h3{
  margin:0;
  color:#800020;
}

.project-card p{
  color:#333;
  line-height:1.5;
}
.projects-intro{
    max-width:900px;
    margin:70px auto;
    padding:0 20px;
    text-align:center;
}

.projects-intro h2{
    font-size:2.7rem;
    color:#003366;
    margin-bottom:20px;
}

.projects-intro p{
    font-size:1.15rem;
    line-height:1.8;
    color:#555;
}

@media (max-width:900px){

    .projects-container{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:600px){

    .projects-container{
        grid-template-columns:1fr;
    }

}
/* ==========================================
   DONATION POCKET HERO
========================================== */

.pocket-hero{
    background:linear-gradient(135deg,#ffe4ef,#fff7fa);
    text-align:center;
    padding:90px 20px;
}

.pocket-hero h1{
    font-size:3rem;
    color:#7a003c;
    margin-bottom:15px;
}

.pocket-hero p{
    max-width:700px;
    margin:auto;
    font-size:1.1rem;
    line-height:1.8;
    color:#444;
}

/* ==========================================
   SECTION
========================================== */

.donation-section{
    background:#ffeef5;
    padding:70px 7%;
}

/* ==========================================
   CATEGORY TITLES
========================================== */

.category-title{
    font-size:2rem;
    color:#7a003c;
    margin:70px 0 35px;
    border-left:8px solid hotpink;
    padding-left:18px;
}

/* ==========================================
   GRID
========================================== */

.donation-cards{
    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:50px;
    align-items:stretch;

    margin-bottom:60px;
}

/* ==========================================
   CARD
========================================== */

.donation-card{
  position:relative;

    perspective:1000px;

    cursor:pointer;

    height:360px;
}

/* ==========================================
   INNER
========================================== */

.card-inner{

    position:relative;

    width:100%;

    height:100%;

    transition:transform .8s;

    transform-style:preserve-3d;
}

.donation-card.flipped .card-inner{

    transform:rotateY(180deg);

}

/* ==========================================
   FRONT + BACK
========================================== */

.card-front,
.card-back{

    position:absolute;
    inset: 0;

    width:100%;

    height:100%;

    backface-visibility:hidden;

    overflow:hidden;

    background:white;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

/* ==========================================
   IMAGE
========================================== */

.card-front img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

/* ==========================================
   FRONT CONTENT
========================================== */

.card-front{

    position:relative;

}

.card-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:25px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.35),
        rgba(0,0,0,0)
    );

    color:white;

}

.card-overlay h3{

    margin:0;

    font-size:1.6rem;

    font-weight:700;

}

.card-tagline{

    margin:8px 0 18px;

    line-height:1.5;

    color:#f5f5f5;

    font-size:.95rem;

}

.flip-text{

    color:#FFD166;

    font-weight:600;

    transition:.3s;

}

.card-front:hover .flip-text{

    transform:translateX(6px);

}

/* ==========================================
   BACK
========================================== */

.card-back{

    transform:rotateY(180deg);

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.card-back h3{

    color:#7a003c;

    margin-bottom:20px;

}

.card-back p{

    line-height:1.8;

    color:#444;

}

.card-back h4{

    color:#c2185b;

    font-size:1.4rem;

    margin:25px 0;

}

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

.card-back a{

    text-decoration:none;

    background:#100451;

    color:white;

    padding:14px 24px;

    border-radius:35px;

    text-align:center;

    font-weight:bold;

    transition:.3s;

}

.card-back a:hover{

    background:#a6004b;

}

/* ==========================================
   HOVER
========================================== */

.donation-card:hover{

    transform:translateY(-8px);

    transition:.3s;

}
.donation-card:hover .card-front img{

    transform:scale(1.08);

}
/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

.pocket-hero h1{

font-size:2.2rem;

}

.category-title{

font-size:1.5rem;

}

.donation-cards{

grid-template-columns:1fr;

}

}
.donation-popup{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.popup-content{

    background:white;

    width:450px;

    max-width:90%;

    padding:35px;

    border-radius:12px;

    position:relative;

}

.popup-content input{

    width:100%;

    padding:12px;

    margin:12px 0;

    border:1px solid #ddd;

    border-radius:8px;

}

.popup-content button{

    width:100%;

    padding:14px;

    background:#800020;

    color:white;

    border:none;

    border-radius:8px;

    cursor:pointer;

    margin-top:15px;

}

.popup-content button:hover{

    background:#a00028;

}

.close-popup{

    position:absolute;

    right:20px;

    top:15px;

    font-size:28px;

    cursor:pointer;

}

.popup-price{

    color:#800020;

    font-weight:bold;

}
/* ==========================================
   UNIVERSAL DONATE CTA
========================================== */

.donate-hero{
    position:relative;
    width:100%;
    z-index:3;
    height:80vh;
    background:url("../images/donate/donate-cta.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    
}

.donate-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.donate-text{
    position:absolute;
    left:2%;
    bottom:12%;
    z-index:2;
    max-width:1000px;
    padding:0 10px;
    font-weight:300;
    line-height:1.1;
    margin-bottom:0px;
    color:white;
}

.donate-text h2{
    font-size:3.2rem;
    line-height:1.1;
    margin-bottom:18px;
    font-weight:700;
}

.donate-text p{
    font-size:1.15rem;
    line-height:1.8;
    margin-bottom:35px;
}

.donate-text a{
    display:inline-block;
    background:#800020;
    color:white;
    text-decoration:none;
    padding:15px 38px;
    border-radius:40px;
    font-weight:600;
    transition:.3s ease;
}

.donate-text a:hover{
    background:#3b0871;
    transform:translateY(-2px);
}

@media(max-width:768px){

    .donate-hero{
        height:50vh;
    }

    .donate-text h2{
        font-size:2.2rem;
    }

    .donate-text p{
        font-size:1rem;
    }

}

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

.about-support{

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;

padding:90px 8%;

background:white;

}

.about-support-text{

flex:1;

}

.about-support-text h2{

font-size:2.8rem;

margin-bottom:25px;

color:#1a2b4c;

}

.about-support-text p{

line-height:1.9;

font-size:17px;

color:#555;

margin-bottom:20px;

}

.about-support-image{

flex:1;

}

.about-support-image img{

width:100%;

height:500px;

object-fit:cover;

border-radius:25px;

box-shadow:0 15px 35px rgba(0,0,0,.15);

}
/*==========================
IMPACT
===========================*/

.impact-section{

display:flex;

gap:80px;

padding:60px 8%;

background:#f8fbff;

align-items:center;

}

.impact-left{

width:260px;

}

.impact-left h2{

margin-bottom:40px;

color:#1a2b4c;

font-size:2.3rem;

}

.impact-item{

border-left:5px solid #800020;

padding-left:20px;

margin-bottom:45px;

}

.impact-item h3{

font-size:3rem;

margin:0;

color:#800020;

}

.impact-item p{

margin-top:5px;

color:#666;

}
.impact-right{

flex:1;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.impact-right img{

width:100%;

height:250px;

object-fit:cover;

border-radius:18px;

transition:.3s;

box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.impact-right img:hover{

transform:scale(1.04);

}
@media(max-width:900px){

.about-support,

.impact-section{

flex-direction:column;

}

.impact-left{

width:100%;

}

}
/* ---------- VOLUNTEER POPUP ---------- */
.volunteer-popup{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.6);

justify-content:center;

align-items:center;

z-index:9999;

}

.volunteer-popup ul{

margin:20px 0;

padding-left:22px;

line-height:1.8;

}

.volunteer-popup a{

color:#800020;

font-weight:600;

text-decoration:none;

}

.donation-intro{
    max-width:900px;
    margin:70px auto;
    padding:0 25px;
    text-align:center;
}

.donation-intro h2{
    font-size:2.5rem;
    color:#003366;
    margin-bottom:20px;
}

.donation-intro p{
    font-size:1.1rem;
    line-height:1.9;
    color:#555;
    margin-bottom:20px;
}

.flip-text{
    margin-top:35px;
    font-size:1.15rem;
    color:#7a1f47;
}
/* ==========================================
   FOOTER
========================================== */

.site-footer{

    background:white;

    color:white;

    padding:10px 8% 10px;

}

.footer-content{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:50px;

}

.footer-column h3{

    font-size:1.4rem;

    margin-bottom:20px;

    color:black;

}

.footer-column p{

    color:black;

    line-height:1.8;

    font-size:.95rem;

    margin-bottom:12px;

}

.footer-column a{

    display:block;

    color:black;

    text-decoration:none;

    margin-bottom:12px;

    transition:.3s;

}

.footer-column a:hover{

    color:#1e0870;

}

.footer-column i{

    width:22px;

    color:#220d7f;

    margin-right:10px;

}

.footer-donate-btn{

    display:inline-block;

    margin-top:18px;

    padding:12px 22px;

    background:#030451;

    color:black;

    text-decoration:none;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}

.footer-donate-btn:hover{

    background:white;

    transform:translateY(-2px);

}

.footer-bottom{

    margin-top:50px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.2);

    text-align:center;

    font-size:.9rem;

    color:#f3f3f3;

}