/********
 * HERO *
 ********/

.hero {
  background: linear-gradient(to right, rgb(208, 94, 243), rgb(73, 6, 182));
  position: relative;
}

.hero-container {
  padding: 24.5rem 1.5rem 0 1.5rem;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-size: 5rem;
  color: var(--black);
  text-align: center;
  font-weight: 700;
  margin-bottom: 4rem;
  line-height: 5rem;
  letter-spacing: -0.3rem;
}

.hero-button {
  padding: 2rem 6rem;
  border: none;
  border-radius: 3rem;
  color: var(--white);
  background: linear-gradient(to right, rgb(208, 94, 243), rgb(73, 6, 182));
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  outline: none;
  cursor: pointer;
  transition: all 0.4s ease;
  margin-bottom: 3rem;
}

.hero-button:hover {
  background: linear-gradient(to right, rgb(73, 6, 182), rgb(208, 94, 243));;
}

.terms {
  display: flex;
  margin-bottom: 2rem;
}

.hero-terms-link,
.hero-terms-link + span,
.terms > span {
  font-size: 1.2rem;
  color: var(--hero-terms-link);
}

.hero-terms-link,
.terms > span {
  margin-right: 0.2rem;
}

.hero-terms-link {
  text-decoration: underline;
  transition: all 0.6s ease;
}

.hero-terms-link:hover {
  color: var(--white);
}