*{margin: 0;
  padding: 0;
  box-sizing: border-box;

}

html, body {
  overflow-x: hidden;
}


@font-face {
  font-family: 'Plateia Bold';
  src: url('assets/Plateia Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


header{
	background: #303030;
	background: radial-gradient(circle, rgba(48, 48, 48, 1) 1%, rgba(0, 0, 0, 1) 47%);

}

.menu img{
	width: 200px;
}


header{
padding: 30px;
}

header .menu{
	display: flex;
	justify-content: space-between;
	padding: 10px 14px;
	align-items: center;
	border:solid 2px #98773f;
	border-radius: 300px;

}

.btn{
	background: #00000000;
	text-decoration: none;
	padding: 15px 30px;
	border-radius: 30px;
	border:solid 2px #98773f;
	color: #98773f;
	font-family: inter;
	font-weight: 500;

}

.btn:hover{
	background: #9D6D2D;
background: linear-gradient(90deg, rgba(157, 109, 45, 1) 0%, rgba(244, 235, 158, 1) 48%, rgba(157, 109, 45, 1) 100%);
	color: black;
	

}

.btn2{
	background: #9D6D2D;
background: linear-gradient(90deg, rgba(157, 109, 45, 1) 0%, rgba(244, 235, 158, 1) 48%, rgba(157, 109, 45, 1) 100%);
	text-decoration: none;
	padding: 15px 30px;
	border-radius: 30px;
	border:solid 2px #98773f;
	color: black;
	font-family: inter;
	font-weight: 500;

}

.btn2:hover{
	background: #00000000;
	color: #98773f;
	
	
	
}

.chamada1{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 30px 30px;
}

.chamada1 a{
margin: 20px;
}

.tela-ajust{
display: flex;
justify-content: center;
}

.tela{
	width: 80%; /* ou 50%, ou qualquer outro valor */
  height: auto; /* mantém a proporção da imagem */
}

h1{
	font-family: 'Plateia Bold', sans-serif;
    background: linear-gradient(to right, #98773e, #f2eba2, #98773e);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 36px;
}

h2{
 	font-family: inter;
 	font-size: 18px;
 	font-weight: 300;
 	color: white;
 	    padding-top: 20px;
}

.bar{
	background: white;
	padding: 1px;
	width: 80%;
}


.sec1{
background: #9D6D2D;
background: linear-gradient(90deg, rgba(157, 109, 45, 1) 0%, rgba(244, 235, 158, 1) 48%, rgba(157, 109, 45, 1) 100%);
}

.sec1 h1,
.sec1 h2{
	color:#1c1c1c;
}

.sec1 h2{
	font-weight: 400;
}

.sec1-ajust{
	display: flex;
}

.card-ajust{
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
	padding: 30px;
}

.card{
	background: #1c1c1c;
	padding: 120px 60px;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	text-align: center;
	font-family: inter;
	
	gap: 10px;
	border-radius: 10px;
	box-shadow: -6px 6px 13px -3px rgba(0,0,0,0.33);
-webkit-box-shadow: -6px 6px 13px -3px rgba(0,0,0,0.33);
-moz-box-shadow: -6px 6px 13px -3px rgba(0,0,0,0.33);
	transition: background 0.9s ease, background-size 0.9s ease;
}


.card i{
	font-size: 30px;
}
.card i,
span{

	 background: linear-gradient(to right, #98773e, #f2eba2, #98773e);
    -webkit-background-clip: text;
    color: transparent;
}
.card i:hover{
	font-size: 30px;
	 background: linear-gradient(to right, #98773e, #f2eba2, #98773e);
    -webkit-background-clip: text;
    color: transparent;
}

.sec1-text{
	padding:60px;
}

.sec1 .bar{
	margin: 20px 0px;
}
.card {
  transition: background 0.9s ease, background-size 0.9s ease;
  background-color: black; 
}

.card-credito:hover {
  background: url('assets/credito.jpg');
  background-size: cover;
  background-position: center;
}

.card-boleto:hover {
  background: url('assets/boleto.jpg');
  background-size: cover;
  background-position: center;
}

.card-pix:hover {
  background: url('assets/pix.jpg');
  background-size: cover;
  background-position: center;
}

.card:hover i,
.card:hover span {
  color: white;
  transform: scale(1.2);
  transition: all 0.5s ease;
}

.sec2{background: black}

.sec2-text{
	justify-content: center;
	
	text-align: center;
	padding: 60px 30px 30px 30px;
}

.ecossistema{
	display: flex;
	justify-content: center;
	gap: 15px;
	padding: 8px 60px 8px 60px;
}

.ecossistema-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 30px;
background: #9D6D2D;
background: linear-gradient(90deg, rgba(157, 109, 45, 1) 0%, rgba(244, 235, 158, 1) 48%, rgba(157, 109, 45, 1) 100%);
border-radius: 10px;
}

.ecossistema-item i{
	color: black;
	font-size: 30px;
}

.ecossistema-item span{
	font-size: 20px;
	font-family: inter;
	color: black;
}

.sec2-ajust{
	padding-bottom: 60px;
}

.sec3{
	background: black;

	text-align: center;
}

.sec3,
h2 {
	padding-bottom: 30px;
}

.sec3 .btn2{
display: inline-block;
}

.sec4{
	padding: 60px;
	background: #303030;
	background: radial-gradient(circle, rgba(48, 48, 48, 1) 1%, rgba(0, 0, 0, 1) 47%);
}

.sec4-text{

	text-align: left;
}


.publico-base{
display: flex;
justify-content: center;
gap: 15px;
}

.publico{
	display: flex;
background: black;
padding: 30px;
border-radius: 10px;
align-items: center;
justify-content: center;
box-shadow: -6px 6px 13px -3px rgba(0,0,0,0.33);
-webkit-box-shadow: -6px 6px 13px -3px rgba(0,0,0,0.33);
-moz-box-shadow: -6px 6px 13px -3px rgba(0,0,0,0.33);
}

.publico span{
	font-family: inter;
	font-size: 20px;
}

.sec5{
	background: black;
}

.carrossel-itens{
	display: flex;
	padding: 60px;
	gap: 30px;
	justify-content: center;
	align-items: center;
}


.fine-bar-div{
	justify-content: center;
	display: flex;
}
.fine-bar{
	display: flex;
	justify-content: center;
	width: 80%;
	height: 1px;
	background:#282828;
}

.carrossel-itens img{
	max-width: 160px;
	height: 100%;
}

.sec6{
	background: black;
	padding: 60px 120px;
}



/*.blue{
	color:#329cff;
}

.orange{
	color: #ffb448;
}

.green{
	color: #48e23c;
}*/

.blue{
	color:#ff1329;
}

.orange{
background: linear-gradient(to right, #98773e, #f2eba2, #98773e);
    -webkit-background-clip: text;
    color: transparent;
}

.green{
	color: #585858;
}

 

.fake-code{
	font-family: inter;
	color: white;
	
	padding: 0px 120px;
}

.sec6-ajust{
	display: flex;
	align-items: center;
}

.sec7{
padding: 30px;
	background: #9D6D2D;
background: linear-gradient(90deg, rgba(157, 109, 45, 1) 0%, rgba(244, 235, 158, 1) 48%, rgba(157, 109, 45, 1) 100%);
}

.sec7-ajust{
	text-align: center;
align-items: center;
	justify-content: center;

}

.sec7-ajust h1,
.sec7-ajust h2{
	color: #1c1c1c;
}

.bar-div{
	display: flex;
	justify-content: center;
}

.bar-div .bar{
	width: 36%;
	margin: 15px 15px;
}



.painel-base{
	display: flex;
	padding: 8px 30px;
	gap: 20px;
}

.painel-item{
	display: flex;
	background: black;
	padding: 30px;
	border-radius: 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 20px;
	box-shadow: -6px 6px 13px -3px rgba(0,0,0,0.33);
-webkit-box-shadow: -6px 6px 13px -3px rgba(0,0,0,0.33);
-moz-box-shadow: -6px 6px 13px -3px rgba(0,0,0,0.33);
}

.painel-item i{
	font-size: 30px;
	
	 background: linear-gradient(to right, #98773e, #f2eba2, #98773e);
    -webkit-background-clip: text;
    color: transparent;
}

.painel-item span{
		font-size: 20px;
	font-family: inter;
	
	 background: linear-gradient(to right, #98773e, #f2eba2, #98773e);
    -webkit-background-clip: text;
    color: transparent;
}


.sec7-text2{
	text-align: center;

}

.sec7-text2 .fine-bar-div{
	padding: 15px 0px;
}

.sec7-text2 h2{
	color: #1c1c1c;
}

.sec8{
	background: #303030;
	background: radial-gradient(circle, rgba(48, 48, 48, 1) 1%, rgba(0, 0, 0, 1) 47%);
	padding: 60px 30px;
}

.step{
	display: flex;
	padding: 30px;
	gap: 30px;
}

.step-item{
background: black;
padding: 30px;
border-radius: 10px;
}

.step-h1{
	font-family: inter;
	font-size: 20px;
	color: white;
}

.step-h2{
	font-family: inter;
	font-size: 12px;
	color: white;
	font-weight: 200;
}

.sec9{
	background: black;
	padding: 60px 120px;
}

.sec9-ajust{
	justify-content: center;
	text-align: center;
}

.sec9 .fine-bar{
	width: 100%;
}

footer{
	background: black;
}

.footer-itens span{
	font-family: inter;
	color: white;
}

footer {
	display: flex;
	flex-direction: column;
	padding-bottom: 60px;
}

footer h2{
	text-align: center;
}

.footer-itens{
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: center;
}

.vertical-bar{
	height: 12px;
	width: 1px;
	background: white;
}

.direitos .span1,
.direitos .span2{
	font-family: inter;
	display: flex;
	flex-direction: column;
	color: white;
	text-align: center;
}

.span2{
	font-size: 12px;
}

footer h2{
	padding-top: 30px;
}


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

	.card i {
    font-size: 46px;
}
.card span {
    font-size: 24px;
    font-weight: bold;
}

.sec2 {
    background: black;
    padding: 0px 10px;
}


  .sec1-ajust {
    display: block;
  }

  .menu img {
    width: 150px;
  }

  .menu {
    display: flex;
  }

  .chamada1 h1 {
    font-size: 24px;
    text-align: center;
  }

  .chamada1 h2 {
    font-size: 16px;
    text-align: center;
  }

  .chamada1 a {
    margin: 10px;
    text-align: center;
  }

  .tela {
    width: 100%;
  }

  .sec1-text {
    padding: 30px;
    text-align: center;
  }

  .card-ajust {
    flex-direction: column;
    padding: 20px;
  }

  .card {
    width: 100%;
  }

  .ecossistema {
    flex-direction: column;
    padding: 10px;
  }

  .publico-base {
    flex-direction: column;
    
  }

  .carrossel-itens {
    flex-wrap: wrap;
    padding: 30px 10px;
  }

  .carrossel-itens img {
    max-width: 120px;
  }

  .sec6-ajust {
    flex-direction: column;
   
    align-items: start;
  }

 .sec3-ajust h1{
 	padding: 0px 10px;
 }

  h1{
  	font-size: 30px;
  }

.vertical-bar{
	display: none;
}

.sec6{
	    padding: 60px 20px;
}
  .fake-code {
    padding: 0px;
    margin-bottom: 30px;
  }

  .painel-base {
    flex-direction: column;
    padding: 10px;
  }

  .step {
    flex-direction: column;
    padding: 20px;
  }

  .sec9 {
    padding: 30px;
  }

  footer {
    padding: 30px 10px;
  }

  .footer-itens {
    flex-direction: column;
    gap: 10px;
  }

  .sec1 .bar{
	margin: 20px auto;
}

}



/*Animacoes de entrada e saida*/


/*animacao 1*/
.animate-entry1 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.animate-entry1.visible {
  opacity: 1;
  transform: translateY(0);
}

/*animacao 2*/

.animate-entry2 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1.2s ease-out;
}

.animate-entry2.visible {
  opacity: 1;
  transform: translateY(0);
}

/*animacao 3*/

.animate-entry-button {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1.5s ease-out;
}

.animate-entry-button.visible {
  opacity: 1;
  transform: translateY(0);
}

/*animacao 4*/

.animate-entry4 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1.8s ease-out;
}

.animate-entry4.visible {
  opacity: 1;
  transform: translateY(0);
}

/*animacao 5*/

.animate-entry5 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 2.1s ease-out;
}

.animate-entry5.visible {
  opacity: 1;
  transform: translateY(0);
}



@media only screen and (max-width: 520px){
	    .menu img {
        width: 120px;
    }
}