Stacking/z-index issue
Hey, i'm having a little trouble getting my z-index stacking to work correctly. In this design i'm trying to recreate i'm given two separate images, a 
.
Here's an image of the design i'm trying to replicate and my codepen if that helps
(i've taken out all of the code not relevant to the problem so some things may look a little out of place or inconsistent in the css as i've only included what is used within my navbar and hero section to avoid confusion for ya'll. This currently only works on mobile view). I'd really appreciate anyone's help whether that be suggesting a new method or tweaking the current one! Many thanks in advance!
https://codepen.io/deerCabin/pen/GRPZLBy
background image and a main image. The way I've chosen to approach this has stopped interactivity with my cta as i put a negative z-index on my hero section to match the design as best i could which i have figured out is the source of the issue. I'm just not too sure on the best way to approach the stacking layout for it as this issue has proven my method isn't efficient nor effective .Here's an image of the design i'm trying to replicate and my codepen if that helps
(i've taken out all of the code not relevant to the problem so some things may look a little out of place or inconsistent in the css as i've only included what is used within my navbar and hero section to avoid confusion for ya'll. This currently only works on mobile view). I'd really appreciate anyone's help whether that be suggesting a new method or tweaking the current one! Many thanks in advance!https://codepen.io/deerCabin/pen/GRPZLBy
