/*
* Bootstrap-vertical-carousel
*/  


.carousel-inner, .carousel, .carousel-item, .carousel-container {
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
}

.carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start {
  transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
}


.carousel-item-next:not(.carousel-item-start), .active.carousel-item-end {
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
}


.vertical.carousel .carousel-control {
    bottom: auto;
    width: 100%;
    height: 15%;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0, rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0) 100%);
}
.vertical.carousel .carousel-control.right {
  top: auto;
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}


.vertical.carousel .carousel-control span {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}


.vertical.carousel .carousel-indicators {
  bottom: auto;
  top: 50%;
  left: auto;
  margin: 0;
  transform: rotate(90deg);
}



.carousel-indicators [data-bs-target].active{
  width: 30px;
  height:5px;
  margin-left: 10px;
  opacity: 1;
  margin-left: 5px;
}


 .carousel-item, .carousel-inner{
    max-height: 500px !important;
  }

  
  .carousel-item img{
    object-fit: cover !important;
    width: 100%;
    height: 100%;
 
  }

  .carousel-indicators li.active{
    margin-top: -2px;
    width: 38px;
    height: 8px;
  }