/* CAROUSEL */

.carousel {
    aspect-ratio: 2.2;
    object-fit: contain;
    border-style: none;
    font-size: 1vw;
}

.carousel .carousel-inner {
  height: 100%;
}

    .carousel .carousel-item {
        object-fit: cover;
        height: 100%;
    }

        .carousel .carousel-item .slideimg {
            height: 90%;
            object-fit: cover;
            transition: 0.5s;
            transform-origin: bottom;
            box-shadow: 0px 0px 6px 4px #212529;
            z-index: 4;
            cursor: pointer;
            will-change: transform;
        }

        .carousel .carousel-item .reflected-image {
            height: 90%;
            object-fit: cover;
            transition: 0.5s;
            transform-origin: top;
            transform: translateY(100%) scaleY(-1);
            -webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(90%, transparent), to(rgba(0, 0, 0, 1)));
            filter: blur(3px);
            opacity: 0.45;
            box-shadow: 0px 4px 20px 20px #212529;
            z-index: 5;
            pointer-events: none;
            cursor: none;
            will-change: transform;
        }

    .carousel:hover .slideimg, .carousel:hover .reflected-image {
        scale: 1.01;
    }

    .carousel .carousel-indicators button {
        background-color: #ef7c27 !important;
        height: calc(6px + 0.5em);
        width: calc(6px + 0.5em);
        border-radius: 50%;
        border: solid;
        border-width: calc(1px + 0.1em);
        border-color: rgb(255,255,255);
        box-shadow: 0px 0px 10px rgb(0,0,0);
    }

    .carousel .carousel-indicators .indicator-Button {
        background-color: #ef7c27 !important;
    }
.carousel-indicators button.active {
    background-color: #ef7c27 !important;
}



.carousel-indicators {
  margin-left: 40%;
  margin-right: 40%;
  margin-bottom: calc(16px + 4.5%);
}

.carousel-control-next, .carousel-control-prev {
  padding-bottom: 6%;
  font-size: clamp(30px,5vw,60px);
  height: 90%;
}

.carousel .carousel-control-next:hover {
    background: linear-gradient(75deg, rgba(0,0,0,0) 52%, rgba(0,0,0,0.82) 100%);
}

.carousel .carousel-control-prev:hover {
    background: linear-gradient(-75deg, rgba(0,0,0,0) 52%, rgba(0,0,0,0.82) 100%);
}

.carousel .carousel-caption {
    color: rgb(255,255,255);
    text-shadow: 0px 0px 5px rgb(0,0,0),0px 0px 2px rgb(0,0,0);
    text-align: start;
    pointer-events: none;
    font-size: calc(8px + 0.3vw);
    letter-spacing: 0px;
    width: 50%;
    z-index: 1;
    padding-bottom: 6%;
    color: #dee2e6;
    font-family: Rubik, sans-serif;
    left: 10%;
    right: 10%;
}

    .carousel .carousel-caption h2 {
        font-size: 2em;
        font-weight: 600;
        color: #dee2e6;
        letter-spacing: 0px;
        
    }
    .carousel .carousel-caption p {
        font-size: 1.7em;
        font-weight: 400;
        color: #dee2e6;
        letter-spacing: 0px;
    }

/* RESPONSIVE */

@media (max-width: 500px) {
    .carousel .carousel-caption {
        width: 69%;
    }
}