.page-top-space {
    height: 40px;
}

.page-hero-image-container {
    /* 1. Set the background image and size */
    background-size: cover; /* This makes the image cover the entire container */
    background-position: center; /* This centers the image within the container */
    /* background-image: var(--bg-mobile); */
    background-image: var(--bg-mobile-fallback);
    /* 2. Define dimensions and positioning context */
    height: 300px;  /*Set a specific height for the container */
    width: 100%;
    position: relative; /* This is crucial for positioning the text relative to this container */

    /* 3. Optional: Add an overlay to improve text readability */
    background-color: rgba(0, 0, 0, 0.3);  /* A semi-transparent black overlay */
    background-blend-mode: overlay;  /* Blends the color with the image */
}

@supports (background-image: var(--bg-mobile)) {
    .page-hero-image-container {
      background-image: var(--bg-mobile);
    }
  }

.page-hero-text-overlay-top {
    /* 4. Center the text within the container */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* This translates the element back by half its own width/height */

    /* 5. Style the text */
    color: white; /* Ensures the text is visible against a dark background */
    text-align: center;
    padding: 20px;
    margin:10px;
    width: 98%;  /* Optional: control the width of the text block */
}

.page-hero-text-overlay-top h1 {
    font-size: 48px;
    margin: 0;
}

.page-hero-text-overlay-bottom {
    /* font-size: 1.8em;     Sets the size like an H1 */
    font-weight: bold;   /* Makes it thick */
    color: white;         /* Sets the color */
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%); /* This translates the element back by half its own width/height */

    /* 5. Style the text */
    /* color: white; Ensures the text is visible against a dark background */
    text-align: center;
    padding: 15px;
    /* width: 90%; Optional: control the width of the text block */
}

.page-hero-text-overlay-bottom a,
.page-hero-text-overlay-bottom a:visited,
.page-hero-text-overlay-bottom a:hover,
.page-hero-text-overlay-bottom a:active,
.page-hero-text-overlay-bottom a:focus {
    font-size: 24px;
    text-decoration: none;
    color: white;
}

@media (min-width: 768px) {
  .page-hero-image-container {
    /* background-image: var(--bg-tablet); */
    background-image: var(--bg-tablet-fallback);
    height: 400px;
  }
  @supports (background-image: var(--bg-tablet)) {
    .page-hero-image-container {
      background-image: var(--bg-tablet);
    }
  }
}

@media (min-width: 875px) {
  .page-hero-image-container {
      background-image: var(--bg-desktop-fallback);
      height: 400px;
  }
  @supports (background-image: var(--bg-desktop)) {
    .page-hero-image-container {
      background-image: var(--bg-desktop);
    }
  }

  .page-hero-text-overlay-top h1 {
    font-size: 72px;
    margin: 0;
  }
  .page-hero-text-overlay-bottom a,
  .page-hero-text-overlay-bottom a:visited,
  .page-hero-text-overlay-bottoma:hover,
  .page-hero-text-overlay-bottoma:active,
  .page-hero-text-overlay-bottoma:focus {
    font-size: 24px;
  }
}