.header {
background-color: #2c3e50;
color: white;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.logo a {
text-decoration: none;
color: white;
}
.logo h1 {
margin: 0;
font-size: 1.8rem;
font-weight: 700;
}
.main-nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.main-nav li {
margin-left: 1.5rem;
}
.main-nav a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 0.5rem;
transition: color 0.3s ease;
}
.main-nav a:hover {
color: #3498db;
}
@media (max-width: 768px) {
.header .container {
flex-direction: column;
padding: 1rem;
}
.logo {
margin-bottom: 1rem;
}
.main-nav ul {
flex-wrap: wrap;
justify-content: center;
}
.main-nav li {
margin: 0.5rem;
}
}