What is wrong with my z-indexes? Why is the the navbar appearing below other elements when I scroll?

Question

For some reason, the navbar is displayed below other content and I'm not sure where I've messed up...
This applies to all other pages with the same navbar. Other content overlaps the navbar when scrolling. I'm not able to view the dropdown on .resources. I really can't find where the issue is as the same navbar has worked on other sites.

    scroll-behavior: smooth;
    height: 100%;
}



body {
    overflow-x: hidden;
    position: relative;
    display: flex;
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
    height: 100%;
}

a {
    text-decoration: none;
    margin: 0;
}
ul {
    padding: 0;
    margin: 0;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Bebas Neue', sans-serif;
    height: max-content;
    position: sticky;

}

.navbar-nav {
    display: flex;
    list-style: none;
    height: max-content;
    width: max-content;
    padding: 0;
}

.cta-nav {
    position: absolute;
    right: 0;
    display: flex;
    list-style: none;
    height: max-content;
    width: max-content;
    padding: 0;
    margin-right: 2em;
}

.cta-item:first-child {
    padding-left: 1.5rem;
}

.cta-item {
    background-color: #557571;
    margin-top: 1em;
    scroll-behavior: smooth;
}

.cta-item:not(:last-child) {
    padding-right: 1.5rem;
}

.cta-opts {
    padding: 6px 0;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    font-size: 1.6rem;
    transition: all 0.5s ease-in-out;
    position: relative;
    color: white;
}


.main-nav {
    transition: all 0.5s;
    position: fixed;
    margin: auto;
    height: 100px;
    margin-top: 10vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}

.main-nav-scroll {
    transition: all 0.5s;
    opacity: 0;
}

.main-nav-scroll:hover {
    opacity: 1;
    background-color: #EEEEEE;
}

.nav-item:first-child {
    padding-left: 3rem;
}

.nav-item:last-child {
    padding-right: 1rem;
}

.nav-item {
    margin-top: 1em;
    scroll-behavior: smooth;
}

.nav-item:not(:last-child) {
    padding-right: 1rem;
}

.nav-opts {
    position: fixed;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    font-size: 2rem;
    transition: all 0.5s ease-in-out;
    position: relative;
    color: #557571;
}

.nav-opts:hover {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: white;

    background: linear-gradient(90deg, #fff 0%, #fff 50%, #557571 50%, #557571 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
}

.drop-item {
    margin: 0;
    left: 0;
    text-align: left;
    display: block;
    width: 148px;
    font-size: 1.5rem;
    padding: 7.5px 0px;
    padding-left: 15px;
    background-color: #EEEEEE;
    margin-bottom: 3px;
}



.drop-item a {
    color: #D49A89;
}

.drop-item:hover {
    background-color: #557571;
}


.dropdown {
    width: 100%;
    position: fixed;
    display: none;
}

ul li:hover ul.dropdown {
    display: block;
}
ul li {
    position: relative; /* Ensure parent is positioned */
}
header {
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.main-nav img {
    margin-top: 12.5px;
    margin-left: 30px;
    position: absolute;
    left: 0;
    width: 110px;
}

.hero {
    height: 90vh;
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.hero-bg {
    object-fit: cover;
    width: 100%;
    height: 600px;
    position: absolute;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.hero-title {
    width: 370px;
}

.hero a {
    display: inline-block;
    width: 80px;
    margin: auto;
    margin-top: 40px;
    padding: 7.5px 30px;
    background-color: #557571;
    color: white;
    text-decoration: none;
    font-size: 30px;
    font-family: 'Bebas Neue', sans-serif;
    transition: all 0.3s ease;
}

.hero a:hover {
    background-color: white;
    color: #557571;
}

.container {
    width: 100%;
}

.about {
    margin-top: 200px;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    font-family: "Libre Baskerville", serif;
    margin-bottom: 100px;
}

.about h2 {
    color: #394240;
    font-size: 2.75rem;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.about p {
    letter-spacing: -1px;
    color: #557571;
    margin: auto;
    width: 900px;
    font-size: 1.2rem;
    margin-bottom: 50px;
}

.hg {
    color: #D49A89;
}

.stats {
    margin: auto;
    display: flex;
    flex-direction: row;
    width: 75%;
}



.line {
    height: 70px;
    margin-bottom: 50px;
}

.vision {
    margin-top: 150px;
    text-align: left;
}

.vision h3 {
    margin-left: 225px;
    font-size: 1.5rem;
    color: #394240;
}

.vision p {
    font-size: 1.25rem;
    margin-left: 225px;
    width: 900px;
}

.teach {
    margin-top: 75px;
    text-align: right;
}

.teach h3 {
    margin-right: 225px;
    font-size: 1.5rem;
    color: #394240;
}

.teach p {
    font-size: 1.25rem;
    margin-right: 225px;
    width: 900px;
}

.partners {
    margin-top: 200px;
}

.partners h2 {
    margin-bottom: 40px;
}

.partners img {
    width: 85%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-wi
    dth, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
        rel="stylesheet">
    <link
        href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
        rel="stylesheet">

    <title>Meraki</title>
</head>

<body>
    <header>
        <nav>
            <div class="main-nav" id="navbar">
                <img src="images/logo.png" alt="Logo">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="index.html" class="nav-opts">HOME</a></li>

                    <li class="nav-item"><a href="#about" class="nav-opts">ABOUT</a></li>

                    <li class="nav-item"><a href="#contact" class="nav-opts">CONTACT</a></li>

                    <li class="nav-item">
                        <a href="#resources" class="nav-opts">RESOURCES ▾</a>
                        <ul class="dropdown">
                            <li class="drop-item"><a href="">Events</a></li>
                            <li class="drop-item"><a href="">Gallery</a></li>
                            <li class="drop-item"><a href="">Newsletter</a></li>
                            <li class="drop-item"><a href="blog.html">Blog</a></li>
                        </ul>
                    </li>

                    <li class="nav-item"></li>
                </ul>
                <ul class="cta-nav">
                    <li class="cta-item"><a href="#join" class="cta-opts">JOIN</a></li>

                    <li class="cta-item"><a href="#donate" class="cta-opts">DONATE</a></li>

                    <li class="cta-item"><a href="#partner" class="cta-opts">PARTNER</a></li>

                    <li class="cta-item"></li>
                </ul>
            </div>
        </nav>
    </header>
    <main>
        <div class="container">
            <div class="hero">
                <img class="hero-bg" src="images/hero-bg.png" alt="Bg">
                <div class="hero-content">
                    <img class="hero-title" src="images/hero-title.png" alt="Meraki">
                    <a href="#">Join Us</a>
                </div>
            </div>
            <div class="about">
                <img class="line" src="images/line.png" alt="">
                <h2>About Us</h2>
                <p> <span class="hg">Meraki</span> is an organization that aims to improve education by promoting the
                    importance of arts in academics
                    for
                    a more wholesome learning. We do this by teaching students different arts.</p>
                <img class="stats" src="images/stats.png" alt="">

                <div class="info">
                    <div class="vision">
                        <h3>Our Vision</h3>
                        <p>Meraki wants to see students from all different age groups and backgrounds discover their own
                            talents, passions and hobbies. <span class="hg">Every student should have the opportunity to
                                learn whatever
                                subject they wish to.</span></p>
                    </div>
                    <div class="teach">
                        <h3>What Do We Teach?</h3>
                        <p>Meraki empowers students through the arts, offering vibrant lessons <span class="hg">in
                                music, dance, and art.</span> Our
                            goal is to cultivate a love for creativity, providing a space where each student can
                            discover
                            and express their unique artistic flair.</p>
                    </div>
                </div>

                <div class="partners">
                    <h2>Our Partners</h2>
                    <img class="partners-img" src="images/partners.png" alt="Partners">
                </div>
            </div>
        </div>
    </main>
    <script>
        var prevScrollpos = window.pageYOffset;
        window.onscroll = function () {
            var currentScrollPos = window.pageYOffset;
            var navbar = document.getElementById("navbar");

            if (prevScrollpos > 200) {
                navbar.classList.add("main-nav-scroll");
            } else {
                navbar.classList.remove("main-nav-scroll");
            }

            prevScrollpos = currentScrollPos;
        }

    </script>
</body>

</html>

I tried setting the z-index of main-nav to 999 but it still doesn't work. I cant set the z-index of other content to -1 as their hover animations then don't work.