/* Keep card shadows visible inside the horizontally scrolling homepage sliders. */
[data-home-page] .elementor-section[id^="my-slider-"] {
    /* Without scrollport padding, the bottom card shadows get clipped. */
    padding: 8px 6px 22px !important;
    margin-bottom: 60px !important;
}

@media (max-width: 767px) {
    [data-home-page] .elementor-section[id^="my-slider-"] {
        padding: 6px 5px 18px !important;
        margin-bottom: 48px !important;
    }
}

/*
 * Swiper moves each card into its own .swiper-slide after hydration.
 * The generated .my-swiper has inline padding-bottom: 0, so the shadow of
 * the last row gets clipped by Swiper's overflow:hidden scrollport.
 * Reserve shadow space INSIDE that scrollport, not by changing slide widths.
 */
[data-home-page] #home-featured .elementor-section[id^="my-slider-"] > .my-swiper {
    padding-top: 7px !important;
    padding-bottom: 30px !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
}

/* Exactly match the single, subtle shadow of the "چرا از ما استفاده کنید؟" benefit cards.
 * This one declaration covers cards both before and after Swiper hydration. */
[data-home-page] #home-featured .elementor-section[id^="my-slider-"] .card {
    box-shadow: 0 5px 15px rgba(24,86,164,.08) !important;
}

@media (max-width: 767px) {
    [data-home-page] #home-featured .elementor-section[id^="my-slider-"] > .my-swiper {
        padding-top: 5px !important;
        padding-bottom: 24px !important;
    }}