/* ==========================
   LAPTOPS
========================== */

@media (max-width:1200px){

    .hero h1{
        font-size:8rem;
    }

    .project{
        gap:4rem;
    }

}

/* ==========================
   TABLETS
========================== */

@media (max-width:992px){

    .section{
        padding:6rem 6%;
    }

    .navbar{
        padding:1.2rem 6%;
    }

    .about-container{
        grid-template-columns:1fr;
    }

    .about-left img{
        height:500px;
    }

    .project{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .project.reverse .project-image,
    .project.reverse .project-content{
        order:unset;
    }

    .project-image img{
        height:450px;
    }

    .tech-grid{
        grid-template-columns:1fr;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

}
@media (max-width:768px){

    .navbar{
        flex-direction:column;
        gap:1rem;
    }

    nav ul{
        flex-wrap:wrap;
        justify-content:center;
    }

}
@media (max-width:768px){

    .hero{
        min-height:100vh;
        text-align:center;
        justify-content:center;
    }

    .hero-content{
        max-width:100%;
    }

    .hero h1{

        font-size:clamp(4rem,15vw,6rem);

        letter-spacing:-3px;
    }

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

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

}
@media (max-width:768px){

    .about-highlights{
        grid-template-columns:1fr;
    }

    .highlight-card{
        text-align:center;
    }

}
@media (max-width:768px){

    .project{
        margin-bottom:6rem;
    }

    .project-content h3{

        font-size:clamp(3rem,14vw,5rem);

        letter-spacing:-3px;
    }

    .project-links{
        flex-direction:column;
        gap:1rem;
    }

}
@media (max-width:768px){

    .contact-header{
        text-align:center;
    }

    .contact-header h2{
        font-size:3rem;
    }

    .contact-card{
        flex-direction:column;
        gap:1rem;
    }

}
@media (max-width:768px){

    .footer-top{
        flex-direction:column;
        gap:2rem;
    }

    .footer-bottom{
        flex-direction:column;
        gap:1.5rem;
        text-align:center;
    }

    .footer-socials{
        flex-wrap:wrap;
        justify-content:center;
    }

    .footer-nav{
        width:100%;
    }

}