/* Mídia Queries para dispositivos móveis */
/* Media Queries */

@media (max-width: 1200px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    header {
        display: flex;
        flex-direction: column;
        padding: 20px 0 10px;
        gap: 20px;
    }

    .main-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }

    .social-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .retangulo-roxo h3 {
        font-size: 1.6rem;
        text-align: center;
    }

    .header_conteudo {
        min-height: 600px;
        text-align: center;
        grid-template-columns: 1fr;
        padding-top: 20px;
    }

    .header_conteudo > img.foto-Hanna {
        width: 400px;
        margin-bottom: -10px;
    }


    .secao_sobre {
        padding: 40px 100px;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .btn_whatsapp img {
        padding: 10px;
    }
}

@media (max-width: 992px) {

    
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.2rem;
    }
     

    .header_conteudo > img.foto-Hanna {
        width: 400px;
        margin-bottom: -50px;
    }

    .retangulo-azul img {
        margin-top: 20px;
        padding: 10px;
        width: 100%;
    }

    .retangulo-azul {
        width: 100%;
        height: 100px; 
        background: var(--cor-secundaria);
        /*transform: rotate(5deg) translate(-30px, -40px);*/
    }

    .retangulo-roxo {
        padding: 30px;
    }

    .secao_sobre {
        padding: 30px 50px;
    }

    .secao {
        padding: 30px;
    }

    .lista_destaque_portfolio {
        padding: 40px 20px;
        gap: 20px;
    }

    .card_destaque_portfolio {
        flex: 0 0 calc(50% - 10px);
    }

    .secao_sobre {
        padding: 20px 30px;
        grid-template-columns: 1fr;
    }

    .modal {
        width: 100%; /* Modal ocupa 100% da largura da tela */
        padding: 10px; /* Ajusta o padding para melhor visualização em telas menores */
    }
    
}

@media (max-width: 768px) {
    
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.6rem;
        padding-top: 40px;
    }

    h3, .projetos h3 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.2rem;;
    }

    p {
        font-size: 1rem;
    }

    header {
        flex-direction: column;
    }

    .main-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }

    .social-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        order: -1;
    }

    .toggle-button {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        padding-bottom: 10px;
    }

    .site-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .site-nav ul {
        display: none; /* Inicia oculto por padrão */
    }
    
    .site-nav ul.active {
        display: block; /* Exibe quando a classe 'active' é adicionada */
    }

    .retangulo-roxo h2 {
        font-size: 1.4rem;
        text-align: center;
    }

    .header_conteudo {
        grid-template-columns: 1fr;
        padding: 10px;
        padding-top: 60px;
        background: none;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .header_conteudo > img.foto-Hanna {
        width: 350px;
        margin-bottom: -20px;
    }

    .secao-produtos, .secao-servicos {
        background: var(--cor-texto-claro);
    }

    .lista-servicos, .lista-produtos {
        display: flex;
        flex-direction: column;
    }
    
    .lista_destaque_portfolio {
        padding: 20px 10px;
        gap: 10px;
    }

    .card_destaque_portfolio {
        flex: 0 0 100%;
    }


    .texto_sobre_mim {
        width: 90%;
        font-size: 0.9rem;
    }

    .call-to-action {
        width: 80%;
    }

    .botao {
        font-size: 1.2rem;
        padding: 8px 20px;
    }

    .whatsapp-float {
        width: 100%;
        right: 30px;
        bottom: 20px;
    }

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

    .scroll-to-top {
        display: none;
    }

    .faq-section {
    padding: 3rem 1rem;
    }
    
    .faq-title {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }
    
    .accordion {
        width: 100%;
    }
    
    .accordion-header {
        font-size: 1.1rem;
        font-weight: 600;
        padding: 1rem;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        white-space: normal;
        word-break: break-word;
        transition: color 0.3s ease;
    }
    
    .accordion-header::after {
        font-size: 1.2rem;
        right: 1.2rem;
    }
    
    .accordion-body {
        font-size: 0.95rem;
        padding: 0 1.2rem;
    }
    
    .accordion-item.open .accordion-body {
        padding: 0 1.2rem 1rem;
    }

}

@media (max-width: 480px) {

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
        padding-top: 20px;
    }

    h3, .projetos h3 {
        font-size: 1.1rem;;
    }

    .header_conteudo {
        display: flex;
        flex-direction: column;
        padding-top: 60px;
        min-height: auto;
    }

    .header img {
        max-width: 60px;
    }

    .header_conteudo > img.foto-Hanna {
        width: 300px;
        margin-bottom: -20px;
    }

    .retangulo-roxo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 15px;

    }

    .retangulo-roxo h2 {
        font-size: 1.2rem;
    }

    .lista_destaque_portfolio {
        padding: 10px 5px;
        gap: 5px;
    }

    .botao {
        font-size: 1rem;
        padding: 5px 15px;
    }
}