.water_image_bg {
  position: absolute; /* Changed from relative to absolute */
    inset: 16px 16px 0 16px; /* Matches the hero-image perfectly */
    border-radius: 40px; /* Keeps the rounded corners */
    background-image: url(/assets/images/section/hero-1.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    z-index: 1 !important;
    
}

/*Extra Header css start*/
/* 1. Ensure the parent section is ready */
.section-hero {
    position: relative;
    padding: 16px 16px 0;
    min-height: 100vh;
}

/* 2. THE FRAME: Handles the size, shape, and clipping */
.hero-bg-wrapper {
    position: absolute;
    inset: 16px 16px 0 16px; /* Your requested spacing */
    border-radius: 40px;     /* Your rounded corners */
    overflow: hidden;        /* CRUCIAL: Stops the water from bleeding out */
    z-index: 0;              /* Keeps it at the back */
}

/* 3. LAYER 1: The static background image */
.hero-bg-wrapper .hero-image {
    position: absolute;
    inset: 0;        
    z-index: 1;
}

/* 4. LAYER 2: The empty water layer */
.hero-bg-wrapper .water_image_bg {
    position: absolute;
    inset: 0;                /* Fills the wrapper, exactly covering the image */
    z-index: 2;              /* Sits on top of the image */
}

/* 5. THE CONTENT: The invisible shield fix */
.section-hero .container {
    position: relative;
    z-index: 10 !important;
    pointer-events: none;    /* Lets the mouse fall through to the water */
}

/* 6. RE-ENABLE CLICKS */
.section-hero .content-wrap,
.section-hero .scroll-more {
    pointer-events: none !important;   
    
}

/*Extra Header css ends*/