@media(max-width:767px) {
    .movie-card-small .details {
        margin-bottom: 0 !important;
    }

    .card-details-area {
        display: none !important;
    }

    .card-details-area-mobile {
        display: block !important;
    }

    .swiper-wrapper {
        padding: 0 !important;
    }

    .swiper {
        overflow: hidden !important;
    }
}

@media only screen and (max-width: 991px) {
    .hero-card-slider {
        display: block;
        transform: translate(-50%, -50%);
        left: 55%;
        width: 100%;
        bottom: 0;
    }




}