/* ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ */

.container {
    max-width: 100%; /* Максимальная ширина сайта */   
}


html, body {
    overflow-x: hidden; /* Запрет горизонтальной прокрутки */
}
body {
    max-width: 960px;
    margin: 0 auto; /* Центрирование сайта по горизонтали */
    font-family: "Wix Madefor Text", sans-serif; /* Шрифт для всего сайта */
    background-color: #f5f5f5; /* Цвет фона для всего сайта */
}


/* НАСТРОЙКА ЗАГОЛОВКОВ */

h1 {
    font-size: 40px; /* Размер шрифта для заголовка h1 */
    text-align: center; /* Центрирование заголовка */
    margin-bottom: 40px; /* Отступ снизу от заголовка */
}


/* НАСТРОЙКА ШАПКИ САЙТА */

.siteheader {  
    margin-top: 40px; /* Отступ сверху для шапки сайта */
    margin-bottom: 30px; /* Отступ снизу для шапки сайта */
    display: flex; /* Используем флексбокс для размещения элементов */
    justify-content: center; /* Центрируем элементы по горизонтали */
}

.logo {
    width:300px;
    height:200px;
    border-radius: 10px; /* Закругление углов логотипа */
    box-shadow: 0 10px 10px rgba(0,0,0,0.1); /* Тень для логотипа */
    border: 0.2px solid #919191; /* Контур вокруг логотипа */
}

.headerinfo {
    margin-top: 40px; /* Отступ сверху для информации в шапке */
    padding-left: 15%; /* Отступ слева для информации в шапке */
}

.headertext {
    font-size: 30px; /* Размер шрифта для контактной информации вверху */
    margin: 0; /* Убираем отступы */
}


/* НАСТРОЙКА МЕНЮ */

.menu {
    display: flex; /* Используем флексбокс для контейнера меню */
    justify-content: center; /* Центрируем элементы меню по горизонтали */
    width: 100%; /* Меню занимает всю ширину контейнера */
}

.menu ul {
    display: flex; /* Используем флексбокс для размещения элементов списка */
    padding: 0; /* Убираем отступы у списка */
    list-style-type: none; /* Убираем маркеры списка */
}

.menu li {
    background: #bf1111; /* Цвет фона для элементов меню */
    border-radius: 5px; /* Закругление углов для элементов меню */
    margin-right: 15px; /* Отступ между элементами меню */
    flex: 1; /* Устанавливаем одинаковую ширину для всех элементов меню */
    min-width: 200px; /* Минимальная ширина для элементов меню */
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2); /* Тень для элементов меню */
}

.menu li:last-child {
    margin-right: 0; /* Убираем отступ у последнего элемента меню */
}

.menu li:hover, .menu a:hover {
    background: #cd2626; /* Цвет фона при наведении на элемент меню или ссылку */
}

.menu li a {
    display: block; /* Ссылка занимает всю ячейку меню */
    padding: 8px 15px; /* Внутренние отступы для ссылок */
    color: #fff; /* Цвет текста ссылок */
    text-align: center; /* Центрируем текст внутри ссылок */
    font-size: 23px; /* Размер шрифта для текста ссылок */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    border-radius: 5px; /* Закругление углов для ссылок */
}


/* КАРТИНКА СО СЛОГАНОМ */

.mainimage {
    display: block; /* Элемент отображается как блочный элемент */
    margin-top: 20px; /* Отступ сверху для главного изображения */
    margin-bottom: 100px; /* Отступ снизу для главного изображения */
    max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
    border-radius: 10px; /* Закругление углов изображения */
    box-shadow: 0 30px 30px rgba(0,0,0,0.1); /* Тень для изображения */
    margin-left: auto; /* Центрируем изображение по горизонтали */
    margin-right: auto; /* Центрируем изображение по горизонтали */
}


/* ИНФОРМАЦИЯ О КОМПАНИИ */

#infocompany {
    font-size: 35px; /* Размер шрифта для информации о компании */
    text-align: justify; /* Выравнивание текста по ширине */
    justify-content: center; /* Центрируем содержимое */
    margin-bottom: 100px; /* Отступ снизу для информации о компании */
    
    display: flex; /* Используем флексбокс для размещения */
    margin-left: auto; /* Центрируем по горизонтали */
    margin-right: auto; /* Центрируем по горизонтали */
}


/* ЛОГОТИПЫ КОМПАНИЙ КЛИЕНТОВ */

.companylogos-container {
    margin-top: 100px; /* Отступ сверху для контейнера логотипов */
    margin-bottom: 80px; /* Отступ снизу для контейнера логотипов */
    display: flex; /* Используем флексбокс для размещения */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Выравниваем по вертикали */
    gap: 5%; /* Отступы между логотипами */
    flex-wrap: wrap; /* Позволяем элементам переноситься на следующую строку */

}

.companylogos {
    display: flex; /* Используем флексбокс для размещения логотипов */
    align-items: center; /* Центрируем изображения внутри блока */
}

.companylogos img {
    max-height: 170px; /* Ограничение максимальной высоты логотипов */
    object-fit: contain; /* Сохранение пропорций изображений */
    max-width: 100%; /* Адаптивный размер изображений */
    flex: 1 0 150px; /* Элементы займут равное пространство и будут минимально 150px в ширину */
    margin-bottom: 30px; /* Отступ снизу для создания пространства между рядами */
    border-radius: 10px; /* Закругление углов логотипа */
    box-shadow: 0 10px 10px rgba(0,0,0,0.1); /* Тень для логотипа */
    border: 0.2px solid #919191; /* Контур вокруг логотипа */
}




/* КАРТИНКИ С УСЛУГАМИ */

.servicesimage-container {
    margin-bottom: 100px; /* Отступ снизу для контейнера с изображениями услуг */
}

.servicesimage {
    display: block; /* Элемент отображается как блочный элемент */
    margin-top: 100px; /* Отступ сверху для изображений услуг */
    max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
    border-radius: 10px; /* Закругление углов изображений услуг */
    box-shadow: 0 30px 30px rgba(0,0,0,0.1); /* Тень для изображений услуг */
    margin-left: auto; /* Центрируем изображения по горизонтали */
    margin-right: auto; /* Центрируем изображения по горизонтали */
}


/* КОНТАКТНАЯ ИНФОРМАЦИЯ СНИЗУ */

#contacts {
    font-size: 35px; /* Размер шрифта для контактной информации */ 
    list-style-type: none; /* Убираем маркеры у списка контактной информации */
    margin-bottom: 350px; /* Отступ снизу для контактной информации */ 
    padding: 20px;  
}

.contacts li {
    margin-bottom: 50px; /* Отступ снизу для каждого элемента контактной информации */
    display: flex; /* Используем флексбокс для размещения элементов */
    margin-left: auto; /* Центрируем по горизонтали */
    margin-right: auto; /* Центрируем по горизонтали */
}


/* НАСТРОЙКА КНОПКИ "ВВЕРХ" */

.back-to-top {
    position: fixed; /* Фиксированное положение кнопки на экране */
    bottom: 100px; /* Отступ снизу от края экрана */
    right: 100px; /* Отступ справа от края экрана */
    display: none; /* Скрываем кнопку по умолчанию */
    font-size: 50px; /* Размер шрифта для текста кнопки */
    color: #fff; /* Цвет текста кнопки */
    background: #000000; /* Цвет фона кнопки */
    padding: 5px 10px; /* Внутренние отступы для кнопки */
    border-radius: 5px; /* Закругление углов кнопки */
    cursor: pointer; /* Указываем, что элемент является кликабельным */
    z-index: 1000; /* Уровень отображения кнопки */
    text-decoration: none; /* Убираем подчеркивание у текста кнопки */
}

.back-to-top:hover {
    background: #333; /* Цвет фона кнопки при наведении */
    text-decoration: none; /* Убираем подчеркивание при наведении */
}

/* АДАПТАЦИЯ ПОД НОУТБУКИ */

@media (max-width: 1700px) {

    /* ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ */

    body {
        max-width: 700px; /* Максимальная ширина сайта */
    }

    /* НАСТРОЙКА ЗАГОЛОВКОВ */

    h1 {
        font-size: 30px; /* Размер шрифта для заголовка h1 */
        margin-bottom: 30px; /* Отступ снизу от заголовка */
    }

    /* НАСТРОЙКА ШАПКИ САЙТА */

    .logo {
        width:200px;
        height:150px;
        border-radius: 8px; /* Закругление углов логотипа */
    }

    .headertext {
        font-size: 22px; /* Размер шрифта для контактной информации вверху */
    }

    /* НАСТРОЙКА МЕНЮ */
    
    .menu li {
        min-width: 150px; /* Минимальная ширина для элементов меню */
    }
    
    .menu li a {
        font-size: 18px; /* Размер шрифта для текста ссылок */
    }


    /* КАРТИНКА СО СЛОГАНОМ */

    .mainimage {
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
        margin-bottom: 50px; /* Отступ снизу для главного изображения */
    }

    
    /* ИНФОРМАЦИЯ О КОМПАНИИ */

    #infocompany {
        font-size: 27px; /* Размер шрифта для информации о компании */
        margin-bottom: 100px; /* Отступ снизу для информации о компании */  

    }

    /* ЛОГОТИПЫ КОМПАНИЙ КЛИЕНТОВ */

    .companylogos-container {
        margin-top: 50px; /* Отступ сверху для контейнера логотипов */
        margin-bottom: 40px; /* Отступ снизу для контейнера логотипов */
        gap: 5%; /* Отступы между логотипами */
    }


    .companylogos img {
        max-height: 125px; /* Ограничение максимальной высоты логотипов */
        max-width: 100%; /* Адаптивный размер изображений */
        flex: 1 0 150px; /* Элементы займут равное пространство и будут минимально 150px в ширину */
        margin-bottom: 30px; /* Отступ снизу для создания пространства между рядами */
    }

    /* КАРТИНКИ С УСЛУГАМИ */

    .servicesimage-container {
        margin-bottom: 50px; /* Отступ снизу для контейнера с изображениями услуг */
    }

    .servicesimage {
        margin-top: 50px; /* Отступ сверху для изображений услуг */
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
    }

    /* КОНТАКТНАЯ ИНФОРМАЦИЯ СНИЗУ */

    #contacts {
        font-size: 27px; /* Размер шрифта для контактной информации */ 
        margin-bottom: 150px; /* Отступ снизу для контактной информации */   
    }

    .contacts li {
        margin-bottom: 50px; /* Отступ снизу для каждого элемента контактной информации */
    }


    /* НАСТРОЙКА КНОПКИ "ВВЕРХ" */

    .back-to-top {

        bottom: 100px; /* Отступ снизу от края экрана */
        right: 100px; /* Отступ справа от края экрана */
        font-size: 30px; /* Размер шрифта для текста кнопки */
        padding: 5px 8px; /* Внутренние отступы для кнопки */
        border-radius: 5px; /* Закругление углов кнопки */

    }

}

@media (max-width: 1024px) {

    /* ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ */

    body {
        max-width: 600px; /* Максимальная ширина сайта */
    }

    /* НАСТРОЙКА ЗАГОЛОВКОВ */

    h1 {
        font-size: 25px; /* Размер шрифта для заголовка h1 */
        margin-bottom: 30px; /* Отступ снизу от заголовка */
    }

    /* НАСТРОЙКА ШАПКИ САЙТА */

    .logo {
        width:180px;
        height:120px;
        border-radius: 8px; /* Закругление углов логотипа */
    }

    .headertext {
        font-size: 18px; /* Размер шрифта для контактной информации вверху */
    }

    .headerinfo {
        margin-top: 25px; /* Отступ сверху для информации в шапке */
        padding-left: 15%; /* Отступ слева для информации в шапке */
    }

    .siteheader {  
        margin-top: 40px; /* Отступ сверху для шапки сайта */
        margin-bottom: 15px; /* Отступ снизу для шапки сайта */
    }

    /* НАСТРОЙКА МЕНЮ */
    
    .menu li {
        min-width: 120px; /* Минимальная ширина для элементов меню */
    }
    
    .menu li a {
        font-size: 15px; /* Размер шрифта для текста ссылок */
    }


    /* КАРТИНКА СО СЛОГАНОМ */

    .mainimage {
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
        margin-bottom: 50px; /* Отступ снизу для главного изображения */
    }

    
    /* ИНФОРМАЦИЯ О КОМПАНИИ */

    #infocompany {
        font-size: 20px; /* Размер шрифта для информации о компании */
        margin-bottom: 100px; /* Отступ снизу для информации о компании */  
    }

    .companylogos-container {
        margin-top: 50px; /* Отступ сверху для контейнера логотипов */
        margin-bottom: 30px; /* Отступ снизу для контейнера логотипов */
        gap: 2%; /* Отступы между логотипами */
    }
    
    .companylogos img {
        max-height: 100px; /* Ограничение максимальной высоты логотипов */
        max-width: 100%; /* Адаптивный размер изображений */
        flex: 1 0 150px; /* Элементы займут равное пространство и будут минимально 150px в ширину */
        margin-bottom: 30px; /* Отступ снизу для создания пространства между рядами */

    }

    /* КАРТИНКИ С УСЛУГАМИ */

    .servicesimage-container {
        margin-bottom: 70px; /* Отступ снизу для контейнера с изображениями услуг */
    }

    .servicesimage {
        margin-top: 50px; /* Отступ сверху для изображений услуг */
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
    }

    /* КОНТАКТНАЯ ИНФОРМАЦИЯ СНИЗУ */

    #contacts {
        font-size: 20px; /* Размер шрифта для контактной информации */ 
        margin-bottom: 150px; /* Отступ снизу для контактной информации */   
    }

    .contacts li {
        margin-bottom: 25px; /* Отступ снизу для каждого элемента контактной информации */
    }


    /* НАСТРОЙКА КНОПКИ "ВВЕРХ" */

    .back-to-top {
        bottom: 100px; /* Отступ снизу от края экрана */
        right: 100px; /* Отступ справа от края экрана */
        font-size: 30px; /* Размер шрифта для текста кнопки */
        padding: 5px 8px; /* Внутренние отступы для кнопки */
        border-radius: 5px; /* Закругление углов кнопки */
    }

}


/* АДАПТАЦИЯ ПОД ПЛАНШЕТЫ */

@media (max-width: 768px) {

    /* НАСТРОЙКА КНОПКИ "ВВЕРХ" */

    .back-to-top {
        bottom: 50px; /* Отступ снизу от края экрана */
        right: 50px; /* Отступ справа от края экрана */
        font-size: 25px; /* Размер шрифта для текста кнопки */
        padding: 5px 8px; /* Внутренние отступы для кнопки */
        border-radius: 5px; /* Закругление углов кнопки */
    }

}

@media (max-width: 760px) {

    /* ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ */

    body {
        max-width: 490px; /* Максимальная ширина сайта */
    }

    /* НАСТРОЙКА ЗАГОЛОВКОВ */

    h1 {
        font-size: 20px; /* Размер шрифта для заголовка h1 */
        margin-bottom: 30px; /* Отступ снизу от заголовка */
    }

    /* НАСТРОЙКА ШАПКИ САЙТА */

    .logo {
        width:150px;
        height:100px;
        border-radius: 8px; /* Закругление углов логотипа */
    }

    .siteheader {  
        margin-top: 20px; /* Отступ сверху для шапки сайта */
        margin-bottom: 10px; /* Отступ снизу для шапки сайта */
    }

    .headertext {
        font-size: 14px; /* Размер шрифта для контактной информации вверху */
    }

    /* НАСТРОЙКА МЕНЮ */
    
    .menu li {
        min-width: 95px; /* Минимальная ширина для элементов меню */
        margin-right: 5px; /* Отступ между элементами меню */
    }
    
    .menu li a {
        font-size: 13px; /* Размер шрифта для текста ссылок */
        padding: 8px 1px; /* Внутренние отступы для ссылок */
    }


    /* КАРТИНКА СО СЛОГАНОМ */

    .mainimage {
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
        margin-bottom: 20px; /* Отступ снизу для главного изображения */
    }

    
    /* ИНФОРМАЦИЯ О КОМПАНИИ */

    #infocompany {
        font-size: 16px; /* Размер шрифта для информации о компании */
        margin-bottom: 50px; /* Отступ снизу для информации о компании */  

    }

    .companylogos-container {
        margin-top: 30px; /* Отступ сверху для контейнера логотипов */
        margin-bottom: 30px; /* Отступ снизу для контейнера логотипов */
        gap: 2%; /* Отступы между логотипами */
    }
    
    .companylogos img {
        max-height: 80px; /* Ограничение максимальной высоты логотипов */
        max-width: 100%; /* Адаптивный размер изображений */
        flex: 1 0 120px; /* Элементы займут равное пространство и будут минимально 150px в ширину */
        margin-bottom: 10px; /* Отступ снизу для создания пространства между рядами */
        border-radius: 5px; /* Закругление углов логотипа */
    }

    /* КАРТИНКИ С УСЛУГАМИ */

    .servicesimage-container {
        margin-bottom: 40px; /* Отступ снизу для контейнера с изображениями услуг */
    }

    .servicesimage {
        margin-top: 20px; /* Отступ сверху для изображений услуг */
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
    }

    /* КОНТАКТНАЯ ИНФОРМАЦИЯ СНИЗУ */

    #contacts {
        font-size: 16px; /* Размер шрифта для контактной информации */ 
        margin-bottom: 100px; /* Отступ снизу для контактной информации */   
    }

    .contacts li {
        margin-bottom: 25px; /* Отступ снизу для каждого элемента контактной информации */
    }


    /* НАСТРОЙКА КНОПКИ "ВВЕРХ" */

    .back-to-top {
        bottom: 50px; /* Отступ снизу от края экрана */
        right: 25px; /* Отступ справа от края экрана */
        font-size: 20px; /* Размер шрифта для текста кнопки */
        padding: 5px 8px; /* Внутренние отступы для кнопки */
        border-radius: 5px; /* Закругление углов кнопки */
    }

}


/* АДАПТАЦИЯ ПОД ТЕЛЕФОНЫ */


@media (max-width: 430px) {

    /* ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ */

    body {
        max-width: 360px; /* Максимальная ширина сайта */
    }

    /* НАСТРОЙКА ЗАГОЛОВКОВ */

    h1 {
        font-size: 19px; /* Размер шрифта для заголовка h1 */
        margin-bottom: 30px; /* Отступ снизу от заголовка */
    }

    /* НАСТРОЙКА ШАПКИ САЙТА */

    .logo {
        width:150px;
        height:100px;
        border-radius: 8px; /* Закругление углов логотипа */
    }

    .siteheader {  
        margin-top: 20px; /* Отступ сверху для шапки сайта */
        margin-bottom: 10px; /* Отступ снизу для шапки сайта */
    }

    .headerinfo{
        margin-top: 25px;
    }

    .headertext {
        font-size: 14px; /* Размер шрифта для контактной информации вверху */
    }

    /* НАСТРОЙКА МЕНЮ */
    
    .menu li {
        min-width: 85px; /* Минимальная ширина для элементов меню */
        margin-right: 3px; /* Отступ между элементами меню */
    }
    
    .menu li a {
        padding: 8px 1px; /* Внутренние отступы для ссылок */
        font-size: 12px; /* Размер шрифта для текста ссылок */
    }



    /* КАРТИНКА СО СЛОГАНОМ */

    .mainimage {
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
        margin-bottom: 20px; /* Отступ снизу для главного изображения */
    }

    
    /* ИНФОРМАЦИЯ О КОМПАНИИ */

    #infocompany {
        font-size: 14px; /* Размер шрифта для информации о компании */
        margin-bottom: 50px; /* Отступ снизу для информации о компании */  

    }

    .companylogos-container {
        margin-top: 30px; /* Отступ сверху для контейнера логотипов */
        margin-bottom: 20px; /* Отступ снизу для контейнера логотипов */
        gap: 2%; /* Отступы между логотипами */
    }
    
    .companylogos img {
        max-height: 70px; /* Ограничение максимальной высоты логотипов */
        max-width: 100%; /* Адаптивный размер изображений */
        flex: 1 0 100px; /* Элементы займут равное пространство и будут минимально 150px в ширину */
        margin-bottom: 10px; /* Отступ снизу для создания пространства между рядами */
        border-radius: 5px; /* Закругление углов логотипа */
    }

    /* КАРТИНКИ С УСЛУГАМИ */

    .servicesimage-container {
        margin-bottom: 40px; /* Отступ снизу для контейнера с изображениями услуг */
    }

    .servicesimage {
        margin-top: 20px; /* Отступ сверху для изображений услуг */
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
    }

    /* КОНТАКТНАЯ ИНФОРМАЦИЯ СНИЗУ */

    #contacts {
        font-size: 14px; /* Размер шрифта для контактной информации */ 
        margin-bottom: 100px; /* Отступ снизу для контактной информации */ 
        padding: 5px;   
    }

    .contacts li {
        margin-bottom: 25px; /* Отступ снизу для каждого элемента контактной информации */
    }


    /* НАСТРОЙКА КНОПКИ "ВВЕРХ" */

    .back-to-top {
        bottom: 40px; /* Отступ снизу от края экрана */
        right: 20px; /* Отступ справа от края экрана */
        font-size: 15px; /* Размер шрифта для текста кнопки */
        padding: 5px 7px; /* Внутренние отступы для кнопки */
        border-radius: 5px; /* Закругление углов кнопки */
    }

}

@media (max-width: 370px) {

    /* ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ */

    body {
        max-width: 340px; /* Максимальная ширина сайта */
    }

    /* НАСТРОЙКА ЗАГОЛОВКОВ */

    h1 {
        font-size: 15px; /* Размер шрифта для заголовка h1 */
        margin-bottom: 15px; /* Отступ снизу от заголовка */
    }

    /* НАСТРОЙКА ШАПКИ САЙТА */

    .logo {
        width:125px;
        height:85px;
        border-radius: 8px; /* Закругление углов логотипа */
    }

    .siteheader {  
        margin-top: 20px; /* Отступ сверху для шапки сайта */
    }
    .headertext {
        font-size: 11px; /* Размер шрифта для контактной информации вверху */
    }

    /* НАСТРОЙКА МЕНЮ */
    
    .menu li {
        min-width: 82px; /* Минимальная ширина для элементов меню */
        margin-right: 2px; /* Отступ между элементами меню */
    }
    
    .menu li a {
        font-size: 11px; /* Размер шрифта для текста ссылок */
        padding: 8px 1px; /* Внутренние отступы для ссылок */
    }


    /* КАРТИНКА СО СЛОГАНОМ */

    .mainimage {
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
        margin-bottom: 20px; /* Отступ снизу для главного изображения */
    }

    
    /* ИНФОРМАЦИЯ О КОМПАНИИ */

    #infocompany {
        font-size: 12px; /* Размер шрифта для информации о компании */
        margin-bottom: 50px; /* Отступ снизу для информации о компании */  

    }

    .companylogos-container {
        margin-top: 20px; /* Отступ сверху для контейнера логотипов */
        margin-bottom: 20px; /* Отступ снизу для контейнера логотипов */
        gap: 2%; /* Отступы между логотипами */ 
    }
    
    .companylogos img {
        max-height: 60px; /* Ограничение максимальной высоты логотипов */
        max-width: 100%; /* Адаптивный размер изображений */
        flex: 1 0 100px; /* Элементы займут равное пространство и будут минимально 150px в ширину */
        margin-bottom: 10px; /* Отступ снизу для создания пространства между рядами */
        border-radius: 5px; /* Закругление углов логотипа */
        box-shadow: 0 10px 10px rgba(0,0,0,0.1); /* Тень для логотипа */
        border: 0.1px solid #919191; /* Контур вокруг логотипа */
    }

    /* КАРТИНКИ С УСЛУГАМИ */

    .servicesimage-container {
        margin-bottom: 40px; /* Отступ снизу для контейнера с изображениями услуг */
    }

    .servicesimage {
        margin-top: 20px; /* Отступ сверху для изображений услуг */
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
    }

    /* КОНТАКТНАЯ ИНФОРМАЦИЯ СНИЗУ */

    #contacts {
        font-size: 12px; /* Размер шрифта для контактной информации */ 
        margin-bottom: 100px; /* Отступ снизу для контактной информации */   
    }

    .contacts li {
        margin-bottom: 25px; /* Отступ снизу для каждого элемента контактной информации */
    }


    /* НАСТРОЙКА КНОПКИ "ВВЕРХ" */

    .back-to-top {
        bottom: 40px; /* Отступ снизу от края экрана */
        right: 20px; /* Отступ справа от края экрана */
        font-size: 15px; /* Размер шрифта для текста кнопки */
        padding: 5px 8px; /* Внутренние отступы для кнопки */
        border-radius: 5px; /* Закругление углов кнопки */
    }

}

@media (max-width: 345px) {

    /* ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ */

    body {
        max-width: 280px; /* Максимальная ширина сайта */
    }

    /* НАСТРОЙКА ЗАГОЛОВКОВ */

    h1 {
        font-size: 14px; /* Размер шрифта для заголовка h1 */
        margin-bottom: 15px; /* Отступ снизу от заголовка */
    }

    /* НАСТРОЙКА ШАПКИ САЙТА */

    .logo {
        width:110px;
        height:75px;
        border-radius: 8px; /* Закругление углов логотипа */
    }

    .siteheader {  
        margin-top: 20px; /* Отступ сверху для шапки сайта */
        margin-bottom: 0px; /* Отступ снизу для шапки сайта */
    }

    .headertext {
        font-size: 11px; /* Размер шрифта для контактной информации вверху */
    }

    .headerinfo {
        margin-top: 15px; /* Размер шрифта для контактной информации вверху */
    }

    /* НАСТРОЙКА МЕНЮ */
    
    .menu li {
        min-width: 65px; /* Минимальная ширина для элементов меню */
        margin-right: 2px; /* Отступ между элементами меню */
    }
    
    .menu li a {
        font-size: 9px; /* Размер шрифта для текста ссылок */
        padding: 8px 1px; /* Внутренние отступы для ссылок */
    }


    /* КАРТИНКА СО СЛОГАНОМ */

    .mainimage {
        margin-top: 5px; /* Отступ сверху для главного изображения */
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */
        margin-bottom: 20px; /* Отступ снизу для главного изображения */
    }

    
    /* ИНФОРМАЦИЯ О КОМПАНИИ */

    #infocompany {
        font-size: 11px; /* Размер шрифта для информации о компании */
        margin-bottom: 50px; /* Отступ снизу для информации о компании */  

    }

    .companylogos-container {
        margin-top: 20px; /* Отступ сверху для контейнера логотипов */
        margin-bottom: 20px; /* Отступ снизу для контейнера логотипов */
        gap: 2%; /* Отступы между логотипами */
    }
    
    .companylogos img {
        max-height: 50px; /* Ограничение максимальной высоты логотипов */
        max-width: 100%; /* Адаптивный размер изображений */
        flex: 1 0 50px; /* Элементы займут равное пространство и будут минимально 150px в ширину */
        margin-bottom: 10px; /* Отступ снизу для создания пространства между рядами */
        border-radius: 4px; /* Закругление углов логотипа */
        box-shadow: 0 10px 10px rgba(0,0,0,0.1); /* Тень для логотипа */
        border: 0.1px solid #919191; /* Контур вокруг логотипа */

    }

    /* КАРТИНКИ С УСЛУГАМИ */

    .servicesimage-container {
        margin-bottom: 40px; /* Отступ снизу для контейнера с изображениями услуг */
    }

    .servicesimage {
        margin-top: 20px; /* Отступ сверху для изображений услуг */
        max-width: 100%; /* Максимальная ширина изображения не больше 100% родителя */ 
    }

    /* КОНТАКТНАЯ ИНФОРМАЦИЯ СНИЗУ */

    #contacts {
        font-size: 10px; /* Размер шрифта для контактной информации */ 
        margin-bottom: 100px; /* Отступ снизу для контактной информации */   
    }

    .contacts li {
        margin-bottom: 25px; /* Отступ снизу для каждого элемента контактной информации */
    }


    /* НАСТРОЙКА КНОПКИ "ВВЕРХ" */

    .back-to-top {
        bottom: 30px; /* Отступ снизу от края экрана */
        right: 15px; /* Отступ справа от края экрана */
        font-size: 10px; /* Размер шрифта для текста кнопки */
        padding: 5px 6px; /* Внутренние отступы для кнопки */
        border-radius: 5px; /* Закругление углов кнопки */
    }

}