@charset "UTF-8";

/* ============================================================
   1. БАЗОВАЯ СТРУКТУРА
   ============================================================ */
body {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #333333;
    line-height: 1.166;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

a:link, a:visited {
    color: #006699;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    font-family: Verdana, Geneva, sans-serif;
    color: #1a1a1a;
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: 10px;
}

h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 16px; }

/* ============================================================
   2. ОФОРМЛЕНИЕ КОНТЕНТА И КЛАССЫ
   ============================================================ */
.style4 { font-size: 14px; font-weight: bold; font-style: italic; color: #000000; }
.style5 { color: #FFCCFF; }
.style10 { font-size: 16px; color: #666666; }
.style11 { font-size: 10px; color: #666666; }
.style18 { font-size: 12pt; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #004080; }
.style20 { font-size: 16px; font-weight: bold; font-family: "Times New Roman", Times, serif; color: #FF0000; }
.style22 { font-size: 16px; color: #000000; font-weight: bold; font-family: Geneva, Arial, Helvetica, sans-serif; font-style: italic; }
.style26 { font-size: 15px; color: #666666; }
.style29 { font-size: 13px; color: #666666; }
.style30 { font-size: 12px; color: #666666; }
.style62 { font-size: 15px; font-weight: bold; font-style: italic; color: #666666; }

.style100 { font-size: 36px; font-weight: bold; color: #666666; } 

.style108 { font-size: 16px; font-weight: bold; color: #666666; }
.style109 { color: #666666; }
.style110 { font-size: 12px; font-weight: bold; color: #666666; }
.style111 { font-size: 14px; font-weight: bold; font-style: italic; color: #666666; }
.style112 { font-size: 14px; font-weight: bold; color: #666666; }

.style132 { font-size: 14px; font-weight: bold; font-family: Arial, serif; font-style: italic; color: #666666; }
.style134 { font-size: 16px; font-weight: bold; font-style: italic; color: #666666; }
.style137 { font-size: 16px; font-weight: bold; font-style: italic; color: #666666; }
.style138 { font-size: 14px; color: #666666; }
.style139, .style145 { font-family: Arial, serif; color: #666666; }
.style140 { font-size: 16px; font-weight: bold; font-style: italic; color: #000000; font-family: Arial, serif; }
.style141 { font-family: Arial, serif; color: #000000; }
.style142 { color: #000000; }
.style151 { font-size: 14px; font-family: Arial, serif; color: #666666; }
.style152 { color: #0000FF; }
.style153 { color: #0033FF; }
.style154 { font-size: 18px; font-weight: bold; font-family: Arial, serif; color: #666666; }
.style155 { font-weight: bold; color: #DECFB2; }
.style159 { font-size: 16px; font-weight: bold; font-family: Arial, serif; color: #E0C9B7; }
.style160 { font-size: 14px; font-family: Arial, serif; color: #E0C9B7; } /* Исправлено font-weight */
.style183 { font-size: 16px; color: #000000; font-weight: bold; font-family: Geneva, Arial, Helvetica, sans-serif; }
.style184 { font-size: 24px; }
.Menu { font-size: 18px; font-family: Arial, serif; color: #666666; } /* Исправлено font-family */
.Menu1 { font-size: 16px; font-family: Arial, serif; color: #666666; }
.style211 { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #004080; }
.style214 { font-family: Arial, serif; color: #E0C9B7; font-size: 14px; }
.style215 { font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #004080; }
.style245 { font-size: 18px; font-style: italic; font-family: Times, serif; color: #666666; }

.prokrutka {
    height: 1000px;
    width: 100%;
    background: #fff;
    border: 1px solid #C1C1C1;
    overflow: scroll;
}

/* Ссылки (состояние) */
a:link { color: #000000; text-decoration: none; }
a:hover { color: #FF0000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:active { text-decoration: none; }

/* ============================================================
   АНИМАЦИИ (BLINK)
   ============================================================ */
#blink { animation: blink 2s linear infinite; }
@keyframes blink {
    50% { color: rgba(34, 34, 34, 0); }
}

#blink1 { animation: blink1 2s linear infinite; }
@keyframes blink1 {
    50% { color: rgba(34, 34, 34, 0); }
}

#blink2 {
  -webkit-animation: blink2 2s linear infinite;
  animation: blink2 2s linear infinite;
}
@-webkit-keyframes blink2 {
  100% { color: rgba(34, 34, 34, 0); }
}
@keyframes blink2 {
  100% { color: rgba(34, 34, 34, 0); }
}


#blink5 { animation: blink5 2s linear infinite; }
@keyframes blink5 {
    0%, 100% { color: rgb(128, 0, 0); }
    50% { color: rgb(183, 65, 14); }
}

#blink6 {
    position: relative;
    color: #fff;
    text-shadow: 0 0 10px #3d7a97;
}

@keyframes blink6 {
    10% { transform: scale(1, 1) rotate(80deg); }
    20%, 100% { transform: scale(0, 0) rotate(160deg); }
}

#blink6:after, #blink6:before {
    content: "";
    position: absolute; top: 0; left: 0;
    display: block;
    width: 70px;
    height: 70px;
    background-image: 
        radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0) 30%),
        linear-gradient(45deg, rgba(0,0,0,0) 49%, rgba(255,255,255,.4) 50%, rgba(0,0,0,0) 51%),
        linear-gradient(135deg, rgba(0,0,0,0) 49%, rgba(255,255,255,.4) 50%, rgba(0,0,0,0) 51%);
    animation: blink6 10s linear infinite;
    transform: scale(0, 0) rotate(0deg);
}

#blink6:before {
    top: -30%;
    right: 0; left: auto;
    animation-delay: 5s;
}

#blink7 {
    animation: pulsate 5.2s linear infinite;
}
@keyframes pulsate {
    50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }
}

/* ============================================================
 3  ОБНОВЛЕННЫЕ СОВРЕМЕННЫЕ КНОПКИ
   ============================================================ */
.button-container {
    display: flex;
    gap: 6px;
    align-items: center;
}

.custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #444; /* Темно-серый текст для мягкости */
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px; /* Легкое скругление */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Эффект при наведении */
.custom-button:hover {
    background-color: #f8f9fa;
    border-color: #3d7a97; /* Цвет в тон вашей тени домена */
    color: #3d7a97;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Стиль для активного языка */
.custom-button.active {
    background-color: #3d7a97;
    color: #ffffff;
    border-color: #3d7a97;
    pointer-events: none; /* Отключаем клик по активному */
}

/* ============================================================
  4 ОСНОВНАЯ ШАПКА
   ============================================================ */
.main-header {
    background-color: #E9ECEF; /* Цвет фона всей полосы */
    width: 100%;               /* На всю ширину окна */
    min-height: 70px;          /* Минимальная высота */
    display: flex;             /* Включаем Flexbox */
    align-items: center;       /* Центрируем содержимое по вертикали */
    padding: 5px 0;            /* Отступы сверху и снизу */
}

/* ОГРАНИЧИТЕЛЬ КОНТЕНТА */
.header-container {
    max-width: 920px;         /* Ширина центральной области там где ЛОГО*/
    margin: 0 auto;            /* Центрируем контейнер на странице */
    width: 100%;
    display: flex;             /* Включаем Flexbox внутри контейнера */
    justify-content: space-between; /* Лого влево, инфо вправо */
    align-items: center;       /* Выравнивание по вертикали */
    padding: 0 15px;           /* Боковые отступы внутри контейнера */
    box-sizing: border-box;    /* Чтобы padding не увеличивал ширину 1000px */
}

/* ГРУППА ЭЛЕМЕНТОВ (Кнопка, Телефоны, Соцсети) */
.header-info-group {
    display: flex;             /* Выстраиваем элементы в строку */
    flex-direction: row;       /* Направление — горизонтальное */
    align-items: center;       /* Центрируем элементы по вертикали относительно друг друга */
    gap: 30px;                 /* РАССТОЯНИЕ МЕЖДУ Кнопкой / Телефонами / Соцсетями */
}

/* БЛОК КОНТАКТОВ */
.header-contacts {
    display: flex;
    flex-direction: column;    /* Телефоны один под другим */
    text-align: right;         /* Выравнивание текста по правому краю */
    line-height: 1.2;          /* Высота строки текста */
    white-space: nowrap;       /* Запрет переноса номера на новую строку */
}

/* БЛОК СОЦСЕТЕЙ */
.header-socials {
    display: flex;             /* Иконки в ряд */
    align-items: center;
    gap: 14px;                 /* РАССТОЯНИЕ МЕЖДУ ИКОНКАМИ */
}

/* РАЗМЕРЫ ИКОНОК */
.icon-viber, .icon-tg, .icon-email {
    height: 30px;              /* Фиксированная высота иконок */
    width: auto;               /* Пропорциональная ширина */
}

/* ============================================================
  5 АДАПТИВНОСТЬ (Для мобильных и планшетов)
   ============================================================ */
@media (max-width: 950px) {
    /* Перестраиваем шапку в колонку */
    .header-container {
        flex-direction: column;
        gap: 30px;             /* Расстояние между лого и нижней частью */
    }

    /* Растягиваем инфо-группу и центрируем */
    .header-info-group {
        width: 100%;
        justify-content: center; /* Центровка элементов на мобилке */
        gap: 20px;               /* Уменьшаем отступы между блоками */
        flex-wrap: wrap;         /* Разрешаем перенос, если экран слишком узкий */
    }

    /* Настройка логотипа для мобильных */
	.header-domain { 
        margin-top: 30px; /* Логотип съедет вниз на 20px */
        font-size: 38px !important; 
        text-align: center; 
    }

    /* Уменьшение шрифтов и увеличение иконок для удобства нажатия пальцем */
    .custom-button { padding: 4px 8px; font-size: 14px; }
    .header-contacts { font-size: 16px; text-align: center; }
    
    .icon-viber, .icon-tg, .icon-email {
        height: 40px;          /* Делаем иконки чуть крупнее для мобильных */
    }
}

/* ============================================================
   6. ПОДВАЛ (FOOTER)#1E293B;
   ============================================================ */
.main-footer {
    background-color:  #E9ECEF; /* цвет фон,  /
    width: 100%;               /* Растягиваем на всю ширину экрана */
    min-height: 100px;         /* Минимальная высота, чтобы футер не "схлопывался" */
    display: flex;             /* Включаем гибкую разметку для центрирования */
    align-items: center;       /* Центрируем содержимое по вертикали */
    padding: 20px 0;           /* Внутренние отступы: 20px сверху/снизу, 0 по бокам */
}

.footer-container {
    max-width: 1200px;         /*  ограничиваем разумной шириной контента */
    margin: 0 auto;            /* Центрируем контейнер по горизонтали */
    width: 100%;               /* Позволяет контейнеру сжиматься на малых экранах */
    display: flex;             /* Включаем Flexbox для внутренних элементов */
    flex-direction: column;    /* Располагаем текст и иконки друг под другом (вертикально) */
    align-items: center;       /* Центрируем текст и иконки по горизонтали */
    gap: 20px;                 /* ИСПРАВЛЕНО: уменьшили зазор между текстом и иконками для компактности */
}

.footer-text { 
    margin: 0; 
    text-align: center; 
    line-height: 1.5;          /* Добавлено для лучшей читаемости многострочного текста */
}

.footer-socials {
    display: flex;             /* Горизонтальный ряд для иконок */
    justify-content: center;   /* Центрируем иконки в ряду */
    align-items: center; 
    gap: 40px;                 /* Расстояние между иконками */
}

/* Общий стиль для всех иконок футера */
.footer-icon-tg, 
.footer-icon-viber, 
.footer-icon-email { 
    height: 50px;              /* Фиксированная высота иконок для десктопа */
    width: auto;               /* Пропорциональное изменение ширины */
    transition: transform 0.2s; /* Плавный эффект при наведении */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
    .main-footer {
        padding: 40px 10px;    /* Увеличиваем отступы на мобильных для удобства нажатия */
    }

    .footer-socials {
        gap: 30px;             /* Оптимальное расстояние между иконками на тачскринах */
        flex-wrap: wrap;       /* Разрешаем перенос иконок, если они не влезают в ряд */
    }

.footer-icon-tg { height:60px; width: auto; }
.footer-icon-viber { height: 60px;  width:auto; }
.footer-icon-email { height: 60px;  width:auto; }
}

/* ============================================================
   7. SCHEMA.ORG И ТЕГИ
   ============================================================ */
.product-description {
    font-family: Arial, sans-serif; 
    line-height: 1.6;
    color: #333;
    max-width: 900px; 
    margin: 0 auto;
    padding: 20px;
}

.product-title {
    font-size: 20px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}

.features-list { list-style-type: none; padding: 0; margin: 0; }
.features-list li {
    position: relative;
    padding-left: 25px; 
    margin-bottom: 12px;
    font-size: 16px;
    text-align: justify;
}

.features-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #888;
}

.site-search-tags {
    padding: 13px;
    background-color: #f9f9f9;
    font-size: 11px;
    line-height: 1.8;
    color: #666;
    text-align: center; 
}