body { margin:0; font-family: Arial, sans-serif; }
header {
  display: flex; justify-content: space-between; align-items: center;
  background: #333; color: #fff; padding: 10px 20px;
}
.logo { font-size: 1.2em; }
nav .menu { list-style: none; display: flex; margin:0; padding:0; }
nav .menu li { margin: 0 10px; }
nav .menu li a { color: #fff; text-decoration: none; }
.menu-toggle { display: none; font-size: 1.5em; cursor: pointer; }
.hero {
  background: #0072CE; color: #fff; text-align: center;
  padding: 80px 20px;
}
.hero h1 { margin: 0; font-size: 2em; }
.hero p { font-size: 1.2em; }
.hero button {
  margin-top: 20px; padding: 10px 20px; font-size:1em;
  background: #fff; color: #0072CE; border: none;
  cursor: pointer; border-radius: 4px;
}
main section {
  padding: 40px 20px; border-bottom: 1px solid #eee;
}
main h2 { margin-bottom: 15px; }
.news ul { list-style: disc inside; padding-left: 20px; }
.course-list { display: flex; gap: 10px; }
.course {
  flex: 1; background: #f7f7f7; padding: 15px;
  text-align: center; border-radius: 4px;
}
footer {
  background: #222; color: #ccc;
  text-align: center; padding: 15px 20px;
}
@media (max-width: 768px) {
  nav .menu { display: none; flex-direction: column; }
  .menu-toggle { display: block; }
  nav.active .menu { display: flex; }
  .course-list { flex-direction: column; }
}