body {
font-family: Arial, sans-serif;
margin: 0;
background: #f4f6f8;
}

header {
background: linear-gradient(45deg, #ff7043, #ff5722);
color: white;
padding: 20px;
text-align: center;
}

nav a {
margin: 0 10px;
color: white;
text-decoration: none;
font-weight: bold;
}

.hero {
text-align: center;
padding: 40px;
background: #ffe0b2;
}

section {
padding: 20px;
margin: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card-container {
display: flex;
gap: 15px;
flex-wrap: wrap;
}

.card {
flex: 1 1 200px;
background: #fafafa;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.2s;
}

.card:hover {
transform: scale(1.05);
}

.notice {
background: #fff3cd;
border-left: 5px solid #ffc107;
}

footer {
text-align: center;
padding: 15px;
background: #333;
color: white;
margin-top: 20px;
}