/* ===== 1. ЦВЕТОВАЯ СИСТЕМНАЯ ПАЛИТРА ДЛЯ СИСТЕМ БЕЗОПАСНОСТИ ===== */
:root {
    --sec-blue-dark: #001d51;   /* Глубокий синий (основной цвет доверия и надежности) */
    --sec-blue-light: #2563eb;  /* Технологичный синий (сети, IP-видео, линки) */
    --sec-yellow: #f59e0b;      /* Предупреждающий янтарный/желтый (питание, сигналы) */
    --sec-red: #dc2626;         /* Активный красный (запись, тревожная кнопка, alarm) */
    --sec-text-muted: #64748b;  /* Спокойный серый для вспомогательного текста */
}


/* ===== 2. ОБНОВЛЕННЫЙ ВАРИАНТ ШАПКИ ===== */

.header__wrapper--first {
    padding: 12px 0;
    background-color: #0a111e;
}
.header__first {
    display: flex !important;
    justify-content: space-between !important; /* Раздвигаем элементы к краям */
    align-items: center !important;
}
.header__first > div {
    width: auto !important;
}


/* Стилизация адреса */
.header__address {
    font-family: 'Roboto', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding-right: 50px !important; 
    white-space: nowrap;
    color: var(--sec-text-muted);
    text-transform: none; /* Убираем CAPS для более чистого отображения */
    letter-spacing: 0.2px;
}
.header__logo {
    margin: 0 60px !important; /* Гарантированные 60px свободного места по бокам логотипа */
    text-align: center !important;
}

/* Логотип MATRIX по центру */
.header__logo img {
    width: 95px;
    transition: transform 0.2s ease;
}
.header__logo img:hover {
    transform: scale(1.03);
}

/* Правая часть шапки: Контакты и кнопка */
.header__feedback {
    display: grid;
    grid-template-columns: auto auto; /* Сетка для выравнивания */
    align-items: center;
    gap: 20px;
     padding-left: 50px !important; /* Зазор слева до логотипа */
}
.header__telephones {
    padding-left: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Выравниваем по правому краю */
}
.header__telephones:before {
    display: none !important; /* Отключаем старый спрайт телефона */
}

/* Основной номер телефона: Глубокий синий */
.header__telephones a {
    font-family: 'Roboto', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--sec-blue-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}
.header__telephones a:hover {
    color: var(--sec-blue-light);
}

/* Почта: Янтарно-желтый акцент */
.header__email {
    font-size: 1.25rem !important;
    font-weight: 500;
    color: var(--sec-yellow) !important;
    transition: color 0.2s ease !important;
}
.header__email:hover {
    color: var(--sec-red) !important; /* При наведении почта становится красной */
}

/* Соцсети */
.header__social {
    display: flex;
    gap: 8px;
}
.header__social img {
    width: 22px;
    height: 22px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.9;
}
.header__social img:hover {
    transform: translateY(-2px);
    opacity: 1;
}

/* «Тревожная» кнопка обратного вызова (Красная с переходом в синий) */
.header__callback-btn {
    background-color: var(--sec-red) !important; /* По умолчанию активный красный */
    color: #ffffff !important;
    border: 1px solid var(--sec-red) !important;
    padding: 10px 18px !important;
    font-family: 'Roboto', sans-serif;
    font-size: 1.15rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.15);
    transition: all 0.25s ease-in-out !important;
}

.header__callback-btn:hover {
    background-color: var(--sec-blue-dark) !important; /* При наведении кнопка становится глубокой синей */
    border-color: var(--sec-blue-dark) !important;
    box-shadow: 0 4px 15px rgba(17, 28, 48, 0.2);
}


/* ===== МОНОШИРИННЫЙ ШРИФТ ДЛЯ ПРЕДОТВРАЩЕНИЯ ДРОЖАНИЯ ЗАГОЛОВКОВ ===== */

.top-slider__tit {
    /* Используем моноширинные шрифты ( tabular-nums ) */
    font-family: 'Consolas', 'Courier New', Courier, monospace !important; 
    font-variant-numeric: tabular-nums !important;
    color: white !important;
    letter-spacing: -0.5px !important; /* Слегка компенсируем ширину моноширинного шрифта */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Стилизация контейнера анимации */
.scramble-churn {
    display: inline-block;
    will-change: content; /* Оптимизация рендеринга браузера */
}















/* ==========================================
   КОМПАКТНЫЙ ОДНОСТРОЧНЫЙ ХЕДЕР С КОНТАКТАМИ
   ========================================== */

/* Полностью и навсегда скрываем старую верхнюю секцию */
.header__wrapper--first {
    display: none !important;
}
/* Наша новая единая навигационная панель */
.isar-header-wrapper {
    display: flex;
    justify-content: center;
    background-color: #080c14; /* Плотный темный фон */
    border-bottom: 1.5px solid #1f2937;
    padding: 10px 0;
    width: 100%;
    /* height: 100px; */
    font-family: 'Roboto', sans-serif;
}

/* Сделали контейнер шире (до 1400px) */
.isar-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 1550px !important; /* Увеличили ширину (было 1250px) */
    width: 100%;
}

/* 1. ЛЕВАЯ ЧАСТЬ (Логотип и Адрес) */
.isar-header-left {
    display: flex;
    align-items: center;
}

.isar-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.isar-logo-text {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1.5px;
}

/* Тонкий адрес рядом с логотипом */
.isar-header-address {
    font-size: 14px;
    color: #9ca3af;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #1f2937;
    max-width: 200px;
    line-height: 1.3;
}

/* 2. ЦЕНТРАЛЬНАЯ ЧАСТЬ (Меню Joomla) */
.isar-header-container .topMenuHeader {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
}

.isar-header-container .main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 22px; /* Увеличили расстояние между кнопками, чтобы меню стало шире (было 12px) */
}

.isar-header-container .main-menu li a {
    color: #9ca3af;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 8px;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.isar-header-container .main-menu li a:hover,
.isar-header-container .main-menu li.active a,
.isar-header-container .main-menu li.current a {
    color: #ffffff !important;
}

/* 3. ПРАВАЯ ЧАСТЬ (Контакты, Соцсети, Кнопка) */
.isar-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.isar-header-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.isar-phone {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

.isar-email {
    font-size: 15px;
    color: #9ca3af;
    text-decoration: none;
    white-space: nowrap;
}

.isar-phone:hover, .isar-email:hover {
    color: #2563eb;
}

.isar-header-socials {
    display: flex;
    gap: 5px;
}

.isar-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.2s;
}

.isar-social-btn:hover {
    transform: scale(1.1);
}

.isar-social-btn svg {
    width: 10px;
    height: 10px;
}

.isar-social-btn.tg { background-color: #24A1DE; }
.isar-social-btn.viber { background-color: #7360f2; }
.isar-social-btn.wa { background-color: #25D366; }

.isar-header-btn {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.isar-logo-img {
    height: 50px;
    width: auto;
}

.isar-header-btn:hover {
    background-color: #1d4ed8;
}

.isar-header-left .burger {
    display: none;
}


/* ==========================================
   КОРРЕКЦИЯ ДЛЯ ФИКСАЦИИ ШАПКИ (БЕЗ STICKY)
   ========================================== */

/* Жестко фиксируем тег header на экране */
header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* Компенсируем высоту шапки (100px) для следующего за ней контента */
.main-content {
    margin-top: 70px !important;
}


/* МОБИЛЬНАЯ АДАПТИВНОСТЬ */
@media (max-width: 1199px) {
    .isar-header-address {
        display: none;
    }
}

@media (max-width: 991px) {
    .isar-header-left .burger {
        display: flex;
    }

    .isar-header-container .topMenuHeader {
        display: none;
    }

    .isar-header-contacts, .isar-header-socials {
        display: none;
    }
}