/* Styles for OGL Flowmap integration */
.hero7 {
    position: relative; /* Establishes a positioning context for the canvas */
    overflow: hidden;   /* Ensures the canvas doesn't spill out if it's larger for any reason */
    background-image: none !important; /* CRITICAL: Override inline style and remove existing background image */
    touch-action: pan-y; /* Allow vertical scrolling on mobile, restrict horizontal panning */
}

.hero7 > canvas { /* Target only a canvas that is a DIRECT CHILD of .hero7 */
    display: block; /* Removes extra space below canvas if it's inline */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Places canvas behind .hero7's direct content */
    touch-action: pan-y; /* Allow vertical scrolling while enabling horizontal animation */
}

/* Ensure content within .hero7 (like the .container div) is visible on top of the canvas */
.hero7 .container {
    position: relative; /* Needed to establish a stacking context for the content */
    z-index: 1;         /* Ensure content is above the z-index: 0 canvas */
    touch-action: pan-y; /* Allow vertical scrolling for content */
}