/* ==========================
   Tablet (992px)
========================== */

@media (max-width:992px){

    header,
    .site-header{
        width:95%;
        top:15px;
    }

    .navbar{
        flex-direction:column;
        gap:20px;
        padding:20px;
    }

    .nav-links{
        justify-content:center;
        flex-wrap:wrap;
        gap:22px;
    }

    .hero{
        padding:170px 30px 90px;
        min-height:90vh;
    }

    .hero h1,
    .hero h2{
        font-size:52px;
    }

    .hero-label{
        font-size:12px;
    }

    .role{
        font-size:18px;
    }

    .quote{
        font-size:16px;
        max-width:650px;
    }

    .avatar{
        width:170px;
        height:170px;
    }

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

    .project-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .skills-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .setup-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .contact-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .timeline-item{
        margin-left:40px;
    }

    .section{
        padding:90px 30px;
    }

    .section h2{
        font-size:38px;
    }

}

/* ==========================
   Mobile (768px)
========================== */

@media (max-width:768px){

    header,
    .site-header{
        width:95%;
        top:10px;
    }

    .navbar{
        flex-direction:column;
        gap:18px;
        padding:18px;
    }

    .nav-links{
        justify-content:center;
        flex-wrap:wrap;
        gap:16px;
    }

    .logo{
        font-size:28px;
    }

    .hero{
        min-height:auto;
        padding:170px 24px 80px;
    }

    .hero h1,
    .hero h2{
        font-size:42px;
    }

    .hero-label{
        font-size:12px;
    }

    .role{
        font-size:17px;
    }

    .quote{
        font-size:15px;
    }

    .avatar{
        width:150px;
        height:150px;
    }

    .buttons{
        flex-direction:column;
        align-items:center;
        width:100%;
    }

    .btn{
        width:100%;
        max-width:280px;
    }

    .project-grid,
    .skills-grid,
    .setup-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .card img{
        height:200px;
    }

    .project-buttons{
        flex-direction:column;
    }

    .project-buttons a{
        width:100%;
    }

    .timeline::before{
        left:10px;
    }

    .timeline-item{
        margin-left:28px;
        padding:24px;
    }

    .timeline-item::before{
        left:-34px;
    }

    .footer-content{
        flex-direction:column;
        text-align:center;
    }

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

    .section{
        padding:80px 24px;
    }

    .section h2{
        font-size:34px;
    }

}

/* ==========================
   Small Phones (480px)
========================== */

@media (max-width:480px){

    .logo{
        font-size:24px;
    }

    .hero{
        padding:160px 20px 70px;
    }

    .hero h1,
    .hero h2{
        font-size:32px;
    }

    .role{
        font-size:15px;
    }

    .quote{
        font-size:14px;
    }

    .avatar{
        width:125px;
        height:125px;
    }

    .btn{
        width:100%;
    }

    .card-content,
    .skill,
    .setup-item,
    .contact-card{
        padding:22px;
    }

    .content-box{
        padding:22px;
    }

    .timeline-item{
        padding:20px;
    }

    .footer-links{
        flex-direction:column;
        gap:12px;
    }

}