.AboutUsHero {
  position: relative;
  height: 100vh;
  justify-content: center;
  padding: 7rem 50px 4rem;
  max-height: 1009px;
  margin-top: -2px;
}

@media (max-width: 80rem) {
  .AboutUsHero {
    max-height: 700px;
  }
}

@media (max-width: 64rem) {
  .AboutUsHero {
    max-height: 600px;
  }
}

@media (max-width: 48rem) {
  .AboutUsHero {
    max-height: 400px;
  }
}

.AboutUsHero-frame {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding-left: 8%;
}

.AboutUsHero-image {
  color: var(--colorBrand);
  background: no-repeat center/cover url("/frontend/images/mappa_mapa_web 1.jpg");
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  clip: rect(0, auto, auto, 0);
  overflow: hidden;
  z-index: 1;
}

.AboutUsHero-image img, .AboutUsHero-image svg, .AboutUsHero-image:after {
  position: relative;
  display: block;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.AboutUsHero-image img {
  object-fit: cover;
}

.AboutUsHero-image svg:last-of-type {
  position: fixed;
}

.AboutUsHero-image:after {
  content: ' ';
  background: linear-gradient(9deg, transparent 50%, #00000096 100%);
  pointer-events: none;
}

.AboutUsHero-image-iframe {
  height: 100%;
  width: 100%;
}

.AboutUsHero-title {
  color: #fff;
  margin: 0;
  text-shadow: 0 0 11px #000000a6;
  line-height: clamp(60px, 8vw, 95px);
  font-size: clamp(40px, 8vw, 90px);
  font-weight: 700;
  position: absolute;
  bottom: 00px;
  left: 0;
  padding: 80px 50px;
  z-index: 2;
  background: linear-gradient(to right, #000 0%, #00000000 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.AboutUsHero-title .above-header {
  margin-top: auto;
  font-style: normal;
  font-weight: 350;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.AboutUsHero-title h1 {
  color: #fff;
  line-height: clamp(60px, 8vw, 95px);
  font-size: clamp(40px, 8vw, 90px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.AboutUsHero-title h1 .green {
  color: var(--colorBrand);
}

@media (max-width: 80rem) {
  .AboutUsHero-title {
    font-size: var(--textXxxl);
  }
}

@media (max-width: 32rem) {
  .AboutUsHero-title {
    font-size: var(--textXxl);
  }
}

.AboutUsHero-perex {
  color: #fff;
  text-shadow: 0 0 7px #000000;
  margin-top: var(--spaceSm);
  font-size: var(--textXl);
  max-width: 33em;
  font-weight: 200;
}

@media (max-width: 64rem) {
  .AboutUsHero-perex {
    font-size: var(--textLg);
  }
}

.AboutUsHero-btn {
  margin-top: var(--spaceLg);
}

.AboutUsHero .arrow-down {
  position: absolute;
  z-index: 3;
  left: 50px;
  bottom: 0;
  transform: translateY(50%);
  border-radius: 50%;
  background-color: var(--colorBrand);
  height: 85px;
  width: 85px;
  display: grid;
  place-items: center;
  transition: var(--animationBase);
}

.AboutUsHero .arrow-down svg {
  position: relative;
  height: 22px;
  width: 43px;
}

.AboutUsHero .arrow-down:hover, .AboutUsHero .arrow-down:active, .AboutUsHero .arrow-down:focus {
  background: #fff;
}

.AboutUsHero-scrollMessage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000d;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: var(--animationBase);
  display: flex;
  align-items: center;
  justify-content: center;
}

.AboutUsHero-scrollMessage-message {
  position: sticky;
  top: 20%;
  width: 100%;
  color: #fffd;
  text-align: center;
}

.AboutUsHero-scrollMessage.visible {
  opacity: 1;
}

.AboutUsHero-scrollMessage.scrollable {
  display: none;
}

@media (pointer: coarse) and (max-width: 1023px) {
  .AboutUsHero-scrollMessage {
    display: none;
  }
}

/*# sourceMappingURL=about-us-hero.min.css.map */