/*
   CSS styling examples for the Vaadin app.

   Visit https://vaadin.com/docs/styling/application-theme/ for more information.
*/



@import 'https://fonts.googleapis.com/css?family=Nunito';



/* Example: CSS class name to center align the content . */
.centered-content {
  margin: 0 auto;
  max-width: 250px;
}

/* Example: the style is applied only to the textfields which have the `bordered` class name. */
vaadin-text-field.bordered::part(input-field) {
  box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
  background-color: var(--lumo-base-color);
}


vaadin-button.underbut::part(label) {
	text-decoration: underline;
	font-size: 18px;
	color: #666;
}





html{scroll-behavior: smooth; --lumo-font-family: 'Nunito', sans-serif;}


.wave {background: linear-gradient(to right, white 0%, white 50%, #F7F7F7 50%, #F7F7F7 100%); width: 100%;}



.navbar {padding: 0px 120px 0px 120px; position: fixed; box-sizing: border-box; background: white; height: 60px; z-index: 11; width: 100vw;}
.navbut {background: transparent; font-weight: 400; color: #D01010; margin-left: 80px;}
.navaboutbut {display: inline-block;}
.navlogo {height: 30px; width: 150px; background-image: url(logobanner.svg); background-size: contain; background-repeat: no-repeat; background-position-y: bottom;}



.prestextlay {padding-left: 120px;}
.preslay {flex-direction: row;}
.prestext1 {font-size: 120px; font-weight: 700; line-height: 140px; width: 800px; margin-top: 100px; color: #454545;}
.prestext12 {font-size: 80px;  font-weight: 700; line-height: 100px; color: #454545; width: 800px;}
.prestext2 {font-size: 40px; line-height: 50px; color: #7D7D7D; width: 800px; margin-top: 60px;}
.presbut {margin-top: 80px; margin-bottom: 40px;}
.presimage {margin-top: 100px; margin-bottom: 40px; margin-left: 40px; width: 700px; aspect-ratio: 1/1;}
.presword {color: #D01010; margin-right: 10px;}
.presword:hover {transform: scale(1.05); transition: 0.5s; display: inline-block;}
.pressvg {position: absolute; width: 70vw; top: 60px; opacity: 0.5;}



.sessiontitle {font-size: 5rem; font-weight: 500; width: 100%; text-align: center;}



.customview {margin-bottom: 100px; z-index: -1;}
.customwave {background-image: url(wa5.svg); background-size: cover; background-repeat: no-repeat; height: 600px; padding: 1rem;
	 width: 100%; justify-content: center; box-sizing: border-box;}
.customblock {padding: 2rem; border-radius: 1rem; background: transparent; box-sizing: border-box; color: white;}
.customtitle {font-size: 2.5rem; font-style: italic; margin-bottom: 1rem;}
.customitem {font-size: 1.4rem;}
.customfinal {font-size: 1.2rem; margin-top: 1rem;}





.customim {border-radius: 5px; height: 200px; filter: grayscale(0%); transition: 1s; z-index: 8;}
.customim:hover {filter: grayscale(0%); transform: scale(1.5); z-index: 9;}
.customimageslay {flex-direction: row; gap: 100px;}
.highlightsview {background: white;}
.highlightsimage {width: 100%; border-radius: 5px; max-width: 700px; opacity: 0; transition: 1s;}
.highlightstextlay {width: 100%; max-width: 600px; opacity: 0; transition: 1s; position:relative;}
.highlightstitle {font-size: 3rem; font-weight: 600; color: #C01010;}
.highlightssubtitle {font-size: 2rem; color: #999; font-weight: 500; margin-bottom: 2rem; margin-top: 1rem;}
.highlightstext {font-size: 1.5rem;}
.rightlay1 {right:0px;}
.leftlay1 {left:0px;}
.rightlay0 {right:-100px;}
.leftlay0 {left:-100px;}
.highlightslay {flex-direction: row; justify-content: center; align-items: center; overflow-x: hidden;}
.highlightsimagemarginleft {margin-left: 30px;}
.highlightsimagemarginright {margin-right: 30px;}
.reversedir {flex-direction: row-reverse;}



.integrationview {padding: 200px 40px 200px 40px; box-sizing: border-box;}
.integrationtitle {font-size: 5rem; margin-bottom: 10px; color: #C01010; text-align: center;}
.integrationsubtitle {font-size: 2.6rem; margin-bottom: 100px; color: #999; font-weight: 500; text-align: center;}
.integrationimagelay {gap: 80px; max-width: 1400px;}
.integration {width: 150px; aspect-ratio: 1; background-size: contain; background-repeat: no-repeat; background-position-y: center;}
.integration2 {background-image: url(integration/ifood.svg);}
.integration3 {background-image: url(integration/deliverymuch.svg);}
.integration4 {background-image: url(integration/neemo.png);}
.integration5 {background-image: url(integration/aiqfome.svg);}
.integration6 {background-image: url(integration/wabiz.webp);}
.integration7 {background-image: url(integration/deliverydireto.png);}
.integration8 {background-image: url(integration/anotai.png);}
.integration01 {background-image: url(integration/abrahao.svg);}
.integration02 {background-image: url(integration/foodydelivery.png);}
.integration03 {background-image: url(integration/paygo.svg);}
.integration04 {background-image: url(integration/stone.svg);}
.integration05 {background-image: url(integration/pagbank.svg);}




.featuresview {padding: 150px 40px 150px 40px; width: 100%; background: #F9F9F9;  box-sizing: border-box;}
.featureslay {gap: 4rem; max-width: 1600px; flex-wrap: wrap; box-sizing: border-box; justify-content: center;}
.featurescard {height: 350px; width: 300px; padding: 1.2rem; border-radius: 5px; background: white; box-shadow:  0 4px 10px 0 rgba(0, 0, 0, 0.19); transition: 1s;}
.featurescard:hover {transform: scale(1.2);}
.featuresimage {width: 100%; border-radius: 5px; margin-top: 1rem;}
.featurestitle {font-size: 1.4rem; font-weight: 600; color: #C01010;}
.featurestext {font-size: 1.2rem; font-weight: 500; color: #555;}




.stepview {padding: 100px 40px 100px 40px;}
.stepstitle {}
.stepssubtitle {font-size: 2.5rem; color: #DDD;}
.stepblockslay {margin-top: 50px; gap: 20px;}
.stepblock {width: 250px; height: 250px; box-shadow: 4px 4px 20px #922; background: white; box-sizing: border-box; padding: 20px; border-radius: 5px;}
.stepname {font-size: 1.4rem; font-weight: 600; color: #555;}
.steptext {font-size: 1.2rem; text-align: center;}





.plansview {box-sizing: border-box; padding-top: 4rem; padding-bottom: 4rem;}
.planstitle {}
.planssubtitle {font-size: 2.5rem; color: #999; margin-bottom: 2rem;}
.plansblock {height: 500px; width: 300px; box-shadow: 0px 0px 10px 1px #AAA; border-radius: 0.5rem; padding: 2rem;}
.plansblocklay {gap: 2rem;}
.plansname {font-size: 2rem; color: #555; font-weight: 600; margin-bottom: 2rem;}
.plansprice {font-size: 5rem; line-height: 5rem; color: #A00; font-weight: 600;}
.planspricesub {font-size: 2rem; color: #777; font-weight: 600;}
.planspricefrom {font-size: 1.5rem; color: #999; font-weight: 500;}
.plansdesc {font-size: 1.1rem; margin-top: 2rem; color: #777;}
.plansitem {font-size: 1.1rem; font-weight: 500;}
.plansknow {font-size: 1.5rem; color: #AAA; font-weight: 500; margin-top: 4rem;}
.plansbutton {font-size: 1.1rem; font-weight: 500; margin-left: 1rem; background: #A00000; color: white;}





.calcview {gap: 1rem; box-sizing: border-box; background: #A00000; padding: 1rem;}
.calcmain {gap: 1rem; background: #FFFFFF; border-radius: 1rem; padding: 1rem; width: 100%; max-width: 500px;}
.calcobs {font-size: 1.2rem; color: #AAA;}
.calcpricelay {border-radius: 5px; padding: 5px; margin-top: 2rem; width: 100%;}






.companyview {padding: 100px 20px 10px 20px;}
.companysubtitle {font-size: 2.5rem; color: #666;}
.companytextlay {max-width: 1000px; font-size: 1.2rem; margin-top: 50px;}
.clientview {padding: 100px 0px 100px 0px;}
.clients {animation: clientsk 20s infinite linear;}
.clientlogosize {width: calc(14.28% - 40px);}
.clientlogosizew {width: 100px;}
.clientlogoeffect {transform: scale(1.0); transition: 0.5s;}
.clientlogoeffect:hover {transform: scale(1.1); transition: 0.5s;}




.testimonialview {box-sizing: border-box; padding-top: 4rem; padding-bottom: 4rem; gap: 3rem;}
.testimonialquotes {font-size: 2rem; color: #DDD;}
.testimonialimage {border-radius: 40px; width: 80px; height: 80px;}
.testimonialname {font-size: 1.2rem; color: #555; font-weight: 600; margin-left: 1rem;}
.testimonialname2 {font-size: 1.1rem; color: #AAA; font-weight: 500; margin-left: 1rem;}
.testimonialtext {font-size: 1.1rem; font-style: italic;}
.testimonialblock {min-height: 300px; width: 100%; max-width: 400px; box-shadow: 0px 0px 10px 1px #AAA; 
	background: white; border-radius: 0.5rem; padding: 1rem; gap: 1rem;}






.contactview {padding-top: 100px;}
.contacttitle {font-size: 3rem;}
.contactlay {flex-direction: row;}
.contactinner {margin-left: 50px;}
.contactformlay {background: #EEE; border-radius: 5px;}




.imageanime {opacity: 1;}





.footersocial {width: 48px; aspect-ratio: 1; background-size: contain; background-repeat: no-repeat; background-position-y: center;}
.footerfacebook {background-image: url(social/facebook.svg);}
.footerinstagram {background-image: url(social/instagram.svg);}
.footerlinkedin {background-image: url(social/linkedin.svg);}
.footerwhatsapp {background-image: url(social/whatsapp.svg);}





@keyframes teste { 0% {opacity:0;} 100% {opacity:1;} }
@keyframes teste2 { 0% {position:relative; left:-800px;} 100% {position:relative; left: 0px;} }
@keyframes teste3 { 0% {position:relative; right:800px;} 100% {position:relative; right: 0px;} }
@keyframes clientsk { 0% {transform: translate(0,0);} 100% {transform: translate(0,calc(-100% + 500px));} }




@media only screen and (max-width: 1600px){

	.prestext1 {font-size: 90px; line-height: 130px; width: 670px;}
	.prestext12 {font-size: 60px; line-height: 70px; width: 670px;}
	.prestext2 {font-size: 30px; line-height: 40px; width: 670px;}
	.presimage {width: 600px;}
}


@media only screen and (max-width: 1300px){
	

	.prestext1 {font-size: 70px; line-height: 110px; width: 500px;}
	.prestext12 {font-size: 45px; line-height: 50px; width: 500px;}
	.prestext2 {font-size: 24px; line-height: 30px; width: 500px;}
	.presimage {width: 500px;}
	
	

	.image {max-width: 500px;}
}



@media only screen and (max-width: 1000px){
	
	.navbar{padding: 0px 20px 0px 20px;}
	
	
	
	.prestextlay {padding-left: 20px;}
	.prestext1 {font-size: 70px; line-height: 90px; width: 450px;}
	.prestext12 {font-size: 40px; line-height: 50px; width: 450px;}
	.prestext2 {font-size: 20px; line-height: 30px; width: 450px;}
	.presimage {width: 500px;}
	
	
	
	.sessiontitle {font-size: 3rem;}
	
	

	
	
	.highlightstextlay {max-width: 600px;}
	.highlightslay {
	flex-direction: column-reverse;
	align-items: center;
	}
	.highlightsimagemarginleft {margin-left: 0px;}
	.highlightsimagemarginright {margin-right: 0px;}
	
	
	
	
	
	.integrationview {padding: 100px 40px 100px 40px;}
	.integrationtitle {font-size: 3rem; margin-bottom: 10px;}
	.integrationsubtitle {font-size: 1.6rem; margin-bottom: 50px;}
	.integrationimagelay {gap: 40px;}
	.integration {width: 90px;}

	
	
	
	.featureslay {gap: 2rem;}
	
	
	
	
	.planstitle {font-size: 3rem;}
	.planssubtitle {font-size: 1.2rem;}
	
	
	.stepstitle {font-size: 2.5rem;}
	.stepssubtitle {font-size: 1.2rem;}
	
	
	.clientlogosize {width: calc(25% - 40px);}
	
	
	
	
}

@media only screen and (max-width: 700px){
	
	.navbut {margin-left: 10px;}
	.navaboutbut {display: none;}
	.navlogo {height: 30px; width: 40px; background-image: url(logo.svg);}
	
	
	
	.prestextlay {padding-right: 20px;}
	.prestext1 {font-size: 55px; line-height: 70px; width: 370px; margin-top: 70px;}
	.prestext12 {font-size: 30px; line-height: 50px; width: 370px;}
	.prestext2 {width: 350px; margin-top: 30px;}
	.presbut {margin-bottom: 70px; margin-top: 50px; margin-bottom: 40px;}
	.preslay {flex-direction: column;}
	.presimage {width: min(100%, 500px); margin-left: 0px; margin: auto; margin-bottom: 50px;}
	
	
	
	
	.customwave {height: 400px;}
	.customim {height: 100px;}
	.customimageslay{gap: 30px;}
	.customblock {padding: 1rem;}
	.customtitle {font-size: 1.5rem; font-style: italic; margin-bottom: 1rem;}
	.customitem {font-size: 1.1rem;}
	.customfinal {font-size: 1rem; margin-top: 1rem;}
	
	
	
	.highlightstitle {font-size: 2rem;}
	.highlightssubtitle {font-size: 1.5rem;}
	.highlightstext {font-size: 1.1rem;}
		
		
		
	
	.integrationtitle {font-size: 2.4rem; margin-bottom: 10px;}
	.integrationsubtitle {font-size: 1.3rem; margin-bottom: 50px;}
	
	
	
	.featuresview {padding: 100px 20px 100px 20px;}
	.featurescard {width: 100%; height: auto; padding: 1.2rem;}
	.featurestitle {font-size: 1.2rem;}
	.featurestext {font-size: 1.1rem;}
	
	
	
	
	.calcview {padding: 0rem;}
	.calcmain {border-radius: 0rem;}
	
	
	
	.stepview {padding: 60px 20px 60px 20px;}
	.stepblock {width: 90vw; height: auto; margin: 5px 0px;}
		
	
    .clients {animation: clientsk 30s infinite linear;}
	.clientlogosize {width: calc(50% - 40px);}
	
	
	
	.contacttitle {font-size: 2rem;}
	.contactlay {flex-direction: column;}
	.contactinner {margin-left: 0px;}
	
}