/* Para telas médias (Laptops e Tablets maiores) */
@media screen and (max-width: 1200px) {
    /* Navegação */
    #desktop-nav {
        display: none;
    }
    #hamburguer-nav {
        display: flex;
    }

    /* Layout Principal: Muda para coluna */
    #hero, 
    .about-container {
        flex-direction: column;
        text-align: center;
    }

    /* Margem e Padding */
    section {
        margin: 0 5%;
        padding-top: 5vh;
    }

    /* Seção Hero e Sobre */
    #hero {
        gap: 2rem;
        min-height: fit-content;
        padding-top: 5vh;
    }

    .profile-pic-container,
    .about-pic-container {
        width: 250px;
        height: 250px;
        margin: 0 auto 1.5rem;
    }
    
    .about-container {
        gap: 2rem;
    }
}

/* Para telas pequenas (Celulares e Tablets menores) */
@media screen and (max-width: 768px) {
    /* Tipografia */
    .title {
        font-size: 2.5rem;
    }
    .experience-sub-title {
        font-size: 1.5rem;
    }
    .project-title {
        font-size: 1.3rem;
    }

    /* Botões */
    .btn-cont,
    .contact-info-upper-container {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Seção Sobre */
    .about-containers {
        flex-wrap: wrap;
        width: 100%;
        gap: 1rem;
    }
    
    .details-card {
        flex-basis: 48%; /* Permite 2 por linha */
    }

    /* Seção Experiência */
    .experience-containers {
        flex-direction: column; /* Coloca Front-end e Back-end em colunas */
        gap: 1.5rem;
    }
    
    /* Seção Contato */
    #contact {
        min-height: 40vh;
    }

    .contact-info-container {
        margin: 0.5rem;
    }
}

/* Para telas muito pequenas (Celulares) */
@media screen and (max-width: 480px) {
    /* Geral */
    section {
        margin: 0 2%;
    }
    
    .title {
        font-size: 2rem;
    }
    
    /* Botões: 1 por linha para melhor toque */
    .btn-cont {
        flex-direction: column;
        gap: 0.5rem;
    }
    .btn {
        width: 80%;
        margin: 0 auto;
    }
    
    /* Seção Sobre: 1 cartão por linha */
    .details-card {
        flex-basis: 100%;
    }
}