@font-face {
     font-family: arialRounded;
     src: url('../font/Arial_Rounded_MT.ttf');
 }

 @font-face {
     font-family: vagRounded;
     src: url('../font/vag-rounded.otf');
 }

 main {
     max-width: 1250px;
     margin: auto;
     text-align: center;
     position: relative;
     overflow: hidden;
     font-family: vagRounded;
 }

 .space {
     height: 180px;
 }

 .shadow {
     box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.4);
 }

 .text-color {
     color: #737373;
 }

 .reduced_size,
 .header {
     max-width: 900px;
     margin: auto;
 }

 .header {
     position: relative;
     z-index: 9999;
     margin-top: 20px;
 }

 .header>div {
     display: inline-block;
     width: 47%;
 }

 .header>div:nth-last-child(1) {
     text-align: right;
 }

 .header>div:nth-last-child(2) {
     text-align: left;
 }

 .header>div>a {
     color: white;
     text-decoration: none;
     padding: 10px;
 }

 .header>div>a:nth-last-child(1) {
     background-color: white;
     border-radius: 50px;
     color: #8e3283;
 }

 .header>div>a>div {
     display: inline-block;
     text-align: center;
     width: 69px;
 }

 .header>div>img {
     width: 140px;
     ;
 }

 .round-color {
     background: linear-gradient(135deg, #7B2FF7, #913372);
     width: 700px;
     height: 700px;
     border-radius: 50%;
     position: absolute;
     top: -130px;
     left: 38%;
     transform: translateX(150px);
     overflow: hidden;
 }

 .round-color>div {
     background: #ffffff08;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     position: relative;
 }

 .round-color-1 {
     left: 280px;
     top: 400px;
 }

 .round-color-2 {
     left: -65px;
     top: -320px;
 }

 .geometric-shapes {
     position: absolute;
 }

 .triangle {
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 20px solid #10E6D7;
     position: absolute;
     top: 10px;
     left: -55px;
 }

 .triangle::after {
     content: "";
     position: absolute;
     top: 8px;
     left: -4px;
     width: 6px;
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     border-bottom: 8px solid white;
 }

 .circle {
     width: 18px;
     height: 18px;
     background: transparent;
     border: 3px solid #F5A5C7;
     border-radius: 50%;
     position: absolute;
     top: 143px;
     left: -145px;
 }

 .square {
     width: 18px;
     height: 18px;
     background: transparent;
     border: 3px solid #8F9393;
     position: absolute;
     top: 275px;
     left: -55px;
 }

 .section-initial>div {
     display: inline-block;
 }

 .section-initial>div:nth-last-child(2) {
     text-align: left;
     font-size: 18pt;
     max-width: 430px;
 }

 .section-initial>div>p:nth-last-child(3) {
     text-transform: uppercase;
 }

 .section-initial>div>p:nth-last-child(2) {
     font-size: 11pt;
 }

 .section-initial img {
     width: 420px;
     position: relative;
     margin-top: -120px;
 }

 .section-initial>div>div:nth-last-child(1) {
     font-size: 12pt;
 }

 .section-initial>div>div>a {
     text-decoration: none !important;
 }

 .section-initial>div>div>a>div {
     border: 2px solid;
     padding: 8px;
     border-radius: 20px;
     width: 145px;
     text-decoration: none;
     display: inline-block;
     margin: 5px;
     font-size: 11pt;
     text-align: center;
 }

 .section-initial-assinar {
     background-color: red;
 }

 .section-initial-baixar {
     border-color: black !important;
     color: #555;
 }

 .section-initial-baixar:hover {
     color: black;
 }

 .section-initial-assinar {
     background: linear-gradient(135deg, #7B2FF7, #913372);
     color: white;
     border-color: #7B2FF7 !important;
 }

 .section-initial-assinar:hover {
     background: linear-gradient(135deg, #6016d6ff, #55153fff);
 }

 .general-data>div {
     display: inline-block;
     width: 220px;
     font-size: 22pt;
 }

 .general-data>div>label {
     font-size: 12pt;
 }

 .divider-line {
     width: 80%;
     height: 2px;
     background: linear-gradient(to right, rgba(142, 50, 131, 0) 0%, #c8c8c8 20%, #a4a4a4 80%, rgba(142, 50, 131, 0) 100%);
     margin: auto;
     margin-top: 40px;
 }

 /* */
 .app-features {
     max-width: 600px;
     margin: auto;
     margin-top: auto;
     text-align: center;
     margin-top: 70px;
 }

 .top {
     margin-top: 40px;
 }

 .app-features-slides>div {
     display: inline-block;
 }

 .app-features-slides>div>p {
     max-width: 230px;
 }

 .app-features-slides.top>div>svg {
     font-size: 30pt;
     margin: 10px;
 }

 .app-features-slides.top>div:nth-child(1)>svg {
     color: #ffb01f;
 }

 .app-features-slides.top>div:nth-child(2)>svg {
     color: #b137bb;
 }

 .app-features-slides.top>div:nth-child(3)>svg {
     color: #41ce41;
 }

 .app-features-slides.top>div:nth-child(4)>svg {
     color: #934544;
 }

 .app-benefits>div {
     display: inline-block;
     vertical-align: top;
 }

 .app-benefits>div>img {
     width: 430px;
 }

 .app-benefits>div>div>h2 {
     padding: 20px 0px 20px 0px;
 }

 .app-benefits>div>div>div {
     margin-top: 15px;
 }

 .app-benefits>div>div>div>div:nth-last-child(2) {
     border: 1px solid #8e3283;
     border-radius: 50%;
     padding: 8px;
 }

 .app-benefits-list {
     position: relative;
 }

 .benefit-item {
     position: relative;
     padding-left: 90px;
     margin-bottom: 40px;
     min-height: 60px;
 }

 .benefit-icon.primary {
     background: linear-gradient(135deg, #701ef3, #6e1651);
 }

 .benefit-icon.primary>svg {
     color: white;
 }

 .benefit-icon {
     position: absolute;
     left: 40px;
     top: 35px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
 }

 .benefit-icon::before,
 .benefit-icon::after {
     content: "";
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 1px;
     background: #8e3283;
     z-index: 1;
 }

 .benefit-icon::before {
     top: -63px;
     height: 62px;
 }

 .benefit-icon::after {
     top: 100%;
     height: 80px;
 }

 .app-benefits-list .benefit-item:first-of-type .benefit-icon::before {
     background: linear-gradient(to top, #8e3283 0%, rgba(142, 50, 131, 0) 100%);
 }

 .app-benefits-list .benefit-item:last-child .benefit-icon::after {
     background: linear-gradient(to bottom, #8e3283 0%, rgba(142, 50, 131, 0) 100%);
 }

 .app-benefits>div>div>div>div>svg {
     color: #8e3283;
     font-size: 20pt;
 }

 .app-benefits>div>div>div>div,
 .app-benefits>div>div>div>i {
     display: inline-block;
 }

 .app-benefits>div>div>div>div {
     max-width: 260px;
 }

 .app-benefits>div>div>div>div>div {
     display: inline-block;
 }

 .app-store-download>div>a {
     max-width: 100% !important;
     padding: 12px;
     border-radius: 50px;
     font-size: 16pt;
     height: 55px;
     width: 180px;
     margin: 5px;
     margin-top: 20px;
     text-decoration: none;
 }

 .app-store-download>div>a>div>svg {
     font-size: 20pt;
 }

 .app-store-download>div>a>div>p {
     display: inline-block;
 }

 .app-store-download>div>a:nth-last-child(1) {
     border: 2px solid #8e3283;
     color: #8e3283;
     display: inline-block;
 }

 .app-store-download>div>a:nth-last-child(1):hover {
     border: 2px solid #6b1561ff;
     color: #6b1561ff;
 }

 .app-store-download>div>a:nth-last-child(2) {
     background: linear-gradient(135deg, #7B2FF7, #913372);
     color: white;
     display: inline-block;
 }

 .app-store-download>div>a:nth-last-child(2):hover {
     background: linear-gradient(135deg, #701ef3ff, #6e1651ff);
 }

 /** */
 .app-screenshots>div {
     display: inline-block;
     text-align: left;
     padding: 60px;
     vertical-align: middle;
     max-width: 590px;
 }

 .app-screenshots>div>svg {
     font-size: 20pt;
 }

 .app-screenshots>div>p {
     font-size: 14pt;
     margin-top: 20px;
 }

 .app-screenshots>div>p>label {
     color: #8a329a;
     font-weight: initial;
     display: initial;
 }

 .app-screenshots>div>img {
     width: 100%;
     /*
     height: 200px;
     */
     border-radius: 20px;
 }

 /** */
 .web-screenshots {
     background-color: #805c80
 }

 .web-screenshots a {
     text-decoration: none;
 }

 .web-screenshots img {
     width: 70%;
 }

 /** */
 footer {
     background: linear-gradient(135deg, #701ef3ff, #6e1651ff);
     color: white;
     padding: 30px;
 }

 footer div {
     padding: 15px;
 }

 footer a,
 footer a:hover {
     color: white;
 }

 footer svg {
     font-size: 18pt !important;
     width: 40px !important;
 }


 /** */
 @media(min-width: 2030px) {
     .round-color {
         left: clamp(45%, 1vw + 30%, 40%) !important;
     }
 }

 @media(min-width: 1250px) {
     main {
         max-width: initial;
     }

     .round-color {
         left: clamp(41%, 1vw + 30%, 40%);
     }

     .web-screenshots img {
         width: 50%;
     }
 }

 @media(max-width: 900px) {
     .section-initial img {
         width: 270px;
     }

     .round-color {
         width: 612px;
         height: 612px;
     }

     .general-data>div {
         width: 177px;
         font-size: 18pt;
     }

     .general-data>div>label {
         font-size: 11pt;
     }

     .app-benefits>div {
         vertical-align: bottom;
     }

     .app-benefits>div>img {
         width: 335px;
     }

     .app-benefits>div>div>h2 {
         font-size: 20pt;
     }
 }

 @media(max-width: 724px) {
     main {
         padding: 10px;
     }

     .space {
         height: 30px;
     }

     .geometric-shapes {
         display: none;
     }

     .header>div>a:nth-last-child(1) {
         background-color: #8e3283;
         color: white;
     }

     .header>div>a:nth-last-child(2) {
         color: #8e3283;
     }

     .round-color {
         display: none;
     }

     .app-features {
         margin-top: 40px;
     }

     .section-initial img {
         width: 270px;
         position: initial;
         margin-top: 0px;
     }

     .section-initial>div>div:nth-last-child(1) {
         text-align: center;
     }

     .app-screenshots>div {
         padding: 30px;
     }

     .app-screenshots>div>img {
         width: 100% !important;
         object-fit: contain;
     }

 }

 @media(max-width: 410px) {
     .header>div:nth-last-child(2) {
         width: auto;
     }

     .header>div:nth-last-child(1) {
         width: 195px;
     }

     .benefit-icon {
         left: 10px;
     }
 }