/* Make banner taller */
.quarto-title-block .quarto-title-block-banner {
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  border-bottom: none;
  position: relative;
  overflow: visible;
}

.quarto-title-banner.page-columns.page-full {
    height: 500px;
    padding-top: 250px;
    background-position: center center !important;
}

.quarto-title-block .quarto-title-block-banner {
  background-color: #5e9effff;
  background-image: linear-gradient(
      rgba(0,0,0,0.15),
      rgba(0,0,0,0.15)
    )
}


/* Title + subtitle styles */
.quarto-title h1.title {
  font-size: 2.8rem;
  font-weight: 700;
  color: white; /* or your brand color */
  max-width: 50%;

  text-shadow:
    0px 2px 4px rgba(0, 0, 0, 0.45),
    0px 4px 8px rgba(0, 0, 0, 0.25);

}

.quarto-title .subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  color: white;
  max-width: 50%;


  text-shadow:
    0px 2px 4px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
  .quarto-title-banner.page-columns.page-full {
    height: 280px;
    padding-top: 120px;
  }

  .quarto-title h1.title {
    max-width: 90%;
    font-size: 1.8rem;
  }

  .quarto-title .subtitle {
    max-width: 90%;
    font-size: 1.1rem;
  }

}