{% load static %}

:root {
    --bs-form-select-bg: #fff; /* Цвет фона для селектора */
    --bs-form-select-border: #ced4da; /* Цвет рамки */
    --bs-form-select-focus-border: #000; /* Цвет рамки при фокусе */
    --bs-form-select-color: #000; /* Цвет текста */
}

/* Основные стили */
.form-select {
    background-color: var(--bs-form-select-bg) !important; /* Фон */
    color: var(--bs-form-select-color) !important; /* Цвет текста */
    border: 1px solid var(--bs-form-select-border) !important; /* Цвет рамки */
    border-radius: 0.25rem !important; /* Скругление углов */
    padding: 0.375rem 0.75rem !important; /* Внутренние отступы */
    appearance: none; /* Убираем стандартный стиль браузера */
}

/* Стили при наведении */
 .form-select:hover {
    box-shadow: none !important; 
}

/* Стили при фокусе */
/* .form-select:focus {
    border-color: var(--bs-form-select-focus-border) !important; Цвет рамки при фокусе
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25) !important; Эффект тени при фокусе
    outline: none !important; Убираем стандартный контур
} */

/* Стили для выбранного элемента */
/* .form-select option {
    background-color: #fff; Цвет фона для вариантов
    color: #000; Цвет текста для вариантов
} */

/* Изменение фона и цвета текста для выбранного элемента */
/* .form-select option:checked {
    background-color: var(--bs-form-select-bright-bg) !important; Цвет фона выбранного элемента
    color: var(--bs-form-select-color) !important; Цвет текста выбранного элемента
} */

/* Стили при наведении на опции */
/* .form-select option:hover {
    background-color: #f8f9fa; Цвет фона при наведении на опции
    color: #000; Цвет текста при наведении на опции
} */

body {
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
}

h2 {
    font-weight: 700;
}

p {
    font-family: 'Arial', sans-serif;
    font-size: 1.1rem;
}

.purchase-process h3 {
    font-weight: 700;
    font-size: 1.20rem;
}

.faq-container h3 {
    font-weight: 500;
    font-size: 1.20rem;
}

body.light-theme {
    background-color: #ffffff; /* Светлый фон */
    color: #000000; /* Темный текст */
}

body.dark-theme {
    background-color: #000000; /* Темный фон */
    color: #ffffff; /* Белый текст */
}

.navbar-dark {
    background-color: #212529; /* Темный фон для навигации */
    color: white; /* Цвет текста для навигации */
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: white; /* Белый цвет для ссылок */
}

/* Основные стили для иконок */
.icon-light {
    color: dark; /* Цвет иконки солнца в светлой теме (можно изменить) */
}

.icon-dark {
    color: white;  /* Цвет иконки луны в темной теме */
}

/* При темной теме задаем белый цвет для иконки луны */
.dark-theme .fa-moon {
    color: white;  /* Убедитесь, что луна белого цвета */
}

/* При светлой теме добавляем желтый цвет для иконки солнца */
.light-theme .fa-sun {
    color: dark; /* Убедитесь, что солнце желтого цвета */
}

/* Стили для кнопок */
 .custom-button {
    background: none;
    border: none; 
    cursor: pointer; 
    padding: 10px; 
    transition: transform 0.3s; 
}

.bottom-phone-button .col-6 {
    padding: 0 5px; /* Убираем отступы для колонок, чтобы кнопки были рядом */
}

/* Стили для кнопки "Оставить заявку" */
.danger-button {
    background-color: rgb(165 18 24); /* Заданное значение цвета */
    color: white; /* Белый текст */
    border: none; /* Без обводки */
    border-radius: 25px; /* Закругленные углы */
    padding: 10px 20px; /* Отступы */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s; /* Плавный переход фона */
}

.danger-button:hover {
    background-color: darkred; /* Темно-красный при наведении */
}

/* Цвет текста для заголовков и ссылок в темной теме */
.dark-theme h1,
.dark-theme p,
.dark-theme a {
    color: white; /* Белый текст для заголовков и ссылок */
}

.phone-link {
    font-size: 1.2rem; /* Измените размер шрифта по вашему усмотрению */
    text-decoration: none; /* Убрать подчеркивание */
    color: inherit; /* Наследовать цвет от родительского элемента или задайте конкретный цвет */
}

.phone-link:hover {
    text-decoration: underline; /* Добавить подчеркивание при наведении, если нужно */
}


/* Стили для первого экрана */
.hero {
    position: relative;
    height: 100vh;
    background-image: url('/static/img/main/index.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white; 
    z-index: 1;
}

/* Стили для первого экрана */
.hero h1 {
    font-size: 4rem; /* Увеличьте размер шрифта заголовка */
    line-height: 1.2; /* Высота строки для хорошей читаемости */
    font-weight: 600; /* Установите одинаковую толщину шрифта для заголовка */
}

.hero p {
    font-size: 3rem; /* Увеличьте размер шрифта для параграфа */
    line-height: 1.2; /* Высота строки для хорошей читаемости */
    font-weight: 600; /* Установите одинаковую толщину шрифта для параграфа */
}

.cursor {
    display: inline-block; /* Чтобы курсор занимал место в строке */
    width: 10px; /* Ширина курсора */
    animation: blink 0.7s infinite; /* Анимация мигания */
}

@keyframes blink {
    50% {
        opacity: 0; /* Полупрозрачный в середине */
    }
}
.calculate-button {
    background-color: rgb(213, 17, 29); /* Заданное значение цвета */
    color: white; /* Белый текст */
    border: none; /* Без обводки */
    border-radius: 25px; /* Закругленные углы */
    padding: 10px 20px; /* Отступы */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s, transform 0.3s; /* Плавный переход фона и трансформации */
    margin-right: 20px;
}

.calculate-button:hover {
    background-color: darkred;
    transform: scale(1.1);
}

.imported-cars-button {
    background-color: rgba(128, 128, 128, 0.5);
    color: white; /* Белый текст */
    border: none; /* Без обводки */
    border-radius: 25px; /* Закругленные углы */
    padding: 10px 20px; /* Отступы */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s; /* Плавный переход фона */
    margin-top: 20px; /* Увеличенный отступ между кнопками */

}

.imported-cars-button:hover {
    background-color: rgba(105, 105, 105, 0.7);
    text-decoration: none;
}

.imported-cars-button:hover {
    background-color: #fff;
    text-decoration: none;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0a111ca3; /* Затемнение фона для текста */
    z-index: 0; /* За фоновым изображением */
}

.container {
    position: relative; /* Чтобы обеспечить правильное отображение текста */
    z-index: 2; /* Текст выше наложения */
}

/* Прозрачное меню */
#navbar {
    background-color: transparent;
    transition: background-color 0.3s ease; /* Плавный переход цвета */
}

/* Изменение цвета навбара при прокрутке */
.scrolled #navbar {
    background-color: #fff; /* Меняем цвет навбара на основе темы */
}

/* Определяем цвета для тем */
.light-theme {
    --navbar-bg-color: rgba(255, 255, 255, 0.9); /* Светлая тема - белый фон */
}

.dark-theme {
    --navbar-bg-color: rgba(0, 0, 0, 0.9); /* Темная тема - черный фон */
}

.social-icons {
    position: fixed; /* Фиксированное положение */
    bottom: 25px; /* Отступ от нижней части экрана */
    left: 35px; /* Отступ от левой стороны экрана */
    display: flex; /* Flexbox для вертикального размещения */
    flex-direction: column; /* Иконки располагаются вертикально */
    z-index: 1000; /* Чтобы иконки были выше остальных элементов */
}

.btn-х {
        background: none; /* Убирает фон кнопки */
        border: none; /* Убирает обводку кнопки */
        padding: 0; /* Убирает внутренние отступы */
        margin: 0; /* Убирает внешние отступы */
        cursor: pointer; /* Курсор в виде указателя */
    }

    .btn-х i {
        color: white; /* Иконка белая для светлой темы по умолчанию */
        font-size: 24px; /* Размер иконки, измените по желанию */
    }

    body.dark-theme .btn-х i {
        color: white; /* Иконка черная для темной темы */
    }

    body.light-theme .btn-х i {
        color: black; /* Иконка белая для светлой темы */
    }

    /* Добавление эффекта наведения */
    .btn-х:hover i {
        opacity: 0.8; /* Уменьшение непрозрачности при наведении для эффекта */
    }


@keyframes vibrate {
        0%, 100% {
            transform: translate(0);
        }
        20% {
            transform: translate(-2px, 0);
        }
        40% {
            transform: translate(2px, 0);
        }
        60% {
            transform: translate(-2px, 0);
        }
        80% {
            transform: translate(2px, 0);
        }
    }

.social-icons-menu {
        display: flex; /* Flexbox для горизонтального размещения */
        justify-content: flex-start; /* Выравнивание икнок влево */
        margin-bottom: 15px; /* Отступ снизу для разделения с заголовком */
    }
.bottom-phone-button {
        position: fixed; /* Фиксированное положение */
        bottom: 25px; /* Отступ от нижней части экрана */
        /* left: 50%; */ /* Центрируем по горизонтали */
        /* transform: translateX(-50%); */ /* Центрируем на 50% от ширины */
        z-index: 1000; /* Чтобы кнопка была над остальными элементами */
    }

.phone-button {
    background-color: rgb(213, 17, 29); /* Красный фон */
    color: white; /* Белый текст */
    padding: 10px 20px; /* Отступы */
    border: none; /* Убрана обводка */
    border-radius: 25px; /* Полностью закругленные углы */
    text-decoration: none; /* Убираем подчеркивание */
    display: flex; /* Flexbox для выравнивания содержимого */
    align-items: center; /* Вертикальное выравнивание содержимого */
    font-size: 16px; /* Размер текста */
    width: auto; /* Автоматическая ширина в зависимости от содержимого */
    white-space: nowrap; /* Запрет на перенос текста */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Тень для кнопки */
    animation: vibrate 0.5s ease-in-out 4; /* Имя анимации, продолжительность и временная функция */
    animation-delay: 2s; /* Ни задержки перед началом */
    animation-fill-mode: forwards; /* Сохранение свойств после анимации */
    }
    
.dark-theme .zayvka-button {
    background-color: white; /* Красный фон */
    color: #000; /* Белый текст */
    padding: 10px 20px; /* Отступы */
    border: none; /* Убрана обводка */
    border-radius: 25px; /* Полностью закругленные углы */
    text-decoration: none; /* Убираем подчеркивание */
    display: flex; /* Flexbox для выравнивания содержимого */
    align-items: center; /* Вертикальное выравнивание содержимого */
    font-size: 16px; /* Размер текста */
    width: auto; /* Автоматическая ширина в зависимости от содержимого */
    white-space: nowrap; /* Запрет на перенос текста */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Тень для кнопки */
    animation: vibrate 0.5s ease-in-out 4; /* Имя анимации, продолжительность и временная функция */
    animation-delay: 5s; /* Ни задержки перед началом */
    animation-fill-mode: forwards; /* Сохранение свойств после анимации */
}  

.light-theme .zayvka-button {
    background-color: #000; /* Красный фон */
    color: #fff; /* Белый текст */
    padding: 10px 20px; /* Отступы */
    border: none; /* Убрана обводка */
    border-radius: 25px; /* Полностью закругленные углы */
    text-decoration: none; /* Убираем подчеркивание */
    display: flex; /* Flexbox для выравнивания содержимого */
    align-items: center; /* Вертикальное выравнивание содержимого */
    font-size: 16px; /* Размер текста */
    width: auto; /* Автоматическая ширина в зависимости от содержимого */
    white-space: nowrap; /* Запрет на перенос текста */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Тень для кнопки */
    animation: vibrate 0.5s ease-in-out 4; /* Имя анимации, продолжительность и временная функция */
    animation-delay: 5s; /* Ни задержки перед началом */
    animation-fill-mode: forwards; /* Сохранение свойств после анимации */
}  

.phone-button:hover {
        background-color: darkred; /* Темно-красный при наведении */
    }

.phone-button i {
        margin-right: 8px; /* Отступ между иконкой и текстом */
    }

.zayvka-button i {
    margin-right: 8px;
}    
    
.social-icon {
    background-color: rgb(213, 17, 29); /* Красный фон */
    color: white; /* Белый текст */
    border-radius: 50%; /* Круглая форма */
    width: 55px; /* Ширина иконки */
    height: 55px; /* Высота иконки */
    display: flex; /* Flexbox для центрирования иконки */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    text-align: center; /* Центрирование текста */
    text-decoration: none; /* Убираем подчеркивание */
    margin-bottom: 10px; /* Отступ между иконками */
    transition: background-color 0.3s, color 0.3s; /* Плавный переход фона и цвета текста */
}

.social-icon:hover {
    background-color: darkred; /* Темно-красный при наведении */
    color: white; /* Цвет текста при наведении */
}

.social-icon i {
    font-size: 24px; /* Размер иконки внутри ссылки */
    color: inherit; /* Убираем влияние внешнего цвета */
}

.social-icon:hover i {
    color: white; /* Цвет иконки при наведении */
}

.purchase-process h2 {
    text-align: left;
    margin-bottom: 20px;
}

/* Светлая тема */
.light-theme .purchase-process {
    background-color: #ffffff; /* Светлый фон */
    color: #000; /* Темный текст */
}

.light-theme .step, .light-theme .benefit {
    background-color: #ffffff; /* Белый фон для элементов */
}

/* Темная тема */
.dark-theme .purchase-process {
    background-color: #000; /* Темный фон */
    color: #ffffff; /* Светлый текст */
}

.dark-theme .step, .dark-theme .benefit {
    background-color: #000; /* Темный фон для элементов */
}


.step, .benefit {
/*     padding: 20px; */
    text-align: center;
}

.step i, .benefit i {
    font-size: 30px;
    margin-bottom: 10px;
    color: rgb(213, 17, 29);
}

.contact-button {
    position: fixed; /* Фиксированное положение */
    bottom: 40px; /* Отступ снизу */
    right: 35px; /* Отступ справа */
    z-index: 1000; /* Обеспечиваем, чтобы кнопка была на переднем плане */
}

#toggle-contact {
    background-color: rgb(213, 17, 29); /* Красный цвет для кнопки */
    color: white;
    border: none;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    animation: pulse 1.5s infinite; /* Пульсация */
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1); /* Эффект увеличения */
    }
}

#toggle-contact:hover {
    background-color: darkred; /* Темно-красный при наведении */
    transform: scale(1.1); /* Увеличение при наведении */
}

.contact-icons {
    display: none; /* Скрываем иконки по умолчанию */
    flex-direction: column; /* Расположение иконок вертикально */
    position: absolute;
    right: 0;
    bottom: 65px; /* Расстояние между кнопкой и иконками */
    gap: 10px; /* Промежуток между иконками */
}

.social-icon {
    background-color: rgb(213, 17, 29); /* Красный фон */
    color: white; /* Белый текст */
    border-radius: 50%; /* Круглая форма */
    width: 55px; /* Ширина иконки */
    height: 55px; /* Высота иконки */
    display: flex; /* Flexbox для центрирования иконки */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    text-align: center; /* Центрирование текста */
    text-decoration: none; /* Убираем подчеркивание */
    transition: background-color 0.3s; /* Плавный переход фона */
}

.social-icon:hover {
    background-color: darkred; /* Темно-красный при наведении */
}

.social-icon i {
    font-size: 24px; /* Размер иконок */
    color: inherit; /* Убираем влияние внешнего цвета */
}

@keyframes slide-up {
    from {
        transform: translateY(20px); /* Начальное положение 20px ниже */
        opacity: 0; /* Начальная невидимость */
    }
    to {
        transform: translateY(0); /* Конечное положение */
        opacity: 1; /* Конечная видимость */
    }
}

.faq-header {
    background-color: #fff; /* Светлый фон для заголовка */
    color: #000; /* Цвет текста для светлой темы */
}

.faq-answer {
    background-color: #ffffff; /* Светлый фон для ответа */
    color: #000; /* Цвет текста для светлой темы */
}

/* Стили для темной темы */
.faq-header.dark-theme {
    background-color: #000; /* Темный фон для заголовка */
    color: #fff; /* Цвет текста для темной темы */
}

.faq-answer.dark-theme {
    background-color: #000; /* Темный фон для ответа */
    color: #fff; /* Цвет текста для темной темы */
}


/* моьильное меню */

#mobile-navbar {
    background-color: #ffffff; /* Цвет фона для мобильного меню */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень на меню */
}

.menu-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px; /* Размер иконки меню */
    color: #333; /* Цвет иконки */
}

.modal-fullscreen .modal-content {
    height: 100vh; /* Высота модального окна на всю страницу */
    border-radius: 0; /* Убираем скругления */
}

.modal-content {
    border-radius: 5px; /* Закругленные углы */
    transition: background-color 0.3s, color 0.3s; /* Плавный переход цвета фона и текста */
}

/* Стили для светлой темы */
.light-theme .modal-content {
    background-color: #ffffff; /* Цвет фона для светлой темы */
    color: #000000; /* Цвет текста для светлой темы */
}

.light-theme .modal-header {
    border-bottom: 1px solid #dee2e6; /* Разделитель для заголовка */
}
.light-theme .modal-content .form-text {
    color: #000;
}
.light-theme .modal-content input:focus {
    outline: none; /* Убираем стандартное обведение */
    border: 1px solid #cfcfcf; /* Изменяем цвет обводки на приоритетный цвет */
    box-shadow: 0 0 0 0.2rem #cfcfcf; /* Добавляем эффект тени */
}

.light-theme .modal-footer {
    border-top: 1px solid #dee2e6; /* Разделитель для подвала */
}

.btn-secondary {
    background-color: #495057; /* Фон для кнопки в темной теме */
    border-color: #495057;
}

/* Стили для темной темы */
.dark-theme .modal-content {
    background-color: #060606; /* Цвет фона для темной темы */
    color: #ffffff; /* Цвет текста для темной темы */
}
.dark-theme .modal-content .form-text {
    color: #ffffff;
}

.dark-theme .modal-content input {
    background-color: #000; /* Цвет фона для темной темы */
    color: #ffffff; /* Цвет текста для темной темы */
}

.dark-theme .modal-content input:focus {
    outline: none; /* Убираем стандартное обведение */
    border: 1px solid #cfcfcf; /* Изменяем цвет обводки на приоритетный цвет */
    box-shadow: 0 0 0 0.2rem #cfcfcf; /* Добавляем эффект тени */
    background-color: #000; /* Цвет фона для темной темы */
    color: #ffffff;
}

.dark-theme .modal-content input:valid {
    outline: none; /* Убираем стандартное обведение */
    background-color: #000; /* Цвет фона для темной темы */
    color: #ffffff;
}

.dark-theme .modal-header {
    border-bottom: 1px solid #474f54; /* Разделитель для заголовка */
}

.dark-theme .modal-footer {
    border-top: 1px solid #474f54; /* Разделитель для подвала */
}

.dark-theme .btn-secondary {
    background-color: #495057; /* Фон для кнопки в темной теме */
    border-color: #495057; /* Цвет рамки для кнопки */
}

/* Стили для кнопок связи */
.btn-outline-primary {
    border-color: #007bff; /* Цвет рамки для кнопок связи */
    color: #007bff; /* Цвет текста для кнопок связи */
}

/* Цвет текста для кнопок связи в темной теме */
.dark-theme .btn-outline-primary {
    border-color: #007bff; /* Цвет рамки для кнопок связи в темной теме */
    color: #007bff; /* Цвет текста для кнопок связи в темной теме */
}

/* Цвет текста для ошибок */
.text-danger {
    color: #e3342f; /* Цвет текста для ошибок */
}
.modal-body .d-flex {
    flex-wrap: wrap; /* Позволяет кнопкам переноситься на новую строку */
    justify-content: space-between; /* Распределяет кнопки равномерно */
}

.modal-body .btn {
    flex: 1 1 30%; /* Задает гибкость кнопкам */
    margin: 5px; /* Отступ между кнопками */
}

@media (max-width: 576px) {
    .modal-body .btn {
        flex-basis: 100%; /* Кнопки занимают всю ширину на мобильных устройствах */
        max-width: 100%; /* Ограничим максимальную ширину кнопок */
    }
}

.modal {
    --bs-modal-width: 520px;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-success:hover, .btn-info:hover, .btn-warning:hover {
    opacity: 0.8;
}
.icon-white {
    color: white; /* Установка цвета иконок на белый */
}  
.btn:hover {
    color: white; /* Цвет текста иконок при наведении */
}
.dark-theme .btn-success {
    background-color: #155724; /* Темно-зеленый фон */
    border-color: #155724; /* Темно-зеленый бордюр */
    color: white; /* Белый текст */
}

.dark-theme .btn-info {
    background-color: #0c5460; /* Темно-синий фон */
    border-color: #0c5460; /* Темно-синий бордюр */
    color: white; /* Белый текст */
}

.dark-theme .btn-warning {
    background-color: #856404; /* Темно-желтый фон */
    border-color: #856404; /* Темно-желтый бордюр */
    color: white; /* Белый текст */
}

.dark-theme .breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: #fff; /* Замените на нужный цвет */
    content: var(--bs-breadcrumb-divider, "/");
}

/* Цвета для иконок при темной теме */
.dark-theme .icon-white {
    color: white; /* Белый цвет иконок */
}

.dark-theme .btn:hover {
    opacity: 0.8; /* Немного затемняем при наведении */
}

.dark-theme .menu-icon i {
    color: white; /* Цвет иконки в темной теме */
}

.light-theme .menu-icon i {
    color: black; /* Цвет иконки в светлой теме (если необходимо) */
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999; /* Находится над всеми элементами */
    display: flex;
    justify-content: center;
    align-items: center;
}

#preloader-logo {
    width: 350px; /* Ширина логотипа */
    animation: pulse 1.5s infinite; /* Анимация пульсации */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bg-light {
        background-color: #fff !important; /* Светлый фон */
    }
.bg-dark {
        background-color: #000000 !important; /* Темный фон */
    }
.text-dark {
        color: #000000 !important; /* Темный текст */
    }
.text-white {
        color: #ffffff !important; /* Белый текст */
    }
.nav-link {
        text-decoration: none; /* Убираем подчеркивание */
        transition: color 0.1s ease; /* Плавный переход цвета */
    }

.login {
    position: relative;
    height: 100vh;
    background-image: url('/static/img/main/index.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Цвет текста */
    z-index: 1; /* Убедимся, что секция находится поверх других */
}


.login-form {
        position: relative; /* Позиционирование относительно родителя */
        background-color: #fff; /* Полупрозрачный белый фон */
        border-radius: 8px; /* Скругление углов */
        padding: 40px; /* Внутренний отступ */
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Тень для эффекта подъема */
        max-width: 600px; /* Максимальная ширина блока */
        margin: auto; /* Центровка по горизонтали */
        z-index: 1; /* Убедитесь, что форма выше подложки */
    }

.login-form h5 {
        /* margin-bottom: 20px; */ /* Отступ снизу */
        text-align: center; /* Центровка заголовка */
        color: #000; /* Цвет заголовка */
    }

.login-form p {
        margin-bottom: 20px; /* Отступ снизу */
        text-align: center; /* Центровка заголовка */
        color: #000; /* Цвет заголовка */
        font-size: 16px;
    }    

.login label {
        display: block; /* Блоковое отображение для меток */
        margin-bottom: 5px; /* Отступ снизу для меток */
        color: #000; /* Цвет меток */
    }

.login input {
        width: 100%; /* Полная ширина */
        padding: 10px; /* Внутренний отступ */
        margin-bottom: 20px; /* Отступ снизу */
        border: 1px solid #000; /* Цвет границы */
        border-radius: 4px; /* Скругление углов */
    }


.login .error-message {
        color: red; /* Цвет сообщения об ошибке */
        text-align: center; /* Центровка текста ошибки */
        margin-top: 15px; /* Отступ сверху */
        font-size: 15px;
    }
    
.dark-theme .login-form {
        position: relative; /* Позиционирование относительно родителя */
        background-color: #000; /* Полупрозрачный белый фон */
        border-radius: 8px; /* Скругление углов */
        padding: 40px; /* Внутренний отступ */
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Тень для эффекта подъема */
        max-width: 600px; /* Максимальная ширина блока */
        margin: auto; /* Центровка по горизонтали */
        z-index: 1; /* Убедитесь, что форма выше подложки */
    }    
.dark-theme .login-form h5 {
    margin-bottom: 20px; /* Отступ снизу */
    text-align: center; /* Центровка заголовка */
    color: #fff; /* Цвет заголовка */
}

.dark-theme .login-form label {
        display: block; /* Блоковое отображение для меток */
        margin-bottom: 5px; /* Отступ снизу для меток */
        color: #fff; /* Цвет меток */
    }
    
.dark-theme input {
        color: #000;
    }       
    
.dark-theme input:focus {
        outline: none; /* Убираем стандартное обведение */
        border: 1px solid #cfcfcf; /* Изменяем цвет обводки на приоритетный цвет */
        box-shadow: 0 0 0 0.2rem #cfcfcf; /* Добавляем эффект тени */
    }   
.dark-theme .login-form p {
        margin-bottom: 20px; /* Отступ снизу */
        text-align: center; /* Центровка заголовка */
        color: #fff; /* Цвет заголовка */
        font-size: 16px;
    }  
.dark-theme .login input {
        width: 100%; /* Полная ширина */
        padding: 10px; /* Внутренний отступ */
        margin-bottom: 20px; /* Отступ снизу */
        border: 1px solid #fff; /* Цвет границы */
        border-radius: 4px; /* Скругление углов */
        color: #fff;
        background-color: #000;
    } 
.dark-theme .login .error-message {
        color: red; /* Цвет сообщения об ошибке */
        text-align: center; /* Центровка текста ошибки */
        margin-top: 15px; /* Отступ сверху */
        font-size: 15px;
    }    



/* Медиазапросы для мобильной версии */
@media (max-width: 768px) {
    .hero {
        background-image: url('/static/img/main/index.jpg');
    }
    h1 {
        font-size: 1.85rem !important; /* Принудительное снижение размера */
    }
    
    .hero p {
        font-size: 1.85rem !important; /* Принудительное снижение размера */
    }
    .faq-container h3 {
        font-weight: 500;
        font-size: 1.17rem;
    }
    .purchase-process h3 {
        font-weight: 700;
        font-size: 1.17rem;
    }
    .purchase-process p {
        padding-left: 20px; 
        padding-right: 20px;
    }
    .calculate-button {
        margin-right: 0;
    }    
}

.dark-theme .breadcrumb a {
    color: #fff; /* Белый цвет текста ссылок */
    text-decoration: none; /* Убирает подчеркивание */
}

.dark-theme .breadcrumb-item {
    color: #fff; /* Белый цвет текста ссылок */
}
.light-theme .breadcrumb-item {
    color: #000; /* Белый цвет текста ссылок */
}

.dark-theme .breadcrumb a:hover {
    color: red; /* Цвет текста при наведении */
    text-decoration: none; /* Убирает подчеркивание при наведении */
}

.light-theme .breadcrumb a {
    color: #000; /* Черный цвет текста ссылок для светлой темы */
    text-decoration: none; /* Убирает подчеркивание */
}

.light-theme .breadcrumb a:hover {
    color: red; /* Цвет текста при наведении для светлой темы */
    text-decoration: none; /* Убирает подчеркивание при наведении */
}  

.dark-theme .table {
    background-color: #000; /* Темный фон таблицы */
    color: white; /* Белый цвет текста */
}

.dark-theme th {
    background-color: #000; /* Темный фон заголовков */
    color: white; /* Белый цвет текста заголовков */
}

.dark-theme td {
    background-color: #000; /* Темный фон ячеек */
    color: white; /* Белый цвет текста ячеек */
}

.dark-theme tr:nth-child(even) {
    background-color: #000; /* Альтернативный цвет для четных строк */
}

.dark-theme tr:hover {
    background-color: #000; /* Цвет строки при наведении */
}