body {
font-family: sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.hero {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 100px 0;
}

.hero h1 {
	font-family: sans-serif;
	font-weight: bold;
    color: #fff;
	font-size: 2.5em;
	margin-bottom: 20px;
	line-height: 1.6;
}

.hero h2 {
	font-weight: bold;
	font-size: 1.5em;
    color: #fff;
}

.hero p {
font-size: 1.2em;
margin-bottom: 30px;
}

.botao {
	justify-content: center;
	text-align: center;
}

.button-zap {
	align-items: center;
	color: white;
	background-color: #26D366;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	height: 60px;
	font-size: 1.2em;
}

.button-zap a {
	text-decoration: none;
}

.button-zap img {
	margin-right: 5px;
}

.button {
display: inline-block;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s ease;
}

.button.primary {
background-color: #2ecc71;
color: #fff;
}

.button.primary:hover {
background-color: #27ae60;
}

.problem-solution {
padding: 50px 0;
background-color: #fff;
}

.problem-solution .container {
display: flex;
gap: 30px;
align-items: flex-start;
}

.problem-solution h2 {
margin-bottom: 20px;
color: #3498db;
}

.problem-solution ul {
list-style: none;
padding: 0;
}

.problem-solution ul li {
margin-bottom: 10px;
padding-left: 20px;
position: relative;
}

.problem-solution ul li::before {
content: "✔";
position: absolute;
left: 0;
color: #2ecc71;
}

.problems {
flex: 1;
}

.solutions {
flex: 1;
}

.features {
background-color: #f9f9f9;
padding: 50px 0;
text-align: center;
}

.features h2 {
margin-bottom: 30px;
color: #3498db;
}

.feature-grid {
display: grid;
/*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
grid-template-columns: repeat(3, minmax(250px, 1fr));
gap: 30px;
margin-top: 30px;
}

.feature-card {
/*
background-color: #fff;
*/
    position: relative; /* Essencial para posicionar a imagem expandida */
    overflow: hidden; /* Garante que a imagem não vaze para fora do card */
    /* Outros estilos do seu card, como borda, sombra, padding, etc. */
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease-in-out; /* Transição para o card, se quiser algum efeito nele */

}

.feature-card img {
/*max-width: 80px;
margin-bottom: 15px;*/
    width: 100%;
    height: auto;
    display: block; /* Remove espaçamento extra abaixo da imagem */
    object-fit: contain; /* Mantém a proporção da imagem dentro do card */
    transition: all 0.5s ease-in-out; /* Transição suave para a imagem */
    /* Garante que a imagem comece centralizada se ela não preencher o card */
    object-position: center;
}

.feature-card h3
.feature-card p {
margin-bottom: 10px;
color: #333;
transition: opacity 0.3s ease-in-out;
}

/* Efeito ao passar o mouse sobre o card */
.feature-card:hover img {
    width: 100%;
    height: 100%; /* Aumenta a altura para preencher o card */
    object-fit: scale-down; /* Faz a imagem cobrir todo o espaço, cortando se necessário */
    position: absolute; /* Posiciona a imagem absolutamente dentro do card */
    top: 0;
    left: 0;
    z-index: 1; /* Garante que a imagem fique acima do texto, se você quiser cobrir */
}

.feature-card:hover h3,
.feature-card:hover p {
    opacity: 0; /* Faz o texto desaparecer suavemente */
    visibility: hidden; /* Garante que o texto não seja clicável se estiver invisível */
}

.benefits {
background-color: #fff;
padding: 50px 0;
}

.benefits h2 {
text-align: center;
margin-bottom: 30px;
color: #3498db;
}

.benefits ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}

.benefits ul li {
display: flex;
align-items: center;
padding: 15px;
border-radius: 5px;
background-color: #f9f9f9;
}

.benefits ul li i.icon {
display: inline-block;
width: 20px;
height: 20px;
background-color: #2ecc71;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 20px;
margin-right: 10px;
}

.contact {
background-color: #333;
color: #fff;
padding: 80px 0;
text-align: center;
}

.contact h2 {
margin-bottom: 20px;
}

.contact p {
margin-bottom: 30px;
}

.contact-form {
max-width: 500px;
margin: 0 auto;
padding: 30px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
}

.form-group {
margin-bottom: 20px;
text-align: left;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #555;
border-radius: 4px;
box-sizing: border-box;
background-color: #444;
color: #fff;
}

#form-message {
margin-top: 20px;
padding: 15px;
border-radius: 5px;
font-weight: bold;
}

#form-message.success {
background-color: #2ecc71;
color: #fff;
}

#form-message.error {
background-color: #e74c3c;
color: #fff;
}

.hidden {
display: none;
}

footer {
background-color: #222;
color: #eee;
text-align: center;
padding: 20px 0;
font-size: 0.9em;
}

/* Media Queries para Responsividade */
@media (max-width: 768px) {
.problem-solution .container {
flex-direction: column;
gap: 20px;
}

.feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.benefits ul {
    grid-template-columns: 1fr;
}
}