/* ======================================
   TABLET (1024px)
====================================== */

@media (max-width:1024px){

    .hero{
        gap:30px;
    }

    .hero-content h1{
        font-size:45px;
    }

    .about-preview{
        gap:40px;
    }

    .hobby-container{
        grid-template-columns:repeat(2,1fr);
    }

}


/* ======================================
   TABLET (768px)
====================================== */

@media (max-width:768px){

    /* Navbar */

    .navbar{
        width:92%;
        padding:15px 0;
    }

    .menu-toggle{
        display:block;
    }

    .nav-links{
        position:absolute;
        top:75px;
        left:0;
        width:100%;
        background:#0f2d52;

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

        max-height:0;
        overflow:hidden;

        transition:0.4s;
    }

    .nav-links.active{
        max-height:350px;
        padding:20px 0;
    }

    .nav-links li{
        margin:18px 0;
    }

    /* Hero */

    .hero{

        flex-direction:column-reverse;
        text-align:center;

        min-height:auto;
        padding-top:40px;

    }

    .hero-content h1{
        font-size:38px;
    }

    .hero-content p{
        font-size:16px;
    }

    .hero-image img{
        max-width:420px;
    }

    /* About */

    .about-preview{

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

    }

    .about-image img{
        max-width:300px;
    }

    /* Hobby */

    .hobby-container{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    section{
        padding:70px 8%;
    }

}


/* ======================================
   MOBILE (576px)
====================================== */

@media (max-width:576px){

    .logo{
        font-size:20px;
    }

    .hero-content h1{
        font-size:30px;
    }

    .hero-content p{
        font-size:15px;
    }

    .btn{

        padding:12px 28px;
        font-size:15px;

    }

    .welcome h2,
    .about-text h2,
    .hobbies h2,
    .cta h2{

        font-size:30px;

    }

    .welcome p,
    .about-text p,
    .cta p{

        font-size:15px;

    }

    .hobby-container{

        grid-template-columns:1fr;

    }

    .hero-image img{

        max-width:100%;

    }

    .about-image img{

        max-width:260px;

    }

}


/* ======================================
   SMALL MOBILE (400px)
====================================== */

@media (max-width:400px){

    .hero-content h1{

        font-size:26px;

    }

    .logo{

        font-size:18px;

    }

    .cta h2{

        font-size:24px;

    }

    footer{

        font-size:14px;

    }

}

/* ==========================================
   ACHIEVEMENTS PAGE RESPONSIVE
========================================== */

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

@media (max-width:1024px){

    .achievement-stats{

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

    }

    .featured-card{

        gap:30px;

    }

}


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

@media (max-width:768px){

    .achievement-hero{

        padding:80px 8%;

    }

    .achievement-hero h1{

        font-size:38px;

    }

    .achievement-hero p{

        font-size:16px;

    }

    .achievement-stats{

        grid-template-columns:1fr 1fr;

        gap:20px;

    }

    .featured-card{

        flex-direction:column;

        text-align:center;

    }

    .featured-text ul{

        list-style:none;

        padding:0;

    }

    .featured-image img{

        max-width:500px;

    }

    .certificate-grid{

        grid-template-columns:1fr;

    }

    /* Timeline */

    .timeline-container::before{

        left:20px;

    }

    .timeline-item{

        width:100%;

        left:0 !important;

        text-align:left;

        padding-left:60px;

        padding-right:20px;

    }

    .timeline-item::before{

        left:11px !important;

        right:auto;

    }

}


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

@media (max-width:576px){

    .achievement-hero{

        padding:70px 7%;

    }

    .achievement-hero h1{

        font-size:30px;

    }

    .achievement-hero p{

        font-size:15px;

    }

    .achievement-stats{

        grid-template-columns:1fr;

    }

    .stat-box{

        padding:25px;

    }

    .stat-box h2{

        font-size:34px;

    }

    .featured h2,

    .certificates h2,

    .timeline h2{

        font-size:30px;

    }

    .featured-text h3{

        font-size:24px;

    }

    .featured-text p,

    .certificate-card p,

    .timeline-content p{

        font-size:15px;

    }

    .certificate-card img{

        height:220px;

    }

}


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

@media (max-width:400px){

    .achievement-hero h1{

        font-size:26px;

    }

    .featured{

        padding:60px 6%;

    }

    .certificates{

        padding:60px 6%;

    }

    .timeline{

        padding:60px 6%;

    }

    .featured-card{

        padding:20px;

    }

    .timeline-content{

        padding:20px;

    }

}