<style>
.c-hero-video-play--center {
    z-index: 10;
}
.c-hero {
  position: relative; /* Needed for positioning the pseudo-element */
  overflow: hidden;   /* Keep overlay contained */
}

.c-hero::before {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  left:40%;
  width:100%;
  background: url('https://www.lovetaupo.com/media/4fenc4pj/lt-logo-gradient-30percent-trans.png') no-repeat center;
    z-index: 1;
}
 .c-layout-wrapper  {
  position: relative;
  z-index: 3; /* Ensure text stays above the overlay */
}
/* Tablet (portrait/landscape up to 768px wide) */
@media (min-width: 481px) and (max-width: 768px) {
  .c-hero::before {
    width: 100%;
    background-position: center left;
    background-size: 160%;
    left: 9%;
    top: -22%;
  }
}

/* Mobile (phones up to 480px wide) */
@media (max-width: 480px) {
  .c-hero::before {
    left: 0;
    width: 100%;
    top: 0;
    background-position: center left;
    background-size: 160%; /* scale to fit smaller screens */
    left: 9%;
    top: -22%;
  }
}

.puna-background {
  position: absolute;
  inset: 0; /* fills the container */
  top: 29.1%;
  height: 70%;
  background: url('https://www.lovetaupo.com/media/v4pef2jf/dglt_puna-pattern_blue_rgb.png') no-repeat top right;
  background-attachment: fixed; /* keeps it "floating" */
  background-size: auto 150%;   /* scale vertically by default */
  pointer-events: none;         /* ensures it doesn’t block clicks */
  z-index: 0;                   /* stays behind content */
}

/* Tablet */
@media (min-width: 481px) and (max-width: 900px) {
  .puna-background {
    background-position: top right;
    background-size: auto 120%; /* a little larger */
    top: 10%;
    height: 75%;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .puna-background {
    background-position: top right;
    background-size: 60%; /* scale down so it doesn’t overwhelm */
    top: 17.5%;
    height: 90%;
  }
}

/* Make sure your content sits above it */
.c-layout-page {
  position: relative; /* establishes stacking context */
}

</style>

