/* ===== ПОДКЛЮЧЕНИЕ ШРИФТА ===== */
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap&subset=cyrillic" rel="stylesheet">

<style>
/* ===== ОСНОВНЫЕ ПЕРЕМЕННЫЕ ДЛЯ ЦВЕТОВ ===== */
:root {
    --menu-text-color: #333333;
    --menu-hover-color: #007bff;
    --footer-text: #ffffff;
    --footer-hover: #007bff;
    --border-color: #e9ecef;
}

/* ===== МЕНЮ: ГЛАВНОЕ 17px ===== */
.sp-megamenu-parent > li > a {
    padding: 6px 8px;
    margin: 0 1px;
    font-size: 17px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 1.3;
    color: var(--menu-text-color);
    transition: color 0.3s ease;
}

.sp-megamenu-parent > li > a:hover {
    color: var(--menu-hover-color);
}

.sp-megamenu-parent > li {
    margin-left: 0;
    margin-right: 0;
}

/* ===== МЕНЮ: ВЫПАДАЮЩЕЕ 17px ===== */
.sp-megamenu-parent .sp-dropdown {
    padding: 8px 0;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-radius: 4px;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    padding: 0;
}

.sp-megamenu-parent .sp-dropdown li {
    margin: 0;
}

.sp-megamenu-parent .sp-dropdown li a {
    padding: 8px 15px;
    font-size: 17px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: var(--menu-text-color);
    transition: color 0.2s ease, background 0.2s ease;
}

.sp-megamenu-parent .sp-dropdown li a:hover {
    color: var(--menu-hover-color);
    background: #f8f9fa;
}

.sp-megamenu-parent .sp-dropdown .sp-megamenu-header {
    padding: 8px 15px;
    font-size: 17px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

/* ===== ИКОНКИ: ВЫРАВНИВАЕМ (ВСЕ, КРОМЕ ФУТЕРА) ===== */
.sp-module .mod-custom,
.sp-module .custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sp-module .mod-custom img,
.sp-module .custom img {
    vertical-align: middle;
    display: inline-block;
    margin-top: 5px;
}

.sp-module table td {
    vertical-align: middle;
    padding: 0 5px;
}

.sp-module table img {
    vertical-align: middle;
    margin-top: 5px;
}

/* ===== ФУТЕР: ОТМЕНЯЕМ СТИЛИ ИКОНОК ===== */
#sp-bottom .mod-custom img,
#sp-bottom .custom img,
#sp-bottom table img {
    margin-top: 0;
    vertical-align: middle;
}

#sp-bottom .mod-custom,
#sp-bottom .custom {
    display: block;
    gap: 0;
}

#sp-bottom table td {
    padding: 5px 10px 5px 0;
}

/* ===== ФУТЕР: БЕЛЫЙ ЦВЕТ И КОМПАКТНОСТЬ ===== */
#sp-bottom {
    color: var(--footer-text);
    font-family: 'Lato', sans-serif;
}

#sp-bottom a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

#sp-bottom a:hover {
    color: var(--footer-hover);
    text-decoration: underline;
}

#sp-bottom h3,
#sp-bottom .module-title,
#sp-bottom .sp-module-title {
    color: var(--footer-text);
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    border-bottom: 2px solid var(--footer-hover);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

#sp-bottom ul,
#sp-bottom ul li,
#sp-bottom ul li a,
#sp-bottom .menu,
#sp-bottom .menu li,
#sp-bottom .menu li a {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

#sp-bottom .menu li a,
#sp-bottom ul li a {
    display: block;
    padding: 4px 0;
}

#sp-bottom .row {
    display: flex;
    flex-wrap: wrap;
}

#sp-bottom .col-lg-3,
#sp-bottom .col-sm-6 {
    display: flex;
    flex-direction: column;
}

#sp-bottom .sp-module {
    flex-grow: 1;
    margin-bottom: 0;
}

#sp-bottom .sp-module-content {
    flex-grow: 1;
}

/* ===== МОБИЛЬНОЕ МЕНЮ (OFFCANVAS) ===== */
.offcanvas-menu,
.sp-offcanvas,
.mega_offcanvas,
#offcanvas,
.sp-offcanvas-wrapper {
    background: #1a1a1a;
    color: #fff;
}

.offcanvas-menu a,
.sp-offcanvas a,
.mega_offcanvas a,
#offcanvas a,
.sp-megamenu-parent.offcanvas a {
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 17px;
    padding: 6px 0;
    margin: 0;
    line-height: 1.3;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.offcanvas-menu a:hover,
.sp-offcanvas a:hover,
.mega_offcanvas a:hover {
    color: #007bff;
    padding-left: 5px;
}

.offcanvas-menu li,
.sp-offcanvas li,
.mega_offcanvas li {
    margin: 0;
    padding: 0;
    border: none;
}

.offcanvas-menu h3,
.sp-offcanvas h3,
.mega_offcanvas h3,
.offcanvas-menu .module-title,
.sp-offcanvas .module-title {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #fff;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 767px) {
    #sp-bottom .row {
        flex-direction: column;
    }
    #sp-bottom .col-lg-3,
    #sp-bottom .col-sm-6 {
        margin-bottom: 20px;
        width: 100%;
    }
}

/* ================================================================ */
/* ===== ТОЛЬКО ДЛЯ БОКОВОГО МЕНЮ (ЛЕВАЯ КОЛОНКА) ===== */
/* ================================================================ */
#sp-left ul.menu li {
    padding: 6px 0 6px 10px;
    border-bottom: 1px solid var(--border-color);
}

#sp-left ul.menu li:last-child {
    border-bottom: none;
}

#sp-left ul.menu li a {
    display: block;
    color: var(--menu-text-color);
    padding: 0;
    transition: padding 0.2s ease;
}

#sp-left ul.menu li a:hover {
    color: var(--menu-hover-color);
    padding-left: 5px;
}
</style>