.header-container {
  background-image: url("../img/splashpage-image.avif");
  background-size: cover;
  background-position: center center;
  height: calc(100vh);
  margin-top: 50px;
}

.header-content {
  text-align: center;
}

.header-logo {
  margin-bottom: 20px;
}

header {
  position: relative;
}

#header {
  scroll-margin-top: 51px; /* Offset to account for the fixed navbar */
}

header .header-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 40vw;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: left;
  gap: 5rem;
  background: rgba(198, 229, 211, 0.6);
  padding: 0 2rem;
  /* color: black; */
}

.intro-heading {
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Dark shadow behind the text */
}

.intro-lead-in {
  margin-top: 60px;
  font-size: 30px;
  color: black;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8); /* Soft white shadow */
}

header div.header-logo {
  text-align: center;
  max-width: 20%;
  margin: 10px auto;
}

@media (max-width: 768px) {
  header .header-content {
    width: 100vw;
    text-align: center;
  }
  /* .intro-heading {
    margin-top: -100px;
  } */

  .intro-lead-in {
    margin-top: 200px;
  }
}

@media (min-width: 768px) {
  header .intro-text {
    padding-top: 200px; /*300px*/
    padding-bottom: 100px; /*200px*/
  }

  header .intro-text .intro-lead-in {
    margin-bottom: 50px;
    font-size: 40px;
    font-style: italic;
    line-height: 40px;
  }

  header .intro-text h1.intro-heading {
    margin-bottom: 50px;
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 700;
    line-height: 50px;
  }
}

@media (max-width: 767px) {
  header .intro-text {
    padding-top: 150px; /*300px*/
  }
  header .intro-text h1.intro-heading {
    line-height: 30px;
  }
  header div.header-logo {
    max-width: 30%;
  }

  .header-container {
    background-image: url("../img/splashpage-image-mobile.avif");
  }
}

@media (max-width: 480px) {
}