/* ==========================================
   RESPONSIVE DESIGN
========================================== */


/* ==========================================
   LARGE TABLETS / SMALL LAPTOPS
========================================== */

@media(max-width:1200px){


    section{

        padding:100px 6%;

    }


    .hero{

        gap:40px;

    }


    .hero h1{

        font-size:55px;

    }


    .profile-card{

        width:380px;

        height:380px;

    }


    .projects-grid{

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

    }


    .skills-grid{

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

    }


}



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

@media(max-width:992px){


    .navbar{

        padding:0 5%;

    }


    .nav-links{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:rgba(15,23,42,.95);

        backdrop-filter:blur(20px);

        flex-direction:column;

        align-items:center;

        padding:30px 0;

        gap:25px;

        transform:translateY(-150%);

        transition:.4s;

    }


    .nav-links.active{

        transform:translateY(0);

    }


    .menu-btn{

        display:block;

    }


    .hero{

        grid-template-columns:1fr;

        text-align:center;

        padding-top:150px;

    }


    .hero-left{

        display:flex;

        flex-direction:column;

        align-items:center;

    }


    .hero-text{

        max-width:700px;

    }


    .hero-buttons{

        justify-content:center;

    }


    .social-icons{

        justify-content:center;

    }


    .hero-right{

        order:-1;

    }


    .profile-card{

        width:330px;

        height:330px;

    }



    .about-container{

        grid-template-columns:1fr;

        text-align:center;

    }


    .about-image{

        width:300px;

        margin:auto;

    }


    .stats{

        justify-content:center;

        flex-wrap:wrap;

    }


    .timeline::before{

        left:20px;

    }


    .timeline-item,
    .timeline-item:nth-child(even){

        width:90%;

        margin-left:60px;

    }


    .timeline-item::before,
    .timeline-item:nth-child(even)::before{

        left:-50px;

    }


}



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

@media(max-width:768px){


    section{

        padding:80px 5%;

    }


    .section-title h2{

        font-size:32px;

    }


    .logo{

        font-size:25px;

    }


    .hero h1{

        font-size:42px;

    }


    .hero h2{

        font-size:25px;

    }


    .hero-text{

        font-size:14px;

        line-height:1.8;

    }


    .hero-buttons{

        flex-direction:column;

        width:100%;

    }


    .hero-buttons .btn{

        width:100%;

    }


    .profile-card{

        width:280px;

        height:280px;

    }


    .stats{

        flex-direction:column;

        align-items:center;

    }


    .stat{

        width:200px;

    }


    .skills-grid{

        grid-template-columns:1fr;

    }


    .projects-grid{

        grid-template-columns:1fr;

    }


    .project-card img{

        height:200px;

    }


    .project-filter{

        gap:10px;

    }


    .project-filter button{

        padding:10px 18px;

        font-size:13px;

    }


    .timeline-item{

        padding:22px;

    }


    .contact-container{

        width:100%;

    }


}



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

@media(max-width:480px){


    .navbar{

        height:70px;

    }


    .nav-links{

        top:70px;

    }


    .hero h1{

        font-size:35px;

    }


    .hero h2{

        font-size:22px;

    }


    .welcome{

        font-size:15px;

    }


    .profile-card{

        width:240px;

        height:240px;

    }


    .about-content h3{

        font-size:25px;

    }


    .section-title{

        margin-bottom:45px;

    }


    .section-title h2{

        font-size:28px;

    }


    .timeline-item,
    .timeline-item:nth-child(even){

        width:85%;

        margin-left:45px;

    }


    .timeline::before{

        left:10px;

    }


    .timeline-item::before,
    .timeline-item:nth-child(even)::before{

        left:-45px;

    }


    footer{

        padding:40px 5%;

    }


}



/* ==========================================
   LANDSCAPE PHONES
========================================== */

@media(max-height:500px) and (orientation:landscape){


    .hero{

        min-height:auto;

        padding-top:120px;

        padding-bottom:50px;

    }


}