/*
 * Entire Slider Container and Overall Layout
 * -----------------------------------------------------------------
 */
.slider-container {
    width: 100%;
    max-width: 1000px; /* Max width for the whole slider */
    margin: 0 auto; /* Center the slider on the page */
    overflow: hidden; /* Crucial for clipping slides and for rounded corners */
    position: relative; /* Essential for absolute positioning of arrows and dots */
    border-radius: 10px; /* Overall rounded corners for the slider container */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for the container */
}

/*
 * Slider Wrapper - Holds all individual slides
 * -----------------------------------------------------------------
 */
.slider-wrapper {
    display: flex; /* Arranges slides in a row */
    transition: transform 0.5s ease-in-out; /* Smooth sliding animation */
}

/*
 * Individual Slider Item (Each Slide) Styling
 * -----------------------------------------------------------------
 */
.slider-item { /* Applied to ALL slider items */
    display: flex; /* Arranges image and content side-by-side within a slide */
    flex: 0 0 100%; /* Each slide takes up exactly 100% of the slider-wrapper's width */
    height: 400px; /* Fixed height for the entire slide, controls image size */
    overflow: hidden; /* Ensures contents respect the slide's border-radius */
}

/*
 * Image Section Styling
 * -----------------------------------------------------------------
 */
.slider-image {
    flex: 1; /* Image section takes 1/3 of the slide's width */
    position: relative;
    overflow: hidden; /* Crucial for image to respect border-radius */
    border-radius: 10px;
}

.slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block; /* Removes extra space below image */
}

/*
 * Two-Toned Blue Content Section Styling (Outer and Inner Boxes)
 * -----------------------------------------------------------------
 */
.slider-content.outer-box {
    flex: 2; /* Content section takes 2/3 of the slide's width */
    background-color: #3CB4E5; 
    color: white;
    padding: 35px 35px 35px 0px; 
    margin-left: -10px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the content */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.inner-content-box {
    background-color: #3498db; /* Lighter blue background for the main content area */
    padding: 20px; /* Padding for the text inside the lighter box */
    border-radius: 8px; /* Slightly smaller border-radius for the inner box */
    height: 100%; /* Ensures inner box fills outer box vertically */
    box-sizing: border-box; /* Includes padding in the element's total height/width */
}

.inner-content-box h2 {
    font-size: 1.7em;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: white !important;
}

.inner-content-box p {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 10px;
}

/*
 * Navigation Arrows Styling (Complex Animated Effect)
 * -----------------------------------------------------------------
 */
.slider-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding: 0px; /* Important: No padding here to allow arrows to protrude */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    z-index: 20; /* Ensures arrows are on top of other content */
    opacity: 0; /* Initially hidden */
    pointer-events: none; /* Prevents interaction when hidden */
    transition: opacity 0.3s ease-in-out; /* Smooth transition for fading */
}

.slider-container:hover .slider-navigation {
    opacity: 1; /* Fully visible on hover */
    pointer-events: auto; /* Re-enable interaction on hover */
}

/* The .nav-arrow becomes the button container for the animation */
.nav-arrow {

    width: 50px; /* Fixed width of the button */
    height: 50px; /* Fixed height of the button */
    display: flex; /* Use flex to center the arrow lines inside */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s; /* Added transform for active effect */
    pointer-events: auto; /* Makes the arrow button clickable */

    position: relative; /* Crucial for absolute positioning of arrow lines */
    overflow: hidden; /* Important to clip the animating lines within the button */
}


/* Specific margins to make arrows protrude */
.nav-arrow.prev-arrow {
    margin-left: 40px; /* Adjust to control how much the left arrow sticks out */
}

.nav-arrow.next-arrow {
    margin-right: 40px; /* Adjust to control how much the right arrow sticks out */
}

/* When the arrow button is clicked/active */
.nav-arrow:active {
    transform: scale(0.9); /* Subtle press effect */
}

/*
 * Styles for the animated arrow lines themselves
 * (Adapted from your provided code, within the .nav-arrow context)
 */
.arrow-lines-container {
    width: 50px; /* Should match nav-arrow width */
    height: 50px; /* Should match nav-arrow height */
    position: absolute; /* Position within the .nav-arrow button */
    top: 0;
    left: 0;
    display: flex; /* To center the lines */
    align-items: center;
    justify-content: center;
}

/* Lines for the arrow */
.arrow-top, .arrow-bottom {
    background-color: #3CB4E5;
    height: 4px;
    position: absolute;
    width: 100%; /* Line width relative to its parent (arrow-lines-container) */
    left: -5px; /* Adjust this to center/position the lines within the button */
    top: 50%; /* Center vertically */
}

/* The animating pseudo-elements that create the fill effect */
.arrow-top:after, .arrow-bottom:after {
    background-color: #fff; /* White fill color */
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.15s;
}

.arrow-top {
    transform: rotate(45deg);
    transform-origin: bottom right;
}

.arrow-top:after {
    left: 100%; /* Initially off-screen to the right */
    right: 0;
    transition-delay: 0s;
}

.arrow-bottom {
    transform: rotate(-45deg);
    transform-origin: top right;
}

.arrow-bottom:after {
    left: 0;
    right: 100%; /* Initially off-screen to the right */
    transition-delay: 0.15s;
}

/* Hover effects: Lines animate to fill */
.nav-arrow:hover .arrow-top:after { /* Targeting .nav-arrow:hover for the effect */
    left: 0;
    transition-delay: 0.15s;
}

.nav-arrow:hover .arrow-bottom:after { /* Targeting .nav-arrow:hover for the effect */
    right: 0;
    transition-delay: 0s;
}

/* Specific rotation for the LEFT arrow to point left */
.prev-arrow .arrow-lines-container {
    transform: rotate(180deg); /* Rotates the entire arrow structure */
}

/* Ensure the lines are centered within the 50x50px .nav-arrow container */
/* You might need slight adjustments to 'left' on .arrow-top/.arrow-bottom
   if the lines don't appear perfectly centered in your button. */

/*
 * Pagination Dots Styling
 * -----------------------------------------------------------------
 */
.slider-dots {
    position: absolute;
    bottom: 15px;
    left: 85%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px; /* Space between dots */
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.dot.active {
    background-color: white;
    transform: scale(1.2); /* Slightly larger for active dot */
}

/*
 * Responsive Adjustments for smaller screens (e.g., mobile)
 * -----------------------------------------------------------------
 */
@media (max-width: 768px) {
    .slider-item { /* Changed from .slider-item.active */
        flex-direction: column; /* Stack image and content vertically */
        height: auto; /* Allow height to adjust based on content */
    }

    .slider-image,
    .slider-content.outer-box {
        border-radius: 0; /* Remove specific horizontal border-radius on stack */
        width: 100%; /* Ensure full width when stacked */
        height: auto;
    }

    .slider-image img {
        height: 200px; /* Fixed height for image when stacked on small screens */
    }

    /* Adjust border-radius for stacked blocks to appear correctly rounded */
    .slider-image {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
    }

    .slider-content.outer-box {
        padding: 0; /* Remove outer box padding for stacked view if desired */
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .inner-content-box {
        padding: 20px;
        text-align: center;
    }

    /* Hide arrows on smaller screens if they become problematic */
    .slider-navigation {
        display: none;
    }

    /* Move dots to a more visible area if needed */
    .slider-dots {
        bottom: 5px; /* Adjust position */
    }
}