* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: "Segoe UI", Arial; line-height:1.6; scroll-behavior:smooth; transition: background 0.3s, color 0.3s; }
body.light { background:#f4f6f9; color:#333; }
body.dark { background:#121212; color:#f0f0f0; }

.hero { position:relative; height:90vh; background:url("https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1950&q=80") center/cover no-repeat; display:flex; align-items:center; justify-content:center; text-align:center; color:white; }
.overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.55); }
.hero-content { position:relative; z-index:1; max-width:800px; padding:2rem; }
.hero h1 { font-size:3rem; margin-bottom:1rem; }
.hero h1 span { color:#00b4d8; }
.hero p { font-size:1.2rem; margin-bottom:1rem; }
.btn { background:#00b4d8; color:white; padding:0.8rem 1.6rem; border-radius:6px; text-decoration:none; margin:0.2rem; cursor:pointer; transition:0.3s; }
.btn:hover { background:#0077b6; }
.btn-outline { background:transparent; border:2px solid #00b4d8; color:#00b4d8; }
.btn-outline:hover { background:#00b4d8; color:white; }

.navbar { background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.1); position:sticky; top:0; z-index:10; }
body.dark .navbar { background:#1e1e1e; }
.navbar ul { display:flex; justify-content:center; gap:2rem; padding:1rem; list-style:none; }
.navbar a { text-decoration:none; color:#333; font-weight:500; }
body.dark .navbar a { color:#f0f0f0; }
.navbar a:hover { color:#0077b6; }

.card { background:white; max-width:900px; margin:2rem auto; padding:2rem; border-radius:10px; box-shadow:0 3px 8px rgba(0,0,0,0.1); opacity:0; transform:translateY(20px); animation:fadeIn 1s ease forwards; }
body.dark .card { background:#1e1e1e; box-shadow:0 3px 8px rgba(0,0,0,0.5); }
h2 { color:#0077b6; margin-bottom:1rem; border-bottom:2px solid #caf0f8; display:inline-block; }
body.dark h2 { color:#00b4d8; border-color:#00b4d8; }

.badges span { display:inline-block; background:#e0f7fa; color:#0077b6; padding:0.5rem 1rem; border-radius:5px; margin:0.3rem; font-size:0.9rem; transition:0.3s; }
body.dark .badges span { background:#0077b6; color:white; }
.badges span:hover { transform:scale(1.05); }

.gallery { display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap; }
.gallery img { width:30%; border-radius:8px; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.gallery img:hover { transform:scale(1.05); box-shadow:0 5px 15px rgba(0,0,0,0.3); }

@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

footer { text-align:center; padding:2rem 0; color:#555; background:#fff; border-top:1px solid #eee; }
body.dark footer { background:#1e1e1e; color:#aaa; border-color:#333; }