Overlay maybe conflicting with link on MOBILE only

This pertains mainly to mobile so please inspect on mobile phone simulator

I have an overlay menu https://pitchlab.net/lowdown/index_test_overlay.html

and a container with a few paragraphs with text and a link-

the link only appears clickable if the z-index of the container is higher than the overlay.

But then the text shows over the overlay, when the menu overlay is toggled (click on upper left menu)

.lowdown_flex_container {

z-index:500;

.mainNavLinksWrapper {
z-index: 499;

same issue here

https://pitchlab.net/index_test_overlay.html

the EXPLORE link works only if the z-index of "fade-in" is higher than the overlay but shows up over the overlay once toggled..

I think making the overlay invisible and visible on toggle would work..

I tried adjusting my current css and javascript:

and

const menu_container = document.querySelector('.hamburger');

menu_container.onclick = function() {
const overlayWrapper = document.querySelector('.overlayWrapper');
overlayWrapper.classList.toggle('overlayWrapperSlideDown');

const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');
mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');
}

to

.mainNavLinksWrapper {
display: grid;
place-items: center;
position: fixed;
top: 0;
width: 100%;
height: 100%;
transform: translateY(100%);
transition: transform 800ms ease-in-out, opacity 400ms ease-in-out;
z-index: 499;
opacity: 0;
visibility: hidden;
}

.mainNavLinksWrapperSlideUp {
transform: translateY(0) !important;
opacity: 1;
visibility: visible !important;
}

and

const menu_container = document.querySelector('.hamburger');

menu_container.onclick = function () {
const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');

// Toggle the slide-up class
mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');

// Check if the menu is currently visible and hide it after the transition
if (mainNavLinksWrapper.classList.contains('mainNavLinksWrapperSlideUp')) {
mainNavLinksWrapper.style.visibility = 'visible'; // Show the menu
mainNavLinksWrapper.style.opacity = '1';
} else {
mainNavLinksWrapper.style.opacity = '0';
setTimeout(() => {
mainNavLinksWrapper.style.visibility = 'hidden'; // Hide after transition
}, 800); // Wait for transition to complete
}
};

but that didnt work.. what am i getting wrong?