@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

body {
  background-color: #d7e5df;
}

.nav {
  background-color: #12152d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 5em 0.5em 5em;
  z-index: 99;
  margin-bottom: 8%;
}

ul {
  display: flex;
  list-style-type: none;
  font-size: 1em;
}

ul li {
  padding: 1em;
  cursor: pointer;
}

.buttons .two{
  background: #76deb4;
  border: 1px solid #000000;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 1em;
  font-weight: 600;
  color: #000000;
  font-size: 1em;
}

.two a {
  text-decoration: none;
  color: #000000;
}

.buttons button {
  font-weight: 600;
  color: #fff;
  background-color: transparent;
  border: none;
  margin-right: 1em;
  font-size: 1em;
  cursor: pointer;
}

main {
  width: 100vw;
  height: 90vh;
  position: relative;
}

.wave {
  position: absolute;
  top: 0%;
  right: 0%;
}

.bottomUpWave {
  position: absolute;
  bottom: -20%;
  z-index: -1;
}

.title {
  text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
  width: 60%;
  margin-left: 6%;
}

p {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  margin-left: 6%;
  width: 75%;
}

.lady {
  position: absolute;
  right: 0%;
  top: -20%;
  width: 450px;
  z-index: 1;
}

.checkout {
  margin-left: 6%;
  background: #76deb4;
  border: 1px solid #000000;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 0.5em 1em;
  margin-top: 1%;
  font-weight: 600;
  color: #000000;
  font-size: 1em;
}

.tutorial {
  background: #fff;
  border: 1px solid #000000;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 0.5em 1em;
  margin-top: 1%;
  margin-left: 1%;
  font-weight: 600;
  color: #000000;
  font-size: 1em;
}

.vector6 {
  position: absolute;
  rotate: 180deg;
  bottom: -80%;
  z-index: 999;
  transform: matrix(1, 0, 0, -1, 0, 0);
}

.swiper {
  width: 100%;
  height: 83vh;
  z-index: 99999;
  margin-top: -18%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide {
  width: 350px;
  height: 450px;
  background: #207169;
  box-shadow: inset 0px 10px 4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 18%;
  padding-bottom: 18%;
}

.swiper-slide h2 {
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.swiper-slide p {
  color: #bcb4b4;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-size: medium;
  width: 100%;
  margin-left: -0.5%;
  margin-top: 3%;
}

.circle {
  width: 180px;
}



.bot {
  width: 35%;
  position: absolute;
  top: 15%;
}

.quiz {
  top: 10%;
}

.card .two {
  padding: 0.5em 1em;
}

.one a {
  text-decoration: none;
  color: #000000;
}

.card .one {
  background: #fff;
  border: 1px solid #000000;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 0.5em 1em;
  margin-top: 1%;
  margin-left: 1%;
  font-weight: 600;
  color: #000000;
  font-size: 1em;
  width: 150%;
}

.card .two {
  width: 150%;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-left: 5%;
  margin-top: 5%;
}

.card-data {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 5%;
}

.testimonials {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110vh;
  margin-top: -10%;
  position: relative;
  background: linear-gradient(90deg, #ffffff 0%, #4daa90 96.39%);
}

.testimonials h2 {
  z-index: 99;
  position: absolute;
  left: 0%;
}

.earth {
  position: absolute;
  bottom: -10%;
}

.rocket {
  position: absolute;
  bottom: -5%;
  width: 20%;
  left: 0%;
}

.testimonials .title {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-30%, 0);
}

.testimonial {
  position: absolute;
  width: 484px;
  height: 193px;
  left: 12%;
  top: 50%;

  background: #d9d9d9;
  border: 1px solid #305bf8;
  border-radius: 20px;
  padding: 1em;
}

.testimonial .top {
  display: flex;
  align-items: center;
}

.name {
  font-size: medium;
  font-weight: 700;
}

.top div p {
  font-size: small;
  width: 1000%;
}

.profile {
  width: 50px;
}

.review {
  font-size: medium;
  width: 100%;
  margin: 0;
  margin-top: 2%;
}

.first {
  top: 65%;
  z-index: 99;
  left: 35%;
}

.second {
  left: 60%;
  top: 30%;
}

.waitlist {
  background: linear-gradient(180deg, #21736a 0%, #4daa90 100%);
  height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 99999999;
  overflow: hidden;
}

.last-wave {
  position: absolute;
  bottom: -80%;
  right: 0%;
  width: 75%;
}

.bus {
  position: absolute;
  bottom: 0;
  width: 40%;
  left: 5%;
}

.people {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 20%;
}

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

.waitlist h2 {
  color: #ff8f8f;
  font-size: xx-large;
  text-align: center;
  margin-top: 2%;
  text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
}

.join {
    background: #72B4A4;
    border: 1px solid #305BF8;
    border-radius: 10px;
    margin-left: -5%;
}

.glass {
    background: linear-gradient(146.89deg, rgba(217, 217, 217, 0.13) 6.93%, rgba(0, 0, 0, 0.13) 6.94%, #207169 93.92%);
    border: 1px solid #2F5BF8;
    box-shadow: 0px 4px 20px -1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px);
    /* Note: backdrop-filter has minimal browser support */

    border-radius: 15px;
    width: 50vw;
    margin-right: 2%;
    height: 50vh;
    z-index: 99;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    transform: scale(0.8);
}

.glass h1 {
    color: #FFBFBF;
    line-height: 1px;
    margin-top: 5%;
    font-size: x-large;
}

.input input, .input .join, textarea {
    padding: 1em 2em;
    border-radius: 10px;
    outline: none;
    border: 1px solid black;
}

.input input, textarea {
    width: 40vw;
    margin-top: 5%;
}

textarea {
    margin-top: 1%;
}

.glass .join {
    position: absolute;
    bottom: 5%;
    right: 15%;
    cursor: pointer;
}

.part2 {
  margin-top: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
}

.part2 h1{
  position: absolute;
  top: -120%;
  left: 50%;
  transform: translate(-50%, 0);
}

@media only screen and (max-width: 600px) {
  .lady {
    top: 48%;
    z-index: 2;
    width: 85%;
  }

  .wave {
    bottom: 0;
    z-index: 1;
  }

  .title {
    font-size: x-large;
    width: 90%;
  }

  .paragraph{
    font-size: medium;
    color: #000 !important;
  }

  .bottomUpWave {
    z-index: 3;
    bottom: -30%;
  }

  .testimonial {
    scale: .8;
  }

  nav .buttons {
    display: flex;
  }

  .testimonial{
    left: -8%;
  }

  .middle {
    top: 48%;
  }

  .testimonials .title {
    left: 50%;
    transform: translate(-55%, 0);
  }

  .rocket {
    width: 40%;
    bottom: 0;
    z-index: 999;
  }

  .bus {
    width: 80%;
  }

  .people {
    width: 30%;
  }

  .glass {
    width: 95%;
  }

  #Message {
    width: 90%;
    font-size: 1em;
    height: 30%;
  }

  #email_id {
    width: 90%;
    font-size: 1em;
  }

  .waitlist h2 {
    margin-top: 30%;
  }
}