/* Wrapper for Position Context and 5-Item Viewport Width */
.peopleweserve-image-slider-wrapper {
    position: relative;
    /* (5 items * 220px) + (4 gaps * 20px) = 1180px. This is the key for 5 visible items. */
    margin: 0 auto; /* Center the wrapper */
    padding: 0 40px; /* Space for arrows */
}

/* This is the viewport/window: Hides overflowing items */
.peopleweserve-image-slider-container {
    overflow-x: hidden; /* Key: Hides the items that go beyond the container width */
    scroll-behavior: smooth; /* Smooth scrolling effect */
    padding: 0 10px; 
}

/* This is the track: Makes all items go side-by-side */
.peopleweserve-slider-track {
    display: flex; /* Key: Makes items sit in a single row */
    gap: 20px;
    padding: 0;
    margin: 0;
    width: fit-content; /* Allows the track to expand beyond the viewport */
    height: 420px;

}

.peopleweserve-slider-item {
    position: relative;
    overflow: visible;
    width: 249px; /* Fixed width for each item */
    height: 400px; /* Fixed height for each item */
    border-radius: 0px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
    cursor: pointer;
    flex-shrink: 200; /* 0 - Prevent items from shrinking */
}

.peopleweserve-slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease-in-out;
}

.peopleweserve-slider-item .hover-image {
    position: absolute;
    top: 0;
    left: 100%; /* Start off-screen to the right */
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: left 0.3s ease-out; /* Slide in faster */
    z-index: 2; /* Ensure hover image is on top */
}

.peopleweserve-slider-item:hover .hover-image {
    left: 0; /* Slide to cover the original image */
}

.peopleweserve-slider-item .overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    color: white;
    padding: 15px 10px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 3; /* Ensure text is above hover image */
}

/* Style for Custom Navigation Buttons */
.peopleweserve-slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure the buttons are outside the max-width of the viewport wrapper * /
    margin: 0 -40px; */
}


.peopleweserve-slider-control:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.peopleweserve-slider-control.prev {
    left: 0;
}

.peopleweserve-slider-control.next {
    right: 0;
}



/* --- 3-Layer Hover Effect CSS --- */

.peopleweserve-custom-slider-container:hover .swing-image {
    /* ENTRY TRANSITION: Override for a quick and bouncy entrance (0.3s cubic-bezier) */
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Expand to full width */
    transform: scaleX(1); 
    
    opacity: 1;
}

.peopleweserve-custom-slider-container:hover .top-image {
    /* transform: translateX(50%) scale(1.2) rotate(5deg); /* Move way out and rotate */
    /* opacity: 0; /* Fade out the top image to reveal layers below */
}

.peopleweserve-custom-slider-container:hover .overlay-text {
    opacity: 1; /* Show the overlay text */
}

/* * Optional cleanup: The original .peopleweserve-image-layer-container 
* may no longer be necessary if you are using .peopleweserve-slider-item 
* or .peopleweserve-custom-slider-container as the wrapper.
*/
.peopleweserve-custom-slider-container {
    /* * Inherit dimensions from .peopleweserve-slider-item 
    * or define them here if this is your main wrapper.
    * Make sure it has 'position: relative' for the absolute child images to work.
    */
    position: relative; 
    /* The rest of the image-layer-container CSS can be moved here if needed */
}


.peopleweserve-slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* Smooth transitions for movement and fade */
}

/* Layer 1: Base Image (Stays in place) */
.base-image {
    z-index: 10;
}

/* Layer 2: Swing Image (Starts slightly offset, moves slightly on hover) */
.swing-image {
    z-index: 20;
    
    /* EXIT TRANSITION: 0.3s fast and smooth (ease-out) */
    transition: transform 0.3s ease-out;      

    /* Initial transformation: scale horizontally to 0 (hidden) */
    transform: scaleX(0);
    /* CRUCIAL: Set the pivot point to the right edge */
    transform-origin: right; 
}

/* Add one of these classes to the .swing-image element to change direction */
/* 1. Swing from Left to Right */
.swing-image.swing-from-left {
    transform: scaleX(0);
    transform-origin: left;
}
/* 2. Swing from Top to Bottom */
.swing-image.swing-from-top {
    transform: scaleY(0);
    transform-origin: top;
}
/* 3. Swing from Bottom to Up */
.swing-image.swing-from-bottom {
    transform: scaleY(0);
    transform-origin: bottom;
}

/* Layer 3: Top Image (Starts in place, moves significantly on hover) */
.top-image {
    z-index: 30; /* Should be on top */
}


/* Overlay Text Styling */
.overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: white;
    text-align: center;
    z-index: 40; /* Above all images */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
}

/* --- HOVER EFFECT --- */

.image-layer-container:hover .base-image {
    transform: scale(1.1); /* Slight zoom on the base layer */
}

/* .image-layer-container:hover .swing-image2 {
    /* On hover, swing it back into its visible position (0% translation) and make it fully opaque. * /
    transform: translateX(0%) scale(1);
    opacity: 1; /* Fully opaque on hover * /
}
*/
.image-layer-container:hover .top-image2 {
    transform: translateX(50%) scale(1.2) rotate(5deg); /* Move way out and rotate */
    opacity: 0; /* Fade out the top image to reveal layers below */
}

.image-layer-container:hover .overlay-text {
    opacity: 1; /* Show the overlay text */
}

/* Optional: Ensure the slide container itself is positioned correctly */
.peopleweserve-custom-slider-item {
    padding: 0 15px; /* Add some padding if needed to see the edges of the images */
}



/* For smaller */
@media (max-width: 767.98px) {
    .peopleweserve-image-slider-wrapper {
        padding: 0 30; 
    }

    .peopleweserve-image-slider-container {
        padding: 0; 
    }

    .peopleweserve-slider-control {
        width: 24px;
        height: 24px;
         /* Ensure the buttons are outside the max-width of the viewport wrapper * /
        margin: 0 -40px; */
   }
}