.page-hero-banner {
  position: relative;
  overflow: hidden;
  background-color: #eef2f7;
  background-image: var(--hero-banner-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

section.page-hero-banner,
header.page-hero-banner,
div.page-hero-banner {
  padding-top: 80px;
  padding-bottom: 80px;
}

.page-hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: opacity 220ms ease;
}

.page-hero-banner.hero-banner-ready::before {
  opacity: 1;
}

.page-hero-banner > .container,
.page-hero-banner .hero-container,
.page-hero-banner .hero-header,
.page-hero-banner .hero-content,
.page-hero-banner .gallery-header,
.page-hero-banner .contact-header {
  position: relative;
  z-index: 1;
}

.page-hero-banner.hero-banner-ready h1,
.page-hero-banner.hero-banner-ready .hero-title,
.page-hero-banner.hero-banner-ready .main-title,
.page-hero-banner.hero-banner-ready .gallery-title {
  color: #1f2937 !important;
  text-shadow: none;
}

.page-hero-banner.hero-banner-ready p,
.page-hero-banner.hero-banner-ready .hero-subtitle,
.page-hero-banner.hero-banner-ready .main-subtitle,
.page-hero-banner.hero-banner-ready .gallery-subtitle {
  color: #374151 !important;
  text-shadow: none;
}

@media (max-width: 768px) {
  section.page-hero-banner,
  header.page-hero-banner,
  div.page-hero-banner {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}