/* =========================
   GLOBAL
========================= */

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


:root{

  --bg:#f8f6ef;
  --text:#222;
  --card:#ffffff;
  --nav:#ffffff;

  --primary:#0c5c4c;
  --secondary:#d4a948;

}

body.dark{

  --bg:#0f172a;
  --text:#f3f4f6;
  --card:#1e293b;
  --nav:#111827;

  --primary:#22c55e;
  --secondary:#f59e0b;

}

body{
  background:var(--bg);
  color:var(--text);
  transition:0.4s;
  overflow-x:hidden;
}



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

.navbar{

  width:100%;
  padding:14px 3%;

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

  background:rgba(255,255,255,0.9);

  backdrop-filter:blur(12px);

  position:relative;

  box-shadow:0 4px 20px rgba(0,0,0,0.08);

}

body.dark .navbar{
  background:rgba(17,24,39,0.95);
}

/* LOGO */

.logo-brand{

  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  margin-right: auto;

}

.logo-brand img{

  width:220px;
  height:90px;

  object-fit:contain;

  transition:0.4s;

}

.logo-brand img:hover{
  transform:scale(1.05);
}

.logo-brand h1{

  font-size:24px;
  color:var(--primary);
  line-height:1.2;

}

/* NAV LINKS */

.nav-links{

  display:flex;
  align-items:center;

  list-style:none;
  gap:35px;

}

.nav-links li{
  list-style:none;
}

.nav-links a{

  text-decoration:none;
  color:var(--text);

  font-weight:500;

  position:relative;

  transition:0.3s;

}

.nav-links a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-5px;

  width:0%;
  height:2px;

  background:var(--primary);

  transition:0.4s;

}

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

.nav-links a:hover{
  color:var(--primary);
}

/* RIGHT SIDE */

.nav-right{

  display:flex;
  align-items:center;
  gap:15px;
  margin-left:auto;

}

.donate-btn{

  text-decoration:none;

  background:var(--primary);
  color:white;

  padding:12px 25px;

  border-radius:30px;

  font-weight:600;

  transition:0.4s;

}

.donate-btn:hover{

  transform:translateY(-4px);

}

#theme-btn{

  width:48px;
  height:48px;

  border:none;
  border-radius:50%;

  cursor:pointer;

  background:var(--secondary);
  color:white;

  font-size:18px;

}

/* =========================
   HAMBURGER MENU
========================= */

.menu-btn{

  display:none;

  font-size:30px;

  color:var(--primary);

  cursor:pointer;

}



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

.hero{

  min-height:100vh;

  background:
  linear-gradient(rgba(0,0,0,0.65),
  rgba(0,0,0,0.65)),
  url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=1400')
  center/cover no-repeat;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:40px 20px;

}

.hero-content{

  max-width:900px;

  animation:fadeUp 1s ease;

}

.hero-content h1{

  font-size:72px;
  color:white;

  line-height:1.2;

  margin-bottom:25px;

}

.hero-content p{

  color:#f1f1f1;

  font-size:20px;

  line-height:1.9;

  margin-bottom:40px;

}

.hero-btn{

  display:inline-block;

  padding:16px 40px;

  background:var(--secondary);

  color:white;

  text-decoration:none;

  border-radius:50px;

  font-weight:600;

  transition:0.4s;

}

.hero-btn:hover{

  transform:translateY(-5px);

  box-shadow:0 10px 20px rgba(0,0,0,0.2);

}

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

.about{

  padding:100px 8%;

}

.about-heading{

  text-align:center;
  width: 100%;

  margin-bottom:60px;

}

.about-heading h2{

  font-size:55px;

  color:var(--primary);

  margin-bottom:15px;
  text-align: center;

}

.about-container{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:60px;

}

/* IMAGE */

.about-image{

  flex:1;

}

.about-image img{

  width:100%;
  height: 600px;

  border-radius:25px;

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

}

/* CONTENT */

.about-content{

  flex:1;

}

.about-content p{

  margin-bottom:22px;

  line-height:1.9;

  font-size:18px;

}


/* ABOUT IMAGE SLIDER */

.about-slider{

  position:relative;

  width:100%;

  max-width:650px;

}

.about-slider img{

  width:100%;

  height:650px;

  object-fit:cover;

  border-radius:25px;

  display:block;

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

}

/* BUTTONS */

.slider-btn{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:50px;

  height:50px;

  border:none;

  border-radius:50%;

  background:rgba(0,0,0,0.5);

  color:white;

  font-size:24px;

  cursor:pointer;

  transition:0.3s;

}

.slider-btn:hover{

  background:var(--primary);

}

.prev{

  left:15px;

}

.next{

  right:15px;

}

/* MOBILE */

@media(max-width:768px){

  .about-slider img{

    height:400px;

  }

}
/* MOBILE */

@media(max-width:900px){

  .about-container{

    flex-direction:column;

  }

  .about-heading h2{

    font-size:40px;

  }

  .about-content{

    text-align:center;

  }

}
/* =========================
   SECTION TITLE
========================= */

.section-title{

  text-align:center;
  margin-bottom:70px;

}

.section-title h2{

  font-size:48px;
  color:var(--primary);

}

.line{

  width:100px;
  height:4px;

  background:var(--secondary);

  margin:15px auto;

}

/* =========================
   SERVICES
========================= */

.services{
  padding:100px 8%;
}

.service-container{

  display:grid;

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

  gap:30px;

}

.service-card{

  background:var(--card);

  border-radius:25px;

  overflow:hidden;

  box-shadow:0 5px 25px rgba(0,0,0,0.08);

  transition:0.4s;

}

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

.service-card img{

  width:100%;
  height:250px;

  object-fit:cover;

}

.service-content{

  padding:30px;

  text-align:center;

}

.icon{

  width:80px;
  height:80px;

  background:var(--primary);
  color:white;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:auto;

  margin-top:-70px;
  margin-bottom:20px;

  font-size:30px;

  position:relative;

}

.service-content h3{

  font-size:28px;

  margin-bottom:15px;

  color:var(--primary);

}

.service-content p{

  font-size:17px;

  line-height:1.7;

}

/* =========================
   DONATION
========================= */

.donation-section{

  padding:120px 8%;

  background:#f3ead1;

}

body.dark .donation-section{
  background:#172033;
}

.donation-container{

  display:flex;

  justify-content:center;
  align-items:flex-start;

  gap:40px;

  flex-wrap:wrap;

}

/* QR */

.qr-section{

  background:var(--card);

  padding:15px;

  border-radius:25px;

  width:250px;

  text-align:center;

  box-shadow:0 5px 25px rgba(0,0,0,0.08);

}

.qr-section img{

  width:100%;
  max-width:250px;

  border-radius:20px;

  margin-top:20px;
  height: auto;
  display: block;
  margin: 0 auto;


}

/* BANK */

.bank-section{

  background:var(--card);

  padding:35px;

  border-radius:25px;

  width:600px;

  box-shadow:0 5px 25px rgba(0,0,0,0.08);

}

table{

  width:100%;

  border-collapse:collapse;

  margin-top:20px;

}

table td{

  border:1px solid #d6d6d6;

  padding:16px;

  font-size:16px;

}

/* DONATION BUTTONS */

.amount-box{
  margin-top:35px;
}

.amount-buttons{

  display:flex;
  flex-wrap:wrap;

  gap:15px;

  margin-top:20px;

}

.amount-btn{

  border:none;

  background:white;

  padding:14px 24px;

  border-radius:40px;

  cursor:pointer;

  font-weight:600;

  transition:0.3s;

  box-shadow:0 2px 10px rgba(0,0,0,0.08);

}

.amount-btn:hover{

  background:var(--primary);
  color:white;

}

.custom-amount{

  display:flex;

  margin-top:25px;

}

.custom-amount input{

  flex:1;

  padding:15px;

  border:none;
  outline:none;

  border-radius:12px 0 0 12px;

}

.custom-amount button{

  border:none;

  background:var(--primary);
  color:white;

  padding:15px 30px;

  border-radius:0 12px 12px 0;

  cursor:pointer;

}

/* =========================
   CERTIFICATES
========================= */

.certificates{
  padding:100px 8%;
}

.certificate-container{

  display:flex;

  justify-content:center;
  align-items:stretch;

  gap:30px;

  flex-wrap:wrap;

}

.certificate-card{

  width:450px;

  background:var(--card);

  border-radius:25px;

  overflow:hidden;

  box-shadow:0 5px 20px rgba(0,0,0,0.08);

  transition:0.4s;

}

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

.certificate-card img{

  width:100%;
  height:320px;

  object-fit:cover;

}

.certificate-content{

  padding:25px;

  text-align:center;

}

.certificate-content h3{

  margin-bottom:20px;

  color:var(--primary);

  font-size:24px;

}

.download-btn{

  display:inline-block;

  text-decoration:none;

  background:var(--primary);
  color:white;

  padding:14px 28px;

  border-radius:40px;

  font-weight:600;

  transition:0.3s;

}

.download-btn:hover{
  background:var(--secondary);
}

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

.contact{

  padding:100px 8%;

  background:var(--primary);

  color:white;

  text-align:center;

}

.contact h2{

  font-size:45px;

  margin-bottom:30px;

}

.contact p{

  margin:15px 0;

  font-size:18px;

}

.map-container{

  margin-top:40px;

  border-radius:20px;

  overflow:hidden;

  box-shadow:0 5px 25px rgba(0,0,0,0.15);

}

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

.footer{

  background:#052d26;

  color:white;

  padding:60px 20px;

  text-align:center;

}

.footer img{

  width:90px;

  margin-bottom:20px;

}

.footer h3{

  font-size:30px;

  margin-bottom:15px;

}

.footer p{
  line-height:1.8;
}

.social-icons{
  margin:25px 0;
}

.social-icons a{

  width:45px;
  height:45px;

  display:inline-flex;

  justify-content:center;
  align-items:center;

  background:white;

  color:#052d26;

  border-radius:50%;

  margin:0 8px;

  text-decoration:none;

  transition:0.4s;

}

.social-icons a:hover{
  transform:translateY(-5px);
}

/* =========================
   ANIMATION
========================= */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* =========================
   TABLET
========================= */

@media(max-width:992px){

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

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

  .about-image img{
    height:auto;
  }

}

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

@media(max-width:900px){

  .navbar{

    padding:15px 20px;

    flex-wrap:wrap;

  }

  /* MENU BUTTON */

  .menu-btn{
    display:block;
  }

  /* NAV LINKS */

  .nav-links{

    position:absolute;

    top:100%;
    left:0;

    width:100%;

    background:var(--nav);

    flex-direction:column;

    align-items:center;

    gap:25px;

    padding:25px 0;

    display:none;

    box-shadow:0 10px 20px rgba(0,0,0,0.08);

  }

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

  /* RIGHT SIDE */

  .nav-right{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:15px;

  }

  .donate-btn{
    padding:10px 20px;
  }

  /* LOGO */

  .logo-brand img{

    width:90px;
    height:70px;

  }

  .logo-brand h1{
    font-size:18px;
  }

  /* HERO */

  .hero-content h1{
    font-size:42px;
  }

  .hero-content p{
    font-size:16px;
  }

  /* SERVICES */

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

  /* DONATION */

  .bank-section,
  .qr-section{
    width:100%;
  }

  .custom-amount{
    flex-direction:column;
    gap:10px;
  }

  .custom-amount input,
  .custom-amount button{
    width:100%;
    border-radius:12px;
  }

  /* CERTIFICATES */

  .certificate-card{
    width:100%;
  }

  /* CONTACT */

  .contact h2,
  .section-title h2,
  .about-content h2{
    font-size:36px;
  }

}

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

@media(max-width:600px){

  .hero-content h1{
    font-size:34px;
  }

  .hero-content p{
    font-size:15px;
  }

  .section-title h2{
    font-size:30px;
  }

  .service-content h3{
    font-size:24px;
  }

  .about,
  .services,
  .donation-section,
  .certificates,
  .contact{
    padding:70px 20px;
  }

}


/* =========================
   GO TO TOP BUTTON
========================= */

#topBtn{

  position:fixed;

  bottom:30px;

  right:30px;

  width:55px;

  height:55px;

  border:none;

  border-radius:50%;

  background:var(--primary);

  color:white;

  font-size:22px;

  cursor:pointer;

  display:none;

  z-index:999;

  box-shadow:0 5px 15px rgba(0,0,0,0.2);

  transition:0.3s;

}

#topBtn:hover{

  background:var(--secondary);

  transform:translateY(-5px);

}

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

.floating-donate{

  position:fixed;

  right:25px;

  bottom:100px;

  background:var(--primary);

  color:white;

  text-decoration:none;

  padding:14px 22px;

  border-radius:50px;

  font-weight:600;

  display:flex;

  align-items:center;

  gap:10px;

  box-shadow:0 5px 20px rgba(0,0,0,0.2);

  z-index:999;

  transition:0.4s;

  opacity:0;

  visibility:hidden;

  transform:translateY(20px);

}

/* SHOW AFTER SCROLL */

.floating-donate.show-donate{

  opacity:1;

  visibility:visible;

  transform:translateY(0);

}

.floating-donate:hover{

  transform:translateY(-5px);

  background:var(--secondary);

}

/* MOBILE */

@media(max-width:768px){

  .floating-donate{

    right:15px;

    bottom:100px;

    padding:12px 18px;

    font-size:14px;

  }

}



/* MOBILE FULL WIDTH FIX */

html, body{

  width:100%;

  overflow-x:hidden;

}

/* MAIN SECTIONS */

.hero,
.about,
.services,
.donation-section,
.certificates,
.contact,
.footer{

  width:100%;

  max-width:100%;

}

/* ABOUT SECTION */

.about{

  display:flex;

  flex-wrap:wrap;

}

/* IMAGES */

img{

  max-width:100%;

  height:auto;

}

/* MOBILE FIX */

@media(max-width:768px){

  body{

    overflow-x:hidden;

  }

  .navbar,
  .hero,
  .about,
  .services,
  .donation-section,
  .certificates,
  .contact,
  .footer{

    width:100%;

    padding-left:15px;

    padding-right:15px;

  }

  .hero-content{

    width:100%;

  }

}