/* Reset de estilos básicos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
}

/* Estilos do body */
body {
    background-color: white;
    font-family: 'Poppins', sans-serif;
}

/* Estilos do cabeçalho */
header {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    padding: 5px 20px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 100%;
}

.logo {
    width: 300px;
    height: auto;
}

/* Estilos do menu de navegação */
.ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-grow: 1;
    margin: 0;
}

.ul li {
    margin: 0 10px;
}

.nav-link {
    padding: 10px;
    color: #d5731e;
    position: relative;
    text-decoration: none;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20%;
    height: 2px;
    background-color: #fdb917;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.nav-link:hover {
    color: #fdb917;
}

.nav-link:hover::after,
.nav-link:focus::after {
    transform: scaleX(1);
    /* Mudar para 1 para exibir totalmente */
}

/* Estilos dos ícones de redes sociais */
.social-icons {
    display: flex;
    margin-left: auto;
}

.social-icon {
    width: 35px;
    height: auto;
    margin-left: 15px;
    transition: transform 0.3s;
}

.social-icon:hover {
    transform: scale(1.1);
}

/* Estilos do carrossel */
.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-container {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-image {
    min-width: 100%;
    height: auto;
}

/* Seção "Descubra a Sua Dynami" */
.descubra-dynami {
    text-align: center;
    margin: 30px auto;
    padding: 80px;
    background-color: #f0f0f0;
}

.descubra-dynami h2 {
    font-size: 40px;
}

.descubra-dynami p {
    font-size: 25px;
    color: #000;
    margin-bottom: 10px;
}

/* Botão "Comunidade Dynami" */
.btn-comunidade {
    display: inline-flex;
    /* Usar flexbox para controlar o layout interno */
    align-items: center;
    /* Alinha verticalmente o conteúdo (imagem e texto) */
    justify-content: center;
    /* Centraliza horizontalmente o conteúdo */
    padding: 5px 25px;
    /* Mantendo o padding para o tamanho do botão */
    color: #000;
    background-color: #fdb917;
    border: 1px solid #d5731e;
    border-radius: 10px;
    transition: background-color 0.3s;
    text-align: center;
}

.btn-comunidade:hover {
    background-color: #d5731e;
    color: #fff;
}

.btn-comunidade img {
    width: 200px;
    /* Ajuste o tamanho da imagem conforme o necessário */
    height: auto;
    /* Mantém a proporção da imagem */
    margin-right: 10px;
    /* Espaço entre a imagem e o texto */
    vertical-align: middle;
    /* Alinha a imagem verticalmente no meio */
}



/* Seção de Especialidades */
.especialidades {
    padding: 20px 0;
}

.especialidades-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos para títulos */
h2 {
    font-size: 30px;
    text-align: center;
}

/* Estilos para vídeos */
.video-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 100px;
}

.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 350px;
}

.video {
    max-width: 50%;
    height: auto;
}

.video-description {
    font-size: 20px;
    text-align: center;
    margin-top: 10px;
}

.video-container p {
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    padding: 0 1px;
}

.avaliacoes-carousel {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.avaliacao {
    min-width: 100%;
    transition: transform 0.5s ease;
    text-align: center;
}

.avaliacao.active {
    display: block;
}

.avaliacao:not(.active) {
    display: none;
}

.avaliar-link {
display: flex;
    flex-direction: column;
    align-items: center;
}


/* Estilos do rodapé */
footer {
    background-color: #f0f0f0;
    padding: 5px 20px;
    height: auto;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* Estilos da logo */
.footer-logo {
    width: 75px;
    height: auto;
}

/* Estilos da imagem Dynami */
.footer-dynami {
    width: 150px;
    height: auto;
    margin: 0 auto;
    /* Isso vai centralizar a imagem Dynami */
}

/* Ajuste da estrutura das imagens */
.footer-images {
    display: flex;
    justify-content: flex-start;
    /* A logo ficará à esquerda */
    flex-grow: 1;
    /* Garante que o espaço ao redor das imagens se distribua */
    align-items: center;
}

/* Estilos das informações do footer */
.footer-info {
    text-align: right;
    font-size: 12px;
    color: #d5731e;
}

.footer-info a {
    color: #d5731e;
    text-decoration: none;
    margin-left: 5px;
    /* Adicionado espaço entre os links */
}

.footer-info p {
    margin: 2px 0;
}

.footer-info a:hover {
    text-decoration: underline;
}

/* Seção de Avaliações */
.avaliacoes {
    padding: 20px 0;
    background-color: #fff;
}

.avaliacoes-text {
    text-align: center;
}

.avaliacoes-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Estilo para avaliações individuais */
.avaliacao {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    font-size: 20px;
    transition: transform 0.3s;
    /* Transição para suavizar interações */
}

.avaliacao p {
    margin: 0;
}

.paciente {
    font-weight: bold;
    margin-top: 10px;
}

/* Carrossel de avaliações */
.avaliacoes-carousel {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.avaliacao {
    min-width: 100%;
    transition: transform 0.5s ease, opacity 0.5s ease;
    /* Adicionando transição para opacidade */
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
    opacity: 0;
    /* Começa invisível */
}

.avaliacao.active {
    opacity: 1;
    /* Fica visível quando ativa */
}

/* ATENDIMENTO */

p {
    margin-bottom: 20px;
    /* Ajuste o valor conforme necessário */
}

.planos {
    text-align: center;
    margin: 40px 0;
}

.planos-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Para garantir que os planos se ajustem em telas menores */
    gap: 20px;
    /* Espaço entre os planos */
}

.plano {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 20px;
    width: 250px;
    /* Largura fixa para cada plano */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.plano:hover {
    transform: scale(1.05);
    /* Efeito de aumento ao passar o mouse */
}

.plano h3 {
    margin-bottom: 10px;
    font-size: 24px;
}

.plano p {
    font-size: 16px;
    margin-bottom: 10px;
    /* Espaço abaixo do parágrafo */
}

.plano img {
    margin-top: 10px;
    /* Espaço acima da imagem */
    max-width: 100%;
    /* Garante que a imagem não exceda a largura do plano */
    height: auto;
    /* Mantém a proporção da imagem */
}

.plano p {
    font-size: 16px;
    margin-bottom: 10px;
    /* Espaço abaixo do parágrafo */
    text-align: left;
    /* Alinha o texto à esquerda */
}

.check {
    color: green;
    /* Cor do check */
    margin-right: 5px;
    /* Espaço entre o check e o texto */
}

.x {
    color: red !important;
    /* Força a cor do X a ser vermelha */
    margin-right: 5px;
}

.saiba-mais {
    display: inline-block;
    margin-top: 10px;
    /* Espaço acima do botão */
    padding: 10px 20px;
    font-size: 16px;
    color: #000;
    /* Cor do texto */
    background-color: #fdb917;
    border: 1px solid #d5731e;
    border-radius: 5px;
    text-decoration: none;
    /* Remove o sublinhado */
    transition: background-color 0.3s;
}

.saiba-mais:hover {
    background-color: #d5731e;
    /* Cor ao passar o mouse */
    color: #fff;
    /* Cor do texto */
}

/* Adicione seu CSS aqui */
.content {
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
}

.content h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

/* Estilos para a seção F.A.Q */
.faq {
    margin: 40px auto;
    text-align: left;
    max-width: 600px;
    /* Limita a largura da seção F.A.Q */
}

.faq h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.faq-item {
    margin-bottom: 0;
    /* Removido espaço entre perguntas */
    cursor: pointer;
    background-color: #f0f0f0;
    padding: 15px;
    /* Aumento do padding */
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    /* Para alinhar a seta à direita */
    align-items: center;
    /* Centralizar verticalmente */
    transition: background-color 0.4s;
}

.faq-item:hover {
    background-color: #e0e0e0;
}

.faq-answer {
    display: none;
    margin-left: 20px;
    padding: 5px 0;
}

.whatsapp {
    color: #d5731e;
}


.arrow {
    margin-left: 10px;
    transform: rotate(0deg);
    transition: transform 0.3s;
}

.faq-item.open .arrow {
    transform: rotate(90deg);
    /* Rotaciona a seta quando a pergunta está aberta */
}

/* Plano bronze */

p {
    margin-bottom: 1.5em;
    /* Ajuste o valor conforme necessário */
    line-height: 1.6;
    /* Ajusta o espaçamento entre linhas */

}

.Adquirir-plano {
    display: inline-block;
    margin-top: 10px;
    /* Espaço acima do botão */
    padding: 10px 20px;
    font-size: 16px;
    color: #000;
    /* Cor do texto */
    background-color: #fdb917;
    border: 1px solid #d5731e;
    border-radius: 5px;
    text-decoration: none;
    /* Remove o sublinhado */
    transition: background-color 0.3s;
}

.Adquirir-plano:hover {
    background-color: #d5731e;
    /* Cor ao passar o mouse */
    color: #fff;
    /* Cor do texto */
}

/* ABA SOBRE */
.content {
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
}

.content h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.profile-section {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.profile-section img {
    max-width: 300px;
    margin: 0 20px;
    border-radius: 10px;
}

.profile-text {
    flex: 1;
    text-align: left;
}

.left {
    order: 2;
}

.right {
    order: 1;
}

/*MENU RESPONSIVO CELULAR */
/* Estilos para o menu hamburguer */
.menu-toggle {
    display: none;
    /* Inicialmente o ícone do menu hamburguer não será exibido em telas grandes (pois será mostrado em telas pequenas) */
    flex-direction: column;
    /* Define as barras do hambúrguer na vertical */
    cursor: pointer;
    /* Aparece como um ponteiro, indicando que é clicável */
    width: 30px;
    /* Largura do botão de hamburguer */
    height: 25px;
    /* Altura do botão de hamburguer */
    justify-content: space-between;
    /* Deixa as barras do hambúrguer com espaçamento entre elas */
    z-index: 10;
    /* Garante que o ícone do hamburguer fique sobre o conteúdo */
    margin-left: auto;
    /* Alinha o ícone do hambúrguer à direita do header */
}

/* Estilo das barras do hamburguer */
.bar {
    width: 30px;
    /* Largura das barras */
    height: 4px;
    /* Altura das barras */
    background-color: #d5731e;
    /* Cor das barras */
    border-radius: 2px;
    /* Deixa as barras com bordas arredondadas */
    transition: background-color 0.4s, transform 0.3s;
    /* Transição suave para cor e movimento */
}

/* Efeito quando passa o mouse sobre as barras */
.menu-toggle:hover .bar {
    background-color: #fdb917;
    /* Muda a cor das barras ao passar o mouse */
}

/* Estilos para telas grandes (desktop e tablet em modo paisagem) */
@media (min-width: 769px) {
    .ul {
        display: flex;
        /* Exibe o menu de navegação na horizontal em telas grandes */
    }

    .menu-toggle {
        display: none;
        /* Esconde o ícone de hamburguer em telas grandes */
    }

    /* Exibe os ícones sociais em telas grandes */
    .social-icons {
        display: flex;
        /* Mostra os ícones de redes sociais na versão desktop */
    }
}

/* Estilos para telas pequenas (celulares, até 768px) */
@media (max-width: 768px) {

    /* Inicialmente, o menu de navegação será oculto */
    .ul {
        display: none;
        /* Esconde o menu de navegação */
        flex-direction: column;
        /* Exibe as opções do menu em coluna */
        width: 100%;
        /* O menu ocupa toda a largura da tela */
        background-color: #f0f0f0;
        /* Cor de fundo do menu */
        padding: 25px 0;
        /* Espaçamento vertical no menu */
        z-index: 5;
        /* Coloca o menu acima de outros conteúdos */
        position: absolute;
        top: 60px;
        /* Define a posição do menu 60px abaixo do cabeçalho */
        left: 0;
        /* Alinha o menu à esquerda da tela */
        transition: max-height 0.3s ease-in-out;
        /* Transição suave para o aumento de altura */
        max-height: 0;
        /* Inicialmente, o menu estará fechado, sem altura visível */
        overflow: hidden;
        /* Esconde qualquer conteúdo que ultrapasse a altura do menu */
    }

    /* Quando a classe 'active' é adicionada ao menu (ao clicar no hambúrguer), o menu se torna visível */
    .ul.active {
        display: flex;
        /* Exibe o menu como um flexbox */
        max-height: 500px;
        /* Define uma altura máxima para o menu quando ele for aberto */
    }

    /* Estilo para cada item de navegação do menu */
    .ul li {
        margin: 10px 0;
        opacity: 0;
        /* Começa com opacidade 0 para efeito de animação */
        animation: slideIn 0.3s forwards;
        /* Animação para os itens do menu aparecerem */
    }

    /* Cria um atraso na animação para os itens do menu */
    .ul li:nth-child(1) {
        animation-delay: 0.2s;
        /* Atraso para o primeiro item */
    }

    .ul li:nth-child(2) {
        animation-delay: 0.3s;
        /* Atraso para o segundo item */
    }

    .ul li:nth-child(3) {
        animation-delay: 0.4s;
        /* Atraso para o terceiro item */
    }

    .ul li:nth-child(4) {
        animation-delay: 0.5s;
        /* Atraso para o quarto item */
    }

    /* Esconde os ícones sociais na versão mobile */
    .social-icons {
        display: none;
        /* Esconde os ícones de redes sociais no mobile */
    }

    /* Ajuste a logo em dispositivos móveis */
    .logo {
        width: 250px;
        /* Diminui ainda mais a logo em telas menores */
        z-index: 6;
        /* Garante que a logo fique sobre o menu */
    }

    /* Ajustes em outras seções no mobile */
    .descubra-dynami {
        padding: 40px;
        /* Reduz o padding para que a seção fique mais compacta */
    }

    .descubra-dynami h2 {
        font-size: 28px;
        /* Diminui o tamanho da fonte do título */
    }

    .descubra-dynami p {
        font-size: 18px;
        /* Diminui o tamanho da fonte do parágrafo */
    }

    /* Exibe o ícone do menu hamburguer em telas pequenas */
    .menu-toggle {
        display: flex;
        /* Exibe o hamburguer em telas pequenas */
        margin-left: auto;
        /* Alinha o hamburguer à direita */
    }

    /* Quando o menu estiver aberto, empurra o conteúdo abaixo */
    .ul.active+.content {
        padding-top: 100px;
        /* Ajusta o conteúdo abaixo para ser empurrado para baixo */
    }

    /* Quando o menu estiver aberto, ele ficará visível 60px abaixo do cabeçalho */
    .ul.active {
        top: 60px;
        /* O menu começa 60px abaixo do cabeçalho */
    }
}

/* Animação para o menu deslizante */
@keyframes slideIn {
    from {
        transform: translateY(-100%);
        /* O menu começa escondido acima da tela */
    }

    to {
        transform: translateY(0);
        /* O menu desce para sua posição original */
        opacity: 1;
        /* Aumenta a opacidade para 1 */
    }
}

/* Ajuste do botão "Conexão Dynami" para telas pequenas */
@media (max-width: 768px) {
    .btn-comunidade {
        padding: 5px 30px;
        /* Reduz o padding para tornar o botão menor */
        font-size: 14px;
        /* Diminui o tamanho da fonte */
        width: auto;
        /* Deixa a largura automática, ajustando ao conteúdo */
    }

    .btn-comunidade img {
        width: 200px;
        /* Diminui o tamanho da imagem dentro do botão */
        margin-right: 5px;
        /* Diminui o espaço entre a imagem e o texto */
    }
}

/* Ajuste do rodapé para telas pequenas (celulares) */
@media (max-width: 768px) {

    /* Esconde os links de WhatsApp e e-mail em telas pequenas */
    .footer-contact {
        display: none;
    }

    /* Ajuste da .footer-container para manter as imagens lado a lado e o texto abaixo delas */
    .footer-container {
        display: flex;
        flex-direction: column;
        /* Alinha os itens em coluna: imagens e texto abaixo */
        align-items: center;
        /* Centraliza as imagens e o texto */
        justify-content: center;
        text-align: center;
        /* Garante que o texto fique centralizado */
    }

    /* Ajuste para as imagens ficarem lado a lado */
    .footer-images {
        display: flex;
        /* Coloca as imagens lado a lado */
        flex-direction: row;
        /* Coloca as imagens em linha */
        align-items: center;
        /* Alinha as imagens verticalmente */
        justify-content: center;
        /* Centraliza as imagens */
    }

    /* Ajuste da logo e imagem Dynami para ficarem menores */
    .footer-logo {
        width: 70px;
        /* Ajuste o tamanho conforme necessário */
        height: auto;
    }

    .footer-dynami {
        width: 120px;
        /* Ajuste o tamanho conforme necessário */
        height: auto;
        margin: 100 10px;
        /* Espaçamento entre as imagens */
    }

    /* Ajuste do texto "Todos os direitos reservados..." abaixo das imagens */
    .footer-info {
        font-size: 12px;
        color: #d5731e;
        margin-top: 10px;
        /* Ajuste o espaçamento entre as imagens e o texto */
        text-align: center;
    }
}

/*SOBRE*/

/* Responsividade para telas pequenas (max-width: 768px) */
@media (max-width: 768px) {

    /* Ajustes para a estrutura geral da página */
    .container {
        padding: 10px;
    }

    h2 {
        font-size: 24px;
    }

    /* Organiza as seções de perfil em coluna */
    .profile-section {
        flex-direction: column;
        /* As seções vão empilhar verticalmente */
        align-items: center;
        justify-content: center;
    }

    .profile-section img {
        width: 80%;
        /* As imagens vão ocupar 80% da largura da tela */
        max-width: 350px;
        /* Limita o tamanho máximo das imagens */
        margin-bottom: 20px;
        /* Adiciona um espaçamento entre a imagem e o texto */
    }

    .profile-text {
        width: 80%;
        /* O texto vai ocupar 80% da largura da tela */
        font-size: 14px;
        text-align: center;
        /* Centraliza o texto */
    }
}

/*ATENDIMENTO*/
/* Ajustando o tamanho do título h2 e do parágrafo dentro do <main> para telas pequenas */
@media (max-width: 768px) {

    /* Ajustando o tamanho do título h2 */
    main h2 {
        font-size: 20px;
        /* Ajuste o tamanho conforme necessário */
    }

    /* Ajustando o tamanho do texto nos parágrafos */
    main p {
        font-size: 14px;
        /* Ajuste o tamanho conforme necessário */
    }
}

/* Exibe as imagens como fallback para telas pequenas */
@media (max-width: 768px) {
    .video-container video {
        display: none; /* Esconde os vídeos */
    }
    .video-container img {
        display: block; /* Exibe as imagens em vez dos vídeos */
        width: 100%;
        height: auto;
    }
}

/* Exibe os vídeos para telas grandes */
@media (min-width: 769px) {
    .video-container img {
        display: none; /* Esconde as imagens */
    }
    .video-container video {
        display: block; /* Exibe os vídeos em vez das imagens */
        width: 100%;
        height: auto;
    }
}