/* Image Text Slider Styles */


/* Hide ARIA live region visually but keep it available for screen readers */

.image-text-slider-container [id*="slider-live-region"] {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.image-text-slider-container {
    position: relative;
    width: 100%;
    overflow: visible !important;
    margin-bottom: 4rem;
    /* Space for the overflowing content */
    isolation: isolate;
    /* Create new stacking context */
    contain: layout style;
    /* Optimize rendering but still allow overflow */
    contain: none size !important;
    /* Don't constrain size */
    display: block;
    clear: both;
    /* Ensure it clears previous floats */
    min-height: 40rem;
    /* Ensure minimum height even during resize */
    z-index: 1;
    /* Ensure slider has a stacking context */
}


/* Add clearfix to ensure proper height calculation and pushing content below */

.image-text-slider-container::after {
    content: "";
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
}


/* Add this to prevent container below from overlapping during resize */

.image-text-slider-container::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 5;
    background: transparent;
    pointer-events: none;
}

.image-text-slider-container.height-full {
    height: 70vh;
}

@media (max-width: 768px) {
    .image-text-slider-container.height-full {
        height: 50vh;
    }
}


/* Image Slider Styles */

.image-text-slider-container .swiper {
    width: 100%;
    overflow: visible !important;
    height: 45rem;
    min-height: 40rem;
    will-change: transform;
    position: relative;
}


/* Ensure slider maintains minimum height even during resize */

@media (max-width: 1024px) {
    .image-text-slider-container,
    .image-text-slider-container .swiper {
        min-height: 35rem;
    }
}

@media (max-width: 768px) {
    .image-text-slider-container,
    .image-text-slider-container .swiper {
        min-height: 30rem;
    }
}

@media (max-width: 480px) {
    .image-text-slider-container,
    .image-text-slider-container .swiper {
        min-height: 25rem;
    }
}


/* Add slider bottom spacer improvements */

.image-text-slider-container .slider-bottom-spacer {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    z-index: 1 !important;
    margin-top: -1px !important;
    clear: both !important;
}


/* Make sure elements below the slider don't overlap it */

.elementor-section:not(.elementor-inner-section)+.elementor-section:not(.elementor-inner-section),
.elementor-column+.elementor-column {
    position: relative;
    z-index: 0;
}

.image-text-slider-container+* {
    position: relative;
    z-index: 0;
}

.image-text-slider-container .swiper-wrapper {
    overflow: visible !important;
}

.image-text-slider-container .swiper-slide {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    will-change: transform, opacity;
    overflow: visible !important;
}

.image-text-slider-container .slide-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible !important;
}

.image-text-slider-container .slide-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Overlay Image - with more specific styles */

.image-text-slider-container .slide-image .overlay-image {
    position: absolute !important;
    left: 75% !important;
    bottom: 24% !important;
    z-index: 10 !important;
    max-width: 10% !important;
    display: block !important;
    pointer-events: none;
    visibility: visible !important;
    opacity: 1 !important;
}

.image-text-slider-container .slide-image .overlay-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* For the Elementor editor */

.elementor-editor-active .image-text-slider-container .slide-image .overlay-image,
.elementor-editor-preview .image-text-slider-container .slide-image .overlay-image {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}


/* Absolute Overlay Image */

.image-text-slider-container .slide-image .absolute-overlay-image {
    position: absolute !important;
    z-index: 15 !important;
    /* Higher than divider (z-index: 5) */
    width: 30%;
    height: auto;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    max-height: none !important;
    /* Allow content to overflow */
    pointer-events: none;
    /* Ensures clicks pass through */
    /* Make absolutely sure nothing clips our image */
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
}

.image-text-slider-container .slide-image .absolute-overlay-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Position classes for the absolute overlay image */

.image-text-slider-container .slide-image .absolute-overlay-image.position-top-left {
    top: 0;
    left: 0;
}

.image-text-slider-container .slide-image .absolute-overlay-image.position-top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.image-text-slider-container .slide-image .absolute-overlay-image.position-top-right {
    top: 0;
    right: 0;
}

.image-text-slider-container .slide-image .absolute-overlay-image.position-middle-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.image-text-slider-container .slide-image .absolute-overlay-image.position-middle-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image-text-slider-container .slide-image .absolute-overlay-image.position-middle-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.image-text-slider-container .slide-image .absolute-overlay-image.position-bottom-left {
    bottom: 0;
    left: 0;
}

.image-text-slider-container .slide-image .absolute-overlay-image.position-bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.image-text-slider-container .slide-image .absolute-overlay-image.position-bottom-right {
    bottom: 0;
    right: 0;
}


/* For the Elementor editor */

.elementor-editor-active .image-text-slider-container .slide-image .absolute-overlay-image,
.elementor-editor-preview .image-text-slider-container .slide-image .absolute-overlay-image {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}


/* Responsive for Absolute Overlay Image */

@media screen and (max-width: 1024px) {
    .image-text-slider-container .slide-image .absolute-overlay-image {
        width: 40% !important;
    }
}

@media screen and (max-width: 767px) {
    .image-text-slider-container .slide-image .absolute-overlay-image {
        width: 50% !important;
    }
}

@media screen and (max-width: 479px) {
    .image-text-slider-container .slide-image .absolute-overlay-image {
        width: 60% !important;
    }
}


/* Responsive for Overlay Image */

@media screen and (max-width: 767px) {
    .image-text-slider-container .slide-image .overlay-image {
        max-width: 40% !important;
    }
}

@media screen and (max-width: 479px) {
    .image-text-slider-container .slide-image .overlay-image {
        max-width: 30% !important;
    }
}

@media screen and (max-width: 767px) {
    .image-text-slider-container .slide-image .overlay-image {
        position: absolute !important;
        left: 65% !important;
        bottom: 44% !important;
        z-index: 10 !important;
        max-width: 30% !important;
        display: block !important;
        pointer-events: none;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* Only apply hiding on the front-end, not in the editor */

body:not(.elementor-editor-active) .image-text-slider-container .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) {
    opacity: 0;
    visibility: hidden;
}


/* Make active, next and previous slides visible */

.image-text-slider-container .swiper-slide-active,
.image-text-slider-container .swiper-slide-next,
.image-text-slider-container .swiper-slide-prev {
    opacity: 1;
    visibility: visible;
}


/* Content Styles */

.image-text-slider-container .slide-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    /* Allow clicking through to the slider */
    overflow: visible;
}

.image-text-slider-container .swiper-content-slider {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
    will-change: transform;
}

.image-text-slider-container .swiper-content-slider .swiper-slide {
    opacity: 1;
    visibility: visible;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    will-change: transform, opacity;
}


/* Only hide non-active content slides on front-end */

body:not(.elementor-editor-active) .image-text-slider-container .swiper-content-slider .swiper-slide:not(.swiper-slide-active) {
    opacity: 0;
    visibility: hidden;
}

.content-position-center .swiper-content-slider .swiper-slide {
    justify-content: center;
}

.content-position-right .swiper-content-slider .swiper-slide {
    justify-content: flex-end;
}

.image-text-slider-container .slide-content-container {
    position: relative;
    width: 40%;
    pointer-events: auto;
}

.content-position-left .slide-content-container {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.content-position-center .slide-content-container {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.content-position-right .slide-content-container {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}


/* Content Box Styles */

.image-text-slider-container .slide-content {
    padding: 30px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    transform: translateY(0);
    /* Reset transform */
}


/* Typography Styles */

.image-text-slider-container .slide-title {
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.75rem;
}

.image-text-slider-container .slide-description {
    margin-bottom: 30px;
    font-size: 1rem;
    line-height: 2rem;
    color: #002469 !important;
}


/* Button Styles */

.image-text-slider-container .slide-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.content-position-center .slide-buttons {
    justify-content: center;
}

.content-position-right .slide-buttons {
    justify-content: flex-end;
}

.image-text-slider-container .slide-button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.image-text-slider-container .slide-button.button-1 {
    background-color: #2980b9;
    color: #fff;
}

.image-text-slider-container .slide-button.button-1:hover {
    background-color: #3498db;
}

.image-text-slider-container .slide-button.button-2 {
    border: 1px solid #2980b9;
    color: #2980b9;
    background-color: transparent;
}

.image-text-slider-container .slide-button.button-2:hover {
    background-color: #2980b9;
    color: #fff;
}


/* Navigation Styles - Inside Content */

.image-text-slider-container .slider-navigation {
    display: flex;
    justify-content: start;
    margin-top: 20px;
    gap: 8px;
}

.content-position-center .slider-navigation {
    justify-content: center;
    gap: 20px;
}

.content-position-right .slider-navigation {
    justify-content: flex-end;
    gap: 10px;
}

.image-text-slider-container .swiper-button-prev,
.image-text-slider-container .swiper-button-next {
    position: static;
    width: 40px;
    height: 40px;
    margin: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
}

.image-text-slider-container .swiper-button-prev:hover,
.image-text-slider-container .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* Hide default Swiper button icons to prevent duplicates - using custom content instead */

.image-text-slider-container .swiper-button-prev:after,
.image-text-slider-container .swiper-button-next:after {
    display: none !important;
}

.image-text-slider-container .swiper-button-prev:before,
.image-text-slider-container .swiper-button-next:before {
    display: none !important;
}


/* Stop button styles */

.image-text-slider-container .slider-stop {
    position: static;
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    margin: 0;
    color: #fff;
    background-color: rgba(220, 53, 69, 0.8);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    border: none;
    font-size: 16px;
}

.image-text-slider-container .slider-stop:hover {
    background-color: rgba(220, 53, 69, 1);
}

.image-text-slider-container .slider-stop .stop-icon {
    font-size: 16px;
    line-height: 1;
}

.image-text-slider-container .slider-stop .control-text {
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    white-space: nowrap;
}


/* Controls container styling */

.image-text-slider-container .image-text-slider-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    position: relative;
    z-index: 20;
    padding: 0;
}

.content-position-center .image-text-slider-controls {
    justify-content: center;
    gap: 12px;
}

.content-position-right .image-text-slider-controls {
    justify-content: flex-end;
    gap: 10px;
}

.content-position-left .image-text-slider-controls {
    justify-content: flex-start;
    gap: 10px;
}


/* Fraction progress indicator styling */

.image-text-slider-container .slider-fraction-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1;
}

.image-text-slider-container .slider-fraction-indicator .current-slide {
    color: #fff;
    font-weight: 600;
}

.image-text-slider-container .slider-fraction-indicator .progress-separator {
    margin: 0 4px;
    opacity: 0.7;
}

.image-text-slider-container .slider-fraction-indicator .total-slides {
    opacity: 0.8;
}


/* Content position specific fraction indicator alignment */

.content-position-center .slider-fraction-indicator {
    justify-content: center;
}

.content-position-right .slider-fraction-indicator {
    justify-content: flex-end;
}

.content-position-left .slider-fraction-indicator {
    justify-content: flex-start;
}


/* Mobile fraction indicator styling */

@media (max-width: 480px) {
    .image-text-slider-container .slider-fraction-indicator {
        font-size: 12px;
        margin-top: 10px;
    }
}


/* Slider status for screen readers - hidden but accessible */

.image-text-slider-container .slider-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    left: -9999px !important;
    top: -9999px !important;
}


/* Play/pause button styling */

.image-text-slider-container .slider-play-pause {
    position: static;
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    margin: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    border: none;
    font-size: 16px;
}

.image-text-slider-container .slider-play-pause:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.image-text-slider-container .slider-play-pause.active {
    background-color: rgba(52, 152, 219, 0.8);
}

.image-text-slider-container .slider-play-pause.active:hover {
    background-color: rgba(52, 152, 219, 1);
}

.image-text-slider-container .slider-play-pause .play-icon,
.image-text-slider-container .slider-play-pause .pause-icon {
    font-size: 16px;
    line-height: 1;
}

.image-text-slider-container .slider-play-pause .control-text {
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    white-space: nowrap;
}


/* Persistent controls positioned in top right corner */

.image-text-slider-container .image-text-slider-controls-persistent {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 30;
    padding: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 25px;
    padding: 8px 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.image-text-slider-container .image-text-slider-controls-persistent .slider-play-pause,
.image-text-slider-container .image-text-slider-controls-persistent .slider-stop {
    position: static;
    min-width: 36px;
    height: 36px;
    padding: 6px 10px;
    margin: 0;
    color: #fff;
    background-color: transparent;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 14px;
}

.image-text-slider-container .image-text-slider-controls-persistent .slider-play-pause:hover,
.image-text-slider-container .image-text-slider-controls-persistent .slider-stop:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.image-text-slider-container .image-text-slider-controls-persistent .slider-play-pause.active {
    background-color: rgba(52, 152, 219, 0.6);
}

.image-text-slider-container .image-text-slider-controls-persistent .slider-play-pause.active:hover {
    background-color: rgba(52, 152, 219, 0.8);
}

.image-text-slider-container .image-text-slider-controls-persistent .slider-stop[aria-pressed="true"] {
    background-color: rgba(220, 53, 69, 0.6);
}

.image-text-slider-container .image-text-slider-controls-persistent .slider-stop[aria-pressed="true"]:hover {
    background-color: rgba(220, 53, 69, 0.8);
}

.image-text-slider-container .image-text-slider-controls-persistent .slider-fraction-indicator-persistent {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    margin-left: 8px;
    white-space: nowrap;
}

.image-text-slider-container .image-text-slider-controls-persistent .control-text {
    display: none;
    /* Hide text labels in persistent controls for cleaner look */
}


/* Enhanced tooltip styling for persistent controls */

.image-text-slider-container .image-text-slider-controls-persistent button[title] {
    position: relative;
}

.image-text-slider-container .image-text-slider-controls-persistent button[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: tooltip-fade-in 0.2s ease-out forwards;
}

.image-text-slider-container .image-text-slider-controls-persistent button[title]:hover::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0, 0, 0, 0.9);
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    animation: tooltip-fade-in 0.2s ease-out forwards;
}

@keyframes tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


/* Mobile responsive adjustments for persistent controls */

@media (max-width: 768px) {
    .image-text-slider-container .image-text-slider-controls-persistent {
        top: 15px;
        right: 15px;
        padding: 6px 10px;
        gap: 6px;
    }
    .image-text-slider-container .image-text-slider-controls-persistent .slider-play-pause,
    .image-text-slider-container .image-text-slider-controls-persistent .slider-stop {
        min-width: 32px;
        height: 32px;
        padding: 4px 8px;
        font-size: 12px;
    }
    .image-text-slider-container .image-text-slider-controls-persistent .slider-fraction-indicator-persistent {
        font-size: 11px;
        margin-left: 6px;
    }
}


/* Pagination Styles */

.image-text-slider-container .swiper-pagination-wrapper {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.image-text-slider-container .swiper-pagination-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.image-text-slider-container .swiper-pagination {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
}

.image-text-slider-container.pagination-bottom-left .swiper-pagination {
    text-align: left;
    padding-left: 20px;
}

.image-text-slider-container.pagination-bottom-right .swiper-pagination {
    text-align: right;
    padding-right: 20px;
}

.image-text-slider-container .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.image-text-slider-container .swiper-pagination-bullet-active {
    background-color: #fff;
}


/* Responsive Adjustments */

@media (max-width: 1240px) {
    .image-text-slider-container .swiper-content-slider {
        max-width: 100%;
        padding: 0 8px;
    }
    .image-text-slider-container .swiper {
        border-radius: 8px;
    }
    .image-text-slider-container.pagination-bottom-left .swiper-pagination {
        padding-left: 20px;
    }
    .image-text-slider-container.pagination-bottom-right .swiper-pagination {
        padding-right: 20px;
    }
}

@media (max-width: 1024px) {
    .image-text-slider-container .slide-content-container {
        width: 50%;
        margin-top: 45%;
    }
}

@media (max-width: 768px) {
    .image-text-slider-container {
        margin-bottom: 3rem;
        /* Slightly smaller margin on mobile */
        overflow: visible !important;
        /* Reinforce overflow visibility */
    }
    .image-text-slider-container .swiper {
        height: 30rem;
        min-height: 30rem;
    }
    .image-text-slider-container .slide-content-container {
        width: 70%;
        margin-top: 40%;
    }
    .content-position-left .slide-content-container,
    .content-position-right .slide-content-container {
        margin-left: auto;
        margin-right: auto;
    }
    .image-text-slider-container .slide-content {
        text-align: left;
        padding: 1.5rem;
    }
    .content-position-center .swiper-content-slider .swiper-slide,
    .content-position-left .swiper-content-slider .swiper-slide,
    .content-position-right .swiper-content-slider .swiper-slide {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .image-text-slider-container {
        margin-bottom: 2rem;
        /* Even smaller margin on very small screens */
    }
    .image-text-slider-container .swiper {
        height: 25rem;
        min-height: 25rem;
    }
    .image-text-slider-container .slide-content-container {
        width: 90%;
        padding: 0 10px;
        margin-top: 35%;
    }
    .image-text-slider-container .slide-buttons {
        flex-direction: column;
    }
    .image-text-slider-container .slide-content {
        padding: 1.25rem;
    }
    /* Mobile controls styling */
    .image-text-slider-container .image-text-slider-controls {
        gap: 6px;
        margin-top: 15px;
    }
    .image-text-slider-container .slider-play-pause,
    .image-text-slider-container .slider-stop {
        min-width: 36px;
        height: 36px;
        padding: 6px 10px;
        font-size: 14px;
    }
    .image-text-slider-container .slider-play-pause .control-text,
    .image-text-slider-container .slider-stop .control-text {
        font-size: 11px;
        margin-left: 6px;
    }
}


/* Elementor Editor Specific Styles */

.elementor-editor-active .image-text-slider-container {
    overflow: visible !important;
    /* Ensure bottom margin is visible in editor */
    margin-bottom: inherit;
    position: relative;
}


/* Style the editor spacing indicator */

.editor-spacing-indicator {
    display: block;
    width: 100%;
    min-height: 3rem;
    background: linear-gradient(45deg, transparent 45%, rgba(0, 0, 0, 0.03) 50%, transparent 55%);
    border: 1px dashed rgba(0, 0, 0, 0.2);
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-radius: 4px;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.editor-spacing-indicator span {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.editor-spacing-indicator small {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    font-style: italic;
}


/* Make sure the editor widget wrapper respects the bottom margin */

.elementor-editor-active .elementor-widget-image_text_slider {
    padding-bottom: 1rem;
    /* Minimal padding to ensure the indicator is visible */
}

.elementor-editor-active .image-text-slider-container .swiper {
    overflow: hidden !important;
}


/* Make all slides visible in the editor for better editing experience */

.elementor-editor-active .image-text-slider-container .swiper-slide {
    opacity: 1 !important;
    visibility: visible !important;
}


/* First slide should be more visible for better editing */

.elementor-editor-active .image-text-slider-container .swiper-slide:first-child {
    z-index: 2 !important;
}


/* Make all content slides visible in the editor */

.elementor-editor-active .image-text-slider-container .swiper-content-slider .swiper-slide {
    opacity: 1 !important;
    visibility: visible !important;
}


/* First content slide should be more visible */

.elementor-editor-active .image-text-slider-container .swiper-content-slider .swiper-slide:first-child {
    z-index: 2 !important;
}


/* Ensure transitions between slides are synchronized */

.image-text-slider-container .swiper-slide-active,
.image-text-slider-container .swiper-slide-next,
.image-text-slider-container .swiper-slide-prev {
    transition: transform var(--swiper-transition-duration, 300ms) var(--swiper-transition-timing-function, ease), opacity var(--swiper-transition-duration, 300ms) var(--swiper-transition-timing-function, ease);
}

.image-text-slider-container .swiper-content-slider .swiper-slide-active {
    transition: transform var(--swiper-transition-duration, 300ms) var(--swiper-transition-timing-function, ease), opacity var(--swiper-transition-duration, 300ms) var(--swiper-transition-timing-function, ease);
}


/* Force hardware acceleration for smoother transitions */

.image-text-slider-container .swiper,
.image-text-slider-container .swiper-content-slider,
.image-text-slider-container .swiper-slide,
.image-text-slider-container .swiper-content-slider .swiper-slide {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}


/* Specifically sync fade transition for the content slider */

.image-text-slider-container .swiper-content-slider .swiper-slide {
    transition: opacity var(--swiper-transition-duration, 300ms) ease, visibility var(--swiper-transition-duration, 300ms) ease;
}


/* Ensure content remains visible during transitions */

.image-text-slider-container .swiper-content-slider.transitioning .swiper-slide {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: auto !important;
    transition-delay: 0s !important;
}


/* Prevent content from disappearing during transitions */

.image-text-slider-container .swiper-content-slider .swiper-slide-active,
.image-text-slider-container .swiper-content-slider .swiper-slide-prev,
.image-text-slider-container .swiper-content-slider .swiper-slide-next {
    visibility: visible !important;
    pointer-events: auto !important;
}


/* Make content transition match image transition speed when transitioning */

.image-text-slider-container .swiper-content-slider.transitioning .swiper-slide-active {
    transition-duration: var(--swiper-transition-duration, 300ms) !important;
    z-index: 10 !important;
}


/* Ensure slide content stays visible during transitions */

.image-text-slider-container .swiper-content-slider .slide-content {
    transition: opacity var(--swiper-transition-duration, 300ms) ease;
    will-change: opacity, transform;
}


/* Tilted Divider Styles */

.image-text-slider-container .tilted-divider {
    display: none;
}


/* Hide the degree indicator on the front-end */

.image-text-slider-container .tilted-divider::before {
    display: none;
}


/* Editor specific styles for the divider */

.elementor-editor-active .image-text-slider-container .tilted-divider {
    display: none !important;
}


/* Ensure divider is visible on preview mode */

.elementor-editor-preview .image-text-slider-container .tilted-divider {
    display: none !important;
}


/* Responsive styles for the tilted divider pseudo-element */

@media (max-width: 1240px) {
    .has-tilted-divider-yes .swiper::after {
        /* Maintain the bottom positioning */
        bottom: 0;
    }
}

@media (max-width: 1024px) {
    .has-tilted-divider-yes .swiper::after {
        /* Maintain the bottom positioning */
        bottom: 0;
    }
}

@media (max-width: 768px) {
    .has-tilted-divider-yes .swiper::after {
        width: 120%;
        left: -10%;
        /* Maintain the bottom positioning */
        bottom: 0;
    }
    .content-position-right.has-tilted-divider-yes .swiper::after {
        right: -10%;
        left: auto;
    }
}

@media (max-width: 480px) {
    .has-tilted-divider-yes .swiper::after {
        width: 140%;
        left: -20%;
        /* Maintain the bottom positioning */
        bottom: 0;
    }
    .content-position-right.has-tilted-divider-yes .swiper::after {
        right: -20%;
        left: auto;
    }
}


/* Editor specific styles for the pseudo-element divider */

.elementor-editor-active .has-tilted-divider-yes .swiper::after {
    opacity: 0.7;
    pointer-events: none;
    display: block !important;
    visibility: visible !important;
}


/* Add angle indicator for the divider in the editor using ::before */

.elementor-editor-active .has-tilted-divider-yes .swiper::before {
    content: attr(data-degrees) "°";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    pointer-events: none;
    z-index: 100;
    display: block;
}


/* Ensure divider is visible on preview mode */

.elementor-editor-preview .has-tilted-divider-yes .swiper::after {
    opacity: 0.7;
    visibility: visible !important;
    display: block !important;
}


/* Add angle indicator in preview mode too */

.elementor-editor-preview .has-tilted-divider-yes .swiper::before {
    content: attr(data-degrees) "°";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    pointer-events: none;
    z-index: 100;
    display: block;
}


/* Breadcrumb styles */

.image-text-slider-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    padding: 0;
}


/* Breadcrumb above the content container */

.slide-content-container>.image-text-slider-breadcrumb:first-child {
    margin-bottom: 1rem;
}


/* Breadcrumb below the content container */

.slide-content-container>.image-text-slider-breadcrumb:last-child {
    margin-top: 1rem;
    margin-bottom: 0;
}


/* Breadcrumb overlay on the content container */

.image-text-slider-breadcrumb.overlay {
    position: relative;
    z-index: 15;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    margin-top: 0;
    border-radius: 6px 6px 0 0;
}

.slide-content-container>.image-text-slider-breadcrumb.overlay:first-child {
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
}

.slide-content-container>.image-text-slider-breadcrumb.overlay:last-child {
    border-radius: 0 0 6px 6px;
    margin-top: 0;
}

.image-text-slider-breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.image-text-slider-breadcrumb a {
    text-decoration: none;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}

.image-text-slider-breadcrumb .separator {
    margin: 0 0.5rem;
    display: inline-block;
    font-weight: 800;
}

.image-text-slider-breadcrumb .current-item {
    font-weight: 800;
}


/* Breadcrumb responsive styles */

@media (max-width: 768px) {
    .image-text-slider-breadcrumb {
        font-size: 0.8125rem;
    }
    .image-text-slider-breadcrumb.overlay {
        padding: 0.375rem 0.75rem;
    }
    .image-text-slider-breadcrumb .separator {
        margin: 0 0.375rem;
    }
}


/* Slide back Link */

.slide-back-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.slide-back-link a {
    color: #002469;
    text-decoration: underline;
    font-weight: 500;
}

.slide-publication-date {
    color: #002469;
    font-weight: 500;
}


/* Ensure the overlay container stays on top of the divider */

.has-tilted-divider-yes .swiper .absolute-overlay-image {
    z-index: 10 !important;
}


/* Support for overlay image overflow of tilted divider */

.overlay-overflow-yes .absolute-overlay-image {
    z-index: 20 !important;
    /* Even higher z-index to definitely overrule divider */
}


/* Ensure overflow setting extends to position-specific classes */

.overlay-overflow-yes .absolute-overlay-image.position-bottom-left,
.overlay-overflow-yes .absolute-overlay-image.position-bottom-center,
.overlay-overflow-yes .absolute-overlay-image.position-bottom-right {
    bottom: -10%;
    /* Allow intrusion over divider area */
    transform-origin: bottom center;
}

.overlay-overflow-yes .absolute-overlay-image.position-bottom-center {
    transform: translateX(-50%) translateY(10%);
}


/* Ensure tilted divider won't clip overflow */

.overlay-overflow-yes.has-tilted-divider-yes .swiper::after {
    pointer-events: none;
    z-index: 5;
}


/* Ensure hover works on positioned content */

.overlay-overflow-yes.has-tilted-divider-yes .swiper {
    overflow: visible !important;
}

.overlay-overflow-yes.has-tilted-divider-yes .swiper-slide {
    overflow: visible !important;
}


/* Editor support */

.elementor-editor-active .overlay-overflow-yes .absolute-overlay-image {
    z-index: 20 !important;
}


/* Individual slide overlay extension beyond boundaries */

.absolute-overlay-image.extend-beyond {
    z-index: 15 !important;
    /* Ensure this overrides divider z-index of 5 */
}

.absolute-overlay-image.extend-beyond.position-bottom-left,
.absolute-overlay-image.extend-beyond.position-bottom-center,
.absolute-overlay-image.extend-beyond.position-bottom-right {
    bottom: -10% !important;
    /* Extend beyond bottom boundary */
}

.absolute-overlay-image.extend-beyond.position-bottom-center {
    transform: translateX(-50%) translateY(10%) !important;
}


/* Modify existing position classes for extend-beyond */

.absolute-overlay-image.extend-beyond.position-top-left {
    top: -10% !important;
    left: -10% !important;
}

.absolute-overlay-image.extend-beyond.position-top-right {
    top: -10% !important;
    right: -10% !important;
}

.absolute-overlay-image.extend-beyond.position-bottom-left {
    bottom: -10% !important;
    left: -10% !important;
}

.absolute-overlay-image.extend-beyond.position-bottom-right {
    bottom: -10% !important;
    right: -10% !important;
}


/* Ensure editor shows extended images properly */

.elementor-editor-active .absolute-overlay-image.extend-beyond {
    z-index: 15 !important;
}


/* Create specific selector for swiper containers inside widgets with overlay-overflow */

.overlay-overflow-yes .swiper,
.overlay-overflow-yes .swiper-wrapper,
.overlay-overflow-yes .swiper-slide,
.overlay-overflow-yes .slide-image {
    overflow: visible !important;
}


/* Tilted Divider using pseudo-element */

.has-tilted-divider-yes .swiper::after {
    content: "";
    position: absolute;
    z-index: 5;
    background-color: #ffffff;
    width: 100%;
    height: 20rem;
    transform: skewY(-12deg);
    transform-origin: bottom center;
    bottom: 0;
    left: 0;
    opacity: 0.8;
    pointer-events: none !important;
    will-change: transform;
    transition: transform 0.3s ease, opacity 0.3s ease;
    overflow: visible;
}


/* Hide the degree indicator on the front-end */

.has-tilted-divider-yes .swiper::before {
    display: none;
}


/* Flip direction for the divider */

.divider-flipped-yes .swiper::after {
    transform: skewY(12deg);
}


/* Adjust tilted divider based on content position */

.content-position-left.has-tilted-divider-yes .swiper::after {
    transform-origin: bottom left;
    left: 0;
}

.content-position-center.has-tilted-divider-yes .swiper::after {
    transform-origin: bottom center;
    left: 0;
}

.content-position-right.has-tilted-divider-yes .swiper::after {
    transform-origin: bottom right;
    right: 0;
    left: auto;
}


/* Flipped divider adjustments for content positions */

.divider-flipped-yes.content-position-left .swiper::after {
    transform-origin: bottom left;
}

.divider-flipped-yes.content-position-center .swiper::after {
    transform-origin: bottom center;
}

.divider-flipped-yes.content-position-right .swiper::after {
    transform-origin: bottom right;
}


/* Ensure Swiper doesn't use CSS transforms that affect stacking context for the divider */

.has-tilted-divider-yes .swiper[class*="swiper-backface-hidden"] .swiper-slide {
    backface-visibility: visible !important;
    transform-style: preserve-3d !important;
}


/* Override Swiper container clip settings */

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide {
    transform-style: preserve-3d !important;
}


/* Ensure overlay is visible outside its container in 3D space */

.swiper-container-3d .absolute-overlay-image {
    transform: translateZ(1px) !important;
}


/* Better handling for bottom-positioned overlays */

.absolute-overlay-image.position-bottom-left,
.absolute-overlay-image.position-bottom-center,
.absolute-overlay-image.position-bottom-right {
    z-index: 20 !important;
    /* Even higher z-index for bottom overlays to properly go over divider */
}


/* Fix for Swiper virtual slides */

.swiper-virtual .swiper-slide {
    overflow: visible !important;
}


/* Added classes by JavaScript for handling absolute overlays */

.has-absolute-overlays .swiper,
.has-absolute-overlays .swiper-wrapper,
.has-absolute-overlays .swiper-slide {
    overflow: visible !important;
}


/* Extra handling for sliders with extended overlays */

.has-extended-overlays .swiper::after {
    pointer-events: none !important;
}


/* Special case for bottom overlays with a tilted divider */

.bottom-overlays-with-divider .absolute-overlay-image[class*="position-bottom"] {
    z-index: 20 !important;
    /* Higher than the divider */
}


/* Special case for Swiper effect-cube or effect-flip */

.swiper-3d .absolute-overlay-image {
    transform: translateZ(1px) !important;
}

.swiper-backface-hidden .absolute-overlay-image {
    backface-visibility: visible !important;
}


/* Ensure specific effect CSS isn't limiting our overlays */

.effect-fade .absolute-overlay-image,
.effect-flip .absolute-overlay-image,
.effect-cube .absolute-overlay-image,
.effect-coverflow .absolute-overlay-image,
.effect-cards .absolute-overlay-image {
    z-index: 25 !important;
    /* Force above all other elements */
}


/* Create a bottom margin/padding container that ensures content is pushed down */

.image-text-slider-container .slider-bottom-spacer {
    width: 100%;
    clear: both;
    display: block;
    position: relative;
    height: 1px;
    /* Minimal height but will ensure content below is pushed */
    margin-top: -1px;
    /* Offset the height to avoid extra spacing */
    z-index: 1;
    /* Lower than content but still in the flow */
}


/* Adjust layout for absolute overlay images that extend beyond */

.image-text-slider-container.has-extended-overlays {
    padding-bottom: 10%;
    /* Add padding at the bottom to accommodate extending elements */
}


/* When absolute overlays are positioned at the bottom */

.image-text-slider-container .slide-image .absolute-overlay-image.extend-beyond.position-bottom-left,
.image-text-slider-container .slide-image .absolute-overlay-image.extend-beyond.position-bottom-center,
.image-text-slider-container .slide-image .absolute-overlay-image.extend-beyond.position-bottom-right {
    z-index: 5 !important;
    /* Keep it above the spacer but below other content */
}


/* Improve static view alignment for content slides */

body:not(.elementor-editor-active) .image-text-slider-container .swiper-content-slider .swiper-slide[class*="elementor-repeater-item-content"] {
    width: 1200px;
    transform: translate3d(0px, 0px, 0px);
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: end;
    /* Hide all slides by default when there are multiple slides */
    opacity: 0;
    visibility: hidden;
}


/* Ensure only active content is visible */

body:not(.elementor-editor-active) .image-text-slider-container .swiper-content-slider .swiper-slide-active[class*="elementor-repeater-item-content"] {
    opacity: 1 !important;
    visibility: visible !important;
}


/* Add a class for single slide setups to keep visible */

body:not(.elementor-editor-active) .image-text-slider-container.single-slide .swiper-content-slider .swiper-slide[class*="elementor-repeater-item-content"] {
    opacity: 1;
    visibility: visible;
}


/* Restore original alignment controls for responsive - don't override these */

@media (max-width: 768px) {
    body:not(.elementor-editor-active) .image-text-slider-container .swiper-content-slider .swiper-slide[class*="elementor-repeater-item-content"] {
        justify-content: center;
        /* Center on mobile */
        align-items: flex-start;
        /* Align to top on mobile */
        display: flex;
    }
}


/* Force hide inactive slides during transitions */

body:not(.elementor-editor-active) .image-text-slider-container.transitioning .swiper-content-slider .swiper-slide:not(.swiper-slide-active)[class*="elementor-repeater-item-content"] {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}


/* Make sure the swiper transitions don't make inactive slides visible */

.swiper-container-fade .swiper-slide:not(.swiper-slide-active)[class*="elementor-repeater-item-content"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* Improve slide animation handling */

body:not(.elementor-editor-active) .image-text-slider-container .swiper-content-slider.swiping .swiper-slide {
    transition: none !important;
}


/* Force the inactive slides to be completely invisible */

body:not(.elementor-editor-active) .image-text-slider-container .swiper-content-slider .swiper-slide:not(.swiper-slide-active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}