:root {
    --background-position: center;
    --background-repeat: no-repeat;
    --background-size: cover;
    --background-attachment: fixed;
    --min-height: 25vh;
    --font-size-medium: 1.3rem;
    --padding: 10px;
    --max-width: 65vw;
    --text-align: center;
}

.mobile-menu {
    /* display: none; */
    cursor: pointer;
}

.mobile-menu div {
    width: 32px;
    height: 2px;
    background: #fff;
    margin: 8px;
    transition: 0.3s;
}

@media (hover: none){
    #home, .arvore, .estrada, .livro {
        background-attachment: initial;
    }
    #oQueE, #paraQuem {
        background-color: #FFEFD6;
    }
    #psicologa {
         background-color: #f3e6ff;
    }
}

@media(max-width:1150px) {
    .nav-list {
        position: absolute;
        top: 8vh;
        right: 0;
        width: 45vw;
        height: 75vh;
        background-color: black;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        transform: translateX(100%);
        transition: transform 0.3s ease-in;
    }

    .nav-list li {
        margin-left: 0;
        opacity: 0;
    }

    .mobile-menu {
        display: block;
    }

    #home h1 {
        font-size: 5rem;
    }

    #oQueE, #paraQuem {
        padding: 20px; 
    }

    #atendimento {
        padding: 20px;
    }

    .conteudo-flex {
        display: flex;
        flex-direction: column;
    }

    #esquerda, #direita, #centro {
        padding: 10px;
    }


    #centro img {
        width: 100%;
        height: auto;
    }

    /* #centro, #direita {
        flex-basis: 50%;
        max-width: 50%;
    } */

    #centro, #direita {
        order: 1;
        font-size: 1.4rem;
    }

    #esquerda {
        order: 0;
        max-width: 800px;
    }

    .conteudo-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #contato {
        min-height: auto;
        padding: 20px 0;
        font-weight: bold;
        display: flex;
        justify-content: space-evenly;
        align-items: stretch; /* Ajusta para esticar todos os itens filhos para que ocupem a mesma altura */
        background-color: #646464;
        flex-direction: row; /* Organiza os filhos em linha por padrão */
        align-items: center;
    }

    #contato {
        flex-direction: column; /* Muda para coluna em telas maiores */
    }

    .tt {
        text-align: center;
    }

    /* Utilizando 'order' para organizar os itens dentro de #contato */
    .maps, .tt, #links-uteis {
        order: 2; /* Por padrão, todos terão a mesma ordem */
        padding: 10px;
    }

    #links-uteis {
        text-align: center;
        order: 3; /* Os links úteis vêm por último */
    }

    .tt {
        width: 100%; /* Garante que ocupem toda a largura disponível */
    }

    .maps {
        max-width: 100vw;
    }
    
}

.nav-list.active {
    transform: translateX(0);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mobile-menu.active .line1 {
    transform: rotate(-45deg) translate(-8px, 8px);
}

.mobile-menu.active .line2 {
    opacity: 0;
}

.mobile-menu.active .line3 {
    transform: rotate(45deg) translate(-5px, -7px);
}

@media(max-width:990px) {
    .arvore, .divisor, .estrada, .livro {
        /* background-position: var(--background-position); */
        background-repeat: var(--background-repeat);
        background-size: var(--background-size);
        background-attachment: var(--background-attachment);
        min-height: var(--min-height);
    }

    .arvore {
        background-image: url(/components/images/arvore.jpeg);
    }

    .divisor {
        background-image: url(/components/images/home-back.png);
    }

    .estrada {
        background-image: url(/components/images/estrada2.jpeg);
    }

    .livro {
        background-image: url(/components/images/livro.jpeg);
    }

    #perguntas {
        padding: 0px 10px;
    }

    #atendimento, #contato {
        min-height: auto;
        display: grid;
        align-items: center;
    }

    #centro {
        max-width: 60vw;
    }

    #esquerda, #direita {
        padding: var(--padding);
        max-width: 100vh;
        font-size: var(--font-size-medium);
        text-align: var(--text-align);
    }

    #esquerda a {
        text-align: var(--text-align);
        color: black;
    }

    .maps {
        padding: 15px;
    }

    .tt {
        letter-spacing: 3px;
        display: block;
    }

    #contato h2 {
        text-align: var(--text-align);
        padding-bottom: 20px;
        font-size: 3rem;
    }

    #whats-email {
        font-size: 2rem;
        /* padding-left: 3rem; */
    }

    .whats {
        list-style-image: url(/components/images/whats-logo.png);
    }

    .whatsapp-float img {
        width: 50px;
    }

    .email {
        list-style-image: url(/components/images/email-logo.png);
    }
}

@media (min-width: 768px) {
    .bio {
        flex-direction: row;
        justify-content: center;
        gap: 50px;
    }

    .texto-sobre {
        text-align: left;
    }
}

:root {
    --font-size-large: 40px;
    --font-size-medium: 1.3rem;
    --font-size-small: 1.1rem;
    --background-position: center;
    --background-repeat: no-repeat;
    --background-size: cover;
    --background-attachment: fixed;
}

@media(max-width:430px) {
    html, body {
        overflow-x: hidden;
    }
    

    .nav-list {
        margin: -10px 0;
    }

    .logo {
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 4px;
    }

    .quadrado-menor {
        padding-top: 30vh;
    }

    .article-mobile {
        display: block;
        text-align: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .leia-mais-btn {
        font-family: Roboto, sans-serif;
        font-weight: 0;
        font-size: 14px;
        color: #fff;
        background: linear-gradient(90deg, #0066CC 0%, #c500cc 100%);
        padding: 10px 30px;
        border: none;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        border-radius: 50px;
        transition : 1000ms;
        transform: translateY(0);
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        margin-top: 20px;
    }

    .article {
        display: none;
    }
    
    .article-cut {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: block;
        margin: 10px auto;
    }

    #oQueE, #paraQuem {
        /* display: inline-block; */
        /* padding: 20px; */
        min-height: auto;
    }

    #oQueE h2, #paraQuem h2, #perguntas h2 {
        text-align: center;
        padding: 20px 0 50px 0;
        font-size: var(--font-size-large);
    }

    #oQueE p, #paraQuem p, #perguntas details summary, #perguntas details p {
        font-size: var(--font-size-medium);
    }

    .article-mobile {
        margin: 1em;
    }

    .conteudo {
        display: none;
        margin: auto;
        max-width: 90vw;
    }

    .arvore, .divisor, .estrada, .livro {
        /* background-position: var(--background-position); */
        background-repeat: var(--background-repeat);
        background-size: var(--background-size);
        background-attachment: var(--background-attachment);
        min-height: 20vh;
    }

    .arvore {
        background-image: url(/components/images/arvore.jpeg);
    }

    .divisor {
        background-image: url(/components/images/home-back.png);
    }

    .estrada {
        background-image: url(/components/images/estrada2.jpeg);
    }

    .livro {
        background-image: url(/components/images/livro.jpeg);
    }

}

    /* Estilização base para mobile */
#atendimento {
    padding: 20px;
    font-family: 'Merriweather', sans-serif;
}

#atendimento h2 {
    font-size: 24px; /* Tamanho maior para o título */
    color: #333; /* Cor escura para melhor contraste */
    text-align: center; /* Centraliza o título */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

#atendimento .conteudo-flex {
    display: flex;
    flex-direction: column; /* Empilha os blocos verticalmente */
    align-items: center; /* Centraliza os itens na vertical */
    gap: 20px; /* Espaço entre os itens */
}

#atendimento p {
    font-size: 1.4rem; /* Tamanho de fonte legível para parágrafos */
    color: #666; /* Cor suave para o texto */
    line-height: 1.6; /* Espaçamento de linha para melhorar a leitura */
    text-align: justify; /* Justifica o texto para melhor fluidez */
}

#atendimento strong {
    color: #444; /* Cor um pouco mais escura para destaques */
}

#atendimento a.whats2 {
    display: inline-block; /* Torna o link clicável mais acessível */
    background-color: #34af23; /* Cor de fundo (Exemplo: verde WhatsApp) */
    color: #fff; /* Cor do texto */
    padding: 10px 15px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    text-decoration: none; /* Remove o sublinhado do link */
    margin: 10px 0;
}

#atendimento a.whats2:hover {
    background-color: #2b8a1d; /* Cor de fundo mais escura no hover */
}

#atendimento #centro img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {

    #esquerda a {
        font-size: var(--font-size-small);
        text-align: center;
        color: black;
    }

    #contato h2 {
        text-align: center;
        padding-bottom: 20px;
        font-size: 2.5rem;
    }

    #whats-email {
        font-size: var(--font-size-small);
        text-align: center;
    }

    .maps {
        display: flex;
        padding: 10px 0;
        align-items: center;
    }

    .maps iframe {
        width: auto;
    }
}