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

.hero-slide{
height:90vh;
position:relative;
}

.hero-slide img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.55);
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg, rgba(8,12,120,.7), rgba(8,12,120,.2));
}

.hero-content{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
text-align:center;
}

.hero-title{font-size:48px;font-weight:800;}
.hero-subtitle{font-size:18px;opacity:.9;}


/* HERO PAGINATION */
.hero-pagination{
text-align:center;
margin-top:20px;
position:relative;
}


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

.project-section{
padding-top:80px;
}

.project-card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.06);
transition:.35s ease;
}

.project-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.project-img{height:220px;overflow:hidden;}
.project-img img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}

.project-card:hover img{
transform:scale(1.08);
}

.project-content{padding:18px;}
.project-content h5{color:#080C78;font-weight:700;}

.project-pagination{
text-align:center;
margin-top:40px;
position:relative;
}


/* BULLETS */
.project-pagination .swiper-pagination-bullet{
width:10px;
height:10px;
background:#d1d5db;
opacity:1;
margin:0 6px !important;
border-radius:50%;
}

.project-pagination .swiper-pagination-bullet-active{
width:28px;
border-radius:20px;
background:#080C78;
}











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

.footer-premium{
background:#080C78;
color:#fff;
}

.footer-row{
align-items:flex-start;
}

/* Columns even on mobile */
.footer-col{
flex:1 1 33%;
min-width:220px;
}

/* Titles */
.footer-title{
font-weight:700;
letter-spacing:.5px;
position:relative;
}

/* Underline accent */
.footer-title::after{
content:"";
width:40px;
height:3px;
background:#BCD868;
display:block;
margin-top:8px;
border-radius:10px;
}

/* Text */
.footer-text{
font-size:14px;
opacity:.9;
line-height:1.7;
}

/* Links */
.footer-links{
list-style:none;
padding:0;
margin:0;
}

.footer-links li{
margin-bottom:10px;
}

.footer-links a{
color:#fff;
text-decoration:none;
font-size:14px;
transition:.3s;
position:relative;
}

/* Hover effect */
.footer-links a:hover{
color:#BCD868;
padding-left:6px;
}

/* Newsletter */
.newsletter-box{
display:flex;
gap:10px;
margin-top:12px;
}

.newsletter-box input{
flex:1;
padding:10px 12px;
border-radius:30px;
border:none;
outline:none;
font-size:14px;
}

.newsletter-box button{
background:#BCD868;
border:none;
padding:10px 18px;
border-radius:30px;
font-weight:600;
transition:.3s;
}

.newsletter-box button:hover{
background:#fff;
color:#080C78;
}

/* Divider */
.footer-divider{
border-color:rgba(255,255,255,.2);
margin:40px 0 20px;
}

/* Bottom bar */
.footer-bottom{
font-size:13px;
opacity:.8;
}

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

@media(max-width:768px){

.footer-row{
display:flex;
flex-wrap:wrap;
}

.footer-col{
flex:1 1 50%;
}

}

@media(max-width:480px){

.footer-col{
flex:1 1 100%;
text-align:center;
}

.footer-title::after{
margin-left:auto;
margin-right:auto;
}

.newsletter-box{
flex-direction:column;
}

.newsletter-box button{
width:100%;
}

}






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

.navbar-premium{
background:#fff;
padding:14px 0;
transition:.35s ease;
}

/* Sticky shadow on scroll */
.navbar-scrolled{
box-shadow:0 10px 35px rgba(0,0,0,.08);
padding:10px 0;
}


/* ================= LOGO ================= */

.brand-logo{
font-weight:800;
font-size:22px;
color:#080C78 !important;
letter-spacing:.6px;
}


/* ================= NAV LINKS ================= */

.nav-premium{
font-weight:600;
color:#111 !important;
position:relative;
transition:.3s ease;
}

/* Hover underline animation */
.nav-premium::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:0%;
height:2px;
background:#BCD868;
transition:.35s ease;
}

.nav-premium:hover::after{
width:100%;
}

.nav-premium:hover{
color:#080C78 !important;
}


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

.donate-btn{
background:linear-gradient(
135deg,
#BCD868,
#a9cf4a
);
color:#111;
padding:10px 22px;
border-radius:40px;
font-weight:700;
text-decoration:none;
position:relative;
overflow:hidden;
transition:.35s ease;
box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* Shine hover effect */
.donate-btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.5),
transparent
);
transition:.6s;
}

.donate-btn:hover::before{
left:100%;
}

.donate-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(0,0,0,.18);
background:linear-gradient(
135deg,
#d4f07a,
#BCD868
);
color:#080C78;
}


/* ================= SPACER ================= */

.nav-spacer{
height:80px;
}


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

@media(max-width:991px){

.navbar-premium{
padding:12px 0;
}

.nav-premium{
padding:10px 0;
}

.donate-btn{
display:inline-block;
margin-top:10px;
}

}





/* =========================================
   WORLD CLASS DONATE CTA
========================================= */

.donate-cta{
display:inline-flex;
align-items:center;
gap:10px;

padding:12px 26px;
border-radius:50px;

font-weight:700;
font-size:15px;
letter-spacing:.3px;

color:#111;
text-decoration:none;

background:linear-gradient(
135deg,
#BCD868,
#a9cf4a
);

position:relative;
overflow:hidden;

transition:.4s ease;
box-shadow:
0 8px 22px rgba(0,0,0,.15),
inset 0 0 0 rgba(255,255,255,.2);
}


/* Shine animation */
.donate-cta::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.55),
transparent
);
transition:.7s;
}

.donate-cta:hover::before{
left:100%;
}


/* Glow ring */
.donate-cta::after{
content:"";
position:absolute;
inset:0;
border-radius:50px;
box-shadow:0 0 0 rgba(188,216,104,.7);
transition:.4s;
}

.donate-cta:hover::after{
box-shadow:0 0 18px rgba(188,216,104,.9);
}


/* Hover motion */
.donate-cta:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:
0 14px 30px rgba(0,0,0,.25),
0 0 12px rgba(188,216,104,.7);
color:#080C78;
}


/* Active press */
.donate-cta:active{
transform:translateY(0) scale(.98);
}


/* Mobile responsive */
@media(max-width:768px){

.donate-cta{
padding:10px 20px;
font-size:14px;
}

}










/* =========================================
   FOCUS STRIP (HORIZONTAL PREMIUM STYLE)
========================================= */

.focus-strip{
background:#f1f1f1;
padding:60px 0;
}

.focus-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
flex-wrap:nowrap;
}

/* Individual Item */
.focus-item{
display:flex;
align-items:center;
gap:18px;
transition:.3s ease;
cursor:pointer;
}

/* Icon Box */
.focus-icon-box{
width:72px;
height:72px;
background:#fff;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 20px rgba(0,0,0,.08);
transition:.3s ease;
}

.focus-icon-box img{
width:40px;
height:40px;
object-fit:contain;
}

/* Text */
.focus-text h6{
font-size:18px;
font-weight:600;
color:#080C78;
line-height:1.3;
margin:0;
}

/* Hover Effect */
.focus-item:hover .focus-icon-box{
transform:translateY(-5px);
box-shadow:0 14px 30px rgba(0,0,0,.15);
}

.focus-item:hover .focus-text h6{
color:#BCD868;
}

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

@media(max-width:768px){

.focus-wrapper{
flex-direction:row;
justify-content:space-between;
gap:20px;
}

.focus-item{
flex:1;
}

.focus-icon-box{
width:60px;
height:60px;
}

.focus-icon-box img{
width:32px;
height:32px;
}

.focus-text h6{
font-size:14px;
}

}






/* ================= MOBILE HERO FIX ================= */

@media (max-width: 768px){

  /* Make slide responsive */
  .hero-slide{
    height: 75vh !important;
  }

  /* Image full width */
  .hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  /* Stronger overlay for text readability */
  .hero-overlay{
    background:linear-gradient(
      rgba(8,12,120,.65),
      rgba(8,12,120,.65)
    ) !important;
  }

  /* Center content */
  .hero-content{
    padding:0 20px;
    text-align:center;
  }

  /* Responsive text */
  .hero-title{
    font-size:28px;
    line-height:1.3;
  }

  .hero-subtitle{
    font-size:15px;
  }

}




.hero-slide{
  height:90vh;
  background-size:cover;
  background-position:center;
  position:relative;
}






.hero-slide{ height:90vh; }

@media(max-width:992px){
  .hero-slide{ height:80vh; }
}

@media(max-width:768px){
  .hero-slide{ height:75vh; }
}

@media(max-width:480px){
  .hero-slide{ height:70vh; }
}




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

.project-btn{
display:inline-flex;
align-items:center;
gap:8px;

padding:10px 20px;
border-radius:30px;

font-size:14px;
font-weight:600;
text-decoration:none;

color:#080C78;
background:linear-gradient(
135deg,
#e8edff,
#dfe6ff
);

transition:.35s ease;
position:relative;
overflow:hidden;
}

/* Hover */
.project-btn:hover{
background:linear-gradient(
135deg,
#BCD868,
#a9cf4a
);
color:#080C78;
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,.12);
}


.project-btn{
display:inline-block;
padding:9px 18px;
border-radius:30px;

border:2px solid #080C78;
color:#080C78;
font-weight:600;
text-decoration:none;
transition:.3s ease;
}

.project-btn:hover{
background:#080C78;
color:#fff;
box-shadow:0 10px 20px rgba(0,0,0,.12);
}


.project-btn{
display:inline-flex;
align-items:center;
gap:8px;

padding:10px 20px;
border-radius:30px;
background:#080C78;
color:#fff;
font-weight:600;
text-decoration:none;
position:relative;
overflow:hidden;
transition:.35s;
}

/* Arrow animation */
.project-btn::after{
content:"→";
transition:.35s;
}

.project-btn:hover::after{
transform:translateX(6px);
}

.project-btn:hover{
background:#BCD868;
color:#080C78;
}



@media(max-width:768px){

.project-btn{
font-size:13px;
padding:8px 16px;
}

}







/* =========================================
   FOUNDER VISION IMAGE SECTION
========================================= */

.vision-section{
padding:90px 0;
background:#f7f8fc;
}


/* IMAGE */

.vision-media{
border-radius:18px;
overflow:hidden;
box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.vision-media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.4s ease;
}

/* Subtle zoom hover */
.vision-media:hover img{
transform:scale(1.04);
}


/* CONTENT */

.vision-content{
padding-left:30px;
}

.vision-title{
font-size:38px;
font-weight:800;
color:#080C78;
margin-bottom:20px;
}

.vision-content p{
font-size:16px;
line-height:1.8;
color:#555;
margin-bottom:18px;
}

.vision-author{
margin-top:20px;
font-weight:700;
color:#111;
font-size:18px;
}


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

@media(max-width:768px){

.vision-section{
padding:60px 0;
}

.vision-title{
font-size:26px;
text-align:center;
}

.vision-content{
padding-left:0;
text-align:center;
}

}






.project-hero-banner{
position:relative;
height:420px;
overflow:hidden;
}

.project-hero-banner img{
width:100%;
height:100%;
object-fit:cover;
}

.project-banner-overlay{
position:absolute;
inset:0;
background:linear-gradient(
135deg,
rgba(8,12,120,.75),
rgba(8,12,120,.45)
);
}

.project-banner-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
}

.project-selector-wrapper{
background:#f8f9fc;
padding:30px 0;
}




/* =========================================================
   PROJECTS PAGE — MASTER STYLES
   Matches Home Page Design Language
========================================================= */



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

.project-hero-banner{
position:relative;
height:70vh;
min-height:420px;
overflow:hidden;
}

.hero-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:brightness(.55);
}


/* Overlay */
.project-banner-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(8,12,120,.75),
rgba(8,12,120,.35)
);
z-index:1;
}





/* ================= SELECTOR ================= */

.project-selector-section{
background:#f8fafc;
padding:40px 0;
border-bottom:1px solid #eee;
}

.project-select{
max-width:720px;
margin:auto;
border-radius:14px;
padding:14px 18px;
font-weight:500;
box-shadow:0 6px 18px rgba(0,0,0,.06);
}



/* ================= PROJECT DETAILS ================= */

.project-details-section{
padding:80px 0;
background:#ffffff;
}



/* ---------------- IMPACT CARD ---------------- */

.impact-card{
background:#BCD868;
padding:32px 40px;
border-radius:22px;
box-shadow:0 14px 32px rgba(0,0,0,.08);
}

.impact-card ul{
margin:0;
padding-left:20px;
}

.impact-card li{
margin-bottom:12px;
font-size:15px;
line-height:1.7;
color:#1f2937;
}



/* ---------------- STATS TABLE ---------------- */

.stats-card{
background:#fff;
padding:30px;
border-radius:22px;
box-shadow:0 14px 32px rgba(0,0,0,.08);
}

.impact-table{
margin:0;
}

.impact-table th{
background:#BCD868;
color:#111;
font-weight:700;
border:none;
}

.impact-table td{
background:#fff;
border-color:#eee;
}



/* ---------------- INVESTMENT CARD ---------------- */

.investment-card{
background:#fff;
padding:35px;
border-radius:22px;
box-shadow:0 14px 32px rgba(0,0,0,.08);
border:2px solid #BCD868;
text-align:center;
}

.investment-card h2{
color:#080C78;
font-weight:800;
margin:10px 0;
}

.investment-card span{
font-size:14px;
color:#6b7280;
}



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

.principal-section{
margin-top:60px;
}

.principal-card{
background:#BCD868;
padding:32px;
border-radius:30px;
box-shadow:0 16px 36px rgba(0,0,0,.08);
}


/* Square Image */
.principal-img-square{
width:120px;
height:120px;
object-fit:cover;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}


/* Principal Name */
.principal-card h6{
font-weight:700;
margin-top:12px;
color:#111;
}


/* Message */
.principal-message{
font-size:16px;
line-height:1.9;
color:#1f2937;
margin:0;
}



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

.table-responsive{
overflow-x:auto;
}



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

@media(max-width:992px){

.project-hero-banner{
height:60vh;
min-height:340px;
}

.hero-title{
font-size:32px;
}

}



/* Tablet */
@media(max-width:768px){

.project-hero-banner{
height:55vh;
}

.hero-title{
font-size:26px;
}

.hero-subtitle{
font-size:14px;
}


/* Cards */
.impact-card{
padding:24px;
}

.stats-card{
padding:20px;
}

.investment-card{
margin-top:20px;
}

.principal-card{
text-align:center;
}

.principal-message{
margin-top:18px;
font-size:15px;
}

}



/* Small Mobile */
@media(max-width:480px){

.project-select{
padding:12px;
font-size:14px;
}

.hero-title{
font-size:22px;
}

.hero-subtitle{
font-size:13px;
}

.principal-img-square{
width:100px;
height:100px;
}

}














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

.about-section{
padding:90px 0;
background:#f8fafc;
}

.section-title{
font-size:34px;
font-weight:800;
color:#080C78;
}

.about-slider-box{
background:#fff;
padding:20px;
border-radius:22px;
box-shadow:0 14px 32px rgba(0,0,0,.08);
}

.aboutSwiper{
width:100%;
height:350px;
}

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

.about-pagination{
margin-top:15px;
text-align:center;
}

.about-pagination .swiper-pagination-bullet{
background:#d1d5db;
opacity:1;
}

.about-pagination .swiper-pagination-bullet-active{
background:#080C78;
}

.about-content p{
font-size:15px;
line-height:1.9;
color:#374151;
margin-bottom:18px;
}


/* MOBILE */
@media(max-width:768px){

.aboutSwiper{
height:240px;
}

.section-title{
font-size:26px;
}

}











/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-section{
padding:90px 0;
background:#f8fafc;
}


/* Info Card */
.contact-info-card{
background:#fff;
padding:30px;
border-radius:22px;
box-shadow:0 14px 32px rgba(0,0,0,.08);
height:100%;
}

.contact-info-card h4{
color:#080C78;
font-weight:800;
margin-bottom:20px;
}

.contact-info-card p{
font-size:14px;
line-height:1.7;
color:#374151;
margin-bottom:15px;
}


/* Social Icons */
.social-icons a{
display:inline-flex;
align-items:center;
justify-content:center;

width:38px;
height:38px;

border-radius:50%;
background:#BCD868;
color:#111;

margin-right:10px;
transition:.3s;
}

.social-icons a:hover{
background:#080C78;
color:#fff;
}


/* Form Card */
.contact-form-card{
background:#fff;
padding:35px;
border-radius:22px;
box-shadow:0 14px 32px rgba(0,0,0,.08);
}


/* Inputs */
.contact-form-card .form-control{
border-radius:12px;
padding:12px 14px;
font-size:14px;
border:1px solid #e5e7eb;
}

.contact-form-card .form-control:focus{
box-shadow:none;
border-color:#BCD868;
}


/* Button */
.contact-btn{
background:linear-gradient(
135deg,
#BCD868,
#a9cf4a
);

border:none;
padding:12px 28px;
border-radius:40px;
font-weight:700;
transition:.3s;
}

.contact-btn:hover{
background:#080C78;
color:#fff;
}



/* ================= MAP ================= */

.contact-map iframe{
width:100%;
height:420px;
border:0;
}



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

@media(max-width:768px){

.contact-section{
padding:60px 0;
}

.contact-form-card{
padding:25px;
}

.contact-map iframe{
height:300px;
}

}



































/* ================= Our Work -  VISION ================= */

.work-vision-section{
padding:80px 0;
background:#f8fafc;
}

.vision-card{
background:#fff;
padding:40px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
border-left:6px solid #BCD868;
}

.vision-card h3{
font-weight:700;
color:#080C78;
line-height:1.5;
}

.vision-text{
font-size:16px;
line-height:1.8;
color:#4b5563;
}



/* ================= MISSION BAND ================= */

.mission-band{
background:linear-gradient(90deg,#080C78,#1e3a8a);
color:#fff;
padding:70px 0;
}

.mission-band h4{
font-weight:700;
margin-bottom:15px;
}

.mission-band p{
opacity:.95;
line-height:1.8;
}

.mission-buttons{
margin-top:20px;
display:flex;
gap:12px;
flex-wrap:wrap;
}

.btn-theme{
background:#BCD868;
color:#000;
font-weight:600;
}

.mission-img{
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
}



/* ================= GOVT ================= */

.govt-section{
padding:70px 0;
background:#fff;
}

.govt-text{
max-width:900px;
margin:auto;
font-size:18px;
line-height:1.9;
color:#4b5563;
}



/* ================= INITIATIVES ================= */

.initiative-section{
padding:60px 0;
background:#f8fafc;
}

.initiative-card{
text-align:center;
padding:20px;
}

.initiative-card i{
font-size:38px;
color:#080C78;
border:2px solid #BCD868;
width:80px;
height:80px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
margin:auto;
margin-bottom:12px;
}

.initiative-card h6{
font-weight:600;
}



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

.gallery-section{
padding:70px 0;
background:#fff;
}

.gallery-card{
overflow:hidden;
border-radius:12px;
}

.gallery-card img{
width:100%;
height:220px;
object-fit:cover;
transition:.4s;
}

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



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

@media(max-width:768px){

.vision-card{
padding:25px;
}

.mission-band{
text-align:center;
}

.gallery-card img{
height:180px;
}

}