/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.slider-home {
    width: 100%;
    height: 700px;
}

.slider-home .swiper-wrapper .swiper-slide {
    display        : flex;
    justify-content: center;
    align-items    : center;
    height         : 100%;
}

.immagine-slide {
    width   : 100%;
    height  : 100%;
    position: absolute;
    z-index : 5;
}

.immagine-slide img {
    position: relative;
}

.immagine-slide::after {
    content         : '';
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display         : block;
    position        : absolute;
    top             : 0;
}

.testo-slide {
    position: absolute;
    z-index : 100;
}

.pagination-home-slider {
    bottom: -20px !important;
}

.slider-home .swiper-button-next, 
.slider-home .swiper-button-prev{
    color: var(--main) !important;
}

.slider-home .swiper-pagination-bullet-active-main,
.slider-home .swiper-pagination-bullet-active-prev,
.slider-home .swiper-pagination-bullet-active-next {
    background-color: var(--main);
}

.swiper-pagination-bullet-active {
    background-color: var(--main) !important;
}

@media screen and (max-width: 1440px) {
    .slider-home {
        height: 450px;
    }
}

@media screen and (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }

    .testo-slide .row .col-md-12 {
        padding: 0 18px;
    }

    .testo-slide .sottotitolo {
        padding: 0 5px;
    }
    
    .slider-home,
    .immagine-slide {
        height: 480px;
    }

    .immagine-slide img {
        height         : 100%;
        object-fit     : cover;
        object-position: center;
    }

}