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

/* ---------- Large Tablets ---------- */

@media (max-width:1200px){

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-description{

        margin:0 auto 40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-info{

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

    }

}

/* ---------- Tablets ---------- */

@media (max-width:992px){

    section{

        padding:80px 0;

    }

    h1{

        font-size:3.2rem;

    }

    h2{

        font-size:2.3rem;

    }

    .navbar{

        height:75px;

    }

    .nav-menu{

        display:none;

    }

    .hamburger{

        display:flex;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .skills-grid{

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

    }

    .projects-grid{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    body{

        font-size:15px;

    }

    section{

        padding:70px 0;

    }

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.25rem;

    }

    .container{

        width:92%;

    }

    .hero{

        padding-top:120px;

    }

    .hero-container{

        gap:40px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-description{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-info{

        grid-template-columns:1fr;

    }

    .profile-card{

        width:280px;

        height:280px;

    }

    .skills-grid{

        grid-template-columns:1fr;

    }

    .projects-grid{

        grid-template-columns:1fr;

    }

    .project-links{

        flex-direction:column;

    }

    .project-links .btn{

        width:100%;

    }

    .footer-links{

        flex-direction:column;

        gap:15px;

    }

    .social-links{

        justify-content:center;

    }

}

/* ---------- Small Phones ---------- */

@media (max-width:480px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.8rem;

    }

    .hero-badge{

        font-size:.8rem;

        padding:8px 14px;

    }

    .profile-card{

        width:230px;

        height:230px;

    }

    .btn{

        padding:14px 20px;

        font-size:.95rem;

    }

    .about-card,
    .skill-card,
    .project-card,
    .contact-card,
    .resume-card,
    .certification-card{

        padding:22px;

    }

}