* {box-sizing:border-box;}
body {margin:0;font-family:Arial, Helvetica, sans-serif;color:#333;line-height:1.6;background:#fff;scroll-behavior:smooth;}
header {display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.06);position:sticky;top:0;z-index:1000;}
.logo {font-size:22px;font-weight:bold;}
nav {display:flex;flex-wrap:wrap;}
nav a {margin:8px 10px;text-decoration:none;color:#333;font-weight:600;position:relative;}
nav a::after {content:'';display:block;height:2px;width:0;background:#009688;transition:0.3s;}
nav a:hover::after {width:100%;}

.hero {height:75vh;background:url('../img/hero.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:white;}
.hero h1 {font-size:38px;max-width:900px;background:rgba(0,0,0,0.45);padding:20px;border-radius:10px;animation:fadeInUp 1s ease forwards;}

.section {padding:60px 20px;max-width:1100px;margin:auto;animation:fadeIn 1.2s ease both;}
.section h2 {text-align:center;margin-bottom:30px;font-size:30px;}
.center {text-align:center;}

.cards {display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:30px;}
.card {flex:1 1 260px;border:1px solid #eee;padding:20px;border-radius:10px;text-align:center;transition:0.3s;background:white;}
.card:hover {transform:translateY(-6px);box-shadow:0 10px 25px rgba(0,0,0,0.08);}

.button {display:inline-block;margin-top:15px;padding:10px 18px;background:#009688;color:white;text-decoration:none;border-radius:5px;transition:0.3s;}
.button:hover {background:#00796b;transform:scale(1.05);}

img.responsive {width:100%;border-radius:10px;margin-top:20px;}

footer {text-align:center;padding:30px;background:#f5f5f5;margin-top:40px;font-size:14px;}

details {margin:10px 0;padding:10px;border:1px solid #ddd;border-radius:6px;background:#fafafa;}

/* Animations */
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}
@keyframes fadeInUp {from {opacity:0; transform:translateY(40px);} to {opacity:1; transform:translateY(0);}}

/* Mobile */
@media(max-width:768px){
  .hero h1 {font-size:26px;padding:15px;}
  nav {justify-content:center;}
  .cards {flex-direction:column;}
}