I have a navigation bar with a box shadow. My navigation bar is visible on every page of my website. However, on my Home page, I have a hero section overflowing the Navigation bar. I want the box shadow to disappear there.

Navigation bar on the home page

Navigation bar everywhere else

I tried to give a higher z-index to the content of the Navigation bar but it did not work. If someone could help me out I would be very grateful.

Part of the code for my navigation bar:

header {
    background-color: transparent;
    padding: 0 25px;
    z-index: 1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);


    .link {
        font-weight: 500;
        font-size: 14px;
        padding: 0 2px;
        transition: 0.3s color ease;
        z-index: 110;
        &:hover {
            color: #1eb8b8;
        }
    }
}

Part of the code for my hero section:

.hero-section {
  z-index: 100;
  display: flex;
  justify-content: center;
  background-image: url(../assets/hero.jpg);
  margin-top: -145px;
  height: 115vh;
  width: 100%; 
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  align-items: center;
}

Thank you very much in advance!

Edit: The hero section and the navigation bar are in 2 different files This is the HTML part of the code for the Navigation bar:

<header>
    <nav class="container">
        <div class="nav-links">
            <ul v-show="!mobile">
                <router-link class="link" :to="{name: 'Home'}">Home</router-link>
                <router-link class="link" :to="{name: 'Prints'}">Prints</router-link>
                <router-link class="link" :to="{name: 'Blogs'}">Blogs</router-link>

The links are below the header section so I think that is why the z-index method is not working

For the hero section:

<div class="home">
    <div class="hero-section">
      <h2>Welcome to my website!</h2>
    </div>