#heroCarousel .carousel-inner {
  position: relative;
}

#heroCarousel .carousel-inner::before,
#heroCarousel .carousel-inner::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px; /* ajuste como preferir */
  height: 100%;
  pointer-events: none; /* NÃO bloqueia os botões */
  z-index: 3; /* acima da imagem, abaixo dos botões */
}

#heroCarousel .carousel-inner::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.659), transparent);
}

#heroCarousel .carousel-inner::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.659), transparent);
}

.carousel-control-next, .carousel-control-prev {
    opacity: 100;
}   

.back-button {
  color: #2d4356;
  display: flex;
  align-items: center;
  gap: 10px;
}
.back-button:hover {
  transform: scale(1.02);
  transition: 0.2s;
}