/* Fonts Importadas do Google */
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Resete */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
/* Variaveis */
:root{
/* Cores */
    --amarelo: #d5bf8e;
    --verde-escuro: #356224;
    --verde-claro: #95cb81;
    --preto: #252525;
    --branco: #e1e1e1;
    --cinza: #4F4F4F;
/* Tamanho das fontes */
    --font-size-p: 0.9rem;
    --font-size-m: 1.12rem;
    --font-size-g: 1.5rem;
    --font-size-xg: 2rem;
    --font-size-xxg: 2.3rem;
/* Peso das fontes */
    --font-weight-normal: 400;
    --font-weight-media: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
/* Bordas*/
    --border-radius-p: 8px;
    --border-radius-m: 30px;
    --border-radius-circulo: 50%;
}
/* ======================== PADRÃO DE ESTILO ========================= */
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
button{
    cursor: pointer;
    border: none;
    background: none ;
}
img{
    width: 100%;
}
.section-content{
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}
.section-title{
  text-align: center;
  padding: 60px 0 100px;
  text-transform: uppercase;
  font-size: var(--font-size-xg);
}
section .section-title::after {
  content: "";
  width: 80px;
  height: 5px;
  display: block;
  margin: 10px auto 0;
  background: var(--secondary-color);
  border-radius: var(--border-radius-s);
}
/* ======================== HEADER ========================= */
header{
  position: fixed;
  width: 100%;
  z-index: 5;
  background: var(--verde-claro);
}
header .navbar{
  display: flex;
  padding: 20px;
  align-items: center;
  justify-content: space-between;
}
.navbar .nav-logo .logo-texto{
  color:var(--branco);
  font-size: var(--font-size-xg);
  font-weight: var(--font-weight-semibold);
}
.navbar .nav-menu{
  display: flex;
  gap: 10px;
}
.navbar .nav-menu .nav-link{
  font-size: var(--font-size-m);
  color: var(--branco);
  padding: 10px 18px;
  border-radius: var(--border-radius-m);
  transition: 0.3s ease;
}
.navbar .nav-menu .nav-link:hover{
  background: var(--preto);
  color: var(--branco);
  text-transform: uppercase;
}
.navbar :is(#menu-open-button, #menu-close-button) {
  display: none;
}
/* ======================== HERO SECTION (MAIN) ========================= */
.hero-section {
  min-height: 100vh;
  background: var(--verde-claro);
}

.hero-section .section-content {
  display: flex;
  padding-top: 40px;
  align-items: center;
  min-height: 100vh;
  justify-content: space-between;
}

.hero-section .hero-details {
  color: var(--cinza);
}

.hero-section .hero-details .title {
  margin-top: 12%;
  font-size: var(--font-size-xxg);
  color: var(--verde-escuro);
  font-family: "Miniver", sans-serif; 
  /* PROCURAR OUTRA FONTE */
}

.hero-section .hero-details .subtitle{
  margin-top: 10px;
  max-width: 70%;
  font-size: var(--font-size-xg);
  font-weight: var(--font-weight-semibold);
}

.hero-section .hero-details .description {
  max-width: 70%;
  margin: 24px 0 40px;
  font-size: var(--font-size-m);
}

.hero-section .hero-details .buttons {
  display: flex;
  gap: 23px;
}

.hero-section .hero-details .button {
  padding: 10px 26px;
  display: block;
  border: 2px solid transparent;
  border-radius: var(--border-radius-m);
  background: var(--verde-escuro);
  color: var(--branco);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  transition: 0.3s ease;
}

.hero-section .hero-details .button:hover,
.hero-section .hero-details .button.button .cadastro{
  color: var(--preto);
  border-color: var(--branco);
  background: transparent;
  text-transform: uppercase;
}
.hero-section .hero-image-background{
  max-width: 500px;
  margin-right: 30px;
}

/* ======================== SOBRE SECTION (MAIN) ========================= */
.about-section {
  padding: 120px 0;
  background: var(--branco);
}

.about-section .section-content {
  display: flex;
  gap: 50px;
  align-items: center;
  justify-content: space-between;
}

.about-section .about-image-wrapper .about-image {
  height: 300px;
  width: 300px;
  object-fit: cover;
}

.about-section .about-details {
  max-width: 50%;
}

.about-section .about-details .section-title {
  padding: 0;
}

.about-section .about-details .text {
  margin: 50px 0 30px;
  text-align: center;
  font-size: var(--font-size-m);
}
/* ============================ SOLUÇÃO (MAIN) ========================= */
section .gestao-section{
  width: 100vw;
  height: 100vh;
}
.solucao-tudo{
  background: url(/img-variadas/fundo3.png);
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: justify;
}
.solucao-description{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-left: 612px;
  margin-bottom: 10px;
  font-size: var(--font-size-m);
}
.solucao-title{
  align-items: flex-start;
  padding: 95px;
  padding-left: 50%;
}
.solucao-title p {
  margin-left: -90%;
  text-transform: uppercase;
  font-size: var(--font-size-xg);
  font-weight: var(--font-weight-media);
}
.solucao-title  h3{
  font-size: var(--font-size-g);
  margin-left: -12%;
}
.solucao-1,.solucao-2,.solucao-3,.solucao-4{
  flex-direction: column;
  width: 45%;
  box-sizing: border-box;
  margin-bottom: 90px;
}
/* ============================ CARROSSEL (MAIN) ================================ */

.carrossel-section {
  padding: 50px 0 100px;
  background: var(--branco);
}

.carrossel-section .slider-wrapper {
  overflow: hidden;
  margin: 0 60px 50px;
}

.carrossel-section .carrossel {
  user-select: none;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.carrossel-section .carrossel .user-image {
  width: 180px;
  height: 180px;
  margin-bottom: 50px;
  object-fit: cover;
  border-radius: var(--border-radius-circulo);
}

.carrossel-section .carrossel .dicas {
  line-height: 25px;
  font-size: 20px;
}

.carrossel-section .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  opacity: 1;
  background: var(--verde-escuro);
}

.carrossel-section .swiper-slide-button {
  color: var(--verde-escuro);
  margin-top: -50px;
  transition: 0.3s ease;
}

.carrossel-section .swiper-slide-button:hover {
  color: var(--verde-claro);
}
/* ==============================  MODAL LOGIN  ================================== */
#modal {
  margin: 0 auto;
  background-color: rgba(10, 10, 10, 0.47);
  position: fixed;
  width: 100vw;
  display: none;
  z-index: 999;
  height: 100vh;
  top: 0;
  left: 0;
  padding-left: 37%;
  max-width: 100%;
}

.login-modal {
  max-width: 500px;
  padding: 20px;
  border-radius: 8px;
  position: fixed;
}

.close {
  color: #1d1d1d;
  font-size: 28px;
  font-weight: bold;
  margin-left: 100%;
}

.wrapper {
  overflow: hidden;
  background: #fff;
  padding: 70px;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
  margin-top: 36%;
  max-width: 700px;
  border-radius: 10px;

}

.wrapper .title-text {
  display: flex;
  width: 200%;
}

.wrapper .title {
  width: 50%;
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .slide-controls {
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  overflow: hidden;
  margin: 30px 0 10px 0;
  justify-content: space-between;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

.slide-controls .slide {
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.6s ease;
}

.slide-controls label.signup {
  color: #000;
}

.slide-controls .slider-tab {
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  z-index: 0;
  border-radius: 5px;
  background: -webkit-linear-gradient(left, #356224, #96e95793);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input[type="radio"] {
  display: none;
}

#signup:checked ~ .slider-tab {
  left: 50%;
}

#signup:checked ~ label.signup {
  color: #fff;
  cursor: default;
  user-select: none;
}

#signup:checked ~ label.login,
#login:checked ~ label.signup {
  color: #000;
}

#login:checked ~ label.login {
  cursor: default;
  user-select: none;
}

.wrapper .form-container {
  width: 100%;
  overflow: hidden;
}

.form-container .form-inner {
  display: flex;
  width: 200%;
}

.form-container .form-inner form {
  width: 50%;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-inner form .field {
  height: 50px;
  width: 100%;
  margin-top: 20px;
}

.form-inner form .field input {
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 15px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  border-bottom-width: 2px;
  font-size: 17px;
  transition: all 0.3s ease;
}

.form-inner form .field input:focus {
  border-color: #356224;
}

.form-inner form .field input::placeholder {
  color: #999;
  transition: all 0.3s ease;
}

form .field input:focus::placeholder {
  color: #b3b3b3;
}

.form-inner form .pass-link {
  margin-top: 5px;
}

.form-inner form .signup-link {
  text-align: center;
  margin-top: 30px;
}

.form-inner form .pass-link a,
.form-inner form .signup-link a {
  color: #356224;
  text-decoration: none;
}

.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover {
  text-decoration: underline;
}

form .btn {
  height: 50px;
  width: 100%;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

form .btn .btn-layer {
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(left, #356224, #96e95793);
  border-radius: 5px;
  transition: all 0.4s ease;
}

form .btn:hover .btn-layer {
  left: 0;
}

form .btn input[type="submit"] {
  height: 100%;
  width: 100%;
  z-index: 1;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  padding-left: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
}
.field {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #555;
}

/* ==============================  FOOTER  ================================== */
footer{
  background: var(--preto);
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  color: var(--branco);
  align-items: center;
}
footer h2{
  font-size: var(--font-size-g);

}
.logo-footer img{
  margin-top: 15px;
  margin-left: 11%;
  width: 100px;
  height: 100px;
  align-items: center;
}
.links{
  display: inline;
  margin-left: 20%;
}
.ul-container, .info{
  list-style: none;
}
.ul-rs li{
  display: inline-flex;
  padding: 10px;
  font-size: var(--font-size-p);
}
.ul-rs li:hover{
  background: var(--verde-claro);
  border-radius: 8px;
  cursor: pointer;
  width: 50px; 
  height: 50px;
  transition: 0.1s ease-in-out;
}
.recursos, .contato{
  margin-left: 30%;
  flex-wrap: nowrap;
}
.recursos h2{
  margin-right: 73%;
}
.contato h2{
  margin-right: 30%;
}
.ul-container a{
  text-decoration: none;
  color: var(--branco);
  font-size: var(--font-size-p);
}
.ul-container a:hover{
  background: var(--verde-claro);
  border-radius: 8px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--preto);
}
.info a{
  text-decoration: none;
  color: var(--branco);
}
.info li {
  display: flex; 
  align-items: center; 
}
.info a:hover{
  background: var(--verde-claro);
  border-radius: 8px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--preto);
}
.info img {
  width: 50px; 
  height: 50px; 
  margin-right: 10px; 
}
.info img:hover{
  background: var(--verde-claro);
  border-radius: 10px;
  width: 60px; 
  height: 60px; 
  cursor: pointer;
}
.copy p{
  background: var(--verde-claro);
  text-align: center;
}
/* ======================== POLITICA DE PRIVACIDADE ========================= */
.politica-section {
  padding: 120px 0;
  background: var(--branco);
  background: url(/img-variadas/politica\ \(640\ x\ 640\ px\).png);
  background-repeat: no-repeat;
}

.politica-section .section-content {
  display: block; 
  max-width: 800px; 
  margin: 0 auto;
  margin-left: 40%;
}

.politica-section .section-content .text {
  text-align: justify; 
  font-size: var(--font-size-p);
  font-weight: 600;
  line-height: 1.6; /* Melhora a legibilidade */
}
/* ======================== TELA FINANCEIRO ========================= */

.resume {
  display: flex;
  padding: 100px 0;
  gap: 212px;
  width:100%;
  justify-content: space-around;
  flex-wrap: wrap;
}
.coluna-esquerda{
  padding: 120px;
  margin-left: 16%;
  width: 40px; /* Largura do círculo */
  height: 40px; /* Altura do círculo */
  background-color: #44911B; /* Cor de fundo */
  border-radius: 50%; /* Faz a div virar um círculo */
  display: flex; /* Opcional: para centralizar conteúdo */
  justify-content: center; /* Centraliza horizontalmente */
  color:var(--branco);
  text-transform: uppercase;
}
.resume > div {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 5px #ccc;
  border-radius: 10px;
  padding: 14px;
  width: 220px;
  height: 150px;
  background-color: var(--branco);
  color: var(--preto);
  font-size: 30px;
  font-family: "Poppins", sans-serif;
}

.newItem {
  display: flex;
  gap: 240px;
  align-items: end;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 30px;
  padding: 35px 0px;

}

.divDesc, .divType, .divAmount {
  display: flex;
  flex-direction: column;
  height: 60px;
  width: 100px;
}

.newItem > button {
  background-color:var(--verde-escuro);
  color:var(--branco);
  border: none;
  padding: 7px 56px;
  border-radius: 5px;
  cursor: pointer;
  height: 53px;
  font-size: 30px;
  margin-bottom: -22px;
  margin-bottom: -36px;
}

input, select {
  padding: 11px;
  width: 240px;
  font-size: 24px;
  background-color: var(--branco);
  color: var(--preto);
}

.divTable {
  width: 100%;
  display: flex;
  justify-content: center;
}

table {
  width: 56%;
  padding: 145px 0;
  border-radius: 5px;
  font-size: 30px;
}

th {
  text-align: start;
  border-bottom: inset;
  padding-bottom: 5px;
}

i {
  font-size: 25px;
}

.bxs-chevron-up-circle {
  color: #00C9A7;
}

.bxs-chevron-down-circle {
  color: #D83121;
}

.columnAction {
  width: 40px;
  text-align: center;
}

.columnAction > button {
  background: transparent;
  border: none;
}

.columnAmount {
  width: 30%;
}

.columnType {
  width: 80px;
  text-align: center;
}
.todo-resume{
  margin: 0 auto;
  background: var(--verde-claro);
  width: 100%;
  height: 10%;
}

h2{
  font-size: 40px;
  text-align: center;
}

/* ==============================  TELA DE SOLICITAÇAO DE RECUPERAÇÃO DE SENHA  ================================== */
.recuperacao {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Preencher toda a altura da tela */
  padding: 20px; /* Garantir espaçamento em telas menores */
  box-sizing: border-box;
}
.redefinicao {
  margin: 0 auto;
  text-align: center;
  background-color: var(--verde-claro); /* Fundo do card */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  width: 75%;
}
.redefinicao-section{
  display: block; 
  max-width: 800px; 
  margin: 0 auto;
  margin-left: 40%;
}
.redefinicao-title {
  color: var(--preto);
  font-size: var(--font-size-g);
  margin-bottom: 10px;
}

.redefinicao-subtitle {
  font-size: var(--font-size-m);
  color: var(--verde-escuro); /* Cor do texto subtítulo */
  margin-bottom: 20px;
}

input[type="email"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box;
}

input[type="email"]::placeholder {
  color: var(--cinza);
}
.botoes-redefinicao {
  display: flex; /* Ativa o layout flexbox */
  justify-content: space-between; /* Espaçamento igual entre os botões */
  gap: 10px; /* Espaço entre os botões */
}

.btn-redefinicao {
  flex: 1; /* Faz os botões ocuparem espaços iguais */
}

#arrow_back{
  margin-left: 90%;
  color: var(--branco);
}
.btn-enviar {
  background-color: var(--verde-escuro); /* Verde para "Enviar" */
  padding: 12px;
  font-size: var(--font-size-p);
  color: var(--branco);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.btn-cancelar {
  background-color: var(--cinza); /* Vermelho para "Cancelar" */
  padding: 12px;
  font-size: var(--font-size-p);
  color: var(--branco);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

/* ==============================  TELA DE REDEFINIÇÃO DE SENHA  ================================== */
input[type="password"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box;
}

input[type="password"]::placeholder {
  color: var(--cinza);
}
.btn-redefinir {
  width: 100%;
  background-color: var(--verde-escuro); /* Verde para "Enviar" */
  max-width: 300px;
  padding: 14px;
  font-size: var(--font-size-p);
  color: var(--branco);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}
.redefinicao-title2 {
  color: var(--preto);
  font-size: var(--font-size-g);
  margin-bottom: 10px;
}
/* Estilos do campo de senha */
.field {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.field input {
  width: 100%;
  padding-right: 60px; /* Deixe espaço para o botão */
  box-sizing: border-box;
}

/* Botão de alternância (mostrar/ocultar senha) */
.toggle-password {
  position: absolute;
  right: 10px; /* Alinha o botão à direita */
  top: 50%; /* Centraliza verticalmente */
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  padding: 5px;
}

/* ==============================  TELA DA CALCULADORA ================================== */

#modal-cal {
  background-color: rgba(10, 10, 10, 0.47);
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex; /* Altera o display para flex */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  z-index: 999;
  top: 0;
  left: 0;
  display: none;
}
#cal-close-button{
  font-size: var(--font-size-g);
  color: var(--branco);
  display: block;
  margin-left: 95%
}

.Calculadora {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
}

.container {
  max-width: 300px;
  width: 100%;
  border-radius: 12px;
  padding: 10px 20px 20px;
  background: var(--cinza);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.display {
  height: 110px;
  width: 100%;
  outline: none;
  border: none;
  text-align: right;
  margin-bottom: 10px;
  font-size: 25px;
  color: var(--preto);
  pointer-events: none;
}
.buttons {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}
.buttons button {
  padding: 10px;
  border-radius: 6px;
  border: none;
  font-size: 20px;
  cursor: pointer;
  background-color: var(--branco);
}
.buttons button:active {
  transform: scale(0.99);
}
.operator {
  color: var(--verde-claro);
}
/* ======================== Responsividade 1900px ========================= */
/* @media screen and (max-width: 1900px){
  .coluna-esquerda{
    margin-left: 14%;
  }
  } */
/* ======================== Responsividade 2560px ========================= */
/* @media screen and (max-width: 2560px){
.coluna-esquerda{
  margin-left: 25%;
}
} */
/* ======================== Responsividade 1440px ========================= */
@media screen and (max-width: 1440px){
.gestao-section {
  width: 100%;
  height: auto;
}

.solucao-tudo {
  flex-wrap: wrap; 
  justify-content: center; 
  text-align: center; 
  padding: 20px; 
  background: url(/img-variadas/fundo1024.png);
  justify-content:flex-end;
  background-repeat: no-repeat;
}

.solucao-title {
  padding: 20px;
  text-align: center;
}

.solucao-title p {
  margin: 0 auto;
  font-size: var(--font-size-g);
}

.solucao-title h3 {
  font-size: var(--font-size-m);
  margin: 10px auto;
}

.solucao-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.solucao-1, .solucao-2, .solucao-3, .solucao-4 {
  width: 90%;
  margin-bottom: 20px;
  text-align: center;
}

.solucao-1 h3, .solucao-2 h3, .solucao-3 h3, .solucao-4 h3 {
  font-size: var(--font-size-m);
}

.solucao-1 p, .solucao-2 p, .solucao-3 p, .solucao-4 p {
  font-size: var(--font-size-s);
}
.coluna-esquerda{
  margin-left: 73px;
}
.wrapper{
  margin-top: 15%;
}
}

/* ======================== Responsividade 1024px ========================= */
@media screen and (max-width: 1024px){

.wrapper {
  margin: 0 auto;
}

#modal{
  width: 100vw;
  padding-left: 25%;
  height: 118vw;
}

section .gestao-section {
  height: auto; 
}

.solucao-tudo {
  flex-wrap: wrap; 
  justify-content: center; 
  text-align: center; 
  padding: 20px; 
  background: url(/img-variadas/fundo1024.png);
  justify-content: flex-end;
  background-repeat: no-repeat;
}

.solucao-title {
  padding: 40px 20px; 
  text-align: center;
}

.solucao-title p {
  margin-left: 0; 
  font-size: var(--font-size-g); 
}

.solucao-title h3 {
  font-size: var(--font-size-m); 
  margin-left: 0; 
}

.solucao-description {
  flex-direction: column; 
  align-items: center; 
  padding-left: 0; 
}

.solucao-1,.solucao-2,.solucao-3,.solucao-4 {
  width: 100%; 
  margin-bottom: 30px; 
}

.solucao-1 h3,.solucao-2 h3,.solucao-3 h3,.solucao-4 h3 {
  font-size: var(--font-size-m); /* Títulos menores */
  color: var(--verde-escuro);
}

.solucao-1 p,.solucao-2 p,.solucao-3 p,.solucao-4 p {
  font-size: var(--font-size-s); /* Parágrafos menores */
}
footer {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
}

.logo-footer img {
  margin: 0 auto;
}

.recursos, .contato {
  margin-left: 0;
}
.recursos h2{
  margin-right: 1%;
}
.newItem{
  width: 83%;
}
.newItem > button{
  margin-bottom: -53px;
  margin-right: -131px;
  
}
input, select {
  padding: 4px;
  width: 250px;
  
}
.resume {
  gap: 100px;
}
.coluna-esquerda{
  margin-left: 5px;
}
}

/* ======================== Responsividade 900px ========================= */
@media screen and (max-width:900px) {
  :root{
  --font-size-m: 1rem;
  --font-size-g: 1.3rem;
  --font-size-xg: 1.5rem;
  --font-size-xxg: 1.8rem;
}
body.show-mobile-menu header::before{
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(5px);
  
}
.navbar :is(#menu-open-button, #menu-close-button) {
  font-size: var(--font-size-g);
  display: block;
}

.navbar #menu-close-button{
  position: absolute;
  right: 30px;
  color: var(--verde-escuro);
  top:30px
}
.navbar #menu-open-button{
  color: var(--branco);
}
.navbar .nav-menu{
  display: block;
  position: fixed;
  left: -300px;
  top: 0;
  width: 300px;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  background: var(--branco);
  transition: left 0.2s ease;
}
body.show-mobile-menu .navbar .nav-menu{
  left: 0;
}
.navbar .nav-menu .nav-link{
  color: var(--verde-escuro);
  font-size: var(--font-size-g);
  display: block;
  margin-top: 17px;
}
.hero-section .section-content{
  gap: 50px;
  text-align: center;
  flex-direction: column-reverse;
  justify-content: center;
}
.hero-section .hero-details :is(.subtitle,.description),.about-section .about-details {
  max-width: 100%;
}
.hero-section .hero-details .buttons {
  justify-content: center;
}
.hero-section .hero-image-background{
  max-width: 270px;
  margin-right: 0;
}
.about-section .section-content{
  gap: 70px;
  flex-direction: column;
}
.about-section .about-image-wrapper{
  width: 100%;
  height: 100%;
  max-width: 250px;
  aspect-ratio: 1; /* a largura e a altura do elemento serão iguais, criando um quadrado. */
}
section .gestao-section {
  height: auto; 
}

.solucao-tudo {
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  background: url(/img-variadas/fundo900.png);
  background-repeat: no-repeat;
}

.solucao-title {
  padding: 20px;
  padding-left: 0;
}

.solucao-title p,.solucao-title h3 {
  margin-left: 0;
  font-size: var(--font-size-m); 
}
.solucao-description {
  padding-left: 0;
  margin-bottom: 20px;
  flex-direction: column; 
  align-items: center;
}

.solucao-1,.solucao-2,.solucao-3,.solucao-4 {
  width: 90%; 
  margin-bottom: 30px;
}

.solucao-1 h3,.solucao-2 h3,.solucao-3 h3,.solucao-4 h3 {
  font-size: var(--font-size-m); 

}

.solucao-1 p,.solucao-2 p,.solucao-3 p,.solucao-4 p {
  font-size: var(--font-size-s); 
  font-weight: 600;
}
footer {
  grid-template-columns: 1fr 1fr;
}

.links, .recursos, .contato {
  margin: 0 auto;
}
.ul-rs li {
  padding: 8px;
}
.coluna-esquerda{
  margin-left: -40px;
}
.coluna-esquerda{
  margin-left: -40px;
}
}
/* ======================== Responsividade 768px ========================= */
@media screen and (max-width: 768px)  {

#modal {
  margin: 0 auto;
  background-color: rgba(10, 10, 10, 0.47);
  width: 100vw;
  display: none;
  z-index: 999;
  height: 100vh;
  max-width: 100%;
  padding-left:18%;
  }
.slide-controls {
  font-size: 16px; /* Ajusta o tamanho do texto */
}

.form-inner form .field input {
  font-size: 16px; /* Diminui o tamanho do texto nos inputs */
}

.form-inner form .btn input[type="submit"] {
  font-size: 18px; /* Ajusta o tamanho do botão */
}
.redefinicao {
  width: 90%;
}

.btn-redefinicao {
  width: 100%;
  margin-bottom: 10px;
}
.solucao-tudo {
  flex-direction: column; 
  align-items:flex-end; 
}
.solucao-title {
  padding: 16px;
  padding-left: 0;
}

.solucao-title p,.solucao-title h3 {
  margin-left: 0;
  font-size: var(--font-size-p); 
}

.solucao-1 p,.solucao-2 p,.solucao-3 p,.solucao-4 p {
  font-size: var(--font-size-p); 
  font-weight: 400;
}
footer {
  grid-template-columns: 1fr;
  text-align: center;
  gap: 10px;
}

.logo-footer img {
  width: 80px;
  height: 80px;
}

.links {
  margin: 0 auto;
}
.recursos h2{
  margin: 3px;
}
.recursos, .contato {
  margin: 0 auto;
}

.ul-rs li img {
  width: 40px;
  height: 40px;
}

.info img {
  width: 40px;
  height: 40px;
}

.contato h2 {
  margin: 10px 0;
}
.newItem{
  gap: 149px;
  padding-right: 145px;
}
.newItem > button{
  margin-bottom: -36px;
  margin-right: -124px;
}
input, select {
  padding: 4px;
  width: 207px;
}
   .resume > div {
      width: 80%;
      max-width: 300px;
      height: auto;
    }
.container {
  max-width: 90%;
}

.display {
  height: 80px;
  font-size: 20px;
}

.buttons button {
  font-size: 18px;
  padding: 8px;
}
}


/* ======================== Responsividade 640px ========================= */
@media screen and (max-width: 640px) {

.testimonials-section .slider-wrapper {
  margin: 0 0 30px;
}

.testimonials-section .swiper-slide-button {
  display: none;
}

.footer-section .section-content {
  flex-direction: column;
  gap: 20px;
}
.coluna-esquerda{
 padding: 80px;
 margin-left: 3%;
}
}
/* ======================== Responsividade 480px ======================== */
@media (max-width: 480px) {
.wrapper {
  padding: 16px; /* Ajusta ainda mais o preenchimento */
  margin:0;
}

.wrapper .title {
  font-size: 24px; /* Reduz o tamanho do título */
}

.form-inner form .field input {
  font-size: 14px; /* Ajusta o tamanho do texto dos inputs */
}

.form-inner form .btn input[type="submit"] {
  font-size: 14px; /* Ajusta o tamanho do botão */
}

.close {
  font-size: 24px; /* Reduz o tamanho do botão de fechar */
}
.container {
  margin-top: 5%;
  padding: 10px 15px;
}

.display {
  height: 70px;
  font-size: 18px;
}

.buttons {
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}

.buttons button {
  font-size: 16px;
  padding: 6px;
}
h2 {
  font-size: 24px;
}

.resume > div {
  font-size: 20px;
  padding: 10px;
}

.newItem {
  padding: 20px 0;
}

input, select {
  font-size: 18px;
}

table {
  font-size: 18px;
}

th {
  font-size: 16px;
}

.columnAmount, .columnType, .columnAction {
  font-size: 14px;
}

.newItem > button {
  font-size: 18px;
  padding: 8px 16px;
}
}

/* ======================== Responsividade 425px ========================= */
@media screen and (max-width: 425px){
.wrapper {
  
  margin-top: 8%; /* Centraliza o modal verticalmente */
  padding: 15px; /* Ajusta o espaço interno */
  max-width: 90%; /* Garante que o modal não ocupe toda a largura */
  height: auto; /* Torna o modal flexível para caber o conteúdo */
  overflow-y: auto; /* Permite rolagem se o conteúdo exceder o espaço */
  border-radius: 10px; /* Ajusta as bordas arredondadas */
  margin-left:-30px;
}

.form-inner form {
  padding: 0; /* Remove margens desnecessárias */
}

.form-inner form .field {
  margin-top: 12px; /* Ajusta o espaço entre os campos */
}

.form-inner form .field input {
  font-size: 16px; /* Ajusta o tamanho da fonte */
  padding: 12px; /* Ajusta o preenchimento interno dos campos */
}

.form-inner form .btn input[type="submit"] {
  font-size: 16px; /* Ajusta o tamanho do texto do botão */
  padding: 12px; /* Ajusta o botão */
}

.title-text {
  font-size: 20px; /* Reduz o tamanho do título para se adequar à largura */
  text-align: center; /* Centraliza o título */
}

.close {
  font-size: 18px; /* Ajusta o botão de fechar */
  right: 10px; /* Move o botão de fechar para uma posição apropriada */
}

.slide-controls label {
  font-size: 14px; /* Ajusta o tamanho das labels (Login e Cadastro) */
}

.signup-link a {
  font-size: 14px; /* Ajusta o texto da mensagem de cadastro */
}
th{
padding-left: 40px;
}
h2 {
font-size: 22px;
}

.resume {
  flex-direction: column;
  align-items: center;
}

.resume > div {
  width: 80%;
  padding: 10px;
  font-size: 18px;
}

.newItem {
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 25px;
  margin: 0 auto;
}

.divDesc, .divType, .divAmount {
  width: 100%;
}

input, select {
  width: 100%;
  font-size: 18px;
}

.newItem > button {
  width: 80%;
  font-size: 18px;
  padding: 8px 16px;
  margin: 0 auto;
 

}

.divTable table {
  width: 95%;
  font-size: 16px;
}

th {
  font-size: 14px;
}

.columnAmount, .columnType, .columnAction {
  font-size: 14px;
}

}

/* ======================== Responsividade 375px ========================= */

@media screen and (max-width: 375px) {
  .wrapper {
    margin-top: 8%; /* Centraliza o modal verticalmente */
    padding: 15px; /* Ajusta o espaço interno */
    max-width: 90%; /* Garante que o modal não ocupe toda a largura */
    height: auto; /* Torna o modal flexível para caber o conteúdo */
    overflow-y: auto; /* Permite rolagem se o conteúdo exceder o espaço */
    border-radius: 10px; /* Ajusta as bordas arredondadas */
    margin-left:-30px;
  }

  .form-inner form .field {
    margin-top: 10px; /* Reduz o espaçamento entre os campos */
  }

  .form-inner form .field input {
    font-size: 15px; /* Ajusta o tamanho da fonte */
    padding: 10px; /* Reduz o preenchimento interno */
  }

  .form-inner form .btn input[type="submit"] {
    font-size: 15px; /* Ajusta o tamanho do texto do botão */
    padding: 10px; /* Ajusta o botão */
  }

  .title-text {
    font-size: 18px; /* Reduz o tamanho do título */
    text-align: center; /* Centraliza o título */
  }

  .close {
    font-size: 16px; /* Ajusta o tamanho do botão fechar */
    right: 8px; /* Ajusta a posição do botão */
  }

  .slide-controls label {
    font-size: 12px; /* Reduz o tamanho das labels (Login e Cadastro) */
  }

  .signup-link a {
    font-size: 12px; /* Ajusta o texto da mensagem de cadastro */
  }

  .form-inner {
    padding: 0 5px; /* Adiciona preenchimento horizontal para evitar que os campos encostem na borda */
  }

  .slider-tab {
    height: 3px; /* Ajusta a espessura da aba deslizante */
  }
.solucao-1 p,.solucao-2 p,.solucao-3 p,.solucao-4 p {
  font-size: var(--font-size-s); 
  font-weight: 700;
  color: var(--preto);
}
.solucao-tudo{
  background-image: none;
}
.about-section .about-image-wrapper .about-image {
  height: 200px;
  width: 200px;
  object-fit: cover;
  margin-left: 12%;
}
.about-section .about-details .text {
  margin: 50px 0 30px;
  text-align: center;
  font-size: var(--font-size-p);
  font-weight: 600;
}
footer {
  grid-template-columns: 1fr;
  padding: 10px;
}

.logo-footer img {
  width: 60px;
  height: 60px;
}

.ul-rs li img {
  width: 30px;
  height: 30px;
}

.info img {
  width: 30px;
  height: 30px;
}

.copy p {
  font-size: 12px;
  padding: 5px;
}
.todo-resume{
  width: 102%;
}
th{
  padding-left: 30px;
  
}
}
/* ======================== Responsividade 360px ========================= */
@media (max-width: 360px) {
  .buttons button {
      font-size: 14px;
      padding: 5px;
  }

  .display {
      height: 60px;
      font-size: 16px;
  }
}
/* ======================== Responsividade 320px ========================= */
@media screen and (max-width: 320px) {
.login-modal {
  padding: 5px; 
}

.wrapper {
  margin-top: 8%; /* Centraliza o modal verticalmente */
  padding: 15px; /* Ajusta o espaço interno */
  max-width: 90%; /* Garante que o modal não ocupe toda a largura */
  height: auto; /* Torna o modal flexível para caber o conteúdo */
  overflow-y: auto; /* Permite rolagem se o conteúdo exceder o espaço */
  border-radius: 10px; /* Ajusta as bordas arredondadas */
  margin-left:-44px;
}

.title {
  font-size: 24px; 
}

.slide-controls {
  margin: 15px 0 5px 0; 
}

.slide-controls .slide {
  font-size: 14px; 
}

.form-inner form .field {
  margin-top: 10px; 
}

.form-inner form .field input {
  padding-left: 5px; 
}
.todo-resume{
  width: 100%;
}
th{
  padding-left: 18px;
}
}
/* ======================== Responsividade 377px ========================= */
@media screen and (max-width: 377px) {
  .login-modal {
    padding: 10px; 
  }

  .wrapper {
    padding: 12px 20px; 
    
  }

  .title {
    font-size: 28px; 
  }

  .slide-controls {
    margin: 20px 0 5px 0; 
  }

  .slide-controls .slide {
    font-size: 16px; 
  }

  .form-inner form .field {
    margin-top: 15px; 
  }

  .form-inner form .field input {
    padding-left: 10px; 
  }
}