/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fonte e corpo da página */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f4;
}

/* Cabeçalho */
/* Reset de estilo para evitar problemas de largura */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden; /* Previne a rolagem horizontal */
}

/* Barra de Navegação */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3); /* Fundo transparente */
    padding: 15px 30px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

header:hover {
    background-color: rgba(0, 0, 0, 0.5); /* Tom mais escuro ao passar o mouse */
}

/* Logo como texto */
header .logo h1 {
    font-family: 'Pacifico', sans-serif; /* Fonte estilizada como logo */
    font-size: 22px;
    color: #ffffff;
    margin: 0;
}

/* Menu de navegação */
header nav ul {
    list-style: none;
    display: flex;
    gap: 20px; /* Espaçamento entre os itens */
    margin: 0;
    padding: 0;
    justify-content: flex-end; /* Alinha o menu à direita */
}

header nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

header nav ul li a:hover {
    background-color: #ffc107; /* Cor destaque */
    color: #003f7e; /* Cor do texto no hover */
}

/* Estilo do botão do WhatsApp na barra de menu */
header .whatsapp-btn {
    background-color: #25d366;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

header .whatsapp-btn img {
    width: 20px;
    height: 20px;
}

/* Menu responsivo para dispositivos móveis */
@media (max-width: 768px) {
    /* Esconde o botão do WhatsApp na barra de menu */
    header .whatsapp-btn {
        display: none;
    }

    /* Cria um botão flutuante no canto inferior direito */
    .whatsapp-floating {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #25d366;
        color: white;
        padding: 15px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        z-index: 100;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .whatsapp-floating:hover {
        background-color: #1da851;
        transform: scale(1.1);
    }

    .whatsapp-floating img {
        width: 30px;
        height: 30px;
    }

    /* Ajustes no menu hambúrguer para dispositivos móveis */
    header nav ul {
        display: none;
        width: 100%;
        background-color: #004d99;
        position: absolute;
        top: 70px;
        left: 0;
        padding: 20px;
        text-align: center;
    }

    header nav ul li {
        margin: 10px 0;
    }

    header nav ul li a {
        color: white;
        display: block;
        width: 100%;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        cursor: pointer;
    }

    .menu-toggle span {
        background-color: white;
        height: 4px;
        width: 100%;
    }

    header nav ul.active {
        display: block;
    }
}

/* Garantir que o conteúdo abaixo do header comece no lugar correto */
main {
    padding-top: 70px; /* Altura do header */
}


/* Seção de Destaque */
#destaque {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ocupa toda a altura da tela */
    width: 100%; /* Garantir que a largura seja 100% */
    overflow: hidden; /* Impede qualquer barra extra */
    background-image: url('imagens/dr diogo (2).png'); /* Definindo a imagem de fundo */
    background-size: cover; /* Faz a imagem cobrir todo o fundo */
    background-position: center; /* Centraliza a imagem */
}

/* Container do conteúdo sobre a imagem */
#destaque .texto-destaque {
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-align: center;
    z-index: 0;
    
    /* Ajuste para alinhamento */
    line-height: 1.5; /* Espaçamento entre as linhas */
    padding: 10px 20px; /* Espaçamento interno ao redor do texto */
    width: 100%; /* Define uma largura para o texto */
    max-width: 600px; /* Limita a largura máxima */
}

#destaque h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombras para destacar o título */
}

#destaque p {
    font-size: 20px;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Sombras para o texto */
}

.botao-consultar {
    display: inline-block;
    padding: 12px 25px;
    background-color: #00509e; /* Cor de fundo do botão */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.botao-consultar:hover {
    background-color: #003f7e; /* Cor de fundo ao passar o mouse */
    transform: scale(1.1); /* Efeito de zoom no botão */
}

/* Responsividade */
@media (max-width: 768px) {
    #destaque {
        height: 100vh; /* Garantir que a altura ocupe toda a tela em dispositivos móveis */
        width: 100%; /* Garantir que a largura ocupe toda a tela */
    }

    #destaque h1 {
        font-size: 32px; /* Reduz o tamanho da fonte em telas menores */
    }

    #destaque p {
        font-size: 16px; /* Reduz o tamanho do texto */
    }
}


/* Seção de Informação sobre Dor */
/* Container principal */
#informacao {
    padding: 100px 20px;
    background: linear-gradient(135deg, #404244, #e1f5fe);
    font-family: 'Poppins', sans-serif;
    color: #0d3b66;
}

#informacao .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza os itens no desktop */
    gap: 20px;
}

/* Cartões */
#informacao .texto-informacao {
    max-width: 25%; /* Quatro itens por linha no desktop */
    flex: 1 1 calc(25% - 20px); /* Ajuste automático para 4 colunas */
    min-width: 250px;
    padding: 40px 25px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

#informacao .texto-informacao:hover {
    transform: translateY(-10px);
}

#informacao h2 {
    font-size: 36px;
    font-weight: 700;
    color: #01579b;
    margin-bottom: 20px;
}

#informacao p {
    font-size: 18px;
    line-height: 1.8;
    color: #000000;
    text-align: justify;
    padding: 10px 15px;
    border-left: 4px solid #00509e;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    margin-bottom: 30px;
}

#informacao .btn-saiba-mais {
    display: inline-block;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #42a5f5, #1e88e5);
    text-decoration: none;
    border-radius: 30px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

#informacao .btn-saiba-mais:hover {
    background: linear-gradient(135deg, #959a9e, #1565c0);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Responsividade */
@media (max-width: 768px) {
    #informacao .container {
        flex-wrap: nowrap; /* Desativa o wrap para permitir rolagem */
        overflow-x: auto; /* Ativa rolagem horizontal */
        scroll-snap-type: x mandatory; /* Adiciona snap para carrossel */
        gap: 15px;
        justify-content: flex-start; /* Corrige o alinhamento */
        padding: 0 0px; /* Adiciona espaçamento nas bordas */
    }

    #informacao .texto-informacao {
        flex: 0 0 90%; /* Cada item ocupa 90% da largura da tela */
        scroll-snap-align: center; /* Centraliza o item visível */
        max-width: none;
    }

    #informacao h2 {
        font-size: 28px;
    }

    #informacao p {
        font-size: 16px;
    }

    #informacao .texto-informacao {
        padding: 30px 20px;
    }
}



/* Seção sobre */
#sobre-dr {
    background-color: #f9f9f9;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Container centralizado */
#sobre-dr .container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    align-items: flex-start; /* Ajusta o alinhamento dos itens */
    gap: 40px;
    margin: 0 auto; /* Centraliza o container */
}

/* Estilização do texto */
#sobre-dr .texto {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    text-align: justify; /* Justifica o texto */
}

#sobre-dr .texto h3 {
    font-size: 20px;
    color: #00509e;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 15px;
}

#sobre-dr .texto h1 {
    font-size: 40px;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.4; /* Melhor legibilidade */
    font-weight: 600; /* Peso de fonte mais destacado */
}

#sobre-dr .texto p {
    font-size: 18px;
    line-height: 1.8; /* Maior espaçamento entre linhas para melhorar a leitura */
    color: #333333;
    margin-bottom: 20px;
    letter-spacing: 0.5px; /* Leve espaçamento entre letras para legibilidade */
}

#sobre-dr .texto ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

#sobre-dr .texto ul li {
    font-size: 18px;
    color: #333333;
    margin-bottom: 12px;
    position: relative;
    padding-left: 30px;
}

#sobre-dr .texto ul li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px;
    color: #00509e;
}

/* Botão "Currículo Lattes" */
#sobre-dr .texto .btn-lattes {
    display: inline-block;
    margin-top: 30px;
    background-color: #00509e;
    color: #ffffff;
    padding: 12px 25px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-align: center;
}

#sobre-dr .texto .btn-lattes:hover {
    background-color: #003b7d;
}


/* Botão Lattes */
#sobre-dr .btn-lattes {
    display: inline-block;
    padding: 12px 25px;
    font-size: 16px;
    color: #fff;
    background-color: #00509e;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

#sobre-dr .btn-lattes:hover {
    background-color: #003f7e;
}

/* Estilização da imagem */
#sobre-dr .imagem {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sobre-dr .imagem img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsividade */
@media (max-width: 768px) {
    #sobre-dr .container {
        flex-direction: column-reverse;
    }

    #sobre-dr .texto h1 {
        font-size: 28px;
    }

    #sobre-dr .texto p, #sobre-dr .texto ul li {
        font-size: 14px;
    }
}
/* tipo de dor */
#tipos-de-dor {
    padding: 50px 0;
    text-align: center;
    background-color: #f4f4f4;
}

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

.section-header h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

.descricao {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 30px;
}

.imagem-container {
    position: relative;
    display: block;
    text-align: center;
}

.imagem-dor {
    width: 120%; /* Ocupa toda a largura disponível */
    max-width: 1200px; /* Limita o tamanho máximo em telas grandes */
    height: auto; /* Mantém as proporções */
    margin: 0 auto;
}

.pontos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@keyframes piscar {
    0% {
        opacity: 0.8;
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.4); /* Brilho suave */
    }
    40% {
        opacity: 1;
        transform: scale(1.1); /* Aumenta suavemente */
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.7); /* Brilho mais forte */
    }
    70% {
        opacity: 0.9;
        transform: scale(1.05); /* Leve aumento */
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Efeito de brilho médio */
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.4); /* Retorna ao brilho suave */
    }
}

.ponto {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    animation: piscar 1.5s infinite; /* Animação de piscada */
    border: 2px solid rgba(255, 0, 0, 0.7); /* Borda com brilho sutil */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.3); /* Sombra suave ao redor do ponto */
}

.ponto:hover {
    opacity: 1;
}

.ponto::after {
    content: attr(data-tratamento);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.ponto:hover::after {
    opacity: 1;
    visibility: visible;
}



.buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    background-color: #25d366;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 1.1rem;
    text-decoration: none;
}

.btn-whatsapp i {
    margin-right: 10px;
}

/* Media Query para tablets */
@media (max-width: 1024px) {
    .imagem-dor {
        max-width: 95%; /* Ocupa quase toda a largura em tablets */
        height: auto; /* Mantém a proporção */
    }
}

/* Media Query para celulares */
@media (max-width: 768px) {
    .imagem-dor {
        width: 183%; /* Aumenta a largura para 200% */
        height: auto; /* Mantém as proporções */
        max-width: none; /* Remove o limite de tamanho máximo */
        margin-left: -41%; /* Centraliza a imagem ao aumentar seu tamanho */
    }

    .imagem-container {
        padding: 10px; /* Adiciona espaçamento ao redor da imagem */
        overflow: hidden; /* Garante que nada "vaze" do container */
    }
}





/* Seção Especialidades */
#certificacoes {
    padding: 80px 20px;
    background-color: #f8f9fa; /* Fundo claro para contraste com o conteúdo */
    text-align: center;
    font-family: 'Poppins', sans-serif; /* Fonte moderna e profissional */
}

#certificacoes h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #01579b; /* Cor elegante para o título */
}

.servicos {
    display: flex;
    justify-content: center; /* Alinha os itens no centro */
    gap: 20px; /* Ajusta o espaço entre os itens */
    flex-wrap: wrap; /* Garante que os itens se ajustem automaticamente no mobile */
    max-width: 1200px; /* Define uma largura máxima maior para o desktop */
    margin: 0 auto; /* Centraliza o container */
}

.servico {
    background-color: #ffffff; /* Fundo branco limpo para destaque */
    padding: 20px;
    border-radius: 12px; /* Bordas suavemente arredondadas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave para um toque profissional */
    width: calc(33.333% - 20px); /* Ajusta para 3 itens por linha */
    max-width: 350px; /* Aumentei para permitir imagens maiores */
    min-height: 380px; /* Aumenta a altura mínima para encaixar melhor a imagem */
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s; /* Efeitos ao passar o mouse */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Mantém espaçamento adequado */
}

.servico:hover {
    transform: translateY(-10px); /* Eleva o item ao passar o mouse */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Aumenta a sombra para destacar mais */
}

/* Container fixo para manter a imagem grande e bem visível */
.servico .imagem-container {
    width: 200px;
    height: 200px; /* Mantém um quadrado maior */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Evita cortes inesperados */
    border-radius: 12px;
    border: 4px solid #01579b;
    background-color: #ffffff; /* Garante que o fundo fique uniforme */
    margin-bottom: 15px;
}

.servico img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantém a imagem dentro do quadrado sem cortes */
}

.servico h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #212529; /* Cor escura para o título das certificações */
}

.servico p {
    font-size: 16px;
    color: #6c757d; /* Cor cinza para a descrição */
    line-height: 1.5; /* Melhora a legibilidade */
}

/* Responsividade */
@media (max-width: 768px) {
    .servicos {
        flex-direction: column;
        align-items: center;
        gap: 30px; /* Aumenta o espaço entre os itens no mobile */
    }

    .servico {
        width: 100%; /* Itens ocupam toda a largura disponível no mobile */
        max-width: 100%; /* Evita que os itens ultrapassem a largura da tela */
        min-height: auto; /* Permite que a altura se ajuste melhor */
    }

    .servico .imagem-container {
        width: 180px;
        height: 180px; /* Reduz um pouco no mobile */
    }
}











/* Seção Vídeo e Informações de Contato */
#video-contato {
    padding: 60px 20px;
    background-color: #f0f4f8; /* Cor de fundo suave */
    width: 100%;
    box-sizing: border-box;
}

#video-contato .container {
    max-width: 1200px;
    margin: 0 auto; /* Centraliza o container na tela */
    padding: 0 20px;
    display: flex;
    justify-content: center; /* Centraliza o conteúdo dentro da seção */
    align-items: flex-start;
}

.video-info {
    display: flex;
    justify-content: space-between; /* Espaço entre o vídeo e as informações */
    align-items: flex-start; /* Alinha no topo */
    gap: 20px;
    width: 100%;
    flex-wrap: wrap; /* Para telas menores, vai empilhar os itens */
}

/* Estilos do Vídeo */
.video {
    flex: 1;
    min-width: 320px; /* Largura mínima para o vídeo */
    max-width: 40%; /* Ajustado para 40% da largura no desktop */
    display: flex;
    justify-content: center; /* Centraliza o vídeo dentro da div */
    margin-bottom: 20px;
}

.video video {
    width: 100%;
    height: 656px; /* Limita a altura do vídeo no desktop */
    object-fit: cover; /* Faz o vídeo preencher a área sem distorcer */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos das Informações de Contato e Mapa */
.informacoes {
    flex: 1;
    min-width: 320px; /* Largura mínima para as informações */
    max-width: 50%; /* Informações ocupam 50% da largura no desktop */
    margin-bottom: 20px;
    padding: 20px;
    background-color: #ffffff; /* Fundo branco para destacar o conteúdo */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra mais suave e pronunciada */
}

/* Título das Informações */
.informacoes h2 {
    font-size: 28px;
    color: #333333; /* Cor mais escura para o título */
    margin-bottom: 15px;
    font-weight: bold;
}

/* Parágrafos das Informações */
.informacoes p {
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 1.6; /* Aumenta o espaçamento entre as linhas para melhorar a leitura */
    color: #555555; /* Cor de texto mais suave */
}

/* Estilo do Mapa */
.mapa {
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9; /* Fundo suave para o mapa */
    border-radius: 8px;
    border: 2px solid #e0e0e0; /* Borda sutil e elegante */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra mais suave para o mapa */
}

.mapa iframe {
    width: 100%;
    height: 400px; /* Aumenta a altura do mapa para melhor visibilidade */
    border-radius: 8px;
}


/* Responsividade para Mobile */
@media (max-width: 768px) {
    .video-info {
        flex-direction: column; /* Empilha o vídeo e as informações no mobile */
        justify-content: center;
    }

    .video {
        max-width: 100%; /* O vídeo ocupa 100% da largura no mobile */
        margin-bottom: 20px;
    }

    .informacoes {
        max-width: 100%; /* As informações ocupam 100% da largura no mobile */
    }

    .informacoes h2 {
        font-size: 20px;
    }

    .informacoes p {
        font-size: 14px;
    }

    .mapa iframe {
        height: 200px; /* Ajusta a altura do mapa no mobile */
    }
}


/* Botão Agendar Consulta */
.agendar-consulta {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* Remove o sublinhado */
    transition: all 0.3s ease; /* Transição suave */
}

.balão-texto {
    background-color: #25D366; /* Cor de fundo do WhatsApp */
    color: white;
    padding: 8px 15px;
    border-radius: 20px; /* Cantos arredondados */
    margin-bottom: 10px; /* Espaço entre o balão e o botão */
    font-size: 14px;
    font-weight: bold;
    display: block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.whatsapp-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366; /* Cor de fundo do WhatsApp */
    border-radius: 50%; /* Botão redondo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

.whatsapp-icon img {
    width: 50%;
    height: 50%;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .agendar-consulta {
        bottom: 20px;
        right: 20px; /* Ajusta a posição à direita */
    }

    .whatsapp-icon {
        width: 50px;
        height: 50px;
    }

    .balão-texto {
        font-size: 12px;
        padding: 5px 10px;
    }
}



/* Rodapé */
footer {
    background-color: #222;
    color: white;
    padding: 40px 20px;
    text-align: center;
    position: relative; /* Garantir que o rodapé fique no final da página */
    z-index: 1;
    width: 100%; /* Garante que o rodapé ocupe a largura completa */
}

footer .redes-sociais {
    margin-top: 20px;
}

/* Links das redes sociais */
footer .redes-sociais a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-size: 18px; /* Tamanho do ícone das redes sociais */
}

/* Efeito de hover nos links */
footer .redes-sociais a:hover {
    text-decoration: underline;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    footer {
        padding: 20px 10px; /* Ajusta o padding no mobile */
    }

    footer .redes-sociais {
        display: flex;
        justify-content: center; /* Centraliza os ícones */
        flex-wrap: wrap; /* Quebra os ícones se necessário */
        margin-top: 15px;
    }

    footer .redes-sociais a {
        margin: 10px 15px; /* Ajusta o espaçamento entre os ícones */
        font-size: 24px; /* Aumenta o tamanho do ícone no mobile */
    }
}