.carousel-wrapper {
  overflow: hidden;
  width: 100%;
}

.carousel {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.carousel__item {
  opacity: 0;
  position: absolute;
  top:0;
  width: 100%;
  margin: auto;
  z-index: 100;
  transition: transform .5s, opacity .5s, z-index .5s;
}

.carousel__item.initial,
.carousel__item.active {
  opacity: 1;
  position: relative;
  z-index: 900;
}

.carousel__item.prev,
.carousel__item.next {
  z-index: 800;
}

.carousel__item.prev {
  transform: translateX(-100%);
}

.carousel__item.next {
  transform: translateX(100%);
}

.carousel__button--prev,
.carousel__button--next {
  position: absolute;
  top: 50%;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  cursor: pointer; 
  z-index: 1001;
}

.carousel__button--prev {
  left: 0;
}

.carousel__button--next {
  right: 0;
}

.carousel__button--prev::after,
.carousel__button--next::after {
  content: " ";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 54%;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) rotate(135deg);
}

.black-carousel-button::after,
.black-carousel-button::after {
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}

.carousel__button--next::after {
  left: 47%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.carousel-image {
  height: 500px;
  width: 100%;
  object-fit: cover;
}

.testimonial-item {
  width: 100%;
  height: 200px;
}