body {
  margin:0;
  font-family: Arial;
  background:#0d0d0d;
  color:white;
}

/* HEADER */
.header {
  display:flex;
  justify-content:space-between;
  padding:20px;
  background:#111;
}

.header a {
  color:white;
  margin-left:15px;
  text-decoration:none;
}

/* HERO */
.hero {
  text-align:center;
  padding:100px 20px;
}

/* BUTTON */
.btn {
  padding:10px 20px;
  background:#6c5ce7;
  border:none;
  color:white;
}

/* SECTION */
.section {
  padding:60px 20px;
  text-align:center;
}

/* CARDS */
.cards {
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.card {
  background:#1a1a1a;
  padding:20px;
  width:200px;
}

/* COURSES */
.course-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.course-card {
  background:#1a1a1a;
  padding:10px;
}

.thumb {
  height:150px;
  background:#333;
}

/* VIDEOS */
.video-grid {
  display:flex;
  justify-content:center;
  gap:20px;
}

.video-box {
  width:300px;
  height:180px;
  background:#222;
}

/* IMAGES */
.images {
  display:flex;
  justify-content:center;
  gap:20px;
}

.img-box {
  width:200px;
  height:150px;
  background:#222;
}

/* FOOTER */
.footer {
  text-align:center;
  padding:20px;
  background:#111;
}