.hero-section {
  height: 64vh;
  max-height: 80rem;
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 8rem;
  max-height: 640px;
}

.hero-section .container {
  z-index: 9;
}

.hero-section.short-hero {
  height: 54rem;
}

.hero-section__two-columns {
  display: flex;
  gap: 4rem;
  justify-content: space-between;
  align-items: center;
  max-width: 100rem;
  margin: auto;
}

.hero-section__one-column {
  display: flex;
  gap: 4rem;
  justify-content: space-between;
  align-items: center;
  max-width: 100rem;
  margin: auto;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 5;
}

.hero-image img {
  position: relative;
  z-index: 2;
  max-width: 50rem;
  width: 100%;
}

.hero-section__gradient {
  position: absolute;
  width: 100%;
  height: 60rem;
  margin-top: -15%;
  background-color: #18f3ff19;
  background: linear-gradient(90deg, var(--yellow) 5%, var(--cyan) 25%);
  opacity: 0.15;
  top: 0;
  left: 0;
  border-radius: 50%;
  filter: blur(20px);
}

.hero-section__gradient-ball {
  width: 60rem;
  aspect-ratio: 1/1;
  height: auto;
  position: absolute;
  background-color: #18f5ff33;
  top: 0;
  right: 0rem;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.8;
}

.hero-section h1 {
  color: var(--darkerblue);
}

#home-hero-section {
  height: 64vh;
  min-height: 60rem;
}

.home-hero-qr {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
  font-size: 1.5rem;
  align-items: center;
  display: none;
}

.home-hero-qr__text {
  width: 30ch;
}

#home-hero-section .hero-text {
  position: relative;
  top: -2rem;
}

#home-hero-section #download-cta__buttons {
  margin-top: 6rem;
}

@media all and (max-width: 1000px) {
  .hero-image {
    /* display: none; */
  }

  .hero-section,
  #home-hero-section {
    min-height: 100%;
    max-height: 100%;
    height: auto;
    padding-top: 12rem;
    padding-bottom: 8rem;
  }

  .hero-section__two-columns {
    flex-direction: column;
  }

  #home-hero-section #download-cta__buttons {
    margin-top: 2rem;
  }

  .hero-section.short-hero {
    height: auto;
  }
}

@media all and (max-width: 700px) {
  .hero-section h1 {
    text-align: left;
  }
}