/* Global Styles */
    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background: linear-gradient(135deg, #f4f6f9, #e6ffe6);
      overflow-x: hidden;
    }

    h1, h2, h3 {
      line-height: 1.3;
    }

    /* Header */
    header {
      background: linear-gradient(135deg, #4caf50, #81c784);
      color: #fff;
      padding: 60px 20px;
      text-align: center;
      box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }
    header h1 {
      margin: 0;
      font-size: 2.5rem;
      animation: fadeDown 1s ease-in-out;
    }
    header p {
      margin-top: 10px;
      font-size: 1.2rem;
      opacity: 0.9;
      animation: fadeUp 1.2s ease-in-out;
    }

    /* Navigation */
    nav {
      background: #66bb6a;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 15px;
      padding: 12px 10px;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    nav a {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      transition: all 0.3s ease;
      padding: 8px 14px;
      border-radius: 6px;
      font-size: 0.95rem;
    }
    nav a:hover {
      background: #fff;
      color: #388e3c;
      transform: scale(1.05);
    }
    nav .donate-btn {
      background: #ff9800;
      color: #fff;
      border-radius: 8px;
    }
    nav .donate-btn:hover {
      background: #e68900;
      color: #fff;
      transform: scale(1.1);
    }

    .lang-switch {
      margin-left: auto;
      display: flex;
      gap: 10px;
    }
    .lang-switch button {
      background: #fff;
      color: #388e3c;
      border: none;
      padding: 6px 12px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .lang-switch button:hover {
      background: #388e3c;
      color: #fff;
    }

    /* Container */
    .container {
      width: 92%;
      max-width: 1200px;
      margin: 30px auto;
    }

    /* Sections */
    section {
      margin-bottom: 50px;
      padding: 30px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    section:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    }

    h2 {
      color: #2e7d32;
      margin-bottom: 20px;
      font-size: 2rem;
    }

    ul {
      padding-left: 20px;
    }

    /* Team & Members */
    .team {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 25px;
    }
    .card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      padding: 20px;
      text-align: center;
      transition: all 0.4s ease;
    }
    .card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 12px 35px rgba(0,0,0,0.2);
    }

    .img-container {
      width: 130px;
      height: 130px;
      margin: 0 auto 15px;
      border-radius: 50%;
      overflow: hidden;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    }
    .img-container img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      transition: transform 0.3s ease;
    }
    .card:hover .img-container img {
      transform: scale(1.1);
    }

    .card h3 {
      margin: 10px 0 5px;
      font-size: 1.2rem;
      color: #2e7d32;
    }
    .card p {
      margin: 0;
      font-size: 0.9rem;
      color: #555;
    }

    /* Team card email styling */
.card .email {
  margin-top: 8px;
  font-size: 0.85rem;
  text-align: center;
  word-break: break-word;
}

.card .email a {
  color: #2e7d32;              /* match your green */
  text-decoration: none;
  white-space: nowrap;         /* prevents ugly line breaks */
  font-weight: 500;
}

.card .email a:hover {
  text-decoration: underline;
}

.card .email-icon {
  margin-right: 6px;
  font-size: 0.9rem;
}


    /* Donation */
    .donation {
      text-align: center;
      padding: 40px;
      background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
      border-radius: 16px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }
    .donation h2 {
      margin-bottom: 20px;
    }
    .donation p {
      margin-bottom: 25px;
      font-size: 1rem;
    }
    .donation a {
      display: inline-block;
      background: linear-gradient(135deg, #388e3c, #66bb6a);
      color: #fff;
      padding: 14px 30px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: bold;
      box-shadow: 0 6px 15px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    .donation a:hover {
      background: linear-gradient(135deg, #66bb6a, #388e3c);
      transform: scale(1.08);
    }

    /* Footer */
    footer {
      background: linear-gradient(135deg, #4caf50, #81c784);
      color: #fff;
      padding: 25px;
      text-align: center;
      margin-top: 50px;
      box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
    }
    footer a {
      color: #fff;
      text-decoration: underline;
    }

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

    /* Responsive */
    @media (max-width: 768px) {
      header h1 { font-size: 1.8rem; }
      header p { font-size: 1rem; }
      nav { gap: 10px; }
      nav a { font-size: 0.85rem; padding: 6px 10px; }
      section { padding: 20px; }
    }

    .lang-switch button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.lang-switch button:hover {
  background-color: #45a049;
}