:root {
    --bg-dark: #1a1a1a;           /* Очень темный фон */
    --bg-darker: #1a1a1a;         /* Очень темный фон */
    --text-primary: #ffffff;      /* Белый цвет текста */
    --text-secondary: #cccccc;    /* Светло-серый для второго текста */
    --accent: #ffffff;            /* Белый акцент */
    --border-color: #333333;      /* Темный цвет рамок */
}

body {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIhSURBVHgB7ZVNaxNRFIbfufmYpuCkGCoIKhZJRYtasyvYhQt12T8wuHHpJiQiJKusgklIoBEM0hCqFRViMT9A0I0UtAFtUi0ualo/SGoFW+LMZEhmPOOii7ahgZmsOg/czZnDfe/5HA5ENpsVZFm+rut6vVwuLxSLxQ76DGeIKoqyKkuSjx8YAGPsg9PpvBkKhSroI0xV1SmK1pfL5fBodhbb21vj7Xb7dSKRuEYZ4NAnWKfTOUMRo95o4PPKCvL5GXxarvrIXkqlUvfpAUfQB9huQ72+gRfz81hcfD+o69ptjuMexOPxUVgM28/YbP5F6WUJT+bmoMiy6HK53lD0E1amnnX7oOk6KtVlFAoF/NpoHNc07VU6nb5llTg7yKG2tobp6SyqlaVBEn+YTCanYAEHChu0VBVPnz0HzThNG7uXyWSOwiQ9CRtQl6Oy9BGU6rOtVkuASXoWNhAEL6jLNx0OhwKT9CzM8zwCgctGxO8kSdqESXoW9vv9OHHylELCM7FYrA2TMEpdk3YzPB5PVydKLcbOnwP5VSnyBViAIfxYEIQ/oihiZOQ0eLd7j9Ox4WFcvDRu1DcfDAYbsID/y4C2kkgzeocuHqM16aytfsX3nz/wbX2dGkrAlclJeL1DZersG9Fo9DcsYGcLUd3cJDJBl1+lOl4gU4DOEB2jnm8p3XfD4fAXWETX9UdLwkMPGKXf5lYkEqnBxsbGxubQ8Q/eluU5KDj1tQAAAABJRU5ErkJggg==),default !important;
}

/* Кастомный курсор для всех кнопок */
button, a, .custom-cursor {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKOSURBVHgB7VVLiJJRFD4+xvfIzLRpFs4iHINUXGQrTWgRQZBtamHLCCUIFzFCIKSbAhEj3AzuR1q1qFUFiTKJsxBMSyQQsUgqQxHzV/PZp4shRwf9ZaRFfnC597+Pc8733XPuT/SPwJk0abVaV7a3t293u927/X5fwOfzXzIM89DtdrfohMCfNAmnFxuNxuNwOLyBngwGg2pzc/MzlnbphMCdNAmWVzKZzEYoFKJYLEbRaJTX6/Wueb1eKS3SMbDabDYPP+r1+iAYiVAo5NGCHS8c/OMWwO7o1Bnc9y2Px/Me4y9ra2s/bTZbm+YEdxbHxWKR4vG4Ip/P7yK7YxwO51O1Wt33+Xw3kel8mgNj5eT3+4VgtpdKpW4Eg8GRNR6PRyKRiMCWtFot6fX6JsZPBQKB2263/yYWGIsWiXS+1WpdguOxzahrAuNhKxQKlMvlRBaL5Z5MJjvA8gtigRGpwVYOVjvJZPJUOp2eehiOKZFIyDC8DslZJerI5na7faFWq12ORCKEup16uNPpEO59UGpnpVKpmFjg0PEgYhi6CkOyUqk002Ek2fDO0Tchf5dY4Kg8q2BNswJvOKlUqj7U+ehyuVgl19+MB9ruKxSKvlg8m2qD7FYqlQwYv0brEwuMMIbUb9bX1w+MRiNxudNzRa1WE4LMQe63xBIj1p1O5w/I98BkMjE6nW54hxMPIaitrS3Cvh6q4AnbGh5grI6R1e+QoY/MZvMOjG5ks1lCXRPmCGoMG36RpNFofqF+9xDAM5oDEykFAgFJpVK5g6S5Xy6XT6NfkUgkDGQtQ5ESyucDWD+Xy+Wv5n2vOcctwDgH/18l5D6HF0sM9t/h/Ctetm8Oh4OhJZZYYon/Dn8AC5oMWFEc0/wAAAAASUVORK5CYII=), pointer !important;
}

input, textarea, video {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKOSURBVHgB7VVLiJJRFD4+xvfIzLRpFs4iHINUXGQrTWgRQZBtamHLCCUIFzFCIKSbAhEj3AzuR1q1qFUFiTKJsxBMSyQQsUgqQxHzV/PZp4shRwf9ZaRFfnC597+Pc8733XPuT/SPwJk0abVaV7a3t293u927/X5fwOfzXzIM89DtdrfohMCfNAmnFxuNxuNwOLyBngwGg2pzc/MzlnbphMCdNAmWVzKZzEYoFKJYLEbRaJTX6/Wueb1eKS3SMbDabDYPP+r1+iAYiVAo5NGCHS8c/OMWwO7o1Bnc9y2Px/Me4y9ra2s/bTZbm+YEdxbHxWKR4vG4Ip/P7yK7YxwO51O1Wt33+Xw3kel8mgNj5eT3+4VgtpdKpW4Eg8GRNR6PRyKRiMCWtFot6fX6JsZPBQKB2263/yYWGIsWiXS+1WpdguOxzahrAuNhKxQKlMvlRBaL5Z5MJjvA8gtigRGpwVYOVjvJZPJUOp2eehiOKZFIyDC8DslZJerI5na7faFWq12ORCKEup16uNPpEO59UGpnpVKpmFjg0PEgYhi6CkOyUqk002Ek2fDO0Tchf5dY4Kg8q2BNswJvOKlUqj7U+ehyuVgl19+MB9ruKxSKvlg8m2qD7FYqlQwYv0brEwuMMIbUb9bX1w+MRiNxudNzRa1WE4LMQe63xBIj1p1O5w/I98BkMjE6nW54hxMPIaitrS3Cvh6q4AnbGh5grI6R1e+QoY/MZvMOjG5ks1lCXRPmCGoMG36RpNFofqF+9xDAM5oDEykFAgFJpVK5g6S5Xy6XT6NfkUgkDGQtQ5ESyucDWD+Xy+Wv5n2vOcctwDgH/18l5D6HF0sM9t/h/Ctetm8Oh4OhJZZYYon/Dn8AC5oMWFEc0/wAAAAASUVORK5CYII=), default;
}

html, body {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIhSURBVHgB7ZVNaxNRFIbfufmYpuCkGCoIKhZJRYtasyvYhQt12T8wuHHpJiQiJKusgklIoBEM0hCqFRViMT9A0I0UtAFtUi0ualo/SGoFW+LMZEhmPOOii7ahgZmsOg/czZnDfe/5HA5ENpsVZFm+rut6vVwuLxSLxQ76DGeIKoqyKkuSjx8YAGPsg9PpvBkKhSroI0xV1SmK1pfL5fBodhbb21vj7Xb7dSKRuEYZ4NAnWKfTOUMRo95o4PPKCvL5GXxarvrIXkqlUvfpAUfQB9huQ72+gRfz81hcfD+o69ptjuMexOPxUVgM28/YbP5F6WUJT+bmoMiy6HK53lD0E1amnnX7oOk6KtVlFAoF/NpoHNc07VU6nb5llTg7yKG2tobp6SyqlaVBEn+YTCanYAEHChu0VBVPnz0HzThNG7uXyWSOwiQ9CRtQl6Oy9BGU6rOtVkuASXoWNhAEL6jLNx0OhwKT9CzM8zwCgctGxO8kSdqESXoW9vv9OHHylELCM7FYrA2TMEpdk3YzPB5PVydKLcbOnwP5VSnyBViAIfxYEIQ/oihiZOQ0eLd7j9Ox4WFcvDRu1DcfDAYbsID/y4C2kkgzeocuHqM16aytfsX3nz/wbX2dGkrAlclJeL1DZersG9Fo9DcsYGcLUd3cJDJBl1+lOl4gU4DOEB2jnm8p3XfD4fAXWETX9UdLwkMPGKXf5lYkEqnBxsbGxubQ8Q/eluU5KDj1tQAAAABJRU5ErkJggg==), default;
}

.secondv {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIhSURBVHgB7ZVNaxNRFIbfufmYpuCkGCoIKhZJRYtasyvYhQt12T8wuHHpJiQiJKusgklIoBEM0hCqFRViMT9A0I0UtAFtUi0ualo/SGoFW+LMZEhmPOOii7ahgZmsOg/czZnDfe/5HA5ENpsVZFm+rut6vVwuLxSLxQ76DGeIKoqyKkuSjx8YAGPsg9PpvBkKhSroI0xV1SmK1pfL5fBodhbb21vj7Xb7dSKRuEYZ4NAnWKfTOUMRo95o4PPKCvL5GXxarvrIXkqlUvfpAUfQB9huQ72+gRfz81hcfD+o69ptjuMexOPxUVgM28/YbP5F6WUJT+bmoMiy6HK53lD0E1amnnX7oOk6KtVlFAoF/NpoHNc07VU6nb5llTg7yKG2tobp6SyqlaVBEn+YTCanYAEHChu0VBVPnz0HzThNG7uXyWSOwiQ9CRtQl6Oy9BGU6rOtVkuASXoWNhAEL6jLNx0OhwKT9CzM8zwCgctGxO8kSdqESXoW9vv9OHHylELCM7FYrA2TMEpdk3YzPB5PVydKLcbOnwP5VSnyBViAIfxYEIQ/oihiZOQ0eLd7j9Ox4WFcvDRu1DcfDAYbsID/y4C2kkgzeocuHqM16aytfsX3nz/wbX2dGkrAlclJeL1DZersG9Fo9DcsYGcLUd3cJDJBl1+lOl4gU4DOEB2jnm8p3XfD4fAXWETX9UdLwkMPGKXf5lYkEqnBxsbGxubQ8Q/eluU5KDj1tQAAAABJRU5ErkJggg==), default;
}

nav {
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем всё по горизонтали */
    height: 5rem;
    padding: 0 20px;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 1rem;
    font-weight: bold;
    color: var(--accent);
    text-decoration: none;
    margin-left: 300px; /* Увеличили отступ от левого края */
    margin-top: 15px; /* Увеличили отступ от левого края */
    flex: 0 0 auto; /* Логотип фиксирован по левому краю */
}

.nav-links {
    display: flex;
    gap: 20px;
    flex: 1;
    justify-content: center; /* Центрируем кнопки */
}

.contact-btns {
    display: flex;
    align-items: center;
    gap: 4px; /* Ещё меньше расстояние между текстом и стрелкой */
    padding: 4px 8px; /* Очень маленькие отступы (было 10px 20px, затем 6px 12px) */
    background-color: rgb(79, 70, 229); /* Indigo 600 */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em; /* Уменьшаем текст до ~12-13px (было 1em ≈ 16px) */
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-btns:hover {
     background-color: rgb(67, 56, 202); /* Чуть темнее при наведении */
}

.contact-btns span {
    display: inline-block;
}

.profile-btns {
    /* Дополнительные стили, если нужны */
}

/* Общий стиль ссылок */
.nav-links a {
    position: relative;
    text-decoration: none;
    color: #ddd; /* Светло-серый цвет текста */
    font-size: 16px;
    font-weight: 400;
    padding: 8px 12px;
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 8px; /* Закругление углов */
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.05); /* Еле заметный белый бокс */
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05); /* Размытие */
    color: inherit !important; /* НЕ МЕНЯЕМ ЦВЕТ ТЕКСТА */
}

/* Убираем # перед текстом только для кнопки "Другое" */
.nav-links .no-hash::before {
    content: ""; /* Убираем контент (символ #) */
}

/* Кнопка "Другое" не должна менять цвет при наведении */
.nav-links .no-hash {
    color: inherit; /* Оставляем текущий цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
    background: none; /* Убираем фон при наведении */
}

/* Убираем изменения цвета для кнопки "Другое" при наведении */
.nav-links .no-hash:hover {
    color: inherit; /* Цвет не меняется */
    background: none; /* Убираем фон при наведении */
}

/* Кнопки в выпадающем меню */
.nav-links .dropdown-content a {
    color: inherit; /* Цвет текста будет тем же, что и на основной кнопке */
    text-decoration: none; /* Убираем подчеркивание */
}

.navbar { /* Или другой класс навигации */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: backdrop-filter 0.5s ease-in-out, background-color 0.5s ease-in-out;
}


body {
    font-family: 'Rubik', sans-serif;
    background: 
        linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)),  /* Легкий градиент по углу */
        url('foned-fpfi-ai.jpg'); /* Здесь можно добавить изображение фона, если нужно */
    background-size: cover; /* Фон растягивается на весь экран */
    height: 100vh; /* Фон растягивается на весь экран */
    margin: 0; /* Убираем отступы */
    display: block; /* Возвращаем нормальное поведение для элементов */
    color: var(--text-primary);
    background-attachment: fixed;  /* Фон остается фиксированным при прокрутке */
}

        .buttons-container {
    display: flex;
    align-items: center; /* Выравнивание кнопок по вертикали */
    gap: 0.5rem; /* Разделение между кнопками */
    margin: 0; /* Убираем лишние отступы */
}

/* Стили для выпадающего меню */
.dropdown {
    position: relative;
    margin-left: 100px;  /* Добавляем отступ слева для кнопки "Другое" */
}

/* Кнопка "Другое" */
.dropdown a {
    font-weight: bold !important;  /* Жирный шрифт */
    font-size: 14px !important;  /* Устанавливаем размер шрифта */
    text-decoration: none; /* Убираем подчеркивание */
    color: #ddd; /* Цвет текста */
    padding: 5px 10px; /* Отступы */
    transition: color 0.3s ease-in-out;
}

/* При наведении на кнопку "Другое" */
.dropdown a:hover {
    color: #5a2d82; /* Темно-фиолетовый цвет при наведении */
}

/* Выпадающий контент (изначально скрыт) */
.dropdown-content {
    display: block;  /* Меню всегда занимает пространство */
    position: absolute;
    top: 100%; /* Меню будет расположено непосредственно под кнопкой */
    background: none; /* Убираем фон контейнера */
    padding: 0px 0; /* Минимальные отступы */
    list-style: none;
    opacity: 0; /* Изначально меню полностью прозрачно */
    transform: scaleY(0); /* Изначально сжато по вертикали */
    transform-origin: top; /* Разворачиваем снизу вверх */
    pointer-events: none; /* Не позволяет взаимодействовать с элементами, пока меню скрыто */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Более плавная анимация */
}

/* Показываем меню при наведении */
.dropdown:hover .dropdown-content {
    opacity: 1; /* Меню становится видимым */
    transform: scaleY(1); /* Меню раскрывается */
    pointer-events: all; /* Разрешаем взаимодействие с элементами меню */
}

/* Ссылки в выпадающем меню */
.dropdown-content a {
    display: block; /* Каждая ссылка на новой строке */
    text-decoration: none;
    color: #ddd; /* Светло-серый текст */
    font-size: 14px !important; /* Размер шрифта */
    font-weight: bold !important;  /* Жирный шрифт */
    padding: 5px 15px; /* Отступы */
    transition: color 0.3s ease-in-out;
}

/* Затемнение текста при наведении */
.dropdown-content a:hover {
    color: #5a2d82; /* Темно-фиолетовый цвет при наведении */
}

/* Стили для стрелочки */
.arrow {
    display: inline-block;
    transition: transform 0.3s ease-in-out; /* Плавный поворот */
    width: 7px;  /* Устанавливаем размер картинки */
    height: 7px;  /* Устанавливаем размер картинки */
    vertical-align: middle; /* Выравнивание по центру относительно текста */
    margin-left: 5px; /* Немного отступа слева для разделения */
}

/* При наведении на .dropdown стрелочка поворачивается */
.dropdown:hover .arrow {
    transform: rotate(180deg); /* Поворот стрелки */
}


/* Прелоадер */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0a0a0a; /* Темный фон */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Прелоадер поверх контента */
    transition: opacity 0.3s ease-in-out; /* Плавное исчезновение */
}

/* Контейнер для логотипа и текста */
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Анимация появления изображения */
.loader-image {
    max-width: 250px;
    max-height: 250px;
    animation: fadeInOutImage 1.5s infinite;
}

@keyframes fadeInOutImage {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Контент страницы */
.content {
    opacity: 0; /* Скрываем контент в начале */
    transition: opacity 0.5s ease-in-out; /* Плавное появление */
}

.logo-image {
    height: 70px; /* Или другой размер */
    width: auto;
}

/* Стили для ссылок в навигации */
.nav-links a,
.dropdown-content a {
    position: relative; /* Для позиционирования # */
    text-decoration: none;
    color: #ddd; /* Светло-серый текст */
    font-size: 16px;
    font-weight: 400;
    padding: 5px 10px;
    transition: color 0.3s ease-in-out;
}

/* Добавляем # перед текстом */
.nav-links a::before,
.dropdown-content a::before {
    content: "#"; /* Сам символ # */
    color: #a855f7; /* Неоновый фиолетовый */
    font-weight: bold;
    margin-right: 5px; /* Отступ от текста */
    transition: color 0.3s ease-in-out;
}

/* Затемнение текста при наведении */
.nav-links a:hover,
.dropdown-content a:hover {
    color: #5a2d82; /* Темно-фиолетовый */
}

/* Изменение цвета # при наведении */
.nav-links a:hover::before,
.dropdown-content a:hover::before {
    color: #9333ea; /* Более яркий неоновый фиолетовый */
}

/* Убираем # для кнопок в выпадающем меню при наведении */
.dropdown-content a:hover::before {
    content: ""; /* Убираем символ # при наведении на кнопку в меню */
}

/* Убираем # для всех ссылок в выпадающем меню */
.dropdown-content a::before {
    content: ""; /* Убираем символ # для всех ссылок в выпадающем меню */
}

/* Логотип */
.logo-image {
    transition: filter 0.2s ease-in-out; /* Плавное изменение яркости */
}

/* При наведении на логотип */
.logo-image:hover {
    filter: brightness(0.5); /* Затемнение (0 — полностью черное, 1 — без изменений) */
}

.secondv {
    width: auto;              /* Ширина видео будет 60% от ширины экрана */
    max-width: 450px;        /* Максимальная ширина видео — 600px */
    height: auto;            /* Высота видео будет автоматически подстраиваться */
    position: absolute;      /* Абсолютное позиционирование */
    top: 425px;              /* Устанавливаем отступ сверху от навигации */
    left: 800px;              /* Устанавливаем отступ сверху от навигации */
}

/* Контейнер для титульного текста */
.title-container {
    text-align: left; /* Выравнивание текста по левому краю */
    margin-top: 250px; /* Отступ сверху для перемещения текста вниз */
    margin-left: 150px; /* Отступ слева для сдвига текста влево */
    padding: 20px;
}

/* Основной титульный текст */
.title {
    font-family: 'Rubik', sans-serif;
    font-size: 80px;
    font-weight: 1200;
    font: bold;
    tracking: tight;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4); /* Тень для текста */
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}


/* Подзаголовок */
.subtitle {
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    color: #faf7f7;
    margin-top: 20px;
    font-weight: 500;
    opacity: 0.5; /* Прозрачность выделенного текста */
}

/* Кнопка */
.contact-btn {
  display: inline-flex; /* Гибкое выравнивание */
  align-items: center; /* Центрируем текст и иконку */
  gap: 10px; /* Отступ между текстом и стрелкой */
  padding: 12px 24px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background-color: rgb(79, 70, 229); /* Indigo 600 */
  border-radius: 9px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
}

.contact-btn:hover {
  background-color: rgb(67, 56, 202); /* Чуть темнее при наведении */
}

.arrow-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.4s;
}

.contact-btn:hover .arrow-icon {
  transform: translateX(5px); /* Сдвиг стрелки вправо */
}

footer {
    position: fixed;
    bottom: 500px; /* Скрыт в начале */
    left: 80%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1100px;
    padding: 20px;
    background: rgba(17, 17, 17, 0.5); /* Прозрачный темный фон */
    backdrop-filter: blur(10px); /* Эффект размытия */
    border-radius: 20px; /* Закругленные углы */
    text-align: center;
    color: #fff;
    transition: bottom 0.5s ease-in-out;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
}

/* Логотип слева */
.footer-logo img {
    width: 90px;
    height: auto;
    opacity: 0.8;
}

/* Копирайт по центру */
.footer-copyright {
    text-align: center;
    flex-grow: 1; /* Растягивается по центру */
}

.footer-copyright p {
    margin: 5px 0;
    font-size: 15px;
    color: #aaa;
}

.footer-note {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* Соц. сети справа */
.footer-social {
    text-align: right;
}

.footer-heading {
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #dee0e0; /* Акцентный цвет */
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon img {
    width: 20px;
    transition: transform 0.2s ease;
}

.social-icon:hover img {
    transform: scale(1.2);
}

/* Новая секция */
.music {
    width: 100%;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white; /* Белый текст */
    margin-top: 250px; /* Добавляем отступ сверху, чтобы она была ниже */
    margin-left: -600px; 
}

/* Заголовок секции с иконкой */
.section-header .tag {
    display: flex;
    align-items: center;
    background-color: rgba(60, 123, 255, 0.1); /* Слегка прозрачный фон */
    color: #3C7BFF;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 30px;
    gap: 10px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}


 /* сам контейнер СУКАА */
.section-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 700px; 
}

.box-container {
    background-color: rgba(51, 51, 51, 0.4); /* Темно-серый с прозрачностью (0.7) */
    color: white;
    padding: 30px;
    border-radius: 45px;
    width: 1300px;
    text-align: center;
    margin-right: -1200px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Добавление тени для более выразительного вида */
}

.row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 90px; /* Расстояние между строками */
}

.section-row {
    display: flex;
    align-items: center;
    width: 90%; /* Задаем ширину каждого блока, чтобы они располагались в ряд */
    margin: 0 30px;
}

.section-row .icon {
    margin-right: 15px; /* Расстояние между иконкой и текстом */
}

.section-row .text h3 {
    margin: 10px 0;
    font-size: 1.2em;
}

.section-row .text p {
    color: rgba(255, 255, 255, 0.3); /* Полупрозрачный текст */
    margin: 5px 0;
    font-size: 0.8em;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;  /* Установите нужную ширину */
    height: 50px;  /* Установите нужную высоту */
}


.icon svg {
    width: 2em;  /* Можно настроить под нужный размер */
    height: 2em;  /* Можно настроить под нужный размер */
}


.icon-container {
    display: flex;
    flex-direction: column; /* Расположение по вертикали */
    align-items: center; /* Центрируем иконки по горизонтали */
}

.icon {
    margin-bottom: 10px; /* Расстояние между иконками */
}

.fill-white {
    fill: white;
}


/* Новая секция */
.whywe {
    width: 100%;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white; /* Белый текст */
    margin-top: 100px; /* Добавляем отступ сверху, чтобы она была ниже */
    margin-left: -600px; 
}

/* Заголовок секции с иконкой */
.section-header .tag {
    display: flex;
    align-items: center;
    background-color: rgba(60, 123, 255, 0.1); /* Слегка прозрачный фон */
    color: #3C7BFF;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 30px;
    gap: 10px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Новая секция */
.whywep {
    width: 100%;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white; /* Белый текст */
    margin-top: -100px; /* Добавляем отступ сверху, чтобы она была ниже */
    margin-left: -600px; 
}

/* Заголовок секции с иконкой */
.section-header .tag {
    display: flex;
    align-items: center;
    background-color: rgba(60, 123, 255, 0.1); /* Слегка прозрачный фон */
    color: #3C7BFF;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 30px;
    gap: 10px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Центрирование карточек по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    gap: 20px;
    margin-top: 20px;
    min-height: 25vh; /* Чтобы контейнер занимал всю высоту экрана */
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* Центрирование дочерних элементов */
    width: 100%;
}

.card {
    display: flex;
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    width: 300px;
    height: 150px;
    background: rgba(169, 169, 169, 0.1);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
    border: 1px solid rgba(169, 169, 169, 0.3);
}

.card svg {
    width: 60%; /* Уменьшаем размер SVG */
    height: auto;
}

.svg-container img {
    width: 100auto;  /* ширина изображения */
    height: 35px; /* высота изображения */
  }

.card:hover {
    transform: translateY(-10px);
}

/* Анимация появления для секций */
[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-in-out;
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

.custom-text {
      font-family: 'Rubik', sans-serif;
      font-size: 15px; /* можно настроить размер, например, text-xs */
      color: white;
    }

.ofaq {
    display: flex;
    flex-direction: column;
    padding: 1px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.faq-subtitle {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: white;
    opacity: 50%;
    margin-bottom: 50px;
    text-align: left; /* Выравнивание заголовка по центру */
}

.faq-items {
    display: grid;
    grid-template-columns: repeat(2, 3fr); /* 2 колонки с 3fr, одна с 1fr */
    gap: 20px; /* Расстояние между элементами */
    justify-items: center; /* Центрирование элементов в колонках */
    text-align: center; /* Центрирование текста внутри каждого блока */
}

.faq-item {
    margin-bottom: 15px;
    width: 100%;
}

.faq-text {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: white;
    opacity: 80%;
    cursor: pointer;
    transition: color 0.3s ease;
    text-align: left; /* Выравнивание текста внутри faq-text по левому краю */
}

.faq-text:hover {
    color: #007BFF;
}

.faq-description {
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    color: gray;
    margin-top: 10px;
    padding-left: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    justify-items: center; /* Центрирование элементов в колонках */
    text-align: left; /* Выравнивание текста внутри faq-text по левому краю */
}

.faq-item.open .faq-description {
    max-height: 200px;
    opacity: 1;
}

.numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Центрирование карточек по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    gap: 20px;
    margin-left: 1200px;
    min-height: 40vh; /* Чтобы контейнер занимал всю высоту экрана */
}

.flex-containers {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* Центрирование дочерних элементов */
    width: 1500px;
}

.cards {
    display: flex;
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    width: 300px;
    height: 150px;
    background: transparent;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.cards svg {
    width: 60%; /* Уменьшаем размер SVG */
    height: auto;
}

.text-container {
    display: flex;
    flex-direction: column; /* Выставляем элементы по вертикали */
    justify-content: center;
    align-items: center;
    text-align: center;
}

.main-text {
    font-size: 32px;
    font-weight: bold;
    color: #ccc; /* Темный цвет для числа */
}

.sub-text {
    font-size: 13px;
    color: #666; /* Светлый цвет для описания */
    margin-top: 5px; /* Отступ между числом и текстом */
    display: block; /* Разделяет текст на разные строки */
}


.cards:hover {
    transform: translateY(-10px);
    background-color: rgba(255, 255, 255, 0.06); /* Серый фон при наведении */
}

/* Контейнер для модели */
.model-container {
  display: flex;
  justify-content: center; /* Горизонтальное центрирование */
  align-items: center; /* Вертикальное центрирование */
  height: 100%; /* Растягиваем на всю высоту */
}

.model {
    display: flex;
  position: fixed;
  width: 300px;
  height: 300px;
  margin-left: 1200px;
  opacity: 5%;
}