.features-section2 {
  padding: 80px 0;
  background-color: #fff;
}

.features-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.features-content img {
  max-width: 500px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.features-text {
  flex: 1;
  max-width: 500px;
}

.features-text h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #333;
  font-family: 'Headmong Rounded', sans-serif;
}

.features-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #666;
  margin-bottom: 25px;
}

.features-text .highlight {
  color: #ffdf28;
  font-weight: bold;
}

@media (max-width: 992px) {
  .features-content {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  
  .features-content img {
    max-width: 100%;
    margin-bottom: 20px;
  }
}
}

.features-image {
  flex: 0 0 45%; /* A imagem ocupa 45% da largura disponível */
  text-align: center; /* Centraliza a imagem */
}

.features-image img {
  max-width: 100%; /* Garante que a imagem não transborde */
  height: auto; /* Mantém a proporção da imagem */
  border-radius: 8px; /* Leve borda arredondada, se desejar */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidade */
}

.features-text {
  flex: 0 0 50%; /* O bloco de texto ocupa 50% da largura disponível */
  text-align: left; /* Alinha o texto à esquerda */
}

.features-text h2 {
  font-size: 3em; /* Tamanho da fonte para o título principal */
  color: #333;
  margin-bottom: 15px;
}

.features-text .subtitle {
  font-size: 1.3em;
  color: #666;
  margin-bottom: 40px;
  line-height: 1.5;
}

.feature-item {
  display: flex; /* Para alinhar o ícone e os detalhes do item */
  align-items: flex-start; /* Alinha o ícone e o texto no topo */
  margin-bottom: 30px; /* Espaço entre os itens */
}

.icon-circle {
  flex-shrink: 0; /* Impede que o círculo do ícone encolha */
  width: 45px; /* Tamanho do círculo */
  height: 45px;
  background-color: #ffdf28; /* Cor do círculo do ícone, ajuste conforme sua paleta */
  border-radius: 50%; /* Torna o círculo redondo */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px; /* Espaço entre o ícone e o texto */
}

.icon-circle i {
  color: #fff; /* Cor do ícone */
  font-size: 1.2em; /* Tamanho do ícone */
}

.item-details h3 {
  font-size: 1.5em; /* Tamanho do título do item */
  color: #333;
  margin-bottom: 8px;
}

.item-details p {
  font-size: 1em; /* Tamanho da fonte para a descrição do item */
  color: #777;
  line-height: 1.6;
}

/* Media Queries para Responsividade */
@media (max-width: 992px) {
  .features-content {
    flex-direction: column; /* Empilha a imagem e o texto em telas menores */
    text-align: center; /* Centraliza o texto */
    gap: 40px;
  }

  .features-image,
  .features-text {
    flex: none; /* Remove o flex-basis */
    width: 90%; /* Ajusta a largura */
    max-width: 600px; /* Limita a largura máxima */
  }

  .features-text {
    text-align: center; /* Centraliza o texto quando empilhado */
  }

  .features-text h2 {
    font-size: 2.5em;
  }

  .features-text .subtitle {
    font-size: 1.1em;
  }

  .feature-item {
    flex-direction: column; /* Empilha o ícone e os detalhes */
    align-items: center; /* Centraliza os itens */
    text-align: center;
  }

  .icon-circle {
    margin-right: 0;
    margin-bottom: 15px; /* Espaço entre o ícone e o texto quando empilhado */
  }
}

@media (max-width: 576px) {
  .features-section {
    padding: 60px 0;
  }

  .features-text h2 {
    font-size: 2em;
  }

  .features-text .subtitle {
    font-size: 1em;
  }

  .item-details h3 {
    font-size: 1.3em;
  }

  .item-details p {
    font-size: 0.9em;
  }
}

/* Estilos para a seção de Estatísticas e Cartões */
.stats-section {
  padding: 80px 0 100px 0; /* Espaçamento superior e inferior */
  background-color: #f8f8f8; /* Fundo cinza claro para a seção */
  text-align: center; /* Centraliza o cabeçalho */
}

.stats-header {
  margin-bottom: 60px; /* Espaço abaixo do cabeçalho */
}

.stats-header h2 {
  font-size: 3.2em;
  color: #333;
  margin-bottom: 15px;
}

.stats-header h2 span {
  color: #ffdf28; /* Cor de destaque para o número */
  font-weight: bold;
}

.stats-header p {
  font-size: 1.3em;
  color: #666;
  max-width: 700px; /* Limita a largura do parágrafo */
  margin: 0 auto; /* Centraliza o parágrafo */
}

.stats-cards-grid {
  display: grid;
  /* Define as colunas do grid: 2 colunas para os grandes, 3 para os pequenos */
  /* Isso será ajustado via media queries para responsividade */
  grid-template-columns: repeat(3, 1fr); /* Padrão de 3 colunas para a maioria dos cartões */
  gap: 30px; /* Espaço entre os cartões */
  max-width: 1200px; /* Largura máxima da grade de cartões */
  margin: 0 auto; /* Centraliza a grade */
  padding: 0 20px; /* Padding nas laterais */
}

.stat-card {
  background-color: #fff;
  border-radius: 12px; /* Bordas arredondadas */
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px; /* Altura mínima para cartões menores */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição para o hover */
}

.stat-card:hover {
  transform: translateY(-5px); /* Efeito de "levantar" no hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Sombra mais forte no hover */
}

.icon-wrapper {
  margin-bottom: 20px;
}

.icon-wrapper .svg-icon {
  width: 60px; /* Tamanho dos ícones SVG */
  height: auto;
  color: #ffdf28; /* Cor para ícones SVG, se tiver fill/stroke no CSS */
}

/* Se estiver usando Font Awesome */
.icon-wrapper i {
  font-size: 3.5em; /* Tamanho dos ícones Font Awesome */
  color: #ffdf28; /* Cor dos ícones Font Awesome */
}

.stat-card h3 {
  font-size: 1.6em;
  color: #333;
  line-height: 1.3;
}

.stat-card h3 span {
  color: #ffdf28;
  font-weight: bold;
}

/* Estilos específicos para os cartões grandes */
.large-card {
  grid-column: span 1; /* Cada um ocupa 1 coluna por padrão */
  min-height: 220px; /* Altura mínima para cartões maiores */
}

/* Em telas maiores, os large-cards vão ocupar 1.5 colunas cada um do grid de 3 */
/* Isso fará com que eles se estendam mais e fiquem em duas colunas */
@media (min-width: 993px) {
  .stats-cards-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas para desktop */
  }

  /* Posiciona o primeiro e o segundo large-card na primeira linha */
  .large-card:nth-child(1) { grid-column: span 1; }
  .large-card:nth-child(2) { grid-column: span 1; }

  /* Posiciona os small-cards na segunda linha, ocupando 1/3 cada */
  .small-card:nth-child(3) { grid-column: 1 / 2; } /* Coluna 1 */
  .small-card:nth-child(4) { grid-column: 2 / 3; } /* Coluna 2 */
  .small-card:nth-child(5) { grid-column: 3 / 4; } /* Coluna 3 */

  /* Para centralizar os 3 cartões pequenos, precisamos de um ajuste no grid.
     Uma abordagem mais simples é usar um grid de 5 colunas para o desktop,
     e fazer os large-cards ocuparem 2.5 colunas cada um,
     e os small-cards ocuparem 1.66 colunas cada.
     Mas para o layout que você mostrou, com 2 grandes e 3 pequenos abaixo,
     e os 3 pequenos centralizados, a melhor abordagem é um sub-grid ou ajustar o main grid.

     Vamos usar o layout mais direto que parece com a imagem:
     uma linha para os grandes, outra linha para os pequenos.
  */

  .stats-cards-grid {
    display: flex; /* Mudar para flexbox para controle de quebras de linha */
    flex-wrap: wrap;
    justify-content: center; /* Centraliza os itens */
    gap: 30px;
  }

  .large-card {
    flex: 0 0 calc(50% - 15px); /* Ocupa metade da largura menos o gap */
    max-width: 585px; /* Limita a largura dos grandes */
  }

  .small-card {
    flex: 0 0 calc(33.333% - 20px); /* Ocupa um terço da largura menos os gaps */
    max-width: 380px; /* Limita a largura dos pequenos */
  }
}


/* Media Queries para Responsividade */
@media (max-width: 992px) {
  .stats-header h2 {
    font-size: 2.8em;
  }

  .stats-header p {
    font-size: 1.1em;
  }

  .stats-cards-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
    gap: 25px;
  }

  .stat-card {
    padding: 25px;
    min-height: 160px;
  }

  .stat-card h3 {
    font-size: 1.4em;
  }

  .icon-wrapper .svg-icon {
    width: 50px;
  }
  .icon-wrapper i {
    font-size: 3em;
  }

  /* Todos os cartões se ajustam para 2 colunas */
  .large-card { grid-column: span 1; }
  .small-card { grid-column: span 1; }
}

@media (max-width: 768px) {
  .stats-header h2 {
    font-size: 2.2em;
  }

  .stats-header p {
    font-size: 1em;
    padding: 0 15px; /* Adiciona padding para texto em telas menores */
  }

  .stats-cards-grid {
    grid-template-columns: 1fr; /* 1 coluna em celulares */
    gap: 20px;
    padding: 0 15px;
  }

  .stat-card {
    min-height: auto; /* Remove altura mínima fixa para mobile */
    padding: 20px;
  }

  .stat-card h3 {
    font-size: 1.3em;
  }

  .icon-wrapper .svg-icon {
    width: 45px;
  }
  .icon-wrapper i {
    font-size: 2.8em;
  }
}

/* Estilos para a seção de Comodidade - Versão 2 */
.convenience-section-v2 {
  padding: 80px 0; /* Espaçamento interno superior e inferior */
  background-color: #fff; /* Fundo branco para a seção */
  text-align: center; /* Centraliza o conteúdo horizontalmente (para o .container) */
}

.convenience-content-v2 {
  display: flex; /* Habilita o Flexbox para alinhar imagem e texto lado a lado */
  align-items: center; /* Alinha os itens verticalmente ao centro */
  justify-content: center; /* Centraliza o conteúdo horizontalmente */
  gap: 60px; /* Espaço entre a imagem e o bloco de texto */
  max-width: 1200px; /* Largura máxima do conteúdo */
  margin: 0 auto; /* Centraliza o contêiner de conteúdo */
  padding: 0 20px; /* Padding nas laterais para evitar que o conteúdo cole nas bordas */
}

.convenience-image-v2 {
  flex: 0 0 45%; /* A imagem ocupa 45% da largura disponível */
  text-align: right; /* Alinha a imagem à direita dentro do seu container */
}

.convenience-image-v2 img {
  max-width: 100%; /* Garante que a imagem não transborde */
  height: auto; /* Mantém a proporção da imagem */
  border-radius: 8px; /* Bordas arredondadas para a imagem */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra suave para a imagem */
}

.convenience-text-v2 {
  flex: 0 0 50%; /* O bloco de texto ocupa 50% da largura disponível */
  text-align: left; /* Alinha o texto à esquerda */
}

.convenience-text-v2 h2 {
  font-size: 2.8em;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.2;
}

.convenience-text-v2 p {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* O estilo do .btn-primary já deve estar definido em seu CSS geral,
   mas se não estiver, adicione-o: */

.btn-primary {
  display: inline-block;
  background-color: #000000;
  color: #fff;
  padding: 15px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: background-color 0.3s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Media Queries para Responsividade */

@media (max-width: 992px) {
  .convenience-content-v2 {
    flex-direction: column; /* Empilha a imagem e o texto em telas menores */
    gap: 40px;
  }

  .convenience-image-v2 {
    flex: none;
    width: 80%; /* Ajusta a largura da imagem */
    max-width: 500px; /* Limita o tamanho máximo */
    text-align: center; /* Centraliza a imagem quando empilhada */
  }

  .convenience-text-v2 {
    flex: none;
    width: 90%; /* Ajusta a largura do texto */
    max-width: 600px;
    text-align: center; /* Centraliza o texto quando empilhado */
  }

  .convenience-text-v2 h2 {
    font-size: 2.2em;
  }

  .convenience-text-v2 p {
    font-size: 1.1em;
  }
}

@media (max-width: 576px) {
  .convenience-section-v2 {
    padding: 60px 0;
  }

  .convenience-text-v2 h2 {
    font-size: 2em;
  }

  .convenience-text-v2 p {
    font-size: 1em;
  }

  .btn-primary {
    padding: 12px 25px;
    font-size: 1em;
  }
}

/* Estilos para a seção "Leve mais tempo e praticidade" */
.time-convenience-section {
  padding: 80px 0; /* Espaçamento interno superior e inferior */
  background-color: #f8f8f8; /* Um fundo cinza claro, se desejar */
  overflow: hidden; /* Importante para o posicionamento das imagens dos celulares */
  position: relative; /* Para posicionar elementos filhos absolutamente, se necessário */
}

.time-convenience-content {
  display: flex; /* Habilita o Flexbox para alinhar texto e imagens lado a lado */
  align-items: center; /* Alinha os itens verticalmente ao centro */
  justify-content: space-between; /* Espaça o texto e as imagens */
  max-width: 1200px; /* Largura máxima do conteúdo */
  margin: 0 auto; /* Centraliza o contêiner de conteúdo */
  padding: 0 20px; /* Padding nas laterais */
}

.time-convenience-text {
  flex: 0 0 45%; /* Ocupa 45% da largura disponível */
  text-align: left;
}

.time-convenience-text h2 {
  font-size: 3em; /* Tamanho da fonte para o título */
  color: #333;
  margin-bottom: 20px;
  line-height: 1.2;
}

.time-convenience-text p {
  font-size: 1.3em;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
}



.time-convenience-images {
  flex: 0 0 50%; /* Ocupa 50% da largura disponível */
  position: relative; /* Para posicionar os celulares um em relação ao outro */
  height: 500px; /* Altura fixa para o contêiner das imagens para controle */
  display: flex; /* Usar flex para centralizar e alinhar as imagens */
  justify-content: center;
  align-items: center;
}

.time-convenience-images .phone-main {
  position: absolute;
  width: 300px; /* Largura do celular principal */
  height: auto;
  z-index: 2; /* Garante que ele fique na frente */
  transform: rotate(-10deg); /* Inclinação leve */
  left: 30%; /* Posição à esquerda no contêiner */
  top: 50%; /* Centraliza verticalmente */
  transform: translate(-50%, -50%) rotate(-10deg); /* Ajusta para centralizar e rotacionar */
}

.time-convenience-images .phone-back {
  position: absolute;
  width: 280px; /* Largura do celular de trás (um pouco menor) */
  height: auto;
  z-index: 1; /* Fica atrás do principal */
  transform: rotate(15deg); /* Inclinação oposta */
  right: 20%; /* Posição à direita no contêiner */
  top: 50%; /* Centraliza verticalmente */
  transform: translate(50%, -50%) rotate(15deg); /* Ajusta para centralizar e rotacionar */
}

.faq-container {
    max-width: 900px;
    margin: 3rem auto 0 auto;
    text-align: left;
}

.faq-item {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.faq-question {
    color: var(--primary-blue);
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    cursor: pointer; /* Indicar que é clicável (para futura funcionalidade) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

/* Opcional: Adicionar um ícone de seta para indicar que é clicável */
.faq-question::after {
    content: '+'; /* Ou '+' */
    font-size: 1.5rem;
    color: var(--secondary-blue);
    transition: transform 0.3s ease;
}

/* Para quando a pergunta for expandida (se adicionar JS) */
.faq-question.active::after {
    content: '-'; /* Ou '−' */
    transform: rotate(0deg);
}


.faq-answer {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    padding-top: 0.5rem; /* Espaço entre pergunta e resposta */
    /* Para futura funcionalidade de esconder/mostrar */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding-top 0.5s ease-out;
}

.faq-answer.active {
    max-height: 200px; /* Ajuste conforme necessário para o conteúdo */
    padding-top: 1rem;
}

/* Responsive adjustments for FAQ */
@media (max-width: 768px) {
    .faq-container {
        padding: 0 1rem;
    }

    .faq-item {
        padding: 1.2rem 1.5rem;
        margin-bottom: 1rem;
    }

    .faq-question {
        font-size: 1.15rem;
    }

    .faq-answer {
        font-size: 0.95rem;
    }
}
/* Media Queries para Responsividade */
@media (max-width: 992px) {
  .time-convenience-content {
    flex-direction: column; /* Empilha texto e imagens em telas menores */
    text-align: center;
    gap: 50px;
  }

  .time-convenience-text {
    flex: none;
    width: 90%;
    max-width: 600px;
  }

  .time-convenience-text h2 {
    font-size: 2.5em;
  }

  .time-convenience-text p {
    font-size: 1.1em;
  }

  .time-convenience-images {
    flex: none;
    width: 100%;
    height: 400px; /* Ajusta a altura para telas menores */
    position: relative; /* Mantém o posicionamento absoluto dentro dele */
  }

  .time-convenience-images .phone-main {
    width: 250px; /* Ajusta o tamanho dos celulares */
    left: 40%;
    transform: translate(-50%, -50%) rotate(-10deg);
  }

  .time-convenience-images .phone-back {
    width: 230px; /* Ajusta o tamanho dos celulares */
    right: 30%;
    transform: translate(50%, -50%) rotate(15deg);
  }
}

@media (max-width: 768px) {
  .time-convenience-section {
    padding: 60px 0;
  }

  .time-convenience-text h2 {
    font-size: 2em;
  }

  .time-convenience-text p {
    font-size: 1em;
  }

  .btn-primary {
    padding: 12px 25px;
    font-size: 1em;
  }

  .time-convenience-images {
    height: 350px;
  }

  .time-convenience-images .phone-main {
    width: 200px;
    left: 45%;
    transform: translate(-50%, -50%) rotate(-10deg);
  }

  .time-convenience-images .phone-back {
    width: 180px;
    right: 35%;
    transform: translate(50%, -50%) rotate(15deg);
  }
}

@media (max-width: 480px) {
  .time-convenience-images {
    height: 300px;
  }
  .time-convenience-images .phone-main {
    width: 180px;
  }
  .time-convenience-images .phone-back {
    width: 160px;
  }
}