/* ==================================================
   DESKTOP
================================================== */

@media(max-width:1200px){
   .container{
        width:min(calc(100% - 3rem),1100px);
    }

}

/* ==================================================
   NOTEBOOK
================================================== */

@media (max-width:992px){

    .about .container{
        grid-template-columns:1fr;
    }

    .contact .container{
        grid-template-columns:1fr;
    }

    .footer .container{
        grid-template-columns:1fr 1fr;
    }

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

    .mission-grid{
        grid-template-columns:1fr;
    }

    .advantages-grid{
        grid-template-columns:1fr;
    }
    .stats-grid{

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

    }
    .portfolio-grid{

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

    }
    .project-modal-image{

        height:360px;

    }

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

@media (max-width:768px){

    section{
        padding:5rem 0;
    }

    .hero{
        min-height:auto;
        padding-top:9rem;
        padding-bottom:5rem;
    }

    .hero-title{
        font-size:3rem;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .button{
        width:100%;
    }
   .project-modal-body{
        grid-template-columns:1fr;
        padding:1.5rem;
    }
    .project-modal-image{
        width:100%;
        height:100%;
        object-fit:contain;
    }
    .project-modal-close{
        top:12px;
        right:12px;
        width:38px;
        height:38px;
    }

    .project-modal-panel{
        width:min(100%,95vw);
        border-radius:20px;
    }
    .project-modal-viewer{

        aspect-ratio:16 / 14;

    }

}

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

@media (max-width:576px){

    .projects-grid{
        grid-template-columns:1fr;
    }

    .footer .container{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .header{
        height:80px;
    }

    .header-logo img{
        height:70px;
    }
     .stats-grid{
        grid-template-columns:1fr;
    }

    .stat-card{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.08);
    }
    .stat-card:last-child{
        border-bottom:none;
    }
    .project-modal-content{
        gap:1rem;
    }


}

@media (max-width:400px){

    .hero-title{
        font-size:2.4rem;
    }

    .section-title{
        font-size:2rem;
    }

    .navigation-drawer-panel{
        width:100%;
    }

}

@media(max-width:480px){

}