/* ========================================
   HERO SLIDER - FINAL SHARP CSS
========================================= */

.hero-slider-section {
  position: relative;
  width: 100%;
  margin-top: 60px;
  overflow: hidden;
}

#heroSlider,
#heroSlider .carousel-inner,
#heroSlider .carousel-item {
  width: 100%;
}

#heroSlider .carousel-item {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

#heroSlider .carousel-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  filter: none;
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Arrows */
#heroSlider .carousel-control-prev,
#heroSlider .carousel-control-next {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: 0.25s ease;
}

#heroSlider .carousel-control-prev {
  left: 15px;
}

#heroSlider .carousel-control-next {
  right: 15px;
}

#heroSlider .carousel-control-prev-icon,
#heroSlider .carousel-control-next-icon {
  width: 14px;
  height: 14px;
  background-size: 100% 100%;
}

#heroSlider .carousel-control-prev:hover,
#heroSlider .carousel-control-next:hover {
  background: #D4AF37;
}

/* Dots */
#heroSlider .carousel-indicators {
  bottom: 8px;
  margin-bottom: 0;
}

#heroSlider .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

#heroSlider .carousel-indicators .active {
  background: #D4AF37;
}

/* Tablet */
@media (max-width: 991px) {
  #heroSlider .carousel-item img {
    width: 100%;
    height: auto;
  }
}

/* Mobile */
@media (max-width: 576px) {
  #heroSlider .carousel-item {
    height: 220px;
  }

  #heroSlider .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  #heroSlider .carousel-control-prev,
  #heroSlider .carousel-control-next {
    width: 34px;
    height: 34px;
  }

  #heroSlider .carousel-control-prev-icon,
  #heroSlider .carousel-control-next-icon {
    width: 12px;
    height: 12px;
  }

  #heroSlider .carousel-indicators {
    display: none;
  }
}