/* ================= SCROLLBAR HIDE (SCROLL WORKS) ================= */

.scrollbar-hide {
  -ms-overflow-style: none;   /* IE & Edge */
  scrollbar-width: none;      /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;              /* Chrome, Safari */
}


/* No desktop gap — infinite slide fix */
.imgBox {
  width: 405px;
  height: 365px;
  border-radius: 12px;
  object-fit: cover;
}

/* Infinite auto-scroll */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.scroll-animation {
  display: flex;
  animation: scroll-left 25s linear infinite;
  width: max-content;
}

#academicsMenu {
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: all 0.18s ease;
}

#academicsMenu.open {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dropdown-item {
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.dropdown-item:hover {
  background-color: #F6BCDC;
  /* soft grey */
  transform: translateX(4px);
  /* smooth slide */
  color: #333;
}


/* ===============================
   COMMON CUSTOM SCROLLBAR
================================ */

/* Chrome, Edge, Safari */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.35);
}

/* Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) var(--scrollbar-bg);
}

/* LEFT SIDE SCROLLBAR */
.scrollbar-left {
  direction: rtl;
}

.scrollbar-left>* {
  direction: ltr;
}



/* ================= SLIDER ANIMATION ================= */

@keyframes slide {
  0%, 22%    { transform: translateX(0%); }
  25%, 47%   { transform: translateX(-100%); }
  50%, 72%   { transform: translateX(-200%); }
  75%, 100%  { transform: translateX(-300%); }
}

.slider-track {
  width: 400%;
  height: 100%;
  animation: slide 12s infinite ease-in-out;
}

/* ================= DOTS ================= */

.dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d1d5db; /* gray-300 */
  opacity: 0.5;
}

/* DOT ACTIVE SYNC */
@keyframes dotActive {
  0%, 100% {
    background: #d1d5db;
    opacity: 0.5;
  }
  10%, 25% {
    background: #ffffff;
    opacity: 1;
  }
}

.dot-1 { animation: dotActive 12s infinite; }
.dot-2 { animation: dotActive 12s infinite; animation-delay: 3s; }
.dot-3 { animation: dotActive 12s infinite; animation-delay: 6s; }
.dot-4 { animation: dotActive 12s infinite; animation-delay: 9s; }




:root {
  --scrollbar-bg: #f1f1f1;
}

/* Thumbnails */
.thumb {
  width: 190px;
  height: 110px;
  object-fit: cover;
  cursor: pointer;
  flex-shrink: 0;
  border-right: 1px solid #aaa;
}

/* Active thumbnail */
.thumb.active {
  outline: 4px solid #FA8DC9;
  outline-offset: -4px;
}

/* Navigation buttons */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
}