.vertical-carousel {
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.coostom-container {
  height: 103%;
  position: absolute;
  width: 100%;
  color: black;
}

.coostom-box {
  display: flex;
  align-items: center;
  height: 33.33%;
  overflow: hidden !important;
  font-size: 20px;
  justify-content: flex-end;
  width: 100%;
  transition: all 0.3s ease-in-out;
  padding-right: 0;
}

.top-box {
  justify-content: flex-end;
  transition: all 0.31s ease-in-out;
  padding-right: 5%;
}

.middle-box {
  font-size: 30px !important;
  padding-right: 40%;
}

.bottom-box {
  padding-right: 27%;
}

@media screen and (max-width: 1400px) {
  .bottom-box {
    padding-right: 24%;
  }
}

.arrows {
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 50;
  left: 80%;
  width: 70px;
  transition: 0.2s all ease-in-out;
  color: #0D47A1;
}

.arrows .arr-up, .arrows .arr-down {
  top: 45%;
  position: absolute;
  left: 0;
  font-size: 100px;
  font-weight: bolder;
  transform: rotate(135deg);
  transition: 0.2s all ease-in-out;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.arrows .arr-up:hover, .arrows .arr-down:hover {
  cursor: pointer;
  color: #FFC107;
}

.arrows .arr-down {
  top: 55%;
  transform: rotate(-45deg);
}