* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Add padding only for mobile view */
@media (max-width: 768px) {
  body {
    padding-top: 100px; /* Padding for mobile header */
  }
}

/* Main Navigation Container */
/* 1. Define the continuous floating animation */
@keyframes float {
  0% {
    transform: translateY(0); /* Start at original position */
  }
  50% {
    transform: translateY(-4px); /* Float 4 pixels up */
  }
  100% {
    transform: translateY(0); /* Return to original position */
  }
}

/* 2. Apply the animation directly to the specific ID */
#donate-button {
  /* Set display to ensure transform works correctly on this <a> tag */
  display: inline-block; 
  animation: float 3s ease-in-out infinite;
}
.main-nav-container {
  position: relative;
  background: linear-gradient(135deg, #0E3E32 0%, #128d6e 100%);
  padding: 15px 0;
  z-index: 1000;
}

/* Top Bar */
.top-bar {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  margin-bottom: 25px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  max-height: 70px;
  width: auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.text-logo {
  font-family: 'Georgia', serif; /* Elegant and trustworthy */
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff; /* White text to match your logo */
  letter-spacing: 1px;
}

.logo-img {
  height: 50px; /* Adjust as needed */
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 15px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* Contact Info */
.contact-info {
  display: flex;
  gap: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 14px;
}

.contact-item svg {
  opacity: 0.8;
}

/* Rounded Navbar */
.rounded-navbar {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 50px;
  padding: 13px 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 25px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  background: linear-gradient(135deg, #FFD940 0%, #f7c80e 100%);
  color: black;
  transform: translateY(-2px);
}

    /* Hero Section */
    .hero-section {
      position: relative;
      min-height: 60vh;
      width: 100%;
      overflow: hidden;
    }

    /* Carousel */
    .carousel {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
    }

    .carousel img {
      width: 100%;
      height: 100%;
      min-height: 60vh;
      object-fit: cover;
      position: absolute;
      top: 0; left: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .carousel img.active {
      opacity: 1;
    }

    /* Full Overlay */
    .overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      min-height: 60vh;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
      background: rgba(0,0,0,0.45);
      padding: 40px 20px;
    }

    .overlay h1 {
      font-size: 2.8rem;
      margin-bottom: 15px;
      padding: 0 15px;
    }

    .overlay p {
      font-size: 1.2rem;
      max-width: 700px;
      padding: 0 15px;
    }

    @media (max-width: 768px) {
      .hero-section {
        min-height: 70vh;
      }
      .carousel img {
        min-height: 70vh;
      }
      .overlay {
        min-height: 70vh;
        padding: 80px 15px;
      }
      .overlay h1 {
        font-size: 2rem;
        line-height: 1.3;
      }
      .overlay p {
        font-size: 1rem;
        line-height: 1.5;
      }
    }

    /* Stats Section */
    .stats {
      position: relative;
      margin-top: -8vh; /* overlaps hero by 2% */
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      justify-content: center;
      background: #fff;
      padding: 25px 40px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      gap: 20px;
      width: 80%;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
      z-index: 10;
    }

    .stat {
      flex: 1 1 200px;
      text-align: center;
    }

    .stat span {
      display: block;
      font-size: 1.8rem;
      font-weight: bold;
      color: #333;
    }

    .stat p {
      font-size: 1rem;
      color: #555;
    }


    /* Responsive */
@media (max-width: 768px) {
  .stats {
    position: relative; 
    margin-top: -4vh; /* ✅ Keep hero overlap */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    gap: 6px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    z-index: 10; /* maintain stacking */
  }

  .stat {
    flex: 1 1 45%;
    padding: 2px 0;
    text-align: center;
  }

  .stat span {
    font-size: 1.1rem;
    margin-bottom: 1px;
    line-height: 1.1;
  }

  .stat p {
    font-size: 0.75rem;
    line-height: 1;
    color: #444;
  }
}


/*Story Block*/
  .story-notice {
    margin:20px auto;
    display: flex;
    gap: 8px;
    align-items: center;
    background: transparent;
    padding: 16px 20px;
    border-radius:var(--shadow);
    box-shadow: darkgreen;
    max-width: 800px;
    width: 100%;
    transition: var(--transition);
  }

  .story-notice:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  }

  .story-photo {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(15,185,177,0.15);
  }

  .story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .story-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .story-text {
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 6px 0;
  }

  .story-text strong {
    color: var(--accent);
  }

  .story-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .story-date {
    font-size: 0.85rem;
    color: var(--muted);
  }

  .story-cta {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
  }

  .story-cta svg {
    transition: transform var(--transition);
  }

  .story-cta:hover {
    border-color: var(--accent);
  }

  .story-cta:hover svg {
    transform: translateX(3px);
  }

  /* Responsive tweaks */
  @media (max-width: 480px) {
    .story-photo {
      width: 50px;
      height: 50px;
    }
    .story-notice {
      padding: 14px;
    }
    .story-text {
      font-size: 0.9rem;
    }
  }
    /*programs*/
.impact-carousel {
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding-top: 60px; /* ensures icon circles are visible */
}

.impact-carousel__track {
  display: flex;
  gap: 2rem;
  transition: transform 0.6s ease;
}

.impact-card {
  flex: 0 0 calc(33.333% - 1.33rem); /* 3 cards per view desktop */
  background: #fff;
  border-radius: 24px;
  padding: 60px 30px 40px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  text-align: center;
}

.impact-card:hover {
  background: #f6f9f7;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.impact-card__icon-circle {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #f8f4ec;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.impact-card__icon-circle i {
  font-size: 32px;
  color: #0E3E32;
}

.impact-card h3 {
  margin-top: 60px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0E3E32;
}

.impact-card p {
  margin: 15px 0 25px;
  color: #555;
  font-size: 0.95rem;
}

.impact-card__btn {
  background: #0E3E32;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 10px 24px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.impact-card:hover .impact-card__btn {
  background: #FFD940;
  color: #0E3E32;
}

/* Dots */
.impact-carousel__dots {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 8px;
}

.impact-dot {
  width: 10px;
  height: 10px;
  background: #0E3E32;
  border-radius: 50%;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.impact-dot--active {
  background: #FFD940;
  opacity: 1;
}

/* Responsive: 2 per view tablet, 1 per view mobile */
@media (max-width: 1024px) {
  .impact-card { flex: 0 0 calc(50% - 1rem); }
}
@media (max-width: 768px) {
  .impact-card { flex: 0 0 100%; }
  .impact-card__icon-circle { width: 70px; height: 70px; top: -35px; }
  .impact-card h3 { margin-top: 50px; }
}
/* ABOUT SECTION */
.about-section {
  padding: 5rem 1.5rem;
  display: flex;
  justify-content: center;
  background: #fff;
}

.about-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  gap: 3rem;
  align-items: center;
}

/* Responsive grid */
@media (max-width: 900px) {
  .about-container {
    grid-template-columns: 1fr;
  }
}

/* TAG */
.tag {
  display: inline-block;
  border: 1px solid #0e3e32;
  color: #0e3e32;
  border-radius: 20px;
  padding: 0.25rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}

/* HEADINGS */
.about-text h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.3;
  font-weight: 700;
  color: #0e3e32;
  margin-bottom: 1rem;
}

.about-text .highlight {
  background: rgba(255, 217, 64, 0.4);
  padding: 0 0.3rem;
  border-radius: 5px;
}

.about-text .quote {
  font-size: 1rem;
  color: #555;
  margin-bottom: 2rem;
  max-width: 90%;
}

/* FEATURE */
.feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.icon-box {
  width: 40px;
  height: 40px;
}

.icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature h3 {
  color: #0e3e32;
  font-size: 1.2rem;
  font-weight: 700;
}

.feature p {
  color: #555;
  font-size: 0.95rem;
}

/* CTA */
.cta {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

.btn {
  background-color: #FFD940;
  color: #fff;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s;
}

.btn:hover {
  background-color: #145f48;
}

.profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profile img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.profile h4 {
  font-size: 1rem;
  color: #0e3e32;
}

.profile p {
  font-size: 0.85rem;
  color: #777;
}

/* IMAGE COLLAGE */
.about-images {
  position: relative;
  width: 100%;
  min-height: 500px;
}

/* Main center image */
.img-main {
  position: relative;
  z-index: 2;
  width: 80%;
  margin: 0 auto;
  animation: float 6s ease-in-out infinite;
}

/* Top-left small image */
.img-small {
  position: absolute;
  top: -30px;
  left: 5%;
  width: 45%;
  z-index: 3;
  transform: rotate(-2deg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  animation: fadeInUp 1s ease forwards, float 7s ease-in-out infinite;
}

/* Bottom image */
.img-bottom {
  position: absolute;
  bottom: -30px;
  right: 5%;
  width: 60%;
  z-index: 1;
  transform: rotate(1deg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  animation: fadeInDown 1s ease forwards, float 8s ease-in-out infinite;
}

/* Rounded corners */
.about-images img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;
  background-color: #fff;
}

/* RESPONSIVE COLLAGE */
@media (max-width: 600px) {
  .about-images {
    min-height: 350px;
  }
  .img-main { width: 85%; }
  .img-small { width: 50%; top: -15px; left: 2%; }
  .img-bottom { width: 65%; bottom: -15px; right: 2%; }
}

/* ANIMATIONS */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.5deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/*Get involved*/
/* Programs Section */
.programs {
    padding: 60px 20px;
    background: white;
    text-align: center;
    color: white;
}

.programs h2 {
    font-size: 30px;
    margin-bottom: 40px;
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.program-card {
    background: #0e3e32;
    padding: 20px;
    border-radius: 5px;
    transition: transform 0.3s;
}

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

.program-card .icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.program-card h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.program-card p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
}

.program-link {
    color: #FFD940;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}

.program-link:hover {
    text-decoration: underline;
}

.impact-counter p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
}

.progress-bar {
    background: #0e3e32;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.progress {
    background: #FFD940;
    height: 100%;
    transition: width 1s ease-in-out;
}
/*contact*/
*{box-sizing:border-box;margin:0;padding:0}
#contact{width:100%;padding:2rem;display:flex;justify-content:center;background: url('assets/img/footer-bg.jpg') center/cover no-repeat;}
.contact-us-container{display:flex;flex-wrap:wrap;max-width:1100px;width:100%;gap:1.5rem;align-items:stretch}
.contact-us-info,.contact-form{flex:1 1 500px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:center}
.contact-us-info{background:#fff;color:#0e3e32;padding:2rem}
.contact-us-info h3{font-size:1.6rem;margin-bottom:1.5rem}
.info-item{display:flex;align-items:flex-start;gap:2rem;margin-bottom:1rem}
.info-item i{color:#0e3e32;font-size:1.3rem;margin-top:.2rem}
.info-item p{font-size:.95rem;line-height:1.5}
.contact-form{color:#000;padding:2.5rem}
h2{font-size:2rem;margin-bottom:1rem}
label{display:block;margin-top:1rem;font-size:.9rem}
input[type=text],input[type=email],textarea{width:100%;padding:.75rem;border:.5px solid #ccc;border-radius:6px;margin-top:.25rem;font-size:.95rem}
textarea{min-height:100px;resize:vertical}
button{width:100%;padding:.85rem;background:#FFD940;border:none;border-radius:6px;font-size:1rem;font-weight:600;color:#000000;cursor:pointer;transition:background .3s;margin-top:1rem}
button:hover{background:#14644f; color: white;}
@media(max-width:900px){.contact-us-container{flex-direction:column;align-items:stretch}.contact-us-info,.contact-form{width:100%;padding:1.5rem;min-height:auto}}


/* Footer*/
.news-container {
  text-align: center;
  padding: 15px;
}
.cta-inner {
  max-width: 700px;
  margin: 0 auto;
  border-radius: 50%;
  padding: 20px;
}

/* ---------- footer base ---------- */
/* this CSS targets the section markup above; keep the section id as "#footer" */
#footer{
  margin-top: 20px;
  position:relative;
  background:#0f0f10;
  color:#dadfdf;
  text-align:center;
  padding: .5rem 1rem 2rem;
  -webkit-font-smoothing:antialiased;
}

/* ---------- floating subscribe bar (half overlapping) ---------- */
.subscribe-section {
  display: flex;
  justify-content: center;
  position: relative;
  top: -40px; /* overlap half of height above footer */
  z-index: 2;
}

.subscribe-bar {
  display: flex;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  max-width: 600px;
  width: 90%;
  height: 60px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.subscribe-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 20px;
  font-size: 1rem;
  color: #333;
  background: transparent;
  border-radius: 50px 0 0 50px;
}

.subscribe-bar button {
  background: #c2a57a;
  color: #fff;
  border: none;
  outline: none;
  padding: 0 40px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subscribe-bar button:hover {
  background: #b99665;
}

@media (max-width: 600px) {
  .subscribe-bar {
    flex-direction: column;
    height: auto;
    border-radius: 20px;
  }

  .subscribe-bar input,
  .subscribe-bar button {
    border-radius: 0;
    width: 100%;
    padding: 15px;
  }

  .subscribe-bar button {
    border-radius: 0 0 20px 20px;
  }
}

/* ---------- nav row (single horizontal line) ---------- */
.footer-nav{ margin-top:2.6rem; display:flex; justify-content:center; }
.footer-nav nav{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; align-items:center; }
.footer-nav a{ color:#FFD940; text-decoration:none; font-size:15px; opacity:.96; transition:color .15s; }
.footer-nav a:hover{ color:#dfe6e6; }

/* ---------- social icons centered ---------- */
.social-icons{ margin:1.8rem 0 1.2rem; display:flex; justify-content:center; gap:20px; align-items:center; }
.social-icons a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; color:#FFD940; background:transparent; transition:all .12s ease; }
.social-icons a:hover{ color:#e6caa0; background:rgba(255,255,255,.03); }
.social-icons svg{ width:20px; height:20px; display:block; fill:currentColor; }

/* ---------- footer bottom ---------- */
.footer-bottom{ color:#FFD940; font-size:13px; margin-top:6px; }
.footer-bottom span{ color:#FFD940; }

/* ---------- responsive behavior ---------- */
@media (max-width:720px){
  /* make the subscribe pill slightly taller on small screens for touch */
  .subscribe-form input[type="email"]{ padding:12px 16px; font-size:15px; }
  .subscribe-form .subscribe-btn{ padding:0 24px; min-height:46px; }

  /* stack nav links vertically on small narrow screens */
  .footer-nav nav{ gap:16px; }

  /* reduce gaps */
  .social-icons{ gap:14px; }
}

/* mobile: stack input and button (full width) */
@media (max-width:520px){
  #footer{ 
    padding: 2rem 0.8rem 1.5rem; /* Reduced padding for mobile */
  }
  .subscribe-form{ 
    flex-direction:column; 
    border-radius:14px; 
    overflow:hidden; 
  }
  .subscribe-form input[type="email"]{ 
    border-radius:0; 
    padding:12px 14px; 
  }
  .subscribe-form .subscribe-btn{ 
    width:100%; 
    border-radius:0 0 12px 12px; 
    margin-left:0; 
    min-height:44px; 
    padding:12px 18px; 
  }
  .subscribe-bar{ 
    width:94%; 
    transform:translate(-50%,-50%); 
  }
  
  /* Additional mobile footer adjustments */
  .footer-nav { 
    margin-top: 1.5rem; 
  }
  .social-icons {
    margin: 1.2rem 0 1rem;
  }
  .footer-bottom {
    margin-top: 1rem;
  }
}

/* impact-area styles */

/* Wrapper scope */
.impact-page, #impact-areas { font-family: "Open Sans", Arial, sans-serif; color: #0b1220; }

/* generic layout */
.impact-page .wrap { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 0 40px; /* Increased side padding */
}

/* HERO */
.impact-page .impact-hero { padding: 56px 0 30px; text-align: center; }
.impact-page .impact-title { font-family: "Poppins", sans-serif; font-size: 28px; margin: 0 0 8px; color: #2C5530; }
.impact-page .impact-sub { color: #444; margin: 0 0 18px; font-size: 1.05rem; }
.impact-page .impact-ctas { margin-top: 8px; }
.impact-page .btn { display: inline-block; border-radius: 12px; padding: 10px 18px; font-weight: 600; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.impact-page .btn.primary { background: #FFD940; color: #000000; border: 2px solid #FFD940; box-shadow: 0 6px 18px rgba(44,85,48,0.08); }
.impact-page .btn.primary:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(44,85,48,0.12); }
.impact-page .btn.outline { background: transparent; color: #2C5530; border: 2px solid #FFD940; }
.impact-page .btn.outline:hover { background: #2C5530; color: #fff; transform: translateY(-3px); }

/* BLOCK GRID (two column pattern) */
.impact-page .block-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 28px; 
  align-items: center; 
  padding: 44px 0;
  max-width: 1100px;
  margin: 0 auto;
}

.impact-page .impact-block { 
  padding: 28px 0; 
}

/* Text and media columns base layout */
.impact-page .text-col,
.impact-page .media-col {
  width: 100%;
  margin: 0 auto;
}

.impact-page .text-col {
  padding: 0 20px; /* Base padding for all screen sizes */
}

/* Desktop layout */
@media (min-width: 992px) {
  .impact-page .block-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .impact-page .text-col {
    padding: 0 40px; /* Increased padding on desktop */
  }
}

/* text column */
.impact-page .text-col { max-width: 560px; }
.impact-page .text-col .lead { color: #333; margin-top: 6px; margin-bottom: 14px; }
.impact-page .kpi-list { margin: 0 0 14px 18px; color: #555; }
.impact-page .kpi-list li { margin-bottom: 6px; }

/* CTA centered under text per request */
.impact-page .cta-row { text-align: center; margin-top: 12px; }
.impact-page .cta-row .btn { margin: 6px 8px; }

/* MEDIA/COLLAGE base */
.impact-page .media-col { position: relative; width: 100%; min-height: 260px; display: block; }

/* baseline img-wrap */
.impact-page .img-wrap { position: absolute; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 20px rgba(11,18,32,0.08); transform-origin: center center; transition: transform .6s cubic-bezier(.2,.9,.2,1), opacity .6s ease; opacity: 0; }

/* images inside wrap */
.impact-page .img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* EDUCATION COLLAGE (triangular cluster) */
.impact-page .collage-edu .large { width: 62%; height: 320px; left: 8%; top: 10%; }
.impact-page .collage-edu .medium { width: 44%; height: 190px; left: 4%; bottom: 6%; }
.impact-page .collage-edu .small { width: 26%; height: 120px; right: 6%; top: 0; border-radius: 999px; }

/* WOMEN COLLAGE (stacked offset) */
.impact-page .collage-women .large { width: 70%; height: 340px; left: 18%; top: 6%; }
.impact-page .collage-women .small { width: 34%; height: 140px; left: 6%; top: -6%; }
.impact-page .collage-women .medium { width: 46%; height: 190px; left: 0; bottom: 6%; }

/* ELDERLY COLLAGE (gentle layer) */
.impact-page .collage-elderly .wide { width: 78%; height: 220px; left: 10%; top: 18%; border-radius: 10px; }
.impact-page .collage-elderly .small { width: 26%; height: 120px; right: 6%; top: 0; border-radius: 999px; }
.impact-page .collage-elderly .tiny { width: 20%; height: 90px; left: 6%; bottom: 6%; }

/* INCLUSION COLLAGE (geometric spread) */
.impact-page .collage-inclusion .square { width: 52%; height: 220px; left: 6%; top: 12%; }
.impact-page .collage-inclusion .angle { width: 38%; height: 160px; right: 6%; top: 0; transform: rotate(-6deg); }
.impact-page .collage-inclusion .badge { width: 22%; height: 90px; left: 38%; bottom: 6%; border-radius: 999px; }

/* Positioning tweaks (ensure media-col has height) */
.impact-page .collage .large,
.impact-page .collage .wide,
.impact-page .collage .square { position: absolute; }
.impact-page .collage .medium,
.impact-page .collage .small,
.impact-page .collage .tiny,
.impact-page .collage .badge { position: absolute; }

/* Impact summary */
.impact-page .impact-summary { padding: 36px 0 56px; text-align: center; }
.impact-page .summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
.impact-page .summary-item .stat { font-size: 28px; font-weight: 700; color: #2C5530; }
.impact-page .summary-item .label { color: #666; font-size: 0.95rem; margin-top: 6px; }

/* RESPONSIVE: maintain collage layout with adjusted sizes */
@media (max-width: 992px) {
  .impact-page .block-grid { grid-template-columns: 1fr; gap: 18px; }
  .impact-page .media-col { 
    min-height: 280px;
    margin: 40px auto;
    max-width: 500px; 
  }
  
  /* Maintain absolute positioning but adjust sizes */
  .impact-page .collage-edu .large { width: 62%; height: 280px; }
  .impact-page .collage-edu .medium { width: 44%; height: 160px; }
  .impact-page .collage-edu .small { width: 26%; height: 100px; }
  
  .impact-page .collage-women .large { width: 70%; height: 300px; }
  .impact-page .collage-women .small { width: 34%; height: 120px; }
  .impact-page .collage-women .medium { width: 46%; height: 160px; }
  
  .impact-page .collage-elderly .wide { width: 78%; height: 200px; }
  .impact-page .collage-elderly .small { width: 26%; height: 100px; }
  .impact-page .collage-elderly .tiny { width: 20%; height: 80px; }
  
  .impact-page .collage-inclusion .square { width: 52%; height: 200px; }
  .impact-page .collage-inclusion .angle { width: 38%; height: 140px; }
  .impact-page .collage-inclusion .badge { width: 22%; height: 80px; }

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

/* Additional mobile adjustments */
@media (max-width: 576px) {
  .impact-page .media-col {
    min-height: 240px;
    margin: 30px auto;
  }

  /* Further size adjustments for smaller screens while maintaining layout */
  .impact-page .collage-edu .large { width: 62%; height: 220px; }
  .impact-page .collage-edu .medium { width: 44%; height: 130px; }
  .impact-page .collage-edu .small { width: 26%; height: 80px; }
  
  .impact-page .collage-women .large { width: 70%; height: 240px; }
  .impact-page .collage-women .small { width: 34%; height: 100px; }
  .impact-page .collage-women .medium { width: 46%; height: 130px; }
  
  .impact-page .collage-elderly .wide { width: 78%; height: 160px; }
  .impact-page .collage-elderly .small { width: 26%; height: 80px; }
  .impact-page .collage-elderly .tiny { width: 20%; height: 60px; }
  
  .impact-page .collage-inclusion .square { width: 52%; height: 160px; }
  .impact-page .collage-inclusion .angle { width: 38%; height: 120px; }
  .impact-page .collage-inclusion .badge { width: 22%; height: 60px; }
}

/* small phones */
@media (max-width: 480px) {
  .impact-page .summary-grid { grid-template-columns: 1fr; }
  .impact-page .impact-title { font-size: 22px; }
  .impact-page .impact-sub { font-size: 0.98rem; }
}

/*Donate page*/
/* HERO SECTION */
.donate-hero-section {
  background: #fff;
  text-align: center;
  padding: 80px 20px 60px;
  position: relative;
}
.donate-hero-section::before {
  content: "";
  background: url('/images/hero-faded.jpg') center/cover no-repeat;
  opacity: 0.08;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}
.donate-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}
.donate-hero-content h1 {
  font-size: 2.2rem;
  color: #2C5530;
  margin-bottom: 16px;
}
.donate-hero-content p {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 30px;
}
.donate-hero-btn {
  font-size: 1rem;
  padding: 12px 28px;
}

/* IMPACT SECTION */
.donate-impact-section {
  background: #f8f8f8;
  padding: 60px 20px;
  text-align: center;
}
.donate-impact-section h2 {
  font-size: 1.8rem;
  color: #2C5530;
  margin-bottom: 40px;
}
.donate-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.donate-impact-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.donate-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.donate-impact-card h3 {
  color: #2C5530;
  margin-bottom: 8px;
}
.donate-impact-card p {
  font-size: 0.95rem;
  color: #555;
}
/* Base Layout */
.donate-page {
  font-family: Arial, sans-serif;
  color: #111;
  padding: 0;
  margin: 0;
  background: #fff;
}

/* Progress Stepper */
.donate-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 0 20px;
  flex-wrap: wrap;
}
.donate-progress .step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.donate-progress .num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donate-progress .step.active .num {
  background: #FFD940;
  color: #000;
}
.donate-progress .label {
  font-size: 0.8rem;
  margin-top: 6px;
  color: #555;
}
.donate-progress .line {
  flex: 0 0 50px;
  height: 2px;
  background: #ccc;
}

/* Card Container */
.donate-cards {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

/* Individual Card */
.donate-card {
  display: none;
  padding: 30px 20px;
  border-radius: 12px;
  background: #f9f9f9;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.donate-card.active {
  display: block;
}

/* Content */
.content-wrap {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Forms */
form label {
  display: block;
  margin: 12px 0;
  font-size: 0.95rem;
  text-align: left;
}
form input[type="radio"] {
  margin-right: 8px;
}
form input[type="number"],
form input[type="text"],
form input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* Frequency */
.frequency {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 0.9rem;
}

/* Payment Info */
.payment-info {
  text-align: left;
  font-size: 0.95rem;
  color: #333;
  margin-top: 20px;
}
.payment-info h3 {
  text-align: center;
  margin-bottom: 12px;
  color: #2C5530;
}
.info-box {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: #fff;
}
.note {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
}

/* Buttons */
.btn {
  background: #FFD940;
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.25s ease;
}
.btn:hover {
  background: #244725;
}
.btn-row {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Footer Section */
.donate-footer {
  padding: 40px 20px;
  background: #fff;
  text-align: center;
}
.donate-footer h3 {
  margin-bottom: 10px;
  color: #2C5530;
}
.donate-footer p {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .donate-progress .line { flex: 0 0 25px; }
  .donate-progress .label { font-size: 0.7rem; }
  .content-wrap { padding: 30px 16px; }
  form label { font-size: 0.9rem; }
}
/* Campaign Section */
/* campaigns-section.css — fully scoped */
.campaigns-section {
  background:#fff;
  font-family:"Open Sans",Arial,sans-serif;
  padding:60px 0;
  color:#111;
}
.campaigns-section .wrap {
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}
.section-title {
  font-family:"Poppins",sans-serif;
  font-size:1.9rem;
  text-align:center;
  margin-bottom:8px;
  color:#2C5530;
}
.section-sub {
  text-align:center;
  color:#555;
  margin-bottom:36px;
  font-size:1rem;
}
.campaign-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;
}
.campaign-card {
  border:1px solid #e3e3e3;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.campaign-card:hover {
  transform:translateY(-5px);
  box-shadow:0 12px 24px rgba(0,0,0,0.07);
}
.campaign-card img {
  width:100%;
  height:190px;
  object-fit:cover;
}
.card-body {
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex:1;
}
.card-body h3 {
  font-family:"Poppins",sans-serif;
  font-size:1.05rem;
  color:#2C5530;
  margin-bottom:8px;
}
.card-body p {
  font-size:0.92rem;
  color:#333;
  line-height:1.45;
  margin-bottom:8px;
}
.goal {
  display:block;
  font-weight:600;
  color:#555;
  margin-bottom:12px;
}
.btn.contact {
  display:inline-block;
  text-align:center;
  background:#FFD940;
  color:#000;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  transition:background .25s ease;
}
.btn.contact:hover { background:#234522; }

/* Responsive tweaks */
@media (max-width:768px){
  .campaign-card img{height:160px;}
  .section-title{font-size:1.6rem;}
}

/* ---------- Start Campaign Modal ---------- */
/* ---------- Start Campaign Modal ---------- */
.start-campaign-container {
  display:flex;
  justify-content:center;
  margin:40px 0;
}
.start-campaign-btn {
  background:#FFD940;
  color:#000;
  border:none;
  padding:12px 22px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:background .3s ease;
}
.start-campaign-btn:hover { background:#234522; }

.create-campaign-modal {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;
}
.create-campaign-modal.active { display:flex; }

.create-campaign-modal .modal-content {
  background:#fff;
  max-width:600px;
  width:100%;
  border-radius:10px;
  padding:30px;
  position:relative;
  display:flex;
  flex-direction:column;
  animation:slideIn .3s ease;
  max-height:90vh; /* ensures the modal fits smaller screens */
}
.modal-scroll {
  overflow-y:auto;
  padding-right:6px;
}
.modal-scroll::-webkit-scrollbar {
  width:6px;
}
.modal-scroll::-webkit-scrollbar-thumb {
  background:#ccc;
  border-radius:3px;
}
@keyframes slideIn {
  from { transform:translateY(-15px); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}
.close-modal {
  position:absolute;
  top:10px;
  right:14px;
  background:none;
  border:none;
  font-size:1.8rem;
  color:#555;
  cursor:pointer;
  transition:color .3s;
}
.close-modal:hover { color:#000; }

.modal-title {
  font-family:"Poppins",sans-serif;
  color:#2C5530;
  font-size:1.6rem;
  text-align:center;
  margin-bottom:8px;
}
.modal-desc {
  text-align:center;
  color:#555;
  font-size:0.95rem;
  margin-bottom:25px;
}

/* Form */
.campaign-form {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.campaign-form label {
  display:flex;
  flex-direction:column;
  font-weight:600;
  font-size:0.9rem;
  color:#333;
}
.campaign-form input,
.campaign-form textarea,
.campaign-form select {
  margin-top:6px;
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:0.9rem;
}
.submit-actions {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.btn.send-whatsapp,
.btn.send-email {
  background:#FFD940;
  color:#000;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:background .25s ease;
}
.btn.send-whatsapp:hover,
.btn.send-email:hover { background:#234522; }

/* Toast Message */
.toast-message {
  position:fixed;
  bottom:-60px;
  left:50%;
  transform:translateX(-50%);
  background:#FFD940;
  color:#000;
  padding:12px 20px;
  border-radius:8px;
  font-weight:600;
  opacity:0;
  transition:all .4s ease;
  z-index:10000;
}
.toast-message.show {
  bottom:30px;
  opacity:1;
}

@media (max-width:600px){
  .create-campaign-modal .modal-content{padding:20px;}
  .modal-title{font-size:1.4rem;}
}
/*About Page*/
/* ---------- About Section ---------- */
.about-modern {
  background:#fff;
  color:#111;
  overflow:hidden;
}

/* Hero Split */
.about-hero {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:40px;
  padding:80px 5%;
  background:linear-gradient(135deg,#fff 0%,#ffffff 100%);
}
.hero-text {
  flex:1 1 450px;
  max-width:550px;
  animation:fadeInUp 1s ease both;
}
.hero-text h1 {
  font-family:"Poppins",sans-serif;
  font-size:2.1rem;
  color:#2C5530;
  margin-bottom:16px;
}
.hero-text p {
  font-size:1rem;
  line-height:1.7;
  color:#333;
}
.hero-image {
  flex:1 1 380px;
  display:flex;
  justify-content:center;
  animation:fadeIn 1s ease both;
}
.hero-image img {
  width:100%;
  max-width:420px;
  border-radius:14px;
  object-fit:cover;
  box-shadow:0 8px 25px rgba(0,0,0,.1);
}

/* Mission & Vision */
.about-mv {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
  padding:70px 6%;
}
.mv-card {
  background:linear-gradient(135deg,#ffffff 0%,#f1f8f2 100%);
  border:1px solid #e0e0e0;
  border-radius:16px;
  padding:32px 24px;
  text-align:center;
  box-shadow:0 6px 15px rgba(0,0,0,.05);
  transition:transform .4s ease, box-shadow .4s ease;
}
.mv-card:hover {
  transform:translateY(-6px);
  box-shadow:0 15px 28px rgba(44,85,48,.12);
}
.mv-card .icon {
  font-size:2rem;
  margin-bottom:10px;
}
.mv-card h3 {
  color:#2C5530;
  font-family:"Poppins",sans-serif;
  margin-bottom:12px;
}
.mv-card p {
  color:#333;
  font-size:0.96rem;
  line-height:1.6;
}

/* Values & Approach Tiles */
/* === Values & Approach Section === */
.about-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  padding: 60px 6%;
  background: #f9faf9;
}

/* each tile = one card container */
.value-tile {
  perspective: 1000px;
  position: relative;
  z-index: 0;
  min-height: 230px; /* ensures card height even when flipped */
}

/* inner 3D layer that flips */
.tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

/* hover flip */
.value-tile:hover .tile-inner {
  transform: rotateY(180deg);
}

/* front & back faces */
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  padding: 32px 18px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* front face */
.front {
  background: #fff;
  border: 1px solid #e5e5e5;
}

.front span {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.front h4 {
  font-family: "Poppins", sans-serif;
  color: #2C5530;
  font-size: 1.1rem;
}

/* back face */
.back {
  background: #FFD940;
  color: #000;
  transform: rotateY(180deg);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* === Responsive Adjustments === */
@media (max-width: 1024px) {
  .about-values {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .about-values {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .value-tile {
    min-height: 200px;
  }

  .front h4 {
    font-size: 1rem;
  }

  .back {
    font-size: 0.9rem;
  }
}

/* Force single-column layout on very small screens */
@media (max-width: 480px) {
  .about-values {
    grid-template-columns: 1fr;
  }
}

/* FAQ */
.about-faq {
  padding:70px 6%;
  background:#fff;
  border-top:1px solid #fff;
  margin-top: 50px;
}
.about-faq h2 {
  text-align:center;
  color:#2C5530;
  font-family:"Poppins",sans-serif;
  margin-bottom:30px;
}
.faq-list {
  max-width:700px;
  margin:0 auto;
}
.about-faq details {
  background:#f9f9f9;
  border:1px solid #e0e0e0;
  border-radius:10px;
  margin-bottom:12px;
  padding:14px 20px;
  transition:all .3s ease;
}
.about-faq summary {
  font-weight:600;
  cursor:pointer;
  font-size:1rem;
  color:#2C5530;
  outline:none;
}
.about-faq details[open] {
  background:#f5c00046;
  border-color:#2C5530;
}
.about-faq p {
  margin-top:10px;
  color:#333;
  font-size:0.95rem;
  line-height:1.6;
}

/* Animations */
@keyframes fadeInUp {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}
@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}

/* Responsive */
@media (max-width:768px){
  .hero-text h1{font-size:1.6rem;}
  .about-hero{padding:50px 5%;}
}

/* ---------- Global Entrance Animations ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Base reusable classes */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}
.fade-up {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}
.slide-left {
  opacity: 0;
  animation: slideInLeft 1s ease forwards;
}
.slide-right {
  opacity: 0;
  animation: slideInRight 1s ease forwards;
}

/* Optional delay utilities for sequencing */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }

/* For non-scrolling fallback (initial visibility) */
[data-animate].visible {
  opacity: 1;
}

#scrollToTopBtn {
  max-width: 40px;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 100;
  background-color: #FFD940;
  color: #2C5530;
  border: none;
  padding: 10px 15px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  display: none;
  transition: opacity 0.3s ease;
}

#scrollToTopBtn:hover {
  background-color: #2C5530;
  color: #FFD940;
}

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

/* ===== DESKTOP/MOBILE TOGGLE ===== */
.desktop-header{display:block;}
.mobile-header{display:none;}

@media (max-width:768px){
.desktop-header{display:none !important;}
.mobile-header{display:block !important;}

  /* Header base */
  .mobile-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 15vh;
    max-height: 150px;
    background: linear-gradient(135deg,#0E3E32 0%,#128d6e 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 6px 0;
  }

  /* Row 1: logo */
  .mobile-topbar {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mobile-topbar {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
  }
  .mobile-logo-img { height: 45px; width: auto; }
  .mobile-logo-text { color: #fff; font-weight: 600; font-size: 1.2rem; }

  /* Row 2: white rounded pill */
    .mobile-pill-nav {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 36px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }



  /* social icons */
  .mobile-social-icons {
    display: flex;
    gap: 15px;
    padding: 2px 0;
  }
  .mobile-social-icons a {
    color: #FFD940;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
   
  }
  .mobile-social-icons a:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
  }
  .mobile-social-icons a svg {
    width: 22px; 
    height: 22px;
    color: inherit;
  }

  /* hamburger */
  .mobile-hamburger {
    width: 28px; height: 20px; position: relative; cursor: pointer;
  }
  .mobile-hamburger span {
    position: absolute; width: 100%; height: 3px; background: #222;
    border-radius: 2px; transition: all .3s ease;
  }
  .mobile-hamburger span:nth-child(1){ top:0; }
  .mobile-hamburger span:nth-child(2){ top:8px; }
  .mobile-hamburger span:nth-child(3){ top:16px; }
  .mobile-hamburger.active span:nth-child(1){ transform:rotate(45deg); top:8px; }
  .mobile-hamburger.active span:nth-child(2){ opacity:0; }
  .mobile-hamburger.active span:nth-child(3){ transform:rotate(-45deg); top:8px; }

  /* drawer */
  .mobile-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 60%;
    max-width: 400px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: -8px 0 20px rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(0.95) translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 24px;
    z-index: 1200;
  }

   .mobile-drawer.active {
    transform: scale(1) translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .drawer-menu a {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    letter-spacing: 0.3px;
  }

  .drawer-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  .drawer-socials svg {
    color: rgba(255, 255, 255, 0.95);
    transition: opacity 0.3s ease;
  }
  .drawer-socials svg:hover {
    opacity: 0.7;
  }

  .drawer-close {
    align-self: flex-end; background: none; border: none; color: #fff;
    font-size: 1.6rem; cursor: pointer;
  }
  .drawer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .drawer-menu a { color: #fff; text-decoration: none; font-size: 1rem; }

  .drawer-footer {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 10px; font-size: .85rem;
    display: flex; flex-direction: column; gap: 6px;
  }
  .drawer-socials { display: flex; gap: 8px; margin-top: 6px; }
  .drawer-socials svg { width: 18px; height: 18px; color: #fff; }

   .drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, backdrop-filter 0.35s ease;
    z-index: 1100;
  }

  .drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }


  .hero-section { padding-top: calc(15vh + 20px); }
}

.btd a{
  text-decoration: none; /* Removes underline */
  color: #fff; 
  background-color: #0E3E32;
  padding: 2px 3px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}


.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-40px);
  background: #333;
  color: #fff;
  padding: 14px 22px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 10000;
  pointer-events: none;
  font-size: 0.95rem;
  text-align: center;
  min-width: 280px;
  max-width: 90%;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.success {
  background: #28a745;
}

.toast.error {
  background: #dc3545;
}