.background-beams-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
}

/* Ensure the hero container handles the canvas properly */
.about-hero {
    position: relative;
    overflow: hidden;
}

/* Ensure content stays on top */
.about-hero-content {
    z-index: 10;
    position: relative;
}

/* Fade in animation for the canvas */
.background-beams-canvas {
    animation: fadeInBeams 1s ease-out;
}

@keyframes fadeInBeams {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.8;
    }
}