/* Определяем корневые переменные для повторяющихся значений */
:root {
    --primary-blue: #004E9E; /* Основной синий цвет */
    --light-gray: #E9E9E9;   /* Светло-серый цвет */
    --dark-gray: #666666;    /* Тёмно-серый цвет */
    --spacing-hg: 80px;        /*огромный отступ*/
    --spacing-lg: 40px;      /* Большой отступ */
    --spacing-md: 20px;      /* Средний отступ */
    --spacing-sm: 10px;      /* Малый отступ */
}

/* Стили для body */
body {
    overflow-x: hidden; /* Запрещаем горизонтальную прокрутку, чтобы контент не выходил за пределы */
}

/* Стили для баннера */
/* Основной контейнер баннера */
#banner {
    position: relative;
    width: 100%;
    padding-top: 33.11%; /* Соотношение сторон изображения 900/2718 ≈ 0.3311 */
    margin-top: 90px; /* Учитываем высоту шапки */
    overflow: hidden;
}

/* Обёртка изображения */
.banner-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333; /* Фоновый цвет для пустых областей */
}

/* Тонировка */
.banner-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Полупрозрачная тонировка */
    z-index: 1;
}

/* Изображение */
.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Изображение заполняет контейнер, обрезая края */
    object-position: center; /* Центрируем */
    display: block;
    z-index: 0; /* Под тонировкой */
}

/* Стили для текста */
.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #FFFFFF;
    width: 90%;
    max-width: 1200px;
    padding: 20px;
    z-index: 2; /* Текст поверх тонировки */
}

.banner-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

.banner-content p {
    font-size: 20px;
    font-weight: 400;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Секция партнёров */
#partners {
    padding: var(--spacing-lg) 0; /* Вертикальные отступы */
    background: linear-gradient(180deg, #F9F9F9 0%, #FFFFFF 100%); /* Градиентный фон */
    text-align: center;          /* Центрирование текста */
}

/* Контейнер для логотипов партнёров */
.partners-grid {
    display: flex;               /* Flex-контейнер */
    flex-wrap: nowrap;           /* Логотипы в одну строку */
    gap: 30px;                   /* Расстояние между логотипами */
    justify-content: center;     /* Центрирование по горизонтали */
    align-items: center;         /* Центрирование по вертикали */
    max-width: 100%;             /* Максимальная ширина контейнера */
    padding: 0 var(--spacing-md);/* Боковые отступы */
}

/* Логотип партнёра */
.partner-logo {
    width: 180px;                /* Фиксированная ширина */
    height: 110px;               /* Фиксированная высота */
    flex-shrink: 0;              /* Запрещаем сжатие */
    display: flex;               /* Flex для центрирования изображения */
    justify-content: center;     /* Горизонтальное центрирование */
    align-items: center;         /* Вертикальное центрирование */
    background: #FFFFFF;         /* Белый фон */
    border-radius: 12px;         /* Скругленные углы */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; /* Плавные переходы */
    overflow: hidden;            /* Скрываем переполнение */
}

/* Изображение логотипа */
.partner-logo img {
    max-width: 85%;              /* Ограничение ширины изображения */
    max-height: 85%;             /* Ограничение высоты изображения */
    object-fit: contain;         /* Сохранение пропорций изображения */
    transition: transform 0.3s ease; /* Плавное увеличение при наведении */
}

/* Эффект при наведении на логотип */
.partner-logo:hover {
    transform: translateY(-5px); /* Подъем вверх */
    box-shadow: 0 8px 25px rgba(0, 78, 158, 0.2); /* Усиленная тень */
    filter: brightness(1.05);    /* Лёгкое осветление */
}

/* Увеличение изображения при наведении */
.partner-logo:hover img {
    transform: scale(1.1);       /* Увеличение изображения */
}

/* Анимация появления логотипов */
.partner-logo {
    opacity: 0;                  /* Начальная непрозрачность */
    animation: fadeInUp 0.5s ease forwards; /* Анимация появления */
}

/* Задержка анимации для каждого логотипа */
.partner-logo:nth-child(1) { animation-delay: 0.1s; }
.partner-logo:nth-child(2) { animation-delay: 0.2s; }
.partner-logo:nth-child(3) { animation-delay: 0.3s; }
.partner-logo:nth-child(4) { animation-delay: 0.4s; }

/* Секция продукции */
#products {
    padding: var(--spacing-lg) 0; /* Вертикальные отступы */
    background: linear-gradient(180deg, #F9F9F9 0%, #FFFFFF 100%); /* Градиентный фон */
    text-align: center;          /* Центрирование текста */
}

/* Контейнер для колонок продукции */
.products-container {
    display: flex;               /* Flex-контейнер */
    justify-content: space-between; /* Равномерное распределение колонок */
    gap: var(--spacing-md);      /* Расстояние между колонками */
}

/* Колонка продукции */
.product-column {
    flex: 1;                     /* Равномерное распределение ширины */
    border: 2px solid var(--primary-blue); /* Синяя рамка */
    border-radius: 8px;          /* Скругленные углы */
    padding: var(--spacing-md);  /* Внутренние отступы */
    text-align: center;          /* Центрирование текста */
    background-color: #fff;      /* Белый фон */
    transition: transform 0.3s ease; /* Плавный переход при наведении */
}

/* Эффект при наведении на колонку */
.product-column:hover {
    transform: translateY(-5px); /* Подъем вверх */
}

/* Заголовок продукта */
.product-title {
    font-size: 1.7em;            /* Размер шрифта */
    color: var(--primary-blue);  /* Синий цвет */
    margin-bottom: var(--spacing-sm); /* Отступ снизу */
}

/* Описание продукта */
.product-description {
    font-size: 1em;              /* Размер шрифта */
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    margin-bottom: var(--spacing-md); /* Отступ снизу */
}

/* Галерея изображений */
.gallery {
    display: grid;               /* Сетка для изображений */
    grid-template-columns: repeat(3, 1fr); /* Три столбца */
    grid-template-rows: auto auto; /* Два ряда */
    gap: var(--spacing-sm);      /* Расстояние между изображениями */
    margin-top: var(--spacing-md); /* Отступ сверху */
    pointer-events: auto;        /* Разрешаем взаимодействие */
}

/* Изображения в галерее */
.gallery img {
    width: 100%;                 /* Полная ширина ячейки */
    height: 100px;               /* Фиксированная высота */
    object-fit: cover;           /* Обрезка изображения с сохранением пропорций */
    cursor: pointer;             /* Курсор указателя */
    border-radius: 5px;          /* Скругленные углы */
    transition: transform 0.3s ease; /* Плавное увеличение при наведении */
}

/* Эффект при наведении на изображение */
.gallery img:hover {
    transform: scale(1.05);      /* Увеличение изображения */
}

/* Позиционирование изображений в сетке */
.gallery img:nth-child(1) { grid-column: 1; grid-row: 1; }
.gallery img:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery img:nth-child(3) { grid-column: 3; grid-row: 1; }
.gallery img:nth-child(4) { grid-column: 1 / span 2; grid-row: 2; }
.gallery img:nth-child(5) { grid-column: 3; grid-row: 2; }

/* Общие стили для модальных окон */
.modal {
    display: none;               /* Скрыто по умолчанию */
    position: fixed;             /* Фиксированное положение */
    top: 0;                      /* Привязка к верху */
    left: 0;                     /* Привязка к левому краю */
    width: 100%;                 /* Полная ширина */
    height: 100%;                /* Полная высота */
    background-color: rgba(0, 0, 0, 0.9); /* Полупрозрачный чёрный фон */
    z-index: 10000;              /* Высокий уровень наложения */
    justify-content: center;     /* Центрирование по горизонтали */
    align-items: center;         /* Центрирование по вертикали */
    overflow: auto;              /* Прокрутка при переполнении */
}

/* Контент модального окна (общий) */
.modal-content {
    position: relative;          /* Относительное позиционирование для кнопки закрытия */
    width: 90vw;                 /* Адаптивная ширина (90% ширины viewport) */
    max-width: 800px;            /* Максимальная ширина */
    height: auto;                /* Высота по содержимому */
    max-height: 80vh;            /* Максимальная высота (80% высоты viewport) */
    background-color: transparent; /* Прозрачный фон для изображений */
    text-align: center;          /* Центрирование содержимого */
}

/* Изображение в модальном окне (общий) */
.modal-content img {
    max-width: 100%;             /* Ограничение ширины */
    max-height: 80vh;            /* Ограничение высоты */
    width: auto;                 /* Автоматическая ширина */
    height: auto;                /* Автоматическая высота */
    object-fit: contain;         /* Сохранение пропорций */
    border-radius: 8px;          /* Скругленные углы */
}

/* Кнопка закрытия модального окна (общий) */
.modal .close {
    position: absolute;          /* Абсолютное позиционирование */
    top: var(--spacing-sm);      /* Отступ сверху */
    right: var(--spacing-md);    /* Отступ справа */
    color: #fff;                 /* Белый цвет */
    font-size: 30px;             /* Размер шрифта */
    cursor: pointer;             /* Курсор указателя */
    z-index: 10002;              /* Выше содержимого модалки */
    transition: color 0.3s ease; /* Плавный переход цвета */
}

/* Эффект при наведении на кнопку закрытия */
.modal .close:hover {
    color: #ff0000;              /* Красный цвет при наведении */
}

/* Кнопки навигации в модальном окне (для галереи) */
.prev, .next {
    position: absolute;          /* Абсолютное позиционирование */
    top: 50%;                    /* Центрирование по вертикали */
    transform: translateY(-50%); /* Смещение для точного центрирования */
    color: #fff;                 /* Белый цвет */
    font-size: 20px;             /* Размер шрифта */
    cursor: pointer;             /* Курсор указателя */
    background-color: rgba(0, 78, 158, 0.7); /* Полупрозрачный синий фон */
    padding: var(--spacing-sm);  /* Внутренние отступы */
    border-radius: 50%;          /* Круглая форма */
    z-index: 10002;              /* Выше содержимого модалки */
}

.prev { left: var(--spacing-sm); } /* Позиция кнопки "назад" */
.next { right: var(--spacing-sm); } /* Позиция кнопки "вперёд" */

/* Счётчик изображений в модальном окне (для галереи) */
.counter {
    position: absolute;          /* Абсолютное позиционирование */
    bottom: var(--spacing-sm);   /* Отступ снизу */
    left: 50%;                   /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Смещение для точного центрирования */
    color: #fff;                 /* Белый цвет */
    z-index: 10002;              /* Выше содержимого модалки */
}

/* Специфические стили для модального окна #pdf-modal (секция "Компания") */
#pdf-modal {
    display: none;               /* Скрыто по умолчанию */
    position: fixed;             /* Фиксированное положение */
    top: 0;                      /* Привязка к верхнему краю */
    left: 0;                     /* Привязка к левому краю */
    width: 100%;                 /* Полная ширина экрана */
    height: 100%;                /* Полная высота экрана */
    background-color: rgba(0, 0, 0, 0.9); /* Полупрозрачный чёрный фон */
    z-index: 10000;              /* Высокий уровень наложения */
    justify-content: center;     /* Центрирование содержимого по горизонтали */
    align-items: center;         /* Центрирование содержимого по вертикали */
    overflow: auto;              /* Добавляем прокрутку, если содержимое не помещается */
}

/* Контент модального окна #pdf-modal */
#pdf-modal .modal-content {
    position: relative;          /* Относительное позиционирование для кнопки закрытия */
    width: 90vw;                 /* Ширина 90% от ширины viewport (адаптивно) */
    max-width: 800px;            /* Максимальная ширина для больших экранов */
    height: auto;                /* Высота определяется содержимым */
    max-height: 80vh;            /* Максимальная высота 80% от высоты viewport */
    background-color: transparent; /* Прозрачный фон, так как это изображение */
    text-align: center;          /* Центрирование содержимого */
}

/* Изображение внутри модального окна #pdf-modal */
#pdf-modal #modal-image {
    max-width: 100%;             /* Изображение не превышает ширину контейнера */
    max-height: 80vh;            /* Изображение не превышает 80% высоты viewport */
    width: auto;                 /* Ширина определяется пропорциями */
    height: auto;                /* Высота определяется пропорциями */
    object-fit: contain;         /* Сохранение пропорций изображения */
    border-radius: 8px;          /* Скругленные углы для эстетики */
}

/* Кнопка закрытия модального окна #pdf-modal */
#pdf-modal .modal-close {
    position: absolute;          /* Абсолютное позиционирование */
    top: 10px;                   /* Отступ сверху */
    right: 10px;                 /* Отступ справа */
    font-size: 24px;             /* Размер шрифта */
    color: #fff;                 /* Белый цвет */
    cursor: pointer;             /* Курсор указателя */
    z-index: 10001;              /* Выше содержимого модального окна */
    transition: color 0.3s ease; /* Плавный переход цвета при наведении */
}

/* Эффект при наведении на кнопку закрытия #pdf-modal */
#pdf-modal .modal-close:hover {
    color: #ff0000;              /* Красный цвет при наведении */
}

/* Секция команды */
#team {
    padding: 60px 0;             /* Вертикальные отступы */
}

/* Цитата команды */
.team-quote {
    text-align: center;          /* Центрирование текста */
    margin-bottom: var(--spacing-lg); /* Отступ снизу */
}

/* Текст цитаты */
.team-quote p {
    font-size: 24px;             /* Размер шрифта */
    font-style: italic;          /* Курсив */
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    position: relative;          /* Относительное позиционирование для псевдоэлементов */
    padding: 0 var(--spacing-md);/* Боковые отступы */
    display: inline-block;       /* Блочно-строчный элемент */
}

/* Контейнер для членов команды */
.team-members {
    display: flex;               /* Flex-контейнер */
    justify-content: space-between; /* Равномерное распределение */
    flex-wrap: wrap;             /* Перенос элементов на новую строку */
}

/* Член команды */
.team-member {
    text-align: center;          /* Центрирование текста */
    margin-bottom: 30px;         /* Отступ снизу */
}

/* Фото члена команды */
.team-photo {
    width: 200px;                /* Фиксированная ширина */
    height: 200px;               /* Фиксированная высота */
    object-fit: cover;           /* Обрезка с сохранением пропорций */
    border-radius: 50%;          /* Круглая форма */
    margin-bottom: 15px;         /* Отступ снизу */
    transition: transform 0.3s ease; /* Плавное увеличение при наведении */
}

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

/* Описание члена команды */
.team-description {
    text-align: center;          /* Центрирование текста */
}

/* Фамилия члена команды */
.team-surname {
    font-size: 20px;             /* Размер шрифта */
    font-weight: 600;            /* Полужирный шрифт */
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    margin-bottom: 5px;          /* Отступ снизу */
}

/* Имя члена команды */
.team-name {
    font-size: 16px;             /* Размер шрифта */
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    margin-bottom: var(--spacing-sm); /* Отступ снизу */
}

/* Позиция, телефон и email члена команды */
.team-position,
.team-phone,
.team-email {
    display: flex;               /* Flex для выравнивания */
    align-items: center;         /* Вертикальное центрирование */
    justify-content: center;     /* Горизонтальное центрирование */
    gap: 8px;                    /* Расстояние между иконкой и текстом */
    font-size: 14px;             /* Размер шрифта */
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    margin-bottom: 1px;          /* Минимальный отступ снизу */
}

/* Иконки перед телефоном и email */
.team-phone::before,
.team-email::before {
    content: '';                 /* Пустой контент для псевдоэлемента */
    display: inline-block;       /* Строчный блочный элемент */
    width: 16px;                 /* Ширина иконки */
    height: 16px;                /* Высота иконки */
    background-size: contain;    /* Сохранение пропорций */
    background-repeat: no-repeat;/* Без повторения */
    background-position: center; /* Центрирование иконки */
}

/* Иконка телефона */
.team-phone::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M20 15.5C18.75 15.5 17.55 15.3 16.43 14.93C16.08 14.82 15.69 14.9 15.41 15.17L13.21 17.37C10.38 15.93 8.06 13.62 6.62 10.79L8.82 8.58C9.1 8.31 9.18 7.92 9.07 7.57C8.7 6.45 8.5 5.25 8.5 4C8.5 3.45 8.05 3 7.5 3H4C3.45 3 3 3.45 3 4C3 13.39 10.61 21 20 21C20.55 21 21 20.55 21 20V16.5C21 15.95 20.55 15.5 20 15.5Z" fill="%23FFFFFF" stroke="%23666666" stroke-width="2"/></svg>');
}

/* Иконка email */
.team-email::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M4 7C4 6.44772 4.44772 6 5 6H19C19.5523 6 20 6.44772 20 7V17C20 17.5523 19.5523 18 19 18H5C4.44772 18 4 17.5523 4 17V7Z" fill="%23FFFFFF" stroke="%23666666" stroke-width="2"/><path d="M3 7.5L12 13L21 7.5" fill="none" stroke="%23666666" stroke-width="2"/></svg>');
}

/* Секция контактов */
.contact-section {
    background-color: #2B2B2B;    /* Тёмный фон */
    color: #FFFFFF;              /* Белый цвет текста */
    padding: 60px 0;             /* Вертикальные отступы */
    text-align: center;          /* Центрирование текста */
}

/* Рамка для контактной информации */
.contact-frame {
    max-width: 1200px;           /* Максимальная ширина */
    margin: 0 auto;              /* Центрирование по горизонтали */
    padding: var(--spacing-lg);  /* Внутренние отступы */
    background-color: #3A3A3A;   /* Серый фон */
    border-left: 4px solid var(--primary-blue); /* Синяя полоска слева */
}

/* Заголовок контактов */
.contact-title {
    font-size: 30px;             /* Размер шрифта */
    font-weight: 700;            /* Жирный шрифт */
    margin-bottom: var(--spacing-lg); /* Отступ снизу */
    color: #FFFFFF;              /* Белый цвет */
    text-transform: uppercase;   /* Верхний регистр */
}

/* Контент контактов */
.contact-content {
    display: flex;               /* Flex-контейнер */
    flex-direction: column;      /* Вертикальное расположение */
    align-items: center;         /* Центрирование по горизонтали */
}

/* Контейнер для карточек контактов */
.contact-info {
    display: flex;               /* Flex-контейнер */
    justify-content: space-around; /* Равномерное распределение карточек */
    width: 100%;                 /* Полная ширина */
    margin-bottom: var(--spacing-md); /* Отступ снизу */
}

/* Карточка контакта */
.contact-card {
    text-align: center;          /* Центрирование текста */
    padding: var(--spacing-md);  /* Внутренние отступы */
    background-color: #444444;   /* Тёмно-серый фон */
    border: 1px solid #555555;   /* Серая рамка */
    width: 20%;                  /* Ширина карточки */
    transition: transform 0.3s ease; /* Плавный переход при наведении */
}

/* Эффект при наведении на карточку */
.contact-card:hover {
    transform: translateY(-5px); /* Подъем вверх */
}

/* Иконка контакта */
.contact-icon {
    display: block;              /* Блочный элемент */
    width: 40px;                 /* Ширина иконки */
    height: 40px;                /* Высота иконки */
    margin: 0 auto var(--spacing-sm); /* Центрирование и отступ снизу */
    background-size: contain;    /* Сохранение пропорций */
    background-repeat: no-repeat;/* Без повторения */
    background-position: center; /* Центрирование иконки */
    filter: brightness(0) invert(1); /* Белый цвет иконки */
}

/* Иконка телефона */
.contact-icon-phone {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="%23004E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>');
}

/* Иконка адреса */
.contact-icon-address {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="%23004E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
}

/* Иконка email */
.contact-icon-email {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="%23004E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>');
}

/* Иконка времени */
.contact-icon-time {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="%23004E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}

/* Текст в карточке контакта */
.contact-info p {
    font-size: 16px;             /* Размер шрифта */
    color: var(--light-gray);    /* Светло-серый цвет */
    margin: 0;                   /* Убираем стандартные отступы */
}

/* Кнопка "Позвонить" */
#call-button {
    position: fixed;             /* Фиксированное положение */
    bottom: var(--spacing-md);   /* Отступ снизу */
    right: 70px;                 /* Отступ справа */
    background-color: var(--primary-blue); /* Синий фон */
    border: none;                /* Без рамки */
    border-radius: 50%;          /* Круглая форма */
    width: 50px;                 /* Ширина */
    height: 50px;                /* Высота */
    display: flex;               /* Flex для центрирования */
    align-items: center;         /* Вертикальное центрирование */
    justify-content: center;     /* Горизонтальное центрирование */
    cursor: pointer;             /* Курсор указателя */
    opacity: 0;                  /* Скрыто по умолчанию */
    visibility: hidden;          /* Невидимо */
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s; /* Плавные переходы */
    z-index: 1000;               /* Уровень наложения */
}

/* Кнопка "Наверх" */
#back-to-top {
    position: fixed;             /* Фиксированное положение */
    bottom: var(--spacing-md);   /* Отступ снизу */
    right: var(--spacing-md);    /* Отступ справа */
    background-color: var(--primary-blue); /* Синий фон */
    border: none;                /* Без рамки */
    border-radius: 50%;          /* Круглая форма */
    width: 50px;                 /* Ширина */
    height: 50px;                /* Высота */
    display: flex;               /* Flex для центрирования */
    align-items: center;         /* Вертикальное центрирование */
    justify-content: center;     /* Горизонтальное центрирование */
    cursor: pointer;             /* Курсор указателя */
    opacity: 0;                  /* Скрыто по умолчанию */
    visibility: hidden;          /* Невидимо */
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s; /* Плавные переходы */
    z-index: 1000;               /* Уровень наложения */
}

/* Показ кнопок при добавлении класса .show */
#call-button.show, #back-to-top.show {
    opacity: 1;                  /* Полная видимость */
    visibility: visible;         /* Видимо */
}

/* Эффект при наведении на кнопки */
#call-button:hover, #back-to-top:hover {
    transform: scale(1.1);       /* Увеличение */
}

/* Футер */
.footer {
    padding: 15px 0;             /* Вертикальные отступы */
    transition: background 0.3s; /* Плавный переход фона */
    background-clip: padding-box;/* Ограничение фона */
    opacity: 1;                  /* Полная непрозрачность */
}

/* Футер в начальном состоянии */
.footer.navbar-initial {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #007BFF 300px); /* Градиентный фон */
}

/* Футер при прокрутке */
.footer.scrolled {
    background: #F5F6FA;          /* Светлый фон */
}

/* Заголовок футера */
.footer-header {
    text-align: center;          /* Центрирование текста */
    margin-bottom: var(--spacing-md); /* Отступ снизу */
}

/* Логотип футера */
.footer-logo img {
    height: 50px;                /* Высота логотипа */
}

/* Ссылки футера */
.footer-links {
    text-align: center;          /* Центрирование текста */
    margin-bottom: var(--spacing-md); /* Отступ снизу */
}

/* Навигация футера */
.footer-links .navbar-nav {
    display: flex;               /* Flex-контейнер */
    flex-direction: row;         /* Горизонтальное расположение */
    justify-content: center;     /* Центрирование по горизонтали */
    align-items: center;         /* Центрирование по вертикали */
    gap: 30px;                   /* Расстояние между ссылками */
    list-style: none;            /* Убираем маркеры списка */
    padding: 0;                  /* Убираем внутренние отступы */
    margin: 0;                   /* Убираем внешние отступы */
}

/* Элемент навигации футера */
.footer-links .nav-item {
    margin: 0;                   /* Убираем отступы */
}

/* Ссылка в футере */
.footer-links .nav-link {
    color: #FFFFFF;              /* Белый цвет */
    font-weight: 500;            /* Полужирный шрифт */
    padding: var(--spacing-sm) 15px; /* Внутренние отступы */
    transition: color 0.3s ease; /* Плавный переход цвета */
    white-space: nowrap;         /* Запрещаем перенос текста */
}

/* Ссылка в футере при прокрутке */
.footer.scrolled .nav-link {
    color: var(--dark-gray);     /* Тёмно-серый цвет */
}

/* Эффект при наведении на ссылку */
.nav-link:hover, .nav-link.active {
    color: #FFD700;              /* Золотой цвет */
}

/* Нижняя часть футера */
.footer-bottom {
    text-align: center;          /* Центрирование текста */
    padding-top: var(--spacing-sm); /* Отступ сверху */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Тонкая белая линия */
}

/* Текст в нижней части футера */
.footer-bottom p {
    margin: 0;                   /* Убираем отступы */
    font-size: 14px;             /* Размер шрифта */
    color: var(--light-gray);    /* Светло-серый цвет */
}

/* Контейнер для секции компании */
.company-container {
    display: flex;               /* Flex-контейнер */
    justify-content: space-between; /* Равномерное распределение */
    gap: var(--spacing-lg);      /* Расстояние между блоками */
}

/* Левый и правый блоки компании */
.company-left, .company-right {
    flex: 1;                     /* Равномерное распределение ширины */
}

/* Заголовок в левом блоке компании */
.company-left .partner-title {
    color: var(--primary-blue);  /* Синий цвет */
    font-weight: 700;            /* Жирный шрифт */
    margin-bottom: var(--spacing-md); /* Отступ снизу */
    position: relative;          /* Относительное позиционирование */
    display: block;              /* Блочный элемент */
    text-align: left;            /* Выравнивание текста влево */
    line-height: 0.8;            /* Уменьшенный межстрочный интервал */
}

/* Отключаем подчеркивание для заголовка компании */
.company-left .partner-title::after {
    content: none;               /* Убираем подчеркивание */
}

/* Стили для строк заголовка компании */
.company-left .partner-line1,
.company-left .partner-line2,
.company-left .partner-line3 {
    display: block;              /* Блочный элемент */
    white-space: nowrap;         /* Запрещаем перенос текста */
    text-align: center;          /* Центрирование текста */
    width: 400px;                /* Фиксированная ширина */
    margin-top: var(--spacing-sm); /* Отступ сверху */
}

.company-left .partner-line1 { font-size: 34px; } /* Размер первой строки */
.company-left .partner-line2 { font-size: 38px; } /* Размер второй строки */
.company-left .partner-line3 { font-size: 55px; position: relative; letter-spacing: 0; } /* Размер третьей строки */

/* Подчеркивание третьей строки */
.company-left .partner-line3::after {
    content: '';                 /* Пустой контент */
    position: absolute;          /* Абсолютное позиционирование */
    bottom: -10px;               /* Отступ снизу */
    left: 0;                     /* Привязка к левому краю */
    width: 85%;                  /* Ширина подчеркивания */
    height: 3px;                 /* Высота линии */
    background-color: var(--primary-blue); /* Синий цвет */
    border-radius: 2px;          /* Скругленные края */
}

/* Галерея PDF */
.pdf-gallery {
    display: flex;               /* Flex-контейнер */
    flex-direction: row;         /* Горизонтальное расположение */
    gap: 6px;                    /* Расстояние между элементами */
    margin-top: var(--spacing-hg); /* Отступ сверху */
    width: 600px;                /* Фиксированная ширина */
    justify-content: space-between; /* Равномерное распределение */
}

/* Элемент галереи PDF */
.pdf-item {
    display: flex;               /* Flex-контейнер */
    flex-direction: column;      /* Вертикальное расположение */
    align-items: center;         /* Центрирование по горизонтали */
    color: #000;                 /* Чёрный цвет текста */
    border: 2px solid var(--primary-blue); /* Синяя рамка */
    border-radius: 8px;          /* Скругленные углы */
    margin-top: 15px; 
    padding: 8px;                /* Внутренние отступы */
    background-color: #fff;      /* Белый фон */
    transition: transform 0.3s ease; /* Плавный переход при наведении */
    width: calc(25% - 4.5px);    /* Ширина с учётом зазоров */
    cursor: pointer;             /* Курсор указателя */
}

/* Эффект при наведении на элемент PDF */
.pdf-item:hover {
    transform: translateY(-5px); /* Подъем вверх */
}

/* Изображение в элементе PDF */
.pdf-image {
    width: 180px;                /* Фиксированная ширина */
    height: 180px;               /* Фиксированная высота */
    object-fit: contain;         /* Сохранение пропорций */
}

/* Текст в правом блоке компании */
.company-right p {
    text-align: left;            /* Выравнивание текста влево */
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    font-size: 16px;             /* Размер шрифта */
    line-height: 1.6;            /* Межстрочный интервал */
}

/* Общие стили для заголовков секций */
#company h2, #products h2, #customers h2, #suppliers h2, #partners h4 {
    color: var(--primary-blue);  /* Синий цвет */
    font-size: 28px;             /* Размер шрифта */
    font-weight: 700;            /* Жирный шрифт */
    margin-bottom: var(--spacing-lg); /* Отступ снизу */
    position: relative;          /* Относительное позиционирование */
    display: block;              /* Блочный элемент */
    width: 100%;                 /* Полная ширина */
    margin-left: auto;           /* Центрирование по горизонтали */
    margin-right: auto;          /* Центрирование по горизонтали */
    text-align: center;          /* Центрирование текста */
}

/* Подчеркивание для заголовков секций */
#products h2::after, #customers h2::after, #suppliers h2::after, #partners h4::after {
    content: '';                 /* Пустой контент */
    position: absolute;          /* Абсолютное позиционирование */
    bottom: -10px;               /* Отступ снизу */
    left: 50%;                   /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Смещение для точного центрирования */
    width: 50px;                 /* Ширина линии */
    height: 2px;                 /* Высота линии */
    background-color: var(--primary-blue); /* Синий цвет */
    border-radius: 2px;          /* Скругленные края */
}

/* Секция поставщиков */
#suppliers {
    padding: 60px 0;             /* Вертикальные отступы */
    background: linear-gradient(180deg, #F9F9F9 0%, #FFFFFF 100%); /* Градиентный фон */
    text-align: center;          /* Центрирование текста */
}

/* Выравнивание текста в секциях */
#company p, #customers p, #suppliers p {
    text-align: left;            /* Выравнивание текста влево */
}

/* Секция покупателей */
#customers {
    padding: 60px 0;             /* Вертикальные отступы */
    background: linear-gradient(180deg, #F9F9F9 0%, #FFFFFF 100%); /* Градиентный фон */
    text-align: center;          /* Центрирование текста */
}

/* Верхний блок покупателей */
.customers-top {
    text-align: left;            /* Выравнивание текста влево */
    margin-bottom: var(--spacing-lg); /* Отступ снизу */
    padding: var(--spacing-md) var(--spacing-lg); /* Внутренние отступы */
    background-color: #FFFFFF;    /* Белый фон */
    border-radius: 8px;          /* Скругленные углы */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Тень */
    transition: transform 0.3s ease; /* Плавный переход */
    max-width: 1120px;           /* Максимальная ширина */
    margin-left: auto;           /* Центрирование по горизонтали */
    margin-right: auto;          /* Центрирование по горизонтали */
}

/* Эффект при наведении на верхний блок */
.customers-top:hover {
    transform: translateY(-5px); /* Подъем вверх */
}

/* Текст в верхнем блоке */
.customers-top p {
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    font-size: 16px;             /* Размер шрифта */
    line-height: 1.6;            /* Межстрочный интервал */
    margin: 0 0 15px 0;          /* Отступы */
}

/* Последний параграф в верхнем блоке */
.customers-top p:last-child {
    margin-bottom: 0;            /* Убираем нижний отступ */
}

/* Контейнер вкладок покупателей */
.customers-tabs3d {
    max-width: 1200px;           /* Максимальная ширина */
    margin: 0 auto;              /* Центрирование по горизонтали */
}

/* Стили для вкладок openTabby */
.openTabby,
.openTabby * {
    box-sizing: border-box;      /* Учитываем padding и border в размерах */
}

.openTabby {
    overflow: hidden;            /* Скрываем переполнение */
    margin: var(--spacing-md) 0; /* Вертикальные отступы */
}

/* Навигация вкладок */
.openTabby .openTabby--nav {
    position: relative;          /* Относительное позиционирование */
    width: 100%;                 /* Полная ширина */
    background: #fff;            /* Белый фон */
    border-bottom: 2px solid #BFE2FF; /* Голубая линия снизу */
}

/* Очистка float для навигации */
.openTabby .openTabby--nav:after {
    display: block;              /* Блочный элемент */
    content: "";                 /* Пустой контент */
    clear: both;                 /* Очистка float */
}

/* Список вкладок */
.openTabby .openTabby--nav ul {
    display: flex;               /* Flex-контейнер */
    justify-content: flex-start; /* Выравнивание влево */
    margin: 0;                   /* Убираем отступы */
    padding: 0;                  /* Убираем внутренние отступы */
    list-style: none;            /* Убираем маркеры списка */
}

/* Очистка float для списка */
.openTabby .openTabby--nav ul:after {
    display: block;              /* Блочный элемент */
    content: "";                 /* Пустой контент */
    clear: both;                 /* Очистка float */
}

/* Элемент списка вкладок */
.openTabby .openTabby--nav ul li {
    display: flex;               /* Flex-контейнер */
    align-items: center;         /* Вертикальное центрирование */
    gap: 8px;                    /* Расстояние между иконкой и текстом */
    cursor: pointer;             /* Курсор указателя */
    padding: var(--spacing-sm) 15px; /* Внутренние отступы */
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    font-weight: 600;            /* Полужирный шрифт */
    border: 2px solid transparent; /* Прозрачная рамка */
    position: relative;          /* Относительное позиционирование */
    top: 2px;                    /* Смещение вверх */
    z-index: 2;                  /* Уровень наложения */
    text-transform: uppercase;   /* Верхний регистр */
    font-family: Verdana, sans-serif; /* Шрифт */
    transition: all 0.3s ease;   /* Плавные переходы */
}

/* Иконка перед элементом вкладки */
.openTabby .openTabby--nav ul li::before {
    content: '';                 /* Пустой контент */
    display: inline-block;       /* Строчный блочный элемент */
    width: 20px;                 /* Ширина иконки */
    height: 20px;                /* Высота иконки */
    background-size: contain;    /* Сохранение пропорций */
    background-repeat: no-repeat;/* Без повторения */
    background-position: center; /* Центрирование иконки */
}

/* Иконки для конкретных вкладок */
.openTabby .openTabby--nav ul li[data-icon="frez"]::before {
    background-image: url('img/icons/frez-icon.png');
}
.openTabby .openTabby--nav ul li[data-icon="naplavka"]::before {
    background-image: url('img/icons/naplavka-icon.png');
}
.openTabby .openTabby--nav ul li[data-icon="tokar"]::before {
    background-image: url('img/icons/tokar-icon.png');
}
.openTabby .openTabby--nav ul li[data-icon="term"]::before {
    background-image: url('img/icons/term-icon.png');
}
.openTabby .openTabby--nav ul li[data-icon="drob"]::before {
    background-image: url('img/icons/drob-icon.png');
}
.openTabby .openTabby--nav ul li[data-icon="paint"]::before {
    background-image: url('img/icons/paint-icon.png');
}

/* Эффект при наведении на вкладку */
.openTabby .openTabby--nav ul li:hover {
    color: var(--primary-blue);  /* Синий цвет */
    background: #f0f8ff;         /* Светло-голубой фон */
    transform: translateY(-2px); /* Подъем вверх */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Тень */
}

/* Активная вкладка */
.openTabby .openTabby--nav ul li.active {
    color: var(--primary-blue);  /* Синий цвет */
    background: #fff;            /* Белый фон */
    border: 2px solid #BFE2FF;   /* Голубая рамка */
    border-bottom: 2px solid #fff; /* Белая нижняя граница */
    border-radius: 8px 8px 0 0;  /* Скругленные верхние углы */
    cursor: default;             /* Обычный курсор */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Тень */
}

/* Контейнер содержимого вкладок */
.openTabby .openTabby--slidesContainer {
    background-color: #fff;      /* Белый фон */
    display: table;              /* Табличное отображение */
    position: relative;          /* Относительное позиционирование */
    overflow: hidden;            /* Скрываем переполнение */
    border: 2px solid #BFE2FF;   /* Голубая рамка */
    border-top: none;            /* Убираем верхнюю границу */
    border-radius: 0 0 8px 8px;  /* Скругленные нижние углы */
}

/* Содержимое вкладки */
.openTabby .openTabby--slidesContainer .openTabby--slide {
    padding: var(--spacing-md);  /* Внутренние отступы */
    background: #fff;            /* Белый фон */
    width: 100%;                 /* Полная ширина */
    text-align: left;            /* Выравнивание текста влево */
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    font-size: 16px;             /* Размер шрифта */
    line-height: 1.6;            /* Межстрочный интервал */
}

/* Аккордеон для вкладок */
.openTabby.accordion .openTabby--nav ul {
    padding: var(--spacing-md);  /* Внутренние отступы */
    flex-direction: column;      /* Вертикальное расположение */
}

/* JavaScript-стили для вкладок */
.js .openTabby .openTabby--nav {
    display: block;              /* Блочное отображение */
    top: 0;                      /* Привязка к верху */
}

.js .openTabby .openTabby--slidesContainer {
    display: block;              /* Блочное отображение */
}

.js .openTabby .openTabby--slidesContainer .openTabby--slide {
    position: absolute;          /* Абсолютное позиционирование */
    top: 0;                      /* Привязка к верху */
    left: 0;                     /* Привязка к левому краю */
    opacity: 0;                  /* Скрыто по умолчанию */
}

.js .openTabby .openTabby--slidesContainer .openTabby--slide.active {
    opacity: 1;                  /* Полная видимость */
    z-index: 1;                  /* Уровень наложения */
}

/* Анимации с переходами */
.js .openTabby.csstransitions .openTabby--nav ul li,
.js .openTabby.csstransitions .openTabby--slidesContainer,
.js .openTabby.csstransitions .openTabby--slidesContainer .openTabby--slide {
    transition: all 0.3s ease;   /* Плавные переходы */
}

/* Эффект fade-flip для вкладок */
.openTabby .effect-fade-flip .openTabby--slide {
    opacity: 0;                  /* Скрыто */
    transform: rotateX(180deg);  /* Поворот */
    transition: opacity 0.3s ease, transform 0.3s ease 0.3s; /* Плавные переходы */
}

.openTabby .effect-fade-flip .openTabby--slide.active {
    opacity: 1;                  /* Полная видимость */
    transform: rotateX(0);       /* Исходное положение */
}

/* Responsive-стили для вкладок */
.js .openTabby.responsive .openTabby--slidesContainer {
    overflow: hidden;            /* Скрываем переполнение */
}

.js .openTabby.responsive .openTabby--slidesContainer .openTabby--slide {
    display: table;              /* Табличное отображение */
    overflow: hidden;            /* Скрываем переполнение */
}

.js .openTabby.accordion .openTabby--nav {
    width: auto;                 /* Автоматическая ширина */
}

.js .openTabby.accordion .openTabby--nav ul {
    width: 100%;                 /* Полная ширина */
}

.js .openTabby.accordion .openTabby--nav ul li {
    width: 100%;                 /* Полная ширина */
    display: block;              /* Блочное отображение */
    text-align: center;          /* Центрирование текста */
}

.openTabby.accordion .openTabby--nav ul li.active {
    border-bottom: 2px solid #BFE2FF; /* Голубая нижняя граница */
}

/* Индикаторы вкладок */
.tab-indicators {
    display: flex;               /* Flex-контейнер */
    justify-content: center;     /* Центрирование по горизонтали */
    gap: 8px;                    /* Расстояние между индикаторами */
    margin-top: var(--spacing-sm); /* Отступ сверху */
}

/* Индикатор вкладки */
.tab-indicators span {
    width: 10px;                 /* Ширина */
    height: 10px;                /* Высота */
    background: #ccc;            /* Серый фон */
    border-radius: 50%;          /* Круглая форма */
    cursor: pointer;             /* Курсор указателя */
    transition: background 0.3s ease; /* Плавный переход фона */
}

/* Активный индикатор */
.tab-indicators span.active {
    background: var(--primary-blue); /* Синий фон */
}

/* Выделенный текст */
.highlight-text {
    background: transparent;     /* Прозрачный фон */
    border: none;                /* Без рамки */
    border-left: 4px solid #337AB7; /* Синяя полоска слева */
    border-radius: 0;            /* Без скругления */
    padding: 15px var(--spacing-md); /* Внутренние отступы */
    max-width: 1120px;           /* Максимальная ширина */
    margin: var(--spacing-md) auto; /* Центрирование с отступами */
    text-align: left;            /* Выравнивание текста влево */
    color: var(--dark-gray);     /* Тёмно-серый цвет */
    font-size: 16px;             /* Размер шрифта */
    line-height: 1.6;            /* Межстрочный интервал */
    box-shadow: none;            /* Без тени */
    opacity: 0;                  /* Скрыто по умолчанию */
    animation: fadeInUp 0.5s ease forwards 0.3s; /* Анимация появления */
}

/* Жирный текст в выделенном блоке */
.highlight-text strong {
    color: #337AB7;              /* Синий цвет */
    font-weight: 700;            /* Жирный шрифт */
}



/* Тело модального окна в футере */
.modal-custom .modal-body {
    max-height: 60vh;            /* Максимальная высота 60% от высоты viewport */
    min-height: 200px;           /* Минимальная высота, чтобы окно не было слишком маленьким */
    overflow-y: auto;            /* Вертикальная прокрутка при переполнении */
    padding: var(--spacing-md);  /* Внутренние отступы */
    color: var(--dark-gray);     /* Тёмно-серый цвет текста */
    font-size: 16px;             /* Размер шрифта */
    line-height: 1.6;            /* Межстрочный интервал для читаемости */
    box-sizing: border-box;      /* Учитываем padding в размерах */
}

/* Заголовки внутри тела модального окна */
.modal-custom .modal-body h6 {
    color: var(--primary-blue);  /* Синий цвет для заголовков */
    font-size: 1.2rem;           /* Размер шрифта */
    font-weight: 700;            /* Жирный шрифт */
    margin-top: var(--spacing-md); /* Отступ сверху */
    margin-bottom: var(--spacing-sm); /* Отступ снизу */
}

/* Параграфы внутри тела модального окна */
.modal-custom .modal-body p {
    margin: 0 0 var(--spacing-sm) 0; /* Отступ снизу для параграфов */
    font-size: 16px;             /* Размер шрифта */
    line-height: 1.6;            /* Межстрочный интервал */
}

/* Ссылки внутри тела модального окна */
.modal-custom .modal-body a {
    color: var(--primary-blue);  /* Синий цвет ссылок */
    text-decoration: none;       /* Убираем подчеркивание */
    transition: color 0.3s ease; /* Плавный переход цвета */
}

/* Эффект при наведении на ссылки */
.modal-custom .modal-body a:hover {
    color: #007BFF;              /* Более светлый синий при наведении */
    text-decoration: underline;  /* Подчеркивание при наведении */
}



/* Модальные окна в футере (общие стили) */
.modal-custom {
    z-index: 10000; /* Высокий уровень наложения */
}

/* Диалог модального окна */
.modal-custom .modal-dialog {
    max-width: 800px; /* Максимальная ширина */
    width: 90vw; /* Адаптивная ширина */
    margin: 1.75rem auto; /* Центрирование */
}

/* Контент модального окна */
.modal-custom .modal-content {
    background-color: #fff; /* Белый фон */
    border-radius: 12px; /* Скругленные углы */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Тень */
    border: none; /* Без рамки */
}

/* Заголовок модального окна */
.modal-custom .modal-header {
    background-color: var(--primary-blue); /* Синий фон */
    color: #fff; /* Белый текст */
    border-bottom: none; /* Без нижней границы */
    padding: var(--spacing-md); /* Отступы */
    border-top-left-radius: 12px; /* Скругление углов */
    border-top-right-radius: 12px;
}

/* Заголовок (h5) в модальном окне */
.modal-custom .modal-title {
    font-size: 1.5rem; /* Размер шрифта */
    font-weight: 700; /* Жирный шрифт */
    text-align: left !important; /* Выравнивание по левому краю */
}

/* Кнопка закрытия в заголовке */
.modal-custom .modal-header .close {
    color: #fff; /* Белый цвет */
    font-size: 24px; /* Размер шрифта */
    opacity: 0.8; /* Прозрачность */
    transition: opacity 0.3s ease; /* Плавный переход */
    z-index: 10003; /* Выше содержимого */
    cursor: pointer;
}

/* Эффект при наведении на кнопку закрытия */
.modal-custom .modal-header .close:hover {
    opacity: 1; /* Полная непрозрачность */
    color: #ff0000; /* Красный цвет */
}

/* Тело модального окна */
.modal-custom .modal-body {
    max-height: 60vh; /* Максимальная высота */
    min-height: 200px; /* Минимальная высота */
    overflow-y: auto; /* Прокрутка */
    padding: var(--spacing-md); /* Отступы */
    color: var(--dark-gray); /* Тёмно-серый цвет */
    font-size: 16px; /* Размер шрифта */
    line-height: 1.6; /* Межстрочный интервал */
    box-sizing: border-box; /* Учитываем padding */
    text-align: left !important; /* Выравнивание всего текста по левому краю */
}

/* Переопределяем .text-protection */
.modal-custom .modal-body .text-protection {
    text-align: left !important; /* Выравнивание по левому краю */
}

/* Заголовки внутри тела модального окна */
.modal-custom .modal-body .section-title {
    text-align: left !important; /* Выравнивание по левому краю */
    color: var(--primary-blue); /* Синий цвет */
    font-size: 1.2rem; /* Размер шрифта */
    font-weight: 700; /* Жирный шрифт */
    margin-top: var(--spacing-md); /* Отступ сверху */
    margin-bottom: var(--spacing-sm); /* Отступ снизу */
}

/* Подпункты внутри тела модального окна */
.modal-custom .modal-body .subpoint {
    text-align: left !important; /* Выравнивание по левому краю */
    margin: 0 0 var(--spacing-md) 0; /* Отступ снизу */
    font-size: 16px; /* Размер шрифта */
    line-height: 1.6; /* Межстрочный интервал */
    display: block !important; /* Гарантирует перенос на новую строку */
    color: var(--dark-gray); /* Тёмно-серый цвет */
}

/* Ссылки внутри подпунктов */
.modal-custom .modal-body .subpoint a {
    color: var(--primary-blue) !important; /* Синий цвет */
    text-decoration: underline !important; /* Подчеркивание */
    transition: color 0.3s ease !important; /* Плавный переход */
}

.modal-custom .modal-body .subpoint a:hover {
    color: #007BFF !important; /* Светлый синий */
    text-decoration: none !important; /* Без подчеркивания при наведении */
}

/* Футер модального окна */
.modal-custom .modal-footer {
    border-top: none; /* Без верхней границы */
    padding: var(--spacing-md); /* Отступы */
    background-color: #f9f9f9; /* Светлый фон */
    border-bottom-left-radius: 12px; /* Скругление углов */
    border-bottom-right-radius: 12px;
}

/* Кнопка "Закрыть" в футере */
.modal-custom .modal-footer .btn-secondary {
    background-color: var(--primary-blue); /* Синий фон */
    border: none; /* Без рамки */
    padding: 10px 20px; /* Отступы */
    font-size: 16px; /* Размер шрифта */
    font-weight: 500; /* Полужирный шрифт */
    transition: background-color 0.3s ease; /* Плавный переход */
}

.modal-custom .modal-footer .btn-secondary:hover {
    background-color: #007BFF; /* Светлый синий */
}



/* Цитаты" */

.blockquote-4 {
    position: relative;
    font-size: 16px;
    margin: 16px 16px 46px 16px;
    border: 2px solid #337AB7;
    border-radius:20px;
    padding: 25px;
}
.blockquote-4::after {
    content:"";
    position: absolute;
    border: 2px solid #337AB7;
    border-radius: 0 50px 0 0;
    width: 40px;
    height: 40px;
    bottom: -40px;
    left: 50px;
    border-bottom: none;
    border-left: none;
    z-index: 2; 
    box-sizing: border-box;
} 
.blockquote-4::before {
    content:"";
    position: absolute;
    width: 80px;
    border: 6px solid #FFF;
    bottom: -3px;
    left: 50px;
    z-index: 1;
}
.blockquote-4 cite {
    position: absolute;
    bottom: -30px;
    left: 110px;
    font-size: 13px;
    font-weight: bold;
    color: #337AB7;
}


.blockquote-5 {
    position: relative;
    padding: 16px 24px;
    margin: 16px 16px 26px 16px;    
    font-size: 16px;
    border-top: 2px solid #337AB7;
    border-bottom: 2px solid #337AB7;
}
.blockquote-5::after {
    font-family: Times, sans-serif;
    font-weight: bold;
    position: absolute;
    content: "”";
    color: #BFE2FF;
    font-size: 160px;
    line-height: 0;
    bottom: -22px;
    right: 30px;
    text-shadow: 2px 0 0 #337AB7, -2px 0 0 #337AB7, 0 2px 0 #337AB7, 0 -2px 0 #337AB7, 1px 1px #337AB7, -1px -1px 0 #337AB7, 1px -1px 0 #337AB7, -1px 1px 0 #337AB7;    
}
.blockquote-5 cite {
    color: #337AB7;
    font-size: 15px;
    padding-top: 20px;
    display: block;
}


/* Анимация появления */
@keyframes fadeInUp {
    0% {
        opacity: 0;              /* Начальная непрозрачность */
        transform: translateY(20px); /* Начальное смещение вниз */
    }
    100% {
        opacity: 1;              /* Полная видимость */
        transform: translateY(0);/* Исходное положение */
    }
}