z-index not working on element with smoothscrolling , gSAP

const select = e => document.querySelector(e);
const selectAll = e => document.querySelectorAll(e);

const panels = selectAll(".panel")

function startAnim() {
  
  panels.forEach((panel, i) => {
    let imageWrappers = panel.querySelectorAll(".col__image-wrap")
    console.log(imageWrappers)
    
    gsap.fromTo(imageWrappers, {
      y: "-30vh"
    }, {
      y: "30vh",
      scrollTrigger: {
        trigger: panel,
        scrub: true,
        start: "top bottom", // position of trigger meets the scroller position
      },
      ease: 'none'
    })
  })
}

function init() {
  startAnim();
}

window.onload = () => init()



const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.log(e)
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

.enquire-btn{ background-color: #222; color: #fff; min-width:150px; 
  padding:10px 25px; border-radius: 100px; text-decoration: none; 
  font-weight: normal; font-size: 14px;
  position: -webkit-sticky;
  position: sticky;
  position:fixed;
  z-index:99999999999999999999; 
}
body{background:#fff;}
.header{hight:60px; min-height:60px; background:#fff; ;
}
.h-line{height:1px; background:#000; margin-top:15px; }
.hero-section{margin-top:200px; z-index:20;}
.hs {
  text-transform: uppercase;
  font-family:Overusedgrotesk,sans-serif;
  color:#222;
  font-weight:200;
 letter-spacing: -5px;
font-size: clamp(2.1875rem, 0.9037rem + 5.4054vw, 9.6875rem);
}
.hs:first-child {font-weight:600; padding-right:10px;}


*, .panel, .project {
  padding: 0;
  margin: 0;
}

/* Full width section */
.panel {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 90vh;
  overflow: hidden;
  margin-top: 0vh;
  margin-bottom:0vh;
/*     background-color: red; */
}

/* In charge of setting the height/width/area */
.column {
  flex-basis:100%;
  position: relative;
  overflow: hidden;
}

/* Extra height for the parallax effect */
.col__image-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 160vh;
    background-color: red;
}

/* make sure it covers the total space */
.img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.intro-section{min-height:300px; background:grey; padding:30px 0px;}
.intro-section .section-heading {
  position:relative; withd:100%; padding:30px; 
  color:#fff; font-size:18px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.3/cerulean/bootstrap.min.css" rel="stylesheet"/>

<header class="container-fluid text-center header animate__animated animate__fadeIn animate__delay-800ms">
  <div class="row justify-content-evenly vertical-align p-3 ">
    <div class="col-4 align-middle">AHRE</div>
    <div class="col-4 ms-auto">      <a class="enquire-btn animate__animated animate__fadeInUp animate__slower">CONTACT US</a></div>
</div>
    <div class="h-line animate__animated animate__slideInLeft animate__delay-900ms"></div>
  </div>
</header>
<section class="container-fluid hero-section">
  <span class="hs animate__animated animate__fadeInUp animate__delay-1s">The Residences</span>
</section>
<section class="container-fluid section2 p-0">
   <div class="panel panel--1">
    <div class="column">
      <div class="col__image-wrap">
      <img class="img img--1" src="https://assets-global.website-files.com/6594c68e852eed392813f26c/65968d19211871302df255cc_home-img-07.webp" />
    </div>
    </div>
  </div>
 
 
</section>
<section class="intro-section">
  <div> <span class="section-heading">Introduction</span></div>
</section>

<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>