.cont_journey {
  position: relative;

  padding-block: 5rem;
  padding-inline: 2.5rem;

  width: 100%;
  height: 100vh;
  background-color: white;
}

.journey {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 0.75rem;

  width: 100%;
  height: 100%;
}

.journey p {
  font-size: 20px;
  font-weight: 300;
  color: var(--paragraph);
}

.journey h1 {
  font-size: 48px;
  font-weight: 600;
  color: var(--dark);
}

.journey .join-waitlist_journey {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;

  margin-top: 1.5rem;
}

.join-waitlist_journey input {
  padding: 0.75rem;

  width: 400px;
  height: fit-content;
  background-color: white;

  font-size: 16px;
  font-weight: 300;
  color: var(--dark);

  outline: none;
  border: 1px solid #00000021;
  border-radius: 0.5rem;
  /* box-shadow: 0px 0px 4px 1px #0000003a; */
}

.join-waitlist_journey button {
  cursor: pointer;

  padding: 0.75rem 1.25rem;

  width: fit-content;
  height: fit-content;
  background-color: var(--accent);

  font-size: 16px;
  color: white;

  border: none;
  border-radius: 0.5rem;
}

.helix1,
.helix2 {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  opacity: 0.3;
}

.helix1 svg,
.helix2 svg {
  position: absolute;
  top: -50%;
  left: 0;
  transform: translate(0%, 50%);

  width: 100%;
  height: 100%;
}

.helix1 svg path,
.helix2 svg path {
  stroke-dasharray: var(--dash-array);
  stroke-dashoffset: 100;
}

.start-svg-animate_journey svg path {
  animation: startSVGAnimate 1s ease-in forwards;
}
.end-svg-animate_journey svg path {
  animation: endSVGAnimate 0.75s ease-in forwards;
}

@keyframes startSVGAnimate {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes endSVGAnimate {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 100;
  }
}