body {
  margin: 0; font-family: 'Open Sans', sans-serif; background: #fff; color: #333;
}
header {
  background: #000; color: #fff; display: flex; justify-content: space-between; align-items: center;
  padding: 15px 30px; position: sticky; top: 0; z-index: 1000;
}
header .logo img { height: 50px; margin-right: 10px; vertical-align: middle; }
header .logo span { font-weight: bold; font-size: 20px; color: #f0c040; }
header nav ul { list-style: none; display: flex; margin: 0; padding: 0; }
header nav ul li { margin-left: 20px; }
header nav ul li a { color: #fff; text-decoration: none; font-weight: bold; transition: color .3s; }
header nav ul li a:hover { color: #f0c040; }
.hero {
  height: 80vh; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center;
}
.overlay { background: rgba(0,0,0,0.6); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hero-content { text-align: center; color: #fff; animation: fadeIn 2s ease; }
.hero-content h1 { font-size: 48px; font-family: 'Merriweather', serif; }
.hero-content .btn { background: #f0c040; padding: 10px 20px; color: #000; text-decoration: none; font-weight: bold; border-radius: 4px; }
.about { padding: 40px; text-align: center; }
footer { background: #000; color: #fff; text-align: center; padding: 15px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media(max-width: 768px) {
  header nav ul { flex-direction: column; }
  .hero-content h1 { font-size: 32px; }
}