/* Hero arrows patch
   - hidden by default
   - show on hover (desktop)
   - show on click/tap
   - auto-hide after 3s
   - smooth fade/scale
   - reduced text blocking
*/

.hero,
#heroCarousel {
  position: relative;
}

/* Optional: if Bootstrap default controls are still present */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
  opacity: 0 !important;
  pointer-events: none !important;
}

#heroCarousel .hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(.86);
  width: clamp(42px, 4.5vw, 56px);
  height: clamp(58px, 7vw, 72px);
  border: 0;
  border-radius: 16px;
  background: rgba(20, 28, 38, .34);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 6;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  transition:
    opacity .28s ease,
    transform .28s ease,
    background-color .2s ease,
    visibility 0s linear .28s;
}

#heroCarousel .hero-arrow::before {
  display: block;
  transform: translateY(-1px);
}

#heroCarousel .hero-arrow:hover,
#heroCarousel .hero-arrow:focus-visible {
  background: rgba(20, 28, 38, .5);
  outline: none;
}

#heroCarousel .hero-arrow-prev {
  left: 14px;
}

#heroCarousel .hero-arrow-next {
  right: 14px;
}

.hero.hero-arrows-visible #heroCarousel .hero-arrow {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
  transition:
    opacity .28s ease,
    transform .28s ease,
    background-color .2s ease,
    visibility 0s linear 0s;
}

/* Keep hero text above backgrounds but not blocked by wide arrow hit-boxes */
.hero .hero-content,
.hero .hero-content-video,
.hero .hero-card,
.hero .hero-progress-wrap,
.hero .hero-scroll-down {
  position: relative;
  z-index: 7;
}

/* Arrows stay near the edges so they do not cover the copy */
@media (min-width: 992px) {
  #heroCarousel .hero-arrow-prev { left: 20px; }
  #heroCarousel .hero-arrow-next { right: 20px; }
}

@media (max-width: 767.98px) {
  #heroCarousel .hero-arrow {
    top: 50%;
    width: 44px;
    height: 64px;
    border-radius: 14px;
    font-size: 30px;
    background: rgba(20, 28, 38, .28);
  }

  #heroCarousel .hero-arrow-prev { left: 8px; }
  #heroCarousel .hero-arrow-next { right: 8px; }

  /* smaller side padding than before so the text keeps more width */
  .hero .hero-content,
  .hero .hero-content-video {
    padding-left: clamp(20px, 4vw, 28px) !important;
    padding-right: clamp(20px, 4vw, 28px) !important;
  }
}