/* Mobile Responsive */
@media (max-width: 768px) {
  .course-container {
    grid-template-columns: 1fr; /* 1 column on mobile */
  }

  #courses h2 {
    font-size: 24px;
  }

  .course-card {
    padding: 20px;
  }
}

.animation-banner {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #87ceeb 0%, #87ceeb 60%, #555 60%, #555 100%);
}

@keyframes cloudMove {
  from { left: -200px; }
  to { left: 100%; }
}


@keyframes drive {
  from { left: -150px; }
  to { left: 110%; }
}