:root {
  --royal:#002366;
  --royal-dark:#001a4d;
  --gold:#ffd700;
  --gold-dark:#e6c200;
  --ink:#0f172a;
  --shadow:rgba(0,0,0,0.18);
}

/* Base */
body { margin:0; font-family:'Segoe UI',Arial,sans-serif; background:#f8f9fa; color:var(--ink); }
img { max-width:100%; display:block; }
a { text-decoration:none; }

/* Navbar */
nav {
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(90deg,var(--royal),var(--royal-dark));
  color:var(--gold); box-shadow:0 6px 16px var(--shadow);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
}
.logo img { height:70px; }
.menu { display:flex; list-style:none; }
.menu li { margin-left:20px; position:relative; }
.menu a { color:var(--gold); font-weight:600; padding:8px; border-radius:8px; transition:.25s; }
.menu a:hover { background:var(--gold); color:var(--royal); }
.submenu { display:none; position:absolute; top:100%; left:0; background:var(--royal); list-style:none; border-radius:8px; box-shadow:0 10px 20px var(--shadow); }
.submenu a { display:block; color:#fff; padding:10px; }
.submenu a:hover { background:var(--gold); color:var(--royal); }
.dropdown:hover .submenu { display:block; }
.hamburger { display:none; flex-direction:column; cursor:pointer; }
.hamburger span { height:3px; width:25px; background:var(--gold); margin-bottom:4px; border-radius:5px; }
@media(max-width:768px){
  .hamburger{display:flex}
  .menu{position:fixed;top:72px;right:-100%;flex-direction:column;width:75%;height:calc(100vh - 72px);background:var(--royal);padding-top:30px;transition:right .35s ease}
  .menu.active{right:0}
  .submenu{position:static;display:none;background:transparent;box-shadow:none}
  .dropdown.open .submenu{display:block}
}

/* Hero */
/* Hero */
.hero {
  position: relative; display: grid; place-items: center; text-align: center; color: #fff;
  min-height: 30vh; 
}
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.hero-glass {
  position: relative; z-index: 1; padding: 24px; border-radius: 18px;
  background: rgba(255,255,255,.1); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,215,0,.25);
}
.hero-title { font-size: clamp(30px, 6vw, 56px); color: var(--gold); margin-bottom: 6px; text-shadow: 0 8px 26px rgba(0,0,0,.45); }
.hero-sub { color: #e8ecff; font-size: clamp(16px, 2.4vw, 20px); }

/* Section */
.section { padding:64px 20px; max-width:900px; margin:0 auto; text-align:center; }
.section h2 { color:var(--royal); font-size:clamp(24px,3.8vw,36px); margin-bottom:20px; }
.section p { font-size:1.1em; color:#555; margin-bottom:40px; }

/* Donation options */
.donate-buttons { display:flex; flex-direction:column; gap:24px; align-items:center; }
.donate-option { text-align:center; }
.donate-logo { width:80px; height:80px; object-fit:contain; margin-bottom:8px; }
.btn {
  text-decoration:none; background:var(--gold); color:var(--royal);
  padding:15px 35px; border-radius:999px; font-size:1.1em; font-weight:700;
  transition:.3s; display:inline-block;
}
.btn:hover { background:var(--gold-dark); transform:scale(1.05); box-shadow:0 6px 15px var(--shadow); }

/* Footer */
footer { background:var(--royal-dark); color:var(--gold); text-align:center; padding:20px; margin-top:40px; }