@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.hero {
  color: var(--color-white);
  width: 100%;
}
.hero__content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(20px, 20vh, calc(var(--gap) * 3)) var(--padding-on-side);
  min-height: 70rem;
  gap: var(--gap);
}
.hero__inside-wrapper {
  z-index: 5;
  max-width: 42em;
}
.hero__subheading {
  color: var(--color-tertiary);
  font-size: var(--font-size-16);
  font-weight: var(--bold);
  margin-bottom: 1.5em;
}
.hero__title {
  font-size: var(--font-size-60);
  line-height: 1.1;
}
.hero__text {
  font-weight: var(--light);
  font-size: var(--font-size-24);
  margin-top: 1.5em;
  max-width: 62rem;
}
.hero__slogan {
  position: absolute;
  right: 0;
  bottom: var(--gap);
  z-index: 4;
  height: 5em;
  width: auto;
}
.hero__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero__image::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 70, 148, 0.85) 0%, rgba(33, 91, 166, 0) 80%);
  z-index: 2;
}
.hero__image::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 70, 148, 0) 50%, #215ba6 100%);
  z-index: 2;
}
.hero__button {
  margin-top: 2em;
}
.hero__dots-wrapper {
  position: absolute;
  bottom: var(--gap);
  z-index: 10;
  display: flex;
  width: 100%;
}
.hero__dots {
  display: flex;
  align-items: center;
  gap: 1.4em;
}
.embla__viewport {
  overflow: hidden;
  margin: 0 auto;
}
.embla__container {
  backface-visibility: hidden;
  display: flex;
  touch-action: pan-y;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  transition: opacity 0.6s, filter 0.6s ease-in-out;
  filter: grayscale(1) blur(0.2em);
}
.embla__slide.is-snapped {
  filter: grayscale(0) blur(0);
}
.embla__dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  background-color: var(--color-white);
  transition: all 0.25s ease-in-out;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0;
  padding: 0.4em;
  margin: 0;
  border: none;
  font-size: var(--font-size-16);
}
.embla__dot::after {
  content: "";
  left: -0.6em;
  top: -0.6em;
  right: -0.6em;
  bottom: -0.6em;
  border-radius: 50%;
  border: 0.6em solid transparent;
  position: absolute;
  transition: all 0.25s ease-in-out;
}
.embla__dot:hover,
.embla__dot--selected {
  background-color: transparent;
}
.embla__dot:hover::after,
.embla__dot--selected::after {
  border-color: var(--color-white);
}