.hero {
    height: 93dvh;
    position: relative;
    width: 100%;
    z-index: 0;
}

.carousel {
    height: calc(100% - 90px);
    z-index: 1;
}

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

.carousel-content {
    height: 100%;
    position: relative;
    overflow-y:auto;
}
/* Più grande su schermi più larghi */
@media (min-width: 768px) {
    .carousel-content {
        height: 100%;
        position: relative;
        
    }
}
    .carousel-indicators,
    .carousel-controls {
        border-left: 1px solid hsla(0, 0%, 0%, 1);
        bottom: 0;
        height: 90px;
        position: absolute;
        width: 50%;
        background-color: #001833;
    }

    .carousel-indicators {
        left: 0;
        margin: 0;
        right: 50%;
    }

        .carousel-indicators [data-bs-target] {
            background-color: hsla(0, 0%, 100%, 1);
            border-radius: 50%;
            border: 1px solid hsla(0, 0%, 0%, 1);
            height: 15px;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
        }
/* Più grande su schermi più larghi */
@media (min-width: 768px) {
    .carousel-indicators [data-bs-target] {
        background-color: hsla(0, 0%, 100%, 1);
        border-radius: 50%;
        border: 1px solid hsla(0, 0%, 0%, 1);
        height: 15px;
        margin-left: 1rem;
        margin-right: 1rem;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
    }
}
        .carousel-indicators .active {
            background-color: hsla(0, 0%, 0%, 1);
        }

    .carousel-dark .carousel-indicators [data-bs-target] {
        background-color: #ced4da;
    }

    .carousel-controls {
        bottom: 0;
        right: 0;
    }

    .carousel-control-next,
    .carousel-control-prev {
        height: 100%;
        width: 50%;
    }

    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    }

    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    .carousel-tools {
        background-color: hsla(0, 0%, 100%, 1);
        border-bottom: 1px solid hsla(0, 0%, 0%, 1);
        border-top: 1px solid hsla(0, 0%, 0%, 1);
        bottom: -90px;
        height: 90px;
        left: 0;
        overflow: hidden;
        position: absolute;
        width: 100%;
    }

    .carousel-item-prev:not(.carousel-item-end),
    .active.carousel-item-start {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    .carousel-item-next:not(.carousel-item-start),
    .active.carousel-item-end {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    .jello-horizontal {
        -webkit-animation: jello-horizontal 0.9scubic-bezier(0.175, 0.885, 0.32, 1.275) 3 both;
        animation: jello-horizontal 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3 both;
    }

    @media (max-width: 991px) {
        .carousel-indicators,
        .carousel-controls {
            width: 50%;
        }

        .carousel-indicators {
            left: 0;
            right: 50%;
        }
    }

    @keyframes jello-horizontal {
        0% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }

        30% {
            -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
        }

        40% {
            -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
        }

        50% {
            -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
        }

        65% {
            -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
        }

        75% {
            -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
        }

        100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }