/* Styles for the hero section with image slider */
.hero-section {
    position: relative; /* Needed for absolute positioning of children */
    overflow: hidden; /* Hide parts of images that extend beyond the section */
}

/* Left White Background Area */
.hero-white-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%; /* This should take full height as per screenshot */
    width: 50%; /* Reverted to 50% */
    background-color: #fff;
    z-index: 0; /* Ensure it's a background layer */
}

#image-slider {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for half its height */
    right: 0; /* Position from the right edge */
    height: 80%; /* REDUCED HEIGHT - Adjust this percentage as needed */
    width: 50%; /* Reverted to 50% */
    z-index: 0; /* Ensure it's a background layer, but visually above hero-white-background */
}

.slider-image {
    position: absolute;
    top: 0;
    left: 0; /* Relative to its parent (#image-slider) */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* Hidden by default */
    transition: opacity 1.5s ease-in-out; /* Smooth fade effect */
}

.slider-image.active {
    opacity: 1; /* Active image is visible */
}

/* Ensure the content wrapper (container content box-middle) is correctly layered */
.slider-content-wrapper {
    position: relative; /* Ensure z-index works on children relative to this */
    z-index: 1; /* Ensure this wrapper and its content are above the image slider and white background */
    height: 100%; /* Crucial for vertical centering with box-middle */
}

/* Styles for the left content area (col-md-5) */
.hero-left-content {
    /* No background-color here, as it's provided by .hero-white-background */
    height: 100%; /* Take full height of its row */
    display: flex; /* Use flex to vertically center its inner content */
    align-items: center; /* Vertically center the inner content (slider-text-overlay) */
    justify-content: center; /* Horizontally center the inner content */
    /* Remove padding-left/right if container/row already handles it */
}

.slider-text-overlay {
    background-color: rgba(255, 255, 255, 0.85); /* Restored semi-transparent background */
    padding: 30px; /* Add some padding around the text */
    max-width: 1000px; /* Adjusted max-width for wider look */
    margin-left: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Restored subtle shadow */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Added subtle border */
    border-radius: 5px; /* Added border-radius for softer look */
}

/* Ensure dynamic text animation remains visible with the new background */
.slider-text-overlay .dynamic-text-animation {
    color: #000; /* Ensure text color is dark on light background */
}
/* Adjust h1 color for better contrast on the semi-transparent background */
.slider-text-overlay h1.text-black {
    color: #000 !important; /* Force black text */
}

/* The .box-middle class ensures vertical alignment for the entire content wrapper */
.box-middle {
    display: flex;
    align-items: center;
}