Problemas con ventana Pop-up

Hola, me gustaría poder contar con su gran ayuda para poder solucionar un grave problema en mi sitio web, les explico, añadí un módulo Código con el constructor DIVI debajo del botón DESCARGAR RESUME que se encuentra abajo de todo el contenido de mi presentación inicial, si hacen clic en el botón, aparece un notificación con efecto Pop-up, el problema es que al bajar, en la página con esta pequeña ventana activa, pasa todo el contenido de la página por encima de esa ventana, se ve muy mal. En el código añadí z-index: 999999 !important pero sigue el error, comparto el código completo para que puedan ver que todo fue implementado correctamente:

<link href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400&family=Poppins:wght@600;700&display=swap" rel="stylesheet">

<div id="resumeModal" class="resume-modal-overlay" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="resume-modal-box">
    <span class="resume-close" title="Cerrar">×</span>
    
    <header class="resume-header">
      <h2 id="modalTitle" class="resume-title">Selecciona tu idioma</h2>
      <p class="resume-subtitle">Select your language</p>
    </header>
    
    <nav class="resume-buttons-container" aria-label="Resume download options">
      <a href="https://leonardowebdesign.com/wp-content/uploads/2026/02/Resume-Spanish.pdf" target="_blank" class="resume-btn es-btn" rel="noopener noreferrer">
        Versión en Español
      </a>
      
      <a href="https://leonardowebdesign.com/wp-content/uploads/2026/02/Resume-English.pdf" target="_blank" class="resume-btn en-btn" rel="noopener noreferrer">
        English Version
      </a>
    </nav>
  </div>
</div>

<style>
/* VARIABLES Y RESET */
:root {
    --color-title: #191919;
    --color-text: #353740;
    --color-es: #191919;
    --color-en: #fcd21d;
    --font-title: 'Poppins', sans-serif;
    --font-body: 'Karla', sans-serif;
}

/* OVERLAY CON BLUR */
.resume-modal-overlay {
    display: none;
    position: fixed;
    z-index: 999999 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 25, 25, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* CAJA DEL MODAL */
.resume-modal-box {
    background-color: #ffffff;
    margin: 12% auto;
    padding: 50px 40px;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    text-align: center;
  	z-index: 100000000 !important;
}

/* TÍTULOS Y SUBTÍTULOS */
.resume-title {
    font-family: var(--font-title) !important;
    font-weight: 700 !important;
    color: var(--color-title) !important;
    font-size: 26px !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.2 !important;
}

.resume-subtitle {
    font-family: var(--font-body) !important;
    font-weight: 300 !important;
    color: var(--color-text) !important;
    font-size: 18px !important;
    margin: 0 0 30px 0 !important;
}

/* BOTONES */
.resume-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.resume-btn {
    font-family: var(--font-title) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    padding: 16px 25px !important;
    border-radius: 4px !important; /* Solicitado: 4px */
    transition: all 0.3s ease !important;
    display: block !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ESTILOS ESPECÍFICOS DE BOTONES */
.es-btn {
    background-color: var(--color-es) !important;
    color: #ffffff !important;
}

.en-btn {
    background-color: var(--color-en) !important;
    color: #ffffff !important;
}

.resume-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    opacity: 0.9;
}

/* CERRAR */
.resume-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.resume-close:hover { color: var(--color-title); }

/* ANIMACIÓN */
@keyframes resumeFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.resume-modal-box { animation: resumeFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }

/* RESPONSIVE */
@media (max-width: 480px) {
    .resume-modal-box { padding: 40px 25px; margin: 30% auto; }
    .resume-title { font-size: 22px !important; }
}
</style>

<script>
(function() {
    function initResumeModal() {
        var modal = document.getElementById("resumeModal");
        var btn = document.querySelector(".trigger-resume-modal");
        var closeSpan = document.querySelector(".resume-close");

        if (btn) {
            btn.addEventListener("click", function(e) {
                e.preventDefault();
                modal.style.display = "block";
                modal.setAttribute("aria-hidden", "false");
            });
        }

        if (closeSpan) {
            closeSpan.addEventListener("click", function() {
                modal.style.display = "none";
                modal.setAttribute("aria-hidden", "true");
            });
        }

        window.addEventListener("click", function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
                modal.setAttribute("aria-hidden", "true");
            }
        });
    }

    /* Carga diferida */
    if (document.readyState === "complete" || document.readyState === "interactive") {
        initResumeModal();
    } else {
        document.addEventListener("DOMContentLoaded", initResumeModal);
    }
})();
</script>

Espero puedan ayudarme a resolver este grave problema y que la pequeña ventana sea la prioridad y no se muestre nada por encima de ella.

Gracias.