* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background: #f5faff; color: #333; }
header {
  background: #009fe3; color: white; padding: 15px 8%;
  display: flex; justify-content: space-between; align-items: center;
}
header h1 { font-size: 1.6em; font-weight: 700; }
header nav a {
  color: white; text-decoration: none; margin: 0 10px; font-weight: 500; transition: 0.3s;
}
header nav a:hover { text-decoration: underline; }
.hero {
  background: linear-gradient(to right, #009fe3, #68c9ff);
  color: white; text-align: center; padding: 60px 20px;
}
.hero h2 { font-size: 2em; margin-bottom: 10px; }
.hero p { font-size: 1.1em; margin-bottom: 20px; }
.hero button {
  background: white; color: #009fe3; border: none;
  padding: 10px 25px; border-radius: 5px; cursor: pointer; font-weight: 600;
}
.content { padding: 50px 8%; }
.course-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
}
.course {
  background: white; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center; padding: 25px 15px; transition: 0.3s;
}
.course:hover { transform: translateY(-5px); }
.course h4 { color: #009fe3; margin-bottom: 10px; }
footer {
  background: #009fe3; color: white; text-align: center; padding: 15px; margin-top: 50px;
}
form { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 500px; margin: 0 auto; }
form input, form textarea {
  width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px;
}
form button {
  background: #009fe3; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;
}
form button:hover { background: #007ab5; }