/* --- Глобальные переменные --- */
:root {
    /* Цвета */
    --primary-blue: #333399; /* Основной синий цвет */
    --secondary-gray: #6c757d; /* Вторичный серый цвет */
    --whatsapp-green: #25D366; /* Зеленый цвет WhatsApp */
    --viber-purple: #665CAC; /* Фиолетовый цвет Viber */
    --text-white: #ffffff; /* Белый цвет текста */
    --overlay-color: rgba(0, 0, 0, 0.4); /* Цвет оверлея (полупрозрачный черный) */
    --diagonal-color-left: rgba(35, 60, 95, 0.5); /* Цвет для диагонального градиента слева */
    --diagonal-color-right: rgba(150, 120, 90, 0.5); /* Цвет для диагонального градиента справа */
    --expert-gold: #FFD700; /* Золотой цвет для эффектов */
    --text-blue: #3498db; /* Синий цвет текста (использован для стрелки в селекте) */

    /* Шрифты */
    --font-merriweather: "Times New Roman", Times, serif; /* Основной заголовочный шрифт */
    --font-source-sans: "Times New Roman", Times, serif; /* Основной текстовый шрифт */

    /* Отступы */
    --spacing-xs: 3px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 30px;
    --spacing-xl: 50px;
}

/* --- Сброс стилей и общие базовые стили --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Важно для корректной работы с отступами и размерами */
}

body, html {
    height: 100%;
    width: 100%;
    font-family: var(--font-source-sans); /* Основной шрифт для всего текста */
    color: var(--text-white); /* Белый цвет текста по умолчанию */
    overflow: hidden; /* Скрывает полосы прокрутки, если контент выходит за пределы */
    position: relative; /* Для позиционирования дочерних элементов */
    display: flex;
    flex-direction: column; /* Элементы внутри body будут располагаться в колонку */
}

/* Псевдоэлемент для диагонального градиентного фона */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1; /* Позиционирование ниже основного контента, но выше видео */
    background: linear-gradient(75deg, var(--diagonal-color-left) 60%, var(--diagonal-color-right) 60%);
}

/* Стили для ссылок */
a {
    color: inherit; /* Ссылки наследуют цвет родителя */
    text-decoration: none; /* Убирает подчеркивание */
}
a:hover {
    color: var(--expert-gold); /* Цвет при наведении */
}
/* --- Секция видео-фона --- */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: -2; /* Самый нижний слой */
}

.video-background video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Центрирует видео */
    object-fit: cover; /* Заполняет контейнер, обрезая лишнее */
}

/* Наложение на видео (оверлей) */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--overlay-color); /* Полупрозрачный черный цвет */
    z-index: -1.5; /* Между видео и псевдоэлементом body::before */
}

/* --- Элементы управления вверху (выбор языка/валюты) --- */
.top-controls {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    gap: var(--spacing-md);
    z-index: 1000; /* Поверх всего */
}

.top-controls select {
    padding: 8px 25px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .5);
    font-size: 1em;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .2);
    color: var(--text-white); /* Изменено на white для лучшей читаемости */
    -webkit-appearance: none; /* Убирает стандартные стили для select */
    -moz-appearance: none;
    appearance: none;
    /* Добавляет кастомную стрелку */
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center; /* Изменено для лучшего позиционирования */
    background-size: 16px;
}

.top-controls select option {
    background-color: rgba(0, 0, 0, .8); /* Цвет фона опций в выпадающем списке */
    color: var(--text-white);
}

/* --- Основная секция контента (Main Content Section) --- */
.main-content-section {
    flex-grow: 1; /* Занимает все доступное пространство по вертикали */
    display: flex;
    align-items: flex-start; /* Центрирует содержимое по вертикали */
    justify-content: flex-start; /* Выравнивает содержимое к началу по горизонтали */
    height: auto;
    padding: var(--spacing-xs) var(--spacing-xs); /* Отступы сверху/снизу и по бокам */
    position: relative;
    z-index: 10; /* Выше фоновых слоев */
}

.content-wrapper {
    width: 100%;
    max-width: 500px;
    padding: var(--spacing-xs);
    border-radius: 10px;
    margin-left: 10%; /* Отступ слева для основного блока */
    text-align: center;
    /* На мобильных устройствах эти стили будут переопределены,
       чтобы убрать тень и фон, делая его прозрачным */
}

.content-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-column {
    width: 100%;
}

/* --- Блок с основной информацией (логотип, заголовок, кнопки) --- */
.main-info-block {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    opacity: 0; /* Изначально скрыт для анимации */
    transform: translateY(20px); /* Изначально смещен для анимации */
    transition: opacity .6s ease-out, transform .6s ease-out; /* Плавная анимация */
}

/* Классы для анимации при скролле (или других триггерах) */
.animate-on-scroll {
    opacity: 0; /* Изначальное состояние для анимации */
    transform: translateY(20px); /* Изначальное смещение для анимации */
    transition: opacity .6s, transform .6s; /* Плавная анимация */
}

.animate-on-scroll.animate {
    opacity: 1; /* Конечная прозрачность */
    transform: translateY(0); /* Конечная позиция */
}

/* Класс для скринридеров (скрывает элемент визуально) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Логотип --- */
.logo-container {
    margin-bottom: var(--spacing-md);
}

.logo-container h2 {
    font-family: var(--font-merriweather);
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
    color: var(--text-white);
}

/* --- Подзаголовок (описание сайта) --- */
.main-subtitle {
    font-family: var(--font-source-sans);
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
}

/* --- Общие стили для кастомных кнопок --- */
.custom-button,
.custom-messenger-button {
    font-weight: 600;
    transition: .2s ease-in-out; /* Плавный переход при наведении */
    box-sizing: border-box; /* Убеждаемся, что box-sizing применяется */
}

.button-group-custom {
    display: flex;
    flex-direction: column; /* Кнопки в группе располагаются в колонку */
    align-items: center; /* Центрирует кнопки */
    margin-bottom: var(--spacing-lg);
}

.custom-button {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 15px;
    font-size: 1.2rem;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    width: 250px; /* Фиксированная ширина */
    max-width: 80%; /* Максимальная ширина, чтобы не выходить за пределы родителя */
    margin-bottom: var(--spacing-sm); /* Отступ между кнопками */
}

.custom-button:last-child {
    margin-bottom: 0; /* Убираем нижний отступ у последней кнопки */
}

/* Основная кнопка (синяя) */
.custom-button.primary-button {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--text-white);
}

.custom-button.primary-button:hover {
    background-color: #6666CC;
    border-color: #0056b3;
}

/* Вторичная кнопка (цвет диагонального градиента) */
.custom-button.secondary-button {
    background-color: var(--diagonal-color-right);
    border-color: var(--diagonal-color-right);
    color: var(--text-white);
}

.custom-button.secondary-button:hover {
    background-color: rgba(150, 120, 90, .7); /* Затемненная версия */
    border-color: rgba(150, 120, 90, .7);
    color: var(--text-white);
}

/* --- Контактная информация --- */
.contact-info-block {
    margin-bottom: var(--spacing-lg);
}

.contact-address {
    font-style: normal; /* Убирает курсив для i/address тегов */
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm); /* Отступ снизу для адреса */
    /* Возможно, здесь вам тоже нужно явно указать font-family для текста адреса, если он отличается от основного */
}
.contact-address .fas {
    font-family: 'Font Awesome 7 Free', sans-serif; /* Попытка переопределить */
    font-weight: 900;
    /* Возможно, здесь потребуется !important, но пробуем без него */
}
.contact-address i,
.phone-number-line i {
    margin-right: 5px; /* Отступ справа для иконок */
    /* ОЧЕНЬ ВАЖНО: УКАЖИТЕ FONT-FAMILY И FONT-WEIGHT ДЛЯ ИКОНОК */

    font-weight: 900; /* Для solid иконок (fas) */
    /* Если вы используете Regular (far) или Brands (fab) иконки, для них будут другие font-weight. */
    /* Например, font-weight: 400; для Regular. */
}

.phone-number-line {
    margin-bottom: var(--spacing-sm);
    font-size: 1.2rem;
}

.phone-link {
    color: var(--text-white);
    border-bottom: 1px dashed var(--text-white); /* Пунктирное подчеркивание */
    white-space: nowrap; /* Предотвращает перенос номера телефона */
}

.phone-link:hover {
    border-bottom-style: solid; /* Сплошное подчеркивание при наведении */
}
}

.contact-address-link:hover {
    border-bottom-style: solid; /* Сплошное подчеркивание при наведении */
}
/* --- Группа кнопок мессенджеров --- */
.messenger-buttons-custom {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Перенос на новую строку, если не хватает места */
    gap: var(--spacing-sm); /* Отступ между кнопками */
}

.custom-messenger-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 1.1rem;
    min-width: 120px;
    color: var(--text-white);
}

.custom-messenger-button i {
    margin-right: 8px; /* Отступ справа для иконки мессенджера */
}

/* Кнопка WhatsApp */
.whatsapp-button {
    background-color: var(--whatsapp-green);
    border: 1px solid var(--whatsapp-green);
}

.whatsapp-button:hover {
    background-color: #1da851;
    border-color: #1da851;
}

/* Кнопка Viber */
.viber-button {
    background-color: var(--viber-purple);
    border: 1px solid var(--viber-purple);
}

.viber-button:hover {
    background-color: #554c91;
    border-color: #554c91;
}
/*кнопка телеграм*/
.telegram-button {
    background-color:#0088CC; /* Фирменный синий цвет Telegram */
    border: 1px solid #0088CC; /* Добавим границу, как у Viber кнопки */
}

.telegram-button:hover {
    background-color: #007bb5; /* Чуть более тёмный синий при наведении */
    border-color: #007bb5;

}


/* --- Футер с социальными ссылками --- */
.social-links-footer {
    padding: var(--spacing-lg) 0;
    text-align: center;
    z-index: 10;

}

.social-icons-list {
    list-style: none; /* Убирает маркеры списка */
    display: flex;
    justify-content: flex-end; /* Выравнивает иконки вправо */
    margin: 0; /* Убираем стандартные отступы списка */
    padding: 0; /* Убираем стандартные отступы списка */
}

.social-icon-item {
    margin: 0 var(--spacing-md);
}

.social-icon-item a {
    font-size: 2rem;
    transition: .2s ease-in-out;
    padding: 10px; /* Увеличивает кликабельную область */
    color: var(--text-white);
}

.social-icon-item a:hover {
    color: var(--expert-gold); /* Золотой цвет при наведении */
}

/* --- Анимации --- */
/* Анимация пульсации */
.animate-pulse {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* --- Медиа-запросы для адаптивности (экраны до 768px) --- */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden; /* Предотвращает горизонтальную прокрутку */
    }

    /* Изменение градиента для мобильных устройств */
    body::before {
        background: linear-gradient(90deg, var(--diagonal-color-left) 100%, transparent 100%);
    }

    .main-content-section {
        padding: var(--spacing-lg) var(--spacing-sm);
        height: auto;
        justify-content: center; /* Центрирует содержимое по горизонтали */
    }

    .content-wrapper {
        padding: var(--spacing-xs);
        margin-left: 0; /* Убирает левый отступ */
        box-shadow: none; /* Убирает тень */
        background-color: transparent; /* Делает фон прозрачным */
    }

    .top-controls {
        position: static; /* Убирает абсолютное позиционирование */
        width: 100%;
        display: flex;
        justify-content: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) 0;
        background-color: rgba(0, 0, 0, .5);
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
        top: unset; /* Сброс */
        right: unset; /* Сброс */
    }

    .top-controls select {
        padding: 6px 10px;
        font-size: .9em;
    }

    .logo-container h2 {
        font-size: 3rem;
    }

    .main-subtitle {
        font-size: 1.2rem;
        margin-top: -10px;
        margin-bottom: var(--spacing-md);
    }

    .button-group-custom {
        margin-bottom: var(--spacing-md);
    }

    .custom-button {
        font-size: 1rem;
        padding: 10px 20px;
        width: 200px;
    }

    .contact-address,
    .phone-number-line {
        font-size: 1rem;
        margin-bottom: var(--spacing-xs);
    }

    .contact-info-block {
        margin-top: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }

    .messenger-buttons-custom {
        gap: var(--spacing-xs);
    }

    .custom-messenger-button {
        font-size: .9em;
        padding: 6px 12px;
        min-width: 100px;
    }

    .social-links-footer {
        padding: var(--spacing-sm) 0;
        margin-top: 0; /* Сброс top */
        position: relative; /* Чтобы top: -148px не применялся */
        top: unset;
    }

    .social-icons-list {
        justify-content: center; /* Центрирует иконки в футере на мобильных */
    }

    .social-icon-item {
        margin: 0 var(--spacing-sm);
    }

    .social-icon-item a {
        font-size: 2rem;
    }
    i {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'fa-solid';
}