/* Estilo geral do rodapé */
footer {
background: #588157; /* cor principal do footer (verde do projeto) */
width: 100%; /* ocupa toda a largura da tela */
color: white; /* texto branco para contraste */
}

/* ========================= */
/* ÍCONES SOCIAIS */
/* ========================= */

/* Container dos ícones */
.socialIcons {
display: flex; /* uso flexbox para alinhar */
justify-content: center; /* centraliza horizontalmente */
}

/* Links dos ícones */
.socialIcons a {
text-decoration: none; /* remove sublinhado */
padding: 10px; /* espaço interno */
margin: 10px; /* espaço entre os ícones */
border-radius: 50%; /* deixa o fundo circular */
}

/* Ícone em si */
.socialIcons a i {
font-size: 2em; /* tamanho grande para destaque */
color: white; /* cor branca */
opacity: 0.9; /* leve transparência */
}

/* Hover no ícone */
.socialIcons a:hover {
background-color: #adc178; /* cor mais clara ao passar o mouse */
transition: 0.5s; /* animação suave */
}

/* Cor do ícone no hover */
.socialIcons a:hover i {
color: white; /* mantém branco */
transition: 0.5s;
}

/* ========================= */
/* FOOTER  */
/* ========================= */

/* Área final do footer */
.footerBottom {
background: #588157; /* mesma cor do footer */
padding: 5px; /* espaço interno */
text-align: center; /* centraliza tudo */
}

/* Texto do footer */
.footerBottom p {
margin: 0; /* remove margens padrão */
font-size: 1em; /* tamanho padrão */
}

/* Nome (destaque) */
.footerBottom .designer {
font-weight: bold; /* deixa meu nome em negrito */
}

/* Logo do footer */
.footerBottom img {
width: 250px; /* tamanho da logo  */
margin-bottom: -35px; /* espaço entre logo e texto */
filter: brightness(1.2);
animation: float 3s ease-in-out infinite; /* animação flutuando */
}

/* ========================= */
/* ANIMAÇÃO */
/* ========================= */

/* Animação de leve "flutuação" */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px); /* sobe um pouquinho */
}
100% {
transform: translateY(0px);
}
}