/* General Reset */
body {
   font-family: 'Lato', sans-serif;
  background-color: #f8f9fa;
  color: #212529;
  padding-top: 72px;
}

/* Navbar */
.navbar-brand {
  font-size: 1.5rem;
  color: #0d6efd;
}

.nav-link {
  font-weight: 500;
  color: #212529 !important;
}

.nav-link.active,
.nav-link:hover {
  color: #0d6efd !important;
}

.btn-primary {
  background-color: #00a650;
  border-color: #00a650;
}

.btn-primary:hover {
  background-color: #e65c00;
  border-color: #e65c00;
}

/* Hero Section */
section.text-center {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  padding: 5rem 0;
}

section.text-center h1 {
  color: #0d6efd;
}

section.text-center p {
  font-size: 1.125rem;
}

/* Footer */
footer h5,
footer h6 {
  color: #ffffff;
}

footer a:hover {
  text-decoration: underline;
}

footer .bi {
  font-size: 1.25rem;
  transition: color 0.2s ease-in-out;
}

footer .bi:hover {
  color: #ff6f00;
}
.course-scroll {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.course-scroll .card {
  scroll-snap-align: start;
  border-radius: 1rem;
  transition: transform 0.2s ease;
}

.course-scroll .card:hover {
  transform: translateY(-4px);
}
.highlight {
  color: #415de0;
  position: relative;
}

.highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 0.4em;
  background-color: #fff176;
  z-index: -1;
}
  .hover-lift {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }

  .hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.15);
  }

  .object-fit-cover {
    object-fit: cover;
  }
  .course-card {
    transition: all 0.2s ease-in-out;
  }
  .course-card:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
    transform: translateY(-4px);
  }
   .swiper-slide {
    width: 200px; /* adjust for portrait feel */
  }
  .play-btn {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.8);
    border: none;
  }
  video {
    cursor: pointer;
  }
  .custom-arrow {
  width: 50px;
  height: 50px;
  background-color: #007bff; /* Bootstrap primary blue */
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.custom-arrow i {
  font-size: 20px;
  line-height: 1;
}

.swiper-button-prev.custom-arrow {
  left: -25px; /* Adjust based on container padding */
}

.swiper-button-next.custom-arrow {
  right: -25px;
}

.custom-arrow:hover {
  background-color: #0056b3;
}
.nav-tabs .nav-link.active {
      font-weight: 600;
      border-color: transparent transparent #0d6efd;
    }
    .tab-pane {
      animation: fadeIn 0.3s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    
    .blur-active {
  filter: blur(5px);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  
    /* Smooth scroll when clicking an anchor */
  
  /* Force all tab‐panes to be visible (override Bootstrap hiding) */
  .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
  }
  /* Offset each section to account for sticky nav */
  .tab-pane {
    padding-top: 80px;
    margin-top: -80px;
  }