/* #region "../src/elements/hero/hero.scss" */
/*
- type: css
*/
.hero-section {
  --hero-margin: 0px;
  --hero-height: min(clamp(18.75rem, 16.6373rem + 9.38967vw, 25rem), 100vh - var(--admin-bar-height)  - var(--header-max-height)  - 2rem);
  --hero-element-aspect-ratio: calc(var(--100vw) / var(--hero-height));
  --content-alignment: flex-end;
  padding: var(--hero-margin, 0px);
  min-height: var(--hero-height, 0);
  display: grid;
  position: relative;
}

.hero-section .hero-media-overlay {
  background-image: linear-gradient(to top, #00000080, #0000 250px);
}

.hero-section.hero-size-large {
  --hero-height: min(clamp(28.125rem, 24.6391rem + 15.493vw, 38.4375rem), var(--100svh)  - var(--admin-bar-height)  - var(--header-max-height));
}

.hero-section .hero-media {
  align-items: var(--content-alignment);
  grid-template: "content" 1fr
  / 1fr;
  display: grid;
}

.hero-section .hero-media > * {
  grid-area: 1 / 1 / -1 / -1;
}

.hero-section .hero-media .hero-preview-wrapper {
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  height: 100%;
  transition-property: opacity;
  transition-duration: 0s;
  overflow: hidden;
}

.hero-section .hero-media .hero-preview-wrapper.loading {
  opacity: 1;
}

.hero-section .hero-media .hero-preview-wrapper[data-loading-speed="slow"] {
  transition-duration: 2s;
}

.hero-section .hero-media .hero-preview-wrapper[data-loading-speed="medium"] {
  transition-duration: .65s;
}

.hero-section .hero-media .hero-preview-wrapper[data-loading-speed="fast"] {
  transition-duration: .25s;
}

.hero-section .hero-media .hero-preview-wrapper:is(body.no-js *) {
  display: none;
}

.hero-section .hero-media .hero-preview-wrapper .hero-preview {
  --blur: 30px;
  height: calc(100% + 4 * var(--blur));
  background-image: var(--hero-image-preview);
  background-size: cover;
  background-position: var(--hero-image-position);
  filter: blur(var(--blur));
  margin: calc(-2 * var(--blur));
}

.hero-section .hero-logo-overlay-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-section .hero-logo-overlay-mask {
  pointer-events: none;
  position: absolute;
}

.hero-section .hero-logo-overlay {
  z-index: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  width: var(--width);
  clip-path: var(--url);
  aspect-ratio: var(--aspect-ratio);
  position: absolute;
}

.hero-section .hero-logo-overlay.hero-logo-overlay-1 {
  background-color: rgb(var(--primary-300-rgb) / 20%);
  max-width: min(60%, 420px);
  height: auto;
  top: -20%;
  left: 0;
}

.hero-section .hero-logo-overlay.hero-logo-overlay-2 {
  background-color: rgb(var(--secondary-900-rgb) / 60%);
  max-width: min(90%, 700px);
  height: auto;
  max-height: 190%;
  bottom: -70%;
  right: 0%;
}

.hero-section .hero-logo-overlay.hero-logo-overlay-2:is(.hero-size-large *) {
  bottom: -30%;
  right: -5%;
}

.hero-section .hero-media-overlay {
  z-index: 1;
  align-self: stretch;
}

.hero-section .hero-content-wrapper {
  z-index: 1;
  width: var(--container-width, auto);
  padding-inline: var(--container-padding, 0);
  --hero-content-padding-top: clamp(1rem, .0704225rem + 4.13146vw, 3.75rem);
  --hero-content-padding-bottom: clamp(1rem, .0704225rem + 4.13146vw, 3.75rem);
  padding-top: var(--hero-content-padding-top, 0);
  padding-bottom: calc(var(--hero-content-padding-bottom, 0px)  + var(--additional-hero-content-padding-bottom, 0px));
  grid-area: content;
  margin-left: auto;
  margin-right: auto;
}

.hero-section .hero-content {
  max-width: none;
}

.hero-section .hero-content :has( > .headline-bg-wrapper-ghost) {
  position: relative;
}

.hero-section .hero-content .headline-bg-wrapper, .hero-section .hero-content .headline-bg-wrapper-ghost:before {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: clamp(.75rem, .538732rem + .938967vw, 1.375rem) clamp(.75rem, .327465rem + 1.87793vw, 2rem);
}

.hero-section .hero-content .headline-bg-wrapper-ghost {
  position: absolute;
  inset: 0;
}

.hero-section .hero-content .hero-subtitle {
  margin-top: 1.85rem;
  font-size: clamp(1.0625rem, .956866rem + .469484vw, 1.375rem);
}

@media (min-width: 768px) {
  .hero-section .hero-content .hero-subtitle {
    margin-top: -.65rem;
  }
}

.hero-section .hero-content .headline-bg-wrapper-ghost:before {
  content: attr(data-content);
  filter: url(#goo);
  background-color: var(--white);
  color: #0000;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.hero-section .hero-content .headline-bg-wrapper {
  z-index: 1;
  color: var(--text-color);
  position: relative;
}

.hero-section .hero-content > :first-child {
  margin-top: 0;
}

.hero-section .hero-content > :last-child {
  margin-bottom: 0;
}

.hero-section .hero-content .box-card {
  max-width: 500px;
}

.hero-section .hero-scroll-indicator-wrapper {
  display: none;
}

.hero-section.hero-is-image {
  --background-image: var(--hero-image-full);
}

@media (max-width: 1899px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-3xl, var(--hero-image-full));
  }
}

@media (max-width: 1899px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1899px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-3xl-2x, var(--hero-image-full));
  }
}

@media (max-width: 1599px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-2xl, var(--hero-image-full));
  }
}

@media (max-width: 1599px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1599px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-2xl-2x, var(--hero-image-full));
  }
}

@media (max-width: 1399px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-xl, var(--hero-image-full));
  }
}

@media (max-width: 1399px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1399px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-xl-2x, var(--hero-image-full));
  }
}

@media (max-width: 1199px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-lg, var(--hero-image-full));
  }
}

@media (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1199px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-lg-2x, var(--hero-image-full));
  }
}

@media (max-width: 991px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-md, var(--hero-image-full));
  }
}

@media (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 991px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-md-2x, var(--hero-image-full));
  }
}

@media (max-width: 767px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-sm, var(--hero-image-full));
  }
}

@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-sm-2x, var(--hero-image-full));
  }
}

@media (max-width: 539px) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-s, var(--hero-image-full));
  }
}

@media (max-width: 539px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 539px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image:not(.hero-size-large) {
    --background-image: var(--hero-image-until-s-2x, var(--hero-image-full));
  }
}

@media (max-width: 1899px) and (max-height: 1068px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-3xl, var(--hero-image-full));
  }
}

@media (max-width: 1899px) and (max-height: 1068px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1899px) and (max-height: 1068px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-3xl-2x, var(--hero-image-full));
  }
}

@media (max-width: 1599px) and (max-height: 899px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-2xl, var(--hero-image-full));
  }
}

@media (max-width: 1599px) and (max-height: 899px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1599px) and (max-height: 899px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-2xl-2x, var(--hero-image-full));
  }
}

@media (max-width: 1399px) and (max-height: 786px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-xl, var(--hero-image-full));
  }
}

@media (max-width: 1399px) and (max-height: 786px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1399px) and (max-height: 786px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-xl-2x, var(--hero-image-full));
  }
}

@media (max-width: 1199px) and (max-height: 674px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-lg, var(--hero-image-full));
  }
}

@media (max-width: 1199px) and (max-height: 674px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1199px) and (max-height: 674px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-lg-2x, var(--hero-image-full));
  }
}

@media (max-width: 991px) and (max-height: 557px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-md, var(--hero-image-full));
  }
}

@media (max-width: 991px) and (max-height: 557px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 991px) and (max-height: 557px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-md-2x, var(--hero-image-full));
  }
}

@media (max-width: 767px) and (max-height: 431px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-sm, var(--hero-image-full));
  }
}

@media (max-width: 767px) and (max-height: 431px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (max-height: 431px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-sm-2x, var(--hero-image-full));
  }
}

@media (max-width: 539px) and (max-height: 303px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-s, var(--hero-image-full));
  }
}

@media (max-width: 539px) and (max-height: 303px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 539px) and (max-height: 303px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-s-2x, var(--hero-image-full));
  }
}

@media (max-width: -1px) and (max-height: -1px) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-xs, var(--hero-image-full));
  }
}

@media (max-width: -1px) and (max-height: -1px) and (-webkit-min-device-pixel-ratio: 2), (max-width: -1px) and (max-height: -1px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-image.hero-size-large {
    --background-image: var(--hero-image-until-xs-2x, var(--hero-image-full));
  }
}

.hero-section.hero-is-image .hero-media {
  background-image: var(--background-image);
  background-size: cover;
  background-position: var(--hero-image-position);
}

.hero-section.hero-is-video {
  --background-image: var(--hero-image-full);
}

@media (max-width: 1899px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-3xl);
  }
}

@media (max-width: 1899px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1899px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-3xl-2x);
  }
}

@media (max-width: 1599px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-2xl);
  }
}

@media (max-width: 1599px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1599px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-2xl-2x);
  }
}

@media (max-width: 1399px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-xl);
  }
}

@media (max-width: 1399px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1399px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-xl-2x);
  }
}

@media (max-width: 1199px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-lg);
  }
}

@media (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1199px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-lg-2x);
  }
}

@media (max-width: 991px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-md);
  }
}

@media (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 991px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-md-2x);
  }
}

@media (max-width: 767px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-sm);
  }
}

@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-sm-2x);
  }
}

@media (max-width: 539px) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-s);
  }
}

@media (max-width: 539px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 539px) and (min-resolution: 2dppx) {
  .hero-section.hero-is-video {
    --background-image: var(--hero-image-until-s-2x);
  }
}

.hero-section.hero-is-video .hero-video {
  object-fit: cover;
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* #endregion "../src/elements/hero/hero.scss" */


/*# sourceMappingURL=css-wpce--hero.css.map*/