/* ==========================================
   1200px
========================================== */

@media (max-width:1200px){

    h1{
        font-size:3.5rem;
    }

    .hero-container{
        gap:50px;
    }

    .profile-card{
        width:360px;
    }

}

/* ==========================================
   992px
========================================== */

@media (max-width:992px){

    section{
        padding:90px 0;
    }

    .hero{
        padding-top:140px;
    }

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-content{

        order:2;

    }

    .hero-image{

        order:1;

    }

    .hero p{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .profile-card{

        width:360px;

    }

    .badge{

        font-size:.8rem;

        padding:8px 14px;

    }

    /* ===== ABOUT ===== */

    .about-grid{

    grid-template-columns:1fr;

}

.about-cards{

    margin-top:20px;

}

.resume-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

}

/* ==========================================
   768px
========================================== */

@media (max-width:768px){

    .navbar{

        height:75px;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:42px;

        height:42px;

        font-size:1.6rem;

        color:var(--heading);

    }

    .nav-menu{

        position:absolute;

        top:75px;

        left:0;

        width:100%;

        background:white;

        flex-direction:column;

        gap:0;

        border-top:1px solid var(--border);

        box-shadow:0 15px 35px rgba(0,0,0,.08);

        max-height:0;

        overflow:hidden;

        transition:max-height .35s ease;

    }

    .nav-menu.active{

        max-height:420px;

    }

    .nav-menu li{

        border-bottom:1px solid #f2f2f2;

    }

    .nav-menu a{

        display:block;

        padding:18px 8%;

    }

    .navbar>.btn{

        display:none;

    }

    .hero{

        padding-top:120px;

    }

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.2rem;

    }

    .profile-card{

        width:320px;

    }

}

/* ==========================================
   576px
========================================== */

@media (max-width:576px){

    .container{

        width:92%;

    }

    section{

        padding:80px 0;

    }

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:2rem;

    }

    p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-stats{

        flex-direction:column;

        gap:25px;

    }

    .profile-card{

        width:280px;

        border-radius:22px;

    }

    .badge{

        transform:scale(.9);

    }

    .about-cards{

    grid-template-columns:1fr;

}

.about-highlights{

    justify-content:center;

    text-align:center;

}

.footer-container{

    flex-direction:column;

    text-align:center;

}

.modal-actions{

    flex-direction:column;

}

.gallery-grid{

    grid-template-columns:1fr;

}

}

/* ==========================================
   420px
========================================== */

@media (max-width:420px){

    .logo-text{

        display:none;

    }

    h1{

        font-size:2rem;

    }

    .profile-card{

        width:240px;

    }

    .badge{

        font-size:.72rem;

        padding:6px 10px;

    }

    .badge-1{

        left:-12%;

    }

    .badge-2{

        right:-15%;

    }

    .badge-3{

        left:-14%;

    }

    .badge-4{

        right:-14%;

    }

}