/* Make parallax container adapt to content height */
.parallax-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* We'll set the height using padding-bottom based on aspect ratio */
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio - adjust based on your image ratio */
    z-index: 1; /* Ensure banner is above background */
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Fill container height */
    object-fit: cover; /* Ensure image covers the entire container */
    display: block;
    will-change: transform; /* Performance optimization for animations */
}

/* All layers should be absolute for parallax to work */
.gradient {
  position: absolute;
  top: 65%;           /* Position at 50% of the banner's height */
  left: 0;
  width: 100%;        /* Scale with the banner's width */
  height: auto;       /* Height adjusts proportionately */
  z-index: 5;
}

.layer1 {
    position: absolute;
    z-index: 4; /* Keep on top */
}
.layer2 { 
    position: absolute;
    z-index: 3; 
} 
.layer3 { 
    position: absolute;
    z-index: 1; 
}

.rocket {
    visibility: hidden;
    position: absolute;
    width: 7% !important;            /* 10% of banner width */
    height: auto;          /* Square ratio */
    top: 67%;              /* Center vertically */
    left: 57%;             /* 75% from left */
    transform: translate(-50%, -50%); /* Center the rocket properly */
    z-index: 2;          /* Stack between layers as needed */
}

/* Make sure the images are visible */
.parallax-banner img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateZ(0); /* Force hardware acceleration */
}

/* Force hardware acceleration for smoother animations */
.parallax-banner {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}


/* When hero-content should appear below the banner */
.hero-content {
  width: 90%; /* Slightly less than full width for better reading */
  max-width: 1200px;
  text-align: center;
  margin: 0 auto; /* new: center the entire block horizontally */
  z-index: 5;
  position: relative;
  margin-top: -100px; /* adjust as needed */
  color: #fff;
}

.hero-content h1 {
    font-family: "Livvic Medium", "Times New Roman", Georgia, Serif;
    font-size: 18px;

  font-size: 2.5rem;
  margin: 0;
}

.hero-content h2 {
    font-family: "Livvic Medium", "Times New Roman", Georgia, Serif;
    font-size: 12px;
  font-size: 1.5rem;
  margin: 0.5em 0;
}

/* New styles for mobile hero banner */
.hero-banner-mobile {
    display: none;
    width: 100%;
}

/* New: Ensure mobile hero banner image scales correctly */
.hero-banner-mobile img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .hero-banner-desktop {
        display: none;
    }
    .hero-banner-mobile {
        display: block;
    }
}