.carousel {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 250px;
  align-items: center;
  display: flex;
}

.banner_image{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#new_image, #old_image{
    position: relative;
    z-index: 2;
    object-fit: cover;
}

.carousel div.arrow{
    position: absolute;
    opacity: 0;
}

.carousel:hover div.arrow{
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

.hyper_image{
    height: 100%;
    width: 100%;
}

.arrow{
    position: relative;
    z-index: 5;
}

.carousel-control-next{
    right: 5%;
}

.carousel-control-prev{
    left: 5%;
}