html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* overflow-x: hidden; */ /* Раскомментируйте, если есть горизонтальная прокрутка и хотите ее скрыть */
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    padding-top: 76px; /* Ваш отступ для фиксированного хедера */
    background-image: url(img/fon.png);
    background-repeat: repeat;
    /* Убедитесь, что нет других margin или padding, которые могут влиять */
}

        .navbar {
            background-color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px); /* Степень размытия в пикселях */
    -webkit-backdrop-filter: blur(10px); /* Для поддержки Safari */
        }

        .navbar-brand img {
            max-height: 50px; /* Ограничьте высоту логотипа */
            width: auto;
            vertical-align: middle;
        }
        .contact-info-wrapper {
            /* Пусто */
        }
        .contact-info {
            font-size: 0.9rem;
            line-height: 1.2;
        }
        .contact-info .phone-number {
            font-weight: bold;
            font-size: 1rem;
        }

        @media (max-width: 420px) {
            .contact-info {
                font-size: 0.75rem;
            }
            .contact-info .phone-number {
                font-size: 0.85rem;
            }
            /* Если нужно, можно также уменьшить высоту padding-top для body,
               если высота navbar уменьшается на маленьких экранах.
               Но в данном случае высота navbar почти не меняется.
            */
        }
.col-md-6.order-2 { /* Обращение к текстовой колонке */
    /* На мобильных устройствах (когда колонки в столбик)
       можно добавить внутренний отступ, если текст слишком близко к краям */
    /* padding-left: 1rem; */
    /* padding-right: 1rem; */
}

@media (max-width: 767.98px) { /* Меньше md breakpoint */
    .col-md-6.order-2 { /* Текстовая колонка на мобильных */
        text-align: left !important; /* Гарантируем выравнивание по левому краю */
    }
}
.maincolor {
    color:#0a4998;
}
.maincolor2 {
    color:red;
}
.custom-list-container {
    /* Можно добавить специфическую тень, если нужно */
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); 
    background-color: #cee1f8;
    font-size: 20px;
    font-weight: 600;
}

/* Стили для списка с кастомными красными точками */
.custom-red-dot-list {
    /* list-unstyled из Bootstrap уже убирает list-style и padding-left,
       но если вы не используете list-unstyled, раскомментируйте: */
    /*
    list-style-type: none;
    padding-left: 0;
    */
}

.custom-red-dot-list li {
    position: relative; /* Необходимо для абсолютного позиционирования ::before */
    padding-left: 28px; /* Отступ слева для текста, чтобы было место для точки + небольшой зазор.
                           (ширина точки + отступ от точки = 12px + 10px + небольшой запас = ~28px).
                           Подберите это значение. */
    margin-bottom: 0.75rem; /* Отступ между элементами списка */
    line-height: 1.6;     /* Для лучшей читаемости, особенно для многострочных элементов */
}

.custom-red-dot-list li::before {
    content: ''; /* Обязательно для ::before, чтобы он отображался */
    position: absolute; /* Позиционируем относительно родительского li */
    left: 0; /* Прижимаем к левому краю (внутри padding'а li) */

    /* Вертикальное выравнивание точки.
       Цель - чтобы точка была примерно по центру первой строки текста.
       Это значение может потребовать небольшой подстройки в зависимости от
       размера шрифта и line-height вашего текста.
       0.2em - 0.4em часто хорошо работает.
    */
    top: 0.3em; /* Примерное значение, подберите для вашего шрифта/line-height */
    /* Альтернатива для более точного центрирования, если известна высота строки:
       top: calc( (1.6em / 2) - (12px / 2) ); где 1.6em - line-height, 12px - высота точки.
       Но 'em' в top и 'px' в calc могут вести себя по-разному. Проще подобрать top в em.
    */

    width: 18px;  /* Ширина "большой" красной точки */
    height: 18px; /* Высота "большой" красной точки */
    background-color: red; /* Красный цвет точки */
    border-radius: 50%; /* Делает квадрат кругом (точкой) */

    /* Можно добавить небольшую тень самой точке для объема, если хотите */
    box-shadow: 0 1px 2px rgba(0,0,0,0.3); 
}

/* Если текст в li может быть очень коротким и вы хотите, чтобы точка не "уезжала" вниз: */
.custom-red-dot-list li:last-child {
    margin-bottom: 0; /* Убрать отступ у последнего элемента, если нужно */
}
.custom-blue-button {
    background-color: #0a4998; /* Заданный вами цвет фона */
    color: #ffffff;             /* Белый цвет текста */
    font-weight: bold;          /* Жирный текст */
    font-size: 20px;            /* Размер шрифта 20px */

    /* Скругленные края */
    /* Bootstrap уже имеет классы .rounded-pill для сильно скругленных краев
       или .rounded-1, .rounded-2, ... .rounded-5 для разной степени скругления.
       Если вы хотите специфическое скругление, можно задать его здесь: */
    border-radius: 30px; /* Пример значения, подберите по вкусу. .rounded-pill даст "капсулу" */
    /* Если вы хотите использовать Bootstrap класс для скругления, то можно этот border-radius убрать,
       а в HTML добавить, например, class="btn custom-blue-button rounded-pill" */

    /* Отступы внутри кнопки (padding) */
    /* Класс .btn из Bootstrap уже задает некоторый padding.
       Если он вас устраивает, эти строки можно не добавлять.
       Если нужен другой padding: */
    padding-top: 0.65rem;    /* Пример: 10px / 16px (базовый размер шрифта) = 0.625rem. Немного больше для баланса. */
    padding-bottom: 0.65rem;
    padding-left: 1.5rem;   /* Пример: 24px / 16px = 1.5rem */
    padding-right: 1.5rem;

    /* Убираем стандартную рамку, если она есть (Bootstrap .btn обычно не имеет ее по умолчанию) */
    border: none;

    /* Плавный переход для эффектов при наведении (опционально) */
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

/* Эффект при наведении (hover) - опционально, но рекомендуется для UX */
.custom-blue-button:hover {
    background-color: #083c7a; /* Немного темнее основной цвет для hover-эффекта */
    color: #ffffff; /* Убедимся, что цвет текста не меняется, если нет других правил */
    text-decoration: none; /* Убрать подчеркивание, если это ссылка */
    /* transform: translateY(-1px); /* Легкий "подъем" кнопки */
}

/* Эффект при нажатии (active) - опционально */
.custom-blue-button:active {
    background-color: #062f5c; /* Еще темнее */
    /* transform: translateY(0px); */
}

/* Стили для состояния фокуса (важно для доступности) */
.custom-blue-button:focus {
    outline: none; /* Убираем стандартный outline */
    box-shadow: 0 0 0 0.25rem rgba(10, 73, 152, 0.5); /* Кастомный focus-ring, цвет связан с цветом кнопки */
    /* Bootstrap .btn уже имеет хороший focus-ring, этот можно не добавлять,
       если вы используете .btn и вас устраивает его стандартный focus.
       Если вы НЕ используете класс .btn, то кастомный focus-ring очень важен. */
}
.custom-item-text {
    color: #000000; /* Черный цвет текста */
    font-size: 20px;
    /* font-weight: bold; уже задан классом fw-bold в HTML,
       но если бы его не было, можно было бы добавить здесь. */
}
.site-footer {
    background-color: #0a4998;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    padding-top: 1.5rem;
    padding-bottom: 0; /* ИЗМЕНЕНО: Убрали внутренний отступ снизу. Если он нужен, верните 1.5rem */
    width: 100%;
    /* margin-top: auto;  УБРАНО: так как нет flex-структуры для sticky footer */
    margin-bottom: 0 !important; /* Оставляем, чтобы гарантировать отсутствие внешнего отступа */
    margin-left: 0;
    margin-right: 0;
}

/* Остальные стили для .footer-logo и .site-footer a.footer-email остаются как есть */
.footer-logo {
    max-height: 50px;
    width: auto;
}

.site-footer div, .site-footer span {
    line-height: 1.5;
}

.site-footer a.footer-email {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.site-footer a.footer-email:hover {
    color: #cccccc;
    text-decoration: underline;
}

/* Медиа-запрос для очень маленьких экранов, если нужно, чтобы текст был мельче */
/* @media (max-width: 575.98px) {
    .site-footer {
        font-size: 14px;
    }
    .site-footer a.footer-email {
        font-size: 14px;
    }
} */
.site-footer {
    background-color: #0a4998;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    padding-top: 1.5rem;
    padding-bottom: 25px; /* Внутренний отступ снизу УБРАН. Если нужен, верните. */

    width: 100%; /* Занимает всю ширину родителя (body) */
    /* Если нужен фон на всю ширину ОКНА, а не родителя, используйте width: 100vw; */
    /* width: 100vw; */
    /* Чтобы избежать проблем с горизонтальной прокруткой из-за 100vw, если она есть: */
    /* max-width: 100%; */

    margin: 0; /* Убираем все внешние отступы у футера */

    /* Для отладки, чтобы точно видеть границы футера */
    /* border: 2px solid red !important; */
}


/* Остальные стили футера */
.footer-logo {
    max-height: 50px;
    width: auto;
}

.site-footer div, .site-footer span {
    line-height: 1.5;
}

.site-footer a.footer-email {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.site-footer a.footer-email:hover {
    color: #cccccc;
    text-decoration: underline;
}