/* ===================================
        RESPONSIVE
        responsive.css
=================================== */


/* ===================================
        HEADER
=================================== */


@media(max-width:1050px){

    .header-btn{
        display:none;
    }


    .mobile-calc{

        display:block;

        margin:40px 35px;

        padding:15px;

        background:#005bbb;

        color:#fff;

        text-align:center;

        border-radius:50px;

        font-weight:700;

        font-size:18px;

    }

}





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


@media(max-width:900px){


    section{

        padding:70px 0;

    }



    h2{

        font-size:34px;

    }



    /* ABOUT */

    .about .container{

        grid-template-columns:1fr;

        gap:40px;

    }



    .about-text h2{

        text-align:center;

    }



    /* CONTACTS */

    .contacts-wrapper{

        grid-template-columns:1fr;

    }



    .contact-card{

        order:1;

    }



    .map-wrapper{

        order:2;

        height:350px;

    }



    /* EQUIPMENT */

    .equipment-grid{

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

    }



    /* MODAL */

    .modal-content{

        grid-template-columns:1fr;

        max-height:90vh;

        overflow:auto;

    }



    .modal-content img{

        height:300px;

        min-height:250px;

    }


    .modal-info{

        padding:25px;

    }


    .stats .container{

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

    }


    .advantages-grid{

        grid-template-columns:1fr;

    }



}





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


@media(max-width:768px){



    .container{

        width:92%;

    }



    /* HEADER */


    header .container{

        height:75px;

    }



    .logo img{

        width:45px;

    }



    .logo h2{

        font-size:18px;

    }



    .burger{

        width:36px;

        height:28px;

    }



    .burger span{

        height:3px;

    }



    .burger span:nth-child(2){

        top:12px;

    }



    .burger span:nth-child(3){

        top:24px;

    }



    /* HERO */

    .hero{

        height:90vh;

    }


    .caption{

        width:90%;

    }



    .caption h1,
    .caption h2{

        font-size:38px;

    }



    .caption p{

        font-size:18px;

    }



    .prev,
    .next{

        font-size:30px;

    }


    .dots{

        bottom:25px;

    }


    .dot{

        width:11px;

        height:11px;

    }



    /* SERVICES */


    .cards{

        grid-template-columns:1fr;

    }



    /* EQUIPMENT */


    .equipment-grid{

        grid-template-columns:1fr;

    }



    /* PROJECTS */


    .gallery{

        grid-template-columns:1fr;

    }



    .project img{

        height:230px;

    }



    .project-info{

        transform:translateY(0);

        padding:18px;

        pointer-events:none;

        background:linear-gradient(
            to top,
            rgba(0,0,0,.88),
            rgba(0,0,0,.35)
        );

    }


    .project:hover img{

        transform:none;

    }



    /* CLIENTS */

    .clients{

        padding:70px 0;

    }


    .clients-grid{

        grid-template-columns:1fr;

    }



    .client-card{

        height:250px;

    }



    .client-logo{

        width:180px;

        height:120px;

    }


    .client-card h3{

        font-size:19px;

    }



    /* CERTIFICATES */

    .documents{

        padding:70px 0;

    }


    .documents-gallery{

        grid-template-columns:1fr;

    }



    .document-item img{

        height:250px;

    }



    /* CONTACT BUTTONS */


    .contact-buttons{

        flex-direction:column;

    }



    .route-btn,
    .call-btn{

        width:100%;

    }


    footer{

        padding:50px 0;

    }


    footer h2{

        font-size:26px;

    }


    footer p{

        font-size:15px;

    }



}


@media(max-width:500px){

    .contacts{

        padding:70px 0;

    }

    .contact-card{

        padding:25px;

    }

    .contact-buttons{

        flex-direction:column;

    }

    .route-btn,
    .call-btn{

        width:100%;

    }

    .map-wrapper{

        height:300px;

    }

}





/* ===================================
        SMALL PHONES
=================================== */


@media(max-width:450px){


    .container{

        width:94%;

    }



    header .logo h2{

        font-size:16px;

    }



    .logo img{

        width:40px;

    }



    .burger{

        width:32px;

    }



    /* убираем возможность налезания */

    header .btn{

        display:none!important;

    }



    nav{

        width:280px;

    }



    nav a{

        font-size:18px;

    }



    .caption h1,
    .caption h2{

        font-size:30px;

    }



    .caption p{

        font-size:16px;

    }



    h2{

        font-size:28px;

    }



    .contact-card{

        padding:20px;

    }



    .map-wrapper{

        height:280px;

    }



    .equipment-card{

        padding:25px;

    }



    .modal-info{

        padding:25px;

    }



}





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


@media(max-width:600px){

    .stats .container{

        grid-template-columns:1fr;

    }

    .stat .counter{

        font-size:45px;

    }

    .contact-form button{

        width:100%;

    }

    .services h2{

        font-size:32px;

    }

    .card{

        padding:35px 20px;

    }


    .lightbox-image{

        max-width:95%;

        max-height:80vh;

    }



    .lightbox-close{

        right:20px;

        top:15px;

        font-size:40px;

    }


}


/* ===================================
        END RESPONSIVE
=================================== */