/* ===========================================
   RESPONSIVE.CSS
   Ajustes finais para Tablet e Celular
=========================================== */

/* TABLETS */
@media (max-width: 992px){

    .container{
        width:95%;
    }

    .navbar{
        padding:0 20px;
    }

    .hero{
        gap:50px;
    }

    .photo{
        width:300px;
        height:300px;
    }

    .projects-grid,
    .cards,
    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

}

/* CELULARES */
@media (max-width:768px){

    section{
        padding:80px 0;
    }

    .container{
        width:92%;
    }

    .navbar{
        height:70px;
        padding:0 15px;
    }

    .logo img{
        width:50px;
    }

    .hero{
        display:flex;
        flex-direction:column-reverse;
        text-align:center;
        gap:35px;
    }

    .hero-text{
        align-items:center;
    }

    .hero-text h1{
        font-size:2.4rem;
        line-height:1.1;
    }

    .hero-text h2{
        font-size:1.4rem;
    }

    .hero-text p{
        font-size:1rem;
        max-width:100%;
    }

    .hero-buttons{
        width:100%;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
    }

    .photo{
        width:240px;
        height:240px;
    }

    .tech{
        width:100%;
        justify-content:center;
        font-size:.9rem;
    }

    .section-title h2{
        font-size:2rem;
    }

    .section-title p{
        font-size:.95rem;
    }

    .about-card,
    .card,
    .project-card,
    .contact-card{
        padding:22px;
    }

    .project-card h3{
        font-size:1.4rem;
    }

    .contact-card h3{
        font-size:1.3rem;
    }

    .footer-content h3{
        font-size:1.8rem;
    }

    .footer-social{
        gap:12px;
    }

    .footer-social a{
        width:48px;
        height:48px;
    }

    .back-top{
        width:45px;
        height:45px;
        right:15px;
        bottom:15px;
    }

}

/* CELULARES PEQUENOS */
@media (max-width:480px){

    .hero-text h1{
        font-size:2rem;
    }

    .hero-text h2{
        font-size:1.2rem;
    }

    .photo{
        width:200px;
        height:200px;
    }

    .tech{
        padding:10px 14px;
        font-size:.8rem;
    }

    .project-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }

    .section-title h2{
        font-size:1.8rem;
    }

}