@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
  background: #000c24;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  margin: 0;
}
.container {
  padding: 0px 9.3vw;
  overflow-x: hidden;
}
.navbar {
  padding-top: 1.3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.navbar-logo {
  width: auto;
  height: 100%;
}
.navbar-link {
  display: flex;
  padding-right: 10vw;
}
.navbar-link li {
  list-style-type: none;
  font-size: 20px;
  margin-left: 2.7vw;
}
.navbar-link li a {
  text-decoration: none;
  color: #ffffff;
}
.navbar-block {
  margin-right: 10px;
  height: 2.7vh;
  width: 2vw;
  background-color: #bb133e;
}
.header {
  position: relative;
}
.main-content {
  display: flex;
  justify-content: space-between;
  padding-top: 10vw;
  position: relative;
  z-index: 1;
}
.normal-text {
  color: #fff;
  font-size: 45px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
}
.purple-text {
  color: #b86cfe !important;
}
.content-paragraph {
  color: #fff;
  font-size: 20px;
  width: 85%;
  margin: 2vw 0px;
}
.content-btn {
  background-color: #b86cfe;
  color: #fff;
  padding: 20px;
  font-size: 17px;
  border-radius: 20px;
  width: 40%;
  border: none;
  cursor: pointer;
}
.content-btn2 {
  background-color: #b86cfe;
  color: #fff;
  padding: 20px;
  font-size: 17px;
  border-radius: 20px;
  width: 40%;
  border: none;
  cursor: pointer;
}
.next-btn {
  background-color: #b86cfe;
  color: #fff;
  padding: 20px;
  font-size: 17px;
  border-radius: 20px;
  width: 40%;
  border: none;
  cursor: pointer;
}
.content-btn:hover {
  background-color: #9f38ff;
}
.content-btn:active {
  background-color: #9119ff;
}
.content-right img {
  height: 54vh;
  width: auto;
}
.second-content {
  margin-top: 2.7vh;
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: space-evenly;
}
.first-step,
.second-step,
.third-step {
  position: relative;
}
.step-circle {
  border: 3px solid #b86cfe;
  border-radius: 100%;
  width: 3.3vw;
  height: 6.7vh;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -25px;
  position: absolute;
  background-color: #000c24;
}
.step-circle-text {
  font-size: 30px;
  font-weight: bold;
}
.step-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0px;
  border-radius: 15px;
  border: 1px solid var(--Linear, #b86cfe);
  background: #000c24;
  text-align: center;
  width: 16.6vw;
}
.step-text {
  width: 65%;
}
.content-1 {
  position: absolute;
  width: 80.269px;
  height: 91.153px;
  filter: blur(2px);
  top: 1vw;
  left: 30vw;
  transform: rotate(-100deg);
}
.content-2 {
  position: absolute;
  top: 3vw;
  left: 45vw;
  width: 118px;
  height: 134px;
  transform: rotate(10deg);
}
.content-3 {
  position: absolute;
  width: 136.275px;
  height: 154.752px;
  filter: blur(1px);
  top: 10vw;
  left: 35vw;
  transform: rotate(-20deg);
}
.content-4 {
  position: absolute;
  width: 76.315px;
  height: 86.663px;
  bottom: 10vw;
  left: 25vw;
  transform: rotate(20deg);
}
.content-5 {
  position: absolute;
  width: 76.315px;
  height: 86.663px;
  bottom: 8vw;
  left: 38vw;
  transform: rotate(-100deg);
}
.content-6 {
  position: absolute;
  width: 80.269px;
  height: 91.153px;
  top: 5vw;
  left: 75vw;
  transform: rotate(-20deg);
}
.content-7 {
  position: absolute;
  width: 51.194px;
  height: 58.136px;
  filter: blur(2px);
  top: 1vw;
  right: -7vw;
  transform: rotate(10deg);
}
.content-8 {
  position: absolute;
  width: 134.93px;
  height: 153.226px;
  top: 30vw;
  right: -14vw;
  transform: rotate(15deg);
}
.circle-header-1 {
  position: absolute;
  width: 531px;
  height: 531px;
  border-radius: 531px;
  opacity: 0.46;
  background: var(--Linear, #b86cfe);
  filter: blur(200px);
  top: 10vh;
  left: -15vw;
}
.circle-header-2 {
  position: absolute;
  width: 531px;
  height: 531px;
  border-radius: 531px;
  opacity: 0.46;
  background: var(--Linear, #b86cfe);
  filter: blur(200px);
  top: 13vh;
  right: -10vw;
}
.agent-content {
  position: relative;
  margin-top: 10vh;
  display: flex;
  border-radius: 24px;
  border-top: 6px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  height: 50vh;
  justify-content: space-evenly;
  align-items: center;
  overflow: hidden;
}
.agent-image {
  padding-right: 5vw;
  height: 50vh;
}
.right-agent-content {
}
.agent-background {
}
.ball-content-1 {
  position: absolute;
  height: 140px;
  filter: blur(4px);
  bottom: -4vw;
  left: -4vw;
}
.img-content-1 {
  position: absolute;
  width: 152.654px;
  height: 173.353px;
  transform: rotate(-10deg);
  bottom: 5vw;
  left: -5vw;
}
.img-content-2 {
  position: absolute;
  width: 80.269px;
  height: 91.153px;
  transform: rotate(-50deg);
  filter: blur(2px);
  top: 1vw;
  left: -2vw;
}
.img-content-3 {
  position: absolute;
  width: 100px;
  transform: rotate(-50deg);
  top: -3vw;
  left: 6vw;
}
.img-content-4 {
  position: absolute;
  width: 76.315px;
  height: 86.663px;
  transform: rotate(-50deg);
  top: 7vw;
  left: 23vw;
}
.img-content-5 {
  position: absolute;
  width: 80.269px;
  height: 91.153px;
  transform: rotate(40deg);
  filter: blur(2px);
  top: 15vw;
  left: 30vw;
}
.img-content-6 {
  position: absolute;
  width: 80.269px;
  height: 91.153px;
  transform: rotate(-40deg);
  filter: blur(2px);
  top: 3vw;
  left: 32vw;
}
.growing-content {
  position: relative;
  margin-top: 10vh;
  margin-bottom: 10vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-text {
  font-size: 35px;
  text-align: center;
  width: 60%;
  margin-bottom: 2vh;
}
.growing-paragraph {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 1vh;
  text-transform: none;
}
.growing-paragraph-second {
  font-size: 20px;
  font-weight: normal;
  text-transform: none;
  width: 60%;
  text-align: center;
  margin-bottom: 5vh;
}
.growing-data {
  display: flex;
  margin-bottom: 5vh;
}
.growing-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  border-top: 4px solid rgba(255, 255, 255, 0.06);
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(9px);
  margin-right: 2vw;
}
.growing-box-data {
  font-size: 35px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
  color: #b86cfe;
}
.growing-box-text {
  color: #fff;
}
.growing-btn {
  width: 20%;
}
.circle-growing-1 {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 531px;
  opacity: 0.46;
  background: var(--Linear, #b86cfe);
  filter: blur(300px);
  top: -5vh;
  left: -20vw;
}
.circle-growing-2 {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 531px;
  opacity: 0.46;
  background: var(--Linear, #b86cfe);
  filter: blur(300px);
  bottom: -5vh;
  right: -20vw;
}
.contact {
  position: relative;
  border-radius: 22px;
  border-top: 4px solid rgba(255, 255, 255, 0.06);
  padding: 20px 40px;
  padding-bottom: 0px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(9px);
  display: flex;
  align-items: end;
  overflow: hidden;
  margin-bottom: 5vh;
}
.form-text-header {
  font-size: 35px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
}
.form-text-paragraph {
  font-size: 18px;
  color: #fff;
  margin-bottom: 3vh;
  text-align: center;
  padding: 0px 50px;
}
.tele-text,
.question-text {
  font-size: 17px;
  color: #bebebe;
  margin-bottom: 10px;
}
.tele-box,
.question-box {
  display: flex;
  background-color: #fff;
  padding: 20px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.tele-input,
.question-input {
  border: none;
  background-color: #fff;
}
.tele-input:focus,
.question-input:focus {
  outline: none;
}
.question-box {
  padding-bottom: 50px;
  margin-bottom: 5vh;
}
.contact-img-1 {
  position: absolute;
  width: 120px;
  filter: blur(4px);
  transform: rotate(-35.126deg);
  bottom: 10vh;
  right: 32vw;
}
.contact-img-2 {
  position: absolute;
  width: 180px;
  filter: blur(4px);
  bottom: 30vh;
  right: -3vw;
}
.contact-img-3 {
  position: absolute;
  width: 91.827px;
  height: 104.278px;
  filter: blur(2px);
  transform: rotate(-83.003deg);
  bottom: 40vh;
  right: 32vw;
}
.contact-img-4 {
  position: absolute;
  width: 97.527px;
  height: 110.751px;
  transform: rotate(-42.333deg);
  filter: blur(5px);
  bottom: 5vh;
  right: 1vw;
}
.contact-img-5 {
  position: absolute;
  height: 111px;
  transform: rotate(-160deg);
  top: -6vh;
  right: 25vw;
}
.footer {
  border-top: 4px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  padding-bottom: 30px;
}
.footer-nav {
  padding: 0 140px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.footer-logo {
  width: auto;
  height: 100%;
}
.footer-link {
  display: flex;
}
.footer-link li {
  list-style-type: none;
  font-size: 20px;
  margin-left: 40px;
}
.footer-link li a {
  text-decoration: none;
  color: #ffffff;
}
.footer-app {
  display: flex;
}
.footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  background-color: #b86cfe;
  color: #fff;
  padding: 10px;
  font-size: 17px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  margin-right: 2vw;
}
.footer-btn:hover {
  background-color: #9f38ff;
}
.footer-btn:active {
  background-color: #9119ff;
}
.footer-copyright {
  color: #bebebe;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  text-align: center;
}
.footer-lan-box {
  position: relative;
}
.lan-default {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  border: 2px solid var(--Linear, #b86cfe);
  background: #172139;
  padding-left: 7px;
  padding-right: 10px;
  padding-top: 1vh;
  padding: 1vh 7px 10px;
}
.footer-lan {
  border-radius: 25px;
  margin-right: 1vw;
}
.lan-active {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  border-radius: 25px;
  border: 2px solid var(--Linear, #b86cfe);
  background: #172139;
  padding-left: 7px;
  padding-top: 1vh;
  padding-right: 10px;
}
.active {
  display: flex;
}
.footer-lan-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1vh;
}
.lan-arrow-up,
.lan-arrow-down {
  cursor: pointer;
}
.lan-arrow-up:hover,
.lan-arrow-down:hover {
  opacity: 0.7;
}
.footer-lan-2 {
  margin-bottom: 1vh;
  border-radius: 25px;
}
.agent-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(22, 23, 62, 0.8);
  width: 100vw;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-active {
  display: flex !important;
}
.modal-container {
  border-radius: 24px;
  border-top: 4px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
  padding: 0px 130px;
  font-family: 'Inter', sans-serif;
  border-radius: 24px;
  border-top: 4px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
  padding: 20px 130px;
  width: 70%;
  height: 90%;
}
.retangle {
  width: 80px;
  height: 80px;
  background-color: #fff;
}
.modal-header-text {
  font-size: 35px;
}
.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-paragraph {
  margin: 0;
  color: #fff;
  width: 50%;
  text-align: center;
}
.modal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-content {
  width: 100%;
  display: flex;
  gap: 2vw;
  justify-content: space-between;
  margin-bottom: 2vw;
}
.left-form-content,
.right-form-content {
  flex: 1;
}
.input-text {
  font-size: 17px;
  color: #bebebe;
  margin-bottom: 10px;
}
.input-box {
  display: flex;
  background-color: #fff;
  padding: 15px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.input-content {
  border: none;
  background-color: #fff;
}
.input-content:focus {
  outline: none;
}
.modal-close-btn {
  position: absolute;
  top: 1vw;
  right: 2vw;
  cursor: pointer;
}
.modal-close-btn:hover {
  opacity: 0.7;
}
.second-content-2 {
  display: none;
}
.agent-paragraph-mobile {
  display: none;
}
.background-content-2,
.background-content-agent-2,
.background-content-growing-2,
.mobile-menu,
.mobile-menu-btn {
  display: none;
}
@media (max-width: 1024px) {
  .container {
    padding: 0;
  }
  .navbar {
    padding-top: 3.5vw;
    border-bottom: 0px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    justify-content: center;
    position: relative;
    z-index: 999;
    background-color: transparent;
  }
  .navbar-link,
  .navbar-block,
  .content-right,
  .background-content,
  .growing-background,
  .footer-lan-box,
  .second-content,
  .agent-background,
  .contact-background,
  .contact-img {
    display: none;
  }
  .main-content {
    justify-content: center;
    margin-bottom: 10vh;
  }
  .content-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .normal-text,
  .content-paragraph {
    text-align: center;
  }
  .content-paragraph {
    margin-bottom: 10vh;
  }
  .content-btn {
    width: 90%;
  }
  .second-content-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .step-box-2 {
    position: relative;
    border-radius: 35px;
    border: 4px solid #b86cfe;
    display: flex;
    padding: 20px 0px;
    width: 70%;
    justify-content: center;
    margin-bottom: 4vh;
  }
  .step-circle-2 {
    width: 20%;
    height: 100%;
    top: -6%;
    left: -4%;
    position: absolute;
    border-radius: 35px;
    border: 4px solid #b86cfe;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000c24;
    color: #fff;
  }
  .step-text-2 {
    color: #fff;
  }
  .agent-content {
    height: fit-content;
    flex-direction: column-reverse;
  }
  .right-agent-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 7vh;
  }
  .agent-paragraph-mobile {
    display: block;
    color: #fff;
    text-align: center;
    margin-bottom: 2vh;
  }
  .main-text {
    width: 90%;
  }
  .growing-paragraph {
    width: 70%;
  }
  .growing-paragraph-second {
    width: 80%;
  }
  .purple-text {
    font-weight: bold;
  }
  .growing-data {
    width: 90%;
    flex-direction: column;
  }
  .growing-box {
    margin-bottom: 4vw;
  }
  .growing-btn {
    width: 90% !important;
  }
  .contact {
    padding: 4vh 4vw;
  }
  .form-text-header {
    text-align: center;
    margin-bottom: 3vh;
  }
  .form-text-paragraph {
    padding: 0;
  }
  .footer-nav {
    flex-direction: column;
    padding: 4vh 0px;
  }
  .footer-link {
    flex-direction: column;
    align-items: center;
    padding: 0px;
  }
  .footer-link li {
    margin: 0px;
    margin-bottom: 2vh;
  }
  .footer-app {
    width: 100%;
    justify-content: center;
  }
  .footer-btn {
    width: 80%;
    margin-right: 0px;
  }
  .background-content-2,
  .background-content-agent-2,
  .background-content-growing-2 {
    display: block;
  }
  .sm-content-1 {
    position: absolute;
    filter: blur(1.9999998807907104px);
    width: 87.614px;
    height: 99.494px;
    top: 0vw;
    right: -10vw;
  }
  .sm-content-2 {
    position: absolute;
    width: 76.315px;
    height: 86.663px;
    transform: rotate(80.536deg);
    bottom: 90vw;
    left: -8vw;
  }
  .sm-content-3 {
    position: absolute;
    border-radius: 437px;
    opacity: 0.46;
    background: var(--Linear, #b86cfe);
    filter: blur(300px);
    width: 437px;
    height: 437px;
    top: 58vw;
    right: -52vw;
  }
  .sm-agent-1 {
    bottom: 40vw;
    left: 8vw;
    width: 76.315px;
    height: 86.663px;
    transform: rotate(-57.966deg);
    position: absolute;
  }
  .sm-agent-2 {
    right: 3vw;
    bottom: 20vw;
    width: 84.98px;
    height: 96.502px;
    transform: rotate(15.7deg);
    position: absolute;
  }
  .sm-agent-3 {
    bottom: -9vw;
    left: -8vw;
    position: absolute;
    width: 97.251px;
    height: 97.833px;
    transform: rotate(-35.126deg);
    filter: blur(3.999999761581421px);
  }
  .sm-growing-1 {
    position: absolute;
    width: 80.269px;
    height: 91.153px;
    transform: rotate(81.644deg);
    bottom: 5vw;
    left: 4vw;
    filter: blur(1.9999998807907104px);
    z-index: -1;
  }
  .sm-growing-2 {
    position: absolute;
    width: 80.269px;
    height: 91.153px;
    transform: rotate(81.644deg);
    filter: blur(1.9999998807907104px);
    top: -8vw;
    left: -9vw;
    z-index: -1;
  }
  .sm-growing-3 {
    position: absolute;
    width: 80.269px;
    height: 91.153px;
    transform: rotate(19.096deg);
    filter: blur(1.9999998807907104px);
    right: -6vw;
    bottom: 47vh;
    z-index: -1;
  }
  .agent-modal {
    overflow-y: scroll;
  }
  .modal-container {
    width: 85%;
    padding: 20px;
    overflow-y: scroll;
  }
  .form-paragraph {
    width: 100%;
  }

  .form-content {
    flex-direction: column;
  }
  .modal-header-text {
    width: 100%;
    font-size: 32px;
    margin-bottom: 2vh;
  }
  .modal-close-btn {
    top: 4vw;
    right: 5vw;
  }
  .mobile-menu {
    display: none;
    background: rgba(22, 23, 62, 0.8);
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    backdrop-filter: blur(12px);
  }
  .mobile-menu-btn {
    width: 6vw;
    display: block;
    position: absolute;
    right: 4vw;
    top: 3.5vw;
  }
  .active-sidebar {
    display: block !important;
  }
  .mobile-menu-sidebar {
    border-radius: 24px 0px 0px 24px;
    border-top: 4px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80vw;
  }
  .closeSidebarBtn {
    position: absolute;
    top: 5vw;
    right: 5vw;
  }
}