/* ===========================
   MOBILE (до 768px)
=========================== */

@media (max-width:768px){

.container{
    padding:0 16px;
    .bottom-buttons{
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:18px;
}

.mini-btn{
    flex:1;
    max-width:150px;
    height:44px;
}
}

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

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
}

.header__wrapper{
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.header__wrapper > .nav,
.header__wrapper > .phone,
.header__wrapper > .header__socials,
.burger{
    display:none !important;
}

.logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.logo span{
    font-size:24px;
}

.logo small{
    font-size:10px;
    letter-spacing:4px;
}
/* ===========================
   HERO
=========================== */

.hero{
    padding:90px 0 50px;
    min-height:auto;
}

.hero__wrapper{
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    text-align:center;
    gap:32px;
}

.hero__content{
    width:100%;
    max-width:100%;
}

.hero h1{
    font-size:34px;
    line-height:1.2;
}

.hero p{
    font-size:16px;
    line-height:1.7;
    margin:20px 0 30px;
}

.hero__image{
    width:100%;
    max-width:320px;
    margin:0 auto;
}

.hero__image img{
    width:100%;
    height:auto;
    display:block;
}

.hero__buttons{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.btn{
    width:100%;
    min-height:54px;
}
/* ===========================
   SERVICES
=========================== */

.services{
    padding:60px 0;
}

.section-title h2{
    font-size:30px;
}

.services__grid{
    grid-template-columns:1fr;
    gap:20px;
}
/* Картинки в "Мои услуги" меньше только на телефоне */
.services .service-card img{
    width:200px;
    height:200px;
    object-fit:contain;
    display:block;
    margin:18px auto 10px;
}

.services .service-card__img-sm{
    width:400px;
    height:400px;
}
/* ===========================
   WORKS
=========================== */

.works{
    padding:60px 0;
}

.works__arrow{
    display:none;
}

.works__grid{
    display:flex;
    gap:16px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
}

.works__grid::-webkit-scrollbar{
    display:none;
}

.works__grid .service-card{
    flex:0 0 88%;
    scroll-snap-align:start;
}
/* ===========================
   ABOUT
=========================== */

.about{
    padding:70px 0;
}

.about__content{
    text-align:center;
}

.about__stats{
    display:flex;
    flex-direction:column;
    gap:20px;
}
/* ===========================
   FOOTER
=========================== */

.footer__copy{
    text-align:center;
}

.vk-float{
    right:15px;
    bottom:20px;
}

.vk-label{
    display:none;
}

/* ===== Цены на мобильной версии ===== */

.modal{
    width:90%;
    max-width:520px;
    padding:40px 24px;
    border-radius:20px;
}

.modal__title{
    font-size:28px;
}

.modal__row{
    padding:14px 18px;
}

.modal__service{
    font-size:16px;
}

.modal__price{
    font-size:18px;
}

}