/* 1. The Wrapper */
.banner-container {
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    background-color: #000; /* Black background shows through when image fades */
    cursor: pointer;
}

/* 2. The Image - Handles the transparency */
.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    opacity: 1; /* Full visibility by default */
    transition: opacity 0.4s ease-in-out; /* Smooth fade effect */
}

/* 3. The Title - Hidden by default */
.moving-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%); /* Slightly lower for a "rise up" effect */
    color: #ffffff;
    font-weight: 800;
    text-align: center;
    font-size: clamp(1.5rem, 6vw, 4rem);
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8);
    width: 90%;
    z-index: 10;
    
    /* Hide logic */
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through to the image */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* MOBILE (When you drag the window narrow) */
@media (max-width: 767px) {
    .banner-container {
        height: 400px; /* Taller relative to width for mobile feel */
    }

    .banner-spacer {
        height: 380px; /* This MUST match the container height */
    }
    
    .moving-title {
        font-size: 1.8rem; /* Force a readable size on small screens */
        width: 85%;
    }
}


/* --- THE HOVER LOGIC --- */

/* When cursor is on the image area: */
.banner-container:hover .banner-img {
    opacity: 0.5; /* Image goes to 50% transparency */
}

.banner-container:hover .moving-title {
    opacity: 1; /* Show title */
    transform: translate(-50%, -50%); /* Move to perfect center */
}

/* 4. The Spacer (The "White Part") */
.banner-spacer {
    display: none; /* Controlled by JS */
    width: 100%;
    height: 550px; 
    background-color: #ffffff; 
}

/* Keep your existing sticky-banner class for the JS scroll logic */
.sticky-banner {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
}