/* Unique absolute styling for slider 9cfa695d */
.elementor-widget-st_sliders .swiper-slide {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    height: 400px !important; /* Forces all slides to have a uniform height of 400px */
}
.st-sliders.st-list-slider.style-3 .st-button-prev, body .st-sliders.st-list-slider.style-3 .st-button-next {
    display: block !important;
}

/* Ensure image fits and has transition */
.elementor-widget-st_sliders .swiper-slide img {
    width: 100% !important;
    height: 400px !important; /* Force image height to 400px */
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.elementor-widget-st_sliders .swiper-slide:hover img {
    transform: scale(1.05) !important;
}

/* Create a modern dark gradient overlay over the image using the brand primary color #1A2B48 */
.elementor-widget-st_sliders .swiper-slide::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(to top, rgba(26, 43, 72, 0.85) 0%, rgba(26, 43, 72, 0.3) 60%, rgba(26, 43, 72, 0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Position title absolutely on top of image and overlay */
.elementor-widget-st_sliders .swiper-slide .st-slider-item .title,
.elementor-widget-st_sliders .swiper-slide .title {
    position: absolute !important;
    bottom: 40% !important;
    left: 20px !important;
    right: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-align: center !important; /* Matches Arabic site alignment perfectly */
    z-index: 2 !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4) !important;
}