/* Для сброса отступов по умолчанию */
        body {
            margin: 0;
        }

        /* --- Стили для нового хедера --- */
        .header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            padding: 1rem 2rem;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #ffffff;
            font-family: Montserrat, Arial, Helvetica, sans-serif;
            background-color:#ffffff;
        }

        .logo {
            font-weight: bold;
            font-size: 1.5rem;
            text-decoration: none;
            color: #ffffff;
        }

        /* Добавляем стили для изображения внутри логотипа */
        .logo img {
            max-width: 150px; /* Ограничиваем максимальную ширину */
            height: auto;     /* Позволяем высоте изменяться пропорционально */
            display: block;   /* Убирает лишние отступы под изображением */
        }

        .nav-menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        .nav-menu a {
            color: #233eb5;
            text-decoration: none;
            font-size: 1rem;
            transition: color 0.3s ease;
        }

        .nav-menu a:hover {
            color: #2fd0e9;
        }

        /* Стили для бургер-меню (скрыто на десктопе) */
        #menu-toggle,
        .menu-btn {
            display: none;
        }

        /* --- Конец стилей для хедера --- */

        /* Сдвигаем контент hero, чтобы он не заезжал под хедер */
        .hero {
            padding-top: 80px;
            /* Примерная высота хедера */
        }

        /* Убираем отступ у h1, так как есть padding у .hero */
        .hero-content h1 {
            margin-top: 0;
        }

        /* Старые стили */
  


        .hero {
            /* Устанавливаем высоту на весь экран */
            min-height: 100vh;
            /* Более надежный способ для полноэкранных секций */
            box-sizing: border-box; /* Включаем padding в общую высоту */

            /* Настройки фонового изображения */
            background-image: url('../i/hero/bg.jpg');
            background-color: rgb(255, 255, 255);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            /* Необходимо для позиционирования псевдоэлемента */
            isolation: isolate;
            /* Создает новый контекст наложения, чтобы z-index работал как надо */

            /* Используем Flexbox для центрирования контента */
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* Горизонтальное центрирование */
            align-items: center;
            /* Вертикальное центрирование */
            /* text-align: center; */
            /* Центрирование текста внутри .hero-content */
        }

        /* Слой-наложение для улучшения читаемости текста */
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            /* top: 0; right: 0; bottom: 0; left: 0; */
            background-color: rgba(0, 0, 0, 0.5);
            /* Черный цвет с 50% прозрачностью */
            z-index: -1;
            /* Помещаем наложение за контентом */
        }


        .hero-content {
            /* border: 1px solid lightskyblue; */
            max-width: 600px;
            color: #ffffff;
            font-family: Montserrat, Arial, Helvetica, sans-serif;
        }

        .hero-content h1 {
            /* Адаптивный размер шрифта */
            font-size: clamp(1rem, 10vw, 4rem - 4px);
            margin-bottom: 0.5em;
            /* Улучшает перенос строк в заголовках */
            text-wrap: balance;
            margin-top: 1rem;


        }

        .hero-content h1 span {
            font-weight: lighter;
        }


        .hero-content section {
            font-size: clamp(1rem, 1vw, 1.25rem);
            line-height: 1.6;
        }

        .hero-label {
            font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
            color: #ffffff;
            text-transform: uppercase;
        }

        .hero-label span {
            color: #2fd0e9;
        }

        /* Адаптация для мобильных устройств */
        @media (max-width: 768px) {
            .hero-content {
                padding: 0 20px;
            }

            .hero-content h1 {
                margin-bottom: 0.3em;
            }

            /* --- Адаптация для навигации --- */
            .header {
                padding: 1rem;
            }

            .nav-menu {
                display: block;
                position: absolute;
                top: 100%;
                /* Располагаем меню под хедером */
                left: 0;
                background-color: rgba(0, 0, 0, 0.8);
                width: 100%;
                /* Скрываем меню по умолчанию */
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
            }

            .nav-menu ul {
                flex-direction: column;
                gap: 0;
                padding: 0.5rem 0;
            }

            .nav-menu li {
                text-align: center;
            }

            .nav-menu a {
                display: block;
                padding: 1rem;
            }

            /* Показываем бургер-кнопку */
            .menu-btn {
                display: flex;
                /* Используем flex для центрирования полосок */
                align-items: center;
                position: relative;
                width: 26px;
                height: 26px;
                cursor: pointer;
                z-index: 1;
            }

            .menu-btn>span,
            .menu-btn>span::before,
            .menu-btn>span::after {
                display: block;
                position: absolute;
                width: 100%;
                height: 2px;
                background-color: #ffffff;
                transition-duration: .25s;
            }

            .menu-btn>span::before {
                content: '';
                top: -8px;
            }

            .menu-btn>span::after {
                content: '';
                top: 8px;
            }

            /* При нажатии на бургер (чекбокс) показываем меню */
            #menu-toggle:checked~.nav-menu {
                max-height: 300px;
                /* Высота, достаточная для отображения всех пунктов */
                transition: max-height 0.8s ease-in-out;
            }

            /* Анимация бургера в крестик */
            #menu-toggle:checked~.menu-btn>span {
                transform: rotate(45deg);
            }

            #menu-toggle:checked~.menu-btn>span::before {
                top: 0;
                transform: rotate(0);
            }

            #menu-toggle:checked~.menu-btn>span::after {
                top: 0;
                transform: rotate(90deg);
            }
        }