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

@media (max-width:1200px){

    .hero{

        width:92%;
        gap:50px;

    }

    .left h1{

        font-size:60px;

    }

    .profile-card{

        width:360px;
        height:360px;

    }

    .profile-card img{

        width:300px;
        height:300px;

    }

    .glow-ring{

        width:340px;
        height:340px;

    }

}

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

@media (max-width:992px){

    nav{

        width:94%;
        padding:16px 22px;

    }

    nav ul{

        gap:20px;

    }

    .hero{

        grid-template-columns:1fr;
        text-align:center;
        padding-top:140px;
        gap:60px;

    }

    .left{

        order:2;

    }

    .right{

        order:1;

    }

    .buttons{

        justify-content:center;

    }

    .terminal{

        margin:auto;

    }

    .left p{

        margin:auto;
        margin-top:25px;

    }

    .profile-card{

        width:320px;
        height:320px;

    }

    .profile-card img{

        width:260px;
        height:260px;

    }

    .glow-ring{

        width:300px;
        height:300px;

    }

    .tag1{

        top:160px;
        right:40px;

    }

    .tag2{

        top:450px;
        right:20px;

    }

    .tag3{

        left:40px;
        bottom:180px;

    }

    .tag4{

        left:30px;
        top:180px;

    }

    .tag5{

        right:100px;
        bottom:260px;

    }

}

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

@media (max-width:768px){

    nav{

        flex-direction:column;
        gap:20px;

    }

    nav ul{

        flex-wrap:wrap;
        justify-content:center;
        gap:15px;

    }

    .hero{

        min-height:auto;
        padding-top:180px;
        padding-bottom:80px;

    }

    .left h1{

        font-size:44px;

    }

    .left p{

        font-size:16px;
        line-height:1.8;

    }

    .buttons{

        flex-direction:column;
        align-items:center;

    }

    .btn1,
    .btn2{

        width:220px;
        text-align:center;

    }

    .terminal{

        width:100%;

    }

    .terminal-body{

        font-size:16px;

    }

    .profile-card{

        width:260px;
        height:260px;

    }

    .profile-card img{

        width:220px;
        height:220px;

    }

    .glow-ring{

        width:250px;
        height:250px;

    }

    .floating{

        display:none;

    }

    .section-title{

        font-size:34px;

    }

    .glass{

        width:92%;
        padding:30px 25px;

    }

    .skills-grid{

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

    }

    .skill-card{

        padding:24px 15px;

    }

    .project-grid{

        width:92%;
        grid-template-columns:1fr;

    }

    .project-card{

        padding:28px;

    }

    .contact-card{

        width:92%;

    }

}

/* ==========================
   SMALL PHONES
========================== */

@media (max-width:480px){

    .logo{

        font-size:24px;

    }

    nav{

        border-radius:15px;

    }

    nav ul{

        font-size:14px;

    }

    .resume-btn{

        padding:10px 20px;

    }

    .left h1{

        font-size:36px;

    }

    .left p{

        font-size:15px;

    }

    .profile-card{

        width:220px;
        height:220px;

    }

    .profile-card img{

        width:180px;
        height:180px;

    }

    .glow-ring{

        width:210px;
        height:210px;

    }

    .skills-grid{

        grid-template-columns:1fr;

    }

    .section-title{

        font-size:30px;

    }

    .glass{

        padding:25px 20px;

    }

    .project-card{

        padding:24px;

    }

    .contact-card input,
    .contact-card textarea{

        padding:15px;

    }

    footer{

        padding:35px 15px;

        font-size:14px;

    }

}