/* stylelint-disable */
/* stylelint-disable max-line-length */
:root {
  --breakpoint-xxl: 1920px;
  --breakpoint-xl: 1440px;
  --breakpoint-lg: 1280px;
  --breakpoint-md: 1024px;
  --breakpoint-md-s: 992px;
  --breakpoint-sm: 768px;
  --breakpoint-xs: 512px;
  --breakpoint-xxs: 390px;
}

/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);

  or object-fit and object-position:
  @include object-fit(cover, top);
*/
.hero {
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px) {
  .hero {
    height: 740px;
    opacity: 1 !important;
  }
}
@media (max-width: 512px) {
  .hero {
    height: auto;
    padding: 64px 0;
  }
}
@media (max-width: 1024px) {
  .hero__row {
    flex-direction: column;
  }
}
.hero__text {
  animation: text-opacity 0s ease 1s;
}
.hero__text p {
  overflow-y: clip;
  font-size: 70px;
  line-height: 80px;
  color: var(--sk-color-white);
  text-transform: uppercase;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  font-family: var(--sk-font-primary);
  text-wrap: nowrap;
}
@media (max-width: 768px) {
  .hero__text p {
    font-size: 50px;
    line-height: normal;
  }
}
@media (max-width: 512px) {
  .hero__text p {
    font-size: 30px;
    line-height: 38px;
  }
}
.hero__text p::after {
  position: absolute;
  color: white;
  content: attr(data-small-text);
  font-size: 14px;
  line-height: 20px;
  width: 300px;
  text-wrap: wrap;
  bottom: -60px;
  right: -70px;
  transition: 0.75s ease;
}
@media (max-width: 768px) {
  .hero__text p::after {
    right: -110px;
  }
}
@media (max-width: 512px) {
  .hero__text p::after {
    display: block;
    position: static;
  }
}
.hero__button-wrapper {
  width: 40%;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px) {
  .hero__button-wrapper {
    width: 100%;
    margin-top: 72px;
  }
}
@media (max-width: 512px) {
  .hero__button-wrapper {
    display: none;
  }
}

@keyframes text-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}