.section-valores {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
  background-color: #E30613; /* Cor de fundo vermelha */
  color: white;
}

.valores-content {
  flex: 1;
  padding-left: 0px; /* Espacio para alinear el contenido a la derecha */
}

.valores-title {
  font-size: 4em;
  font-weight: bold;
  margin-bottom: 30px;
  text-transform: uppercase;
  transition: transform 0.3s ease;
  text-align: left; /* Alinear el texto a la derecha */
  font-style: italic;
}

.valores-title:hover {
  transform: scale(1.02);
}

.valores-subtitle {
  font-size: 2em; /* Tamanho do subtítulo */
  font-weight: normal; /* Peso do texto do subtítulo */
  margin-bottom: 20px; /* Margem abaixo do subtítulo */
  color: white; /* Cor do subtítulo */
  white-space: pre-line;
  font-style: italic;
}

.valores-list {
  font-size: 1.2em;
  line-height: 1.4;
  margin-top: 20px; /* Espaço acima da lista */
  margin-bottom: 20px; /* Espaço abaixo da lista */
  white-space: pre-line;
  font-style: italic;
  list-style-type: none; /* Remove os marcadores da lista */
  padding-left: 0; /* Remove o recuo padrão */
}

.valores-list i {
  margin-right: 10px; /* Espacio entre el ícono y el texto del valor */
  color: white; /* Color de los íconos de la lista */
  font-size: 1.3em;
}


.valores-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; /* Centrar el contenido */
}

.valores-images img {
  width: 600px;
  margin: 0 auto; /* Centrar la imagen horizontalmente */
  display: block; /* Asegurarte que el margen funcione */
  transition: transform 0.3s ease;
}

.valores-images img:hover {
  transform: scale(1.1);
}

.valores-icon {
  margin-right: 10px; /* Espaço entre o ícone e o título */
  color: white; /* Cor do ícone */
  font-size: 1.3em; /* Tamanho do ícone */
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
  .section-valores {
    flex-direction: column;
    text-align: center;
    padding: 20px; /* Ajustar o padding para telas menores */
    background-color: #E30613;
    color: white;
  }

  .valores-title {
    font-size: 2.5em; /* Reduzir o tamanho do título */
    text-align: center; /* Centralizar o título no mobile */
    margin-bottom: 15px; /* Ajuste da margem inferior */
  }

  .valores-subtitle {
    font-size: 1.5em; /* Reduzir o tamanho do subtítulo */
    margin-bottom: 15px; /* Ajustar a margem inferior */
    text-align: center; /* Centralizar o subtítulo */
  }

  .valores-list {
    font-size: 1em; /* Reduzir o tamanho da lista */
    margin-top: 15px; /* Ajustar espaço superior */
    margin-bottom: 15px; /* Ajustar espaço inferior */
    text-align: left; /* Alinhar o texto da lista à esquerda */
    padding-left: 10px; /* Dar um pequeno recuo para o conteúdo da lista */
  }

  .valores-images {
    flex-direction: column;
    align-items: center; /* Centralizar as imagens no mobile */
    gap: 15px;
  }

  .valores-images img {
    width: 100px; /* Reduzir o tamanho da imagem */
    height: auto; /* Manter a proporção da imagem */
    margin-bottom: 10px; /* Ajustar o espaçamento das imagens */
  }

  .valores-icon {
    font-size: 1.1em; /* Ajustar o tamanho do ícone */
  }

  /* Limitar a largura dos elementos para evitar que saiam da tela */
  .valores-content, .valores-title, .valores-subtitle, .valores-list {
    max-width: 100%;
  }
}