@import url(d:\USERS\DESKTOP\Practice\PROJECT\Current\Uncloudy\style.css);
@import url("https://fonts.googleapis.com/css2?family=Epilogue: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&family=Raleway: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");
@font-face {
  font-family: Gallient;
  src: url(fonts/gallient-cufonfonts/GallientRegular-eZoMp.ttf);
}

.brand_color1 {
  color: #98dede;
}

.brand_color2 {
  color: #fcc883;
}

.brand_color3 {
  color: #c3b1e1;
}

* {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: #ffffff;
  font-family: Raleway, "Franklin Gothic Medium", "Arial Narrow", Arial,
 sans-serif;
}

.gallient {
  font-family: Gallient, "Franklin Gothic Medium", "Arial Narrow", Arial,
 sans-serif;
}

.body-padding {
  padding: 0px 80px;
}

@media (max-width: 850px) {
  .body-padding {
    padding: 0px 40px;
  }
}

@media (max-width: 600px) {
  .body-padding {
    padding: 0px 20px;
  }
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 30px 0px 15px 0px;
  font-family: Epilogue, "Franklin Gothic Medium", "Arial Narrow", Arial,
 sans-serif;
}

.header_child:nth-child(2) {
  padding: 0px 20px;
}

.header_logo {
  width: 201px;
  height: 49px;
}

.header_find {
  color: #333333;
  font-weight: 300;
  font-size: 25px;
}

.header_waitlist {
  color: #98dede;
  font-weight: 700;
  font-size: 25px;
}

@media (max-width: 850px) {
  /* For mobile phones: */
  header {
    margin: 20px 0px 10px 0px;
  }
  .header_child:nth-child(2) {
    padding: 0px 20px;
  }
  .header_logo {
    width: 154px;
    height: 37px;
  }
  .header_find {
    font-size: 20px;
  }
  .header_waitlist {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  /* For mobile phones: */
  header {
    margin: 20px 0px 10px 0px;
  }
  .header_child:nth-child(2) {
    padding: 0px 20px;
  }
  .header_logo {
    width: 107px;
    height: 26px;
  }
  .header_find {
    font-size: 16px;
  }
  .header_waitlist {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  /* For mobile phones: */
  header {
    margin: 20px 0px 10px 0px;
  }
  .header_child:nth-child(2) {
    padding: 0px 20px;
  }
  .header_logo {
    width: 90px;
    height: 23px;
  }
  .header_find {
    font-size: 13px;
  }
  .header_waitlist {
    font-size: 13px;
  }
}

.hero_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  margin: 80px 0px 50px 0px;
}

.hero_wrapper .hero_iphone-mockup {
  width: 50%;
}

.hero_wrapper .hero_iphone-mockup img {
  width: 100%;
  height: auto;
}

.hero_brief {
  width: 50%;
}

.hero_brief .hero_brief_text1 {
  color: #000000;
  font-weight: 400;
  font-size: 70px;
  line-height: 70px;
  margin: 25px 0px;
}

.hero_brief .hero_brief_text1 .text1secondspan {
  display: block;
}

.hero_brief .hero_brief_text2 {
  color: #000000d8;
  font-weight: 400;
  font-size: 25px;
  line-height: 30px;
  margin: 25px 0px 25px 0px;
}

.hero_brief .hero_brief_text2 .text2secondspanwrapper {
  display: block;
}

.hero_brief .hero_brief_text2 .text2thirdspan {
  display: block;
}

.hero_brief .hero_mail {
  color: #a6a8b2;
  border: 1px solid #a6a8b2;
  letter-spacing: 1px;
  outline: none;
  font-size: 15px;
  font-family: Raleway;
  padding: 11px 10px;
  border-radius: 9px;
  margin-right: 10px;
  margin-bottom: 20px;
  width: 250px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.1);
}

.hero_brief .hero_mail:focus {
  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.hero_brief .hero_button {
  background-color: #98dede;
  letter-spacing: 1.5px;
  border: 1px solid #98dede;
  color: #2e7272;
  font-weight: 400;
  font-size: 16px;
  font-family: Raleway;
  padding: 11px 22px;
  border-radius: 9px;
  -webkit-box-shadow: 0 0 50px #98dede;
          box-shadow: 0 0 50px #98dede;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hero_brief .hero_button:hover {
  background-color: #ffffff;
  color: #98dede;
  -webkit-box-shadow: 0px 8px 15px #fcc88317;
          box-shadow: 0px 8px 15px #fcc88317;
}

@media (max-width: 850px) {
  .hero_wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 60px 0px 30px 0px;
  }
  .hero_wrapper .hero_iphone-mockup {
    width: 70%;
  }
  .hero_wrapper .hero_iphone-mockup img {
    width: 100%;
    height: auto;
  }
  .hero_brief {
    text-align: center;
    width: 80%;
  }
  .hero_brief .hero_brief_text1 {
    font-weight: 400;
    font-size: 50px;
    line-height: 50px;
    margin: 20px 0px;
    text-align: center;
  }
  .hero_brief .hero_brief_text1 .text1secondspan {
    display: block;
  }
  .hero_brief .hero_brief_text2 {
    font-weight: 400;
    font-size: 23px;
    line-height: 30px;
    margin: 25px 0px 25px 0px;
    text-align: center;
  }
  .hero_brief .hero_brief_text2 .text2secondspanwrapper {
    display: block;
  }
  .hero_brief .hero_brief_text2 .text2thirdspan {
    display: block;
  }
}

@media (max-width: 480px) {
  .hero_wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 30px 0px 30px 0px;
  }
  .hero_wrapper .hero_iphone-mockup {
    width: 70%;
  }
  .hero_wrapper .hero_iphone-mockup img {
    width: 100%;
    height: auto;
  }
  .hero_wrapper .hero_mail {
    font-size: 13px;
    padding: 8px 7px;
    margin-right: 10px;
    margin-bottom: 20px;
    width: 250px;
  }
  .hero_wrapper .hero_button {
    letter-spacing: 1.5px;
    font-size: 14px;
    padding: 8px 16px;
  }
  .hero_brief {
    text-align: center;
    width: 80%;
  }
  .hero_brief .hero_brief_text1 {
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    margin: 15px 0px;
    text-align: center;
  }
  .hero_brief .hero_brief_text2 {
    font-size: 18px;
    line-height: 20px;
    margin: 20px 0px 20px 0px;
    text-align: center;
  }
}

.intro_wrapper {
  padding: 50px 80px 50px 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 70px;
  background-color: #98dede;
}

.intro_wrapper .intro_wrapper_mini {
  text-align: center;
  width: 20%;
}

.intro_wrapper .intro_wrapper_mini .intro_wrapper_title {
  color: #379191;
  font-weight: 400;
  font-size: 25px;
  line-height: 25px;
  margin: 10px 0px 25px 0px;
}

.intro_wrapper .intro_wrapper_mini .intro_wrapper_brief {
  color: #ffffff;
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
}

@media (max-width: 1000px) {
  .intro_wrapper .intro_wrapper_mini {
    width: 25%;
  }
}

@media (max-width: 850px) {
  .intro_wrapper {
    padding: 20px 40px 20px 40px;
    gap: 40px;
  }
  .intro_wrapper .intro_wrapper_mini {
    text-align: center;
    width: 30%;
  }
  .intro_wrapper .intro_wrapper_mini .intro_wrapper_title {
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    margin: 10px 0px 20px 0px;
  }
  .intro_wrapper .intro_wrapper_mini .intro_wrapper_brief {
    font-size: 16px;
    line-height: 18px;
  }
}

@media (max-width: 600px) {
  .intro_wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .intro_wrapper .intro_wrapper_mini {
    text-align: center;
    width: 80%;
  }
}

.howitworks__section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 50px 80px 50px 80px;
}

.howitworks__section .howitworks__title {
  text-align: center;
  color: #fcc883;
  font-weight: 400;
  font-size: 70px;
  margin-bottom: 30px;
}

.howitworks__section .howitworks__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 50px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.howitworks__section .howitworks__wrapper .howitworks__each {
  width: 20%;
}

.howitworks__section .howitworks__wrapper .howitworks__each .howitworks__each__img {
  border-radius: 8px;
  width: 100%;
  height: auto;
}

.howitworks__section .howitworks__wrapper .howitworks__each .howitworks__each__title {
  font-weight: 400;
  font-size: 22px;
  line-height: 25px;
  color: #298686;
  margin: 30px 0px;
}

.howitworks__section .howitworks__wrapper .howitworks__each .howitworks__each__brief {
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: #6f6b6b;
  margin: 30px 0px;
  text-align: left;
}

@media (max-width: 850px) {
  .howitworks__section {
    margin: 20px 40px;
  }
  .howitworks__section .howitworks__title {
    font-size: 50px;
  }
  .howitworks__section .howitworks__wrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .howitworks__section .howitworks__wrapper .howitworks__each {
    width: 45%;
  }
  .howitworks__section .howitworks__wrapper .howitworks__each .howitworks__each__title {
    font-size: 20px;
    line-height: 22px;
    margin: 20px 0px;
  }
  .howitworks__section .howitworks__wrapper .howitworks__each .howitworks__each__brief {
    font-size: 16px;
    line-height: 18px;
    margin: 20px 0px;
  }
}

@media (max-width: 480px) {
  .howitworks__section {
    margin: 20px 40px;
  }
  .howitworks__section .howitworks__title {
    font-size: 40px;
  }
  .howitworks__section .howitworks__wrapper .howitworks__each {
    width: 45%;
  }
  .howitworks__section .howitworks__wrapper .howitworks__each .howitworks__each__title {
    font-size: 18px;
    line-height: 20px;
    margin: 15px 0px;
  }
  .howitworks__section .howitworks__wrapper .howitworks__each .howitworks__each__brief {
    font-size: 14px;
    line-height: 16px;
    margin: 15px 0px;
  }
}

.rainbowsystem {
  text-align: center;
}

.rainbowsystem svg {
  width: 100%;
}

.extro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 80px 20px 50px 20px;
}

.extro .extro_title {
  font-size: 70px;
  color: #98dede;
  font-weight: 400;
  margin-bottom: 25px;
}

.extro .extro_brief {
  color: #333333;
  text-align: center;
  width: 50%;
  font-size: 25px;
  margin-bottom: 25px;
}

.extro .extro_mail {
  color: #a6a8b2;
  border: 1px solid #a6a8b2;
  letter-spacing: 1px;
  outline: none;
  font-size: 18px;
  padding: 20px;
  border-radius: 9px;
  width: 60%;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-bottom: 25px;
  -webkit-box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.1);
}

.extro .extro_mail:focus {
  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.extro .extro_button {
  background-color: #98dede;
  letter-spacing: 1.5px;
  border: 1px solid #98dede;
  color: #625970;
  font-weight: 400;
  font-size: 18px;
  padding: 15px 30px;
  border-radius: 9px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  margin-bottom: 25px;
  -webkit-box-shadow: 0 0 50px #98dede;
          box-shadow: 0 0 50px #98dede;
}

.extro .extro_button:hover {
  background-color: #ffffff;
  color: #98dede;
  -webkit-box-shadow: inset 0px 8px 15px #fcc88317;
          box-shadow: inset 0px 8px 15px #fcc88317;
}

@media (max-width: 850px) {
  .extro {
    margin: 40px 20px 20px 20px;
  }
  .extro .extro_title {
    font-size: 50px;
    margin-bottom: 20px;
  }
  .extro .extro_brief {
    width: 60%;
    font-size: 20px;
    margin-bottom: 25px;
  }
  .extro .extro_mail {
    width: 70%;
  }
  .rainbowsystem svg {
    width: 80%;
  }
}

@media (max-width: 500px) {
  .extro .extro_mail {
    width: 90%;
  }
}

@media (max-width: 480px) {
  .extro {
    margin: 10px 20px 20px 20px;
  }
  .extro .extro_title {
    font-size: 40px;
    margin-bottom: 10px;
  }
  .extro .extro_brief {
    width: 80%;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .extro .extro_mail {
    font-size: 13px;
    padding: 8px 7px;
    margin-right: 10px;
    margin-bottom: 20px;
    width: 250px;
  }
  .extro .extro_button {
    letter-spacing: 1.5px;
    font-size: 14px;
    padding: 8px 16px;
  }
}

.social_logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 40px;
  margin: 80px 0px;
}

.social_logos div.social_logo_wrapper {
  padding: 15px;
  border: 1px solid #98dede;
  border-radius: 40%;
}

.social_logos .social_logo {
  width: 30px;
  height: 30px;
  fill: #98dede !important;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.social_logos .social_logo:hover {
  -webkit-animation: spin 1s linear 0s 2;
          animation: spin 1s linear 0s 2;
}

.social_logos .social_logo path {
  fill: #98dede !important;
}

.social_logos .social_logo path circle#XMLID_83_ {
  fill: #98dede !important;
}

@media (max-width: 850px) {
  .social_logos {
    gap: 20px;
    margin: 40px 0px;
  }
  .social_logos div.social_logo_wrapper {
    padding: 5px;
  }
  .social_logos .social_logo {
    width: 15px;
    height: 15px;
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  25% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  35% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  60% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  85% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  25% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  35% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  60% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  85% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*# sourceMappingURL=style.css.map */