/* Reseta margens, padding e define box-sizing para todos os elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo básico para o corpo da página */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Estilo para o cabeçalho fixo no topo da página */
header {
    background-color: #333333; /* Cor de fundo escura */
    color: #fff; /* Texto branco */
    padding: 10px 20px; /* Padding interno */
    position: fixed; /* Fixa o cabeçalho no topo */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Garante que o cabeçalho fique acima de outros elementos */
    height: 80px; /* Altura do cabeçalho */
    display: flex; /* Usa Flexbox para layout */
    align-items: center; /* Alinha itens verticalmente no centro */
    justify-content: space-between; /* Distribui espaço entre itens */
}

/* Estilo para o container do cabeçalho */
header .container {
    max-width: 1200px; /* Largura máxima do container */
    margin: 0 auto; /* Centraliza o container */
    display: flex; /* Usa Flexbox para layout */
    align-items: center; /* Alinha itens verticalmente no centro */
    justify-content: space-between; /* Distribui espaço entre itens */
    width: 100%; /* Largura total */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* Fonte do cabeçalho */
}

/* Estilo para o container do logo */
header .logo-container {
    position: relative; /* Permite posicionar o logo secundário */
    height: 60px; /* Altura do container do logo */
}

/* Estilo para o logo primário */
header .primary-logo {
    max-height: 60px; /* Altura máxima do logo */
    width: auto; /* Largura automática */
}

/* Estilo para o logo secundário que aparece ao passar o mouse */
header .secondary-logo {
    position: absolute; /* Posiciona o logo sobre o primário */
    top: 0;
    left: 0;
    max-height: 60px; /* Altura máxima do logo secundário */
    width: auto; /* Largura automática */
    opacity: 0; /* Inicialmente invisível */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transição suave para opacidade e escala */
    transform: scale(1); /* Escala inicial */
}

/* Estilo aplicado quando o logo primário é substituído pelo secundário ao passar o mouse */
.logo-container:hover .secondary-logo {
    opacity: 1; /* Torna o logo secundário visível */
    transform: scale(1.1); /* Aumenta o tamanho do logo */
}

.logo-container:hover .primary-logo {
    opacity: 0; /* Torna o logo primário invisível */
}

/* Estilo para a navegação dentro do cabeçalho */
header nav ul {
    list-style: none; /* Remove marcadores de lista */
    display: flex; /* Usa Flexbox para layout */
    margin: 0; /* Remove margens */
    padding: 0; /* Remove padding */
}

/* Estilo para os itens da lista de navegação */
header nav ul li {
    margin-left: 20px; /* Espaçamento entre itens */
}

/* Estilo para os links de navegação */
header nav ul li a {
    color: #fff; /* Cor do texto branco */
    text-decoration: none; /* Remove sublinhado dos links */
}

/* Estilo para os links ao passar o mouse */
header nav ul li a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

/* Estilo principal do conteúdo da página */
main {
    padding-top: 80px; /* Espaçamento superior para não sobrepor o cabeçalho fixo */
    flex: 1; /* Permite que o main ocupe o espaço disponível */
}

/* Estilo para seções da página */
section {
    padding: 0;
    margin: 0;
}

/* Estilo para o carrossel de imagens */
.carousel {
    position: relative; /* Permite posicionar os controles do carrossel */
    width: 100%;
    height: 90vh; /* Altura do carrossel */
    overflow: hidden; /* Oculta qualquer conteúdo fora do carrossel */
}

/* Wrapper para os slides do carrossel */
.carousel-wrapper {
    display: flex; /* Usa Flexbox para layout */
    transition: transform 0.5s ease-in-out; /* Transição suave ao mudar slides */
}

/* Estilo para cada slide do carrossel */
.carousel-slide {
    flex: 0 0 100%; /* Cada slide ocupa 100% da largura do carrossel */
    height: 100%;
    position: relative;
}

/* Estilo para imagens dentro dos slides do carrossel */
.carousel-slide img {
    width: 100%; /* Largura total do slide */
    height: 100%; /* Altura total do slide */
    object-fit: cover; /* Cobre a área do slide */
}

/* Estilo para os controles do carrossel */
.carousel-control {
    position: absolute; /* Posiciona os controles sobre o carrossel */
    top: 50%;
    width: 40px; /* Largura dos controles */
    height: 40px; /* Altura dos controles */
    background-color: rgba(0, 0, 0, 0.5); /* Cor de fundo semi-transparente */
    color: #fff; /* Cor do texto branco */
    border: none;
    cursor: pointer; /* Cursor de clique */
    font-size: 24px; /* Tamanho da fonte */
    line-height: 40px; /* Alinha o texto verticalmente */
    text-align: center; /* Alinha o texto horizontalmente */
    z-index: 1000; /* Garante que os controles fiquem acima do carrossel */
    transform: translateY(-50%); /* Centraliza verticalmente */
}

/* Estilo para o controle anterior */
.carousel-control.prev {
    left: 10px;
}

/* Estilo para o controle próximo */
.carousel-control.next {
    right: 10px;
}

/* Estilo para os pontos de navegação do carrossel (invisíveis) */
.carousel-dots {
    display: none;
}

/* Estilo para cada ponto de navegação (dot) */
.dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb; /* Cor de fundo dos pontos */
    border-radius: 50%; /* Forma circular */
    cursor: pointer; /* Cursor de clique */
}

/* Estilo para o ponto de navegação ativo */
.dot {
    background-color: #717171;
}

/* Estilo para a seção de home */
section#home {
    position: relative;
    min-height: 100vh; /* Altura mínima para cobrir toda a tela */
    margin-top: 80px; /* Espaçamento superior para não sobrepor o cabeçalho fixo */
    display: flex; /* Usa Flexbox para layout */
    flex-direction: column; /* Alinha itens verticalmente */
    align-items: center; /* Alinha itens horizontalmente no centro */
    padding: 0;
    overflow: hidden; /* Oculta qualquer conteúdo fora da área da seção */
}

/* Estilo para o título dentro da seção de cards */
.cards-content h1 {
    text-align: center; /* Alinha o título no centro */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Estilo para o container dos cards */
.cards-container {
    display: flex; /* Usa Flexbox para layout */
    justify-content: space-between; /* Distribui espaço entre os cards */
    width: 100%;
    max-width: 1200px; /* Largura máxima do container */
    padding: 0 20px; /* Padding interno */
    position: relative;
    z-index: 1; /* Garante que o container fique acima de outros elementos */
    margin-top: -100px; /* Ajusta a posição do container */
}

/* Estilo para cada card */
.card {
    background: #fff; /* Cor de fundo dos cards */
    border: 1px solid #ddd; /* Borda cinza clara */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    padding: 20px; /* Padding interno */
    width: 30%; /* Largura dos cards */
    text-align: center; /* Alinha o texto no centro */
    min-height: 200px; /* Altura mínima */
    position: relative; /* Permite posicionamento absoluto de elementos internos */
    display: flex; /* Usa Flexbox para layout */
    flex-direction: column; /* Alinha itens verticalmente */
    justify-content: space-between; /* Distribui espaço entre itens */
}

/* Estilo para o cabeçalho de cada card */
.card-header {
    display: flex; /* Usa Flexbox para layout */
    align-items: center; /* Alinha ícones e texto verticalmente */
    margin-bottom: 10px; /* Espaçamento inferior */
}

/* Estilo para o ícone dentro do card */
.card-icon {
    width: 40px; /* Largura do ícone */
    height: auto; /* Altura automática */
    margin-right: 15px; /* Espaçamento à direita do ícone */
}

/* Estilo para o título dentro do card */
.card-title {
    font-size: 24px; /* Tamanho da fonte do título */
    font-weight: bold; /* Fonte em negrito */
    color: #333; /* Cor do texto */
}

/* Estilo para o título do primeiro card */
.card:nth-child(1) .card-title {
    color: #6a0dad; /* Cor roxa */
}

/* Estilo para o título do segundo card */
.card:nth-child(2) .card-title {
    color: #c75279; /* Cor rosa */
}

/* Estilo para o título do terceiro card */
.card:nth-child(3) .card-title {
    color: #214f74; /* Cor azul escuro */
}

/* Estilo para o texto dentro do card */
.card-text {
    margin: 10px 0; /* Espaçamento superior e inferior */
    font-size: 14px; /* Tamanho da fonte */
    color: #555; /* Cor do texto */
}

/* Estilo para cards menores (mini-cards) */
.mini-card {
    margin-top: 10px; /* Espaçamento superior */
    padding: 10px; /* Padding interno */
    border: 1px solid #ddd; /* Borda cinza clara */
    border-radius: 5px; /* Bordas arredondadas */
    text-align: center; /* Alinha o texto no centro */
    color: #fff; /* Texto branco */
}

/* Estilo para links dentro de mini-cards */
.mini-card a {
    color: #fff; /* Cor do texto branco */
    text-decoration: none; /* Remove sublinhado */
    font-weight: bold; /* Fonte em negrito */
}

/* Estilo para links ao passar o mouse */
.mini-card a:hover {
    color: #e0e0e0; /* Cor do texto ao passar o mouse */
}

/* Estilos específicos para cada tipo de mini-card */
.mini-card-1 {
    background: #6a0dad; /* Cor de fundo roxa */
}

.mini-card-2 {
    background: #c75279; /* Cor de fundo rosa */
}

.mini-card-3 {
    background: #214f74; /* Cor de fundo azul escuro */
}

/* Estilo para seções de eventos e contato */
section#eventos, section#contato {
    background: #fff; /* Cor de fundo branca */
    padding: 60px 20px; /* Padding interno */
}

/* Estilo para os títulos nas seções */
section h1, section h2 {
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Estilo para o rodapé */
footer {
    background-color: #171717; /* Cor de fundo escura */
    color: #fff; /* Texto branco */
    text-align: center; /* Alinha o texto no centro */
    padding: 10px 20px; /* Padding interno */
    width: 100%; /* Largura total */
    position: relative; /* Permite posicionar o rodapé */
    bottom: 0; /* Fixa na parte inferior da página */
}

/* Estilo para a seção do mapa */
.map-section {
    padding: 60px 20px; /* Padding interno */
    background-color: #ffffff; /* Cor de fundo branca */
    display: flex; /* Usa Flexbox para layout */
    flex-direction: column; /* Alinha itens verticalmente */
    align-items: center; /* Alinha itens horizontalmente no centro */
}

/* Container para o mapa e informações */
.map-and-info-container {
    display: flex; /* Usa Flexbox para layout */
    justify-content: space-between; /* Distribui espaço entre mapa e informações */
    align-items: flex-start; /* Alinha itens ao topo */
    flex-wrap: nowrap; /* Não permite quebra de linha */
    max-width: 1200px; /* Largura máxima do container */
    width: 100%; /* Largura total */
}

/* Estilo para o container do mapa */
.map-container {
    flex: 2; /* O mapa ocupa o dobro do espaço em relação às informações */
    height: 500px; /* Altura do mapa */
    background-color: #ffffff; /* Cor de fundo branca */
    overflow: hidden; /* Oculta qualquer conteúdo fora do container */
    margin-right: 20px; /* Espaçamento à direita do mapa */
}

/* Estilo para o elemento SVG */
.map-0 {
    width: 300%; /* Largura ajustada */
    height: 100%; /* Altura total do container */
}

/* Estilo para o container de informações */
.info-container {
    flex: 1; /* O container de informações ocupa um espaço menor */
    max-width: 300px; /* Largura máxima do container */
}

/* Estilo para a seção de teste */
.teste {
    width: 80%; /* Largura do container */
    display: grid; /* Usa grid layout */
    grid-template-columns: repeat(2, 1fr); /* Cria duas colunas iguais */
    margin-top: 50px; /* Espaçamento superior */
}

.teste div input {
    all: unset;
    background: #fff;
    padding: .5rem;
    border-radius: 8px;
    width: 100%;
}

.teste div button {
    all: unset;
    background: #333;
    padding: .5rem;
    border-radius: 8px;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-top: 8px;
}

.teste div button:hover {
    background: #555;
    scale: 1.05;
}

.teste div button:active {
    scale: 0.9;
}

/* Estilo para cards dentro da seção de teste */
.card-map {
    background: #f5f5f5; /* Cor de fundo branca */
    border: 1px solid #f5f5f5; /* Borda branca */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    padding: 20px; /* Padding interno */
    min-height: 200px; /* Altura mínima */
    width: 300px; /* Largura fixa */
    margin-top: 40%; /* Ajusta a posição superior */
}

/* Estilo para o conteúdo dentro dos cards do mapa */
.card-content {
    font-size: 14px; /* Tamanho da fonte */
    color: #555; /* Cor do texto */
}

/* Estilo para o título dentro do card do mapa */
.card-content h3 {
    font-size: 24px; /* Tamanho da fonte do título */
    margin-bottom: 15px; /* Espaçamento inferior */
}

/* Estilo para os detalhes dentro do card do mapa */
.card-details {
    font-size: 12px; /* Tamanho da fonte dos detalhes */
    color: #888; /* Cor do texto */
}

/* Estilo para a seção de eventos */
.eventos-section {
    display: flex; /* Usa Flexbox para layout */
    justify-content: center; /* Alinha itens horizontalmente no centro */
    align-items: center; /* Alinha itens verticalmente no centro */
    padding: 60px 20px; /* Padding interno */
    background-color: #f4f4f4; /* Cor de fundo cinza claro */
}

/* Conteúdo da seção de eventos */
.eventos-content {
    display: flex; /* Usa Flexbox para layout */
    align-items: center; /* Alinha itens verticalmente no centro */
    max-width: 1200px; /* Largura máxima do container */
    margin: 0 auto; /* Centraliza o container */
    gap: 20px; /* Espaçamento entre itens */
    flex-direction: row-reverse; /* Inverte a ordem dos itens */
}

/* Estilo para a imagem dentro da seção de eventos */
.eventos-image {
    width: 50%; /* Largura da imagem */
    height: auto; /* Altura automática */
    object-fit: cover; /* Cobre a área do container */
    border-radius: 8px; /* Bordas arredondadas */
}

/* Estilo para o texto dentro da seção de eventos */
.eventos-text {
    width: 50%; /* Largura do texto */
    font-size: 18px; /* Tamanho da fonte */
    color: #333; /* Cor do texto */
}

/* Estilo para os títulos dentro da seção de eventos */
.eventos-text h2 {
    font-size: 32px; /* Tamanho da fonte do título */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Estilo para os parágrafos dentro da seção de eventos */
.eventos-text p {
    margin-bottom: 15px; /* Espaçamento inferior */
}

/* Estilo para o elemento SVG */
svg {
    width: 30%;
}

/* Estilo para diferentes regiões no SVG (mapa) */
.norte, .nordeste, .centro-oeste, .sudeste, .sul {
    fill: #ffffff; /* Cor de preenchimento branca */
    stroke: #e65a94; /* Cor da borda rosa */
    stroke-width: 2px; /* Largura da borda */
}

/* Estilo para os caminhos dentro do SVG */
path {
    fill: #ffffff; /* Cor de preenchimento branca */
    stroke: #e65a94; /* Cor da borda rosa */
    stroke-width: 2px; /* Largura da borda */
}

/* Estilo para o caminho ao passar o mouse */
path:hover {
    fill: #f68f9d; /* Cor de preenchimento rosa claro */
    stroke: #d64267; /* Cor da borda rosa escuro */
    stroke-width: 2px; /* Largura da borda */
    transition: fill 0.4s, stroke-width 0.4s; /* Transição suave */
}

/* Estilo para a tooltip */
.tooltip {
    pointer-events: none; /* Ignora eventos de ponteiro */
    position: absolute; /* Posiciona a tooltip de forma absoluta */
    font-size: 18px; /* Tamanho da fonte */
    text-align: center; /* Alinha o texto no centro */
    background: white; /* Cor de fundo branca */
    padding: 10px 15px; /* Padding interno */
    z-index: 5; /* Camada superior */
    height: 30px; /* Altura fixa */
    line-height: 30px; /* Alinha o texto verticalmente */
    margin: 0 auto; /* Centraliza a tooltip */
    color: #21669e; /* Cor do texto */
    border-radius: 5px; /* Bordas arredondadas */
    transform: translateX(-50%); /* Centraliza horizontalmente */
    display: none; /* Oculta a tooltip por padrão */
}

/* Estilo para a tooltip ativa */
.tooltip.active {
    display: block; /* Mostra a tooltip quando ativa */
}

/* Estilo para o conteúdo dentro da tooltip */
.tooltip-content {
    font-size: 16px; /* Tamanho da fonte */
    color: #333; /* Cor do texto */
}

/* Estilo para a seta da tooltip */
.tooltip-arrow {
    position: absolute; /* Posiciona a seta de forma absoluta */
    width: 0; /* Largura zero */
    height: 0; /* Altura zero */
    border: 10px solid transparent; /* Borda transparente */
}

/* Estilo para a seta superior da tooltip */
.tooltip-arrow.top {
    border-bottom-color: #ffffff; /* Cor da seta inferior branca */
    border-top: 0; /* Remove a borda superior */
    border-left: 0; /* Remove a borda esquerda */
    border-right: 0; /* Remove a borda direita */
    top: -20px; /* Posiciona a seta acima da tooltip */
    left: 50%; /* Centraliza horizontalmente */
    margin-left: -10px; /* Ajusta a posição horizontal */
}

/* Estilo para a seta inferior da tooltip */
.tooltip-arrow.bottom {
    border-top-color: #ffffff; /* Cor da seta superior branca */
    border-bottom: 0; /* Remove a borda inferior */
    border-left: 0; /* Remove a borda esquerda */
    border-right: 0; /* Remove a borda direita */
    bottom: -20px; /* Posiciona a seta abaixo da tooltip */
    left: 50%; /* Centraliza horizontalmente */
    margin-left: -10px; /* Ajusta a posição horizontal */
}

/* Estilo para a seta esquerda da tooltip */
.tooltip-arrow.left {
    border-right-color: #ffffff; /* Cor da seta esquerda branca */
    border-top: 0; /* Remove a borda superior */
    border-bottom: 0; /* Remove a borda inferior */
    border-left: 0; /* Remove a borda direita */
    left: -20px; /* Posiciona a seta à esquerda da tooltip */
    top: 50%; /* Centraliza verticalmente */
    margin-top: -10px; /* Ajusta a posição vertical */
}

/* Estilo para a seta direita da tooltip */
.tooltip-arrow.right {
    border-left-color: #ffffff; /* Cor da seta direita branca */
    border-top: 0; /* Remove a borda superior */
    border-bottom: 0; /* Remove a borda inferior */
    border-right: 0; /* Remove a borda esquerda */
    right: -20px; /* Posiciona a seta à direita da tooltip */
    top: 50%; /* Centraliza verticalmente */
    margin-top: -10px; /* Ajusta a posição vertical */
}

/* Estilo para a tooltip do mapa */
.tooltip-map {
    position: absolute; /* Posiciona a tooltip de forma absoluta */
    background: #fff; /* Cor de fundo branca */
    border: 1px solid #ddd; /* Borda cinza clara */
    border-radius: 5px; /* Bordas arredondadas */
    padding: 10px; /* Padding interno */
    font-size: 14px; /* Tamanho da fonte */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Estilo para o conteúdo dentro da seção de cards */
.cards-content {
    padding: 20px; /* Padding interno */
    background-color: #f5f5f5; /* Cor de fundo cinza claro */
}

/* Estilo para o container de cards */
.cards-container {
    display: flex; /* Usa Flexbox para layout */
    justify-content: space-between; /* Distribui o espaço entre cards */
    flex-wrap: wrap; /* Permite quebra de linha */
    gap: 20px; /* Espaçamento entre os cards */
    max-width: 1200px; /* Largura máxima do container */
    margin: 0 auto; /* Centraliza o container */
}

/* Estilo para cada card */
.card {
    background: #fff; /* Cor de fundo branca */
    border: 1px solid #ddd; /* Borda cinza clara */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 30%; /* Largura fixa dos cards */
    overflow: hidden; /* Oculta qualquer conteúdo fora do card */
    transition: transform 0.3s, box-shadow 0.3s; /* Transição suave */
    text-align: center; /* Alinha o texto no centro */
}

/* Estilo para o card ao passar o mouse */
.card:hover {
    transform: scale(1.03); /* Aumenta o tamanho do card */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
}

/* Estilo para a imagem dentro do card */
.card-image {
    width: 100%; /* Largura total da imagem */
    height: 200px; /* Altura fixa da imagem */
    overflow: hidden; /* Oculta qualquer conteúdo fora do container */
}

/* Estilo para a imagem dentro do card */
.card-image img {
    width: 100%; /* Largura total da imagem */
    height: 100%; /* Altura total da imagem */
    object-fit: cover; /* Cobre a área do container */
}

/* Estilo para o conteúdo dentro do card */
.card-content {
    padding: 20px; /* Padding interno */
}

/* Estilo para o título dentro do card */
.card-content h3 {
    font-size: 1.5rem; /* Tamanho da fonte do título */
    margin-bottom: 10px; /* Espaçamento inferior */
    color: #333; /* Cor do texto */
}

/* Estilo para o parágrafo dentro do card */
.card-content p {
    font-size: 1rem; /* Tamanho da fonte */
    margin-bottom: 15px; /* Espaçamento inferior */
    color: #666; /* Cor do texto */
}

/* Estilo para o link dentro do card */
.card-link {
    display: inline-block; /* Alinha o link inline */
    background-color: #007bff; /* Cor de fundo azul */
    color: #fff; /* Texto branco */
    padding: 10px 15px; /* Padding interno */
    border-radius: 5px; /* Bordas arredondadas */
    text-decoration: none; /* Remove sublinhado */
    font-weight: bold; /* Fonte em negrito */
    transition: background-color 0.3s; /* Transição suave */
}

/* Estilo para o link ao passar o mouse */
.card-link:hover {
    background-color: #0056b3; /* Cor de fundo azul escuro */
}

/* Estilo para o rodapé */
.site-footer {
    background-color: #333333; /* Cor de fundo escura */
    color: #ecf0f1; /* Texto claro */
    padding: 20px 20px; /* Padding interno reduzido */
    text-align: center; /* Alinha o texto no centro */
}

/* Conteúdo dentro do rodapé */
.footer-content {
    display: flex; /* Usa Flexbox para layout */
    justify-content: space-around; /* Distribui o espaço entre seções */
    align-items: flex-start; /* Alinha seções ao topo */
    flex-wrap: wrap; /* Permite quebra de linha */
    max-width: 1200px; /* Largura máxima do container */
    margin: 0 auto; /* Centraliza o container */
}

/* Seções dentro do rodapé */
.footer-section {
    flex: 1; /* Cada seção ocupa espaço igual */
    margin: 10px; /* Margem entre seções */
    min-width: 250px; /* Largura mínima das seções */
}

/* Estilo para os títulos dentro das seções do rodapé */
.footer-section h2 {
    margin-top: 0; /* Remove margem superior */
    font-size: 1.5em; /* Tamanho da fonte */
    border-bottom: 2px solid #ecf0f1; /* Borda inferior clara */
    padding-bottom: 10px; /* Padding inferior */
}

/* Estilo para listas dentro das seções do rodapé */
.footer-section ul {
    list-style: none; /* Remove marcadores de lista */
    padding: 0; /* Remove padding */
}

/* Estilo para itens de lista dentro das seções do rodapé */
.footer-section li {
    margin-bottom: 10px; /* Margem inferior entre itens */
}

/* Estilo para links dentro das listas do rodapé */
.footer-section a {
    color: #ecf0f1; /* Cor do texto claro */
    text-decoration: none; /* Remove sublinhado */
    transition: color 0.3s; /* Transição suave */
}

/* Estilo para links ao passar o mouse no rodapé */
.footer-section a:hover {
    color: #3498db; /* Cor azul ao passar o mouse */
}