/* Estilos gerais */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #f9f9f9;
    color: #333;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #fff;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

header.scrolled {
    background-color: #f4f4f9;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
}

/* Centraliza o conteúdo e define uma largura máxima */
.container, .content, .section {
    max-width: 1200px; /* Define uma largura máxima */
    margin: 0 auto;    /* Centraliza o conteúdo */
    padding: 0 20px;   /* Adiciona padding nas laterais para evitar que o conteúdo encoste nas bordas */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura */
}

/* Para garantir centralização em dispositivos móveis */
@media (max-width: 768px) {
    .container, .content, .section {
        padding: 0 15px; /* Ajusta o padding em telas menores */
    }
}


.logo-nome {
    display: flex;
    align-items: center;
}



.logo {
    height: 50px;
    width: auto;
    margin-right: 15px;
}

.nome-profissional h1 {
    font-size: 30px;
    margin: 0;
    font-weight: 600;
    color: #444;
}

.nome-profissional p {
    margin: 0;
    font-size: 1rem;
    color: #777;
}

/* Menu de navegação */
nav.menu {
    flex-grow: 1; /* Faz o menu ocupar o máximo de espaço possível */
    display: flex;
    justify-content: flex-end; /* Alinha o menu à direita */
    align-items: center;
}

nav.menu ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 21px;
}

nav.menu ul li {
    margin: 0 20px; /* Espaçamento entre os itens do menu */
}

nav.menu ul li a {
    text-decoration: none;
    font-size: 1rem;
    color: #555;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

nav.menu ul li a:hover {
    color: #000;
    border-bottom: 2px solid #000;
}

/* Menu responsivo */
/* Estilo para o cabeçalho */
header {
    display: flex;
    justify-content: space-between; /* Espaça logo e ícone do menu */
    align-items: center; /* Alinha verticalmente */
    padding: 15px 20px;
    background-color: #fff;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Ajustes para o botão de menu */
.menu-icon {
    display: none; /* Oculto em telas grandes */
}

@media (max-width: 768px) {
    .menu-icon {
        display: block; /* Exibe em telas pequenas */
        font-size: 24px;
        cursor: pointer;
        position: absolute; /* Mantém livre para posição */
        top: 15px; /* Distância do topo */
        right: 10%; /* Ajusta para a esquerda - 10px para não ficar na borda */
        z-index: 1100; /* Garante que fique acima */
    }

    nav.menu {
        display: none; /* Oculta em telas menores */
        position: fixed; /* Fixo na tela */
        top: 0; /* Fica no topo */
        left: 0; /* Começa no lado esquerdo */
        width: 100%; /* Largura total */
        height: 100%; /* Altura total */
        background-color: rgba(255, 255, 255, 0.95); /* Fundo branco */
        z-index: 1000; /* Acima de outros elementos */
        padding: 50px 0; /* Espaçamento vertical */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
        transform: translateY(-100%); /* Começa fora da tela */
        transition: transform 0.3s ease; /* Transição suave */
    }

    .menu.active {
        display: block; /* Torna o menu visível */
        transform: translateY(0); /* Move para dentro da tela */
    }

    nav.menu ul {
        flex-direction: column; /* Empilha verticalmente */
        align-items: center; /* Centraliza os itens */
        width: 100%; /* Largura total */
        padding: 0; /* Remove padding padrão */
        margin: 0; /* Remove margem padrão */
    }

    nav.menu ul li {
        margin: 20px 0; /* Espaço vertical entre itens */
        text-align: center; /* Centraliza o texto dos itens */
    }

    nav.menu ul li a {
        font-size: 1.5rem; /* Tamanho maior para fácil leitura */
        color: #333; /* Cor do texto */
    }
}



 
header.scrolled {
    background-color: #f4f4f9;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
}



.logo {
    height: 50px;
    width: auto;
    margin-right: 15px;
}



/* Estilos das seções com imagem e texto */
.section {
    padding: 120px 20px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    flex-wrap: wrap; /* Garante responsividade */
}

.section.show {
    opacity: 1;
    transform: translateY(0);
}

.content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    padding: 20px;
}

.text {
    flex: 1;
    padding: 20px;
    max-width: 600px;
}

.text h2 {
    font-size: 1.8rem; /* Ajustado para um tamanho suave */
    margin-bottom: 15px;
    color: #333;
    display: flex;
    align-items: center;
}

.text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.image {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    max-height: 450px;
}

/* Ícones */
.text h2 i {
    margin-right: 10px;
    color: #f1c40f; /* Cor amarela dos ícones */
    font-size: 24px;
}

/* Estilo para seções alternadas */
#about { background-color: #f9f9f9; }
#services { background-color: #eceff1; }
#target { background-color: #f9f9f9; }
#contact { background-color: #eceff1; }

/* Rodapé */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 30px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    font-size: 1rem;
}

footer p {
    margin: 0;
}

/* Responsividade */
@media (max-width: 768px) {
    header {
        padding: 10px 15px;
    }

    .logo {
        height: 40px;
    }

    .content {
        flex-direction: column;
    }

    .text h2 {
        font-size: 1.8rem; /* Ajustado para telas menores */
    }

    .text p {
        font-size: 1rem;
    }

    footer {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .nome-profissional h1 {
        font-size: 1.5rem;
    }

    .nome-profissional p {
        font-size: 0.8rem;
    }

    .text h2 {
        font-size: 1.5rem;
    }

    .text p {
        font-size: 1rem;
    }

    footer {
        font-size: 0.8rem;
    }
}

/* Estilos dos botões */
.btn-therapy {
    display: inline-block;
    padding: 15px 30px;
    margin-top: 10px;
    font-size: 1rem;
    color: white;
    background-color: #25D366;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

.btn-therapy:hover {
    background-color: #1abe54;
}

/* Container para os botões */
.buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Ajuste responsivo */
@media (max-width: 768px) {
    .section {
        flex-direction: column;
    }

    .image img {
        margin-top: 20px;
    }
}
/* Seção de serviços e valores */
/* Seção de serviços e valores */
#valores {
    padding: 60px 20px;
    background-color: #fff;
    text-align: center;
}

#valores h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    color: #333;
}

.service-container {
    display: flex; /* Usa flexbox */
    justify-content: center; /* Centraliza os cards */
    gap: 20px; /* Espaçamento entre os cards */
    flex-wrap: wrap; /* Permite que os cards se movam para a linha seguinte */
}

.service-item {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    width: 100%; /* Define a largura total do card */
    max-width: 300px; /* Define uma largura máxima para os cards */
    transition: transform 0.3s ease;
    display: flex; /* Exibe como flex */
    flex-direction: column; /* Coloca imagem e informações em coluna */
    align-items: center; /* Centraliza o conteúdo dentro do card */
}

.service-item:hover {
    transform: scale(1.05);
}

.service-item img {
    max-width: 100%; /* A imagem ocupa 100% da largura do card */
    height: auto; /* Mantém a proporção da imagem */
    margin-bottom: 15px; /* Espaço abaixo da imagem */
}

.service-info h3 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 5px;
}

.service-info p {
    font-size: 1rem;
    color: #666;
}

/* Responsividade específica para smartphones */
@media (max-width: 768px) {
    .service-container {
        flex-direction: column; /* Alinha os cards verticalmente */
        align-items: center; /* Centraliza os cards */
    }

    .service-item {
        width: 90%; /* Ajusta a largura do card em dispositivos móveis */
        max-width: 300px; /* Garante uma largura máxima */
    }
}


.agendar-button {
    margin-top: 30px;
}

.btn-agendar {
    background-color: #f1c40f;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-agendar:hover {
    background-color: #e1b50d;
}
/* Seção de ajuda */
#psicoterapia {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

#psicoterapia h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    color: #333;
}

.help-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.help-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.help-list ul li {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.help-list ul li i {
    color: #f1c40f;
    margin-right: 10px;
}

/* Botão do WhatsApp */
/* Botão do WhatsApp */
.whats-button {
    margin-top: 30px;
    text-align: center; /* Garante que o botão fique centralizado */
}

.btn-whats {
    background-color: #f1c40f;
    color: #333;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    display: inline-block;
    white-space: nowrap; /* Evita quebra de linha no texto */
    max-width: 100%; /* Garante que o botão não ultrapasse a largura da tela */
    overflow: hidden; /* Evita que o texto extravase */
    text-overflow: ellipsis; /* Adiciona "..." caso o texto seja muito longo */
}

/* Ajuste para telas médias e pequenas */
@media (max-width: 768px) {
    .btn-whats {
        width: calc(100% - 40px); /* Garante que o botão tenha espaço suficiente em telas menores */
        padding: 12px 20px; /* Ajusta o padding interno */
        font-size: 1rem; /* Ajusta o tamanho da fonte */
    }
}

/* Ajuste para telas muito pequenas, como celulares menores que 480px */
@media (max-width: 480px) {
    .btn-whats {
        width: calc(100% - 30px); /* Garante que o botão não toque as bordas da tela */
        padding: 10px 15px; /* Diminui um pouco o padding interno */
        font-size: 0.9rem; /* Diminui o tamanho da fonte */
    }
}


/* Responsividade da lista de ajuda */
@media (max-width: 768px) {
    .help-list {
        flex-direction: column; /* Empilha as listas verticalmente em telas menores */
        gap: 20px;
    }
}

/* Seção de psicoterapia presencial e virtual */
#boasvindas {
    padding: 60px 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

#boasvindas .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 40px;
}

#boasvindas .text {
    flex: 1;
    max-width: 600px;
    font-size: 1.1rem;
    color: #666;
}

#boasvindas .text p {
    margin-bottom: 15px;
    line-height: 1.6;
}

#boasvindas .image {
    flex: 1;
    text-align: center;
}

#boasvindas .image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
}

#boasvindas .buttons-container {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}

#boasvindas .btn-therapy {
    background-color: #f1c40f;
    color: #333;
    border-radius: 25px;
    padding: 15px 30px;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

#boasvindas .btn-therapy:hover {
    background-color: #e1b50d;
}

.extra-info {
    margin-top: 30px;
    display: flex;
    gap: 40px;
    align-items: center;
}

.info-item {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #666;
}

.info-item i {
    margin-right: 10px;
    color: #f1c40f;
    font-size: 1.2rem; /* Ajuste do tamanho do ícone */
}

@media (max-width: 768px) {
    #boasvindas .content {
        flex-direction: column;
        align-items: center;
    }

    #boasvindas .text {
        text-align: center;
        max-width: 100%;
    }

    .extra-info {
        flex-direction: column;
        align-items: center;
    }

    #boasvindas .buttons-container {
        justify-content: center;
    }
}
/* Linha de separação amarela */
.separador {
    height: 10px;
    background-color: #fce28a;
    width: 100%;
}

/* Seção de localização */
#localizacao {
    padding: 60px 20px;
    background-color: #fff;
    text-align: left;
    position: relative;
}

#localizacao h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
    text-align: left;
}

/* Centralizando e estilizando o texto para deixá-lo mais delicado */
.info-text {
    text-align: center; /* Centraliza o texto horizontalmente */
    font-size: 1.1rem; /* Mantém o tamanho do texto delicado */
    color: #666; /* Cor suave */
    line-height: 1.6; /* Aumenta o espaçamento entre linhas */
    font-weight: 300; /* Fonte mais fina para deixar o texto delicado */
    font-family: 'Open Sans', sans-serif; /* Mantém a fonte suave */
    margin-bottom: 20px; /* Espaçamento entre o texto e o mapa */
}

.info-text p {
    margin: 0;
}

.info-text .whatsapp-link {
    margin-top: 10px;
    font-size: 1.5rem; /* Mantém o ícone delicado */
    color: #25D366;
}

/* Responsividade */
@media (max-width: 768px) {
    .info-text {
        text-align: center;
    }
}
.map-container {
    margin-top: 60px;
    width: 100%;
    height: 450px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}
/* Ajusta a margem superior quando a rolagem chega a uma seção ancorada */
.section {
    scroll-margin-top: 100px; /* Ajuste este valor conforme a altura do seu cabeçalho fixo */
}

/* Seção de ética profissional */
#etica-profissional {
    background-color: #fdf1b0; /* Cor de fundo */
    padding: 40px 20px;
    max-width: 800px;
    margin: 40px auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: center;
    height: 100vh; /* Define a altura da seção para ocupar toda a tela */
    overflow: hidden; /* Esconde qualquer conteúdo que ultrapasse a altura */
}

/* Caixa com rolagem interna */
.scrollable-content {
    height: 600px; /* Ocupa toda a altura da seção */
    overflow-y: scroll; /* Ativa a rolagem interna */
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Estilo das imagens */
.scrollable-content img {
    width: auto; /* Ocupar toda a largura do contêiner */
    height: auto; /* Mantém a proporção correta da altura */
    max-height: 90vh; /* Limita a altura máxima para garantir que as imagens tenham o mesmo tamanho */
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Responsividade para dispositivos menores */
@media (max-width: 768px) {
    #etica-profissional {
        height: 90vh; /* Reduz a altura da seção em dispositivos menores */
    }

    .scrollable-content img {
        max-height: 80vh; /* Ajusta a altura das imagens em telas menores */
    }
}

@media (max-width: 480px) {
    #etica-profissional {
        height: 80vh; /* Altura menor em dispositivos muito pequenos */
    }

    .scrollable-content img {
        max-height: 70vh; /* Ajusta a altura das imagens para telas muito pequenas */
    }
}
#valores {
    scroll-margin-top: 40px; /* Ajusta este valor para adicionar espaço extra ao rolar para a sessão */
}
/* Estilo para a seção de contato */
.contact-section {
    background-color: #f3f7fa;
    padding: 60px 20px; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #333;
    box-sizing: border-box;
}

.contact-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;  /* Padding igual dos dois lados */
    box-sizing: border-box;
}

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

.contact-section p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #666;
    line-height: 1.6;
}

.contact-details {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    width: 250px;
    margin: 0 auto 20px auto;  /* Centraliza e ajusta a margem inferior */
}

.contact-item:hover {
    transform: translateY(-5px);
}

.contact-item i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #f1c40f;
}

.contact-item strong {
    font-size: 1.3rem;
    color: #444;
    margin-bottom: 10px;
}

.contact-item a {
    text-decoration: none;
    color: #f1c40f;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: #f1c40f;
}

/* Responsividade */
@media (max-width: 768px) {
    .contact-section {
        padding: 40px 0; /* Remove o padding lateral, garantindo centralização */
    }

    .contact-container {
        padding: 0 15px; /* Ajuste de padding menor para telas pequenas */
    }

    .contact-details {
        flex-direction: column;
        align-items: center;
        gap: 15px; /* Ajuste o gap em telas menores */
    }

    .contact-item {
        width: 100%;
        max-width: 350px; /* Ajusta a largura máxima do card */
        padding: 15px 10px; /* Ajusta o padding interno do card */
        margin: 0 auto; /* Garante centralização do card */
    }
}