/* ===== HERO SLIDER ===== */
.hero-slider{
  width:100%;
  height:68vh;          /* ⬅ increased */
  min-height:420px;     /* ⬅ increased */
  max-height:700px;     /* ⬅ increased */
  position:relative;
  overflow:hidden;
}

@media (max-width:768px){
  .hero-slider{
    height:55vh;        /* ⬅ mobile increase */
    min-height:340px;
  }
}

.slides{
  width:100%;
  height:100%;
  position:relative;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.05);
}

.slide.active{
  opacity:1;
  z-index:1;
}

/* overlay (BEHIND text) */
.slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.35) 60%,
    rgba(0,0,0,0.15) 100%
  );
  z-index:1;
  pointer-events:none;
}

/* TEXT */
.slide-text{
  position:absolute;
  bottom:34px;
  left:32px;
  max-width:75%;
  color:#fff;
  z-index:2;
  padding-left:16px;
  border-left:4px solid #d98e33;
}

.slide-text h2{
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  font-weight:600;
  margin-bottom:6px;
  text-shadow:0 3px 10px rgba(0,0,0,0.6);
}

.slide-text p{
  font-size:clamp(1rem,2vw,1.15rem);
  margin-bottom:14px;
  opacity:0.95;
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
}

/* BUTTON */
.slide-btn{
  display:inline-block;
  padding:7px 18px;
  font-size:14px;
  border-radius:20px;
  background:linear-gradient(90deg,#d98e33,#c4322c);
  color:#fff;
  transition:0.3s;
  position:relative;
  z-index:3;
  pointer-events:auto;
}

.slide-btn:hover{
  transform:translateY(-2px);
  opacity:0.95;
}

/* DOTS */
.slider-dots{
  position:absolute;
  bottom:16px;
  right:22px;
  display:flex;
  gap:10px;
  z-index:5;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
  cursor:pointer;
  transition:0.3s;
}

.dot.active{
  background:#d98e33;
  transform:scale(1.3);
}
/* Slider Completed */

/* About Us Start */
    .about-section{
      width:100%;
      padding:10px 20px;
      background:#f7f9ff;
    }

    .about-wrapper{
      max-width:1300px;
      margin:auto;
      display:flex;
      align-items:center;
      gap:70px;
    }

    /* IMAGE SIDE – EXACT 50% */
    .about-image{
      flex:0 0 50%;
    }

    .about-image img{
      width:100%;
      height:auto;
      border-radius:22px;
      object-fit:cover;
      box-shadow:0 25px 50px rgba(0,0,0,0.2);
    }

    /* CONTENT SIDE – 50% */
    .about-content{
      flex:0 0 50%;
      display:flex;
      flex-direction:column;
    }

    /* TITLE – Stylish & Trustworthy */
    .about-title{
      font-family:'Playfair Display', serif;
      font-size:clamp(2.2rem,3.5vw,3rem);
      color:#1f2a63;
      margin-bottom:14px;
      letter-spacing:0.5px;
    }

    /* PARAGRAPH – Clean & Readable */
    .about-text{
      font-family:'Poppins', sans-serif;
      font-size:1.05rem;
      line-height:1.8;
      color:#555;
      margin-bottom:18px;
    }

    /* SUBTITLE – Highlight Line */
    .about-subtitle{
      font-family:'Merriweather', serif;
      font-size:1.1rem;
      color:#c4322c;
      margin-bottom:32px;
    }

    /* BUTTON */
    .about-btn{
      align-self:flex-start;
      padding:13px 34px;
      border-radius:32px;
      background:linear-gradient(90deg,#d98e33,#c4322c);
      color:#fff;
      font-size:14.5px;
      font-family:'Poppins', sans-serif;
      letter-spacing:0.3px;
      transition:0.3s;
      text-decoration:none;
      box-shadow:0 10px 25px rgba(0,0,0,0.18);
    }

    .about-btn:hover{
      transform:translateY(-3px);
      opacity:0.95;
    }

    /* RESPONSIVE */
    @media(max-width:900px){
      .about-wrapper{
        flex-direction:column;
        gap:45px;
      }

      .about-image,
      .about-content{
        flex:1;
      }

      .about-section{
        padding:35px 20px;
      }
    }
/* About us completed */

/* Mission vision start */
    .ngo-about-accordion{
      width:100%;
      padding:0px 20px;
      background:linear-gradient(
        180deg,
        #f7f9ff 0%,
        #ffffff 60%,
        rgba(217,142,51,0.08) 100%
      );
      text-align:center;
    }

    /* TOP TEXT */
    /* .ngo-tag{
      font-family:'Poppins', sans-serif;
      letter-spacing:2px;
      color:#c4322c;
      font-size:0.85rem;
      margin-bottom:10px;
    } */

    .ngo-title{
      font-family:'Playfair Display', serif;
      font-size:clamp(2.2rem,3.5vw,3rem);
      color:#1f2a63;
      margin-bottom:10px;
    }

    .ngo-subtitle{
      font-family:'Poppins', sans-serif;
      font-size:1rem;
      color:#555;
      margin-bottom:50px;
    }

    /* ACCORDION WRAPPER */
    .accordion-wrapper{
      max-width:1000px;
      margin:auto;
      display:flex;
      flex-direction:column;
      gap:22px;
    }

    /* ACCORDION ITEM */
    .accordion-item{
      background:linear-gradient(90deg,#ffffff,#f7f9ff);
      border-radius:18px;
      box-shadow:0 14px 32px rgba(0,0,0,0.12);
      overflow:hidden;
      transition:all 0.35s ease;
      border:2px solid transparent;
    }

    /* 🔥 ACTIVE STATE COLOR CHANGE */
    .accordion-item.active{
      background:linear-gradient(
        135deg,
        rgba(217,142,51,0.15),
        rgba(196,50,44,0.12)
      );
      border-color:#d98e33;
      box-shadow:0 20px 45px rgba(196,50,44,0.25);
    }

    .accordion-header{
      padding:22px 26px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      cursor:pointer;
    }

    .accordion-header h3{
      font-family:'Merriweather', serif;
      font-size:1.2rem;
      color:#1f2a63;
      margin:0;
    }

    .accordion-icon{
      font-size:1.2rem;
      color:#c4322c;
      transition:transform 0.3s ease;
    }

    .accordion-item.active .accordion-icon{
      transform:rotate(180deg);
    }

    /* CONTENT */
    .accordion-content{
      max-height:0;
      overflow:hidden;
      padding:0 26px;
      transition:max-height 0.45s ease, padding 0.3s ease;
      text-align:left;
    }

    .accordion-content p{
      font-family:'Poppins', sans-serif;
      font-size:0.95rem;
      color:#444;
      line-height:1.7;
      padding-bottom:22px;
    }

    .accordion-item.active .accordion-content{
      max-height:320px;
      padding-top:10px;
    }

    /* RESPONSIVE */
    @media(max-width:768px){
      .ngo-about-accordion{
        padding:0px 16px;
      }

      .accordion-header h3{
        font-size:1.05rem;
      }
    }
/* Mission Vision Completed */

/* Focus Areas Start */
    .focus-area-section{
      width:100%;
      padding:80px 20px;
      background:linear-gradient(
        180deg,
        #f7f9ff 0%,
        #ffffff 70%
      );
    }

    .focus-area-wrapper{
      max-width:1250px;
      margin:auto;
      text-align:center;
    }

    /* TITLE */
    .focus-title{
      font-family:'Playfair Display', serif;
      font-size:clamp(2.3rem,3.5vw,3.1rem);
      color:#1f2a63;
      position:relative;
      display:inline-block;
      padding-bottom:16px;
      margin-bottom:14px;
    }

    .focus-title::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      transform:translateX(-50%);
      width:100px;
      height:4px;
      border-radius:4px;
      background:linear-gradient(90deg,#d98e33,#c4322c);
    }

    .focus-subtitle{
      font-family:'Poppins', sans-serif;
      font-size:1.05rem;
      color:#555;
      max-width:760px;
      margin:0 auto 65px;
      line-height:1.8;
    }

    /* GRID */
    .focus-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:40px;
    }

    /* CARD */
    .focus-card{
      background:#ffffff;
      border-radius:26px;
      overflow:hidden;
      box-shadow:0 18px 40px rgba(0,0,0,0.12);
      transition:all 0.4s ease;
      text-align:left;
      position:relative;
    }

    .focus-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(
        180deg,
        rgba(217,142,51,0.08),
        rgba(196,50,44,0.06)
      );
      opacity:0;
      transition:0.4s;
    }

    .focus-card:hover::before{
      opacity:1;
    }

    .focus-card:hover{
      transform:translateY(-10px);
      box-shadow:0 28px 55px rgba(0,0,0,0.18);
    }

    /* IMAGE */
    .focus-card img{
      width:100%;
      height:240px;
      object-fit:cover;
      transition:0.4s;
    }

    .focus-card:hover img{
      transform:scale(1.05);
    }

    /* CONTENT */
    .focus-content{
      padding:30px 28px 34px;
      position:relative;
      z-index:2;
    }

    .focus-content h3{
      font-family:'Merriweather', serif;
      font-size:1.45rem;
      color:#1f2a63;
      margin-bottom:14px;
    }

    .focus-content p{
      font-family:'Poppins', sans-serif;
      font-size:0.96rem;
      color:#555;
      line-height:1.7;
    }

    /* RESPONSIVE */
    @media(max-width:1000px){
      .focus-grid{
        grid-template-columns:1fr;
        gap:35px;
      }

      .focus-card img{
        height:220px;
      }
    }

    @media(max-width:600px){
      .focus-area-section{
        padding:60px 16px;
      }
    }
/* Focus Areas Completed */

/* DONATION SECTION */
/* ===== DONATION CTA (SCOPED) ===== */

.donx-wrap{
  width:100%;
  background:url('/img/picture.jpg') center/cover no-repeat;
}

.donx-bg{
  background:rgba(15,23,42,.72);
  padding:100px 20px;
}

.donx-content{
  max-width:1100px;
  margin:auto;
  text-align:center;
  color:#fff;
}

.donx-content h2{
  font-size:40px;
  margin-bottom:16px;
}

.donx-content p{
  max-width:880px;
  margin:auto;
  font-size:17px;
  line-height:1.8;
}

/* BUTTON */

.donx-main-btn{
  margin-top:36px;
  padding:15px 44px;
  border-radius:50px;
  border:none;
  background:linear-gradient(120deg,#e76f2d,#f4c430);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.donx-main-btn:hover{
  transform:translateY(-4px);
}

/* ===== MODAL ===== */

.donx-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
  padding:20px;
}

.donx-box{
  background:#fff;
  max-width:520px;
  width:100%;
  padding:36px 30px;
  border-radius:22px;
  position:relative;
}

.donx-close{
  position:absolute;
  top:14px;
  right:18px;
  font-size:26px;
  cursor:pointer;
}

.donx-box h3{
  text-align:center;
  margin-bottom:22px;
}

/* PANELS */

.donx-panel{
  text-align:center;
}

#donxQR{
  display:none;
}

.donx-panel p{
  font-size:15px;
  margin-bottom:8px;
}

/* SWITCH BUTTON */

.donx-switch{
  margin-top:18px;
  padding:12px 32px;
  border-radius:40px;
  border:none;
  background:#e76f2d;
  color:#fff;
  cursor:pointer;
}

.donx-switch.outline{
  background:#fff;
  color:#e76f2d;
  border:2px solid #e76f2d;
}

.donx-panel img{
  max-width:200px;
  margin:16px auto;
  display:block;
}

/* MOBILE */

@media(max-width:600px){
  .donx-content h2{font-size:30px;}
  .donx-bg{padding:80px 16px;}
}

/* DONATION SECTION */

/* GET INVOLVED */
/* ================= GET INVOLVED SECTION ================= */

.get-involved{
  padding:90px 20px;
  background:#f8fafc;
}

.involved-container{
  max-width:1200px;
  margin:auto;
}

.involved-header{
  text-align:center;
  margin-bottom:55px;
}

.involved-header h2{
  font-family:'Merriweather',serif;
  font-size:40px;
  color:#0f172a;
  margin-bottom:14px;
}

.involved-header p{
  max-width:760px;
  margin:auto;
  font-size:17px;
  line-height:1.8;
  color:#475569;
}

/* GRID */

.involved-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}

/* CARD */

.involved-card{
  background:#ffffff;
  padding:40px 28px;
  border-radius:26px;
  text-align:center;
  box-shadow:0 12px 35px rgba(0,0,0,.08);
  transition:.4s ease;
  position:relative;
}

.involved-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 55px rgba(0,0,0,.15);
}

.involved-card .icon{
  font-size:42px;
  margin-bottom:18px;
  display:inline-block;
}

.involved-card h3{
  font-size:22px;
  color:#0f172a;
  margin-bottom:12px;
}

.involved-card p{
  font-size:15.5px;
  line-height:1.7;
  color:#475569;
  margin-bottom:28px;
}

/* BUTTON */

.involved-btn{
  display:inline-block;
  padding:13px 36px;
  border-radius:40px;
  font-weight:600;
  background:linear-gradient(120deg,#e76f2d,#f4c430);
  color:#fff;
  text-decoration:none;
  transition:.35s;
}

.involved-btn:hover{
  transform:scale(1.05);
  box-shadow:0 15px 40px rgba(231,111,45,.35);
}

/* HIGHLIGHT CARD */

.involved-card.highlight{
  background:linear-gradient(140deg,#e76f2d,#f4c430);
  color:#fff;
}

.involved-card.highlight h3,
.involved-card.highlight p{
  color:#fff;
}

.involved-card.highlight .involved-btn{
  background:#fff;
  color:#e76f2d;
}

/* RESPONSIVE */

@media(max-width:768px){
  .involved-header h2{font-size:32px;}
  .involved-card{padding:32px 22px;}
}

@media(max-width:480px){
  .get-involved{padding:70px 16px;}
  .involved-header p{font-size:15px;}
}

/* GET INVOLVED */

/* CERTIFICATION SECTION */
/* ================= NGO CERTIFICATION SECTION ================= */

.ngo-certification{
  width:100%;
  padding:90px 20px;
  background:linear-gradient(120deg,#e76f2d,#f4c430,#e76f2d);
  background-size:200% 200%;
  animation:gradientMove 8s ease infinite;
  color:#fff;
  text-align:center;
}

@keyframes gradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.cert-content{
  max-width:1100px;
  margin:auto;
}

.cert-content h2{
  font-family:'Merriweather',serif;
  font-size:40px;
  margin-bottom:16px;
}

.cert-content p{
  font-size:17px;
  line-height:1.8;
  max-width:900px;
  margin:0 auto 40px;
  opacity:.95;
}

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

.cert-btn{
  background:#fff;
  color:#e76f2d;
  padding:16px 46px;
  border-radius:50px;
  font-weight:700;
  font-size:16px;
  border:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:.35s;
}

.cert-btn::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:rgba(255,255,255,.4);
  transform:skewX(-20deg);
}

.cert-btn:hover::after{
  left:120%;
  transition:.7s;
}

.cert-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(0,0,0,.25);
}

/* ================= MODAL ================= */

.cert-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.65);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;
}

.cert-box{
  background:rgba(255,255,255,.96);
  color:#0f172a;
  max-width:900px;
  width:100%;
  padding:45px;
  border-radius:28px;
  position:relative;
  animation:popup .45s ease;
}

@keyframes popup{
  from{opacity:0;transform:scale(.92) translateY(30px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

.close-btn{
  position:absolute;
  top:18px;
  right:22px;
  font-size:28px;
  cursor:pointer;
  color:#64748b;
}

.cert-box h3{
  font-family:'Merriweather',serif;
  font-size:32px;
  text-align:center;
  margin-bottom:35px;
}

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

.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}

.cert-card{
  background:#f8fafc;
  padding:34px 22px;
  border-radius:20px;
  box-shadow:0 12px 35px rgba(0,0,0,.08);
  font-weight:700;
  text-align:center;
  border-top:5px solid #e76f2d;
  cursor:pointer;
  position:relative;
  transition:.35s;
}

.cert-card::before{
  content:"✓";
  position:absolute;
  top:14px;
  right:16px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#22c55e;
  color:#fff;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.6);
  transition:.3s;
}

.cert-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.cert-card.active{
  background:#ecfeff;
  border-top-color:#22c55e;
}

.cert-card.active::before{
  opacity:1;
  transform:scale(1);
}

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

@media(max-width:768px){
  .cert-content h2{font-size:32px;}
  .cert-box{padding:30px;}
}

@media(max-width:480px){
  .cert-content p{font-size:15px}
  .cert-box h3{font-size:26px}
}