/* Carousel indicators container */
.carousel-indicators {
  position: static;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 10px;
}

/* Thumbnail indicators */
.carousel-indicators li {
  width: 180px;
  height: 60px;
  cursor: pointer;
  background-size: cover;
  background-position: center center;
  border: 3px solid transparent;
  border-radius: 8px;
  margin: 0 8px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* On hover, scale up */
.carousel-indicators li:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.7);
}

/* Active thumbnail styling */
.carousel-indicators .active {
  border-color: #007bff;
  box-shadow: 0 0 15px 4px rgba(0, 123, 255, 0.9);
  transform: scale(1.15);
  z-index: 2;
}

/* Remove default indicator dots */
.carousel-indicators li::before {
  content: "";
  display: none;
}

/* Caption styling */
.carousel-caption {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 80%
  );
  padding: 20px 25px;
  border-radius: 8px;
  bottom: 20px;
  text-align: left;
  transition: opacity 0.6s ease;
}
.carousel-caption h5 {
  font-weight: 700;
  font-size: 1.6rem;
  color: #00aaff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  margin-bottom: 8px;
}
.carousel-caption p {
  font-size: 1.1rem;
  color: #cceeff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

/* Carousel images - zoom effect on active */
.carousel-item img {
  transition: transform 1.2s ease;
}
.carousel-item.active img {
  transform: scale(1.05);
}

/* Controls: bigger and custom color */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 0 3px rgba(0, 123, 255, 0.7));
  width: 25px;
  height: 25px;
}

/* Scrollbar styling for indicators if overflow */
.carousel-indicators::-webkit-scrollbar {
  height: 8px;
}
.carousel-indicators::-webkit-scrollbar-thumb {
  background: #007bff;
  border-radius: 4px;
}