
body { margin: 0; font-family: 'Segoe UI', sans-serif; background: #f7f7f7; color: #333; }
header { background: #003049; color: white; padding: 20px; text-align: center; }
nav { display: flex; justify-content: center; background: #264653; flex-wrap: wrap; }
nav a { color: white; padding: 14px 20px; text-decoration: none; font-weight: bold; }
nav a:hover { background: #2a9d8f; }
.lang-switch { position: absolute; top: 20px; right: 20px; }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; background: #e0e0e0; }
.hero img { max-width: 100%; height: auto; margin-top: 20px; }
.content { padding: 20px; max-width: 960px; margin: auto; background: white; border-radius: 8px; }
footer { background: #003049; color: white; text-align: center; padding: 15px; margin-top: 40px; }
@media (min-width: 768px) {
  .hero { flex-direction: row; justify-content: space-between; text-align: left; }
  .hero-text { flex: 1; padding-right: 20px; }
  .hero img { flex: 1; max-width: 400px; }
}
