/* Цвет ссылок верхнего меню (черный) */
.navbar-light .navbar-nav .nav-link {
  color: #000 !important; /* Черный */
}

/* Цвет ссылок при наведении (серый) */
.navbar-light .navbar-nav .nav-link:hover {
  color: #808080 !important; /* Серый */
}

/* Применяем шрифт Roboto ко всему документу */
body {
    font-family: 'Roboto', sans-serif;
}

/* Базовые размеры задаются для обычного состояния изображения */
.responsive-logo {
width: 244px;
height: 65px;
}

        /* Медиа-запрос отдельного лого для устройств шириной менее 1280 пикселей */
        @media (max-width: 1279px) {
        .responsive-logo {
        content: url('img/logo_mobile.png'); /* Укажите здесь путь к вашему логотипу для маленьких экранов */
        width: 133px; /* Ширина для маленьких экранов */
        height: 36px; /* Высота для маленьких экранов */
        margin-top: 0px; /* Отступ сверху */
        }
    }

        /* Уменьшаем размер лого если экран меньше 429 пикселей */
        @media (max-width: 429px) {
        .responsive-logo {
        content: url('img/logo_mobile.png'); /* Укажите здесь путь к вашему логотипу для маленьких экранов */
        width: 122px; /* Укажите новое значение ширины */
        height: 28px; /* Укажите новое значение высоты */
        /*margin-bottom: 2px; /* Добавьте отступ снизу */  
        margin-top: 4px; /* Добавьте отступ сверху */
        }
    }

        /* Уменьшаем размер лого если экран меньше 390 пикселей */
        @media (max-width: 390px) {
        .responsive-logo {
        content: url('img/logo_mobile.png'); /* Укажите здесь путь к вашему логотипу для маленьких экранов */
        width: 94px; /* Укажите новое значение ширины */
        height: 26px; /* Укажите новое значение высоты */
        margin-top: 1px; /* Добавьте отступ сверху */
        }
    }

        /* Уменьшаем размер лого если экран меньше 321 пикселей */
            @media (max-width: 321px) {
        .responsive-logo {
        content: url('img/logo_mobile.png'); /* Укажите здесь путь к вашему логотипу для маленьких экранов */
        width: 82px; /* Укажите новое значение ширины */
        height: 22px; /* Укажите новое значение высоты */
        margin-top: 1px; /* Добавьте отступ сверху */
        }
    }

        /* Уменьшаем размер лого если экран меньше 163 пикселей */
        @media (max-width: 163px) {
        .responsive-logo {
        content: url('img/logo_mobile.png'); /* Укажите здесь путь к вашему логотипу для маленьких экранов */
        width: 64px; /* Укажите новое значение ширины */
        height: 18px; /* Укажите новое значение высоты */
        margin-top: 0px; /* Добавьте отступ сверху */
        }
    }

/* Контейнер с номером телефона и кнопкой вызова */
.phone-container {
    display: flex; /* Используем flexbox для выравнивания содержимого */
    align-items: center; /* Центруем содержимое по вертикали */
    background-color: #ffffff; /* Белый фон */
    padding: 10px 15px; /* Внутренние отступы */
    border-radius: 10px; /* Скругляем углы */
    color: rgb(0, 0, 0); /* Цвет текста */
    box-shadow: 0px 4px 6px rgb(255, 255, 255); /* Легкая тень */
}

        /* Скрыть контейнер, если экран меньше 163 пикселей */
        @media (max-width: 163px) {
        .phone-container {
        display: none; /* Скроем контейнер */
        }
    }

/* Стили для номера телефона */
.phone-number {
    font-size: 20px; /* Размер шрифта для обычного состояния*/
    font-weight: bold; /* Жирный текст */
    margin-right: 16px; /* Отступ от кнопки вызова */
}

        /* Скрыть номер, если экран меньше 1200 пикселей */
        @media (max-width: 1200px) {
        .phone-number {
        display: none; /* Скроем номер телефона */
        }
    }

        /* Показать телефон для экранов ниже 429 пикселей */
        @media (max-width: 429px) {
        .phone-number {
        display: block; /* Или другой способ отображения, если необходимо */
        font-size: 14px; /* Укажите новое значение размера шрифта для экранов шире 414 пикселей */
        }
    }

        /* Уменьшаем размер шрифта если экран меньше 415 пикселей */
        @media (max-width: 415px) {
        .phone-number {
        font-size: 14px; /* Укажите новое значение размера шрифта для экранов шире 414 пикселей */
        }
    }

        /* Уменьшаем размер шрифта если экран меньше 390 пикселей */
        @media (max-width: 390px) {
        .phone-number {
        font-size: 16px; /* Укажите новое значение размера шрифта для экранов шире 414 пикселей */
        }
    }

        /* Уменьшаем размер шрифта если экран меньше 375 пикселей */
            @media (max-width: 375px) {
        .phone-number {
        font-size: 14px; /* Укажите новое значение размера шрифта для экранов шире 414 пикселей */
        }
    }

        /* Уменьшаем размер шрифта если экран меньше 321 пикселей */
        @media (max-width: 321px) {
        .phone-number {
        font-size: 12px; /* Укажите новое значение размера шрифта для экранов шире 414 пикселей */
        }
    }

/* Стили для кнопки вызова */
.call-button {
    background-color: white; /* Белый фон */
    border: 3px solid lightgray; /* Светло-серая рамка */
    padding: 0px; /* Внутренние отступы */
    border-radius: 50%; /* Круглая форма */
    display: flex; /* Используем flexbox для выравнивания содержимого */
    align-items: center; /* Центруем содержимое по вертикали */
    justify-content: center; /* Центруем содержимое по горизонтали */
    cursor: pointer; /* Курсор при наведении */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход для фона и цвета */
    width: 30px;  /* Начальная ширина кнопки */
    height: 30px; /* Начальная высота кнопки */
    margin-right: 4px;
}

        /* Скрыть кнопку вызова, если экран меньше 163 пикселей */
        @media (max-width: 163px) {
        .call-button {
        display: none; /* Скроем кнопку */
        }
    }

        /* Уменьшаем кнопку вызова если экран меньше 415 пикселей */
        @media (max-width: 415px) {
        .call-button {
        width: 30px; /* Укажите новое значение ширины */
        height: 30px; /* Укажите новое значение высоты */
        }
    }

        /* Уменьшаем кнопку вызова если экран меньше 321 пикселей */
        @media (max-width: 321px) {
        .call-button {
        width: 25px; /* Укажите новое значение ширины */
        height: 25px; /* Укажите новое значение высоты */
        }
    }

/* Эффект при наведении на кнопку вызова */
.call-button:hover {
    background-color: rgb(52, 152, 219); /* Синий фон при наведении */
    color: white; /* Белый цвет иконки при наведении */
}

/* Иконка внутри кнопки вызова */
.call-button svg {
    width: 16px; /* Ширина иконки */
    height: 16px; /* Высота иконки */
    fill: currentColor; /* Используем текущий цвет текста для заливки */
}

        /* Уменьшаем иконку кнопки вызова если экран меньше 415 пикселей */
        @media (max-width: 415px) {
        .call-button svg {
        width: 16px; /* Укажите новое значение ширины */
        height: 16px; /* Укажите новое значение высоты */
        }
    }               

        /* Уменьшаем иконку кнопки вызова если экран меньше 390 пикселей */
        @media (max-width: 390px) {
        .call-button svg {
        width: 16px; /* Укажите новое значение ширины */
        height: 16px; /* Укажите новое значение высоты */
        }
    }             

/* Стили для кнопки гамбургера */
.navbar .navbar-toggler {
    width: 32px; /* Устанавливаем ширину кнопки */
    height: 32px; /* Устанавливаем высоту кнопки */
    padding: 0; /* Убираем внутренние отступы */
    margin-bottom: 1px; /* Добавьте отступ снизу */  
    /*margin-top: 6px; /* Добавьте отступ сверху */         
}

        /* Уменьшаем иконку кнопки гамбургера если экран меньше 429 пикселей */
        @media (max-width: 429px) {
        .navbar .navbar-toggler {
        /*  width: 25px; /* Укажите новое значение ширины */
        /*  height:25px; /* Укажите новое значение высоты */
        padding: 0; /* Убираем внутренние отступы */
        width: 8.2vw;  /* 5% от ширины окна */
        height: 4.2vh; /* 5% от высоты окна */
        }
    }

        /* Уменьшаем иконку кнопки гамбургера если экран меньше 415 пикселей */
        @media (max-width: 415px) {
        .navbar .navbar-toggler {
        /*  width: 25px; /* Укажите новое значение ширины */
        /*  height:25px; /* Укажите новое значение высоты */
        padding: 0; /* Убираем внутренние отступы */
        width: 8vw;  /* 5% от ширины окна */
        height: 5vh; /* 5% от высоты окна */
        }
    }

        /* Уменьшаем иконку кнопки гамбургера если экран меньше 390 пикселей */
        @media (max-width: 390px) {
        .navbar .navbar-toggler {
        /*  width: 25px; /* Укажите новое значение ширины */
        /*  height:25px; /* Укажите новое значение высоты */
        padding: 0; /* Убираем внутренние отступы */
        width: 8vw;  /* 5% от ширины окна */
        height: 5vh; /* 5% от высоты окна */
        }
    }

        /* Уменьшаем иконку кнопки гамбургера если экран меньше 376 пикселей */
        @media (max-width: 376px) {
        .navbar .navbar-toggler {
        /*  width: 25px; /* Укажите новое значение ширины */
        /*  height:25px; /* Укажите новое значение высоты */
        padding: 0; /* Убираем внутренние отступы */
        width: 8.3vw;  /* 5% от ширины окна */
        height: 5vh; /* 5% от высоты окна */
        }
    }

        /* Уменьшаем иконку кнопки гамбургера если экран меньше 361 пикселей */
        @media (max-width: 361px) {
        .navbar .navbar-toggler {
        /*  width: 25px; /* Укажите новое значение ширины */
        /*  height:25px; /* Укажите новое значение высоты */
        padding: 0; /* Убираем внутренние отступы */
        width: 8.7vw;  /* 5% от ширины окна */
        height: 5.1vh; /* 5% от высоты окна */
        }
    }

        /* Уменьшаем иконку кнопки гамбургера если экран меньше 163 пикселей */
        @media (max-width: 163px) {
        .navbar .navbar-toggler {
        /*  width: 25px; /* Укажите новое значение ширины */
        /*  height:25px; /* Укажите новое значение высоты */
        padding: 0; /* Убираем внутренние отступы */
        width: 12.4vw;  /* 5% от ширины окна */
        height: 12vh; /* 5% от высоты окна */
        }
    }


/* Изменение иконки гамбургера */
.navbar .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30"%3E%3Cpath stroke="gray" stroke-width="2" d="M4 7h22M4 15h22M4 23h22" stroke-linecap="round"/%3E%3C/svg%3E');
    background-size: 28px 28px; /* Уменьшаем ширину и высоту линии гамбургера */
}

        /* Уменьшаем иконку кнопки гамбургера если экран меньше 321 пикселей */
        @media (max-width: 321px) {
        .navbar .navbar-toggler-icon {
        background-size: 18px 18px; /* Уменьшаем ширину и высоту линии гамбургера */
        position: relative;  /* Измените на absolute, если нужно позиционировать относительно родителя */
        top: -4.6px;           /* Смещение вниз на 5 пикселей */
        left: -3px;          /* Смещение вправо на 5 пикселей */
        }
    }

        /* Уменьшаем иконку кнопки гамбургера если экран меньше 163 пикселей */
        @media (max-width: 163px) {
        .navbar .navbar-toggler-icon {
        background-size: 12px 12px; /* Уменьшаем ширину и высоту линии гамбургера */
        position: relative;  /* Измените на absolute, если нужно позиционировать относительно родителя */
        top: -7px;           /* Смещение вниз на 5 пикселей */
        left: -6px;          /* Смещение вправо на 5 пикселей */
        }
    }

/* Стили для фокуса на кнопке гамбургера */
.navbar .navbar-toggler:focus {
    outline: none; /* Убираем стандартный контур */          
    box-shadow: 0 0 5px rgba(185, 185, 185, 0.478); /* Лёгкая тень при фокусе */
    border-color: #3498db; /* Устанавливаем цвет границы при фокусе */
}

/* Стили меню для ПК */
.navbar-nav .nav-item {
    margin-right: 15px; /* Отступ между элементами */
}

.dropdown-menu {
    padding: 10px; /* Внутренние отступы */
}

/* Изменение стиля шрифта, размера и цвета для ссылок в меню */
.navbar-nav .nav-link {
    font-family: 'Roboto', arial, sans-serif; /* Шрифт */
    font-size: 18px; /* Размер шрифта */
    font-weight: 500; /* Жирность шрифта */
    color: #333; /* Цвет шрифта */
    text-decoration: none; /* Убираем подчеркивание */
}

/* Стили для выпадающего меню */
.dropdown-menu .dropdown-item {
    font-family: 'Verdana', sans-serif; /* Шрифт */
    font-size: 14px; /* Размер шрифта */
    color: #555; /* Цвет шрифта */
    padding: 10px; /* Внутренние отступы */
}

/* Изменение цвета при наведении */
.navbar-nav .nav-link:hover,
.dropdown-menu .dropdown-item:hover {
    color: #007bff; /* Цвет при наведении */
}

/* Выпадающее меню гамбургер */
.menu {
display: none;
position: fixed;
top: 25%; /*Высота меню*/
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
width: 80%;
max-width: 300px;
padding: 20px;
text-align: center;
transition: display 0.3s ease;
}

        /* Уменьшаем высоту меню если экран меньше 390 пикселей */
        @media (max-width: 390px) {
        .menu {
        top: 28%; /*Высота меню*/
        }
    }
        /* Уменьшаем высоту меню если экран меньше 375 пикселей */
        @media (max-width: 375px) {
        .menu {
        top: 30%; /*Высота меню*/
        }
    }
        /* Уменьшаем высоту меню если экран меньше 361 пикселей */
        @media (max-width: 361px) {
        .menu {
        top: 27%; /*Высота меню*/
        }
    }

        /* Уменьшаем высоту меню если экран меньше 321 пикселей */
                    @media (max-width: 321px) {
        .menu {
        top: 35%; /*Высота меню*/
        }
    }

        /* Уменьшаем высоту меню если экран меньше 163 пикселей */
        @media (max-width: 163px) {
        .menu {
        top: 54%; /*Высота меню*/
        width: 80%; /* Ширина меню для маленьких экранов */
        max-width: 200px; /* Максимальная ширина меню */
        padding: 15px; /* Уменьшение отступов */
        }
    }

.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
font-weight: bold;
background: transparent;
border: none;
cursor: pointer;
}

        /* Настройки для экранов меньше 163 пикселей */
        @media (max-width: 163px) {
        .close-btn {
        top: 2px; /* Уменьшение верхнего отступа */
        right: 2px; /* Уменьшение правого отступа */
        font-size: 10px; /* Уменьшение размера шрифта */
        }
    }

.close-btn:hover {
color: rgb(92, 92, 92); /* Цвет при наведении */
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    margin: 10px 0;
}

        /* Настройки отступов между ссылками для экранов меньше 163 пикселей */
        @media (max-width: 163px) {
        .menu ul li {
        margin: -10px 0; /* Уменьшение расстояния между ссылками */
        }
}

.menu ul li a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

        /* Настройки для экранов меньше 163 пикселей */
        @media (max-width: 163px) {
        .menu ul li a {
        font-size: 11px; /* Уменьшение размера шрифта */
        }
    }

.menu ul li a:hover {
    color: #007BFF;
}













/* Отключение отступов по умолчанию */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Стили для меню */
.navbar-collapse {
  overflow: hidden;
}

.dropdown-menu {
  display: none;
}

.navbar-nav .dropdown:hover .dropdown-menu,
.navbar-nav .dropdown:focus .dropdown-menu {
  display: block !important;
}

/* Отображение подменю при наведении */
.navbar-nav .dropdown:hover .dropdown-menu,
.navbar-nav .dropdown:focus .dropdown-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}