/* Carousel Side Arrows Fix */
/* Target the main container to allow absolute positioning of arrows and adjust width */
.elementor-widget-nested-carousel {
    --e-n-carousel-nav-offset: 40px; /* Adjust this to move arrows further out or in */
    padding-left: var(--e-n-carousel-nav-offset);
    padding-right: var(--e-n-carousel-nav-offset);
}

.elementor-widget-nested-carousel .elementor-widget-container,
.elementor-widget-nested-carousel .e-n-carousel,
.elementor-widget-nested-carousel .swiper {
    position: relative !important;
    overflow: visible !important; 
    /* Ensure the wrapper doesn't clip the arrows if they extend outside */
}

/* Hide the default Elementor navigation container if it wraps the arrows */
.elementor-widget-nested-carousel .e-n-carousel__navigation {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Position the navigation arrows absolutely */
.elementor-widget-nested-carousel .elementor-swiper-button,
.elementor-widget-nested-carousel .swiper-button-prev,
.elementor-widget-nested-carousel .swiper-button-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    margin-top: 0 !important;
    pointer-events: auto !important;
}

/* Position Prev on the left */
.elementor-widget-nested-carousel .elementor-swiper-button-prev,
.elementor-widget-nested-carousel .swiper-button-prev {
    left: calc(var(--e-n-carousel-nav-offset) * -1) !important;
    right: auto !important;
}

/* Position Next on the right */
.elementor-widget-nested-carousel .elementor-swiper-button-next,
.elementor-widget-nested-carousel .swiper-button-next {
    right: calc(var(--e-n-carousel-nav-offset) * -1) !important;
    left: auto !important;
}

/* Adjust layout on smaller screens */
@media (max-width: 767px) {
    .elementor-widget-nested-carousel {
        --e-n-carousel-nav-offset: 20px;
    }
}