@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Manrope:wght@200..800&display=swap");
* {
  box-sizing: border-box;
}
:focus {
  outline: none;
}
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  background: #191d22;
  font-family: "Manrope", sans-serif;
}
.svg-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden !important;
}
svg {
  height: 100%;
  width: auto;
  display: block;
  transform-origin: center center;
}
.intro-text {
  left: 50%;
  bottom: 50%;
  width: 100%;
  display: flex;
  height: 100vh;
  font-weight: 500;
  color: #01cd9a;
  line-height: 160%;
  padding: 0 5.362vh;
  font-size: 3.217vh;
  position: absolute;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  transform: translate(-50%, 50%);
}
.vector {
  z-index: -1;
  width: 70.912vh;
  height: 70.241vh;
  position: absolute;
  filter: blur(26.81vh);
  border-radius: 9999px;
  background: #01cd9a33;
}
.vector.left {
  top: -5.362vh;
  left: -30.429vh;
}
.vector.right {
  top: 29.759vh;
  left: 157.507vh;
}
.lines {
  top: 0;
  z-index: -1;
  right: 20vw;
  height: 100vh;
  margin-left: -3px;
  position: absolute;
  border-left: 1px solid #23272b;
}
.lines.one {
  right: 40vw;
}
.lines.two {
  right: 60vw;
}
.lines.three {
  right: 80vw;
}
.logo {
  top: 0;
  left: 50%;
  z-index: -1;
  position: absolute;
  padding: 8.579vh 0 6.434vh;
  transform: translateX(-50%);
}
.hero-title {
  margin: 0;
  left: 50%;
  width: 100%;
  z-index: -1;
  top: 19.839vh;
  font-weight: 800;
  line-height: 110%;
  position: absolute;
  text-align: center;
  font-size: 8.579vh;
  max-width: 156.836vh;
  text-transform: uppercase;
  transform: translateX(-50%);
  font-family: "Figtree", sans-serif;
}
.form-message {
  top: 56vh;
  left: 50%;
  font-size: 1.34vh;
  text-align: center;
  position: absolute;
  transform: translateX(-50%);
}
.form-message.success {
  color: #00d4aa;
}
.form-message.error {
  color: #c40000;
}
.form-container {
  left: 50%;
  width: 100%;
  top: 46.917vh;
  display: flex;
  padding: 0.804vh;
  position: absolute;
  max-width: 90.483vh;
  border: 0.067vh solid;
  border-radius: 13.405vh;
  transform: translateX(-50%);
  border-image-source: linear-gradient(
    90deg,
    rgba(243, 244, 245, 0.2) 0%,
    rgba(243, 244, 245, 0.04) 100%
  );
  background: #f3f4f533;
  backdrop-filter: blur(1.877vh);
}
.form-container .email-input {
  width: 100%;
  border: none;
  color: #f3f4f5;
  font-size: 2.145vh;
  line-height: 6.971vh;
  border-radius: 13.405vh;
  background: transparent;
  padding: 0 2.145vh 0 3.753vh;
}
.form-container .submit-btn {
  border: none;
  flex-shrink: 0;
  font-weight: 800;
  color: #f3f4f5;
  padding: 0 3.485vh;
  background: #c951b0;
  line-height: 6.971vh;
  letter-spacing: 0.268vh;
  border-radius: 13.405vh;
  text-transform: uppercase;
}
.progress-container {
  left: 50%;
  gap: 1.609vh;
  top: 64.343vh;
  display: flex;
  position: absolute;
  align-items: center;
  transform: translateX(-50%);
}
.progress-container .progress-bar {
  height: 0.268vh;
  width: 53.619vh;
  position: relative;
  border-radius: 0.134vh;
  background: #f3f4f54d;
}
.progress-container .progress-bar .progress-fill {
  width: 64%;
  height: 100%;
  position: relative;
  background: #00d4aa;
  border-radius: 0.134vh;
}
.progress-container .progress-bar .progress-fill .progress-bubble {
    top: 50%;
    opacity: 0;
    right: -1.34vh;
    color: #363e47;
    font-weight: 700;
    font-size: 1.609vh;
    position: absolute;
    background: #00d4aa;
    border-radius: 13.405vh;
    padding: 1.34vh 1.609vh;
    transform: translateY(-50%);
}
.progress-container .progress-date {
  color: #f3f4f5;
  font-weight: 800;
  font-size: 1.609vh;
  letter-spacing: 0.268vh;
  text-transform: uppercase;
}
.contact-info {
  left: 50%;
  bottom: 8.579vh;
  text-align: center;
  position: absolute;
  transform: translateX(-50%);
}
.contact-info .contact-label {
  color: #00d4aa;
  font-weight: 800;
  font-size: 1.609vh;
  margin-bottom: 1.34vh;
  text-transform: uppercase;
}
.contact-info .contact-email a {
  color: #f3f4f5;
  text-decoration: none;
}
@media (max-width: 767px) {
  .intro-text {
    gap: 1.609vh;
    font-size: 2.681vh;
  }
  .vector.right,
  .lines.one,
  .lines.two {
    display: none;
  }
  .vector.left {
    top: 2.681vh;
    left: 23.727vh;
  }
  .logo {
    padding: 4.826vh 0 0;
  }
  .hero-title {
    top: 12.601vh;
    font-size: 4.4vh;
    padding: 0 2.413vh;
  }
  .form-container {
    gap: 2.681vh;
    flex-wrap: wrap;
    padding: 0 2.5vh;
    background: transparent;
    justify-content: center;
    backdrop-filter: inherit;
    top: calc(30.917vh + 8.579vh);
  }
  .form-container .email-input {
    font-size: 1.877vh;
    line-height: 6.702vh;
    border-radius: 13.405vh;
    background: #f3f4f533;
    backdrop-filter: blur(1.877vh);
  }
  .form-container .submit-btn {
    font-size: 1.34vh;
    line-height: 5.63vh;
  }
  .progress-container {
    width: 80%;
    gap: 4.692vh;
    flex-wrap: wrap;
    justify-content: center;
  }
  .progress-container .progress-bar {
    width: 100%;
  }
  .contact-info {
    bottom: 5.579vh;
  }
}