:root {
    --amarelo-aprovacredi: #CAB25F;
    --azul-aprovacredi: #131c35;
}

*::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }
  *::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #CAB25F;
  }
  
  *::-webkit-scrollbar-track:hover {
    background-color: #A3904D;
  }
  
  *::-webkit-scrollbar-track:active {
    background-color: #A3904D;
  }
  
  *::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #756C21;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background-color: #BCAD35;
  }
  
  *::-webkit-scrollbar-thumb:active {
    background-color: #BCAD35;
  }
  
*{
    margin: 0;
}
body{
    height: 100%;
    width: 100%;
    background-color: var(--azul-aprovacredi);
}

/*Conteudo Geral*/
h1.tituloSec{
    color: var(--amarelo-aprovacredi);
}

p.textAreaCont{
    color: white;
}

.textAreaCont br{
    margin-top: 25px;
}
footer {
    width: 100%;
    z-index: 1;
    color: white;
    text-align: center;
    font-size: 20px;
    display: flex;
    flex-direction: column;
}

footer p a{
    text-decoration: none;
    color: var(--amarelo-aprovacredi);
}

footer p a:hover{
    color: #746637;
}

footer hr{
    margin: 5px auto;
    width: 95%;
}


/*Header Area*/
header {
    margin: 0 auto;
    width: 95%;
    position: absolute; /* Faz com que o header flutue sobre outros elementos */
    top: 0; /* Alinha o header ao topo da página */
    left: 0; /* Alinha o header ao lado esquerdo da página */
    right: 0; /* Estende o header até o lado direito da página */
    background: transparent; /* Define o fundo como invisível */
    display: flex; /* Usa flexbox para o alinhamento interno */
    justify-content: space-between; /* Distribui o logo e o botão com espaço entre eles */
    padding: 10px 20px; /* Adiciona algum padding para espaçamento interno */
    z-index: 1000; /* Garante que o header fique sobre outros elementos */
}

.logoArea img {
    max-height: 150px; /* Define uma altura máxima para o logo, ajustando conforme necessário */
}

.btnLogin button {
    margin-top: 19px;
    background-color: #CAB25F; /* Define a cor do fundo do botão */
    color: white; /* Define a cor do texto do botão */
    border: none; /* Remove a borda do botão */
    padding: 10px 5px; /* Adiciona padding ao botão */
    border-radius: 5px; /* Adiciona bordas arredondadas ao botão */
    cursor: pointer; /* Adiciona o cursor pointer ao botão */
}

.btnLogin button:hover {
    background-color: #b99e3c; /* Muda a cor do botão ao passar o mouse */
}

.btnParceiro {
    width: 85%;

}

.btnParceiro button {
    text-transform: uppercase;
    width: 100%;
    height: 75px;
    background-color: #b99e3c; /* Define a cor do fundo do botão */
    color: white; /* Define a cor do texto do botão */
    border: none; /* Remove a borda do botão */
    border-radius: 15px;
    cursor: pointer; /* Adiciona o cursor pointer ao botão */
    position: relative; /* Necessário para o efeito de pulsação */
    z-index: 1; /* Para garantir que o conteúdo do botão fique acima da animação */
    transition: background-color 0.3s ease; /* Suaviza a troca de cor no hover */
    box-shadow: 0 0 0px 0 rgba(255, 165, 0, 0.7); /* Inicialmente sem brilho */
    font-size: 40px;
}

.btnParceiro button:hover {
    background-color: #91771b; /* Muda a cor do botão ao passar o mouse */
}

.pulsebtn button{
    animation: pulse 2s infinite; /* Animação de pulsação */
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0px 0 #91771b;
    }
    50% {
        box-shadow: 0 0 10px 5px #6e5809; /* Efeito de brilho máximo */
    }
    100% {
        box-shadow: 0 0 0px 0 #91771b; /* Volta ao estado inicial */
    }
}

.btnAnimd {
    background: transparent;
    border: none;
}


/* Estilos para o botão de toggler */
.btnAnimd {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.hamburger {
    display: inline-block;
    margin-top: 15px;
}

.hamburger input {
    display: none;
  }

.hamburger svg {
    height: 3em;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
    fill: none;
    stroke: white;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
    stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
    transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
}

.menuMobileLinks{
    background: rgba(0, 0, 0, 0.589);
}

.linksArea {
    display: flex;
    flex-direction: column;
}

.linksArea a{
    text-transform: uppercase;
    padding: 8px;
    margin-bottom: 10px;
    border: solid 1px black;
    background-color: var(--amarelo-aprovacredi);
    text-decoration: none;
    color: #fff;
    border-radius: 15px;
    text-align: center;
}
  

.btnLoginMobile {
    display: none;
}

.headerArea {
    display: flex; /* Usa flexbox para o layout interno */
    align-items: center; /* Alinha verticalmente ao centro */
    justify-content: space-between; /* Garante espaço igual entre as divs */
    width: 100%; /* Garante que a div ocupe 100% da largura disponível */
    height: auto;
    box-sizing: border-box; /* Inclui o padding na largura e altura totais */
    position: relative; /* Necessário para o posicionamento do pseudo-elemento */
    overflow: hidden; /* Garante que o pseudo-elemento não extravase a área da div */
}

.headerArea::before {
    content: ''; /* Cria um pseudo-elemento vazio */
    position: absolute; /* Posiciona o pseudo-elemento em relação à div */
    top: 0; /* Alinha o pseudo-elemento ao topo da div */
    left: 0; /* Alinha o pseudo-elemento ao lado esquerdo da div */
    width: 100%; /* Faz o pseudo-elemento cobrir toda a largura da div */
    height: 100%; /* Faz o pseudo-elemento cobrir toda a altura da div */
    background: url('../img/FundoHeader.png') no-repeat center center; /* Imagem de fundo com posicionamento */
    background-size: cover; /* Faz com que a imagem cubra toda a div */
    z-index: 1; /* Garante que o pseudo-elemento fique abaixo do conteúdo */
}

.headerArea::after {
    content: ''; /* Cria um pseudo-elemento vazio */
    position: absolute; /* Posiciona o pseudo-elemento em relação à div */
    top: 0; /* Alinha o pseudo-elemento ao topo da div */
    left: 0; /* Alinha o pseudo-elemento ao lado esquerdo da div */
    width: 100%; /* Faz o pseudo-elemento cobrir toda a largura da div */
    height: 100%; /* Faz o pseudo-elemento cobrir toda a altura da div */
    background: rgba(15, 23, 47, 0.804); /* Cor azul com 50% de opacidade */
    z-index: 2; /* Garante que o pseudo-elemento fique acima da imagem de fundo */
    pointer-events: none; /* Permite que os cliques passem através do pseudo-elemento */
}

.headerArea > * {
    position: relative; /* Posiciona o conteúdo sobre os pseudo-elementos */
    z-index: 3; /* Garante que o conteúdo fique acima dos pseudo-elementos */
}



.textAreaTitulo {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza a div */
    justify-content: center; /* Alinha verticalmente ao centro */
    width: 50%;
    margin-bottom: 15px;
    text-align: center; /* Centraliza o texto na div */
}


.textAreaTitulo h1 {
    font-size: calc(2vw + 2vh + 2vmin); /* Ajusta o tamanho do texto dinamicamente */
    text-align: left; /* Alinha o texto à esquerda */
}

.textAreaTitulo p {
    width: 85%; /* Mantém a mesma largura do h1 */
    text-align: justify; /* Alinha o texto à esquerda */
    margin-bottom: 20px;
    font-size: 25px;
}

.textAreaTitulo a{
    width: 85%;
}

.textAreaTitulo a button {
    width: 100%;
}



.textAreaTitulo,
.imgHeader {
    margin-top: 7.5%;
    width: 50%; /* Define que cada div ocupa 50% da largura */
}

.imgHeader {
    margin-top: auto;
    display: flex;
    justify-content: center; /* Centraliza a imagem horizontalmente */
    align-items: center; /* Centraliza a imagem verticalmente */
}

.imgHeader img {
    max-width: 100%; /* Garante que a imagem não ultrapasse a largura da div */
    height: auto; /* Mantém a proporção da imagem */
}

.separarsetaAmarela{
    width: 100%;
    height: 5.5vh;
    border-radius: 0 0px 80px 80px;
    background-color: var(--amarelo-aprovacredi);
    display: flex;
}

.setaSepara{
    margin-left: auto;
    margin-right: auto;
    width:10%;
    height: 8vh;
    border-radius: 50%;
    background-color: var(--amarelo-aprovacredi);   
    display: flex;
    flex-direction: column;
}

.setaSepara {
    display: flex; /* Garante que a imagem esteja centralizada */
    align-items: center; /* Alinha verticalmente ao centro */
    justify-content: center; /* Alinha horizontalmente ao centro */
}

.setaSepara img {
    margin: auto; /* Centraliza a imagem */
    width: 50px; /* Define a largura da imagem */
    animation: moveUpDown 2s ease-in-out infinite; /* Aplica a animação */
}

/* Define a animação de movimento para cima e para baixo */
@keyframes moveUpDown {
    0% {
        transform: translateY(0); /* Início na posição original */
    }
    50% {
        transform: translateY(-7px); /* Move para cima */
    }
    100% {
        transform: translateY(0); /* Retorna à posição original */
    }
}

/*System*/

.systemArea {
    z-index: 0;
    display: flex; /* Usa flexbox para o layout interno */
    width: 100%; /* Garante que a div ocupe 100% da largura disponível */
    height: auto;
    padding: 20px; /* Espaçamento interno */
    box-sizing: border-box; /* Inclui o padding na largura e altura totais */
    position: relative; /* Necessário para o posicionamento do pseudo-elemento */
    overflow: hidden; /* Garante que o pseudo-elemento não extravase a área da div */
    flex-direction: column;
}



.systemArea > * {
    position: relative; /* Posiciona o conteúdo sobre os pseudo-elementos */
    z-index: 3; /* Garante que o conteúdo fique acima dos pseudo-elementos */
}

.systemArea h1{
    width: 100%;
    margin-top: 25px;
    font-size: 75px;
    color: var(--amarelo-aprovacredi);
    text-align: center;
}

.textSystemArea {
    color: white;
}

.textSystemArea button{
    background-color: green;
}

.textSystemArea button:hover{
    background-color: #0c6a13;
}


.textSystemArea p{
    font-size: 30px;
    text-align: justify;
    margin: 15px auto;
    width: 85%;
}

.imgSystemArea{
    display: flex;
}


.imgSystemArea img {
    margin: 5px auto;
    width: 80%;
}


.imgSystemAreaCelular{
    display: flex;
}


.imgSystemAreaCelular img {
    margin: 5px auto;
    width: 100%;
    height: 100%;
}

/*Diferencial*/

.nossosBancosArea {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaçamento entre os cards */
    padding: 20px; /* Opcional: espaçamento interno da área */
}

.nossosBancosArea .card {
    background-color: #05206B;
    width: 30%; /* Ocupa 30% da largura da área */
    height: auto; /* Altura dos cards */
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    border-radius: 50px;
}

.card img {
    width: 200px;
}

.textAreaBancos {
    text-align: center;
}


.textAreaBancos h1 {
    color: var(--amarelo-aprovacredi);
    font-size: 75px;
    margin-top: 25px;
}

.textAreaBancos p {
    color: white;
    font-size: 25px;
    margin-top: -20px;
}

/*Nossos Resultados*/

.nossosResultadosArea {
    position: relative;
    z-index: 999999;
    margin-bottom: -25px;
}

.trapezio-invertido {
    width: 100%;
    height: 270px; /* Ajuste a altura conforme necessário */
    background-color: var(--amarelo-aprovacredi);
    clip-path: polygon(0 2%, 100% 0, 95% 100%, 5% 100%); /* Parte menor em baixo e maior em cima */
    color: #fff; /* Cor do texto, ajuste conforme necessário */
    display: flex;
    flex-direction: column;
    z-index: 2;
}


.trapezio-invertido h1{
    margin-top: 25px;
    font-size: 65px;
    width: 100%;
    text-align: center;
}

.contAreaResult{
    display: flex;
    width: 80%;
    margin: 0 auto;
}


.nossoResulArea{
    width: 33%;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.numberResult{
    font-size: 100px;
}

.result{
    margin-top: -25px;
    font-size: 30px;
}

.mais{
    margin-left: -25px;
    color: var(--azul-aprovacredi);
}

/*Quem Somos*/

.quemSomosArea {
    z-index: 0;
    display: flex; /* Usa flexbox para o layout interno */
    width: 100%; /* Garante que a div ocupe 100% da largura disponível */
    height: auto;
    padding: 20px; /* Espaçamento interno */
    box-sizing: border-box; /* Inclui o padding na largura e altura totais */
    position: relative; /* Necessário para o posicionamento do pseudo-elemento */
    overflow: hidden; /* Garante que o pseudo-elemento não extravase a área da div */
    flex-direction: column;
}

.quemSomosArea::before {
    content: ''; /* Cria um pseudo-elemento vazio */
    position: absolute; /* Posiciona o pseudo-elemento em relação à div */
    top: 0; /* Alinha o pseudo-elemento ao topo da div */
    left: 0; /* Alinha o pseudo-elemento ao lado esquerdo da div */
    width: 100%; /* Faz o pseudo-elemento cobrir toda a largura da div */
    height: 100%; /* Faz o pseudo-elemento cobrir toda a altura da div */
    background: url('../img/capaquemSomos.jpg') no-repeat center center; /* Imagem de fundo com posicionamento */
    background-size: cover; /* Faz com que a imagem cubra toda a div */
    z-index: 1; /* Garante que o pseudo-elemento fique abaixo do conteúdo */
}

.quemSomosArea::after {
    content: ''; /* Cria um pseudo-elemento vazio */
    position: absolute; /* Posiciona o pseudo-elemento em relação à div */
    top: 0; /* Alinha o pseudo-elemento ao topo da div */
    left: 0; /* Alinha o pseudo-elemento ao lado esquerdo da div */
    width: 100%; /* Faz o pseudo-elemento cobrir toda a largura da div */
    height: 100%; /* Faz o pseudo-elemento cobrir toda a altura da div */
    background: rgba(19, 30, 61, 0.5); /* Cor azul com 50% de opacidade */
    z-index: 2; /* Garante que o pseudo-elemento fique acima da imagem de fundo */
    pointer-events: none; /* Permite que os cliques passem através do pseudo-elemento */
}

.quemSomosArea > * {
    position: relative; /* Posiciona o conteúdo sobre os pseudo-elementos */
    z-index: 3; /* Garante que o conteúdo fique acima dos pseudo-elementos */
}

.quemSomosArea h1{
    width: 100%;
    margin-top: 25px;
    font-size: 75px;
    color: var(--amarelo-aprovacredi);
    text-align: center;
}

.textQuemSomos {
    color: white;
}

.textQuemSomos p{
    font-size: 30px;
    text-align: justify;
    margin: 15px auto;
    width: 85%;
}

.imgQuemSomos{
    display: flex;
}


.imgQuemSomos img {
    margin: 5px auto;
    width: 80%;
}

/* Quem Sou eu Area*/

.quemSouEuArea {
    z-index: 0;
    display: flex; /* Usa flexbox para o layout interno */
    width: 100%; /* Garante que a div ocupe 100% da largura disponível */
    height: auto;
    padding: 20px; /* Espaçamento interno */
    box-sizing: border-box; /* Inclui o padding na largura e altura totais */
    position: relative; /* Necessário para o posicionamento do pseudo-elemento */
    overflow: hidden; /* Garante que o pseudo-elemento não extravase a área da div */
    flex-direction: column;
}

.quemSouEuArea::before {
    content: ''; /* Cria um pseudo-elemento vazio */
    position: absolute; /* Posiciona o pseudo-elemento em relação à div */
    top: 0; /* Alinha o pseudo-elemento ao topo da div */
    left: 0; /* Alinha o pseudo-elemento ao lado esquerdo da div */
    width: 100%; /* Faz o pseudo-elemento cobrir toda a largura da div */
    height: 200%; /* Faz o pseudo-elemento cobrir toda a altura da div */
    background: url('../img/capaquemsouEu.jpg') no-repeat center center; /* Imagem de fundo com posicionamento */
    background-size: cover; /* Faz com que a imagem cubra toda a div */
    z-index: 1; /* Garante que o pseudo-elemento fique abaixo do conteúdo */
}

.quemSouEuArea::after {
    content: ''; /* Cria um pseudo-elemento vazio */
    position: absolute; /* Posiciona o pseudo-elemento em relação à div */
    top: 0; /* Alinha o pseudo-elemento ao topo da div */
    left: 0; /* Alinha o pseudo-elemento ao lado esquerdo da div */
    width: 100%; /* Faz o pseudo-elemento cobrir toda a largura da div */
    height: 100%; /* Faz o pseudo-elemento cobrir toda a altura da div */
    background: rgba(19, 30, 61, 0.5); /* Cor azul com 50% de opacidade */
    z-index: 2; /* Garante que o pseudo-elemento fique acima da imagem de fundo */
    pointer-events: none; /* Permite que os cliques passem através do pseudo-elemento */
}

.quemSouEuArea > * {
    position: relative; /* Posiciona o conteúdo sobre os pseudo-elementos */
    z-index: 3; /* Garante que o conteúdo fique acima dos pseudo-elementos */
}

.quemSouEuArea h1{
    width: 100%;
    margin-top: 25px;
    font-size: 75px;
    color: var(--amarelo-aprovacredi);
    text-align: center;
}


/*Cometario Area*/

.nossoClienteArea h1 {
    margin-top: 15px;
    text-align: center;
    color: var(--amarelo-aprovacredi);
    font-size: 75px;
}

.textComentarioArea{
    width: 100%;
}
.balaoArea{
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    height: auto;
    min-height: 350px;
    background-color: #05206B;
    border-radius: 50px; 
    display: flex;
    flex-direction: column;
    position: relative;
}

.triangulo {
    position: absolute;
    bottom: -10px; /* Move o triângulo para fora da div balaoArea */
    left: 50%; /* Centraliza horizontalmente o triângulo */
    transform: translateX(-50%) rotate(0deg); /* Ajusta a posição para centralizar perfeitamente e rotaciona em 180° */
    width: 60px; /* Ajuste o tamanho do triângulo conforme necessário */
    height: 20px;
}

.triangulo img {
    width: 100%;
    height: auto;
}

.estrelas{
    margin-left: auto;
    margin-right: 15px;
    margin-top: 25px;
}

.comentarioArea {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.TextComentarista {
    width: 85%;
    color: white;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.TextComentarista p{
    text-align: justify;
    font-size: 35px;
    z-index: 999;
}

.imgComentador {
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}


.imgComentador img{
    width: 150px;
}

.nomeComentarista{
    text-align: center;
    color: var(--amarelo-aprovacredi);
}

.cargoComentarista{
    text-align: center;
    margin-top: -20px;
    color: white;
}

/*Formulario Area*/

.formsArea {
    position: relative;
    width: 100%;
    height: auto; /* Ajuste conforme necessário */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Garante que o vídeo fique dentro da área */
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o vídeo preencha a div de maneira responsiva */
    z-index: -1; /* Coloca o vídeo atrás do conteúdo */
    opacity: 0.5; /* Torna o vídeo fosco */
}

.conteudoForm {
    position: relative;
    z-index: 1; /* Coloca o conteúdo acima do vídeo */
    color: white;
}

.formsArea::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #131E3D;
    opacity: 0.7; /* Nível de escurecimento */
    z-index: 0; /* Fica entre o vídeo e o conteúdo */
}

.conteudoForm {
    position: relative;
    z-index: 1; /* Coloca o conteúdo acima do vídeo */
    color: white;
    width: 100%;
    max-width: 500px; /* Largura máxima do formulário */
    padding: 20px;
    background-color: rgba(19, 30, 61, 0.8); /* Fundo semi-transparente */
    border-radius: 10px;
    margin-bottom: 25px;
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
}

input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.btnAprova {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: var(--amarelo-aprovacredi); /* Cor do botão */
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.btnAprova:hover {
    background-color: #776934; /* Cor ao passar o mouse */
}

.formsArea h1{
    text-align: center;
    z-index: 999;
    color: var(--amarelo-aprovacredi);
    font-size: 75px;
    margin-top: 25px;
    margin-bottom: 50px;

}

.imgSystemArea video {
    width: 100%;
    height: auto;
    display: block; /* Remove o espaço em branco abaixo do vídeo */
}

.imgSystemAreaCelular video {
    width: 100%;
    height: auto;
    display: block; /* Remove o espaço em branco abaixo do vídeo */
}


.imgContratos img{
    width: 100%;
    max-height: 100vh;
}

/* Responsividade */
@media (max-width: 850px) {
    .textAreaTitulo h1 {
        font-size: 25px;
    }
}

@media (max-width: 768px) {
    .conteudoForm {
        width: 90%;
    }

    input {
        font-size: 14px;
    }

    button {
        font-size: 16px;
    }
}


/*Responsivo*/

/*Diferencial*/
@media (max-width: 1100px) {
    .imgQuemSomos {
        display: none;
    }
}


@media (max-width: 929px) {
    .trapezio-invertido {
        width: 100%;
        height: 300px; /* Ajuste a altura conforme necessário */
        background-color: var(--amarelo-aprovacredi);
        clip-path: polygon(0 2%, 100% 0, 95% 100%, 5% 100%); /* Parte menor em baixo e maior em cima */
        color: #fff; /* Cor do texto, ajuste conforme necessário */
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .balaoArea {
        width: 75%;
    }

    .quemSomosArea h1 {
        font-size: 65px;
    }

    .quemSouEuArea h1 {
        font-size: 65px;
    }

    .systemArea h1 {
        font-size: 65px;
    }

    .textQuemSomos p {
        font-size: 20px;
    }

    .textquemSouEu p {
        font-size: 20px;
    }

    .textAreaTitulo{
        margin-top: 15%;
        width: 100%;
    }

    .textAreaTitulo h1 {
        text-align: center;
        width: 90%;
    }

    .textAreaTitulo button {
        margin-left: auto;
        margin-right: auto;
    }

    .textAreaTitulo p {
        width: 90%;
    }
    
    .headerArea {
        flex-direction: column;
    }

    .nossosBancosArea .card {
        width: 80%; /* Na versão responsiva, ocupa 80% da largura da área */
    }
    .trapezio-invertido {
        width: 100%;
        height: auto; /* Ajuste a altura conforme necessário */
        background-color: var(--amarelo-aprovacredi);
        clip-path: unset; /* Parte menor em baixo e maior em cima */
        color: #fff; /* Cor do texto, ajuste conforme necessário */
        display: flex;
        flex-direction: column;
    }

    .estrelas img {
        width: 150PX;
    }

    .nossoClienteArea h1 {
        font-size: 55px;
    }

    .TextComentarista P{
        font-size: 25PX;
    }
    
}

@media (max-width: 708px) {


    .contAreaResult{
        flex-direction: column;
    }

    .nossoResulArea{
        margin: 0 auto;
    }


    .textAreaBancos h1 {
        font-size: 45px;
    }

    .systemArea h1 {
        font-size: 45px;
    }
    
}

@media (max-width: 556px) {
    
    .btnParceiro button {

        font-size: 30px;
    }
    
    .textAreaTitulo {
        margin-top: 20%;
    }

    .btnLogin{
        display: none;
    }

    .btnLoginMobile {
        display: block;
    }

    .textSystemArea p {
        font-size: 18px;
    }

}

@media (max-width: 444px) {

    footer{
        font-size: 15px;
    }

    .logoArea{
        width: 40px;
    }

    .textAreaTitulo{
        margin-top: 25%;
        width: 100%;
    }

    .formsArea h1{
        font-size: 55px;
    }

    .trapezio-invertido h1{
        margin-top: 25px;
        font-size: 35px;
        width: 100%;
        text-align: center;
    }

    .estrelas img {
        width: 100PX;
    }

    .nossoClienteArea h1 {
        font-size: 45px;
    }
    .TextComentarista P{
        font-size: 15PX;
    }

    .textAreaBancos h1 {
        font-size: 37px;
    }
    
    .btnParceiro button {
        font-size: 25px;
    }
 
}