the z-index does work on mobile for the header cta text but works on desktop?

Question

The header cta works on desktop, when I switch to mobile nothing happens

I tried increasing z-index number inside the html instead in the style sheet

This is the html where I have the CTA: CALL TO ACTION which is wrapped inside three span:

.banner::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #333;
  background-image: linear-gradient(to right, #0052d4, #4364f4), #6fb1fc;
  position: absolute;
  top: 12%;
  left: 8;
  opacity: .7;
  z-index: 8;
}

@supports(mix-blend-mode: hand-light) {
  .banner::after {
    opacity: 1;
  }
}

.banner>* {
  z-index: 10;
  position: relative;
}

<div class="hero-wrap js-fullheight">
  <div class="container-fluid px-0 banner-z">

    <div class="row d-md-flex no-gutters slider-text align-items-center js-fullheight justify-content-end banner banner-z">

      <img class="one-third js-fullheight align-self-end order-md-last img-fluid" src="images/1.png" alt=" Get Your Business Online">

      <div class="one-forth d-flex align-items-center ftco-animate js-fullheight">
        <div class="text mt-5">
          <span class="subheading"></span>
          <h1 class="mb-3">
            <span>LOVE,</span>
            <span>CODE, </span>
            <span>SLEEP</span>
          </h1>
          <p style="color:  #f9d53e ;">
            <b>offer affordable set of services to our clients.</b>
          </p>
          <p>
            <a href="contact.html" class="btn btn-primary px-4 py-3">Get in touch</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

add z-index for .hero-wrap .slider-text .one-forth

.hero-wrap .slider-text .one-forth{
   z-index:9;
}