/* Example CSS for arrow positioning */
.elementor-widget-off-set-card-carousel .swiper-button-prev,
.elementor-widget-off-set-card-carousel .swiper-button-next {
    cursor: pointer;
    padding: 10px; 
    display: flex; 
    align-items: center;
    justify-content: center;
    top: 0px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    position: relative !important;
    transform:  !important;
}
.elementor-widget-off-set-card-carousel .arrows-container{
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    left: 50%;
}


/* Arrow Positions */
.elementor-widget-off-set-card-carousel.off-set-arrows-position-top-left .arrows-container {
    top: 0;
    transform: translateX(-50%);
}
/*.elementor-widget-off-set-card-carousel.off-set-arrows-position-top-left .swiper-button-next {
    top: 0;
    left: 50px; 
    transform: none;
}*/

.elementor-widget-off-set-card-carousel.off-set-arrows-position-top-right .arrows-container {
    top: 0;
    transform: translateX(-50%);
    justify-content: flex-end;
}
/*.elementor-widget-off-set-card-carousel.off-set-arrows-position-top-right .swiper-button-next {
    top: 0;
    right: 0;
    transform: none;
}*/

.elementor-widget-off-set-card-carousel .swiper-arrow-button {
    margin: 0 !important; /* Shorthand for 0px */
}

.elementor-widget-off-set-card-carousel.off-set-arrows-position-bottom-left .arrows-container {
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
}


.elementor-widget-off-set-card-carousel.off-set-arrows-position-bottom-center .arrows-container {
    bottom: 0;
    transform: translateX(-50%); /* Center the prev button relative to its own left edge */
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.elementor-widget-off-set-card-carousel.off-set-arrows-position-bottom-right .arrows-container {
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
    justify-content: flex-end;
}

.elementor-widget-off-set-card-carousel.off-set-arrows-position-top-left .swiper.off-set-card-carousel,
.elementor-widget-off-set-card-carousel.off-set-arrows-position-top-right .swiper.off-set-card-carousel {
    padding-top: 40px;
}
.elementor-widget-off-set-card-carousel.off-set-arrows-position-bottom-center .swiper.off-set-card-carousel,
.elementor-widget-off-set-card-carousel.off-set-arrows-position-bottom-left .swiper.off-set-card-carousel,
.elementor-widget-off-set-card-carousel.off-set-arrows-position-bottom-right .swiper.off-set-card-carousel {
    padding-bottom: 40px;
}

/* Responsive Hiding for Arrows and Pagination */
@media (min-width: 1025px) { /* Desktop */
    .swiper-no-arrow-desktop.swiper-button-prev,
    .swiper-no-arrow-desktop.swiper-button-next,
    .swiper-no-pagination-desktop.swiper-pagination {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) { /* Tablet */
    .swiper-no-arrow-tablet.swiper-button-prev,
    .swiper-no-arrow-tablet.swiper-button-next,
    .swiper-no-pagination-tablet.swiper-pagination {
        display: none !important;
    }
}

@media (max-width: 767px) { /* Mobile */
    .swiper-no-arrow-mobile.swiper-button-prev,
    .swiper-no-arrow-mobile.swiper-button-next,
    .swiper-no-pagination-mobile.swiper-pagination {
        display: none !important;
    }
}

/* Basic Swiper Pagination Styling (adjust as needed) */
.elementor-widget-off-set-card-carousel .swiper-pagination {
    position: relative; /* Or absolute, adjust based on desired layout */
    bottom: 0;
    padding-top: 20px; /* Spacing from carousel */
}

.elementor-widget-off-set-card-carousel .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px; /* Space between bullets */
}
.swiper-slide {
    width: 100%;
}

.box-container{
    width: 100%;
    display: block;
}
.off-set-card-carousel.swiper-initialized .swiper-slide .elementor-container{
    width: 100% !important;
    max-width: 600px !important;
}

.arrows-container{
    margin: 0px auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    -webkit-gap: 20px;
}

.custom-arrows-container .swiper-arrow-button:after{
   content: "" !important;
   display: none !important;
}
.custom-arrows-container .swiper-arrow-button{
   padding: 0px !important;
}
.off-set-card-carousel-wrapper .swiper-pagination-progressbar {
    width: 550px !important;
    max-width: 90%;
    margin: 0px auto !important;
    padding-top: 5px !important;
}
.swiper-slide-grid-link{
       text-decoration: none !important;
    display: block !important;
    line-height: 1 !important;
    font-size: inherit !important;
    color: inherit !important;
}
@media (min-width: 1025px) { /* Desktop */
    .container-expand-right:not(.container-fluid){
        display: block;
       width: calc(100vw - (50vw - 50%));
    }
    .container-fluid{
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (min-width: 768px) and (max-width: 1024px) { /* Desktop */
    .container-expand-right:not(.container-expand-tablet-right, .container-fluid, .container-expand-tablet-right-none){
        display: block;
       width: calc(100vw - (50vw - 50%));
    }
    .container-expand-tablet-right:not(.container-tablet-fluid){
        display: block;
        width: calc(100vw - (50vw - 50%));
    }
    .container-fluid:not(.container-tablet-fluid, .container-tablet-fluid-none){
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .container-tablet-fluid{
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (max-width: 767px) { /* Desktop */
    .container-expand-right:not(.container-expand-mobile-right, .container-expand-tablet-right-none, .container-expand-mobile-right-none, .container-mobile-fluid){
        display: block;
       width: calc(100vw - (50vw - 50%));
    }
    .container-expand-tablet-right:not(.container-expand-mobile-right, .container-expand-mobile-right-none, .container-mobile-fluid){
        display: block;
       width: calc(100vw - (50vw - 50%));
    }
    .container-expand-mobile-right:not(.container-mobile-fluid){
        display: block;
       width: calc(100vw - (50vw - 50%));
    }

    .container-fluid:not(.container-mobile-fluid, .container-mobile-fluid-none),
    .container-tablet-fluid:not(.container-mobile-fluid, .container-mobile-fluid-none)
    {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .container-mobile-fluid{
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}