.carousel {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.carousel-container {
    position: relative;
}

@media all and (min-width: 1200px) {
    .carousel-container {
        max-width: 50rem;
        margin: 0 auto;
    }
}

.carousel-slide {
    width: 100%;
    visibility: hidden;
    height: 0;
    transition: opacity 0.8s ease-in-out;
}

.carousel-slide.active {
    visibility: visible;
    height: inherit;
    opacity: 1;
}

.slide-caption {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
}

.carousel-controls {
    position: relative;
}
@media all and (min-width: 1200px) {
    .carousel-controls {
        width: 50rem;
    }

    .carousel-prev {
        position: absolute;
        right: 0;
    }

    .carousel-next {
        position: absolute;
        left: 0;
    }
}

.accessible-caption {
    display: none;
    position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}