*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f7fbff;
color:#2b2b2b;
}

/* NAVBAR */

header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background:#ffffff;
z-index:1000;
border-bottom:1px solid #e6eef5;
}

nav{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
height:80px;
padding:0 20px;
}

.logo{
font-weight:600;
font-size:20px;
color:#0d6efd;
}

nav a{
margin-left:25px;
text-decoration:none;
color:#333;
font-weight:500;
display:inline-block;
transition:all 0.25s ease;
}

/* hover effect */

nav a:hover{
color:#0d6efd;
transform:translateY(-4px) scale(1.05);
}

/* HERO */

.hero{
height:65vh;
min-height:420px;
position:relative;
overflow:hidden;
margin-top:80px;
}


.slide{
position:absolute;
width:100%;
height:100%;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
opacity:0;
transition:1.5s ease-in-out;
}

.slide.active{
opacity:1;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:linear-gradient(
to bottom,
rgba(0,0,0,0.35),
rgba(0,0,0,0.65)
);
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:#0000;
}

.hero h1{
font-size:55px;
font-weight:600;
}

.hero p{
font-size:20px;
margin-top:10px;
letter-spacing:2px;
color:white;
text-shadow:0 3px 10px rgba(0,0,0,0.6);
}

/* SECTIONS */

.section{
max-width:1100px;
margin:auto;
padding:100px 20px;
text-align:center;
}

.section h2{
font-size:34px;
margin-bottom:20px;
color:#2d6f8e;
}

.section p{
line-height:1.7;
color:#555;
}

/* PROGRAM CARDS */

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

.card{
background:rgba(255,255,255,0.7);
border-radius:15px;
padding:30px;
backdrop-filter:blur(8px);
box-shadow:0 8px 20px rgba(0,0,0,0.05);
transition:.3s;
position:relative;
overflow:hidden;
}

.card::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0%;
height:4px;
background:#7CFC00; /* lime green */
transition:0.35s ease;
}

.card:hover::after{
width:100%;
}

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

.program-icon{
font-size:42px;
color:#3aa6ff;
margin-bottom:15px;
display:inline-block;
}

/* COUNTERS */

.impact{
background:#d6ecfb;
border-radius:20px;
padding-top:90px;
padding-bottom:90px;
}

.counters{
margin-top:40px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

.counter h3{
font-size:45px;
color:#0d6efd;
}

.counter p{
margin-top:5px;
color:#555;
}

.impact-icon{
font-size:34px;
color:#1b6fa8;
margin-bottom:10px;
}

.counter{
background:rgba(255,255,255,0.7);
padding:25px;
border-radius:15px;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.counter h3{
font-size:42px;
color:#0d6efd;
margin-top:5px;
}

/* MAP */

.map iframe{
width:100%;
height:400px;
border-radius:12px;
border:none;
margin-top:30px;
}

/* CONTACT */

.contact{
line-height:2;
}


/* footer 2*/

/* FOOTER */

.main-footer{
background:#1c4f73;
color:white;
padding:80px 20px 30px;
margin-top:80px;
}

.footer-wrapper{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:1.5fr 1fr 1fr;
gap:50px;
}

.footer-brand h2{
margin-bottom:15px;
}

.footer-brand p{
color:#d8e6f3;
line-height:1.7;
}

.footer-links h3,
.footer-contact h3{
margin-bottom:15px;
}

.footer-links ul{
list-style:none;
}

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

.footer-links a{
color:#d8e6f3;
text-decoration:none;
cursor:pointer;
transition:.3s;
}

.footer-links a:hover{
color:white;
transform:translateX(5px);
}

.footer-contact p{
margin-bottom:10px;
color:#d8e6f3;
}

.footer-social{
margin-top:15px;
}

.footer-social i{
font-size:18px;
margin-right:15px;
cursor:pointer;
transition:.3s;
}

.footer-social i:hover{
transform:scale(1.2);
color:#3aa6ff;
}

.footer-bottom{
text-align:center;
margin-top:50px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,0.2);
font-size:14px;
color:#d8e6f3;
}


/* responsive */

@media(max-width:900px){

.footer-wrapper{
grid-template-columns:1fr;
text-align:center;
}

.footer-social{
justify-content:center;
}

}


/* FOOTER */

footer{
text-align:center;
padding:25px;
margin-top:40px;
font-size:14px;
color:#666;
}

.logo img{
height:80px;
width:auto;
display:block;
}

.main-footer{
background:#1f4f77;
color:white;
padding:70px 20px 30px;
position:relative;
}

.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
}

.footer-col h3{
margin-bottom:20px;
font-size:20px;
}

.footer-col p{
margin-bottom:15px;
line-height:1.6;
color:#dbe7f3;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col ul li{
margin-bottom:12px;
color:#dbe7f3;
cursor:pointer;
border-bottom:1px solid rgba(255,255,255,0.15);
padding-bottom:6px;
}

.newsletter{
display:flex;
gap:10px;
margin-top:10px;
}

.newsletter input{
padding:12px;
border:none;
outline:none;
width:100%;
border-radius:3px;
}

.newsletter button{
background:#f0a34a;
border:none;
padding:12px 18px;
color:white;
cursor:pointer;
border-radius:3px;
}

.footer-bottom{
max-width:1200px;
margin:50px auto 0;
display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid rgba(255,255,255,0.2);
padding-top:20px;
font-size:14px;
}

.socials i{
margin-left:15px;
font-size:18px;
cursor:pointer;
}

/* Scroll to top */

.scroll-top{
position:absolute;
right:30px;
bottom:30px;
background:#2d6f8e;
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
cursor:pointer;
}

/* LOCATION SECTION */

.location-section{
padding:120px 20px;
}

.location-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:60px;
align-items:center;
}

.location-map img{
width:100%;
border-radius:16px;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.location-info h2{
font-size:32px;
color:#2d6f8e;
margin-bottom:10px;
}

.location-info h3{
font-size:22px;
color:#3aa6ff;
margin-bottom:20px;
}

.location-info p{
line-height:1.7;
color:#555;
margin-bottom:25px;
}

.location-btn{
display:inline-block;
padding:12px 24px;
background:#2d6f8e;
color:white;
border-radius:8px;
text-decoration:none;
font-weight:500;
transition:.3s;
}

.location-btn:hover{
background:#1e5470;
}

/* mobile */

@media(max-width:900px){

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

}

/* ABOUT SECTION */

.about-section{
background:#eef7ff;
border-radius:20px;
}

.about-box{
max-width:700px;
margin:auto;
background:white;
padding:40px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.about-box p{
color:#555;
line-height:1.7;
margin-bottom:30px;
}

/* highlight icons */

.about-highlights{
display:flex;
justify-content:center;
gap:35px;
flex-wrap:wrap;
}

.highlight{
display:flex;
align-items:center;
gap:8px;
font-weight:500;
color:#2d6f8e;
}

.highlight i{
font-size:22px;
color:#3aa6ff;
}

/* small hover */

.highlight:hover{
transform:translateY(-3px);
transition:0.2s;
}

.hero-logo{
max-width:300px;
width:100%;
margin-bottom:15px;
}

.footer-logo{
height:60px;
width:auto;
margin-bottom:15px;
}

.footer-social a{
color:#dbe7f3;
margin-right:15px;
font-size:20px;
transition:0.3s;
}

.footer-social a:hover{
color:#3aa6ff;
transform:scale(1.2);
}

/* NAV LINKS */

.nav-links{
display:flex;
}

/* HAMBURGER */

.menu-toggle{
display:none;
font-size:30px;
cursor:pointer;
}

/* MOBILE */

@media(max-width:768px){

.nav-links{
position:absolute;
top:80px;
left:0;
width:100%;
background:white;
flex-direction:column;
align-items:center;
gap:20px;
padding:30px 0;
display:none;
box-shadow:0 10px 20px rgba(0,0,0,0.05);
}

.nav-links a{
margin:0;
}

.menu-toggle{
display:block;
}

.nav-links.active{
display:flex;
}

}

/* TAKE ACTION BUTTON */

/* IMPORT MODERN FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');

.button {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;

  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  background: linear-gradient(135deg, #2e8bc0, #2d6f8e);
  color: #fff;

  border: none;
  border-radius: 50px;

  padding: 12px 22px;
  padding-left: 20px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  box-shadow: 0 8px 20px rgba(46,139,192,0.3);
  transition: all 0.3s ease;
}

/* ICON CIRCLE */
.button__icon-wrapper {
  flex-shrink: 0;
  width: 26px;
  height: 26px;

  position: relative;
  display: grid;
  place-items: center;

  background: #ffffff;
  color: #2e8bc0;

  border-radius: 50%;
  overflow: hidden;

  transition: 0.3s ease;
}

/* HOVER MAIN */
.button:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px rgba(46,139,192,0.45);
  background: linear-gradient(135deg, #1f6f9a, #2e8bc0);
}

/* HOVER ICON */
.button:hover .button__icon-wrapper {
  color: #1f6f9a;
}

/* ICON ANIMATION */
.button__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.button:hover .button__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.button:hover .button__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}
/* SLIDE ARROWS */

.slide-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.35);
color:white;
border:none;
font-size:30px;
width:50px;
height:50px;
cursor:pointer;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:0.3s;
z-index:5;
}

.slide-btn:hover{
background:rgba(0,0,0,0.6);
transform:translateY(-50%) scale(1.1);
}

.prev{
left:25px;
}

.next{
right:25px;
}

.wave-divider{
line-height:0;
margin-top:-40px;
}

.wave-divider svg{
width:100%;
height:90px;
display:block;
}

/* ABOUT SPLIT LAYOUT */

.about-split{
background:#eef7ff;
}

.about-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

/* TEXT SIDE */

.about-text h2{
font-size:34px;
color:#2d6f8e;
margin-bottom:20px;
}

.about-text p{
color:#555;
line-height:1.7;
margin-bottom:25px;
}

/* IMAGE SIDE */

.about-image img{
width:100%;
border-radius:18px;
box-shadow:0 20px 40px rgba(0,0,0,0.08);
transition:0.3s;
}

.about-image img:hover{
transform:scale(1.03);
}

/* HIGHLIGHTS */

.about-highlights{
display:flex;
gap:25px;
flex-wrap:wrap;
margin-top:10px;
}

.highlight{
display:flex;
align-items:center;
gap:8px;
color:#2d6f8e;
font-weight:500;
}

.highlight i{
color:#3aa6ff;
font-size:20px;
}

/* MOBILE */

@media(max-width:900px){

.about-container{
grid-template-columns:1fr;
text-align:center;
}

.about-highlights{
justify-content:center;
}

}

/* PARTNERS SECTION */

.partners{
background:#f2f8ff;
}

.partner-sub{
max-width:600px;
margin:10px auto 40px;
color:#666;
}

.partner-logos{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:40px;
align-items:center;
justify-items:center;
margin-top:30px;
}

.partner-logos img{
max-width:120px;
opacity:0.7;
transition:0.3s;
}

.partner-logos img:hover{

opacity:1;
transform:scale(1.1);
}

html {
  scroll-behavior: smooth;
}

.about-focus{
display:inline-block;
font-size:17px;
font-weight:600;
color:#2d6f8e;
border-left:4px solid #3aa6ff;
padding-left:12px;
margin:10px 0;
}

/* subtle hover (optional, feels premium) */
.about-focus:hover{
background:rgba(45,111,142,0.15);
}

.contact-highlight{
display:inline-block;
margin-top:10px;
padding:10px 18px;
background:rgba(58,166,255,0.12);
color:#2d6f8e;
font-weight:600;
border-radius:8px;
transition:0.3s ease;
cursor:pointer;
}

.contact-highlight:hover{
background:#3aa6ff;
color:white;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

/* Donation */

/* SECTION */
.donation-section{
  padding:80px 20px;
  background:linear-gradient(135deg,#eaf6ff,#f5fbff);
  text-align:center;
}

/* CONTAINER */
.donation-container{
  max-width:700px;
  margin:auto;
}

/* TITLE */
.donation-section h2{
  font-size:32px;
  margin-bottom:15px;
  color:#1f3f5b;
}

/* TEXT */
.donation-section p{
  font-size:16px;
  color:#5a6f7f;
  margin-bottom:30px;
  line-height:1.6;
}

/* BUTTON */
.donate-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:14px 30px;

  background:linear-gradient(135deg,#2e8bc0,#3aa6ff);
  color:#fff;

  font-weight:600;
  text-decoration:none;

  border-radius:50px;
  font-size:15px;

  box-shadow:0 10px 25px rgba(46,139,192,0.3);

  transition:all 0.3s ease;
}

/* ICON */
.donate-icon{
  display:inline-block;
  transition:transform 0.3s ease;
}

/* HOVER */
.donate-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 15px 35px rgba(46,139,192,0.5);
}

.donate-btn:hover .donate-icon{
  transform:translateX(5px);
}


/*  Loasing bar */

#loader-bar{
  position:fixed;
  top:0;
  left:0;
  width:0%;
  height:4px;
  z-index:9999;

  background:linear-gradient(90deg,#2e8bc0,#3aa6ff,#6dd5ed);
  box-shadow:0 0 10px rgba(58,166,255,0.7);

  transition:width 0.4s ease;
}







/* About us slider */

/* ===== ABOUT SECTION LAYOUT ===== */
.about-container{
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
flex-wrap:wrap;
}

.about-text{
flex:1 1 55%;
}

.about-image{
flex:1 1 40%;
text-align:right;
}

.about-image img{
width:100%;
max-width:420px;
border-radius:20px;
transition:0.4s ease;
}

/* ===== TITLE ===== */
.about-text h2{
margin-bottom:20px;
}

/* ===== CARD ===== */
.about-card{
background:linear-gradient(145deg, #ffffff, #f1f7fb);
padding:30px 20px 60px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
border:1px solid rgba(58,166,255,0.15);
position:relative;

/* LOCK HEIGHT (NO JUMP) */
min-height:260px;
display:flex;
align-items:center;
}

/* top accent line */
.about-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#3aa6ff,#6dd5ed);
}

/* ===== SLIDER ===== */
.about-slider{
position:relative;
width:100%;
}

/* STACKED SLIDES (NO RESIZE) */
.about-slide{
position:absolute;
width:100%;
opacity:0;
transform:translateX(20px); /* 👉 horizontal instead */
transition:all 0.35s ease;
}

.about-slide.active{
opacity:1;
transform:translateX(0);
position:relative;
}

/* TEXT */
.about-slide p{
margin:0;
line-height:1.6;
text-align:center;
font-size:15px;
}

/* ===== SMALL TAG ===== */
.slide-tag{
position:absolute;
top:10px;
right:15px;
font-size:12px;
padding:5px 12px;
background:rgba(58,166,255,0.1);
color:#2d6f8e;
border-radius:20px;
font-weight:500;
}




/* ===== DOTS ===== */
.about-dots{
position:absolute;
bottom:15px;
left:50%;
transform:translateX(-50%);
}

.dot{
display:inline-block;
width:8px;
height:8px;
margin:0 5px;
background:#ccc;
border-radius:50%;
transition:0.3s;
cursor:pointer;
}

.dot.active{
width:20px;
border-radius:10px;
background:#3aa6ff;
}

/* ===== HIGHLIGHTS ===== */
.about-highlights{
display:flex;
gap:15px;
margin-top:25px;
flex-wrap:wrap;
justify-content:center;
}

.highlight{
display:flex;
align-items:center;
gap:8px;
background:#f5fbff;
padding:10px 14px;
border-radius:10px;
font-size:14px;
}

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

.about-container{
flex-direction:column;
text-align:center;
}

.about-image{
text-align:center;
}



/* MORE SPACE FOR DOTS */
.about-card{
min-height:280px;
padding:25px 15px 70px;
}

.about-card{
touch-action: pan-y;
cursor: grab;
user-select: none;
}

.about-card{
overflow:hidden; /* 🔥 THIS FIXES THE POP OUT */
}

.about-slide{
pointer-events:none;
}

.about-slide.active{
pointer-events:auto;
}


/* DONATION SECTION */
.donation-section{
  padding:100px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(135deg,#eaf6ff,#f5fbff);
}

/* CARD */
.donation-card{
  max-width:500px;
  width:100%;

  background:white;
  padding:40px 30px;

  border-radius:20px;
  text-align:center;

  box-shadow:0 20px 50px rgba(0,0,0,0.08);
  border:1px solid rgba(58,166,255,0.15);

  position:relative;
  overflow:hidden;
}

/* TOP GLOW LINE */
.donation-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;

  background:linear-gradient(90deg,#3aa6ff,#6dd5ed);
}

/* TITLE */
.donation-card h2{
  font-size:28px;
  margin-bottom:15px;
  color:#1f3f5b;
}

/* TEXT */
.donation-card p{
  font-size:15px;
  color:#5a6f7f;
  margin-bottom:30px;
  line-height:1.6;
}

/* BUTTON (reuse your previous style) */
.donate-button{
  font-size:16px;
  font-family:'Poppins', sans-serif;
  font-weight:700;

  padding:4px;
  border-radius:20px;
  cursor:pointer;
  border:none;

  background: linear-gradient(
    0deg,
    #6dd5ed 0%,
    #6dd5ed 47%,
    #2e8bc0 47%,
    #2e8bc0 100%
  );

  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;

  transition: all 0.1s ease-in-out;
}

.donate-button:active{
  transform:translateY(3px);
}

/* INNER */
.button-content{
  display:flex;
  align-items:center;

  background:white;
  padding:0.7em 1.6em;
  border-radius:16px;
}

.button-content svg{
  width:20px;
  height:20px;
  margin-right:8px;
  color:#2e8bc0;
  transition:0.3s;
}

.donate-button:hover svg{
  transform:scale(1.2);
}

/*ENDS */

/* MOBILE */
@media (max-width:768px){
  .donation-card{
    padding:30px 20px;
  }
}