/* Reset and basic styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #fdfdfd; }
a { color: #0077cc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
header { display: flex; align-items: center; padding: 10px 20px; background: #fff; border-bottom: 2px solid #eee; }
.logo { height: 60px; margin-right: auto; }
.nav a { margin: 0 10px; font-weight: bold; }

/* Hero slider */
.hero { position: relative; overflow: hidden; height: 300px; text-align: center; color: #fff; }
.hero-slider { display: flex; width: 400%; animation: slide 20s infinite; }
.hero-slider img { width: 25%; height: 300px; object-fit: cover; }
.hero h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.5); padding: 10px 20px; }

/* Slide animation */
@keyframes slide {
  0%,25% { transform: translateX(0); }
  30%,55% { transform: translateX(-100%); }
  60%,85% { transform: translateX(-200%); }
  90%,100% { transform: translateX(-300%); }
}

/* Content */
.content { padding: 20px; max-width: 800px; margin: auto; }
article { margin-bottom: 30px; }
article h2 { color: #cc0000; margin-bottom: 10px; }

/* Footer */
footer { background: #eee; padding: 20px; text-align: center; font-size: 0.9em; }
.contact { margin-bottom: 10px; }