:root {
      --primary: #003366;
      --secondary: #3399ff;
      --info: #17a2b8;
    }
    body {
      font-family: 'Segoe UI', sans-serif;
    }
    nav {
      background-color: var(--primary);
    }
    nav .nav-link {
      color: #fff !important;
      transition: transform 0.2s ease;
    }
    nav .nav-link:hover {
      transform: scale(1.1);
    }
    .hero {
      background: linear-gradient(to right, var(--primary), var(--secondary));
      color: white;
      height: 100vh;
      display: flex;
      align-items: center;
    }
    .kelas-card {
      transition: transform 0.3s ease;
    }
    .kelas-card:hover {
      transform: scale(1.05);
      z-index: 1;
    }
    footer {
      background-color: var(--primary);
      color: #fff;
    }
    .daftar-btn {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        color: white;
    }

    .daftar-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 0.75rem 1.5rem rgba(0, 123, 255, 0.4);
    }
    .daftar-kelas-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: white;
    }

    .daftar-kelas-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5rem 1rem rgba(23, 162, 184, 0.4);
    }
    .card-img-top {
    max-height: 300px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    }
    .carousel-item img.rounded-circle {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    }
    .btn-info:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5rem 1rem rgba(23, 162, 184, 0.4);
  }
  .btn-info:hover {
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(23, 162, 184, 0.4);
}