/*   Importante: Os links das fontes Google no do HTML ainda são necessários   se você quiser usar as fontes 'Oswald' e 'Inter'.   Certifique-se de que elas estejam carregadas globalmente para esta seção ser exibida corretamente. */ /* Novo invólucro para a seção, responsável pela cor de fundo de largura total */ .wallan-section-wrapper { background: linear-gradient(180deg, #281910 -10%, #262626 40%, #281910 120%); padding: 60px 20px 80px; box-sizing: border-box; width: 100%; color: #fff; font-family: "Inter", sans-serif; } /* Container interno da seção para limitar a largura do conteúdo e centralizá-lo */ .wallan-problem-solution-section { max-width: 1100px; /* Mantido em 1100px para mais espaço */ margin: 0 auto; /* Centraliza o conteúdo horizontalmente */ display: flex; /* Usa flexbox para organizar os itens verticalmente dentro da seção */ flex-direction: column; align-items: center; /* Centraliza os itens horizontalmente dentro deste container */ text-align: center; /* Alinhamento de texto padrão para o conteúdo */ } .wallan-section-title { font-family: "Oswald", sans-serif; font-size: 2.7em; font-weight: 700; color: #DAA51E; margin-bottom: 70px; text-transform: uppercase; letter-spacing: 2px; text-align: center; } .wallan-problems-container { width: 100%; /* Ocupa a largura total do seu pai */ margin-bottom: 70px; /* Espaço abaixo das linhas de problemas */ } .wallan-problems-row { display: flex; justify-content: center; /* Centraliza os itens na linha */ align-items: flex-start; /* Alinha os itens ao topo se as alturas do texto forem diferentes */ flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo em telas menores */ gap: 50px 100px; /* Exemplo: 50px vertical, 100px horizontal. Ajuste conforme necessário */ margin-bottom: 40px; /* Espaço entre as linhas de problemas */ } .wallan-problems-row:last-child { margin-bottom: 0; /* Remove a margem abaixo da última linha de problemas */ } .wallan-problem-item { display: flex; /* Ícone e texto lado a lado */ flex-direction: row; /* Ícone e texto ficam em linha */ align-items: center; /* Centraliza verticalmente o ícone e o texto */ gap: 15px; /* Espaço entre o ícone e o texto (dentro do próprio item) */ text-align: left; /* Alinhamento de texto para a descrição */ flex-basis: 300px; /* Tamanho base ideal para cada item. Permite encolher/crescer ligeiramente. */ max-width: 400px; /* Garante que o item não fique grande demais em telas muito largas */ flex-grow: 1; /* Permite que o item cresça para ocupar espaço, se houver */ flex-shrink: 1; /* Permite que o item encolha, se necessário */ } .wallan-problem-icon { width: 90px; height: 90px; background-color: #e67e22; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; /* Impede que o ícone encolha */ } .wallan-problem-icon img { max-width: 100%; max-height: 100%; object-fit: contain; } .wallan-problem-item p { font-size: 1.15em; line-height: 1.6; color: #b0b0b0; font-weight: 400; flex-grow: 1; /* Permite que o texto ocupe o espaço restante */ } .wallan-solution-text { margin-bottom: 60px; text-align: center; max-width: 800px; } .wallan-solution-text p { font-size: 1.8em; font-weight: 600; color: #fff; margin-bottom: 20px; line-height: 1.4; } .wallan-solution-text p:last-child { font-size: 1.3em; font-weight: 500; color: #e0e0e0; margin-bottom: 0; } .wallan-call-to-action-button { background-color: #FBC02C; color: white; padding: 20px 45px; border: none; border-radius: 8px; font-size: 1.4em; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; text-transform: uppercase; letter-spacing: 1.2px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .wallan-call-to-action-button:hover { background-color: #c99920; transform: translateY(-2px); } /* Ajustes responsivos */ @media (max-width: 1100px) { .wallan-problems-row { gap: 50px 60px; /* Reduz gap para 3 colunas em telas um pouco menores */ } } @media (max-width: 900px) { /* Novo breakpoint para 2 colunas */ .wallan-problems-row { gap: 40px 40px; /* Reduz gap para 2 colunas */ } .wallan-problem-item { flex-basis: calc(50% - 40px); /* 2 colunas, subtrai o gap entre elas */ max-width: unset; /* Remove max-width fixo para maior flexibilidade */ } } @media (max-width: 768px) { .wallan-section-wrapper { padding: 40px 15px 60px; } .wallan-section-title { font-size: 1.5em; margin-bottom: 50px; } .wallan-problems-row { flex-direction: column; /* Empilha as "linhas" de problema */ align-items: center; /* Centraliza cada item de problema na coluna */ gap: 30px; /* Espaço entre os itens empilhados */ margin-bottom: 30px; } .wallan-problem-item { width: 100%; /* Faz com que o item ocupe a largura total do seu pai */ max-width: 400px; /* Limita a largura máxima para leitura */ /* CHAVE: Alinha o ícone e o texto lado a lado no mobile */ flex-direction: row; justify-content: flex-start; /* Alinha o conteúdo à esquerda dentro do item */ text-align: left; /* Alinha o texto à esquerda */ align-items: center; /* Centraliza verticalmente ícone e texto */ /* Remove gap pois já tem margin-right no ícone */ gap: 0; } .wallan-problem-icon { flex-shrink: 0; /* Garante que o ícone não encolha */ margin-right: 15px; /* Espaço entre o ícone e o texto */ } .wallan-problem-item p { font-size: 1.05em; } .wallan-solution-text p { font-size: 1.4em; margin-bottom: 15px; } .wallan-solution-text p:last-child { font-size: 1.1em; } .wallan-call-to-action-button { font-size: 1.2em; padding: 16px 30px; } } @media (max-width: 480px) { .wallan-section-title { font-size: 1.9em; margin-bottom: 40px; } .wallan-problem-icon { width: 70px; height: 70px; } .wallan-problem-item p { font-size: 0.95em; } .wallan-solution-text p { font-size: 1.1em; margin-bottom: 10px; } .wallan-solution-text p:last-child { font-size: 0.95em; } .wallan-call-to-action-button { font-size: 1em; padding: 14px 25px; } }