/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }
body { color:#333; background:#f9fafd; line-height:1.6; }

a { text-decoration:none; color:inherit; }

/* Header */
.site-header {
  background:#004b8d; color:#fff; display:flex;
  align-items:center; justify-content:space-between;
  padding:15px 30px; position:sticky; top:0; z-index:100;
}
.logo { font-size:1.8rem; font-weight:bold; }
.nav-links a { margin:0 15px; transition: color .3s; }
.nav-links a:hover { color:#ffd24c; }

.hamburger { display:none; font-size:1.5rem; cursor:pointer; }

/* Hero */
.hero {
  background: linear-gradient(135deg, #006699 0%, #003366 100%);
  color:#fff; text-align:center; padding:80px 20px;
  animation: fadeIn 1.5s ease-in-out;
}
.hero h1 { font-size:2.5rem; margin-bottom:15px; animation: slideDown .8s; }
.hero p { font-size:1.1rem; margin-bottom:30px; }
.btn-primary {
  background:#ffd24c; color:#004b8d; padding:15px 30px;
  font-size:1rem; border:none; border-radius:50px;
  cursor:pointer; transition: transform .3s;
}
.btn-primary:hover { transform: scale(1.05); }

/* Events carousel */
.events { padding:60px 20px; background:#fff; }
.events h2 { text-align:center; margin-bottom:30px; }
.events-carousel {
  display:flex; overflow-x:auto; gap:20px; padding:10px;
  scroll-snap-type:x mandatory;
}
.event-slide {
  flex:0 0 250px; background:#e6f2ff; padding:20px;
  border-radius:8px; font-weight:bold; scroll-snap-align:start;
  transition: transform .3s;
}
.event-slide:hover { transform: translateY(-5px); }

/* News */
.latest-news { padding:60px 20px; }
.latest-news h2 { text-align:center; margin-bottom:30px; }
.news-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:20px; }
.news-card {
  background:#fff; padding:25px; border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1); transition: box-shadow .3s;
}
.news-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.15); }

/* Donation section */
.donation-section { padding:60px 20px; background:#f0f8ff; text-align:center; }
.donate-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; justify-items:center; }
.donate-card {
  background:#fff; padding:35px; width:250px; border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1); transition: transform .3s;
}
.donate-card:hover { transform: translateY(-10px); }
.donate-card button, .donate-card select {
  margin-top:20px; padding:12px 25px;
  background:#004b8d; color:#fff; border:none; border-radius:6px;
  font-size:1rem; cursor:pointer; transition: background .3s;
}
.donate-card button:hover, .donate-card select:hover { background:#003366; }

/* Modal */
.modal {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.6); align-items:center; justify-content:center;
  animation: fadeIn 0.5s;
}
.modal-inner {
  background:#fff; padding:40px; width:90%; max-width:400px;
  border-radius:10px; position:relative; animation: slideUp .5s;
}
.close-icon {
  position:absolute; right:20px; top:15px; font-size:1.5rem;
  cursor:pointer;
}
.modal-inner h3 { margin-bottom:20px; font-size:1.4rem; }
.modal-inner label {
  display:block; margin-bottom:15px; font-size:1rem;
}
.modal-inner input[type=number], input[type=file], select {
  width:100%; padding:10px; margin-top:5px; border-radius:5px;
  border:1px solid #ccc;
}
.btn-submit {
  margin-top:20px; width:100%; padding:12px;
  background:#004b8d; color:#fff; border-radius:6px;
  border:none; font-size:1.1rem; cursor:pointer;
}
.btn-submit:hover { background:#003366; }

/* Footer */
.site-footer {
  text-align:center; padding:25px; background:#004b8d; color:#fff;
  margin-top:60px;
}

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

/* Responsive */
@media(max-width:768px) {
  .nav-links { display:none; flex-direction:column; background:#004b8d; position:absolute; top:60px; width:100%; text-align:center; }
  .hamburger { display:block; }
  .donate-grid { grid-template-columns:1fr; }
}