.head-box {
    position: sticky; /* прилимание к верху старницы*/
    top: 0; /*отступ от верха*/
    width: 90%; /* Устанавливаем ширину в процентах от ширины экрана */
    height: 100px;
    background-color: rgba(255, 255, 255, 0.5); /* Белый цвет с прозрачностью */
    border-radius: 15px; /* Закругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Добавляем тень */
    display: flex;
    flex-direction: column; /* Размещаем элементы в столбик */
    justify-content: center; /*новое*/
    align-items: center; /*  flex-start Выравнивание текста по левому краю */
    padding: 5px; /* Внутренний отступ */
    margin: 0 auto;
    opacity: 0.9; /* Прозрачность */
    min-height: 50px; /* Минимальная высота */
    border: 1px solid rgba(0, 0, 0, 0.2); /* Небольшая рамка */
    margin-bottom: 20px; /* Задаёт внешний отступ снизу в 20px */



}

/* Контейнер для одного блокоа в хедере */
.flex-container-head {
    display: flex;
    flex-wrap: wrap; /* Позволяет блокам переходить на новую строку при нехватке места */
    gap: 20px; /* Отступы между блоками */
    justify-content: center; /* Центрирование блоков */
    background-color: rgba(255, 255, 255, 0.5); /* Белый цвет с прозрачностью */
}

/* Контейнер всей старницы */
.page {
    background: radial-gradient(circle, rgba(244,227,243,1) 0%, rgba(255,255,255,1) 100%);
}



/* Общие стили */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    /*background-color: #f9f9f9; */
    background-color: rgba(255, 255, 255, 0.5); /* Белый цвет с прозрачностью */
    box-sizing: border-box; /* вмещаем надписть*/
}

/* Центровка контейнеров */
.centered-container {
    margin: 20px auto;
    width: 90%;
    max-width: 800px;
    /*background: #fff;*/
    background-color: rgba(255, 255, 255, 0.5); /* Белый цвет с прозрачностью */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Стили для видео */
iframe {
    width: 100%;
    height: 600;
    border-radius: 10px;
    max-width: 720px;
}

/* Стили для фото */
.photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.photos figure {
    margin: 0;
    text-align: center;
}

.photos img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Подписи к фото */
.photos figcaption {
    margin-top: 5px;
    font-size: 0.9em;
    color: #666;
}

/* Ссылки */
a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul { list-style-position: inside; }
li { padding-left: 20px; // это свойство контролирует расстояние между маркером и текстом }

.head-box .form {
    justify-content: start;
    align-items: start;
    display: flex;
    width: 100%;
    padding-top: 20px;
}

/* Оформление header */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 10px;
    margin: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}


/* Заголовок H1 */
header h1 {
    font-size: 1.5em; /* Размер текста подстраивается */
    text-align: center; /* Центровка текста */
    margin: 10px 0;
    word-wrap: break-word; /* Перенос длинных слов */
    line-height: 1.4;
}

/* Контейнер формы */
.header .form {
    margin-bottom: 10px;
}

/* Адаптивный дизайн для мобильных устройств */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.2em; /* Уменьшаем размер текста для мобильных устройств */
    }

    .form select,
    .form button {
        font-size: 0.9em;
    }
}