@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@300;600&family=Ubuntu:wght@400;500;700&display=swap");
.header {
  background-image: url(../images/bg-pattern-intro.svg), -webkit-gradient(linear, left top, left bottom, from(#ff8f70), to(#ff3d54));
  background-image: url(../images/bg-pattern-intro.svg), linear-gradient(to bottom, #ff8f70, #ff3d54);
  background-position: 35% 40%;
  background-size: 350%;
  height: 80vh;
  width: 100%;
  border-bottom-left-radius: 100px;
}

.header .nav {
  font-family: sans-serif;
  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;
  padding: 50px 30px;
}

.header .nav .logo {
  font-size: 30px;
  font-weight: 700;
  list-style: none;
}

.header .nav .logo a {
  text-decoration: none;
}

.header .nav .contianer-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .nav .contianer-links .nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  -webkit-transition: .5s linear;
  transition: .5s linear;
  background-color: white;
  width: 90vw;
  left: 5%;
  top: 15%;
  border-radius: 5px;
  font-family: "Ubuntu",sans-serif;
  -webkit-transform: translateX(120%);
          transform: translateX(120%);
  -webkit-box-shadow: 10px 20px 50px 2px #25252d;
          box-shadow: 10px 20px 50px 2px #25252d;
}

.header .nav .contianer-links .nav-links .left li {
  list-style: none;
  padding: 10px;
  text-align: center;
}

.header .nav .contianer-links .nav-links .left li a {
  text-decoration: none;
  color: #25252d;
  margin-right: 10px;
}

.header .nav .contianer-links .nav-links .left .product img {
  -webkit-transition: .5s;
  transition: .5s;
  width: 15px;
}

.header .nav .contianer-links .nav-links .left .product .drop-down-product {
  background-color: #c8c8cb;
  display: none;
  border-radius: 5px;
  margin-top: 20px;
}

.header .nav .contianer-links .nav-links .left .product .drop-down-product ul {
  padding: 10px;
}

.header .nav .contianer-links .nav-links .left .product .drop-down-product ul li {
  padding: 10px;
}

.header .nav .contianer-links .nav-links .left .product.product-drop-down img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.header .nav .contianer-links .nav-links .left .product.product-drop-down .drop-down-product {
  display: block;
}

.header .nav .contianer-links .nav-links .left .company {
  padding: 10px;
}

.header .nav .contianer-links .nav-links .left .company img {
  -webkit-transition: .5s;
  transition: .5s;
  width: 15px;
}

.header .nav .contianer-links .nav-links .left .company .drop-down-company {
  background-color: #c8c8cb;
  display: none;
  margin-top: 20px;
  border-radius: 5px;
}

.header .nav .contianer-links .nav-links .left .company.company-drop-down img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

.header .nav .contianer-links .nav-links .left .company.company-drop-down .drop-down-company {
  display: block;
}

.header .nav .contianer-links .nav-links .left .connect img {
  -webkit-transition: .5s;
  transition: .5s;
  width: 15px;
}

.header .nav .contianer-links .nav-links .left .connect .drop-down-connect {
  background-color: #c8c8cb;
  display: none;
  margin-top: 20px;
  border-radius: 5px;
}

.header .nav .contianer-links .nav-links .left .connect.connect-drop-down img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

.header .nav .contianer-links .nav-links .left .connect.connect-drop-down .drop-down-connect {
  display: block;
}

.header .nav .contianer-links .nav-links .right {
  padding: 20px;
}

.header .nav .contianer-links .nav-links .right li {
  text-align: center;
  padding: 10px;
}

.header .nav .contianer-links .nav-links .right li a {
  color: #25252d;
  text-decoration: none;
}

.header .nav .contianer-links .nav-links .right .logIn {
  font-family: "Overpass",sans-serif;
  border-top: 1px solid #c8c8cb;
}

.header .nav .contianer-links .nav-links .right .signUp a {
  padding: 10px 20px;
  background-image: -webkit-gradient(linear, left top, right top, from(#ff8f70), to(#ff3d54));
  background-image: linear-gradient(to right, #ff8f70, #ff3d54);
  border-radius: 40px;
  color: white;
}

.header .nav .contianer-links .nav-links.responsive {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.header .main {
  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;
  text-align: center;
  width: 300px;
  margin: 0 auto;
  margin-top: 30px;
}

.header .main h1 {
  font-size: 33px;
  font-weight: 600;
}

.header .main p {
  color: white;
  font-size: 17px;
  padding: 10px 0 50px 0;
  font-weight: 200;
}

.header .main .start-for-free {
  background-color: white;
  color: #ff3d54;
}

.header .main .start-for-free:hover {
  background-color: #ff8f70;
  color: white;
}

.header .main .learn-more {
  border: 1px solid white;
  margin-left: 10px;
}

.header .main .learn-more:hover {
  background-color: white;
  color: #ff3d54;
}

.header .main a {
  padding: 13px 20px;
  font-family: 'Ubuntu',sans-serif;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 500;
  -webkit-transition: .5s;
  transition: .5s;
}

@media (min-width: 787px) {
  .header {
    background-size: 200%;
    background-position: 20% 50%;
  }
  .header .nav .logo {
    padding-left: 10%;
  }
  .header .nav .contianer-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header .nav .contianer-links .nav-links {
    color: white;
    -webkit-transition: 0ms;
    transition: 0ms;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    background-color: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    position: static;
    -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;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .header .nav .contianer-links .nav-links .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 50px;
  }
  .header .nav .contianer-links .nav-links .left li a {
    color: white;
  }
  .header .nav .contianer-links .nav-links .left .product:hover img {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .header .nav .contianer-links .nav-links .left .product:hover .drop-down-product {
    display: block;
  }
  .header .nav .contianer-links .nav-links .left .product a:hover {
    text-decoration: underline;
  }
  .header .nav .contianer-links .nav-links .left .product .drop-down-product {
    position: absolute;
    background-color: white;
    display: none;
    margin-top: 10px;
  }
  .header .nav .contianer-links .nav-links .left .product .drop-down-product ul li a {
    text-decoration: none;
    color: #4b5862;
  }
  .header .nav .contianer-links .nav-links .left .product .drop-down-product ul li a:hover {
    color: #25252d;
  }
  .header .nav .contianer-links .nav-links .left .company:hover img {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .header .nav .contianer-links .nav-links .left .company:hover .drop-down-company {
    display: block;
  }
  .header .nav .contianer-links .nav-links .left .company a:hover {
    text-decoration: underline;
  }
  .header .nav .contianer-links .nav-links .left .company .drop-down-company {
    position: absolute;
    background-color: white;
    display: none;
    margin-top: 10px;
  }
  .header .nav .contianer-links .nav-links .left .company .drop-down-company ul li a {
    text-decoration: none;
    color: #4b5862;
  }
  .header .nav .contianer-links .nav-links .left .company .drop-down-company ul li a:hover {
    color: #25252d;
  }
  .header .nav .contianer-links .nav-links .left .connect:hover img {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .header .nav .contianer-links .nav-links .left .connect:hover .drop-down-connect {
    display: block;
  }
  .header .nav .contianer-links .nav-links .left .connect a:hover {
    text-decoration: underline;
  }
  .header .nav .contianer-links .nav-links .left .connect .drop-down-connect {
    position: absolute;
    background-color: white;
    display: none;
    margin-top: 10px;
    margin-right: 50px;
  }
  .header .nav .contianer-links .nav-links .left .connect .drop-down-connect ul li a {
    text-decoration: none;
    color: #4b5862;
  }
  .header .nav .contianer-links .nav-links .left .connect .drop-down-connect ul li a:hover {
    color: #25252d;
  }
  .header .nav .contianer-links .nav-links .right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    padding-right: 22%;
  }
  .header .nav .contianer-links .nav-links .right .logIn {
    border: none;
  }
  .header .nav .contianer-links .nav-links .right .logIn a {
    color: white;
  }
  .header .nav .contianer-links .nav-links .right .signUp a {
    background: white;
    color: #ff3d54;
    -webkit-transition: .5s;
    transition: .5s;
  }
  .header .nav .contianer-links .nav-links .right .signUp a:hover {
    background-color: #ff8f70;
    color: white;
  }
  .header .nav .contianer-links .hamburger #toggle {
    display: none;
  }
  .header .main {
    width: 700px;
  }
  .header .main h1 {
    font-size: 45px;
  }
}

main .top {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  background-image: url(../images/illustration-editor-mobile.svg);
  background-repeat: no-repeat;
  background-size: 500px;
  background-position: 50% 100px;
}

main .top .top-container {
  -ms-flex-line-pack: center;
      align-content: center;
}

main .top .top-container .header-top {
  text-align: center;
  padding-top: 20px;
  color: #1f3f5b;
}

main .top .top-container .top-text {
  margin: 20% 0 0 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
}

main .top .top-container .top-text .up-text {
  padding-top: 350px;
}

main .top .top-container .top-text .up-text h1 {
  font-size: 27px;
  max-width: 300px;
  margin-bottom: 30px;
  line-height: 25px;
  color: #1f3f5b;
}

main .top .top-container .top-text .up-text p {
  max-width: 300px;
  line-height: 30px;
  color: #4b5862;
}

main .top .top-container .top-text .down-text {
  margin-top: 30px;
}

main .top .top-container .top-text .down-text h1 {
  font-size: 23px;
  max-width: 300px;
  margin-bottom: 30px;
  line-height: 25px;
  color: #1f3f5b;
}

main .top .top-container .top-text .down-text p {
  max-width: 300px;
  line-height: 30px;
  color: #4b5862;
  margin-bottom: 400px;
}

@media (min-width: 900px) {
  main .top {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
    background-size: 47%;
    background-image: url(../images/illustration-editor-desktop.svg);
    background-position: 130% 50%;
  }
  main .top .top-container .header-top {
    padding-top: 100px;
  }
  main .top .top-container .top-text {
    margin: 0 0 0 100px;
    text-align: start;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  main .top .top-container .top-text .up-text {
    padding-top: 50px;
  }
  main .top .top-container .top-text .up-text h1 {
    max-width: 500px;
  }
  main .top .top-container .top-text .up-text p {
    max-width: 500px;
  }
  main .top .top-container .top-text .down-text {
    padding-top: 50px;
  }
  main .top .top-container .top-text .down-text h1 {
    max-width: 500px;
  }
  main .top .top-container .top-text .down-text p {
    max-width: 500px;
  }
}

main .center {
  height: 80vh;
  width: 100%;
  background-image: url(../images/bg-pattern-circles.svg), -webkit-gradient(linear, left top, left bottom, from(#2c2d3f), to(#3f4164));
  background-image: url(../images/bg-pattern-circles.svg), linear-gradient(to bottom, #2c2d3f, #3f4164);
  background-repeat: no-repeat;
  background-size: 160%;
  background-position: 50% 140%;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
}

main .center .center-container .center-image {
  text-align: center;
}

main .center .center-container .center-image img {
  margin-top: -250px;
  max-width: 500px;
}

main .center .center-container .center-text {
  text-align: center;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -20px;
}

main .center .center-container .center-text h1 {
  font-size: 33px;
  max-width: 290px;
  font-weight: 900;
  line-height: 40px;
  margin-bottom: 20px;
}

main .center .center-container .center-text p {
  font-size: 16px;
  max-width: 300px;
  color: #c8c8cb;
}

@media (min-width: 733px) {
  main .center {
    height: 50vh;
    width: 100%;
    background-image: url(../images/bg-pattern-circles.svg), -webkit-gradient(linear, left top, right top, from(#2c2d3f), to(#3f4164));
    background-image: url(../images/bg-pattern-circles.svg), linear-gradient(to right, #2c2d3f, #3f4164);
    background-size: 100%;
    background-position: -50% 80%;
  }
  main .center .center-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  main .center .center-container .center-image img {
    margin-top: -70px;
    margin-left: 10%;
  }
  main .center .center-container .center-text {
    text-align: start;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    margin: 50px 0 0 30px;
  }
  main .center .center-container .center-text h1 {
    font-size: 30px;
    max-width: 600px;
  }
  main .center .center-container .center-text p {
    max-width: 600px;
  }
}

@media (min-width: 800px) {
  main .center .center-container .center-text {
    margin: 70px 0 0 10%;
  }
}

main .bottom {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  background-image: url(../images/illustration-laptop-mobile.svg);
  background-repeat: no-repeat;
  background-position: 50% 10%;
  background-size: 600px;
}

main .bottom .text-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 500px;
}

main .bottom .text-bottom .text-bottom-up {
  max-width: 295px;
  text-align: center;
  margin-bottom: 50px;
}

main .bottom .text-bottom .text-bottom-up h1 {
  color: #25252d;
}

main .bottom .text-bottom .text-bottom-up p {
  color: #4b5862;
  line-height: 30px;
  margin-top: 20px;
}

main .bottom .text-bottom .text-bottom-down {
  text-align: center;
  max-width: 300px;
  margin-bottom: 100px;
}

main .bottom .text-bottom .text-bottom-down h1 {
  color: #25252d;
}

main .bottom .text-bottom .text-bottom-down p {
  color: #4b5862;
  margin-top: 20px;
  line-height: 30px;
  margin-bottom: 200px;
}

@media (min-width: 786px) {
  main .bottom {
    height: 100vh;
    width: 100%;
    background-image: url(../images/illustration-laptop-desktop.svg);
    background-size: 59%;
    background-position: -41% 50%;
  }
  main .bottom .text-bottom {
    padding-top: 150px;
    margin-left: 200px;
  }
  main .bottom .text-bottom .text-bottom-up {
    text-align: start;
    max-width: 500px;
    margin-left: 200px;
  }
  main .bottom .text-bottom .text-bottom-down {
    text-align: start;
    max-width: 500px;
    margin-left: 200px;
  }
  main .bottom .text-bottom .text-bottom-down p {
    margin-bottom: 0;
  }
}

.footer {
  width: 100%;
  background-color: #25252d;
  height: 100vh;
  background-color: #25252d;
  margin-top: 1166px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
  text-align: center;
  border-top-right-radius: 100px;
}

.footer .logo-footer {
  margin-top: 30px;
  font-size: 23px;
  font-weight: 900;
}

.footer .product-footer {
  color: #c8c8cb;
}

.footer .product-footer h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer .product-footer ul li {
  list-style: none;
  padding: 2px;
  color: #c8c8cb;
}

.footer .company-footer {
  color: #c8c8cb;
}

.footer .company-footer h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer .company-footer ul li {
  list-style: none;
  padding: 2px;
  color: #c8c8cb;
}

.footer .connect-footer {
  color: #c8c8cb;
}

.footer .connect-footer h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer .connect-footer ul li {
  list-style: none;
  padding: 2px;
  color: #c8c8cb;
}

@media (min-width: 786px) {
  .footer {
    margin-top: 808px;
    height: 50vh;
    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: start;
        -ms-flex-align: start;
            align-items: flex-start;
    text-align: start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 50px 200px;
  }
  .footer .logo-footer {
    margin-top: -20px;
  }
}

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

body {
  font-family: 'Overpass' ,sans-serif;
  overflow-x: hidden;
}
/*# sourceMappingURL=style.css.map */