/* Realistic water ripple effect for footer */
#footer-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
   
    height: 300px; /* adjust height as needed */
}

/* Optional overlay to soften effect */
#footer-banner::after {
    content: "";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,50,100,0.2); /* subtle blue overlay */
    pointer-events: none;
}

/* The ripple plugin will handle the real-time distortions, so we remove the multi-ring effect */
.ims-ripple {
    display: none; /* hide old circle-based ripple */
}

/* Media preference */
@media (prefers-reduced-motion: reduce) {
    #footer-banner {
        background: url('path-to-water-texture.jpg') no-repeat center center;
        background-size: cover;
    }
}