/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width:1400px){

    .container{

        width:90%;

    }

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    .hero-content{

        max-width:680px;

    }

    .section-title .line{

        width:180px;

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    /* Hide side links */

    .hero-social,
    .hero-email{

        display:none;

    }

    /* Navigation */

    .nav-menu{

        position:fixed;

        top:80px;

        right:-100%;

        width:300px;

        height:calc(100vh - 80px);

        background:var(--surface-color);

        flex-direction:column;

        justify-content:flex-start;

        align-items:flex-start;

        padding:50px 40px;

        gap:30px;

        transition:.35s;

        border-left:1px solid rgba(255,255,255,.08);

    }

    .nav-menu.active{

        right:0;

    }

    .btn-outline{

        display:none;

    }

    .hamburger{

        display:block;

    }

    /* About */

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-card{

        max-width:550px;

        margin:auto;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    section{

        padding:90px 0;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-content h1{

        font-size:3rem;

    }

    .hero-content h2{

        font-size:2rem;

    }

    .hero-description{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .btn{

        width:220px;

    }

    .section-title{

        flex-wrap:wrap;

        gap:12px;

    }

    .section-title .line{

        display:none;

    }

    .skills-list{

        grid-template-columns:1fr;

    }

    .about-card{

        grid-template-columns:1fr 1fr;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .container{

        width:92%;

    }

    .navbar{

        height:70px;

    }

    .logo{

        font-size:24px;

    }

    .hero-intro{

        font-size:14px;

    }

    .hero-content h1{

        font-size:2.5rem;

    }

    .hero-content h2{

        font-size:1.7rem;

    }

    .hero-description{

        font-size:15px;

    }

    .btn{

        width:100%;

    }

    .about-card{

        grid-template-columns:1fr;

    }

    .stat{

        padding:25px;

    }

    .stat h3{

        font-size:1.8rem;

    }

    footer{

        text-align:center;

        font-size:14px;

    }

}

/* Timeline */

@media(max-width:768px){

    .timeline{

        padding-left:25px;

    }

    .timeline-item{

        flex-direction:column;

        gap:15px;

    }

    .timeline-date{

        min-width:100%;

    }

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

    .project-card{

        padding:25px;

    }

}

@media(max-width:992px){

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .services-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contact-box{

        padding:40px 25px;

    }

    .contact-buttons{

        flex-direction:column;

    }

    .contact-buttons .btn{

        width:100%;

    }

    .footer-social{

        flex-wrap:wrap;

        gap:15px;

    }

}