/* ############################
   #      SASS Variables      #
   #  Theming in Compiletime  #
   ############################ */
/* ############################
   #      CSS Variables       #
   #    Theming in Runtime    #
   ############################ */
:root {
  --kup-color-default: #1A3F73;
  --kup-color-accent: #CEC075;
  --kup-color-accent-light-01: #E9E0AD;
  --kup-color-accent-light-02: #EFEACA;
  --kup-color-blue-01: #5B7599;
  --kup-color-blue-02: #8596ad;
  --kup-color-blue-03: #f4f5f7;
  --kup-color-yellow: #F3E86F;
  --kup-color-green: #BEE991;
  --kup-color-flamingo: #FFAEAF;
  --kup-color-coral: #DF504B;
  --kup-color-light: #ededed;
  --kup-color-dark: #cccccc;
  --kup-color-styleguide: #556d6e;
  --kup-box-shadow: 1px 2px 5px 1px rgba(0,0,0, 0.15);
  --kup-gradient: linear-gradient(0deg, var(--kup-color-default) 0%, rgba(49, 119, 217, 0.00) 97.12%);
  --kup-border-radius: 25px;
  --kup-border-radius-small: 4px;
  --bs-gutter-x: calc(15px/2);
}

/* abstracts/breakpoints */
/* Better Font Rendering */
/* ---------------------------------- */
/* Headline Mixins */
/* ---------------------------------- */
.section--hero {
  position: relative;
}

.hero-item--image, .hero-item--text {
  position: sticky;
  top: 5rem;
}
@media (max-width: 767px) {
  .hero-item--image, .hero-item--text {
    top: 4.375rem;
  }
}
.hero-item--image {
  height: calc(100vh - 5rem);
  width: 100%;
}
@media (max-width: 767px) {
  .hero-item--image {
    height: calc(100vh - 4.375rem);
  }
}
.hero-item--image picture,
.hero-item--image img {
  height: 100%;
  object-fit: cover;
}
.hero-item--text {
  height: 120vh;
  margin-top: calc((5rem - 100vh) * 0.5);
}
@media (max-width: 767px) {
  .hero-item--text {
    margin-top: calc((4.375rem - 100vh) * 0.5);
  }
}
.hero-item--text-box {
  border-bottom-right-radius: var(--kup-border-radius-small);
  border-top-right-radius: var(--kup-border-radius-small);
  bottom: calc(20vh + 150px);
  max-width: 50rem;
  padding: 15px 45px 45px;
  position: absolute;
  width: 60%;
}
@media (max-width: 991px) {
  .hero-item--text-box {
    width: 70%;
  }
}
@media (max-width: 767px) {
  .hero-item--text-box {
    padding: 22.5px 30px 15px 15px;
    width: calc(100vw - 30px);
  }
}
.hero-item--text:last-child .hero-item--text-box {
  bottom: 75px;
}
.hero-item--text-content {
  margin: 0 0 15px 150px;
}
@media (max-width: 1199px) {
  .hero-item--text-content {
    margin-left: 90px;
  }
}
@media (max-width: 991px) {
  .hero-item--text-content {
    margin-left: 7.5px;
  }
}
@media (max-width: 767px) {
  .hero-item--text-content {
    margin-bottom: 0;
  }
}
.hero-item--text-content-wrapper {
  align-items: flex-end;
  display: flex;
  gap: 30px;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .hero-item--text-content-wrapper {
    flex-wrap: wrap;
    gap: 15px;
  }
}
.hero-item--text-link {
  flex: 1 0 auto;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .hero-item--text-link {
    flex: 0 0 auto;
  }
}