/* Meta tag para colocar no do seu HTML:
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0; /* Cor de fundo mais clara */
color: #444; /* Texto mais escuro para melhor legibilidade */
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
background-color: transparent; /* Ou a mesma cor do cabeçalho */
}
header {
background: rgb(3, 35, 82); /* Azul translucido */
color: #ffd900ce; /* Texto amarelo */
padding: 15px 40px; /* Diminuindo a altura do cabeçalho */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
display: flex; /* Flexbox para alinhar logo e nav */
align-items: center; /* Centraliza verticalmente */
justify-content: space-between; /* Espaça logo e nav */
border-radius: 15px; /* Arredondamento dos cantos do cabeçalho */
overflow: hidden; /* Garante que o conteúdo não ultrapasse os limites arredondados */
position: relative; /* Necessário para o z-index funcionar */
z-index: 10; /* Garante que o cabeçalho fique acima de outros elementos */
}
header a {
text-decoration: none; /* Remove sublinhado do link */
font-size: 1.2em; /* Aumenta o tamanho da fonte dos links */
}
.logo {
height: 80px; /* Aumenta a altura da logo */
margin-right: 20px; /* Espaço à direita da logo */
border-radius: 15px; /* Arredonda os cantos da logo */
object-fit: cover; /* Garante que a imagem se ajuste ao tamanho */
}
nav {
margin-left: auto; /* Empurra o menu para a direita */
}
nav ul {
list-style: none;
display: flex; /* Alinha os itens do menu em linha */
justify-content: center; /* Centraliza os itens do menu */
}
nav ul li {
margin-left: 30px; /* Espaço entre os itens do menu */
}
nav ul li a {
color: #FFD700; /* Texto amarelo para contraste */
text-decoration: none;
font-weight: bold;
padding: 10px 15px; /* Adiciona padding para aumentar a área clicável */
border-radius: 10px; /* Arredonda as pontas */
transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* Transição suave */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve */
}
nav ul li a:hover {
color: #ffffff; /* Muda a cor ao passar o mouse */
background-color: rgba(255, 215, 0, 0.7); /* Fundo amarelo translucido ao passar o mouse */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra mais forte ao passar o mouse */
}
#hero {
background-image: linear-gradient(to right, rgba(0, 51, 102, 0.8), rgba(0, 80, 158, 0.8)); /* Gradiente azul translucido */
color: white;
text-align: center;
padding: 150px 0; /* Aumenta o padding superior para empurrar o conteúdo para baixo */
animation: fadeIn 1s; /* Animação de entrada */
position: relative; /* Para garantir que o z-index funcione */
z-index: 1; /* Z-index menor que o cabeçalho */
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#hero h1 {
font-size: 3.5em; /* Aumenta o tamanho do título */
margin-bottom: 20px;
animation: slideIn 1s; /* Animação de deslizamento */
}
@keyframes slideIn {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
#hero p {
font-size: 1.5em; /* Corrigido o espaço extra */
margin-bottom: 30px;
}
.cta-button {
background-color: rgba(255, 215, 0, 0.7); /* Dourado translucido */
color: #003366; /* Azul */
padding: 15px 30px;
border: none;
border-radius: 10px; /* Arredonda as pontas */
font-size: 1.2em;
text-decoration: none; /* Remove o sublinhado */
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transição suave */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve */
}
.cta-button:hover {
background-color: rgba(255, 215, 0, 0.9); /* Dourado mais claro */
transform: scale(1.05); /* Efeito de aumento ao passar o mouse */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra mais forte ao passar o mouse */
}
#informacoes {
background-color: rgba(224, 247, 250, 0.9); /* Azul claro translucido */
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 20px 0;
text-align: center; /* Centraliza o texto */
}
#informacoes h2 {
color: #003366; /* Azul */
margin-bottom: 20px;
font-size: 2.5em; /* Aumenta o tamanho do título */
}
.informacoes-list {
margin-top: 20px;
}
.informacao-item {
margin: 15px 0; /* Espaçamento entre os itens */
font-size: 1.2em; /* Tamanho da fonte */
color: #003366; /* Azul */
animation: slideIn 0.5s forwards; /* Animação de deslizamento */
}
.informacao-item:nth-child(1) { animation-delay: 0.1s; }
.informacao-item:nth-child(2) { animation-delay: 0.2s; }
.informacao-item:nth-child(3) { animation-delay: 0.3s; }
.informacao-item:nth-child(4) { animation-delay: 0.4s; }
.informacao-item:nth-child(5) { animation-delay: 0.5s; }
@keyframes slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
main {
padding: 40px 0;
}
#servicos {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 20px 0;
text-align: center; /* Centraliza o texto do título e conteúdo */
}
.service-container {
display: flex;
flex-wrap: wrap; /* Permite que os cartões se movam para a próxima linha se não houver espaço suficiente */
justify-content: center; /* Centraliza os cartões horizontalmente */
}
.service-card {
display: flex;
flex-direction: column; /* Alinha o conteúdo verticalmente */
justify-content: space-between; /* Distribui o espaço entre os elementos */
align-items: center; /* Centraliza o conteúdo horizontalmente */
width: calc(33.33% - 30px); /* Cada cartão ocupa 1/3 do espaço disponível, menos a margem */
max-width: 350px; /* Limita a largura máxima */
margin: 15px; /* Aumenta o espaçamento entre as caixas */
text-align: center;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
padding: 20px; /* Ajusta o padding para mais espaço interno */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra leve */
}
.service-card img {
width: 100%;
height: 200px; /* Ajusta a altura da imagem */
object-fit: cover; /* Cobre a área da imagem */
border-radius: 10px; /* Arredonda os cantos da imagem */
}
.service-card h4 {
color: #003366; /* Azul */
margin: 10px 0;
font-size: 1.8em; /* Aumenta o tamanho da fonte do título */
font-weight: bold; /* Destaca o título */
}
.service-card p {
padding: 0 10px;
font-size: 1em; /* Aumenta o tamanho da fonte do texto */
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
#como-funciona {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 20px 0;
}
.funcionamento {
display: flex;
justify-content: space-around; /* Distribui os cartões uniformemente */
flex-wrap: wrap; /* Permite que os cartões se movam para a próxima linha se não houver espaço suficiente */
}
.funcao-card {
background-color: rgba(224, 247, 250, 0.9); /* Azul claro translucido */
border-radius: 10px;
padding: 20px;
margin: 10px;
width: 30%; /* Ajusta a largura dos cartões */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s; /* Transição suave ao passar o mouse */
}
.funcao-card:hover {
transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
}
.funcao-card i {
font-size: 2em; /* Tamanho do ícone */
color: #003366; /* Cor do ícone */
margin-bottom: 10px; /* Espaço abaixo do ícone */
}
.funcao-card h4 {
color: #003366; /* Azul */
margin-bottom: 10px; /* Espaço abaixo do título */
}
.conclusao {
margin-top: 20px;
font-size: 1.2em; /* Aumenta o tamanho da fonte da conclusão */
color: #003366; /* Azul */
}
#testemunhos {
background-color: rgba(224, 247, 250, 0.9); /* Azul claro translucido */
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 20px 0;
text-align: center;
}
.testimonial {
margin: 20px 0;
font-style: italic;
}
.testimonial cite {
display: block;
margin-top: 10px;
font-weight: bold;
}
#informacoes-adicionais {
display: flex;
justify-content: space-between; /* Distribui as caixas de forma uniforme */
flex-wrap: wrap; /* Permite que as caixas se movam para a próxima linha se não houver espaço suficiente */
padding: 30px 0;
}
.info-box {
flex: 1; /* Permite que as caixas cresçam igualmente */
margin: 10px; /* Espaçamento entre as caixas */
padding: 20px;
background-color: rgba(255, 255, 255, 0.9); /* Fundo branco translucido */
border-radius: 10px; /* Cantos arredondados */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra leve */
text-align: center; /* Centraliza o texto */
}
.info-box h4 {
color: #003366; /* Azul */
margin-bottom: 10px; /* Espaço abaixo do título */
}
.info-box h4 i {
color: #003366; /* Cor do ícone corrigida */
margin-right: 5px; /* Espaçamento à direita do ícone */
font-size: 1.2em; /* Tamanho do ícone */
}
.info-box.centralizado {
flex-basis: 100%; /* Faz com que a caixa centralizada ocupe toda a largura */
text-align: center; /* Centraliza o texto */
margin-top: 20px; /* Espaço acima da caixa centralizada */
}
#contato {
background-color: rgba(255, 255, 255, 0.9); /* Fundo branco translucido */
padding: 30px;
border-radius: 10px; /* Cantos arredondados */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra leve */
margin: 20px 0;
}
#contato h3 {
color: #003366; /* Azul */
margin-bottom: 20px; /* Espaço abaixo do título */
font-size: 1.5em; /* Aumenta o tamanho da fonte do título */
}
#contactForm {
display: flex;
flex-direction: column; /* Alinha os campos do formulário verticalmente */
}
#contactForm input {
margin: 10px 0; /* Espaçamento entre os campos */
padding: 10px; /* Espaçamento interno */
border: 1px solid #ccc; /* Borda leve */
border-radius: 5px; /* Cantos arredondados */
}
#contactForm button {
background-color: #003366; /* Azul */
color: white; /* Texto branco */
padding: 10px; /* Espaçamento interno */
border: none; /* Remove a borda */
border-radius: 5px; /* Cantos arredondados */
cursor: pointer; /* Muda o cursor ao passar o mouse */
transition: background-color 0.3s; /* Transição suave */
}
#contactForm button:hover {
background-color: #00509e; /* Azul mais escuro ao passar o mouse */
}
footer {
background-color: #1a1a1a; /* Fundo escuro */
color: #FFD700; /* Dourado */
text-align: center; /* Centraliza o texto */
padding: 20px 0; /* Espaçamento interno */
}
footer p {
margin: 0; /* Remove margens */
}
/* Estilo para os ícones de redes sociais */
.social-icons {
display: flex; /* Alinha os ícones em linha */
justify-content: center; /* Centraliza os ícones */
margin-top: 10px; /* Espaçamento acima dos ícones */
}
.social-icon {
width: 40px; /* Tamanho dos ícones */
height: 40px; /* Tamanho dos ícones */
margin: 0 10px; /* Espaçamento entre os ícones */
transition: transform 0.3s; /* Transição suave ao passar o mouse */
}
.social-icon:hover {
transform: scale(1.1); /* Aumenta o ícone ao passar o mouse */
}
/* Garante que todas imagens sejam responsivas */
img {
max-width: 100%;
height: auto;
}
/* Responsividade para dispositivos com largura até 1024px (tablets) */
@media (max-width: 1024px) {
.funcao-card {
width: 45%; /* Ajusta a largura para tablets */
}
.service-card {
width: 45%;
}
}
/* Responsividade para dispositivos menores, até 768px */
@media (max-width: 768px) {
header {
flex-direction: column; /* Empilha logo e nav verticalmente */
padding: 10px 20px;
}
nav ul {
flex-direction: column; /* Alinha os itens do menu em coluna */
margin-left: 0; /* Remove margem à esquerda */
margin-right: 0; /* Remove margem à direita */
padding: 0;
}
nav ul li {
margin-left: 0; /* Remove margem entre os itens do menu */
margin-bottom: 10px; /* Adiciona espaço abaixo de cada item */
}
#hero h1 {
font-size: 2.5em; /* Reduz o tamanho do título em telas menores */
}
#hero p {
font-size: 1.2em; /* Reduz o tamanho do texto em telas menores */
}
.service-card, .funcao-card {
width: 100%; /* Cada cartão ocupa 100% do espaço em telas menores */
}
.info-box {
flex-basis: 100%; /* Faz com que as caixas ocupem toda a largura em telas menores */
}
}
/* Responsividade para dispositivos pequenos, até 480px (celulares) */
@media (max-width: 480px) {
header {
flex-direction: column; /* Empilha logo e nav verticalmente */
padding: 10px 20px;
}
.logo {
height: 60px;
margin: 0 0 10px 0;
}
nav ul {
width: 100%;
justify-content: center;
}
nav ul li {
margin: 10px 0;
}
#hero {
padding: 100px 20px; /* Ajusta padding */
}
#hero h1 {
font-size: 2em; /* Tamanho menor do título */
}
#hero p {
font-size: 1em; /* Tamanho menor do texto */
}
.cta-button {
padding: 12px 20px; /* Ajusta padding do botão */
font-size: 1em; /* Ajusta tamanho da fonte */
}
}