Z-index not working on navbar but works on hero

Question

I have a website in nuxt where I have an SVG animated on the background. I add z index to the animation to work on the background. On the hero, it works as wanted but the navbar is still on top. I assigned z-index:-1 to the animation and zero to hero and nav -2 but no effect on the latter. The navbar is a component.

Navbar code

<div class="header-container">
<header class="the-header">
  <TheSideNavToggle @toggle="$emit('sidenavToggle')" />
  <div class="logo">
    <nuxt-link to="/">
      <img width="500px" src="~/assets/logo/logo_1.svg" />
      <!-- <img width="150px" src="~/assets/Svg/gs.svg" /> -->
    </nuxt-link>
  </div>
  <div class="spacer"></div>
  <div class="navigation-items">
    <ul class="nav-list">
      <li class="nav-item">
        <nuxt-link to="/services">Services</nuxt-link>
      </li>
      <li class="nav-item"><nuxt-link to="/about">Abouts</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/contact">Contact</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/blog">Blog</nuxt-link></li>
    </ul>
  </div>
  <nuxt-link to="/"
    ><img width="150px" src="~/assets/logo/logo_1.svg" class="right-logo"
  /></nuxt-link>
</header>

Style

    .header-container {
  height: 100px;
  background: rgb(9, 82, 86);
  background: linear-gradient(
    90deg,
    rgba(9, 82, 86, 1) 0%,
    rgba(90, 170, 149, 1) 100%
  );
  position: relative;
  z-index: -2;
}


.the-header {
  width: 100%;
  position: fixed;
  height: 100px;
  display: flex;
  z-index: -2;
  align-items: center;
  justify-content: space-around;
  /* align-items: center; */
  background: rgb(9, 82, 86);
  background: linear-gradient(
    90deg,
    rgba(9, 82, 86, 1) 0%,
    rgba(90, 170, 149, 1) 100%
  );

Hero

<div>
    <section class="home__page">
      <svg class="blobCont">
 <h1>Main Title</h1>
      <p class="tagline_description">
       Tagline
      </p>
      <button class="calendly">
        <a> Book a meeting</a>
      </button>
    </section>

Style

.home__page {
  display: flex;
  z-index: 1;
  position: relative;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  height: 70vh;
  width: 100%;
  background: rgb(9, 82, 86);
  background: linear-gradient(
    90deg,
    rgba(9, 82, 86, 1) 0%,
    rgba(90, 170, 149, 1) 100%
  );

 .blobCont {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
}

What I can be missing here? Thank you