styles.css

/* Estilos Globais */
* {
    margin: 0; /* Remove a margem padrão de todos os elementos */
    padding: 0; /* Remove o preenchimento padrão de todos os elementos */
    box-sizing: border-box; /* Inclui padding e bordas na largura e altura total dos elementos */
}
body {
    font-family: Arial, sans-serif; /* Define a fonte padrão do corpo */
    line-height: 1.6; /* Define a altura da linha para melhor legibilidade */
    background-color: #000; /* Fundo preto */
    color: #fff; /* Texto principal branco */
}

/* Cabeçalho */
header {
    background-color: #ffd700; /* Amarelo dourado */
    color: #000; /* Texto preto */
    text-align: center; /* Centraliza o texto do cabeçalho */
    padding: 1.5rem 0; /* Adiciona espaçamento interno ao cabeçalho */
}
header h1 {
    margin-bottom: 0.5rem; /* Espaço abaixo do título */
    font-size: 2rem; /* Tamanho da fonte do título */
}

/* Navegação */
nav {
    background-color: #333; /* Cor de fundo do nav */
    padding: 10px; /* Espaçamento interno do nav */
    text-align: center; /* Centraliza o conteúdo dentro do nav */
    border: 1px solid #000; /* Borda preta ao redor do menu de navegação */
}
nav a {
    color: #fff; /* Cor do texto dos links ajustada para branco */
    text-decoration: none; /* Remove o sublinhado dos links */
    padding: 10px 15px; /* Espaçamento interno dos links */
    margin: 0 10px; /* Margem entre os links */
    border-radius: 5px; /* Bordas arredondadas para um visual mais suave */
    transition: background-color 0.3s; /* Animação suave para a cor de fundo ao passar o mouse */
}
nav a:hover {
    background-color: #555; /* Cor de fundo ao passar o mouse */
}

/* Seções */
section {
    margin: 2rem auto; /* Margem superior/inferior de 2rem e centraliza horizontalmente */
    padding: 1.5rem; /* Espaçamento interno das seções */
    width: 90%; /* Largura das seções */
    max-width: 800px; /* Largura máxima das seções */
    background: #111; /* Fundo cinza escuro para contraste */
    border-radius: 8px; /* Bordas arredondadas das seções */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); /* Sombra amarela das seções */
}
section h2 {
    color: #ffd700; /* Títulos em amarelo */
    margin-bottom: 0.5rem; /* Espaço abaixo do título da seção */
    font-size: 1.5rem; /* Tamanho da fonte dos títulos das seções */
}
section p, section ul {
    color: #e5e5e5; /* Texto em cinza claro */
    margin: 0.5rem 0; /* Margem vertical das parágrafos e listas */
}

/* Estilos para Card */
.card-container {
    display: flex; /* Exibe os cards em flexbox */
    flex-wrap: wrap; /* Permite que os cards se movam para a linha seguinte se não houver espaço */
    gap: 1rem; /* Espaço entre os cards */
    justify-content: center; /* Centraliza os cards */
}

.card {
    background-color: #111; /* Fundo do card em preto */
    border-radius: 8px; /* Bordas arredondadas do card */
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2); /* Sombra amarela do card */
    color: #e5e5e5; /* Texto em cinza claro dentro do card */
    padding: 1rem; /* Espaçamento interno do card */
    width: 280px; /* Largura do card */
    text-align: center; /* Centraliza o texto dentro do card */
    transition: transform 0.3s, box-shadow 0.3s; /* Animação suave para transformação e sombra */
}

.card h3 {
    color: #ffd700; /* Títulos dos cards em amarelo */
    margin-bottom: 0.5rem; /* Espaço abaixo do título do card */
}

.card p {
    margin: 0.5rem 0 1rem; /* Margem vertical do parágrafo dentro do card */
}

.card a {
    color: #ffd700; /* Cor do link dentro do card */
    text-decoration: none; /* Remove o sublinhado do link */
    font-weight: bold; /* Define o peso da fonte do link como negrito */
    transition: color 0.3s; /* Animação suave para a cor do link */
}

.card a:hover {
    color: #fff; /* Cor do link ao passar o mouse */
}

.card:hover {
    transform: translateY(-5px); /* Move o card para cima ao passar o mouse */
    box-shadow: 0 8px 16px rgba(255, 215, 0, 0.3); /* Aumenta a sombra no hover */
}

/* Contato */
#contato {
    padding: 20px; /* Espaçamento interno */
    background-color: #000; /* Cor de fundo preta */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); /* Sombra amarela */
}

#contato h2 {
    margin-top: 20px; /* Margem superior */
    color: #ffd700; /* Cor do texto */
}

#contato ul {
    list-style-type: none; /* Remove marcadores da lista */
    padding: 0; /* Remove o preenchimento padrão da lista */
}

#contato ul li {
    font-size: 1.1em; /* Tamanho da fonte dos itens da lista de contato */
    margin: 10px 0; /* Margem vertical dos itens da lista */
}

#contato ul li i {
    margin-right: 5px; /* Margem direita para ícones */
}

/* Ícones de Contato */
.whatsapp-icon {
    color: #25D366; /* Verde do WhatsApp */
    margin-right: 8px; /* Espaço à direita do ícone */
}

.email-icon {
    color: #D44638; /* Vermelho do Gmail */
    margin-right: 8px; /* Espaço à direita do ícone */
}

/* Estilos para o formulário */
.contact-form {
    display: flex; /* Flexbox para layout */
    flex-direction: column; /* Coluna para elementos */
}

.contact-form label {
    margin-top: 10px; /* Margem superior para os rótulos */
}

.contact-form input,
.contact-form textarea {
    padding: 10px; /* Preenchimento interno */
    margin-top: 5px; /* Margem superior */
    border: 1px solid #ccc; /* Borda padrão */
    border-radius: 4px; /* Cantos arredondados */
}

/* Estilo do botão */
.contact-form button {
    margin-top: 10px; /* Margem superior */
    padding: 10px; /* Preenchimento interno */
    border: none; /* Sem borda */
    border-radius: 4px; /* Cantos arredondados */
    background-color: #4CAF50; /* Cor de fundo do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Cursor de mão */
}

.contact-form button:hover {
    background-color: #45a049; /* Cor de fundo ao passar o mouse */
}

/* Rodapé */
footer {
    text-align: center; /* Centraliza o texto do rodapé */
    padding: 1rem 0; /* Adiciona espaçamento interno ao rodapé */
    background-color: #111; /* Fundo do rodapé preto escuro */
    color: #ffd700; /* Texto do rodapé em amarelo */
    font-size: 0.9rem; /* Tamanho da fonte do rodapé */
}