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

body {
  font-family: "Segoe UI", sans-serif;
  background: url("images/bg.jpg") no-repeat center center/cover;
  color: #fff;
}

/* Navbar */
header {
  background: rgba(0,0,0,0.8);
  padding: 15px 30px;
  position: sticky;
  top: 0;
}

.logo { color: #ffcc00; font-size: 1.6rem; display: inline-block; }

.nav-links { list-style: none; float: right; }
.nav-links li { display: inline-block; margin-left: 20px; }
.nav-links a {
  text-decoration: none; color: #fff; font-weight: bold; transition: 0.3s;
}
.nav-links a:hover, .nav-links .active { color: #ffcc00; }

/* Hero */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url("images/ngo-bg.jpg") no-repeat center center/cover;
  position: relative;
}
.hero-overlay { background: rgba(0,0,0,0.6); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hero-content { max-width: 600px; }

.hero h2 { font-size: 3rem; margin-bottom: 15px; }
.hero p { margin-bottom: 20px; font-size: 1.2rem; }
.donate-btn {
  background: #ff9800; padding: 12px 25px; border: none; color: #fff;
  border-radius: 8px; font-size: 1.1rem; text-decoration: none;
}
.donate-btn:hover { background: #e68900; }

/* Pages */
.page-section { padding: 100px 20px; text-align: center; background: rgba(0,0,0,0.6); margin: 30px; border-radius: 12px; }
.page-section h2 { color: #ffcc00; margin-bottom: 20px; }

/* Donate Options */
.donation-options {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 20px; margin-top: 20px;
}
.donation-option {
  background: #ff9800; border: none; padding: 20px; color: #fff;
  border-radius: 8px; font-size: 1rem; cursor: pointer;
  transition: 0.3s; text-align: center;
}
.donation-option i { display: block; font-size: 1.8rem; margin-bottom: 10px; }
.donation-option:hover { background: #e68900; transform: scale(1.05); }

/* Forms */
form input, form textarea {
  width: 100%; padding: 12px; margin: 10px 0; border-radius: 6px; border: none;
}
form button {
  background: #ffcc00; padding: 12px 20px; border: none; cursor: pointer;
  border-radius: 6px; font-weight: bold;
}
form button:hover { background: #e6b800; }

/* Footer */
footer { text-align: center; padding: 20px; background: rgba(0,0,0,0.9); margin-top: 20px; }