/* Переменные для цветов по умолчанию */
        :root {
            --header-bg-color: black ; /* Цвет фона шапки по умолчанию */
            --text-color: #ffffff; /* Цвет текста по умолчанию */
            --burger-color: #ffffff; /* Цвет иконок бургера по умолчанию (меняется вместе с --text-color) */
            --burger-active-color: #fff; /* Цвет бургера при открытом меню (контрастный) */
            --burger-menu-bg: #333; /* Фон бургер меню (контрастный) */
            --burger-menu-text: #fff; /* Цвет текста в бургер меню (контрастный) */
            --burger-menu-link-hover-bg: rgba(255, 255, 255, 0.15); /* Фон ссылки в меню при наведении */
            
            /* Переменная для высоты шапки, будет установлена JS */
            --header-height: 70px; /* Примерное значение, будет вычислено JS */
        }

        body {
            margin: 0;
            font-family: 'Unbounded', sans-serif;
            overflow: hidden; /* Важно: скрываем общий скролл, так как скролл внутри section-scroll */
        }

        .header {
            width: 100%;
            background-color: white;
            padding: 15px 20px; /* Настройте padding так, чтобы получить нужную высоту */
            box-sizing: border-box;
            position: fixed; /* Фиксированная шапка */
            top: 0;
            left: 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Легкая тень для шапки */
            transition: background-color 0.4s ease, color 0.4s ease; /* Плавный переход для цветов шапки */
            z-index: 1000; /* Убедимся, что шапка всегда поверх контента */
            height: var(--header-height); /* Высота шапки */
            display: flex; /* Для центрирования контента в шапке */
            align-items: center;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .header__content {
            display: flex;
            justify-content: center; /* Центрируем динамичный блок */
            align-items: center;
           /* max-width: 1200px;  Максимальная ширина контента */
            margin: 0 auto;
            position: relative; /* Для позиционирования бургера */
            width: 100%; /* Занимаем всю доступную ширину */
        }
        
        /* Скрываем старый логотипный блок, если он есть, так как лого теперь внутри динамичного текста */
        .header__logo {
            display: none; 
        }

        .header__dynamic-link {
            flex-grow: 1; /* Чтобы контейнер занимал доступное пространство */
            text-align: center;
            font-size: clamp(1em, 2.5vw, 1.3em); /* Адаптивный размер шрифта */
            color: var(--text-color);
            position: relative; /* Важно для позиционирования внутренних span */
            overflow: hidden; /* Скрываем текст, который "уехал" за пределы контейнера */
            height: 1.3em; /* Установите фиксированную высоту, чтобы избежать скачков при смене текста */
            line-height: 1.3em; /* Выравниваем по центру по вертикали */
            padding: 0 10px; /* Небольшие отступы, чтобы текст не прилипал к краям */
            transition: color 0.3s ease; /* Для плавного перехода цвета текста */
            text-decoration: none; /* Убираем подчеркивание у ссылки */
            display: flex; /* Для центрирования SVG внутри */
            justify-content: center;
            align-items: center;
        }

        .dynamic-text-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; /* Занимаем всю высоту родителя */
            display: flex; /* Для центрирования содержимого (текста/SVG) */
            justify-content: center;
            align-items: center;
            transform: translateY(100%); /* Изначально все элементы внизу */
            transition: transform 0.5s ease-in-out, opacity 0.3s ease; /* Плавный переход для transform и opacity */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-sizing: border-box; /* Убедимся, что padding не вызывает проблем */
            opacity: 0; /* Изначально скрываем */
            text-decoration: none; /* Убираем подчеркивание у ссылок внутри */
            color: inherit; /* Наследуем цвет текста от родителя */
        }

        .dynamic-text-item.active-dynamic-item {
            transform: translateY(0); /* Активный элемент на своем месте */
            opacity: 1; /* Делаем видимым */
        }

        .dynamic-text-item.leaving {
            transform: translateY(-100%); /* Элемент, который "уезжает" вверх */
            opacity: 0; /* Скрываем при уходе */
        }

        .dynamic-text-item .logo-svg {
            height: 40px; /* Фиксированная высота для лого, вы можете настроить */
            width: auto; /* Ширина будет масштабироваться пропорционально */
            max-width: 150px; /* Максимальная ширина для предотвращения слишком большого размера */
            fill: var(--text-color); /* Цвет SVG-логотипа */
            transition: fill 0.3s ease; /* Для плавного перехода цвета лого */
        }

        .burger-menu-button {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 25px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1001; /* Выше бургер-меню */
            outline: none; /* Убираем рамку при фокусе */
            position: absolute; /* Позиционируем относительно header__content */
            right: 20px; /* Отступ справа */
            top: 50%; /* Центрируем по вертикали */
            transform: translateY(-50%); /* Точная корректировка */
        }

        /* Стиль для минималистичных иконок бургера */
        .burger-icon {
            width: 100%;
            height: 3px; /* Толщина полосок */
            background-color: var(--burger-color);
            border-radius: 10px; /* Немного скругленные концы */
            transition: all 0.3s ease-in-out; /* Плавный переход */
        }

        /* Анимация иконок бургера при открытии/закрытии (крестик) */
        .burger-menu-button.open .burger-icon:nth-child(1) {
            transform: translateY(11px) rotate(45deg); /* Сдвигаем вниз и поворачиваем */
             /* Цвет открытого бургера */
        }

        .burger-menu-button.open .burger-icon:nth-child(2) {
            opacity: 0; /* Центральная полоска исчезает */
        }

        .burger-menu-button.open .burger-icon:nth-child(3) {
            transform: translateY(-11px) rotate(-45deg); /* Сдвигаем вверх и поворачиваем */
             /* Цвет открытого бургера */
        }

        .burger-menu-nav {
            position: fixed;
            top: 0;
            right: -100%; /* Скрываем меню за пределами экрана */
            width: 100%; /* На весь экран */
            height: 100%;
            background-color: white;
            padding-top: var(--header-height); /* Отступ сверху, чтобы не перекрывать шапку */
            box-sizing: border-box; /* Важно для padding на 100% ширине/высоте */
            /* box-shadow: -4px 0 10px rgba(0,0,0,0.3); */
            transition: right 0.4s ease-in-out;
            z-index: 999; /* Ниже кнопки бургера */
            display: flex; /* Используем flexbox для центрирования содержимого */
            align-items: center; /* Центрируем по вертикали */
            justify-content: center; /* Центрируем по горизонтали */
            text-align: center;
            border-radius: 0;
        }
        
        .nav-t {

            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 1%;
        }



        .burger-menu-nav.open {
            right: 0; /* Открываем меню */
            
        }

        .burger-menu-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%; /* Занимает всю доступную ширину контейнера */
                overflow-y: scroll;
    height: 100%;
    /* background-color: white; */
    width: 100%;
    border-radius: 0;
        }

        .burger-menu-nav ul li {
           /*  margin: 25px 0; Отступы между пунктами */
            border-bottom: solid 1px #000000;
            font-size: 1rem;
             border-radius: 0;
        }

        .burger-menu-nav ul li a {
            text-decoration: none;
            color: black;
            font-size: 1.8em; /* Крупнее для мобильных */
            display: block;
            padding: 12px 0;
              border-radius: 0;
           
        }

        .burger-menu-nav ul li a:hover,
        .burger-menu-nav ul li a:focus { /* Добавил focus для доступности */
            background-color: var(--burger-menu-link-hover-bg);
            border-radius: 5px;
        }

        
        /* Медиа-запросы для больших экранов: меню не на весь экран */
        @media (min-width: 768px) {
            .burger-menu-nav {
                width: max-content;  /* Фиксированная ширина на десктопах */
                height: max-content;
                max-height: 80%;
                align-items: flex-start; /* Выравнивание по верху для десктопа */
                justify-content: flex-start; /* Выравнивание по левому краю для десктопа */
border-radius: 30px;
    padding: 2vh 0;
    border: 1px black solid;
        top: calc(var(--header-height) + 20px);
        
            }

        
   .burger-menu-nav.open {
            right: 30px; /* Открываем меню */
            
        }

            .burger-menu-nav ul {
                width: auto; /* Ширина списка по содержимому */
                padding: 0 20px; /* Отступы по бокам */
                border-radius: 0;
                overflow: auto;
                color: black;
            }

            .burger-menu-nav ul li a {
                font-size: calc(0.7vh + 0.7vw); /* Меньше для десктопа */
                  border-radius: 0;
                  color: #000000;
            }
        }

        /* Медиа-запросы для очень маленьких экранов */
        @media (max-width: 480px) {
            .header {
                padding: 10px 15px;
            }

            .header__dynamic-link {
                font-size: clamp(0.9em, 2.8vw, 1.1em);
            }
            
            .dynamic-text-item .logo-svg {
                height: 35px;
            }

            /* Burger button position on small screens */
            .burger-menu-button {
                right: 15px; /* Уменьшаем отступ справа */
            }
        }

        .section-scroll {
scroll-snap-type: y mandatory;  
height: 100%;
overflow: auto;
padding-top: var(--header-height);
}

.ssp {
scroll-snap-align: end;
scroll-snap-stop: always;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
height: 100%;

}