html {
    scroll-behavior: smooth;
}





body {
    font-family: 'Montserrat', sans-serif !important;
    background-color: #f3f3f3;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Отключает горизонтальную прокрутку */
}

h1,h2 {
    color: #333333;
}


.header-bg {
    background-color: #018B7E;
    color: white;
    justify-content: space-between; /* Чтобы логотип и центр были разнесены по бокам */

}
.icon-text2 {
    display: flex; /* Гибкое отображение иконок */
    align-items: center; /* Центрирование иконок по вертикали */
}
.dark-icon {
    fill: #333; /* Темный цвет для иконок */
}
.menu-item {
    position: relative;
    text-align: center; /* Центрирование текста в меню */
}
.submenu {
    display: none;
    position: absolute;
    background: #018B7E;
    left: 0;
    z-index: 1000;
    width: 200px; /* Ширина подменю */
}
.menu-item:hover .submenu {
    display: block; /* Показать подменю при наведении */
}
.icon-text {
    display: flex;
    align-items: center;
    justify-content: center; /* Центрирование иконок и текста */
}
.vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.header-bg {
    background-color: #018B7E;
    position: relative; /* Обеспечивает правильное позиционирование */
    left: 50%; /* Сдвигает фон на 50% влево */
    right: 50%; /* Сдвигает фон на 50% вправо */
    margin-left: -50vw; /* Убирает половину ширины вьюпорта */
    margin-right: -50vw; /* Убирает половину ширины вьюпорта */
    width: 100vw; /* Устанавливает ширину на 100% от вьюпорта */
}

.header-bg2 {
    background-color: #018B7E;
    position: relative; /* Обеспечивает правильное позиционирование */
    left: 50%; /* Сдвигает фон на 50% влево */
    right: 50%; /* Сдвигает фон на 50% вправо */
    margin-left: -50vw; /* Убирает половину ширины вьюпорта */
    margin-right: -50vw; /* Убирает половину ширины вьюпорта */
    width: 100vw; /* Устанавливает ширину на 100% от вьюпорта */
}

.navbar {
position: relative; /* Убедитесь, что navbar имеет относительное позиционирование */
z-index: 1000; /* Обеспечьте, чтобы navbar был выше других элементов */

}


.nav-link {
    color: white;
    margin-right: 50px;
    position: relative;
    transition: 0.3s;
    
}

.nav-link:hover {
    background-color: #f0f0f0; /* Новый цвет фона */
    color: #01cab6; /* Цвет при наведении */
    border-radius: 3px;
}

.dropdown-menu {
    background-color: #018B7E !important; /* Цвет фона подменю */
    
}
.dropdown-item {
    color: white !important;
}
.dropdown-item:hover {
    background-color: #f8f9f9 !important; /* Цвет подменю при наведении */
    color:#018B7E !important;
}

/* Изменяем цвет бургер-меню */
.navbar-toggler {
    position: absolute; /* Абсолютное позиционирование */
    top: 15px; /* Отступ сверху */
    left: 15px; /* Отступ слева */
    z-index: 1050; /* Убедитесь, что кнопка выше других элементов */
    background-color: white; /* Цвет фона */
    border: none; /* Убираем границу */
}


.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.top-head {
        display: flex;
        flex-direction: column;
}


.burger-menu {
    display: flex;
    flex-direction: row;
}




.carousel-item img {
    width: 100%;
    height: auto;
    max-height: 500px; /* Ограничение высоты изображения */
    padding: 20px;
}



.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Ширина области клика стрелок */
}

#carouselMobile .carousel-inner {
    height: 400px; /* Установите желаемую высоту */
}

#carouselMobile .carousel-item img {
    height: 100%; /* Установите высоту изображения в 100% от родителя */
    object-fit: cover; /* Сохранение пропорций изображения */
}





.tariff-header {
    color: #333333;
    font-size: 25px;
    margin-bottom: 30px;
}
.location-header {
    text-align: center; /* Центрируем текст */
    margin: 20px 0; /* Устанавливаем отступы сверху и снизу (20px) */
}

.tariff-container {
    display: flex; /* Используем flexbox для карточек */
    flex-wrap: wrap; /* Позволяем переносить карточки на следующую строку */
    justify-content: center; /* Центрируем карточки по горизонтали */
    gap: 20px; /* Промежуток между карточками */
    margin: 0 auto; /* Центрируем контейнер */
}

.tariff-card {
    background-color: #018B7E; /* Цвет фона карточки */
    border-radius: 25px; /* Скругление углов */
    color: white; /* Цвет текста */
    width: calc(33.33% - 20px); /* Ширина карточки: 3 карточки в ряд с учётом отступа */
    box-sizing: border-box; /* Учитываем отступы в расчете ширины */
    margin-top: 20px; /* Отступ сверху */
    display: flex; /* Используем flexbox внутри карточки */
    flex-direction: column; /* Выстраиваем элементы в столбик */
    justify-content: space-between; /* Распределение пространства между элементами */
    text-align: center; /* Выравнивание текста по центру */
    
}

.tariff-card:hover {
    transform:  scale(1.05); /* Увеличиваем карточку при наведении */
    transition: transform 0.3s;
}
/* Общие стили для заголовка */
#tariff-title {
    font-size: 25px; /* Размер шрифта */
    margin: 20px 0; /* Отступы сверху и снизу */
    border-radius: 25px; /* Закругление углов рамки */
    display: inline-block; /* Заставляет рамку обтекать только текст заголовка */
    padding: 10px;
    box-shadow: 0 4px 10px rgba(10, 199, 111, 0.5); /* Тень для заголовка */
    max-width: 400px; /* Максимальная ширина заголовка (можно настроить) */
    width: auto; /* Автоматическая ширина в зависимости от содержимого */
    margin: 0 auto; /* Центрирование элемента внутри родителя */
}

.text-center5 {
    text-align: center !important; /* Центрирование текста внутри контейнера */
    width: 100%; /* Ширина 100% для контейнера */
}

.tariffs-header {
    text-align: center; /* Центрируем текст */
    margin-bottom: 20px; /* Отступ снизу для пространства между заголовком и карточками */
}

.tariff-image {
    width: 100%; /* Ширина изображения */
    margin: 10px 0; /* Центрирование изображения с отступом */
}

.tariff-image2 {
    width: 100% !important; /* Устанавливаем ширину 100% для мобильных устройств */
    max-width: 500px !important; /* Максимальная ширина для изображений */
    height: 300px !important; /* Фиксированная высота */
    object-fit: cover; /* Заполнение блока, сохраняя пропорции */
    border-radius: 8px; /* Закругленные углы */
}
.tariff-overlay {
    background-color: rgba(217, 217, 217, 0.25); /* Фоновый цвет наложения */
    padding: 20px; /* Внутренний отступ */
    color: rgb(255, 255, 255); /* Цвет текста */
    font-size: 18px; /* Размер шрифта */
    text-align: left; /* Выравнивание текста влево */
    width: 100%; /* Занимаем всю ширину карточки */
    margin-top: 35px; /* Отступ сверху наложения */
    margin-bottom: 15px; /* Отступ снизу наложения для кнопки */
}






.connect-btn, .view-all-btn {
    background-color: #ffffff !important; /* Цвет фона кнопки */
    color: #3FA39F !important; /* Цвет текста кнопки */
    border: none; /* Без рамки */
    padding: 10px 20px; /* Внутренние отступы кнопки */
    border-radius: 25px !important; /* Скругление углов кнопки */
    width: 200px !important;
    margin: 15px auto; /* Отступ сверху и центрация кнопки */
    width: fit-content; /* Ширина кнопки по содержимому */
    transition: background-color 0.3s; /* Анимация для фона кнопки */
}

.connect-btn:hover {
    background-color: #e0e0e0; /* Цвет кнопки при наведении */
}

.zayavka {
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 500;
}
.connect-btn1, .connect-btn2 {
    background-color: #018B7E !important; /* Основной цвет кнопки */
    color: white !important; /* Цвет текста */
    border-radius: 25px !important; /* Закругленные углы */
    padding: 10px 20px; /* Отступы внутри кнопки */
    cursor: pointer; /* Курсор при наведении */
    width: 170px;
    font-size: 16px; /* Размер шрифта */
    transition: background-color 0.3s, transform 0.3s; /* Анимация перехода */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.247); /* Тень для кнопок */
}


.connect-btn1:hover, .connect-btn2:hover {
    background-color: #ffffff !important; /* Цвет кнопки при наведении */
    color: #018B7E !important;
    border: 1px solid #018B7E !important; 
    transform: scale(1.05); /* Увеличение кнопки при наведении */
    box-shadow: 0 4px 10px rgba(10, 199, 111, 2) !important;
}
/* Убедитесь, что обводка не отображается при фокусировке */
.connect-btn1:focus, .connect-btn2:focus {
    outline: none !important; /* Убирает обводку при фокусировке */
    box-shadow: 0 4px 10px rgba(10, 199, 111, 2) !important;
    background-color: #ffffff !important; /* Цвет кнопки при наведении */
    color: #018B7E !important;
    border: 1px solid #018B7E !important; 
    transform: scale(1.05) !important; /* Увеличение кнопки при наведении */
}

.connect-btn1:active {
    background-color: #ffffff !important; /* Цвет кнопки при наведении */
    color: #018B7E !important;
    border: 1px solid #018B7E !important; 
    transform: scale(1.05) !important; /* Увеличение кнопки при наведении */
    box-shadow: 0 4px 10px rgba(10, 199, 111, 2) !important;
}

.connect-btn1 {
    margin-right: 15px;
}
.connect-btn1:last-child {
    margin-right: 0; /* Убираем отступ у последней кнопки */
}

.view-all-btn {
    margin-top: 55px;
    background-color: #3FA39F !important;
    color: #ffffff !important;
    width: 150px;
}

.btn {
    background-color: #3FA39F; /* Цвет кнопки */
    color: white; /* Цвет текста */
    border: none; /* Убираем рамку */
    border-radius: 25px; /* Закругленные углы */
    padding: 10px 20px; /* Внутренние отступы */
    font-size: 16px; /* Размер шрифта */
    transition: all 0.3s ease; /* Плавный переход для эффектов */
    cursor: pointer; /* Указатель курсора при наведении */
}

/* Эффект при наведении */
.btn:hover {
    background-color: #2e8e7a; /* Более темный оттенок */
    transform: translateY(-3px); /* Поднимаем кнопку вверх */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Тень под кнопкой */
}

/* Эффект при нажатии */
.btn:active {
    transform: translateY(1px); /* Опускаем кнопку при нажатии */
    box-shadow: none; /* Убираем тень при нажатии */
    
}

.btn-custom2 {
    background-color: #3FA39F !important; /* Цвет кнопки */
    color: white !important; /* Цвет текста */
    border: none; /* Убираем рамку */
    border-radius: 25px; /* Закругленные углы */
    padding: 10px 20px; /* Внутренние отступы */
    font-size: 16px; /* Размер шрифта */
    transition: all 0.3s ease; /* Плавный переход для эффектов */
    cursor: pointer; /* Указатель курсора при наведении */
}


.btn-custom3 {
    background-color: #3FA39F !important; /* Цвет кнопки */
    color: white !important; /* Цвет текста */
    border: none; /* Убираем рамку */
    border-radius: 25px; /* Закругленные углы */
    padding: 10; /* Внутренние отступы */
    font-size: 16px; /* Размер шрифта */
    transition: all 0.3s ease; /* Плавный переход для эффектов */
    cursor: pointer; /* Указатель курсора при наведении */
}

.background-block {
    background-color: #F5F5F5;
    padding: 50px 0; /* Отступы сверху и снизу */
}
.divider {
    border: 1px solid #018B7E;
    width: 525px;
    margin: 20px auto; /* Центрирование линии */
}
.custom-img2 {
    width: 100%; /* Полная ширина */
    height: auto; /* Авто высота для сохранения пропорций */
    max-width: 100%; /* Ограничение максимальной ширины */
}




.form-container {
    background-image: url('../img/form-background.jpg'); /* Замените на нужное изображение */
    background-size: cover;
    background-position: center;
    padding: 40px;
    border-radius: 15px;
    max-width: 867px; /* Максимальная ширина */
    width: 100%; /* Ширина на 100% для мобильных */
    height: auto; /* Авто высота, чтобы адаптироваться под содержимое */
    margin: 0 auto; /* Центрирует контейнер по горизонтали */
    display: flex;
    flex-direction: column; /* Установите вертикальную ориентацию для мобильных */
    align-items: center; /* Вертикальное центрирование содержимого */
    justify-content: center; /* Горизонтальное центрирование */
}

.form-container .form-group, .form-container button, .form-container p {
    border-radius: 15px;
}

/* Стили для инпутов */
.form-control {
    height: 50px; /* Высота инпута */
    font-size: 16px; /* Размер текста */
    padding: 10px 15px; /* Внутренние отступы */
    border-radius: 15px !important; /* Скругленные углы */
}

/* Стили для кнопки */
.btn-custom {
    width: 100%; /* Задайте ширину 100% для адаптивности */
    max-width: 250px; /* Максимальная ширина кнопки */
    height: 45px; /* Высота кнопки */
    background-color: #fff !important; /* Цвет фона кнопки */
    border-radius: 15px;
}

/* Стили для строк формы */
.form-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 100%; /* Задайте ширину 100% для адаптивности */
}

/* Стили для выбора тарифа */
.tariff-select1 {
    width: 70% !important;
    margin: 0;
    font-size: 16px; /* Размер текста */
    margin-top: -15px !important;
    border-radius: 15px !important; /* Скругленные углы */
    margin-left: 6px;
}

.tariff-select2 {
    width: 70% !important;
    margin: 0;
    font-size: 16px; /* Размер текста */
    margin-top: -15px !important;
    border-radius: 15px !important; /* Скругленные углы */
    margin-right: 80px;
}



.custom-input {
    width: 100% !important; /* Ширина инпутов 100% */
    margin-left: 5px;
    height: 50px; /* Установите нужную высоту */
    font-size: 16px; /* Размер текста */
    padding: 10px 15px; /* Внутренние отступы */
    border-radius: 15px !important; /* Скругленные углы */

}


#map {
    width: 100%; /* Устанавливаем ширину на 100% */
    height: 500px; /* Установите желаемую высоту */
    border-radius: 20px; /* Закругленные углы */
    overflow: hidden; /* Скрыть переполнение, чтобы углы были гладкими */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Добавляем тень для эффекта */
    margin-top: 25px;
}





h5 {
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
}








.social-icons a{
    text-decoration: none !important; /* Убирает подчеркивание */

}

.social-icons img:hover {
    opacity: 0.8; /* Пример: уменьшение прозрачности, можете изменить по желанию */
    color: inherit; /* Убирает изменение цвета текста при наведении */
}



.custom-help {
    margin-left: 24% !important;
}


.custom-contacts {
    margin-left: -8%;
}



.faq {
    padding: 50px 0;
    background-color: #F5F5F5;
}
.faq h2 {
    margin-bottom: 30px;
    color: #333333;
    font-weight: 600;
}
.faq-item {
    background-color: white;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s;
}
.faq-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.faq-item h5 {
    cursor: pointer;
    color: #018B7E;
    text-transform: none;
}
.faq-item p {
    display: none; /* Скрыть ответ по умолчанию */
    margin-top: 10px;
}

.promotion-block {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.promotion-title {
    color: #018B7E;
    font-size: 2.5rem;
    font-weight: bold;
}

.promotion-subtitle {
    color: #555;
    font-size: 1.25rem;
}

.promotion-details {
    margin-top: 20px;
}

.promotion-item {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.promotion-item .icon {
    font-size: 1.5rem;
    color: #018B7E;
    margin-right: 10px;
}

.connection-info-block {
    background-color: #F9F9F9;
}

.connection-title {
    color: #018B7E;
    font-size: 2.5rem;
    font-weight: bold;
}

.card {
    height: 300px; /* Установите минимальную высоту для карточек */
    transition: transform 0.3s;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрируем содержимое внутри карточек */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-title {
    font-size: 20px;
    color: #333;
    text-transform: none;
}

.card-text {
    color: #555;
}


.summer-promo {
    background-color: #ebebeb; /* Фоновый цвет блока */
    border-radius: 15px; /* Скругление углов блока */
    padding: 30px; /* Внутренний отступ блока */
}

.custom-card {
    background-color: #FFFFFF; /* Фоновый цвет карточки */
    border-radius: 15px; /* Скругление углов карточки */
    padding: 20px; /* Внутренний отступ карточки */
    transition: transform 0.3s; /* Анимация при наведении */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для карточки */
}

.custom-card:hover {
    transform: scale(1.05); /* Увеличение карточки при наведении */
}


.promo-benefits {
    text-align: left; /* Выровнять текст по левому краю */
}



.full-width-bg {
    position: relative; /* Устанавливаем позиционирование для родительского элемента */
    background-image: url('../img/tarifi-fon.jpg'); /* Замените на ваше изображение */
    background-size: cover; /* Заставить изображение покрывать весь блок */
    background-position: center; /* Центрирование изображения */
    color: white; /* Цвет текста */
    padding: 150px 0; /* Отступы сверху и снизу */
    text-align: center; /* Центрирование текста */
}

.full-width-bg::before {
    content: ""; /* Необходим для создания псевдоэлемента */
    position: absolute; /* Позиционирование слоя */
    top: 0; /* Начинаем от верхней границы */
    left: 0; /* Начинаем от левой границы */
    right: 0; /* Заканчиваем на правой границе */
    bottom: 0; /* Заканчиваем на нижней границе */
    background-color: rgba(0, 0, 0, 0.5); /* Черный цвет с прозрачностью 50% */
    z-index: 1; /* Устанавливаем z-index, чтобы слой был над изображением */
}

.full-width-bg h2,
.full-width-bg p {
    position: relative; /* Устанавливаем позиционирование для заголовков */
    z-index: 155; /* Устанавливаем z-index, чтобы текст был над затемнением */
}



.tariff-header2 {
    font-size: 45px !important;
    color: #FFFFFF;
}

.tariff-p {
    font-size: 18px !important;
    color: #FFFFFF;
    font-weight: 400;
}


.button-group button {
    background-color: #018B7E;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 25px;
}

.tariff-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.tariff-title {
margin-bottom: 30px !important;
font-size: 25px !important; 
}

.tariff-card {
    background-color: #018B7E;
    color: white;
    border-radius: 25px;
    width: 340px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 15px rgba(10, 219, 132, 1); /* Тень для карточек */
    transition: box-shadow 0.3s; /* Плавный переход тени */
}

.tariff-card h3 {
    margin: 10px 0;
    font-size: 23px;
    font-weight: bold;
}

.tariff-card .subtitle {
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 10px;
    padding: 5px;
}

.tariff-card img {
    width: 100px;
    margin: 10px 0;
}

.tariff-card .text-container {
    font-size: 16px;
    background-color: white;
    color: black;
    border-radius: 25px;
    padding: 20px;
    text-align: left;
    margin: 10px 0;
    width: 95%; /* Займет 90% ширины карточки */
}


.tariff-card .text-container p {
    margin-left: 5px;
}

.tariff-card .button {
    background-color: white;
    color: #018B7E;
    border: none;
    padding: 10px;
    border-radius: 25px;
    cursor: pointer;
    margin-top: 10px;
    width: 200px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Тень для карточек */
    transition: box-shadow 0.3s; /* Плавный переход тени */
}

#tariff-title {
    display: none; /* Скрываем заголовок изначально */
}

.most-expensive {
    border: 1px solid #58cf13; /* Цвет рамки для самого дорогого тарифа */
    box-shadow: 0 5px 15px rgba(10, 219, 132, 0.856); /* Тень для карточек */
    transform: scale(1.05); /* Немного увеличиваем карточку */
    transition: transform 0.3s; /* Плавный переход для эффекта увеличения */
}

.most-expensive:hover {
    transform: scale(1.1); /* Увеличиваем карточку при наведении */
}

.tariff-button {
    background-color: #018B7E; /* Основной цвет кнопки */
    color: white; /* Цвет текста */
    border: none; /* Без рамки */
    border-radius: 25px; /* Закругленные углы */
    padding: 10px 20px; /* Отступы внутри кнопки */
    cursor: pointer; /* Курсор при наведении */
    font-size: 16px; /* Размер шрифта */
    transition: background-color 0.3s, transform 0.3s; /* Анимация перехода */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.247); /* Тень для кнопок */
}

.tariff-button:hover {
    background-color: #ffffff !important; /* Цвет кнопки при наведении */
    color: #018B7E;
    border: 1px solid #018B7E; 
    transform: scale(1.05); /* Увеличение кнопки при наведении */
    box-shadow: 0 4px 10px rgba(10, 199, 111, 2) !important;
}

.tariff-button:active {
    transform: scale(0.95); /* Уменьшение кнопки при нажатии */
}


.tariff-button:focus {
    outline: none !important; /* Убирает обводку при фокусировке */
    box-shadow: 0 4px 10px rgba(10, 199, 111, 2) !important;
    background-color: #ffffff !important; /* Цвет кнопки при наведении */
    color: #018B7E !important;
    border: 1px solid #018B7E !important; 
    transform: scale(1.05) !important; /* Увеличение кнопки при наведении */
}


.popup {
    display: none; /* Скрыть попап по умолчанию */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.7); /* Прозрачный фон */
}

.popup-content {
    position: relative;
    margin: 15% auto; 
    padding: 20px;
    background-color: white;
    width: 80%; 
    max-width: 500px; 
    border-radius: 5px; 
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}




        .popup { 
            display: none; 
            position: fixed; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            background: rgba(0, 0, 0, 0.667); /* Прозрачный фон */
            padding: 20px; 
            border-radius: 10px; 
            box-shadow: 0 0 10px rgba(0,0,0,0.5) !important; 
            z-index: 1001; /* Обеспечиваем, чтобы попап был выше затемненного фона */
        }
        
        .popup-content { max-width: 500px; width: 100%; }
        
        .close { cursor: pointer; float: right; font-size: 20px; }
        
        /* Стили для инпутов и кнопок */
        .custom-input {
            border: 1px solid #018B7E !important; /* Цвет бордера */
            border-radius: 5px;
        }

        .tariff-select {
            margin-top: 5px !important;
            border: 1px solid #018B7E !important; /* Цвет бордера */
            border-radius: 5px;
        }

        .tariff-select2 {
            border: 1px solid #018B7E !important; /* Цвет бордера */

        }
        #popupLocation {
            text-align: center; /* Выравнивание по центру */
            margin-bottom: 20px; /* Отступ снизу */
        }

        .btn-custom {
            background-color: #018B7E !important; /* Фон кнопки */
            color: white !important; /* Цвет текста */
            border: none; /* Убираем стандартный бордер */
            padding: 10px 20px; /* Отступы внутри кнопки */
            border-radius: 25px !important; /* Скругление углов */
            cursor: pointer; /* Указатель при наведении */
        }

        .btn-custom:hover {
            opacity: 0.8; /* Эффект при наведении */
        }

        textarea.form-control {
            border: 1px solid #018B7E !important; /* Цвет бордера */
            border-radius: 5px; /* Углы */
        }
        

        .popup .close {
    background: none; /* Убирает фон */
    color: #018B7E; /* Цвет текста крестика */
    border: none; /* Убирает границу */
    font-size: 24px; /* Устанавливает размер шрифта, если нужно */
    cursor: pointer; /* Изменяет курсор на указатель при наведении */
} 



footer {
    background-color: #333333; /* Цвет фона футера */
    color: white; /* Цвет текста */
    padding: 20px 0; /* Отступы сверху и снизу */
}

footer .footer-logo {
    width: 150px; /* Ширина логотипа */
}

footer h5 {
    font-size: 17px; /* Размер заголовков */
    text-transform: none; /* Заглавные буквы отключены */
    margin-bottom: 5px; /* Отступ снизу заголовков */
    font-weight: 600;
}

footer a {
    color: white; /* Изначальный цвет ссылок */
    text-decoration: none !important; /* Убираем подчеркивание у ссылок */
    transition: color 0.3s; /* Плавный переход цвета при наведении */
    font-size: 11px;
}

footer a:hover {
    color: #018B7E; /* Цвет ссылок при наведении */
    font-size: 12px; /* Размер ссылок при наведении */
}






.custom-help {
    margin-top: -51px; /* Уменьшите это значение по необходимости */
}



.container-background {
    background-color: #ececec;
    padding: 50px 0;
    width: 100%;
}


.container-background2 {
    position: relative;
    width: 100vw; /* Задает ширину экрана */
    left: 50%; /* Перемещает контейнер к середине экрана */
    right: 50%;
    margin-left: -50vw; /* Смещает влево на полширины экрана */
    margin-right: -50vw;
    background-color: #ececec;
    background-size: cover;
    padding: 50px 0; /* Отступы сверху и снизу */
}


.banner-background {
    position: relative;
    background-image: url('../img/internet-dlya-biznesy.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    height: 500px !important; /* Установите высоту вашего блока по необходимости */

}

.banner-background2 {
    position: relative;
    background-image: url('../img/internet-tv.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    height: 500px !important; /* Установите высоту вашего блока по необходимости */

}


.banner-background3 {
    position: relative;
    background-image: url('../img/Oplata-poslug.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    height: 300px !important; /* Установите высоту вашего блока по необходимости */

}

.banner-background4 {
    position: relative;
    background-image: url('../img/pro-kompaniy.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    height: 300px !important; /* Установите высоту вашего блока по необходимости */

}

.banner-background::before {
    content: ""; /* Пустой контент для псевдоэлемента */
    position: absolute; /* Абсолютное позиционирование для перекрытия */
    top: 0; /* Начальная позиция сверху */
    left: 0; /* Начальная позиция слева */
    right: 0; /* Ширина блока */
    bottom: 0; /* Высота блока */
    background-color: rgba(0, 0, 0, 0.6); /* Черный цвет с прозрачностью (0.5) */
    z-index: 1; /* Устанавливаем z-index, чтобы затемняющий слой был над фоном */
}

.banner-background2::before {
    content: ""; /* Пустой контент для псевдоэлемента */
    position: absolute; /* Абсолютное позиционирование для перекрытия */
    top: 0; /* Начальная позиция сверху */
    left: 0; /* Начальная позиция слева */
    right: 0; /* Ширина блока */
    bottom: 0; /* Высота блока */
    background-color: rgba(0, 0, 0, 0.6); /* Черный цвет с прозрачностью (0.5) */
    z-index: 1; /* Устанавливаем z-index, чтобы затемняющий слой был над фоном */
}


.banner-background3::before {
    content: ""; /* Пустой контент для псевдоэлемента */
    position: absolute; /* Абсолютное позиционирование для перекрытия */
    top: 0; /* Начальная позиция сверху */
    left: 0; /* Начальная позиция слева */
    right: 0; /* Ширина блока */
    bottom: 0; /* Высота блока */
    background-color: rgba(0, 0, 0, 0.6); /* Черный цвет с прозрачностью (0.5) */
    z-index: 1; /* Устанавливаем z-index, чтобы затемняющий слой был над фоном */
}
.banner-background4::before {
    content: ""; /* Пустой контент для псевдоэлемента */
    position: absolute; /* Абсолютное позиционирование для перекрытия */
    top: 0; /* Начальная позиция сверху */
    left: 0; /* Начальная позиция слева */
    right: 0; /* Ширина блока */
    bottom: 0; /* Высота блока */
    background-color: rgba(0, 0, 0, 0.6); /* Черный цвет с прозрачностью (0.5) */
    z-index: 1; /* Устанавливаем z-index, чтобы затемняющий слой был над фоном */
}
.banner-content {
    position: relative; /* Устанавливаем относительное позиционирование для контента */
    z-index: 2; /* Устанавливаем z-index выше, чем у псевдоэлемента */
    padding: 20px; /* Отступы для содержимого */
}

.btn-banner {
    background-color: #018B7E !important;
    color: #fff !important;
    padding: 12px 30px;
    font-size: 14px !important;

}

.btn-banner:hover {
    background-color: #018B7E !important; /* Цвет кнопки при наведении */
    color: #FFFFFF;
    border: 1px solid #018B7E; 
    transform: scale(1.05); /* Увеличение кнопки при наведении */
    box-shadow: 0 4px 10px rgba(10, 199, 111, 2) !important;
}

.lead {
    width: 700px;
}


.price {
    font-weight: bold;
    font-size: 35px;
}

.custom-card-title {
    font-size: 25px;
    font-weight: 600;
    text-transform: none;
}

.working-hours2 {
    font-size: 12px !important;
}

.working-hours {
    font-size: 12px !important;
}



/* Блок с контуром для тарифов */
.border-block {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

/* Стили для изображений в первом блоке */
.img-side {
    width: 100%;
    border-radius: 8px;
}

/* Стили для кнопки */
.btn-banner {
    background-color: #ff5a5f;
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
}





#success-popup .modal-header {
    background-color: #018B7E;
    color: white;
}

#success-popup .modal-body {
    font-size: 16px;
}


/* Стили для фиксированной кнопки */
.chat-bot-button {
    position: fixed;
    bottom: 18px;
    right: 18px;
    background-color: #018B7E;
    color: white;
    padding: 9px 13px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    z-index: 1060;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 10px 24px rgba(1, 139, 126, 0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  }
  
  .chat-bot-button i {
    margin-right: 8px;
    font-size: 20px;
  }
  
  .chat-bot-button span {
    font-weight: bold;
  }
  
  /* Анимация при наведении */
  .chat-bot-button:hover {
    transform: translateY(-2px);
    background-color: #027c71;
    box-shadow: 0 14px 30px rgba(1, 139, 126, 0.36);
    text-decoration: none; /* Убирает подчеркивание */
    color: white; /* Фиксирует цвет текста при наведении */
  }

.service-news-section {
    background: #ffffff;
    padding: 34px 0 42px;
}

.service-news-card {
    background: linear-gradient(135deg, #ffffff 0%, #f2fbfa 100%);
    border: 1px solid rgba(1, 139, 126, 0.18);
    border-left: 6px solid #018B7E;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(1, 139, 126, 0.12);
    box-sizing: border-box;
    padding: 28px;
    width: 100%;
}

.service-news-header {
    max-width: 880px;
}

.service-news-badge {
    display: inline-flex;
    align-items: center;
    background: #018B7E;
    color: #ffffff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    margin-bottom: 14px;
}

.service-news-card h2 {
    color: #263238;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

.service-news-card p {
    color: #4a4a4a;
}

.service-news-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0 18px;
}

.service-news-item {
    background: #ffffff;
    border: 1px solid rgba(1, 139, 126, 0.16);
    border-radius: 8px;
    padding: 16px;
    min-height: 140px;
    box-shadow: 0 8px 18px rgba(38, 50, 56, 0.07);
}

.service-news-item span,
.service-news-item strong,
.service-news-item b {
    display: block;
}

.service-news-item span {
    color: #018B7E;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.service-news-item strong {
    color: #263238;
    font-size: 20px;
    margin-bottom: 8px;
}

.service-news-item p {
    margin: 0;
}

.service-news-item del {
    color: #8a8a8a;
    margin-right: 6px;
}

.service-news-item b {
    color: #018B7E;
    font-size: 18px;
}

.service-news-note {
    background: rgba(1, 139, 126, 0.08);
    border-radius: 8px;
    margin: 0;
    padding: 14px 16px;
}

.promo-card {
    border: 1px solid rgba(1, 139, 126, 0.12) !important;
    border-radius: 8px !important;
    height: 100% !important;
    min-height: 560px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(38, 50, 56, 0.1) !important;
}

.promo-card img {
    height: 190px !important;
    max-height: none !important;
    object-fit: contain;
    background: #018B7E;
}

.promo-card .card-body {
    justify-content: flex-start;
}

.promo-card .card-title {
    color: #263238;
    line-height: 1.25;
}

.promo-card .card-text {
    line-height: 1.45;
}
  
































@media (max-width: 768px) {
    .block-logo {
    order: 3;
    position: absolute; /* Абсолютное позиционирование */
    top: 5px; /* Отступ от верхней грани */
    left: 15px; /* Отступ от правой грани */
    right: 60%;
    z-index: 1050; /* Обеспечить, чтобы логотип был поверх других элементов */
    }

    .block-logo .col-md-2, /* Логотип */
    .block-logo .col-md-8, /* Текст */
    .block-logo .col-md-2:last-child { /* Иконки */
    width: 100%; /* Занять всю ширину */
    margin-bottom: 10px; /* Отступ между элементами */
    display: flex; /* Flexbox для центрирования содержимого */
    justify-content: center; /* Центрирование по горизонтали */
    }

    .block-logo .img-fluid {
    width: 180px;
    max-width: 48vw;
    height: auto; /* Сохранить соотношение сторон */
    }


    .header-bg {
        height:  80px;
    }

    .mr-2 {
        width: 10px;

    }
    .dark-icon {
        display: none;
    }




    .navbar-nav {
    margin-top: 0px; /* Подберите значение по вашему усмотрению */

    }

    .navbar-toggler {
        position: absolute; /* Абсолютное позиционирование */
        top: -55px; /* Отступ от верхней грани */
        right: 15px; /* Отступ от правой грани */
        left: 85%;
        z-index: 1050; /* Обеспечить, чтобы логотип был поверх других элементов */
    }

    #carouselMobile{
        margin-top: 0px; /* Установите нужное значение для поднятия */
        padding: 0px;
    }

    #carouselMobile .carousel-item img {
        height: 400px; /* Убедитесь, что изображение не выходит за рамки */
        padding: 0px;
    }

    
    .carousel-control-prev img,
    .carousel-control-next img {
        width: 15px !important; /* Уменьшенная ширина */
        height: 30px !important; /* Уменьшенная высота */
    }

    .d-flex {
        flex-direction: column; /* Вертикальное выравнивание для мобильных */
    }
    .divider {
        width: 100%; /* Ширина линии на мобильных устройствах */
    }

    .form-row {
        flex-direction: column; /* Вертикальное расположение на мобильных */
      }

    .custom-input {
        max-width: 100%; /* Ширина 100% на мобильных устройствах */
    }


 

    .custom-help {
        margin-left: 0 !important;
    }



    .custom-contacts {
        margin-left: 0;
    }
    
    .dropdown-menu {
        background-color: #ffffff !important; /* Цвет фона подменю */
        
    }
    .dropdown-item {
        color: #018B7E !important;
    }
    .dropdown-item:hover {
        background-color: #018B7E !important; /* Цвет подменю при наведении */
        color:#ffffff !important;
    }


    .tariff-container {
        display: flex;
        flex-direction: column; /* Вертикальное расположение карточек */
        align-items: center; /* Центрируем карточки по горизонтали */
        width: 100%; /* Занимает всю ширину экрана */
    }

    .tariff-card {
        width: 100%; /* Занимает всю ширину карточки в мобильной версии */
        max-width: 340px; /* Ограничение по ширине карточки */
        margin-top: 20px !important; /* Отступ сверху */

    }

    .text-container {
        font-size: 15px !important;
    }
    .tariff-title {
        margin-top: 0px !important;
        margin-bottom: 20px !important;
        font-size: 22px !important; 
        }


        
        .social-icons {
            margin: 0 auto;
        }

        .navbar-nav .nav-item .nav-link {
            border: none;
        }

        .burger2 {
            margin-left: 50px;
        }
        
        .tariff-select2 {

            margin-left: 6px;
        }

        .working-hours {
            text-align: center; /* Центрирование в мобильной версии */
        }
    
        .navbar-nav {
            text-align: left; /* Выровнять навигацию по левому краю */
        }
    
        .header-bg {
            flex-direction: row; /* Убедитесь, что логотип и бургер-меню находятся в одной строке */
            justify-content: space-between; /* Пространство между логотипом и бургер-меню */
            
        }
    
        .icon-text2 {
            text-align: right; /* Выровнять элементы по правому краю в мобильной версии */
            display: none;
        }
        
        .vibir {
            display: none;
        }

        #carouselMobile {
            width: 100vw; /* Полная ширина вьюпорта */
            position: relative; /* Относительное позиционирование */
            left: calc(50% - 50vw); /* Центрирование по горизонтали */
        }

        #carouselMobile img {
            width: 100vw;
            height: auto;
        }

        .nav-link:focus,
        .nav-link:active,
        .nav-link:hover {
        background-color: transparent; /* Убирает фоновый цвет при наведении или активации */
        color: inherit; /* Сохраняет цвет текста без изменений */
        outline: none; /* Убирает обводку вокруг ссылки */

        }


        .lead {
        width: 360px;
        font-size: 14px;
    }

    .mb-4.d-flex {
        flex-direction: row;
    }
    
    .connect-btn1 {
        flex: 1;
        max-width: 100%;
        text-align: center;
    }

    .service-news-section {
        padding: 24px 0 30px;
    }

    .service-news-card {
        padding: 20px;
        max-width: calc(100vw - 30px);
        overflow: hidden;
    }

    .service-news-card h2 {
        font-size: 22px;
        line-height: 1.25;
    }

    .service-news-grid {
        grid-template-columns: 1fr;
    }

    .service-news-item {
        min-height: auto;
    }

    .promo-card {
        min-height: auto;
        width: calc(100vw - 32px) !important;
        max-width: 340px;
        margin: 0 auto;
    }

    .promo-card .card-title,
    .promo-card .card-text {
        overflow-wrap: anywhere;
    }

    .promo-card img {
        height: 180px !important;
    }

    .background-block .container.d-flex {
        flex-direction: column;
    }

    .form-container {
        padding: 24px 18px;
        border-radius: 8px;
    }

    .form-control,
    textarea.form-control {
        font-size: 15px;
    }

    #map {
        height: 360px;
        border-radius: 8px;
    }

    .chat-bot-button {
        right: 12px;
        bottom: 12px;
        padding: 10px;
        width: 46px;
        height: 46px;
        justify-content: center;
    }

    .chat-bot-button i {
        margin-right: 0;
        font-size: 22px;
    }

    .chat-bot-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Modern design pass */
:root {
    --netip-green: #018B7E;
    --netip-green-dark: #027468;
    --netip-green-soft: #eefaf8;
    --netip-ink: #263238;
    --netip-muted: #667179;
    --netip-line: rgba(1, 139, 126, 0.16);
    --netip-shadow: 0 12px 28px rgba(38, 50, 56, 0.11);
    --netip-radius: 8px;
}

body {
    color: var(--netip-ink);
    background-color: #f6f8f8;
}

h1, h2, h3, h4, h5 {
    color: var(--netip-ink);
    letter-spacing: 0;
}

p, li {
    line-height: 1.65;
}

.header-bg,
.header-bg2 {
    background-color: var(--netip-green);
}

.header-bg {
    font-size: 14px;
}

.header-bg a {
    transition: opacity 0.2s ease;
}

.header-bg a:hover {
    opacity: 0.86;
}

.block-logo {
    min-height: 76px;
}

.block-logo .img-fluid {
    max-width: 150px;
}

.vibir {
    color: var(--netip-ink);
    font-weight: 500;
}

.navbar {
    min-height: 56px;
}

.nav-link {
    border-radius: 999px;
    font-weight: 600;
    margin-right: 22px;
    padding: 9px 16px !important;
}

.nav-link:hover,
.nav-link:focus {
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.dropdown-menu {
    border: 0;
    border-radius: var(--netip-radius);
    box-shadow: var(--netip-shadow);
    margin-top: 8px;
    padding: 8px;
}

.dropdown-item {
    border-radius: 6px;
    font-weight: 500;
    padding: 9px 12px;
}

.carousel-item img {
    border-radius: var(--netip-radius);
    object-fit: cover;
}

.home-hero-actions {
    margin: 24px auto 12px;
}

.home-hero-panel {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--netip-line);
    border-radius: var(--netip-radius);
    box-shadow: var(--netip-shadow);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 22px 24px;
}

.home-hero-panel h1 {
    font-size: 28px;
    font-weight: 750;
    margin: 0 0 8px;
}

.home-hero-panel p {
    color: var(--netip-muted);
    margin: 0;
}

.home-hero-panel .btn {
    flex: 0 0 auto;
}

.btn,
.btn-custom,
.btn-banner,
.connect-btn,
.tariff-button,
.tariff-card .button {
    border-radius: 999px !important;
    font-weight: 700;
    min-height: 44px;
}

.btn-custom,
.btn-banner,
.connect-btn1,
.connect-btn2,
.tariff-button {
    background-color: var(--netip-green) !important;
    color: #ffffff !important;
}

.btn-custom:hover,
.btn-banner:hover,
.connect-btn1:hover,
.connect-btn2:hover,
.tariff-button:hover {
    background-color: var(--netip-green-dark) !important;
    border-color: var(--netip-green-dark) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(1, 139, 126, 0.24) !important;
}

.container-background,
.container-background2,
.faq,
.background-block,
.connection-info-block {
    background-color: #f4f7f7;
}

.tariff-card,
.custom-card,
.custom-card2,
.card,
.faq-item,
.contact-box,
.border-block {
    border: 1px solid var(--netip-line) !important;
    border-radius: var(--netip-radius) !important;
    box-shadow: 0 8px 20px rgba(38, 50, 56, 0.08) !important;
}

.tariff-card {
    box-shadow: 0 12px 24px rgba(1, 139, 126, 0.18) !important;
}

.tariff-card:hover,
.card:hover,
.custom-card:hover,
.faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(38, 50, 56, 0.14) !important;
}

.tariff-card .text-container {
    border-radius: var(--netip-radius);
}

.full-width-bg,
.banner-background,
.banner-background2,
.banner-background3,
.banner-background4 {
    min-height: 360px;
    padding: 88px 0;
}

.full-width-bg .container,
.banner-content {
    max-width: 920px;
}

.tariff-header2,
.banner-content h1,
.banner-content h2 {
    font-size: clamp(30px, 5vw, 52px) !important;
    font-weight: 800;
    line-height: 1.12;
}

.tariff-p,
.lead {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 18px !important;
    line-height: 1.7;
    max-width: 760px;
    width: auto;
}

.form-container,
.modal-content {
    border: 1px solid var(--netip-line);
    border-radius: var(--netip-radius);
    box-shadow: var(--netip-shadow);
}

.form-container {
    overflow: hidden;
}

.form-control,
.tariff-select,
.tariff-select1,
.tariff-select2,
textarea.form-control {
    border: 1px solid rgba(1, 139, 126, 0.26) !important;
    border-radius: var(--netip-radius) !important;
}

.form-control:focus,
textarea.form-control:focus,
.tariff-select:focus,
.tariff-select1:focus,
.tariff-select2:focus {
    border-color: var(--netip-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 139, 126, 0.13) !important;
}

.contact-box {
    background: #ffffff !important;
    padding: 34px !important;
}

.contact-box .row a {
    align-items: center;
    background: var(--netip-green-soft);
    border: 1px solid var(--netip-line);
    border-radius: var(--netip-radius);
    display: flex;
    gap: 12px;
    justify-content: center;
    min-height: 88px;
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-box .row a:hover {
    box-shadow: 0 10px 22px rgba(1, 139, 126, 0.14);
    color: var(--netip-green-dark) !important;
    transform: translateY(-2px);
}

.contact-box .row p {
    font-weight: 700;
    margin: 0 !important;
}

.contact-icon {
    color: var(--netip-green) !important;
}

.promo-card img {
    object-fit: contain !important;
}

footer {
    background: #263238;
    padding: 34px 0;
}

footer a:hover {
    color: #7de1d6;
    font-size: inherit;
}

@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--netip-green);
        border-radius: var(--netip-radius);
        box-shadow: var(--netip-shadow);
        margin-top: 12px;
        padding: 16px;
    }

    .nav-link {
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .home-hero-panel {
        align-items: stretch;
        flex-direction: column;
        padding: 18px;
    }

    .home-hero-panel h1 {
        font-size: 24px;
    }

    .full-width-bg,
    .banner-background,
    .banner-background2,
    .banner-background3,
    .banner-background4 {
        min-height: 300px;
        padding: 56px 0;
    }

    .contact-box {
        padding: 22px !important;
    }

    .contact-box .row a {
        justify-content: flex-start;
        min-height: 72px;
    }
}

/* Night Network theme */
:root {
    --night-bg: #07131c;
    --night-bg-soft: #0d1b27;
    --night-panel: rgba(13, 27, 39, 0.88);
    --night-panel-strong: #102231;
    --night-panel-alt: #13293b;
    --night-border: rgba(120, 230, 220, 0.14);
    --night-border-strong: rgba(120, 230, 220, 0.26);
    --night-text: #e9f2f7;
    --night-muted: #95aabd;
    --night-accent: #34d3c4;
    --night-accent-strong: #16b3a4;
    --night-shadow: 0 18px 48px rgba(1, 8, 14, 0.42);
}

html,
body {
    background:
        radial-gradient(circle at top right, rgba(52, 211, 196, 0.10), transparent 28%),
        radial-gradient(circle at 15% 20%, rgba(62, 121, 255, 0.08), transparent 24%),
        linear-gradient(180deg, #06111a 0%, #091723 38%, #0b1721 100%) !important;
    color: var(--night-text) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.16;
    z-index: -1;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.tariff-title,
.connection-title,
.promotion-title,
.tariff-header,
.tariff-header2 {
    color: var(--night-text) !important;
}

p,
li,
label,
strong,
span,
.card-text,
.working-hours,
.working-hours2,
footer a,
footer li {
    color: var(--night-muted);
}

a {
    transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.container,
.container-fluid {
    position: relative;
    z-index: 1;
}

.header-bg,
.header-bg2,
.navbar-collapse {
    background:
        linear-gradient(180deg, rgba(9, 24, 35, 0.96), rgba(7, 19, 28, 0.96)) !important;
    border-bottom: 1px solid rgba(120, 230, 220, 0.10);
}

.header-bg {
    box-shadow: 0 10px 30px rgba(2, 9, 14, 0.24);
}

.header-bg a,
.header-bg span,
.header-bg i,
.nav-link,
.dropdown-item,
.navbar-nav .nav-link {
    color: var(--night-text) !important;
}

.nav-link {
    background: transparent !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {
    background: rgba(52, 211, 196, 0.12) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(52, 211, 196, 0.12);
}

.dropdown-menu {
    background: rgba(11, 25, 37, 0.98) !important;
    border: 1px solid var(--night-border) !important;
    box-shadow: var(--night-shadow) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(52, 211, 196, 0.10) !important;
    color: #ffffff !important;
}

.navbar-toggler {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(120, 230, 220, 0.16) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px);
}

.block-logo {
    border-bottom: 1px solid rgba(120, 230, 220, 0.08);
}

.block-logo .img-fluid,
footer .footer-logo {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    padding: 10px 14px;
}

.vibir {
    color: #d5e2eb !important;
}

.dark-icon {
    filter: brightness(1.15) saturate(0) invert(1);
    opacity: 0.92;
}

.carousel-item img,
#carouselMobile .carousel-item img {
    border: 1px solid rgba(120, 230, 220, 0.12);
    box-shadow: 0 20px 48px rgba(1, 7, 12, 0.46);
}

.carousel-control-prev img,
.carousel-control-next img {
    filter: brightness(1.4) saturate(0) invert(1);
}

.home-hero-panel,
.service-news-card,
.faq-item,
.contact-box,
.promotion-block,
.connection-info-block,
.custom-card,
.custom-card2,
.card,
.popup-content,
.modal-content,
.border-block,
.left-side,
.right-side,
.calculator-container > div {
    background: var(--night-panel) !important;
    border: 1px solid var(--night-border) !important;
    box-shadow: var(--night-shadow) !important;
    color: var(--night-text) !important;
    backdrop-filter: blur(12px);
}

.home-hero-panel,
.service-news-card,
.contact-box,
.form-container,
.popup-content,
.modal-content,
.faq-item,
.card,
.custom-card,
.custom-card2,
.tariff-card,
.promo-card {
    border-radius: 14px !important;
}

.home-hero-panel p,
.service-news-card p,
.card-text,
.faq-item p,
.custom-card-text,
.custom-card .card-text,
.custom-card2 .custom-card-text,
.summary-info,
.summary-item,
.tariff-p,
.lead,
.service-news-note,
.promotion-subtitle,
.promotion-item,
.connection-title + p {
    color: var(--night-muted) !important;
}

.service-news-section,
.container-background,
.container-background2,
.background-block,
.faq,
.summer-promo,
.connection-info-block,
.full-width-bg + .container-background,
.full-width-bg + .container,
.banner-background + .container-background {
    background: transparent !important;
}

.service-news-card {
    background:
        linear-gradient(145deg, rgba(15, 30, 43, 0.96), rgba(11, 23, 33, 0.90)) !important;
    border-left: 4px solid var(--night-accent) !important;
}

.service-news-badge,
.contact-box .row a,
.chat-bot-button,
.btn,
.btn-custom,
.btn-banner,
.connect-btn,
.connect-btn1,
.connect-btn2,
.tariff-button,
.tariff-card .button,
.view-all-btn {
    background:
        linear-gradient(135deg, #14baa9 0%, #1ea8cc 100%) !important;
    border: 0 !important;
    color: #f5fbff !important;
    box-shadow: 0 12px 28px rgba(20, 186, 169, 0.28) !important;
}

.btn:hover,
.btn-custom:hover,
.btn-banner:hover,
.connect-btn:hover,
.connect-btn1:hover,
.connect-btn2:hover,
.tariff-button:hover,
.tariff-card .button:hover,
.view-all-btn:hover,
.chat-bot-button:hover,
.contact-box .row a:hover {
    background:
        linear-gradient(135deg, #1bd5c3 0%, #36b9ff 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(21, 197, 181, 0.34) !important;
}

.contact-box .row a {
    justify-content: flex-start;
    min-height: 82px;
}

.contact-box .row p,
.contact-box .row i {
    color: #ffffff !important;
}

.service-news-item,
.tariff-card .text-container,
.promo-card .card-body,
.card-body,
.faq-item,
.summary-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(120, 230, 220, 0.10) !important;
}

.service-news-item {
    border: 1px solid rgba(120, 230, 220, 0.12);
}

.service-news-item span,
.service-news-item b,
.service-news-item strong,
.price,
.promotion-item .icon,
.contact-icon,
.tariff-card .subtitle {
    color: var(--night-accent) !important;
}

.service-news-item del {
    color: rgba(233, 242, 247, 0.38) !important;
}

.service-news-note {
    background: rgba(52, 211, 196, 0.08) !important;
}

.tariff-card,
.promo-card,
.card,
.custom-card,
.custom-card2 {
    background:
        linear-gradient(180deg, rgba(15, 30, 43, 0.92), rgba(10, 21, 31, 0.92)) !important;
}

.tariff-card {
    color: var(--night-text) !important;
}

.tariff-card .text-container {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--night-text) !important;
}

.tariff-card p,
.tariff-card h3,
.tariff-card .subtitle,
.tariff-card .text-container p,
.card-title,
.card-body p,
.faq-item h5,
.summary-item span {
    color: var(--night-text) !important;
}

.tariff-card img,
.tariff-image,
.tariff-image2,
.card img,
.card-img-top,
.custom-img2,
.img-side {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.promo-card img {
    background:
        linear-gradient(135deg, rgba(26, 212, 195, 0.14), rgba(58, 138, 255, 0.10)),
        #102231 !important;
}

.form-container {
    background:
        linear-gradient(135deg, rgba(14, 28, 40, 0.92), rgba(10, 23, 34, 0.94)),
        url('../img/form-background.jpg') center/cover !important;
    background-blend-mode: overlay;
}

.form-control,
.tariff-select,
.tariff-select1,
.tariff-select2,
textarea.form-control,
select.form-control,
input.form-control {
    background: rgba(5, 14, 21, 0.82) !important;
    color: var(--night-text) !important;
    border: 1px solid rgba(120, 230, 220, 0.16) !important;
}

.form-control::placeholder,
textarea.form-control::placeholder,
input::placeholder {
    color: rgba(233, 242, 247, 0.42) !important;
}

.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
input.form-control:focus {
    background: rgba(7, 19, 28, 0.96) !important;
    color: #ffffff !important;
    border-color: rgba(52, 211, 196, 0.55) !important;
    box-shadow: 0 0 0 0.18rem rgba(52, 211, 196, 0.12) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(120, 230, 220, 0.10) !important;
}

.modal-title,
.modal-body,
.modal-body p,
.modal-body label {
    color: var(--night-text) !important;
}

.popup {
    background: rgba(1, 7, 12, 0.76) !important;
}

#map {
    border: 1px solid rgba(120, 230, 220, 0.12);
    box-shadow: 0 18px 48px rgba(1, 7, 12, 0.40);
}

.home-connect-target {
    scroll-margin-top: 128px;
}

.site-validated-form .form-group {
    position: relative;
}

.site-validated-form .field-invalid {
    border-color: #ff7f8d !important;
    box-shadow: 0 0 0 3px rgba(255, 127, 141, 0.16), 0 0 24px rgba(255, 127, 141, 0.10) !important;
    animation: fieldAttention 0.34s ease;
}

.site-validated-form .field-error {
    min-height: 18px;
    margin-top: 7px;
    color: #ffb8c1;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

@keyframes fieldAttention {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-4px);
    }
    60% {
        transform: translateX(4px);
    }
    100% {
        transform: translateX(0);
    }
}

#map .leaflet-control-attribution,
#map .leaflet-control-zoom a {
    background: rgba(10, 20, 32, 0.92);
    color: rgba(230, 244, 246, 0.88);
    border-color: rgba(120, 230, 220, 0.14);
}

#map .leaflet-control-attribution a {
    color: #67d9d3;
}

#map .leaflet-popup-content-wrapper,
#map .leaflet-popup-tip {
    background: #0f2231;
    color: #eef7f7;
    box-shadow: 0 18px 44px rgba(1, 7, 12, 0.34);
}

.coverage-marker {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50%;
    border: 3px solid rgba(238, 247, 247, 0.95);
    background: radial-gradient(circle at 35% 35%, #7cf2ea 0%, #34d3d6 55%, #1093c7 100%);
    box-shadow: 0 0 0 4px rgba(52, 211, 214, 0.18), 0 10px 24px rgba(1, 7, 12, 0.34);
}

.coverage-marker::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(103, 217, 211, 0.24);
}

.divider {
    border-color: rgba(52, 211, 196, 0.42);
}

.full-width-bg,
.banner-background,
.banner-background2,
.banner-background3,
.banner-background4 {
    background-color: #091723 !important;
    border-top: 1px solid rgba(120, 230, 220, 0.08);
    border-bottom: 1px solid rgba(120, 230, 220, 0.08);
    overflow: hidden;
    position: relative;
}

.full-width-bg::after,
.banner-background::after,
.banner-background2::after,
.banner-background3::after,
.banner-background4::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(52, 211, 196, 0.14), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(58, 138, 255, 0.12), transparent 20%);
    pointer-events: none;
    z-index: 1;
}

.full-width-bg::before,
.banner-background::before,
.banner-background2::before,
.banner-background3::before,
.banner-background4::before {
    background: linear-gradient(180deg, rgba(5, 12, 19, 0.72), rgba(6, 14, 21, 0.80)) !important;
}

.full-width-bg h2,
.full-width-bg p,
.banner-content,
.banner-content h1,
.banner-content h2,
.banner-content p {
    position: relative;
    z-index: 2;
}

footer {
    background:
        linear-gradient(180deg, rgba(7, 18, 27, 0.98), rgba(4, 10, 16, 0.98)) !important;
    border-top: 1px solid rgba(120, 230, 220, 0.10);
}

footer h5,
footer strong,
footer a,
footer li,
footer p {
    color: #d7e6ee !important;
}

footer a:hover {
    color: var(--night-accent) !important;
}

.chat-bot-button {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

#success-popup .modal-header {
    background:
        linear-gradient(135deg, #14baa9 0%, #1ea8cc 100%) !important;
}

@media (max-width: 991px) {
    .navbar-collapse {
        border: 1px solid rgba(120, 230, 220, 0.10);
    }
}

@media (max-width: 768px) {
    .block-logo {
        background: transparent !important;
        border-bottom: 0;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        min-height: auto;
        order: initial !important;
        padding: 14px 0 8px;
        position: relative !important;
    }

    .block-logo .img-fluid {
        max-width: 180px;
    }

    .block-logo .col-md-2,
    .block-logo .col-md-8,
    .block-logo .d-flex {
        justify-content: flex-start !important;
    }

    .header-bg {
        background: linear-gradient(180deg, rgba(7, 19, 28, 0.98), rgba(8, 22, 32, 0.98)) !important;
        height: auto !important;
        min-height: 80px;
    }

    .home-hero-panel,
    .service-news-card,
    .contact-box,
    .promo-card,
    .tariff-card,
    .faq-item {
        border-radius: 12px !important;
    }

    .contact-box .row a {
        min-height: 70px;
    }

    .navbar-toggler {
        left: auto !important;
        right: 16px !important;
        top: 14px !important;
    }
}

/* Header and button fixes after production pass */
.btn,
.btn-custom,
.btn-banner,
.connect-btn,
.connect-btn1,
.connect-btn2,
.tariff-button,
.tariff-card .button,
.view-all-btn,
.chat-bot-button {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.btn-custom,
.btn-banner,
.connect-btn,
.connect-btn1,
.connect-btn2,
.tariff-button,
.tariff-card .button,
.view-all-btn {
    min-height: 46px;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

.chat-bot-button {
    min-height: 42px;
}

@media (max-width: 768px) {
    html,
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .header-bg {
        display: none !important;
    }

    .block-logo {
        align-items: center !important;
        display: flex !important;
        justify-content: flex-start !important;
        margin: 0;
        min-height: 72px;
        overflow: visible !important;
        padding: 10px 86px 10px 14px !important;
        position: relative;
        z-index: 8;
    }

    .block-logo .col-md-8,
    .block-logo .d-flex {
        display: none !important;
    }

    .block-logo .col-md-2 {
        flex: 0 0 auto;
        margin: 0 !important;
        max-width: none;
        width: auto;
    }

    .block-logo .img-fluid {
        display: block;
        margin: 0;
        max-width: 124px;
    }

    .header-bg2 {
        background: transparent !important;
        border-bottom: 0 !important;
        margin-top: 0;
        min-height: 0;
        overflow: visible;
        position: relative;
        z-index: 6;
    }

    .burger-menu {
        justify-content: flex-end !important;
        min-height: 0;
        overflow: visible;
        padding: 0 14px 6px;
        position: relative;
    }

    .block-logo .navbar-toggler {
        left: auto !important;
        margin: 0 !important;
        padding: 5px 7px !important;
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 20;
    }

    .block-logo .navbar-toggler img {
        display: block;
        height: 22px !important;
        width: 30px !important;
    }

    .navbar-collapse {
        background: rgba(10, 22, 32, 0.98) !important;
        border: 1px solid rgba(120, 230, 220, 0.12) !important;
        border-radius: 14px !important;
        box-shadow: 0 20px 40px rgba(1, 8, 14, 0.36) !important;
        margin-top: 10px;
        padding: 16px 14px 14px !important;
    }

    .navbar-collapse .navbar-nav {
        gap: 4px;
    }

    .navbar-collapse .nav-item {
        width: 100%;
    }

    .navbar-collapse .nav-link,
    .navbar-collapse .dropdown-item {
        border-radius: 10px !important;
        display: block;
        min-height: 48px;
        padding: 12px 14px !important;
        transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .navbar-collapse .nav-link.dropdown-toggle {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link:focus,
    .navbar-collapse .nav-link:active,
    .navbar-collapse .nav-link.tap-active,
    .navbar-collapse .dropdown-item:hover,
    .navbar-collapse .dropdown-item:focus,
    .navbar-collapse .dropdown-item:active,
    .navbar-collapse .dropdown-item.tap-active {
        background: rgba(52, 211, 196, 0.12) !important;
        color: #ffffff !important;
        box-shadow: inset 0 0 0 1px rgba(52, 211, 196, 0.16);
        transform: translateY(1px);
    }

    .navbar-collapse .dropdown-menu {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(120, 230, 220, 0.10) !important;
        border-radius: 10px !important;
        margin: 6px 0 10px !important;
        padding: 6px !important;
        position: static !important;
        transform: none !important;
        width: 100%;
    }

    .navbar-collapse .dropdown-menu .dropdown-item {
        min-height: 42px;
        padding: 10px 12px !important;
    }

    .navbar-collapse .show > .nav-link.dropdown-toggle {
        background: rgba(52, 211, 196, 0.14) !important;
        color: #ffffff !important;
    }

    .navbar-collapse .d-lg-none .nav-link,
    .navbar-collapse .d-lg-none a {
        align-items: center;
        display: flex;
        gap: 10px;
    }

    .navbar-collapse .d-lg-none img,
    .navbar-collapse .d-lg-none i {
        flex: 0 0 auto;
    }
}

/* Company and documents pages */
.docs-page-shell,
.company-page-shell {
    background: linear-gradient(180deg, rgba(15, 30, 43, 0.94), rgba(10, 21, 31, 0.92)) !important;
    border: 1px solid rgba(120, 230, 220, 0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 48px rgba(1, 8, 14, 0.42) !important;
}

.docs-page-shell h1,
.docs-page-shell p,
.company-page-shell h1,
.company-page-shell h2,
.company-page-shell h3,
.company-page-shell p,
.company-page-shell li {
    color: #e9f2f7 !important;
}

.docs-page-shell > .row:first-child p,
.company-page-shell .text-muted,
.company-page-shell p.text-muted,
.company-page-shell ul.text-muted li {
    color: #a8bbc8 !important;
}

.company-page-shell img {
    border-radius: 12px !important;
    box-shadow: 0 18px 36px rgba(1, 8, 14, 0.28);
}

.company-page-shell .bi,
.company-page-shell [style*="#018B7E"] {
    color: var(--night-accent) !important;
}

.docs-list-group {
    background: transparent;
    gap: 14px;
}

.docs-list-group .list-group-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(120, 230, 220, 0.10) !important;
    border-radius: 12px !important;
    color: #e9f2f7 !important;
    margin-bottom: 14px;
    padding: 18px 20px;
}

.docs-list-group .list-group-item a {
    color: #e9f2f7 !important;
    font-weight: 500;
}

.docs-list-group .list-group-item a:hover {
    color: var(--night-accent) !important;
    text-decoration: none;
}

.docs-list-group .badge,
.docs-list-group .bg-primary {
    background: linear-gradient(135deg, #14baa9 0%, #1ea8cc 100%) !important;
    border: 0 !important;
    color: #f5fbff !important;
    font-weight: 700;
    min-width: 58px;
}

.pdf-icon {
    color: var(--night-accent) !important;
    margin-right: 10px;
}

@media (max-width: 768px) {
    .docs-page-shell,
    .company-page-shell {
        padding: 24px 18px !important;
    }

    .docs-list-group .list-group-item {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 12px;
    }
}

/* Playful chat button */
.chat-bot-button {
    align-items: center !important;
    background: linear-gradient(135deg, #1ed1c3 0%, #27b7d9 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 999px !important;
    box-shadow:
        0 14px 36px rgba(15, 182, 201, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
    color: #ffffff !important;
    display: inline-flex !important;
    gap: 9px;
    overflow: hidden;
    padding: 10px 16px 10px 12px !important;
    position: fixed;
}

.chat-bot-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 22%, rgba(255, 255, 255, 0.22) 48%, transparent 70%);
    opacity: 0;
    transform: translateX(-140%);
    pointer-events: none;
}

.chat-bot-button i {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    color: #159fb4 !important;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    margin-right: 0 !important;
    min-width: 32px;
    width: 32px;
}

.chat-bot-button span {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px;
    letter-spacing: 0;
    opacity: 1;
    position: relative;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.chat-bot-button:hover,
.chat-bot-button:focus {
    box-shadow:
        0 18px 40px rgba(15, 182, 201, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.01);
}

.chat-bot-button:hover::before,
.chat-bot-button:focus::before {
    animation: chatButtonShine 0.8s ease;
}

.chat-bot-button:active {
    transform: translateY(-1px) scale(0.985);
}

.chat-bot-button {
    animation: chatButtonIdle 9s ease-in-out infinite;
}

@keyframes chatButtonIdle {
    0%, 78%, 100% {
        transform: translateY(0) scale(1);
    }
    82% {
        transform: translateY(-3px) scale(1.015);
    }
    86% {
        transform: translateY(0) scale(1);
    }
    90% {
        transform: translateY(-1px) scale(1.005);
    }
}

@keyframes chatButtonShine {
    0% {
        opacity: 0;
        transform: translateX(-140%);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(140%);
    }
}

@media (max-width: 768px) {
    .chat-bot-button {
        bottom: 12px !important;
        padding: 8px !important;
        right: 12px !important;
        width: 46px !important;
        height: 46px !important;
        justify-content: center !important;
    }

    .chat-bot-button i {
        font-size: 19px !important;
        height: 28px;
        min-width: 28px;
        width: 28px;
    }

    .chat-bot-button span {
        clip: rect(0, 0, 0, 0) !important;
        height: 1px !important;
        overflow: hidden !important;
        position: absolute !important;
        white-space: nowrap;
        width: 1px !important;
    }

}

/* Final polish: forms, mobile taps, accents */
.form-error-summary {
    background: rgba(255, 127, 141, 0.12);
    border: 1px solid rgba(255, 127, 141, 0.30);
    border-radius: 12px;
    color: #ffd4db;
    display: none;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 16px;
    padding: 12px 14px;
    text-align: left;
}

.form-error-summary.is-visible {
    display: block;
}

.site-validated-form.is-submitting {
    opacity: 0.86;
    pointer-events: none;
}

.site-form-notice {
    align-items: center;
    background: linear-gradient(145deg, rgba(14, 31, 45, 0.98), rgba(8, 20, 30, 0.98));
    border: 1px solid rgba(120, 230, 220, 0.20);
    border-radius: 14px;
    bottom: 24px;
    box-shadow: 0 20px 48px rgba(1, 8, 14, 0.48);
    color: #eef7f7;
    display: flex;
    gap: 14px;
    max-width: min(420px, calc(100vw - 28px));
    opacity: 0;
    padding: 16px 46px 16px 16px;
    pointer-events: none;
    position: fixed;
    right: 24px;
    transform: translateY(18px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 4000;
}

.site-form-notice.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.site-form-notice__icon {
    align-items: center;
    background: linear-gradient(135deg, #14baa9 0%, #1ea8cc 100%);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.site-form-notice__icon::before {
    content: "✓";
    font-size: 21px;
    font-weight: 800;
}

.site-form-notice.is-error .site-form-notice__icon {
    background: linear-gradient(135deg, #ff7f8d 0%, #ffb86b 100%);
}

.site-form-notice.is-error .site-form-notice__icon::before {
    content: "!";
}

.site-form-notice strong {
    color: #ffffff;
    display: block;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.site-form-notice p {
    color: #a8bbc8;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.site-form-notice__close {
    background: transparent;
    border: 0;
    color: rgba(238, 247, 247, 0.72);
    font-size: 24px;
    line-height: 1;
    padding: 4px;
    position: absolute;
    right: 12px;
    top: 10px;
}

.service-news-table-wrap {
    margin: 22px 0 18px;
    overflow-x: auto;
}

.service-news-table {
    border-collapse: separate;
    border-spacing: 0;
    color: #e9f2f7;
    min-width: 680px;
    width: 100%;
}

.service-news-table th,
.service-news-table td {
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(120, 230, 220, 0.10);
    padding: 14px 16px;
    text-align: left;
}

.service-news-table th {
    color: #7ce7df;
    font-size: 13px;
    text-transform: uppercase;
}

.service-news-table td:first-child,
.service-news-table strong {
    color: #ffffff;
    font-weight: 800;
}

.service-news-table del {
    color: rgba(233, 242, 247, 0.42);
}

.btn,
.btn-custom,
.btn-banner,
.connect-btn,
.connect-btn1,
.connect-btn2,
.tariff-button,
.tariff-card .button,
.view-all-btn {
    min-width: 148px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.nav-link.active,
.dropdown-item.active,
.navbar-collapse .nav-link.tap-active,
.navbar-collapse .dropdown-item.tap-active {
    background: rgba(52, 211, 196, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(52, 211, 196, 0.24), 0 8px 22px rgba(20, 186, 169, 0.14) !important;
    color: #ffffff !important;
}

.navbar-collapse .nav-link,
.navbar-collapse .dropdown-item,
.btn,
.btn-custom,
.btn-banner,
.connect-btn,
.connect-btn1,
.connect-btn2,
.tariff-button,
.tariff-card .button {
    user-select: none;
}

.tariff-card h3 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px !important;
}

.tariff-card-name {
    color: rgba(233, 242, 247, 0.82);
    font-size: 15px;
    font-weight: 700;
}

.tariff-card-speed {
    color: #7ce7df;
    font-size: clamp(25px, 4vw, 34px);
    font-weight: 850;
    line-height: 1.05;
}

.tariff-card .subtitle,
.price,
.summary-total,
.summary-total span {
    color: #78f0df !important;
    font-weight: 850 !important;
}

.tariff-card .text-container p {
    align-items: center;
    border-bottom: 1px solid rgba(120, 230, 220, 0.07);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    line-height: 1.35;
    margin: 0 !important;
    padding: 10px 0;
}

.tariff-card .text-container p:last-child {
    border-bottom: 0;
}

@media (max-width: 768px) {
    .d-flex.header-bg {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    body > .container:first-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .site-form-notice {
        bottom: 82px;
        left: 14px;
        right: 14px;
        max-width: none;
        padding-right: 44px;
    }

    .service-news-table {
        min-width: 0;
    }

    .service-news-table thead {
        display: none;
    }

    .service-news-table,
    .service-news-table tbody,
    .service-news-table tr,
    .service-news-table td {
        display: block;
        width: 100%;
    }

    .service-news-table tr {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(120, 230, 220, 0.10);
        border-radius: 12px;
        margin-bottom: 12px;
        overflow: hidden;
    }

    .service-news-table td {
        align-items: center;
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 11px 14px;
    }

    .service-news-table td::before {
        color: #7ce7df;
        content: attr(data-label);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .chat-bot-button {
        bottom: max(22px, env(safe-area-inset-bottom, 0px) + 18px) !important;
        right: 14px !important;
    }

    .navbar-collapse .nav-link:active,
    .navbar-collapse .dropdown-item:active,
    .navbar-collapse .nav-link.tap-active,
    .navbar-collapse .dropdown-item.tap-active {
        background: rgba(52, 211, 196, 0.22) !important;
        transform: scale(0.985);
    }

    .btn,
    .btn-custom,
    .btn-banner,
    .connect-btn,
    .connect-btn1,
    .connect-btn2,
    .tariff-button,
    .tariff-card .button,
    .view-all-btn {
        min-height: 48px;
        width: 100%;
    }

    .tariff-card {
        width: 100% !important;
    }

    .tariff-card .text-container p {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
        text-align: left;
    }
}