/*biggest constributors*/
 body {
      font-family: 'Montserrat', Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: linear-gradient(120deg, #23f9dc 0%, #FF4E50 100%);
      min-height: 100vh;
    }
   nav {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: white;
      padding: 0;
      height: 70px;
      min-height: 70px;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    nav .navbar-container {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: end;
      height: 100%;
      align-items: center;
      flex: 1 1 auto;
    }

    nav ul li {
      position: relative;
      padding: 0 20px;
      text-align: center;
      height: 100%;
      display: flex;
      align-items:start;
      justify-content: center;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 10px 0;
      font-size: 1.08em;
      font-weight: 500;
      height: 100%;
    }

    nav ul li:hover, nav ul li a:hover {
      color: #00feea;
    }
    
    /* Donation Button Styles */
    .donate-btn {
      background: linear-gradient(90deg, #000000 0%, #0fefff 100%);
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 10px 25px;
      font-size: 1em;
      font-weight: bold;
      margin-left: 15px;
      margin-right: 40px;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(255, 87, 34, 0.15);
      transition: background 0.2s, transform 0.18s;
      letter-spacing: 1px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    }
    .donate-btn:hover {
      background: linear-gradient(90deg, #b0f218 0%, #000000 100%);
      transform: translateY(-2px) scale(1.05);
    }

    /* Dropdown Menu Styles */
    nav ul li:hover .dropdown {
      display: block;
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: rgb(0, 0, 0);
      min-width: 180px;
      padding: 20px 0;
      z-index: 10;
    }

    .dropdown a {
      display: block;
      padding: 8px 24px;
      color: #fff;
      font-size: 1em;
      text-align: left;
    }

    .dropdown a:hover {
      background-color: #ffffffda;
      color: #00548e;
    }
    .container {
      max-width: 1100px;
      margin: 50px auto;
      padding: 30px 20px;
      background: rgba(255,255,255,0.92);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(44,62,80,0.18);
      animation: fadeInDown 1.2s cubic-bezier(.36,.07,.19,.97) both;
    }
    @keyframes fadeInDown {
      0% { opacity: 0; transform: translateY(-40px);}
      100% { opacity: 1; transform: translateY(0);}
    }
    h1 {
      text-align: center;
      color: #000000;
      font-size: 2.7em;
      letter-spacing: 1px;
      margin-bottom: 10px;
      font-weight: 700;
      animation: pulseTitle 1.5s infinite alternate;
    }
    @keyframes pulseTitle {
      0% { text-shadow: 0 0 0px #FFD700; }
      100% { text-shadow: 0 0 15px #FFD700;}
    }
    .contributors-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      justify-content: center;
      margin-top: 30px;
    }
    .contributor-card {
      background: linear-gradient(135deg, #f7db90 0%, #0af7ff 100%);
      border-radius: 16px;
      box-shadow: 0 4px 16px #ed42645a;
      width: 240px;
      padding: 25px 20px 25px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: transform 0.25s, box-shadow 0.2s;
      cursor: pointer;
      animation: fadeInCard 1s both;
    }
    .contributor-card:hover {
      transform: translateY(-12px) scale(1.04) rotate(-1deg);
      box-shadow: 0 12px 36px #ed42647c;
      filter: brightness(1.1);
    }
    @keyframes fadeInCard {
      0% { opacity: 0; transform: scale(0.9);}
      100% { opacity: 1; transform: scale(1);}
    }
    .contributor-img {
      width: 105px;
      height: 105px;
      object-fit: cover;
      border-radius: 50%;
      border: 4px solid #FFD700;
      margin-bottom: 18px;
      box-shadow: 0 4px 20px #ffd70071;
      animation: popIn 1.1s cubic-bezier(.36,.07,.19,.97) both;
    }
    @keyframes popIn {
      0% { transform: scale(0.7);}
      80% { transform: scale(1.08);}
      100% { transform: scale(1);}
    }
    .contributor-name {
      font-size: 1.3em;
      color: #000000;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .contributor-role {
      color: #555;
      font-size: 1em;
      font-style: italic;
      margin-bottom: 12px;
    }
    .contributor-desc {
      color: #444;
      font-size: 0.98em;
      margin-bottom: 8px;
    }
    .contribution-badge {
      background: linear-gradient(90deg,#acfffe 45%,#FFEDBC 100%);
      color: #000000;
      font-size: 0.97em;
      font-weight: bold;
      padding: 6px 16px;
      border-radius: 30px;
      display: inline-block;
      margin-top: 6px;
      box-shadow: 0 1px 6px #ffd70057;
      letter-spacing: 1px;
      animation: badgeGlow 2.2s infinite alternate;
    }
    @keyframes badgeGlow {
      0% { box-shadow: 0 0 10px #FFD700;}
      100% { box-shadow: 0 0 20px #FFD700;}
    }
    @media (max-width: 900px){
      .contributors-grid {
        gap: 22px;
      }
      .contributor-card {
        width: 98vw;
        max-width: 340px;
      }
    }
    @media (max-width: 620px){
      .container {
        margin: 15px 4px;
        padding: 15px 2px 19px 2px;
      }
      .contributors-grid {
        flex-direction: column;
        gap: 13px;
        align-items: center;
      }
      h1 { font-size: 2em;}
    }
     /* Footer Styles */
    footer {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: #fff;
      text-align: center;
      padding: 38px 15px 18px 15px;
      margin-top: 48px;
      border-radius: 18px 18px 0 0;
      font-size: 1.09em;
      letter-spacing: 0.5px;
      box-shadow: 0 -4px 20px #33b5e522;
      animation: fadeInUp 1.3s 1.1s both;
      position: relative;
    }
    .footer-socials {
      margin-bottom: 12px;
    }
    .footer-socials a {
      display: inline-block;
      margin: 0 11px;
      opacity: 0.92;
    }
    .footer-socials img {
      width: 32px;
      height: 32px;
      transition: transform 0.2s, filter 0.2s;
      filter: drop-shadow(0 2px 7px #3ed1ff7c);
    }
    .footer-socials img:hover {
      transform: scale(1.18) rotate(-5deg);
      filter: drop-shadow(0 2px 16px #fff6);
    }
    /*our-impact
    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f9fafc;
      color: #222;
    }
 
    nav {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: white;
      padding: 0;
      height: 70px;
      min-height: 70px;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    nav .navbar-container {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: end;
      height: 100%;
      align-items: center;
      flex: 1 1 auto;
    }

    nav ul li {
      position: relative;
      padding: 0 20px;
      text-align: center;
      height: 100%;
      display: flex;
      align-items:start;
      justify-content: center;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 10px 0;
      font-size: 1.08em;
      font-weight: 500;
      height: 100%;
    }

    nav ul li:hover, nav ul li a:hover {
      color: #00feea;
    }
    
    /* Donation Button Styles */
    .donate-btn {
      background: linear-gradient(90deg, #000000 0%, #0fefff 100%);
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 10px 25px;
      font-size: 1em;
      font-weight: bold;
      margin-left: 15px;
      margin-right: 40px;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(255, 87, 34, 0.15);
      transition: background 0.2s, transform 0.18s;
      letter-spacing: 1px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    }
    .donate-btn:hover {
      background: linear-gradient(90deg, #b0f218 0%, #000000 100%);
      transform: translateY(-2px) scale(1.05);
    }

    /* Dropdown Menu Styles */
    nav ul li:hover .dropdown {
      display: block;
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: rgb(0, 0, 0);
      min-width: 180px;
      padding: 20px 0;
      z-index: 10;
    }

    .dropdown a {
      display: block;
      padding: 8px 24px;
      color: #fff;
      font-size: 1em;
      text-align: left;
    }

    .dropdown a:hover {
      background-color: #ffffffda;
      color: #00548e;
    }
    .impact-hero {
      background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
      padding: 60px 20px 40px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .impact-hero h1 {
      font-size: 2.8rem;
      margin-bottom: 12px;
      color: #1a237e;
      letter-spacing: 2px;
      animation: heroFadeIn 1.5s cubic-bezier(.4,2,.6,1);
    }
    .impact-hero p {
      font-size: 1.2rem;
      color: #444;
      max-width: 600px;
      margin: 0 auto;
      animation: heroFadeIn 2s 0.4s cubic-bezier(.4,2,.6,1) backwards;
    }
    /* Decorative Floating Circles */
    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(25, 118, 210, 0.08);
      z-index: 0;
      animation: float 8s infinite alternate ease-in-out;
    }
    .circle1 { width: 120px; height: 120px; top: 20px; left: 8%; animation-delay: 0.5s; }
    .circle2 { width: 80px; height: 80px; top: 110px; right: 10%; background: rgba(25, 118, 210, 0.12);}
    .circle3 { width: 60px; height: 60px; bottom: 10px; left: 16%; background: rgba(25, 118, 210, 0.15);}
    @keyframes float {
      0% { transform: translateY(0);}
      100% { transform: translateY(-30px);}
    }
    @keyframes heroFadeIn {
      from { opacity: 0; transform: translateY(40px);}
      to { opacity: 1; transform: translateY(0);}
    }
    .impact-stats {
      display: flex;
      justify-content: center;
      gap: 48px;
      margin: 32px 0 0 0;
      flex-wrap: wrap;
      z-index: 2;
      position: relative;
    }
    .stat-block {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 3px 16px rgba(25, 118, 210, 0.09);
      padding: 24px 32px;
      min-width: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: fadeInUp 1.2s;
    }
    .stat-block .stat-number {
      font-size: 2.2rem;
      color: #1976d2;
      font-weight: bold;
      margin-bottom: 6px;
      transition: color 0.3s;
    }
    .stat-block:hover .stat-number {
      color: #0d47a1;
      text-shadow: 0px 4px 16px #90caf9;
    }
    .stat-block .stat-label {
      font-size: 1.04rem;
      color: #434c6d;
      text-align: center;
    }
    .impact-gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px;
      margin: 40px 0 60px 0;
      position: relative;
      z-index: 2;
    }
    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 6px 24px rgba(25, 118, 210, 0.08);
      overflow: hidden;
      width: 340px;
      transition: transform 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.4s;
      animation: fadeInUp 1s ease;
      position: relative;
      cursor: pointer;
    }
    .impact-card:hover {
      transform: translateY(-10px) scale(1.04);
      box-shadow: 0 12px 32px rgba(25, 118, 210, 0.18);
    }
    .impact-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
      transition: filter 0.4s;
      filter: grayscale(12%) brightness(0.96);
    }
    .impact-card:hover img {
      filter: brightness(1.12) saturate(1.18) grayscale(0%);
    }
    .impact-card .caption {
      padding: 18px 20px 8px 20px;
      font-size: 1.15rem;
      color: #1976d2;
      font-weight: 600;
      text-align: center;
      min-height: 56px;
    }
    .impact-card .details {
      padding: 0 20px 16px 20px;
      font-size: 1rem;
      color: #444;
      text-align: center;
      opacity: 0.95;
      min-height: 45px;
      transition: color 0.3s;
    }
    .impact-card:hover .details {
      color: #1565c0;
    }
    /* Floating badge effect */
    .badge {
      position: absolute;
      top: 18px;
      left: 18px;
      background: linear-gradient(90deg,#1976d2,#90caf9);
      color: #fff;
      font-size: 0.92rem;
      font-weight: bold;
      padding: 5px 14px;
      border-radius: 12px;
      box-shadow: 0 2px 10px #1976d255;
      letter-spacing: 1px;
      opacity: 0.86;
      z-index: 3;
      pointer-events: none;
      animation: badgePop 0.9s;
    }
    @keyframes badgePop {
      0% { transform: scale(0.5); opacity: 0; }
      60% { transform: scale(1.1); opacity: 1; }
      100% { transform: scale(1); opacity: 0.86; }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 900px) {
      .impact-stats { flex-direction: column; align-items: center; gap: 32px; }
    }
    @media (max-width: 700px) {
      .impact-gallery { flex-direction: column; align-items: center; }
      .impact-card { width: 90%; }
      .impact-stats { flex-direction: column; gap: 20px; }
      .stat-block { width: 88vw; min-width: unset; }
    }
     /* Footer Styles */
    footer {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: #fff;
      text-align: center;
      padding: 38px 15px 18px 15px;
      margin-top: 48px;
      border-radius: 18px 18px 0 0;
      font-size: 1.09em;
      letter-spacing: 0.5px;
      box-shadow: 0 -4px 20px #33b5e522;
      animation: fadeInUp 1.3s 1.1s both;
      position: relative;
    }
    .footer-socials {
      margin-bottom: 12px;
    }
    .footer-socials a {
      display: inline-block;
      margin: 0 11px;
      opacity: 0.92;
    }
    .footer-socials img {
      width: 32px;
      height: 32px;
      transition: transform 0.2s, filter 0.2s;
      filter: drop-shadow(0 2px 7px #3ed1ff7c);
    }
    .footer-socials img:hover {
      transform: scale(1.18) rotate(-5deg);
      filter: drop-shadow(0 2px 16px #fff6);
    }
    /*contact*/
     body {
      margin: 0;
      padding: 0;
      font-family: 'Montserrat', Arial, sans-serif;
      background: linear-gradient(120deg, #74ebd5 0%, #ACB6E5 100%);
      min-height: 100vh;
    }
   
    nav {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: white;
      padding: 0;
      height: 70px;
      min-height: 70px;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    nav .navbar-container {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: end;
      height: 100%;
      align-items: center;
      flex: 1 1 auto;
    }

    nav ul li {
      position: relative;
      padding: 0 20px;
      text-align: center;
      height: 100%;
      display: flex;
      align-items:start;
      justify-content: center;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 10px 0;
      font-size: 1.08em;
      font-weight: 500;
      height: 100%;
    }

    nav ul li:hover, nav ul li a:hover {
      color: #00feea;
    }
    
    /* Donation Button Styles */
    .donate-btn {
      background: linear-gradient(90deg, #000000 0%, #0fefff 100%);
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 10px 25px;
      font-size: 1em;
      font-weight: bold;
      margin-left: 15px;
      margin-right: 40px;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(255, 87, 34, 0.15);
      transition: background 0.2s, transform 0.18s;
      letter-spacing: 1px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    }
    .donate-btn:hover {
      background: linear-gradient(90deg, #b0f218 0%, #000000 100%);
      transform: translateY(-2px) scale(1.05);
    }

    /* Dropdown Menu Styles */
    nav ul li:hover .dropdown {
      display: block;
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: rgb(0, 0, 0);
      min-width: 180px;
      padding: 20px 0;
      z-index: 10;
    }

    .dropdown a {
      display: block;
      padding: 8px 24px;
      color: #fff;
      font-size: 1em;
      text-align: left;
    }

    .dropdown a:hover {
      background-color: #ffffffda;
      color: #00548e;
    }
    .impact-hero {
      background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
      padding: 60px 20px 40px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .impact-hero h1 {
      font-size: 2.8rem;
      margin-bottom: 12px;
      color: #1a237e;
      letter-spacing: 2px;
      animation: heroFadeIn 1.5s cubic-bezier(.4,2,.6,1);
    }
    .impact-hero p {
      font-size: 1.2rem;
      color: #444;
      max-width: 600px;
      margin: 0 auto;
      animation: heroFadeIn 2s 0.4s cubic-bezier(.4,2,.6,1) backwards;
    }

    .contact-section {
      max-width: 1050px;
      margin: 60px auto 0 auto;
      background: rgba(255,255,255, 0.95);
      border-radius: 18px;
      box-shadow: 0 8px 32px rgba(44, 62, 80, 0.2);
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      animation: fadeInDown 1.1s cubic-bezier(.36,.07,.19,.97) both;
    }
    @keyframes fadeInDown {
      0% { opacity: 0; transform: translateY(-40px);}
      100% { opacity: 1; transform: translateY(0);}
    }
    .contact-image {
      flex: 1 1 380px;
      min-width: 320px;
      background: url('WhatsApp Imag.jpeg') center/cover no-repeat;
      height: 700px;;
    }
    .contact-form-container {
      flex: 2 1 420px;
      padding: 40px 36px 34px 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: rgba(255,255,255,0.97);
    }
    .contact-form-container h1 {
      margin: 0 0 15px 0;
      font-size: 2.3em;
      color: #252c6a;
      font-weight: 700;
      letter-spacing: 1px;
    }
    .contact-form-container p {
      font-size: 1.04em;
      color: #2d3d4c;
      margin-bottom: 28px;
      line-height: 1.5;
    }
    .contact-form label {
      font-size: 1.05em;
      color: #1e2d3b;
      margin-bottom: 8px;
      display: block;
      font-weight: 500;
    }
    .contact-form input, .contact-form textarea {
      width: 100%;
      padding: 12px 14px;
      margin-bottom: 18px;
      border: 1.5px solid #74ebd5;
      border-radius: 7px;
      background: #f9fbfd;
      font-size: 1em;
      transition: border-color 0.2s;
      resize: none;
    }
    .contact-form input:focus, .contact-form textarea:focus {
      outline: none;
      border-color: #252c6a;
      background: #fff;
    }
    .contact-form button {
      padding: 13px 34px;
      background: linear-gradient(90deg,#74ebd5 0%, #4bb4c7 100%);
      color: #fff;
      border: none;
      border-radius: 7px;
      font-size: 1.2em;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 8px #acd9e6a7;
      transition: background 0.2s, transform 0.15s;
    }
    .contact-form button:hover {
      background: linear-gradient(90deg, #4bb4c7 0%, #74ebd5 100%);
      transform: translateY(-2px) scale(1.03);
    }
    .contact-info {
      margin-top: 18px;
    }
    .contact-info .icon-row {
      display: flex;
      align-items: center;
      margin-bottom: 11px;
      gap: 9px;
    }
    .contact-info .icon-row img {
      width: 28px;
      height: 28px;
      filter: drop-shadow(1px 2px 2px #aac5eea7);
    }
    .contact-info .icon-row span {
      font-size: 1.04em;
      color: #1e2d3b;
    }
    @media (max-width: 860px) {
      .contact-section {
        flex-direction: column;
      }
      .contact-image {
        height: 220px;
        min-width: unset;
      }
    }
    @media (max-width: 600px) {
      .contact-section {
        margin: 30px 7px 0 7px;
      }
      .contact-form-container {
        padding: 24px 11px 20px 11px;
      }
      .navbar .logo { margin-left: 13px;}
      .navbar ul { margin-right: 8px; gap: 14px;}
    }
     /* Footer Styles */
    footer {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: #fff;
      text-align: center;
      padding: 38px 15px 18px 15px;
      margin-top: 48px;
      border-radius: 18px 18px 0 0;
      font-size: 1.09em;
      letter-spacing: 0.5px;
      box-shadow: 0 -4px 20px #33b5e522;
      animation: fadeInUp 1.3s 1.1s both;
      position: relative;
    }
    .footer-socials {
      margin-bottom: 12px;
    }
    .footer-socials a {
      display: inline-block;
      margin: 0 11px;
      opacity: 0.92;
    }
    .footer-socials img {
      width: 32px;
      height: 32px;
      transition: transform 0.2s, filter 0.2s;
      filter: drop-shadow(0 2px 7px #3ed1ff7c);
    }
    .footer-socials img:hover {
      transform: scale(1.18) rotate(-5deg);
      filter: drop-shadow(0 2px 16px #fff6);
    }
 /* Footer Styles */
    footer {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: #fff;
      text-align: center;
      padding: 38px 15px 18px 15px;
      margin-top: 48px;
      border-radius: 18px 18px 0 0;
      font-size: 1.09em;
      letter-spacing: 0.5px;
      box-shadow: 0 -4px 20px #33b5e522;
      animation: fadeInUp 1.3s 1.1s both;
      position: relative;
    }
    .footer-socials {
      margin-bottom: 12px;
    }
    .footer-socials a {
      display: inline-block;
      margin: 0 11px;
      opacity: 0.92;
    }
    .footer-socials img {
      width: 32px;
      height: 32px;
      transition: transform 0.2s, filter 0.2s;
      filter: drop-shadow(0 2px 7px #3ed1ff7c);
    }
    .footer-socials img:hover {
      transform: scale(1.18) rotate(-5deg);
      filter: drop-shadow(0 2px 16px #fff6);
    }
/*donate*/
body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: linear-gradient(120deg, #fff7e6 0%, #ffe0e0 100%);
    }
    
    nav {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: white;
      padding: 0;
      height: 70px;
      min-height: 70px;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    nav .navbar-container {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: end;
      height: 100%;
      align-items: center;
      flex: 1 1 auto;
    }

    nav ul li {
      position: relative;
      padding: 0 20px;
      text-align: center;
      height: 100%;
      display: flex;
      align-items:start;
      justify-content: center;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 10px 0;
      font-size: 1.08em;
      font-weight: 500;
      height: 100%;
    }

    nav ul li:hover, nav ul li a:hover {
      color: #00feea;
    }
    
    /* Donation Button Styles */
    .donate-btn {
      background: linear-gradient(90deg, #000000 0%, #0fefff 100%);
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 10px 25px;
      font-size: 1em;
      font-weight: bold;
      margin-left: 15px;
      margin-right: 40px;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(255, 87, 34, 0.15);
      transition: background 0.2s, transform 0.18s;
      letter-spacing: 1px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    }
    .donate-btn:hover {
      background: linear-gradient(90deg, #b0f218 0%, #000000 100%);
      transform: translateY(-2px) scale(1.05);
    }

    /* Dropdown Menu Styles */
    nav ul li:hover .dropdown {
      display: block;
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: rgb(0, 0, 0);
      min-width: 180px;
      padding: 20px 0;
      z-index: 10;
    }

    .dropdown a {
      display: block;
      padding: 8px 24px;
      color: #fff;
      font-size: 1em;
      text-align: left;
    }

    .dropdown a:hover {
      background-color: #ffffffda;
      color: #00548e;
    }


    .donate-header {
      background: linear-gradient(90deg, #97DBE6 0%, #006676 100%);
      color: #fff;
      text-align: center;
      padding: 48px 18px 24px 18px;
      font-size: 2.3em;
      font-weight: 800;
      letter-spacing: 2px;
      position: relative;
      overflow: hidden;
    }

    /* Animated Heart */
    .heart {
      position: absolute;
      right: 36px;
      top: 30px;
      width: 62px;
      height: 62px;
      animation: pulse 1.7s infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1);}
      50% { transform: scale(1.17);}
    }

    .donate-section {
      max-width: 520px;
      margin: 40px auto 0 auto;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 3px 16px rgba(255, 87, 34, 0.08);
      padding: 36px 18px 32px 18px;
      text-align: center;
      animation: fadeIn 1.3s;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(40px);}
      to { opacity: 1; transform: translateY(0);}
    }
    .donate-section h2 {
      color: #ff5252;
      font-size: 1.6em;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .donate-section p {
      color: #444;
      font-size: 1.09em;
      margin-bottom: 22px;
    }
    .donate-btn {
      background: linear-gradient(90deg, #47fffc 0%, #000000 100%);
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 12px 36px;
      font-size: 1.15em;
      font-weight: bold;
      margin-top: 8px;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(255, 87, 34, 0.15);
      transition: background 0.2s, transform 0.18s;
      letter-spacing: 1px;
    }
    .donate-btn:hover {
      background: linear-gradient(90deg, #cffb4a 0%, #40aff4 100%);
      transform: translateY(-2px) scale(1.05);
    }

    .payment-methods {
      display: flex;
      gap: 30px;
      justify-content: center;
      margin: 30px 0 10px 0;
      flex-wrap: wrap;
      animation: fadeIn 2s;
      animation-delay: .8s;
      animation-fill-mode: backwards;
    }
    .payment-method {
      background: #000000;
      border-radius: 12px;
      padding: 18px 14px;
      box-shadow: 0 2px 9px #ffc1c1a0;
      min-width: 120px;
      text-align: center;
      transition: transform 0.18s;
      cursor: pointer;
      animation: popIn .8s;
    }
    .payment-method:hover {
      transform: scale(1.07) translateY(-3px);
      box-shadow: 0 10px 26px #ff525238;
    }
    @keyframes popIn {
      from { opacity: 0; transform: scale(.7);}
      to { opacity: 1; transform: scale(1);}
    }
    .payment-method img {
      width: 38px;
      height: 38px;
      margin-bottom: 8px;
      filter: drop-shadow(0 3px 7px #e7a67290);
    }
    .payment-method span {
      display: block;
      color: #ff5252;
      font-weight: 600;
      font-size: 1em;
    }

    .thank-you-img {
      width: 300px;

      margin: 30px auto 0 auto;
      display: block;
      animation: bounce 1.2s infinite alternate;
    }
    @keyframes bounce {
      0% { transform: translateY(0);}
      100% { transform: translateY(-14px);}
    }

    /* Responsive */
    @media (max-width: 600px) {
      .donate-header { font-size: 1.4em; padding: 36px 6px 16px 6px;}
      .donate-section { padding: 18px 6px 18px 6px;}
      .payment-methods { gap: 15px;}
      .thank-you-img { width: 80px;}
    }
     /* Footer Styles */
    footer {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: #fff;
      text-align: center;
      padding: 38px 15px 18px 15px;
      margin-top: 48px;
      border-radius: 18px 18px 0 0;
      font-size: 1.09em;
      letter-spacing: 0.5px;
      box-shadow: 0 -4px 20px #33b5e522;
      animation: fadeInUp 1.3s 1.1s both;
      position: relative;
    }
    .footer-socials {
      margin-bottom: 12px;
    }
    .footer-socials a {
      display: inline-block;
      margin: 0 11px;
      opacity: 0.92;
    }
    .footer-socials img {
      width: 32px;
      height: 32px;
      transition: transform 0.2s, filter 0.2s;
      filter: drop-shadow(0 2px 7px #3ed1ff7c);
    }
    .footer-socials img:hover {
      transform: scale(1.18) rotate(-5deg);
      filter: drop-shadow(0 2px 16px #fff6);
    }
    /*event*/
     body {
      font-family: 'Segoe UI', Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f9fafc;
      color: #222;
    }
    
    nav {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: white;
      padding: 0;
      height: 70px;
      min-height: 70px;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    nav .navbar-container {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: end;
      height: 100%;
      align-items: center;
      flex: 1 1 auto;
    }

    nav ul li {
      position: relative;
      padding: 0 20px;
      text-align: center;
      height: 100%;
      display: flex;
      align-items:start;
      justify-content: center;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 10px 0;
      font-size: 1.08em;
      font-weight: 500;
      height: 100%;
    }

    nav ul li:hover, nav ul li a:hover {
      color: #00feea;
    }
    
    /* Donation Button Styles */
    .donate-btn {
      background: linear-gradient(90deg, #000000 0%, #0fefff 100%);
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 10px 25px;
      font-size: 1em;
      font-weight: bold;
      margin-left: 15px;
      margin-right: 40px;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(255, 87, 34, 0.15);
      transition: background 0.2s, transform 0.18s;
      letter-spacing: 1px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    }
    .donate-btn:hover {
      background: linear-gradient(90deg, #b0f218 0%, #000000 100%);
      transform: translateY(-2px) scale(1.05);
    }

    /* Dropdown Menu Styles */
    nav ul li:hover .dropdown {
      display: block;
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: rgb(0, 0, 0);
      min-width: 180px;
      padding: 20px 0;
      z-index: 10;
    }

    .dropdown a {
      display: block;
      padding: 8px 24px;
      color: #fff;
      font-size: 1em;
      text-align: left;
    }

    .dropdown a:hover {
      background-color: #ffffffda;
      color: #00548e;
    }
    .impact-hero {
      background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
      padding: 60px 20px 40px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .impact-hero h1 {
      font-size: 2.8rem;
      margin-bottom: 12px;
      color: #1a237e;
      letter-spacing: 2px;
      animation: heroFadeIn 1.5s cubic-bezier(.4,2,.6,1);
    }
    .impact-hero p {
      font-size: 1.2rem;
      color: #444;
      max-width: 600px;
      margin: 0 auto;
      animation: heroFadeIn 2s 0.4s cubic-bezier(.4,2,.6,1) backwards;
    }
    .events-hero {
      background: linear-gradient(120deg, #e0eafc 0%, #cff1f3 100%);
      padding: 60px 20px 40px 20px;
      text-align: center;
    }
    .events-hero h1 {
      font-size: 2.8rem;
      margin-bottom: 12px;
      color: #1a237e;
    }
    .events-hero p {
      font-size: 1.2rem;
      color: #444;
      max-width: 600px;
      margin: 0 auto;
    }
    .events-gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px;
      margin: 40px 0 60px 0;
    }
    .event-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 6px 24px rgba(25, 118, 210, 0.08);
      overflow: hidden;
      width: 340px;
      transition: transform 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.4s;
      animation: fadeInUp 1s ease;
      position: relative;
    }
    .event-card:hover {
      transform: translateY(-10px) scale(1.04);
      box-shadow: 0 12px 32px rgba(25, 118, 210, 0.18);
    }
    .event-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
      transition: filter 0.4s;
    }
    .event-card:hover img {
      filter: brightness(1.1) saturate(1.2);
    }
    .event-info {
      padding: 18px 20px 16px 20px;
      text-align: center;
    }
    .event-title {
      font-size: 1.2rem;
      color: #1976d2;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .event-date {
      font-size: 1rem;
      color: #555;
      margin-bottom: 8px;
    }
    .event-desc {
      font-size: 1rem;
      color: #333;
    }
    .event-card .event-anim {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #90caf9;
      animation: pulse 1.5s infinite;
      z-index: 2;
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 #90caf9aa; }
      70% { box-shadow: 0 0 0 12px #90caf900; }
      100% { box-shadow: 0 0 0 0 #90caf900; }
    }
    @media (max-width: 700px) {
      .events-gallery { flex-direction: column; align-items: center; }
      .event-card { width: 90%; }
    }
     /* Footer Styles */
    footer {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: #fff;
      text-align: center;
      padding: 38px 15px 18px 15px;
      margin-top: 48px;
      border-radius: 18px 18px 0 0;
      font-size: 1.09em;
      letter-spacing: 0.5px;
      box-shadow: 0 -4px 20px #33b5e522;
      animation: fadeInUp 1.3s 1.1s both;
      position: relative;
    }
    .footer-socials {
      margin-bottom: 12px;
    }
    .footer-socials a {
      display: inline-block;
      margin: 0 11px;
      opacity: 0.92;
    }
    .footer-socials img {
      width: 32px;
      height: 32px;
      transition: transform 0.2s, filter 0.2s;
      filter: drop-shadow(0 2px 7px #3ed1ff7c);
    }
    .footer-socials img:hover {
      transform: scale(1.18) rotate(-5deg);
      filter: drop-shadow(0 2px 16px #fff6);
    }
/*how to work*/
 body {
      font-family: Arial, sans-serif;
      margin: 0; padding: 0;
      background: linear-gradient(90deg, #e0eafc 0%, #cfdef3 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }
nav {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: white;
      padding: 0;
      height: 70px;
      min-height: 70px;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    nav .navbar-container {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: end;
      height: 100%;
      align-items: center;
      flex: 1 1 auto;
    }

    nav ul li {
      position: relative;
      padding: 0 20px;
      text-align: center;
      height: 100%;
      display: flex;
      align-items:start;
      justify-content: center;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 10px 0;
      font-size: 1.08em;
      font-weight: 500;
      height: 100%;
    }

    nav ul li:hover, nav ul li a:hover {
      color: #00feea;
    }
    
    /* Donation Button Styles */
    .donate-btn {
      background: linear-gradient(90deg, #000000 0%, #0fefff 100%);
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 10px 25px;
      font-size: 1em;
      font-weight: bold;
      margin-left: 15px;
      margin-right: 40px;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(255, 87, 34, 0.15);
      transition: background 0.2s, transform 0.18s;
      letter-spacing: 1px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    }
    .donate-btn:hover {
      background: linear-gradient(90deg, #b0f218 0%, #000000 100%);
      transform: translateY(-2px) scale(1.05);
    }

    /* Dropdown Menu Styles */
    nav ul li:hover .dropdown {
      display: block;
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: rgb(0, 0, 0);
      min-width: 180px;
      padding: 20px 0;
      z-index: 10;
    }

    .dropdown a {
      display: block;
      padding: 8px 24px;
      color: #fff;
      font-size: 1em;
      text-align: left;
    }

    .dropdown a:hover {
      background-color: #ffffffda;
      color: #00548e;
    }
    /* Page Title */
    .page-title {
      text-align: center;
      margin-top: 35px;
      font-size: 2.2em;
      color: #00548e;
      font-weight: 800;
      letter-spacing: 1px;
      opacity: 0;
      animation: fadeInDown 1.2s 0.2s forwards;
    }
    /* Animated Steps */
    .steps-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 28px;
      margin: 45px auto 30px auto;
      max-width: 1100px;
    }
    .step-box {
     background: linear-gradient(120deg,#56C7FF,#00FEBA 100%);
      border-radius: 16px;
      flex: 1 1 270px;
      min-width: 270px;
      max-width: 340px;
      padding: 32px 20px;
      box-shadow: 0 2px 12px #d8b4a0a6;
      text-align: center;
      transition: transform 0.18s;
      opacity: 0;
      transform: translateY(50px) scale(0.95);
      animation: fadeStepIn 0.9s forwards;
    }
    .step-box h3 {
      margin: 0 0 14px 0;
      color: #000000;
      font-size: 1.25em;
      font-weight: 700;
    }
    .step-box p {
      color: #333;
      font-size: 1em;
      margin: 0;
      line-height: 1.5;
    }
    .step-1 { animation-delay: 0.3s;}
    .step-2 { animation-delay: 0.55s;}
    .step-3 { animation-delay: 0.8s;}
    .step-4 { animation-delay: 1.05s;}
    .step-5 { animation-delay: 1.3s;}
    /* Impact Animation Section */
    .impact-anim-section {
      background: linear-gradient(90deg, #f5f7fa 0%, #c3cfe2 100%);
      margin: 28px auto 28px auto;
      padding: 30px 10px;
      max-width: 900px;
      border-radius: 13px;
      box-shadow: 0 3px 13px rgba(0,0,0,0.06);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .impact-title {
      font-size: 1.45em;
      color: #00548e;
      font-weight: 700;
      margin-bottom: 18px;
      opacity: 0;
      animation: fadeInLeft 1s 1.45s forwards;
    }
    .impact-counters {
      display: flex;
      justify-content: center;
      gap: 46px;
      margin-top: 12px;
    }
    .impact-counter {
      background: #fff;
      border-radius: 10px;
      padding: 24px 38px;
      box-shadow: 0 2px 9px #bbc7e340;
      min-width: 170px;
      margin-bottom: 10px;
      transition: box-shadow 0.18s, transform 0.18s;
      font-size: 1.4em;
      color: #2d5ea7;
      font-weight: bold;
      opacity: 0;
      transform: scale(0.9);
      animation: counterPop 0.7s forwards;
    }
    .count-1 { animation-delay: 1.7s;}
    .count-2 { animation-delay: 1.85s;}
    .count-3 { animation-delay: 2s;}
    .impact-label {
      display: block;
      font-size: 1em;
      color: #888;
      margin-top: 6px;
      font-weight: 400;
    }
    /* Animations */
    @keyframes fadeInDown {
      to { opacity: 1; transform: translateY(0);}
      from { opacity: 0; transform: translateY(-40px);}
    }
    @keyframes fadeStepIn {
      to { opacity: 1; transform: translateY(0) scale(1);}
      from { opacity: 0; transform: translateY(50px) scale(0.95);}
    }
    @keyframes fadeInLeft {
      to { opacity: 1; transform: translateX(0);}
      from { opacity: 0; transform: translateX(-40px);}
    }
    @keyframes counterPop {
      to { opacity: 1; transform: scale(1);}
      from { opacity: 0; transform: scale(0.9);}
    }
    /* Responsive */
    @media (max-width: 900px) {
      nav { height: 70px; min-height: 70px;}
      .steps-container { flex-direction: column; align-items: center;}
      .impact-counters { flex-direction: column; gap: 18px;}
      .impact-counter { min-width: 200px;}
    }
     /* Footer Styles */
    footer {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: #fff;
      text-align: center;
      padding: 38px 15px 18px 15px;
      margin-top: 48px;
      border-radius: 18px 18px 0 0;
      font-size: 1.09em;
      letter-spacing: 0.5px;
      box-shadow: 0 -4px 20px #33b5e522;
      animation: fadeInUp 1.3s 1.1s both;
      position: relative;
    }
    .footer-socials {
      margin-bottom: 12px;
    }
    .footer-socials a {
      display: inline-block;
      margin: 0 11px;
      opacity: 0.92;
    }
    .footer-socials img {
      width: 32px;
      height: 32px;
      transition: transform 0.2s, filter 0.2s;
      filter: drop-shadow(0 2px 7px #3ed1ff7c);
    }
    .footer-socials img:hover {
      transform: scale(1.18) rotate(-5deg);
      filter: drop-shadow(0 2px 16px #fff6);
    }

 /*index*/
   /* Header Styles */
    .head {
      color: white;
      text-align: start;
      font-size: 25px;
      font-weight: bold;
      margin-top: auto; 
      margin-left: 40px;
      line-height: 1;
      padding: 0;
      display: flex;
      align-items: center;
      height: 100%;
    }
    /*Nav Bar Styles*/
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    nav {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: white;
      padding: 0;
      height: 70px;
      min-height: 70px;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    nav .navbar-container {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: end;
      height: 100%;
      align-items: center;
      flex: 1 1 auto;
    }

    nav ul li {
      position: relative;
      padding: 0 20px;
      text-align: center;
      height: 100%;
      display: flex;
      align-items:start;
      justify-content: center;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 10px 0;
      font-size: 1.08em;
      font-weight: 500;
      height: 100%;
    }

    nav ul li:hover, nav ul li a:hover {
      color: #00feea;
    }
    
    /* Donation Button Styles */
    .donate-btn {
      background: linear-gradient(90deg, #000000 0%, #0fefff 100%);
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 10px 25px;
      font-size: 1em;
      font-weight: bold;
      margin-left: 15px;
      margin-right: 40px;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(255, 87, 34, 0.15);
      transition: background 0.2s, transform 0.18s;
      letter-spacing: 1px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    }
    .donate-btn:hover {
      background: linear-gradient(90deg, #b0f218 0%, #000000 100%);
      transform: translateY(-2px) scale(1.05);
    }

    /* Dropdown Menu Styles */
    nav ul li:hover .dropdown {
      display: block;
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: rgb(0, 0, 0);
      min-width: 180px;
      padding: 20px 0;
      z-index: 10;
    }

    .dropdown a {
      display: block;
      padding: 8px 24px;
      color: #fff;
      font-size: 1em;
      text-align: left;
    }

    .dropdown a:hover {
      background-color: #ffffffda;
      color: #00548e;
    }

    /* --- All other styles below unchanged --- */
    .welcome-section {
      background-image: url(watercolor.jpg);
      padding: 40px 20px 30px 20px;
      margin: 30px auto 10px auto;
      max-width: 100%;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 3px 15px rgba(0,0,0,0.06);
    }
    .welcome-section h1 {
      margin-top: 0;
      font-size: 2.3em;
      color: #00548e;
      font-weight: 800;
      letter-spacing: 1px;
    }
    .welcome-section p {
      font-size: 1.18em;
      color: #333;
      margin-bottom: 0;
      line-height: 1.6;
      max-width: 650px;
      margin-left: auto;
      margin-right: auto;
    }

    .info-section {
      max-width: 1100px;
      margin: 30px auto 20px auto;
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .info-box {
      background: linear-gradient(120deg,#56C7FF,#00FEBA 100%);
      border-radius: 16px;
      flex: 1 1 270px;
      min-width: 270px;
      max-width: 360px;
      padding: 28px 20px;
      box-shadow: 0 2px 12px #d8b4a0a6;
      margin: 8px 0;
      text-align: center;
      transition: transform 0.18s;
    }
    .info-box:hover {
      transform: translateY(-6px) scale(1.035);
      box-shadow: 0 8px 36px #00000080;
    }
    .info-box img {
      width: 54px;
      height: 54px;
      margin-bottom: 14px;
      filter: drop-shadow(0 3px 7px #e7a67290);
    }
    .info-box h3 {
      margin: 0 0 10px 0;
      color: #020202;
      font-size: 1.3em;
      font-weight: 700;
    }
    .info-box p {
      background-color:  linear-gradient(90deg, #000000 0%, #c3cfe2 100%);
      color: #333;
      font-size: 1em;
      margin: 0;
      line-height: 1.5;
    }

    /* Mission/Impact Section */
    .mission-impact-section {
      background: linear-gradient(90deg, #f5f7fa 0%, #c3cfe2 100%);
      margin: 40px auto 25px auto;
      padding: 32px 16px;
      max-width: 1020px;
      border-radius: 13px;
      box-shadow: 0 3px 13px rgba(0,0,0,0.06);
      text-align: center;
    }
    .mission-impact-section h2 {
      color: #00548e;
      font-size: 2em;
      font-weight: 700;
    }
    .mission-impact-list {
      display: flex;
      flex-wrap: wrap;
      gap: 36px;
      justify-content: center;
      margin: 30px 0 0 0;
    }
    .impact-item {
      background: #fff;
      border-radius: 10px;
      padding: 20px 32px;
      box-shadow: 0 2px 9px #bbc7e340;
      min-width: 210px;
      margin-bottom: 10px;
      transition: box-shadow 0.18s, transform 0.18s;
    }
    .impact-item:hover {
      box-shadow: 0 10px 26px #00548e38;
      transform: translateY(-3px) scale(1.02);
    }
    .impact-item strong {
      display: block;
      font-size: 1.08em;
      color: #2d5ea7;
      margin-bottom: 5px;
    }

    /* Image Slider Styles */
    .slider-container {
      width: 90%;
      max-width:100%;
      margin: 30px auto;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      position: relative;
    }
    .slider-images {
      display: flex;
      transition: transform 0.7s ease-in-out;
      width: 100%;
    }
    .slider-images img {
      width: 100%;
      flex-shrink: 0;
      object-fit: cover;
      height: 100%;
      display: block;
    }
    .slider-dots {
      text-align: center;
      margin-top: 8px;
    }
    .slider-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #bbb;
      border-radius: 50%;
      margin: 0 4px;
      cursor: pointer;
    }
    .slider-dot.active {
      background: #333;
    }
     /* Footer Styles */
    footer {
      background: linear-gradient(90deg, #333 0%, #00548e 100%);
      color: #fff;
      text-align: center;
      padding: 38px 15px 18px 15px;
      margin-top: 48px;
      border-radius: 18px 18px 0 0;
      font-size: 1.09em;
      letter-spacing: 0.5px;
      box-shadow: 0 -4px 20px #33b5e522;
      animation: fadeInUp 1.3s 1.1s both;
      position: relative;
    }
    .footer-socials {
      margin-bottom: 12px;
    }
    .footer-socials a {
      display: inline-block;
      margin: 0 11px;
      opacity: 0.92;
    }
    .footer-socials img {
      width: 32px;
      height: 32px;
      transition: transform 0.2s, filter 0.2s;
      filter: drop-shadow(0 2px 7px #3ed1ff7c);
    }
    .footer-socials img:hover {
      transform: scale(1.18) rotate(-5deg);
      filter: drop-shadow(0 2px 16px #fff6);
    }

    /* Responsive Styles */
    @media (max-width: 1000px) {
      .info-section {
        flex-direction: column;
        align-items: center;
      }
      .mission-impact-list {
        flex-direction: column;
        gap: 12px;
      }
    }
    @media (max-width: 600px) {
      .welcome-section { padding: 28px 6px 18px 6px; }
      .slider-container { margin: 18px 0; }
      .mission-impact-section { padding: 18px 5px;}
    }
    /* Donate Section Styles */
    .donate-section {
      background: linear-gradient(90deg, #fff7e6 0%, #ffe0e0 100%);
      margin: 40px auto 40px auto;
      padding: 32px 16px;
      max-width: 500px;
      border-radius: 15px;
      box-shadow: 0 3px 16px rgba(255, 87, 34, 0.08);
      text-align: center;
    }
    .donate-section h2 {
      color: #151313;
      font-size: 1.8em;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .donate-section p {
      color: #444;
      font-size: 1.09em;
      margin-bottom: 18px;
    }
    .donate-section .donate-btn {
      margin-left: 0;
      margin-right: 0;
      margin-top: 8px;
      padding: 12px 32px;
      font-size: 1.15em;
    }