.test_btn {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 32px;
  right: 32px;
  width: 110px;
  height: 104px;
  transform: rotate(8deg);
  scale: 1;
  background-image: url('../assets/images/teste.svg');
  filter: drop-shadow(8px 8px 4px rgba(0, 0, 0, 0.25));
  transition: scale 0.08s, transform 0.12s;
  padding: 16px;
  line-height: 19.5px !important;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  gap: 2px;
  color: #FFFFFF;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: background-color 0.2s;
}
.test_btn img{
  filter: invert(1);
}
.test_btn:hover{
  scale: 1.10;
  transform: rotate(5deg);
  transition: scale 0.08s, transform 0.12s, filter 0.08s;
  filter: drop-shadow(12px 12px 6px rgba(0, 0, 0, 0.25));
}
.test_btn:active{
  scale: 0.96;
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.25));
}
internal{
  flex-direction: column!important;
}
nav{
  z-index: 2;
}

banner{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0px;
  height: 578px;
  width: 100%;
  overflow: visible!important;
}
banner .background{
  position: absolute;
  background-image: url('../assets/images/solucoes_banner.png'); 
  background-size: cover;
  background-position: center;
  height: inherit;
  width: 100%;
}
body.darkmode banner .background{
  background-image: url('../assets/images/solucoes_banner.png'); 
}
banner .filter{
  position: absolute;
  content: '';
  height: inherit;
  width: 100%;
  background: linear-gradient(90deg, rgba(38, 46, 56, 0.8) 0%, rgba(38, 46, 56, 0.664) 50%, rgba(38, 46, 56, 0) 100%);
}
body.darkmode banner .filter{
  background: rgba(38, 46, 56, 0.7) 100%; 
}
banner .content{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1318px;
  padding-top: 98px;
  padding-bottom: 98px;
}
banner .content .texts{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  width: 100%;
  max-width: 692px;
  gap: 42px;
}
.texts h2{
  font-size: 46px;
  line-height: 50px;
  font-weight: 900;
  color: #FFF;
  text-align: start;
}
.texts p{
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
  color: #FFF;
  text-align: start;
}
.texts .details{
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-start;
  gap: 34px;
}
.details .detail{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.detail .icon{
  filter: invert(1);
}
.detail p{
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  color: #FFF;
  text-align: start;
}
.content .mockup{
  background-image: url('../assets/images/solucoesMockup.png');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  width: 54%;
  aspect-ratio: 360 / 281;
  margin-top: 78px;
  flex-shrink: 0;
  margin-right: -144px;
}

@media only all and (max-width: 1070px){
  banner{
    height: fit-content !important;
  }
  banner .background{
    height: 100%;
  }
  banner .content{
    flex-direction: column;
    justify-content: center;
    gap: 36px;
    padding-bottom: 0px;
    margin-bottom: -26px;
  }
  banner .filter{
    background: rgba(38, 46, 56, 0.7) 100%;
  }
  .content .mockup{
    width: 80%;
    margin-top: 0px;
  }
  banner .content .texts{
    align-items: center;
    justify-content: center;
    max-width: 820px;
  }
  banner .texts h2{
    text-align: center;
  }
  banner .texts p{
    text-align: center;
  }
}

@media only all and (max-width: 820px){
  .test_btn{
    width: 100px;
    height: 95px;
    font-size: 18px;
    background-size: contain;
    right: 15px;
    bottom: 15px;
  }
}

@media only all and (max-width: 690px){
  .details .detail{
    margin-right: 16px;
    align-items: center;
    justify-content: center;
  }
  .texts .details{
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media only all and (max-width: 720px){
  .content .mockup{
    width: 95%!important;
    margin-right: -68px!important;
  }
  banner .texts h2{
    font-size: 44px;
  }
}

@media only all and (max-width: 520px){
  .content .mockup{
    width: 100%!important;
  }
}

@media only all and (max-width: 420px){
  .content .mockup{
    width: 115%!important;
  }
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

spreadsheet{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 36px;
  width: 100%;
  gap: 64px;
}
spreadsheet .content{
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1318px;
  align-items: center;
  justify-content: space-between;
  gap: 54px;
}
spreadsheet .texts{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 42px;
  width: 100%;
  max-width: 524px;
}
spreadsheet .texts h2{
  font-size: 44px;
  font-weight: 700;
  line-height: 52px;
  color: rgba(54, 83, 130, 1);
}
spreadsheet .texts p{
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  color: rgba(79, 79, 79, 1);
}
body.darkmode spreadsheet .texts h2{
  color: #FFF; 
}
body.darkmode spreadsheet .texts p{
  color: #FFF; 
}
spreadsheet .content .img{
  background-image: url('../assets/images/spreadsheets1.svg');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  width: 52%;
  aspect-ratio: 590 / 329;
}
body.darkmode spreadsheet .content .img{
  background-image: url('../assets/images/spreadsheets2.svg'); 
}
spreadsheet .mainFunctions{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1318px!important;
}
.mainFunctions .mainFunction {
  display: flex;
  gap: 12px;
  padding: 16px;
  height: 100%;
  min-height: 122px;
  align-items: flex-start;
  width: calc(50% - 8px);
  flex-shrink: 0;
}
.iconBox {
  flex-shrink: 0;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
  width: 54px;
  height: 54px;
}
body.darkmode spreadsheet .icon{
  filter: invert(1) grayscale(1) brightness(1);
}
.textsFunction {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
}
.functionTitle {
  font-size: 1.2rem;
  font-weight: 600;
  color: #274C89;
}
.functionSub {
  font-size: 0.9rem;
  color: rgba(79, 79, 79, 1);
  line-height: 1.4;
}

@media only all and (max-width: 1070px){
  spreadsheet .content{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  spreadsheet .texts{
     align-items: center;
     justify-content: center;
      max-width: 820px;
  }
  spreadsheet .texts h2{
    text-align: center;
  }
  spreadsheet .texts p{
    text-align: center;
  }
  spreadsheet .content .img{
    width: 66%;
  }
}

@media only all and (max-width: 820px){
  spreadsheet .mainFunctions{
    padding-bottom: 0;
  }
  spreadsheet .mainFunction{
    height: 100%;
    min-height: 152px;
  }
}

@media only all and (max-width: 730px){
  spreadsheet .mainFunctions{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
  }
  spreadsheet .mainFunctions .mainFunction{
    width: 100%;
    min-height: 0;
  }
}

@media only all and (max-width: 540px){
  spreadsheet .content .img{
    width: 100%;
  }
  spreadsheet .texts h2{
    font-size: 42px;
  }
}

@media only all and (max-width: 410px){
  spreadsheet .texts h2{
    font-size: 38px;
  }
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

middle{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 64px;
  width: 100%;
}
middle .content{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1318px;
  gap: 42px;
}
middle .content .texts{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 44px;
  width: 100%;
  max-width: 788px;
}
middle .vetImg{
  background-image: url('../assets/images/vet1.svg');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  width: 76%;
  aspect-ratio: 370 / 370;
}
middle .texts h2{
  font-size: 44px;
  font-weight: 700;
  line-height: 52px;
  color: rgba(58, 76, 104, 1);
}
middle .texts p{
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  color: rgba(79, 79, 79, 1);
}
body.darkmode middle .texts h2{
  color: #FFF; 
}
body.darkmode middle .texts p{
  color: #FFF; 
}
middle button{
  background-color: rgba(58, 76, 104, 1);
}

@media only all and (max-width: 1070px){
  middle{
    margin-bottom: 24px;
  }
  middle .vetImg{
    width: 36%;
  }
  middle .content{
    flex-direction: column-reverse;
    align-items: center;
  }
  middle .content .texts{
    align-items: center;
    justify-content: center;
    max-width: 820px;
  }
  middle .texts h2{
    text-align: center;
  }
  middle .texts p{
    text-align: center;
  }
}

@media only all and (max-width: 820px){
  middle .vetImg{
    width: 48%;
  }
  middle{
    margin-bottom: -22px;
  }
}

@media only all and (max-width: 620px){
  middle .vetImg{
    width: 56%;
  }
}

@media only all and (max-width: 520px){
  middle .vetImg{
    width: 80%;
  }
  middle .texts h2{
    font-size: 40px;
  }
}

@media only all and (max-width: 420px){
  middle .vetImg{
    width: 100%;
  }
}
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
numbers{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 56px;
}
numbers animated{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: rgba(58, 76, 104, 1);
}
numbers animated .numberBig{
  display: flex;
  width: calc(50% - 8px);
  max-width: 612px;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  padding: 24px;
}
.numberBig p{
  font-size: 24px;
  line-height: 42px;
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
numbers .mainNumbers{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 72px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1318px!important;
}
.mainNumbers .mainNumber {
  display: flex;
  gap: 12px;
  padding: 16px;
  height: 100%;
  align-items: center;
  width: calc(50% - 8px);
  max-width: 580px;
  flex-shrink: 0;
}
.iconBox {
  flex-shrink: 0;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
  width: 54px;
  height: 54px;
}
body.darkmode numbers .icon{
  filter: invert(1) grayscale(1) brightness(1);
}
.textNumber {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
}
.textNumber p {
  font-size: 0.9rem;
  color: rgba(79, 79, 79, 1);
  line-height: 1.4;
}
hr{
  display: none;
}

@media only all and (max-width: 820px){
  numbers{
    gap: 46px;
  }
  numbers .mainNumbers{
    padding-bottom: 0;
    margin-bottom: 56px;
  }
  numbers .mainNumber{
    height: 100%;
    min-height: 152px;
  }
  hr{
    display: flex;
    width: 100%;
    max-width: 320px;
  }
  numbers animated{
    flex-direction: column;
  }
  numbers animated .numberBig{
    width: 100%;
    max-width: 720px;
  }
}

@media only all and (max-width: 730px){
  numbers .mainNumbers{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
  }
  numbers .mainNumbers .mainNumber{
    width: 100%;
    min-height: 0;
  }
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
boxes{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
boxes .title{
  display: flex;
  width: 100%;
  max-width: 704px;
  align-items: center;
  justify-content: center;
}
boxes .title h2{
  font-size: 44px;
  line-height: 52px;
  color: rgba(39, 76, 137, 1);
  font-weight: 700;
  text-align: center;
  margin-bottom: -10px;
}
body.darkmode boxes .title h2{
  color: #FFF;
}
values{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 64px 0;
}
.background{
  position: absolute;
  content: '';
  height: 398px;
  width: 100%;
  background-color: rgba(39, 76, 137, 0.56);
}
body.darkmode .background{
  background-color: #2c3e58;
}
.valuesContainer{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1002px;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
.valueBox{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: calc(33.33% - 21.33px);
  height: 209px;
  border-radius: 6px;
  background-color: rgba(222, 234, 243, 1);
  box-shadow: 0px 8px 0px 0px rgba(0, 0, 0, 0.12)!important;
  text-align: start;
  padding: 24px;
  gap: 16px;
  position: relative;
}
body.darkmode values .valueBox{
  background-color: rgba(54, 83, 130, 1);
}
.valueBox .iconBox{
  flex-shrink: 0;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.valueBox .icon{
  width: 56px;
  height: 56px;
}
body.darkmode .valueBox .icon{
  filter: invert(1) grayscale(1) brightness(1.5);
}
.valueTexts{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: 20px;
}
.valueTexts p{
  color: rgba(39, 76, 137, 1);
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
}

@media only all and (max-width: 980px){
  .valueBox{
    width: calc(50% - 16px);
  }
  .background{
    height: 668px;
  }
}

@media only all and (max-width: 630px){
  .valueBox{
    width: 100%;
  }
  .background{
    height: 1474px;
  }
  boxes .title h2{
    font-size: 40px;
  }
  boxes {
    gap: 16px;
  }
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

final{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 56px;
}
final .content{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top: 64px;
  padding-bottom: 36px;
  width: 100%;
  max-width: 1318px;
  gap: 36px;
}
final .content .texts{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 642px;
  align-items: center;
  margin-left: -28px;
  justify-content: center;
  gap: 28px;
}
final .texts h2{
  font-size: 44px;
  font-weight: 700;
  line-height: 52px;
  color: rgba(58, 76, 104, 1);
  text-align: center;
}
final .texts h3{
  font-size: 24px;
  font-weight: 700;
  line-height: 38px;
  color: rgba(66, 121, 214, 1);
  text-align: center;
}
final .texts p{
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  color: rgba(79, 79, 79, 1);
  text-align: center;
}
body.darkmode final .texts h2{
  color: #FFF; 
}
body.darkmode final .texts h3{
  color: #FFF; 
}
body.darkmode final .texts p{
  color: #FFF; 
}
final .linkWpp{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.linkWpp .icon{
  width: 24px;
  height: 24px;
}
body.darkmode final .linkWpp .icon{
  filter:invert(1);
}
.linkWpp a{
  text-decoration: underline;
  color: rgba(39, 76, 137, 1);
  width: 100%!important;
  max-width: 642px!important;
}
body.darkmode final .linkWpp a{
  color: #FFF;
}
final .loginBox{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 24px;
  max-width: 426px;
}
final .loginBox .form_topic{
  margin-top: 4!important;
}
final grid2Col{
  gap: 22px!important;
}
final .loginBox a{
  width: 100%!important;
}
final .loginBox button{
  width: 100%!important;
  justify-content: center;
}
final .stage_container{
  width: 100%;
}

@media only all and (max-width: 1360px){
  final .content{
    flex-direction: column;
  }
  final .content .texts{
    max-width: 820px;
    margin-left: 0!important;
  }
  final .loginBox{
    max-width: 512px;
  }
}

@media only all and (max-width: 520px){
  final .texts h2{
    font-size: 42px;
  }
}

@media only all and (max-width: 410px){
  final .texts h2{
    font-size: 38px;
  }
  final .texts h3{
    font-size: 22px;
  }
}