/*
=========================================
Tablet
=========================================
*/

@media(max-width:900px){

    nav{

        gap:20px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero p{

        margin-inline:auto;

    }

    .hero-image{

        margin-top:48px;

        min-height:320px;

    }

    .stats-grid,
    .core-grid,
    .why-grid,
    .updates-grid{

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

    }

    .about-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:800px){

    .project-grid,
    .projects-grid{

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

    }

}

/*
=========================================
Mobile
=========================================
*/

@media(max-width:700px){

    .header .container{

        flex-direction:column;

        height:auto;

        padding:20px 0;

    }

    nav{

        margin-top:20px;

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero{

        padding:72px 0;

    }

    .hero h1{

        font-size:clamp(2.2rem,11vw,2.9rem);

    }

    .section-header{

        margin-bottom:40px;

    }

    .section-header h2{

        font-size:clamp(1.8rem,7vw,2.3rem);

    }

    .stats-grid,
    .project-grid,
    .projects-grid,
    .core-grid,
    .why-grid,
    .updates-grid{

        grid-template-columns:1fr;

    }

    .project-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .project-card,
    .stat,
    .about-card,
    .core-card,
    .why-card,
    .update-card,
    details,
    .timeline-content{

        padding:24px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

        max-width:320px;

        margin:0 auto;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .tech-list{

        justify-content:center;

    }

    .timeline{

        padding-left:22px;

    }

    .timeline-dot{

        left:-22px;

    }

    .faq-list details summary{

        word-break:break-word;

    }

}