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

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

/* Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Navigation Styles */
    nav {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
  padding: 0.8rem 0;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }

    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
  padding: 0 1rem;
    }

    .logo {
  font-size: 1.5rem;
      font-weight: 700;
      color: #667eea;
      text-decoration: none;
      font-family: 'Playfair Display', serif;
    }

    .nav-links {
      display: flex;
      list-style: none;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
    }

    .nav-links a {
      text-decoration: none;
      color: #4a5568;
      font-weight: 500;
      transition: color 0.3s;
      font-size: 0.95rem;
  padding: 0.5rem 0;
    }

.nav-links a:hover,
.nav-links a.active {
      color: #667eea;
    }

    .nav-links a.active::after {
      content: '';
      position: absolute;
  bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #667eea;
    }

    .mobile-menu {
      display: none;
      cursor: pointer;
      font-size: 1.5rem;
  padding: 0.3rem;
  color: #667eea;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  .nav-container {
    padding: 0 1rem;
  }

  .mobile-menu {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    padding: 0;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

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

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .nav-links a:hover,
  .nav-links a.active {
    background: rgba(102, 126, 234, 0.1);
  }

  .nav-links a.active::after {
    display: none;
  }
    }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 120px 0 80px;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,192L48,208C96,224,192,256,288,245.3C384,235,480,181,576,181.3C672,181,768,235,864,245.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom;
            background-size: cover;
        }

        .hero-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-content {
            text-align: left;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            animation: fadeInUp 1s ease-out;
        }

        .hero-subtitle {
            font-size: 1.4rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

        .hero-quote {
            font-size: 1.2rem;
            font-style: italic;
            margin: 0 0 3rem;
            opacity: 0.9;
            animation: fadeInUp 1s ease-out 0.6s both;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            animation: fadeInUp 1s ease-out 0.9s both;
        }

        .hero-image {
            position: relative;
            animation: fadeInRight 1s ease-out 0.3s both;
        }

        .hero-image img {
            width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        /* Buttons */
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: #ff6b6b;
            color: white;
            
        }

        .btn-primary:hover {
            background: #ff5252;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid white;
        }

        .btn-secondary:hover {
            background: white;
            color: #667eea;
            transform: translateY(-2px);
        }

        /* Impact Counter */
        .impact-counter {
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: 15px;
            margin-top: 3rem;
            backdrop-filter: blur(10px);
            grid-column: 1 / -1;
        }

        .counter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            text-align: center;
        }

        .counter-item h3 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            color: #ffd700;
        }

        .counter-item p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Main Content */
        .main-content {
            background: white;
            margin-top: -50px;
            border-radius: 20px 20px 0 0;
            position: relative;
            z-index: 1;
        }

        .section {
            padding: 4rem 0;
        }

        .section h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            color: #333;
            text-align: center;
        }

        .section-content {
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Project Cards */
        .project-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3rem;
        }

        .project-card {
            background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(102, 126, 234, 0.1);
        }

        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
        }

        .project-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            display: inline-block;
            padding: 1rem;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            color: white;
            width: 80px;
            height: 80px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }

        .project-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #333;
            font-weight: 600;
        }

        .project-card p {
            color: #666;
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .project-features {
            list-style: none;
            text-align: left;
            margin-bottom: 2rem;
        }

        .project-features li {
            padding: 0.5rem 0;
            color: #555;
            position: relative;
            padding-left: 1.5rem;
        }

        .project-features li:before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #667eea;
            font-weight: bold;
        }

        .project-stats {
            background: rgba(102, 126, 234, 0.1);
            padding: 1rem;
            border-radius: 10px;
            margin-top: 1rem;
        }

        .project-stats strong {
            color: #667eea;
            font-size: 1.2rem;
        }

/* Footer */
footer {
  background:#333;color:white;text-align:center;
  padding:3rem 0;margin-top:2rem;
}
.footer-content {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;margin-bottom:1rem;
}
.footer-section h3 { margin-bottom:1rem;color:#667eea; }
.footer-section p,
.footer-section a { color:#ccc;text-decoration:none; }
.footer-section a:hover { color:white; }
.social-links {
  display:flex;gap:1rem;justify-content:center;margin-top:1rem;
}
.social-links a {
  width:40px;height:40px;background:#667eea;color:white;
  text-align:center;line-height:40px;border-radius:50%;
  transition:background .3s;
}
.social-links a:hover { background:#ff6b6b; }


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

/* ─── Responsive ─── */
/* @media (max-width:992px) {
  .nav-links { display:none; }
  .mobile-menu { display:flex; }
} */
@media (max-width:800px) {
  .hero-container { grid-template-columns:1fr; }
  .hero-content h1,
  .hero-subtitle,
  .hero-quote,
  .btn-secondary {
    color: #000 !important;
    border-color: #000 !important;
  }
  .btn-secondary:hover {
    background:#000; color:#fff !important;
  }
  .hero-image { display:none; }
  .project-grid { grid-template-columns:repeat(2,1fr); }
  .counter-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .hero {
    background: url('../images/hero.jpeg') center center/cover no-repeat !important;
    min-height: 100vh;
    padding: 0 !important;
    display: flex;
    align-items: flex-start;
    position: relative;
  }
  .hero-container {
    display: block;
    padding-top: 10px;
    position: relative;
    z-index: 2;
  }
  .hero-content {
    padding: 1.5rem 1rem 0 1rem;
    text-align: left;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
  }
  .hero-content h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
  }
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 0.7rem;
    color: #fff;
  }
  .hero-quote {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
    color: #fff;
    font-style: italic;
  }
  .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 1.2rem;
  }
  .impact-counter {
    background: rgba(30,30,40,0.45);
    border-radius: 18px;
    margin: 0 0.5rem 0 0.5rem;
    padding: 1.5rem 0.5rem 1.2rem 0.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 0.5rem;
  }
  .counter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 0.5rem;
  }
  .counter-item h3 {
    font-size: 1.7rem;
    color: #ffd700;
    margin-bottom: 0.2rem;
  }
  .counter-item p {
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 0;
  }
  .main-content {
    background: #fff;
    border-radius: 24px 24px 0 0;
    margin-top: -18px;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.07);
    position: relative;
    z-index: 3;
    padding-bottom: 2rem;
  }
  .main-content .section {
    padding: 2.2rem 0 1.2rem 0;
  }
  .main-content h2 {
    font-size: 1.3rem;
    margin-bottom: 0.7rem;
    text-align: center;
  }
  .main-content p {
    font-size: 1rem;
    text-align: center;
  }
}

/* ─── Universal CTA button sizing ─────────────────────────── */
.cta-buttons .btn{

  flex:1 1 220px;         
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;               
  text-align:center;
}


@media (max-width:768px){
  .cta-buttons{
    flex-direction:column;
    align-items:center;
  }
  .cta-buttons .btn{
    flex:0 0 auto;      
    width:100%;
    max-width:300px;
  }
}




    /* ─── Animations ─── */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    /* Mobile Responsiveness */
    @media (max-width: 800px) {
      .container {
        padding: 0 20px;
      }

      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        padding: 1rem 0;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        gap: 1rem;
        text-align: center;
      }

      .nav-links.active {
        display: flex;
      }
      .mobile-menu {
        display: block;
      }

            .hero {
                padding: 20px 0 60px;
                background-image: url('images/hero.jpeg');
                background-size: cover;
                background-position: center;
                background-blend-mode: overlay;
            }

            .hero-container {
                grid-template-columns: 1fr;
                gap: 2rem;
                text-align: center;
            }

            .hero-content {
                text-align: center;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero-subtitle {
                font-size: 1.2rem;
            }

            .hero-image {
                display: none;
            }

            .cta-buttons {
                justify-content: center;
            }

            .project-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

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

            .section {
                padding: 2rem 0;
            }

            .section h2 {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 0 15px;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .hero-quote {
                font-size: 1rem;
            }

            .btn {
                padding: 12px 24px;
                font-size: 1rem;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .counter-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .counter-item h3 {
                font-size: 2rem;
            }
        }

/* Responsive footer columns for mobile */
.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-section {
  flex: 1 1 200px;
  min-width: 180px;
  margin-bottom: 1.5rem;
}
@media (max-width: 700px) {
  .footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
  .footer-section {
    min-width: 0;
    margin-bottom: 1.2rem;
  }
  .footer-section:first-child {
    grid-column: 1 / -1;
  }
}

/* Hero image background and overlay for mobile */
@media (max-width: 800px) {
  .hero {
    background: url('../images/hero.jpeg') center center/cover no-repeat !important;
    position: relative;
    color: #000 !important;
    padding: 70px 0 50px !important;
  }
  .hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
  }
  .hero-container, .hero-content, .hero-content h1, .hero-subtitle, .hero-quote, .btn-secondary {
    color: #fff !important;
    border-color: #fff !important;
    position: relative;
    z-index: 2;
  }
  .btn-secondary:hover {
    background:#fff; color:#667eea !important;
  }
  .hero-image { display:none; }
  .cta-buttons { justify-content: center; }
  .hero h1 { font-size: 2.1rem; }
  .hero-subtitle { font-size: 1.1rem; }
  .hero-quote { font-size: 1rem; }
}

@media (max-width: 820px) and (min-width: 750px) {
  .hero {
    padding-top: 130px !important;
    padding-bottom: 60px !important;
  }
}
@media (max-width: 710px) {
  .hero {
    padding-top: 120px !important;
  }
}

/* --- About Page Specific Styles --- */
.main-content {
  background: white;
  margin-top: 40px;
  border-radius: 20px 20px 0 0;
  position: relative;
  z-index: 1;
}
.section {
  padding: 5rem 0;
}
.section h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #1a202c;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  line-height: 1.2;
}
.section-subtitle {
  text-align: center;
  font-size: 1.2rem;
  color: #718096;
  margin-bottom: 4rem;
  font-weight: 300;
}
.section-content {
  max-width: 1200px;
  margin: 0 auto;
}
.about-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rem;
}
.profile-pic {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}
.profile-pic:hover {
  transform: scale(1.05);
}
.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 4rem;
}
.about-text {
  font-size: 1.125rem;
  line-height: 1.8;
  font-weight: 400;
}
.about-text p {
  margin-bottom: 1.8rem;
  color: #4a5568;
}
.about-text p:first-child::first-letter {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  float: left;
  margin: 0.1rem 0.5rem 0 0;
  color: #667eea;
  font-family: 'Playfair Display', serif;
}
.about-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.gallery-item {
  width: 100%;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.4s ease;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
  position: relative;
}
.gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
  border-color: #667eea;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover img {
  transform: scale(1.1);
}
.gallery-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover::after {
  opacity: 1;
}
.center-image {
  grid-column: 1 / -1;
  height: 280px;
  margin-top: 1.5rem;
  border-radius: 25px;
}
/* Timeline */
.timeline {
  margin-top: 5rem;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  transform: translateX(-50%);
  border-radius: 2px;
}
.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  padding: 2.5rem;
  background: #f8fafc;
  border-radius: 20px;
  border-left: 4px solid;
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
  transition: all 0.4s ease;
  position: relative;
  width: 45%;
  cursor: pointer;
}
.timeline-item:nth-child(odd) {
  margin-left: 0;
  margin-right: auto;
}
.timeline-item:nth-child(even) {
  margin-left: auto;
  margin-right: 0;
  background: #e6f3ff;
}
.timeline-item::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: #667eea;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid white;
  box-shadow: 0 0 0 4px #667eea;
}
.timeline-item:nth-child(odd)::before {
  right: -39px;
}
.timeline-item:nth-child(even)::before {
  left: -39px;
}
.timeline-year {
  font-weight: 600;
  color: #667eea;
  min-width: 110px;
  margin-right: 1.5rem;
  font-size: 1.1rem;
}
.timeline-content {
  flex-grow: 1;
}
.timeline-content strong {
  font-weight: 600;
  color: #1a202c;
  font-size: 1.1rem;
}
.timeline-icon {
  margin-right: 0.8rem;
  font-size: 1.3rem;
}
.timeline-details {
  display: none;
  margin-top: 1.2rem;
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  color: #4a5568;
  font-size: 0.95rem;
  line-height: 1.7;
  border: 1px solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
}

.timeline-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.25);
  background: #fff;
  z-index: 2;
}

.timeline-item:hover .timeline-details {
  display: block;
  animation: slideDown 0.4s ease-out;
}
/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}
.lightbox.active {
  display: flex;
}
.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 15px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  color: white;
  text-align: center;
  margin-top: 1rem;
  font-size: 1.2rem;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
}
.lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 2rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}
@media (max-width: 768px) {
  .section {
    padding: 3rem 0;
  }
  .section h2 {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
  }
  .section-subtitle {
    font-size: 1.1rem;
    margin-bottom: 3rem;
  }
  .profile-pic {
    width: 180px;
    height: 180px;
    margin-bottom: 1.5rem;
  }
  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: left;
  }
  .about-text {
    font-size: 1.1rem;
    order: 2;
  }
  .about-text p:first-child::first-letter {
    font-size: 3rem;
    margin: 0.05rem 0.4rem 0 0;
  }
  .about-images {
    order: 3;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-top: 1.5rem;
  }
  .gallery-item {
    height: 200px;
    border-radius: 15px;
  }
  .center-image {
    height: 220px;
    margin-top: 0;
  }
  .timeline::before {
    left: 20px;
  }
  .timeline-item {
    width: 100%;
    margin-left: 40px;
    margin-right: 0;
    padding: 2rem;
  }
  .timeline-item::before {
    left: -39px;
  }
  .timeline-year {
    min-width: 90px;
    font-size: 1rem;
    margin-right: 1rem;
  }
  .timeline-content strong {
    font-size: 1rem;
  }
}
@media (max-width: 480px) {
  .section {
    padding: 2.5rem 0;
  }
  .section h2 {
    font-size: 2rem;
  }
  .profile-pic {
    width: 180px;
    height: 180px;
    font-size: 1.2rem;
  }
  .about-text {
    font-size: 1rem;
  }
  .about-text p:first-child::first-letter {
    font-size: 2.5rem;
    margin: 0.05rem 0.3rem 0 0;
  }
  .timeline-item {
    padding: 1.5rem;
    margin-left: 30px;
  }
  .timeline-item::before {
    left: -29px;
    width: 18px;
    height: 18px;
  }
  .timeline::before {
    left: 15px;
  }
  .timeline-year {
    min-width: 80px;
    font-size: 0.9rem;
  }
  .lightbox-close {
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    padding: 10px;
  }
}

/* Responsive, always-on hover effect for timeline items */
.timeline-item:hover, .timeline-item:focus {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.25), 0 2px 8px rgba(0,0,0,0.07);
  background: #fff !important;
  z-index: 2;
}

@media (max-width: 800px) {
  .timeline-item:hover, .timeline-item:focus {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 8px 18px rgba(102, 126, 234, 0.18), 0 1px 4px rgba(0,0,0,0.05);
    background: #fff !important;
  }
}
@media (max-width: 480px) {
  .timeline-item:hover, .timeline-item:focus {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.13), 0 1px 2px rgba(0,0,0,0.03);
    background: #fff !important;
  }
}

/* Timeline hover and touch interactions */
@media (hover: hover) {
  .timeline-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.25);
    background: #fff;
    z-index: 2;
  }

  .timeline-item:hover .timeline-details {
    display: block;
    animation: slideDown 0.4s ease-out;
  }
}

/* For touch devices */
.timeline-item.expanded {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.25);
  background: #fff;
  z-index: 2;
}

.timeline-item.expanded .timeline-details {
  display: block;
  animation: slideDown 0.4s ease-out;
}

/* Base timeline styles */
.timeline-details {
  display: none;
  margin-top: 1.2rem;
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  color: #4a5568;
  font-size: 0.95rem;
  line-height: 1.7;
  border: 1px solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
}

/* Touch device content indicator */
@media (hover: none) {
  .timeline-item::after {
    content: '👆 tap for details';
    position: absolute;
    bottom: 12px;
    right: 15px;
    font-size: 0.85rem;
    color: #667eea;
    opacity: 0.7;
    font-style: italic;
  }

  .timeline-item.expanded::after {
    content: '👆 tap to close';
  }

  /* Add subtle pulsing animation to draw attention */
  @keyframes subtlePulse {
    0% { opacity: 0.7; }
    50% { opacity: 0.4; }
    100% { opacity: 0.7; }
  }

  .timeline-item::after {
    animation: subtlePulse 2s ease-in-out infinite;
  }
}

/* Adjust spacing for the indicator */
@media (hover: none) {
  .timeline-content {
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .main-content {
    margin-top: 40px;
  }
  
  .section {
    padding: 4rem 0 3rem;
  }

  .section h2 {
    font-size: 2.2rem;
    margin-bottom: 0.8rem;
    padding-top: 1rem;
  }

  .section-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 480px) {
  .main-content {
    margin-top: 40px;
  }

  .section {
    padding: 2rem 0 2.5rem;
  }

  .section h2 {
    font-size: 1.8rem;
    margin-bottom: 0.6rem;
    padding-top: 1.5rem;
  }

  .section-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
}

@media (max-width: 768px) {
  .profile-pic {
    width: 180px;
    height: 180px;
    margin-bottom: 1.5rem;
  }

  .about-hero {
    margin-bottom: 2rem;
  }

  .section-subtitle {
    margin-bottom: 2rem;
  }

  .about-content {
    gap: 1.5rem;
  }

  .about-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .about-text p {
    margin-bottom: 1.2rem;
  }
}

@media (max-width: 480px) {
  .profile-pic {
    width: 150px;
    height: 150px;
    margin-bottom: 1rem;
  }

  .about-hero {
    margin-bottom: 1.5rem;
  }

  .section-subtitle {
    margin-bottom: 1.5rem;
  }

  .about-content {
    gap: 1rem;
  }

  .about-text p {
    margin-bottom: 1rem;
  }
}

@media (max-width: 594px) {
  .hero {
    padding: 40px 0 40px;
    min-height: 90vh;
  }

  .hero-content {
    padding-top: 0;
  }

  .hero h1 {
    font-size: 2.2rem;
    margin-bottom: 0.7rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
  }

  .hero-quote {
    font-size: 1rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
  }

  .cta-buttons {
    gap: 0.8rem;
    margin-top: 1.5rem;
  }

  .btn {
    padding: 12px 24px;
    font-size: 1rem;
  }

  .impact-counter {
    margin-top: 2rem;
    padding: 1.5rem 1rem;
  }
}

@media (min-width: 800px) and (max-width: 900px) {
  .hero h1 {
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
    grid-column: 1 / -1;  
  }

  .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .hero-content {
    grid-column: 1 / 2;
    padding-top: 0;
  }

  .hero-image {
    grid-column: 2 / 3;
    display: block;
  }

  .impact-counter {
    grid-column: 1 / -1;
  }
}


/* Project Page Specific Styles */
.project-main-content {
  background: white;
  margin-top: 40px;
  border-radius: 20px 20px 0 0;
  position: relative;
  z-index: 1;
}

.project-hero-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.project-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.project-hero-content {
  position: relative;
  z-index: 2;
}

.project-hero-subtitle{
  opacity:0;
  transform:translateY(20px);
  /* Play once, 0.4 s after page load */
  animation:fadeInUp .8s ease-out .4s forwards;
}

/*  soften the numbers as they count up */
.project-hero-section .project-stat-number{
  transition:filter .4s;
}
.project-hero-section .project-stat-number.done{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

.project-hero-title {
  white-space:nowrap;

  font-size:clamp(1.25rem,7vw,3.5rem);
  line-height:1.15;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  justify-self: center;
  text-align:center;
}

.project-section-title{
  white-space:nowrap;             
  overflow-wrap:normal;
  font-size:clamp(0.95rem,3.5vw,2.5rem); 
  line-height:1.2;
  letter-spacing:-0.015em;           
}

.project-section-description{
  font-size:clamp(0.8rem,3.4vw,1.1rem);  
  line-height:1.55;
  max-width:92%;
  margin-inline:auto;
}



.project-hero-subtitle {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  margin-bottom: 2rem;
  opacity: 0.9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.project-impact-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.project-stat-item {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 120px;
}

.project-stat-number {
  font-size: 2rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}

.project-stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.project-section {
  padding: 5rem 0;
}

.project-section-header {
  text-align: center;
  margin-bottom: 4rem;
}


.project-section-title{
  white-space:nowrap;               
  overflow-wrap:normal;
  text-align:center;
  line-height:1.2;
  /* 15 px on a 360 px phone → 40 px on 1440 p+ */
  font-size:clamp(0.95rem,5.3vw,2.5rem);
  margin-bottom: 1rem;
}

.project-section-description{
  text-align:center;
  line-height:1.55;

  /* 13 px on phones → 18 px on large screens */
  font-size:clamp(0.8rem,4.5vw,1.125rem);
  color: rgb(107, 114, 128);
}


.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.project-card {
  background: #ffffff;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.project-card:hover::before {
  transform: scaleX(1);
}

.project-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.project-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #1f2937;
}

.project-card p {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
}

/* Impact Section Styles */
.impact-section {
  background: #f8fafc;
  padding: 4rem 0;
  border-radius: 20px;
  margin: 3rem 0;
}

.impact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.impact-text h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1f2937;
}

.impact-text p {
  font-size: 1.1rem;
  color: #6b7280;
  margin-bottom: 1.5rem;
}

.impact-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.metric-item {
  text-align: center;
  padding: 1.5rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.metric-number {
  font-size: 2rem;
  font-weight: 700;
  color: #3b82f6;
  display: block;
  margin-bottom: 0.5rem;
}

.metric-label {
  font-size: 0.9rem;
  color: #6b7280;
}

/* Success Stories Carousel */
.success-stories-section {
  padding: 5rem 0;
  background: #f8fafc;
}

.success-story {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2.5rem;
  border-radius: 15px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.story-slide {
  display: none;
  animation: fadeStory 0.4s ease-in-out;
}

.story-slide.active {
  display: block;
}

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

/* heading “Success Story” */
.success-story h4{
  color:#f1f1ec;          
  letter-spacing:.5px;
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:1rem;
}

.testimonial-text{
  color:#ffffff !important;          
  font-size:1.15rem;
  line-height:1.7;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
  margin-bottom:1.3rem;
}

/* author / role line */
.testimonial-author{
  color:#eef1f5;          
  font-size:1rem;
  font-weight:600;
  letter-spacing:.2px;
}


.story-nav:hover{
  background:rgba(255,255,255,.25);
}

/* ◇ Success‑story carousel controls */
.stories-carousel{position:relative}
.story-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  border:none;background:rgba(0,0,0,.35);color:#fff;font-size:1.8rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .3s;z-index:2;
}
.story-nav:hover{background:rgba(0,0,0,.55)}
.story-nav.prev{left:10px}
.story-nav.next{right:10px}
@media(max-width:600px){
  .story-nav{font-size:1.4rem;width:32px;height:32px}
}


/* CTA Section */
.cta-section {
  background: #1f2937;
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.cta-content h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.cta-content p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Responsive Styles for Project Page */
@media (max-width: 768px) {
  .project-impact-stats {
    gap: 1rem;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .impact-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .impact-metrics {
    grid-template-columns: 1fr;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .project-card {
    padding: 1.5rem;
  }

  .success-story {
    padding: 2rem;
  }

  .projct-stat-item {
    min-width: 100px;
    padding: 0.8rem;
  }
}

@media (max-width: 768px) {
  .project-section {
    padding: 1.5rem 0;
  }

  .project-section-header {
    margin-bottom: 1.5rem;
  }

  .project-grid {
    gap: 0.8rem;
  }

  .project-card {
    padding: 1.2rem;
  }

  .project-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .project-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .project-card p {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
  }

  .impact-section {
    padding: 1.5rem 0;
    margin: 0.8rem 0;
  }

  .impact-content {
    gap: 1.2rem;
  }

  .impact-text h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .impact-text p {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
  }

  .impact-metrics {
    margin-top: 1rem;
    gap: 0.8rem;
  }

  .metric-item {
    padding: 1rem;
  }
}
/* ===========================================================
   BLOG‑PAGE‑ONLY STYLES  
   =========================================================== */

/* ---------- Blog Hero ---------- */
.blog-hero{
  background:linear-gradient(135deg,var(--primary-color),var(--accent-color));
  color:#fff;
  padding:4rem 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.blog-hero::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);
  animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1) rotate(0deg);opacity:.3;}
  50%{transform:scale(1.1) rotate(180deg);opacity:.1;}
}
.blog-hero-content{max-width:800px;margin:0 auto;padding:0 1rem;position:relative;z-index:1;}
.blog-hero h1{font-size:3rem;font-weight:700;margin-bottom:1rem;text-shadow:0 2px 4px rgba(0,0,0,.1);}
.blog-hero p{font-size:1.3rem;opacity:.9;margin-bottom:2rem;}
.blog-hero-stats{display:flex;justify-content:center;gap:3rem;margin-top:2rem;}
.blog-stat{text-align:center;}
.blog-stat-number{font-size:2rem;font-weight:700;display:block;}
.blog-stat-label{font-size:.9rem;opacity:.8;}

/* ---------- Layout ---------- */
.blog-main-content{max-width:1200px;margin:0 auto;padding:4rem 1rem;}
.blog-grid{display:grid;grid-template-columns:2fr 1fr;gap:3rem;margin-bottom:3rem;}

/* ---------- Featured Post ---------- */
.blog-featured-post{
  background:var(--background);
  border-radius:var(--border-radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  transition:var(--transition);
}
.blog-featured-post:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
}
.blog-featured-image{width:100%;height:300px;object-fit:cover;transition:var(--transition);}
.blog-featured-post:hover .blog-featured-image{transform:scale(1.05);}
.blog-featured-content{padding:2rem;}

.blog-post-meta{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;font-size:.9rem;color:var(--text-secondary);}
.blog-post-tag{
  background:var(--primary-color);
  color:#fff;
  padding:.2rem .6rem;
  border-radius:20px;
  font-size:.8rem;
  font-weight:500;
}
.blog-post-title{font-size:1.8rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary);line-height:1.3;}
.blog-post-excerpt{color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.7;}
.blog-read-more{color:var(--primary-color);font-weight:600;display:inline-flex;align-items:center;gap:.5rem;transition:var(--transition);}
.blog-read-more:hover{color:var(--primary-hover);gap:.8rem;}

/* ---------- Blog Posts grid ---------- */
.blog-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem;}
.blog-post{
  background:var(--background);
  border-radius:var(--border-radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
  height:100%;
  display:flex;
  flex-direction:column;
}
.blog-post:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.blog-post-image{width:100%;height:200px;object-fit:cover;transition:var(--transition);}
.blog-post:hover .blog-post-image{transform:scale(1.05);}
.blog-post-content{padding:1.5rem;flex:1;display:flex;flex-direction:column;}
.blog-post-title{font-size:1.4rem;margin:1rem 0;color:var(--text-primary);line-height:1.3;}

/* ---------- Sidebar ---------- */
.blog-sidebar{display:flex;flex-direction:column;gap:2rem;}
.blog-sidebar-section{
  background:var(--surface);
  border-radius:var(--border-radius);
  padding:1.5rem;
  border:1px solid var(--border);
}
.blog-sidebar-section h3{margin-bottom:1rem;color:var(--text-primary);font-size:1.2rem;}

.blog-author-card{text-align:center;}
.blog-author-avatar{
  width:80px;height:80px;border-radius:50%;
  margin:0 auto 1rem;
  background:linear-gradient(135deg,var(--primary-color),var(--accent-color));
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:#fff;font-weight:700;
}
.blog-author-name{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;}
.blog-author-bio{color:var(--text-secondary);font-size:.9rem;margin-bottom:1rem;}

.blog-social-links{display:flex;justify-content:center;gap:1rem;}
.blog-social-links a{color:var(--text-secondary);font-size:1.2rem;transition:var(--transition);}
.blog-social-links a:hover{color:var(--primary-color);}

.blog-recent-posts,
.blog-recent-posts li,
.blog-recent-posts a{list-style:none;}
.blog-recent-posts li{padding:.8rem 0;border-bottom:1px solid var(--border);}
.blog-recent-posts li:last-child{border-bottom:none;}
.blog-recent-posts a{color:var(--text-primary);font-weight:500;transition:var(--transition);}
.blog-recent-posts a:hover{color:var(--primary-color);}
.blog-post-date{font-size:.8rem;color:var(--text-secondary);margin-top:.2rem;}

.blog-newsletter{
  /* Visual container */
  background:linear-gradient(135deg,var(--primary-color) 0%,var(--accent-color) 100%);
  color:#fff;
  padding:3rem 2rem;
  border-radius:20px;
  margin:4rem auto;     
  max-width:1120px;          
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.75rem;            
}

/* One‑line form that shrinks & stacks nicely */
.blog-newsletter-form{
  display:inline-flex;
  gap:1rem;
  flex-wrap:nowrap;  
}

/* Email field */
.blog-newsletter-input{
  flex:0 1 280px;      
  min-width:200px;
  padding:.8rem 1rem;
  border:none;
  border-radius:8px;
  outline:none;
}

/* Button */
.blog-newsletter-btn{
  flex:0 0 auto;
  padding:.8rem 1.8rem;
  border:none;
  border-radius:8px;
  background:#fff;
  color:var(--primary-color);
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
}
.blog-newsletter-btn:hover{background:var(--surface);}

/* ── Mobile: stack & full‑width inputs ──────────────────────── */
@media (max-width:600px){
  .blog-newsletter-form{
    flex-direction: column;
    width:100%;
    gap:.8rem;
  }

  /* Reset the flex shorthand that makes them 280 px tall */
  .blog-newsletter-input,
  .blog-newsletter-btn{
    flex:0 0 auto;             
    width:100%;
    height:44px;             
    line-height:44px;       
  }
  .blog-newsletter-btn{display:flex;align-items:center;justify-content:center;}
  .blog-newsletter-input{border-radius:8px;}
  .blog-newsletter-btn  {border-radius:8px;}
}



/* ---------- Full‑Post Modal ---------- */
.blog-modal{
  display:none;
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.8);
  z-index:1000;
  overflow-y:auto;
}
.blog-modal-content{
  background:#fff;
  margin:2rem auto;
  padding:3rem;
  max-width:800px;
  border-radius:12px;
  position:relative;
  box-shadow:var(--shadow-lg);
}
.blog-modal-close{
  position:absolute;top:1rem;right:1rem;
  width:40px;height:40px;
  background:none;border:none;
  font-size:1.5rem;
  cursor:pointer;
  color:var(--text-secondary);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
.blog-modal-close:hover{background:var(--surface);color:var(--text-primary);}
.blog-modal-image{width:100%;height:300px;object-fit:cover;border-radius:8px;margin-bottom:2rem;}
.blog-modal-body{font-size:1.1rem;line-height:1.8;max-width:700px;margin:0 auto;}
.blog-modal-body p{margin-bottom:1.5rem;}
.blog-modal-meta{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;color:var(--text-secondary);font-size:.9rem;}
.blog-modal-body h1{font-size:2.5rem;margin-bottom:1rem;line-height:1.2;}

/* ---------- Blog Responsiveness ---------- */
@media(max-width:768px){
  .blog-hero h1{font-size:2rem;}
  .blog-hero p{font-size:1.1rem;}
  .blog-hero-stats{flex-direction:column;gap:1rem;}
  .blog-grid{display:block;}
  .blog-newsletter-form,
  .blog-newsletter-input,
  .blog-newsletter-btn{width:100%;}
}
@media(max-width:480px){
  .blog-hero{padding:5rem 0;}
  .blog-main-content{padding:2rem .5rem;}
  .blog-newsletter{padding:2rem 1rem;}
  .blog-sidebar{padding:1rem .5rem;}
}


/* ===========================================================
   DONATIONS PAGE STYLES
   =========================================================== */
        .donation-hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 120px 0 80px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .donation-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,192L48,208C96,224,192,256,288,245.3C384,235,480,181,576,181.3C672,181,768,235,864,245.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom;
            background-size: cover;
        }

        .donation-hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            animation: fadeInUp 1s ease-out;
        }

        .donation-hero p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .donation-options {
            background: white;
            margin-top: -50px;
            border-radius: 20px 20px 0 0;
            position: relative;
            z-index: 1;
            padding: 4rem 0;
        }

        /* Update the donation tabs styles */
        .donation-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 3rem;
            border-bottom: 2px solid #f0f0f0;
            gap: 1rem;
        }

        .donation-tab {
            background: none;
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            color: #666;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            border-radius: 12px;
        }

        .donation-tab.active {
            color: #667eea;
            border-bottom-color: #667eea;
        }

        .donation-tab:hover {
            color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        .donation-content {
            display: none;
            animation: fadeInUp 0.5s ease-out;
        }

        .donation-content.active {
            display: block;
        }

        .donation-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            margin-top: 2rem;
        }

        .donation-form-container {
            background: #f8f9ff;
            padding: 2.5rem;
            border-radius: 15px;
            border: 1px solid rgba(102, 126, 234, 0.1);
        }

        .donation-info {
            background: white;
            padding: 2.5rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        .amount-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .amount-btn {
            background: white;
            border: 2px solid #e0e0e0;
            padding: 1rem;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .amount-btn:hover,
        .amount-btn.active {
            border-color: #667eea;
            background: #667eea;
            color: white;
        }

        .custom-amount {
            width: 100%;
            padding: 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1.1rem;
            margin-bottom: 1rem;
            transition: border-color 0.3s ease;
        }

        .custom-amount:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: #333;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .device-donation-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .device-card {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }

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

        .device-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: #667eea;
        }

        .device-requirements {
            text-align: left;
            margin-top: 1rem;
        }

        .device-requirements ul {
            list-style: none;
            padding: 0;
        }

        .device-requirements li {
            padding: 0.5rem 0;
            position: relative;
            padding-left: 1.5rem;
        }

        .device-requirements li:before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #667eea;
            font-weight: bold;
        }

        .impact-showcase {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4rem 0;
            text-align: center;
        }

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

        .impact-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }

        .impact-number {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #ffd700;
        }

        .security-badges {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .security-badge {
            background: #f0f8ff;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            color: #667eea;
            border: 1px solid rgba(102, 126, 234, 0.2);
        }

        .payment-methods {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .payment-method {
            background: white;
            padding: 1rem;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            font-weight: 600;
            color: #333;
        }

        .donation-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 1.2rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s ease;
            margin-top: 1rem;
        }

        .donation-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }

        .donation-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .testimonials {
            background: #f8f9ff;
            padding: 4rem 0;
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .testimonial {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        .testimonial-text {
            font-style: italic;
            margin-bottom: 1rem;
            color: #666;
        }

        .testimonial-author {
            font-weight: 600;
            color: #333;
        }

        .loading-spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid #ffffff;
            border-top: 2px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 0.5rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .success-message {
            background: #d4edda;
            color: #155724;
            padding: 1rem;
            border-radius: 10px;
            margin-top: 1rem;
            display: none;
        }

        .error-message {
            background: #f8d7da;
            color: #721c24;
            padding: 1rem;
            border-radius: 10px;
            margin-top: 1rem;
            display: none;
        }

        .donation-motivation-grid {
            display: flex;
            gap: 2rem;
            align-items: stretch;
            margin: 2rem 0;
            flex-wrap: wrap;
        }
        .donation-motivation, .donation-info-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(102,126,234,0.10);
            padding: 2rem;
            flex: 1 1 320px;
            min-width: 260px;
            max-width: 500px;
            margin: 0 auto;
        }
        .donation-motivation h2 {
            color: #667eea;
            margin-bottom: 1rem;
        }
        .donation-badge {
            margin-top: 1.5rem;
            background: #f8f9ff;
            color: #764ba2;
            border-radius: 8px;
            padding: 0.5rem 1rem;
            font-size: 0.98rem;
            display: inline-block;
        }
        .donation-info-card .donation-method {
            margin: 1.2rem 0;
            font-size: 1.1rem;
        }
        .donation-highlight {
            color: #667eea;
            font-weight: bold;
            margin-left: 0.5rem;
        }
        .copy-btn {
            margin-left: 1rem;
            padding: 0.3rem 0.8rem;
            border-radius: 6px;
            border: none;
            background: #667eea;
            color: #fff;
            cursor: pointer;
            font-size: 1rem;
        }
        @media (max-width: 800px) {
            .donation-motivation-grid {
                flex-direction: column;
                gap: 1.5rem;
            }
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .donation-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .donation-hero h1 {
                font-size: 2.5rem;
            }
            
            .amount-options {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Update mobile styles */
        @media (max-width: 768px) {
            .donation-tabs {
                flex-direction: row !important; 
                width: 100%;
                gap: 0.25rem;
                padding: 0 0.5rem;
            }

            .donation-tab {
                padding: 0.75rem 0.25rem !important;
                font-size: 0.9rem !important;
            }

            /* Remove the emoji on very small screens to save space */
            @media (max-width: 360px) {
                .donation-tab span.emoji {
                    display: none;
                }
            }
        }

        @media (max-width: 480px) {
            .donation-options {
                padding: 2rem 0;
            }
            
            .donation-form-container,
            .donation-info {
                padding: 1.5rem;
            }
            
            .impact-grid {
                grid-template-columns: 1fr;
            }
            
            .security-badges {
                flex-direction: column;
                align-items: center;
            }
        }

        /* Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .partnership-card {
            background: white;
            border-radius: 12px;
            padding: 2.5rem;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin: 2rem auto;
        }

        .partnership-card h3 {
            font-size: 1.8rem;
            color: #1a1a1a;
            margin-bottom: 1.5rem;
        }

        .partnership-card p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 2rem;
            font-size: 1.1rem;
        }

        .partnership-section {
            background: #f8fafc;
            padding: 4rem 2rem;
            text-align: center;
            margin: 3rem 0;
            border-radius: 12px;
        }

        .partnership-section h2 {
            font-size: 2.5rem;
            color: #1f2937;
            margin-bottom: 1.5rem;
        }

        .partnership-section p {
            color: #6b7280;
            font-size: 1.2rem;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto 2rem;
        }

        .partnership-section .btn {
            display: inline-block;
            background: #3b82f6;
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .partnership-section .btn:hover {
            background: #2563eb;
            transform: translateY(-2px);
        }

/* ===========================================================
   CONTACT PAGE STYLES
   =========================================================== */
    .contact-grid {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      width: 100%;
    }
    .contact-form, .contact-info {
      width: 100%;
      box-sizing: border-box;
      margin: 0 auto;
      padding: 1.5rem 0.7rem;
    }
    .contact-form {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 4px 24px rgba(102,126,234,0.08);
      max-width: 500px;
    }
    .contact-info {
      background: linear-gradient(135deg,#f8f9ff 60%,#e9e6fa 100%);
      border-radius: 18px;
      box-shadow: 0 4px 24px rgba(102,126,234,0.06);
      max-width: 500px;
    }
    .contact-form form {
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }
    .contact-info img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #fff;
      box-shadow: 0 6px 32px rgba(102,126,234,0.18), 0 1.5px 8px rgba(102,126,234,0.10);
      margin-bottom: 0.9rem;
      background: #e9e6fa;
    }
    @media (min-width: 700px) {
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        max-width: 900px;
        margin: 0 auto;
      }
      .contact-form, .contact-info {
        padding: 2.2rem 1.5rem;
      }
      .contact-info img {
        width: 140px;
        height: 140px;
      }
    }
    @media (max-width: 400px) {
      .contact-form, .contact-info {
        padding: 1rem 0.2rem;
      }
      .contact-info img {
        width: 90px;
        height: 90px;
      }
    }
    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1.1rem;
    }
    .contact-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
    }
    .contact-info h3, .contact-form h3 {
      margin-bottom: 1.2rem;
      color: #667eea;
      font-size: 1.2rem;
      text-align: center;
    }
    .contact-info > .profile-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 1.5rem;
    }
    .contact-info .profile-name {
      font-weight: 600;
      font-size: 1.15rem;
      color: #667eea;
    }
    .contact-info .profile-title {
      color: #4a5568;
      font-size: 0.98rem;
    }
    .donation-box {
      margin-top: 2rem;
      padding: 1.5rem;
      background: #f3f4fa;
      border-radius: 10px;
    }
    .donation-box h4 {
      color: #667eea;
      margin-bottom: 0.7rem;
    }
    .btn.btn-primary {
      width: 100%;
      font-size: 1.08rem;
      padding: 0.9rem 0;
    }
    /* Ensure section-content doesn't overflow on mobile */
    .section-content {
      width: 100%;
      box-sizing: border-box;
    }
    /* Responsive footer columns for mobile */
    .footer-content {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
    }
    .footer-section {
      flex: 1 1 200px;
      min-width: 180px;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 700px) {
      .footer-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
      }
      .footer-section {
        min-width: 0;
        margin-bottom: 1.2rem;
      }
      .footer-section:first-child {
        grid-column: 1 / -1;
      }
    }