.peopleweserve-section-title {
    color: #FFFFFF; /* White text for title */
    font-family: 'Revans Medium', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}

/* 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: 220px; /* Fixed width for each item */
    height: 399px; /* 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 */
}







        /* Custom CSS for the Full-Page Split Modal */

        /* Override Bootstrap's default modal size to make it full screen */
        .full-page-modal .modal-dialog {
            max-width: 100vw; /* Full viewport width */
            height: 100vh;    /* Full viewport height */
            margin: 0;        /* Remove default margins */
            display: flex;    /* Use flex to properly position content */
            align-items: center; /* Center vertically (if content isn't full height) */
            justify-content: center; /* Center horizontally (if content isn't full width) */
            z-index: 1050; /* Add this line to set the z-index */
        }

        .full-page-modal .modal-content {
            height: 100vh;    /* Full viewport height */
            width: 100vw;     /* Full viewport width */
            background-color: #dc3545; /* Bootstrap's 'danger' red */
            border-radius: 0; /* No rounded corners for a truly full-page look */
            display: flex;    /* Use flex to split content horizontally */
            flex-direction: row; /* Arrange children in a row */
            padding: 0;       /* Remove default padding */  
            overflow-y: hidden; /* Prevent content scrollbar on the modal-content itself */
        }


        /* Left Half (Text/Content) - Takes 2/3 of the space */
        .full-page-modal .modal-left-half {
            flex: 1; /* Key: Take all available space on the left */
            max-width: none;
            
            flex-direction: column; /* Allows content to push to the top */
            align-items: flex-start; /* Start content at the top */
            justify-content: flex-start; /* Start content at the top */
            color: white;
            font-size: 1.2rem;
            
            overflow-y: auto; /* Key: Adds a vertical scrollbar when content overflows */
            min-height: 100%; /* Ensure it spans the full modal height for scrolling */

            scrollbar-color: white;
        }

        .modal-left-half-overlay-text {
            padding: 50px 40px 20px 40px; /* Add top padding to clear browser bars */
        }

        /* Right Half (Image) - Fixed width, full height on large screens */
        .full-page-modal .modal-right-half {/* Key: Flex-basis sets the fixed width, flex-shrink: 0 prevents shrinking */
            flex: 0 0 680px; /* Base size: 480px. Will not grow or shrink */
            min-width: 680px;
            max-width: 33.3333%; /* Allows it to take up to 1/3 of the screen on very wide displays */
            
            /* Background properties for the image */
            background-size: cover;
            background-position: top center; /* Changed from left top to center */
            background-repeat: no-repeat;
            
            position: relative;
            padding: 0;
            height: 100%; /* Ensure it takes the full height of the modal-content */
        }


@media (max-width: 1200px) {
    .full-page-modal .modal-right-half {
        display: none; 
    }
}

body.modal-active .navbar {
    display: none;
}