/* Основные стили для всего документа */
body {
    font-family: Arial, sans-serif; /* Шрифт для всего текста */
    background-color: #F7F7F7; /* Очень светлый серый фон */
    color: #424242; /* Темно-серый цвет текста */
    line-height: 1.6; /* Межстрочный интервал для удобочитаемости */
    margin: 0; /* Убираем отступы вокруг страницы */
    padding: 0; /* Убираем внутренние отступы */
    overflow-x: hidden; /* Убираем горизонтальную прокрутку */
}

/* Стили для шапки сайта */
header {
    background: #8E1B2A; /* Темно-красный цвет фона шапки */
    color: #FFFFFF; /* Белый цвет текста в шапке */
    display: flex; /* Используем Flexbox для выравнивания элементов */
    align-items: center; /* Вертикальное выравнивание элементов */
    justify-content: space-between; /* Распределение элементов по краям */
    padding: 10px 2%; /* Отступы вокруг шапки с использованием процентов */
    width: 100%; /* Занять всю ширину родителя */
    position: fixed; /* Фиксированное позиционирование */
    top: 0; /* Привязка к верхней части страницы */
    left: 0; /* Начало с левого края */
    z-index: 1000; /* Устанавливаем высокий z-index, чтобы шапка не перекрывалась */
}

/* Стили для содержимого шапки */
.header-content {
    display: flex; /* Размещаем логотип и меню в строку */
    align-items: center; /* Вертикальное выравнивание */
    flex-grow: 1; /* Позволяет занимать всё доступное пространство */
}

.menu ul {
    list-style: none; /* Убираем маркеры списка */
    padding: 0; /* Убираем внутренние отступы */
    display: flex; /* Размещаем пункты меню в строку */
    margin: 0; /* Убираем внешние отступы */
    width: 100%; /* Занять всю ширину родителя */
}

.menu li {
    margin-left: 20px; /* Отступы между пунктами меню */
}

/* Стили для логотипа */
.logo {
    height: 50px; /* Высота логотипа */
    margin-right: 20px; /* Отступ справа от логотипа */
}

/* Стили для заголовков */
h1, h2, h3 {
    color: #424242; /* Цвет заголовков */
    transition: color 0.3s ease, transform 0.3s ease; /* Плавный переход для цвета и размера */
}

/* Эффект при наведении на заголовки */
h1:hover, h2:hover, h3:hover {
    color: #F48FB1; /* Светло-розовый при наведении */
}

/* Размеры заголовков */
h1 {
    font-size: 2.5em; /* Размер первого заголовка */
}

h2 {
    font-size: 2em; /* Размер второго заголовка */
}

h3 {
    font-size: 1.5em; /* Размер третьего заголовка */
}

/* Стили для ссылок */
a {
    color: #FFD54F; /* Яркий желтый цвет для ссылок */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
}

/* Эффект при наведении на ссылки */
a:hover {
    color: #F48FB1; /* Светло-розовый при наведении */
    text-decoration: underline; /* Подчеркивание при наведении */
}

/* Стили для ссылки в фокусе */
a:focus {
    outline: 2px solid #F48FB1; /* Контур вокруг ссылки при фокусе */
    outline-offset: 2px; /* Отступ для контура */
}

/* Стили для меню */
nav {
    flex-grow: 1; /* Позволяет меню занимать оставшееся пространство */
    margin: 0; /* Убираем отступы */
}

/* Стили для списка пунктов меню */
nav ul {
    list-style: none; /* Убираем маркеры списка */
    padding: 0; /* Убираем внутренние отступы */
    display: flex; /* Размещаем пункты меню в строку */
    margin: 0; /* Убираем внешние отступы */
    flex-wrap: wrap; /* Позволяет пунктам меню переходить на новую строку */
}

/* Стили для элементов списка в меню */
nav li {
    margin-left: 20px; /* Отступы между пунктами меню */
}

/* Стили для пунктов меню */
nav ul li {
    margin-left: 20px; /* Отступы между пунктами меню */
}

/* Стили для ссылок в меню */
nav ul li a {
    color: #FFD54F; /* Яркий желтый для ссылок в меню */
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s ease, transform 0.3s ease; /* Плавный переход цвета и трансформации */
    opacity: 0; /* Начальное состояние (невидимый) */
    animation: fadeIn 0.5s forwards; /* Анимация появления */
    white-space: nowrap; /* Убираем перенос строк для ссылок */
}

/* Анимация появления для ссылок в меню */
@keyframes fadeIn {
    to {
        opacity: 1; /* Конечное состояние (видимый) */
    }
}

/* Эффект при наведении на ссылки в меню */
nav ul li a:hover {
    color: #F48FB1; /* Светло-розовый при наведении */
    transform: scale(1.1); /* Увеличение ссылки при наведении */
}

/* Стили для ссылки в фокусе в меню */
nav ul li a:focus {
    outline: 2px solid #F48FB1; /* Светло-розовый контур при фокусе */
    outline-offset: 2px; /* Отступ для контура */
}

/* Стили для языковых ссылок */
.language-link {
    color: #FFFFFF; /* Белый для выделенных ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s ease; /* Плавный переход цвета */
}

/* Эффект при наведении на языковые ссылки */
.language-link:hover {
    color: #F48FB1; /* Светло-розовый при наведении */
}

/* Основные стили для основной области */
main {
    padding: 20px; /* Внутренние отступы */
    margin-top: 70px; /* Отступ сверху, чтобы контент не накладывался на шапку */
    transition: background-color 0.3s ease; /* Плавный переход цвета фона */
}

/* Эффект при наведении на основную область */
main:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Легкое затемнение при наведении */
}

/* Стили для кнопок */
button {
    background-color: #FFD54F; /* Яркий желтый для кнопки */
    color: #FFFFFF; /* Цвет текста кнопки */
    border: none; /* Убираем стандартный бордер */
    padding: 10px 20px; /* Внутренние отступы кнопки */
    border-radius: 5px; /* Закругленные углы кнопки */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Плавный переход */
}

/* Эффект при наведении на кнопки */
button:hover {
    background-color: #F48FB1; /* Светло-розовый при наведении */
    transform: scale(1.05); /* Увеличение кнопки при наведении */
}

/* Стили для формы обратной связи */
.contact-form {
    background-color: #FFFFFF; /* Белый фон формы */
    border: 1px solid #BDC3C7; /* Светло-серый бордер */
    border-radius: 8px; /* Закругленные углы формы */
    padding: 20px; /* Внутренние отступы формы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для эффекта поднятости */
    max-width: 400px; /* Максимальная ширина формы */
    margin: 20px auto; /* Центрирование формы */
}

/* Стили для меток в форме */
.contact-form label {
    display: block; /* Блочный элемент для меток */
    margin-bottom: 8px; /* Отступ снизу для меток */
    font-weight: bold; /* Жирный шрифт для меток */
}

/* Стили для полей ввода и текстовых областей в форме */
.contact-form input,
.contact-form textarea {
    width: 100%; /* Ширина 100% от родителя */
    max-width: 350px; /* Установите максимальную ширину для полей ввода */
    padding: 10px; /* Внутренние отступы */
    margin-bottom: 15px; /* Отступ снизу */
    border: 1px solid #BDC3C7; /* Светло-серый бордер */
    border-radius: 4px; /* Закругленные углы */
    font-size: 16px; /* Размер шрифта */
    transition: border-color 0.3s ease; /* Плавный переход цвета бордера */
}

/* Эффект при фокусе на полях ввода и текстовых областях */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #FFD54F; /* Яркий желтый при фокусе */
    outline: none; /* Убираем стандартный контур */
}

/* Стили для кнопки отправки формы */
.contact-form button {
    background-color: #FFD54F; /* Яркий желтый для кнопки */
    color: #FFFFFF; /* Белый цвет текста */
    border: none; /* Убираем стандартный бордер */
    padding: 10px 15px; /* Внутренние отступы */
    border-radius: 5px; /* Закругленные углы */
    cursor: pointer; /* Курсор в виде руки */
    transition: background-color 0.3s ease; /* Плавный переход цвета фона */
}

/* Эффект при наведении на кнопку отправки формы */
.contact-form button:hover {
    background-color: #F48FB1; /* Светло-розовый при наведении */
}

.price-list {
    width: 100%;
    border-collapse: collapse; /* Убираем двойные границы между ячейками */
    margin: 20px 0; /* Отступы вокруг таблицы */
}

.price-list th,
.price-list td {
    padding: 10px; /* Внутренние отступы ячеек */
    text-align: left; /* Выравнивание текста в ячейках */
    border: 1px solid #BDC3C7; /* Светло-серый бордер */
}

.price-list th {
    background-color: #8E1B2A; /* Темный фон для заголовков */
    color: #FFFFFF; /* Белый цвет текста заголовков */
}

.price-list tr:nth-child(even) {
    background-color: #F7F7F7; /* Светлый фон для четных строк */
}

.price-list tr:hover {
    background-color: #E1BEE7; /* Светлое затемнение при наведении */
}

/* Стили для нижнего колонтитула */
footer {
    text-align: center; /* Центрирование текста */
    padding: 10px 0; /* Отступы сверху и снизу */
    background: #8E1B2A; /* Темный цвет фона для нижнего колонтитула */
    color: #FFFFFF; /* Белый цвет текста */
}

/* Медиа-запрос для экранов шириной до 768px (планшеты и мобильные устройства) */
@media (max-width: 768px) {
    
/* Настройки для контактной формы */
.contact-form {
    max-width: 90%; /* Устанавливаем ширину формы 90% от родителя */
    padding: 15px; /* Уменьшаем внутренние отступы формы */
}

/* Размеры заголовков */
h1 {
    font-size: 2em; /* Уменьшаем размер заголовка 1 */
}

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

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

/* Настройки для пунктов навигации */
nav ul li {
    margin: 0 10px; /* Устанавливаем одинаковые отступы слева и справа */
}

nav ul li a {
    font-size: 12px; /* Уменьшаем размер шрифта для ссылок */
}

/* Настройки для кнопок */
button {
    width: 100%; /* Кнопка занимает всю ширину контейнера */
    padding: 10px; /* Уменьшаем внутренние отступы кнопки */
}

/* Скрытие логотипа на мобильных устройствах */
.logo, .language-link {
    display: none; /* Скрываем логотип и языковые ссылки */
}

/* Настройки для главного меню */
.main-menu {
    display: flex; /* Используем Flexbox для выравнивания элементов */
    flex-wrap: nowrap; /* Запрещаем перенос элементов на новую строку */
    justify-content: center; /* Центрируем элементы по горизонтали */
    padding: 0; /* Убираем отступы вокруг меню */
    list-style: none; /* Убираем маркеры списка */
}

.main-menu li {
    margin: 0 3px; /* Устанавливаем отступы между элементами меню */
}

.main-menu a {
    text-decoration: none; /* Убираем подчеркивание текста ссылок */
    color: #FFD54F; /* Устанавливаем цвет текста ссылок */
    font-size: 10px; /* Устанавливаем размер шрифта для ссылок в меню */
}
}

/* Медиа-запрос для экранов шириной до 480px (мобильные устройства) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5em; /* Дальнейшее уменьшение размера заголовка 1 */
    }

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

    h3 {
        font-size: 1.2em; /* Дальнейшее уменьшение размера заголовка 3 */
    }

    .contact-form input,
    .contact-form textarea {
        max-width: 100%; /* Поля ввода занимают всю ширину */
    }

    nav ul li {
        display: block; /* Перевод пунктов навигации на новый уровень */
        margin-bottom: 10px; /* Отступ снизу между пунктами */
    }
}