/* =====================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
===================================== */

@media screen and (max-width: 768px){

html,
body{
    overflow-x:hidden;
    width:100%;
}

/* ---------- ШАПКА ---------- */

.header{
    position:absolute;
    top:0;
    left:0;

    width:100%;

    padding:20px 15px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.logo{
    font-size:24px;
    text-align:center;
}

nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

nav a{
    font-size:14px;
}

/* ---------- ПЕРВЫЙ ЭКРАН ---------- */

.hero{
    min-height:100vh;
    padding:220px 20px 70px;
}

.hero-content{
    margin:0;
    max-width:100%;
    text-align:center;
}

.hero h1{
    font-size:26px;
    line-height:1.35;
    text-align:center;
    max-width:340px;
    margin:0 auto;
}

.hero p{
    font-size:15px;
    max-width:320px;
    margin:18px auto 0;
}

.button{
    display:inline-block;
    margin-top:30px;
    width:100%;
    max-width:320px;
}

/* ---------- ОБЩИЕ ---------- */

section{
    padding:70px 20px;
}

h2{
    font-size:30px;
}

/* ---------- КАРТОЧКИ ---------- */

.services-container,
.advantages-container{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}

.service-card,
.advantage-card{
    width:100%;
}

/* ---------- ГАЛЕРЕЯ ---------- */

.gallery-wrapper{
    padding:0;
}

.gallery-grid{
    gap:15px;
}

.gallery-grid .work-card{
    min-width:88%;
}

.gallery-arrow{
    display:none;
}

/* ---------- О КОМПАНИИ ---------- */

.about-content{
    display:flex;
    flex-direction:column;
    gap:35px;
}

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

/* ---------- КОНТАКТЫ ---------- */

.contacts-wrapper{
    display:flex;
    flex-direction:column;
    gap:35px;
}

.contacts-info{
    width:100%;
    padding:30px 20px;
}

.contacts-process{
    text-align:center;
}

.contact-feature{
    align-items:center;
}

/* ---------- МОДАЛЬНОЕ ОКНО ---------- */

.modal-content{
    width:95%;
    padding:15px;
}

.modal-info{
    padding:20px;
}

.modal-info h2{
    font-size:24px;
}

.modal-info p{
    font-size:16px;
}

.project-thumbnails img{
    width:70px;
    height:55px;
}

.prev,
.next{
    width:35px;
    height:35px;
}

/* ---------- ИЗОБРАЖЕНИЯ ---------- */

img{
    max-width:100%;
    height:auto;
}

}
@media screen and (max-width:768px){

.header{
    position: relative !important;
    display: block !important;
    padding: 15px !important;
    text-align: center !important;
}

.logo{
    display:block;
    margin-bottom:15px;
    font-size:24px;
}

nav{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:8px 12px !important;
}

.hero{
    padding-top:40px !important;
}

.hero h1{
    font-size:24px !important;
}

}