body {
      background: #f4f1fb;
      font-family: 'Segoe UI', sans-serif;
    }

    /* Hero Section */
    .hero {
      background: linear-gradient(135deg, #ff6ec7, #2e1a63, #6c4df6 );
      padding: 60px 0 100px;
      text-align: center;
    }

    .hero h1 {
      font-weight: 700;
      color: #fff;
      margin-bottom: 40px;
    }

    /* Filter Dropdowns */
    .filter-select {
      border-radius: 50px;
      padding: 10px 20px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
      border: none;
    }

    /* Cards */
    .program-card {
      border: none;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08);
      transition: 0.3s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .program-card:hover {
      transform: translateY(-5px);
    }

    .card-header-img {
      height: 160px;
      background-size: cover;
      background-position: center;
    }

    .bg-purple {
      background: linear-gradient(135deg, #2e1a63, #4b2fa8);
    }

    .bg-green {
      background: linear-gradient(135deg, #0f5132, #198754);
    }

    .program-card ul {
      padding-left: 18px;
    }

    /* Buttons */
    .btn-gradient {
      border-radius: 50px;
      padding: 8px 20px;
      font-weight: 500;
      border: none;
      color: #fff;
    }

    .btn-details {
      background: linear-gradient(45deg, #5f2eea, #a259ff);
    }

    .btn-enroll {
      background: linear-gradient(45deg, #ff0057, #ff4d4d);
    }
    /* Slider */
.carousel-item {
  height: 350px;
}

.slider-bg1 {
  height: 350px;
  background: linear-gradient(135deg, #4b2fa8, #ff6ec7);
}

.slider-bg2 {
  height: 350px;
  background: linear-gradient(135deg, #2e1a63 0%, #5f2eea 60%, #8f6bff 100%);
}

.slider-bg3 {
  height: 350px;
  background: linear-gradient(135deg, #2e1a63, #5f2eea);
}

.carousel-item h2 {
  font-size: 40px;
}

.carousel-item p {
  font-size: 18px;
  margin-bottom: 20px;
}
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.brand-text {
  color: #2e1a63;
  font-size: 20px;
}

.nav-link {
  color: #333 !important;
  transition: 0.3s;
}

.nav-link:hover {
  color: #5f2eea !important;
}

.btn-join {
  background: linear-gradient(45deg, #ff0057, #ff4d4d);
  color: #fff;
  font-weight: 500;
  border: none;
}

.btn-join:hover {
  opacity: 0.9;
  color: #fff;
}
/* Gradient Background */
.slider-bg {
    height: 450px;
    overflow: hidden;
}

/* Background subtle zoom */
.carousel-item.active .slider-bg {
    animation: zoomBg 8s ease-in-out infinite alternate;
}

@keyframes zoomBg {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

/* PNG Image */
.slider-image {
    position: absolute;
    right: 60px;
    bottom: 0;
    max-height: 450px;
    max-width: 45%;
    opacity: 0;
    transform: translateX(80px);
}

/* Animate PNG when active */
.carousel-item.active .slider-image {
    animation: slideInImage 1s ease forwards;
}

@keyframes slideInImage {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Text Animation */
.slider-content {
    opacity: 0;
    transform: translateY(30px);
}

.carousel-item.active .slider-content {
    animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Fix image container height */
.img-container {
    height: 250px;   /* adjust as you like */
    overflow: hidden;
}

/* Make image fit nicely */
.course-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback same height */
.fallback-header {
    height: 100%;
}

a{
    text-decoration: none !important;
    transition: 0.3s;
}