body {
    margin: 0;
     font-family: 'Arial', sans-serif; /* Основной шрифт */
    color: #ededed; /* Цвет текста */
    background-color: #f4f4f4; 
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.menu {
    position: fixed;
    z-index: 9998; 
    background-image: url(img/fon.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;  /* Задаем высоту в 100% от высоты окна браузера */
    text-align: center; /* Центрирование текста */
    padding: 20px 0; /* Отступы вверху и внизу */
}

.container {
    margin: 0 auto;
    width: 1200px;
    max-width: 1200px;
    height: 100%;  /* Это можно оставить, но не обязательно */
}

.logo {
    max-width: 60%;      /* Автоматическая подгонка по ширине */
    height: 35%;         /* Сохранение пропорций */
 margin-top: 20px;     /* Отступ сверху */
    margin-left: auto;    /* Автоматический отступ слева */
    margin-right: auto;   /* Автоматический отступ справа */
    display: block;       /* Чтобы отступы работали корректно, делаем элемент блочным */
}


h1 {
    font-size: 2.5em; /* Размер шрифта для заголовка h1 */
    margin: 20px 0; /* Отступы сверху и снизу */
    color: #f2f2f2; /* Цвет заголовка */
}

h2 {
    font-size: 2em; /* Размер шрифта для заголовка h2 */
    margin: 15px 0; /* Отступы сверху и снизу */
    color: #f2f2f2; /* Цвет подзаголовка */
}

h4 {
    font-size: 1.2em; /* Размер шрифта для заголовка h4 */
    margin: 10px 0; /* Отступы сверху и снизу */
    color: #ffffff; /* Цвет текста */
    line-height: 1.5; /* Высота строки */
     margin-bottom: 50px;
}

.rounded-button {
    background-color: #ffc848e1; /* Цвет фона кнопки */
    color: rgb(29, 29, 29); /* Цвет текста */
    padding: 20px 70px; /* Отступы сверху/снизу и слева/справа */
    border: none; /* Убираем границу */
    border-radius: 30px; /* Закругление углов кнопки */
    font-size: 26px; /* Размер шрифта */
    cursor: pointer; /* Изменяет указатель при наведении */
    transition: background-color 0.3s; /* Плавный переход цвета при наведении */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
}

.rounded-button:hover {
    background-color: #d8d8d8e1; /* Цвет фона при наведении */
    
}

/* Мобильные стили */
@media (max-width: 768px) {
    .container {
        width: auto; /* Автоматическая ширина для мобильных */
        padding: 10px; /* Добавляем отступы для мобильной версии */
    }

    .logo {
        max-width: 80%; /* Логотип на всю ширину */
        height: 15%; 
        margin-top: 25px;
        margin-bottom: 30px;
    }

    h1 {
        font-size: 1.7em;
        margin-bottom: 10px;/* Уменьшаем размер заголовка h1 */
    }

    h2 {
        font-size: 1.4em; /* Уменьшаем размер заголовка h2 */
    }

    h4 {
        font-size: 1.1em; /* Уменьшаем размер заголовка h4 */
        margin-top: 30px;
        margin-bottom: 60px; /* Уменьшаем отступ снизу */
    }

    .rounded-button {
        padding: 30px 90px; /* Уменьшаем отступы кнопки */
        font-size: 25px; /* Уменьшаем размер шрифта кнопки */
    }
}