:root {
    --main-color: #28a745; /* основной зелёный */
    --main-background: #e6f9e6; /* светло-зеленый фон */
    --main-hover: #218838; /* при наведении */
    --main-text : #155724; /* цвет текста на баннере */
}
html {
    margin: 0;  /* убираем отступы по умолчанию */
    scroll-behavior: smooth; /* плавная прокрутка при переходе по якорям */
}
html, body {
    height: 100%; /* гарантируем, что html и body занимают всю высоту окна */
}
main {
    flex: 1; /* позволяет основному контенту занимать всё доступное пространство */
    padding: 40px 0; /* отступы для основного контента */
}
@media (max-width: 768px) {
    .hero {
        min-height: 50vh; /* уменьшаем высоту баннера на мобильных устройствах */
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    .navbar {
        padding: 4px 10px;
        font-size: 12px; 
        max-height: fit-content;
    }

    .footer {
        display: none;
    }
    .page-title h1 {
        font-size: 18px;
        margin: 0; 
    }
    .page-title h3 {
        font-size: 16px;
        margin: 0; 
    }
    .hero {
       min-height: 90dvh; /* уменьшаем высоту баннера на устройствах с низкой высотой экрана в ландшафтной ориентации */
    }
}
img {
    max-width: 100%; /* адаптивные изображения */
    height: auto;
}
.navbar {
    position: sticky;
    top: 0; /* прикрепляем к верхней части окна */
    background-color: var(--main-color);
    z-index: 1000; /* гарантируем, что навбар будет поверх других элементов */
}

.navbar .nav-link:hover { /* при наведении на ссылку в навбаре */
    color: var(--main-hover); 
}

button, .btn {
    background-color: var(--main-color);
    color: white;
}

button:hover, .btn:hover {
    background-color: var(--main-hover);
}
body {
    font-family: 'Oswald', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--main-background); /* светло-зеленый фон */
    display: flex;
    flex-direction: column;
    min-height: 100dvh; /* гарантирует, что body будет занимать всю высоту окна */
}
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--main-text);
}
p {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
}
.hero {
    position: relative; /* для позиционирования текста поверх изображения */
    min-height: 80dvh; /* гарантируем, что баннер будет занимать 100% высоты окна минус высота навбара */
    display: flex;                   /* высота баннера */
    flex-direction: column;             /* расположение текста в столбец */
    background-repeat: no-repeat;      /* не повторяем */
    align-items: center;               /* вертикальное выравнивание текста */
    justify-content: center;           /* горизонтальное выравнивание текста */
    color: var(--main-text);                      /* цвет текста на фоне */
    text-align: center;
}
.hero-text {
    position: relative; /* для позиционирования текста поверх изображения */
    z-index: 1; /* помещаем текст поверх изображения */
    padding: 20px; /* отступы для текста внутри баннера */
}
.page-title {
    margin-top: 10px; /* отступ сверху для заголовка */
    text-align: center; /* центрируем текст заголовка */
    margin-bottom: 10px; /* отступ снизу для заголовка */
    position: relative; /* фиксируем заголовок при прокрутке */
    z-index: 5; /* помещаем заголовок поверх полупрозрачного слоя и изображения */
}
.page-title h1 {
    font-size: clamp(20px, 5vw, 42px);
}

.page-title h3 {
    font-size: clamp(16px, 2.5vw, 24px);
}

.page-title p {
    font-size: clamp(14px, 1.8vw, 18px);
}
.page-title a {
    color: var(--main-text); /* цвет текста заголовка */
    text-decoration: none; /* убираем подчеркивание у ссылки */
}
.hero-content {
    padding: 0 20px;
    box-sizing: border-box;
    max-height: none; /* убираем ограничение по высоте для контента баннера */
    overflow: visible; 
    position: relative; /* для позиционирования текста поверх изображения */
    z-index: 1; /* помещаем текст поверх изображения */
}
.hero-content ul {
    list-style-type: none; /* убираем стандартные маркеры у списка */
    padding: 0; /* убираем отступ слева для списка */
    margin-top: 10px; /* отступ сверху для списка */
}
.hero-content li {
    margin-bottom: 10px; /* отступ между пунктами списка */
}
.hero-index::before {
    background-image: url('/static/images/banners/team.jpg'); /* фоновое изображение для главной страницы */
}
.hero-team::before {
    background-image: url('/static/images/banners/team.jpg'); /* фоновое изображение для страницы команды */
}
.hero-achievements::before {
    background-image: url('/static/images/banners/achievements.jpg'); /* фоновое изображение для страницы достижений */
}
.hero-news::before {
    background-image: url('/static/images/banners/news.jpg'); /* фоновое изображение для страницы новостей */
}
.hero-contact::before {
    background-image: url('/static/images/banners/contacts.jpg');
} /* фоновое изображение для страницы контактов */
.hero-member::before {
    background-image: url('/static/images/banners/member.jpg'); /* фоновое изображение для страницы участника */
}
.hero::before {
    content: "";
    will-change: transform; /* оптимизация для улучшения производительности при анимации */
    transform: translateZ(0); /* создаем новый слой для улучшения производительности */
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* полупрозрачный белый слой для улучшения читаемости текста */
    background-size: cover;            /* изображение покрывает весь блок */
    background-position: center;       /* центрируем изображение */
    filter: blur(5px); /* размываем изображение для лучшей читаемости текста */
    opacity: 0.3; /* делаем изображение полупрозрачным */
    z-index: 0; /* помещаем слой позади текста */
}
.hero-text h1 {
    position: relative;
    z-index: 1; /* помещаем текст поверх изображения */
    margin: 0;
}
.hero-text h3 {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    margin: 0;
}
.hero-text p {
    position: relative;
    z-index: 1;
    font-size: 1.2rem;
}
.member-photo {
    width: 25vh; /* фиксированная ширина для фотографий участников */
    height: 25vh; /* фиксированная высота для фотографий участников */
    object-fit: cover; /* обрезаем изображение по размеру контейнера */
    border-radius: 50%; /* делаем фотографии круглыми */
    margin-bottom: 15px; /* отступ снизу для отделения от текста */
}
.member-photo:hover {
    transform: scale(1.05); /* немного увеличиваем фотографию при наведении */
    transition: transform 0.3s ease; /* плавное увеличение */
}
.team-members {
    display: flex;
    flex-wrap: wrap; /* позволяет карточкам переноситься на следующую строку */
    gap: 20px; /* отступы между карточками */
    justify-content: center; /* центрируем карточки по горизонтали */
}
.member-card {
    background-color: var(--main-background); /* светло-зеленый фон для карточек участников */
    border-radius: 10px; /* скругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* легкая тень для объема */
    padding: 20px; /* отступы внутри карточки */
    text-align: center; /* выравнивание текста по центру */
    transition: transform 0.3s ease; /* плавное увеличение при наведении */
}
.member-card a {
    color: var(--main-color); /* цвет ссылок в карточках участников */
    text-decoration: none; /* убираем подчеркивание у ссылок */
}
.member-card a:hover {
    text-decoration: underline; /* подчеркивание при наведении на ссылки */
    color: var(--main-hover);
}
.no-photo-round {
    width: 25vh; /* фиксированная ширина для блока без фотографии */
    height: 25vh; /* фиксированная высота для блока без фотографии */
    display: flex; /* используем flexbox для центрирования текста */
    align-items: center; /* вертикальное центрирование текста */
    justify-content: center; /* горизонтальное центрирование текста */
    background-color: var(--main-background); /* светло-зеленый фон для блока без фотографии */
    color: var(--main-text); /* цвет текста на фоне */
    font-size: 1.2rem; /* размер шрифта для текста в блоке без фотографии */
    border-radius: 50%; /* делаем блок без фотографии круглым */
    border: 2px dashed var(--main-hover); /* пунктирная рамка для блока без фотографии */
    margin-bottom: 15px; /* отступ снизу для отделения от текста */
}
.member-layout {
    display: flex; /* используем flexbox для расположения фотографии и текста */
    gap: 40px; /* отступ между фотографией и текстом */
    flex-direction: row; /* расположение в строку */
    align-items: flex-start; /* выравнивание по верхнему краю */
}
.member-gallery {
    padding-left: 20px; /* отступы для галереи */
    flex: 1; /* галерея занимает оставшееся пространство */
    max-width: 500px; /* ограничиваем максимальную ширину галереи */
}
.member-info {
    display: flex;
    flex-direction: column;
    padding-right: 20px; /* отступы для информации о участнике */
    flex: 1; /* информация занимает оставшееся пространство */
}
.main-photo-container {
    position: relative; /* для позиционирования текста поверх фотографии */
}
.main-photo {
    width: 100%; /* фотография занимает всю ширину контейнера */
    height: auto; /* сохраняем пропорции фотографии */
    border-radius: 10px; /* скругляем углы фотографии */
    cursor: zoom-in
}
.news {
    display: flex; /* используем flexbox для расположения новости */
    flex-direction: column; /* расположение в столбец */
    gap: 20px; /* отступы между новостями */
    margin-bottom: 30px; /* отступ снизу для отделения от следующей новости */
    background-color: var(--main-background); /* светло-зеленый фон для новости */
    padding: 60px 0; /* отступы внутри новости */
    border-radius: 10px; /* скругляем углы новости */
}
.news-container {
    max-width: 1100px; /* ограничиваем максимальную ширину контейнера новости */
    margin: 0 auto; /* центрируем контейнер новости */
    display: grid; /* используем grid для расположения фотографии и текста новости */
    padding: 0 20px;
    box-sizing: border-box;
    gap: 20px; /* отступ между фотографией и текстом новости */
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px)); /* определяем колонки: фотография и текст */
    align-items: flex-start; /* выравнивание по верхнему краю */
    justify-content: center;
}
.news-card {
    display: flex; /* используем flexbox для расположения фотографии и текста внутри карточки новости */
    background-color: var(--main-background); /* светло-зеленый фон для карточки новости */
    border-radius: 10px; /* скругляем углы карточки новости */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* плавное увеличение и изменение тени при наведении на карточку новости */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* легкая тень для объема карточки новости */
    padding: 0; /* отступы внутри карточки новости */
}
.news-card:hover {
    transform: translateY(-5px); /* немного поднимаем карточку новости при наведении */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* усиливаем тень при наведении на карточку новости */
}
.news-image {
    flex: 0 0 33%; /* фотография новости занимает 33% ширины карточки новости */
}
.news-image img {
    display: block; /* убираем отступы вокруг изображения */
    width: 100%; /* фотография новости занимает всю ширину контейнера */
    height: auto; /* сохраняем пропорции фотографии новости */
    object-fit: cover; /* обрезаем изображение по размеру контейнера */
    border-radius: 10px; /* скругляем углы фотографии новости */
}
.news-content {
    flex: 1; /* текст новости занимает 67% ширины карточки новости */
    min-width: 0;
    overflow-wrap: break-word;
    padding: 20px; /* отступы для текста новости */
    display: flex; /* используем flexbox для расположения текста новости */
    flex-direction: column; /* расположение текста в столбец */
    justify-content: space-between; /* распределяем текст по вертикали */
}
.news-content h3 {
    margin-top: 0; /* убираем отступ сверху для заголовка новости */
    font-size: 20px; /* размер шрифта для заголовка новости */
}
@media (max-width: 768px) {
    .news-card {
        flex-direction: column;
    }
    .news-image {
        flex: none;
        width: 100%;
        margin-bottom: 15px;    
    }
    .news-content {
        padding: 0;
    }
}
.news-detail .carousel {
    max-width: 900px;
    margin: 30px auto;
}
.news-detail .carousel-item img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
}
.news-detail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}
.news-detail p {
    margin-top: 25px;
    line-height: 1.6;
}
.carousel-indicators button {
    background-color: var(--main-background);
    opacity: 0.3;
}
.carousel-indicators .active {
    opacity: 1;
}
.main-cover {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    display: block;
    border-radius: 8px;
}
#newsdetailCarousel .carousel-item {
    aspect-ratio: 16 / 9;
}

#newsdetailCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--main-background);
}
.date {
    font-size: 14px; /* размер шрифта для даты новости */
    color: var(--main-hover); /* цвет текста для даты новости */
    margin-bottom: 15px; /* отступ между датой и текстом новости */
}
.news-title {
    font-size: 1.5rem; /* размер шрифта для заголовка новости */
    margin: 0 0 10px; /* отступ между заголовком и текстом новости */
}
.news-item {
    display: flex; /* используем flexbox для расположения фотографии и текста внутри карточки новости */
    gap: 20px; /* отступ между фотографией и текстом внутри карточки новости */
    min-height: 160px; /* минимальная высота для карточки новости, чтобы обеспечить единообразие */
}
.preview {
    color: var(--main-text); /* цвет текста для текста новости */
    font-size: 1.1rem; /* размер шрифта для текста новости */
    line-height: 1.6; /* межстрочный интервал для улучшения читаемости текста новости */
}
.read-more {
    display: inline-block; /* отображаем ссылку как блочный элемент для правильного отступа */
    margin-top: 15px; /* отступ сверху для ссылки "Читать далее" */
    color: var(--main-color); /* цвет текста для ссылки "Читать далее" */
    text-decoration: none; /* убираем подчеркивание у ссылки "Читать далее" */
    font-weight: 500; /* полужирный шрифт для ссылки "Читать далее" */
    transition: color 0.3s ease; /* плавное изменение цвета при наведении на ссылку "Читать далее" */
}
.read-more:hover {
    color: var(--main-hover); /* цвет текста при наведении на ссылку "Читать далее" */
    text-decoration: underline; /* подчеркивание при наведении на ссылку "Читать далее" */
}
@media (max-width: 768px) {
    .news-container {
        grid-template-columns: 1fr; /* на мобильных устройствах расположение в одну колонку */
    }
    .news-image {
        flex: 0 0 50%; /* фотография новости занимает всю ширину карточки новости на мобильных устройствах */
    }
    .news-content {
        flex: 0 0 50%; /* текст новости занимает всю ширину карточки новости на мобильных устройствах */
        padding: 15px; /* уменьшаем отступы для текста новости на мобильных устройствах */
    }
}
.back-wrapper {
    margin-top: 40px; /* отступ сверху для блока с кнопкой "Назад к новостям" */
    display: block; /* отображаем блок как блочный элемент для правильного отступа */
    text-align: center; /* центрируем кнопку "Назад к новостям" по горизонтали */
}
.back-button {
    background-color: var(--main-color); /* цвет фона для кнопки "Назад к новостям" */
    color: var(--main-background); /* цвет текста для кнопки "Назад к новостям" */
    text-decoration: none; /* убираем подчеркивание у кнопки "Назад к новостям" */
    border: none; /* убираем рамки у кнопки "Назад к новостям" */
    padding: 10px 20px; /* отступы внутри кнопки "Назад к новостям" */
    border-radius: 5px; /* делаем кнопку "Назад к новостям" круглой */
    font-size: 1rem; /* размер текста для кнопки "Назад к новостям" */
    cursor: pointer; /* курсор при наведении на кнопку "Назад к новостям" */
    margin-top: 40px;
    align-self: center;
    transition: background-color 0.3s ease; /* плавное изменение цвета при наведении на кнопку "Назад к новостям" */
}
.back-button:hover {
    background-color: var(--main-hover); /* цвет фона при наведении на кнопку "Назад к новостям" */
    color: var(--main-text); /* цвет текста при наведении на кнопку "Назад к новостям" */
}
.pagination {
    display: flex; /* используем flexbox для расположения пагинатора */
    align-items: center; /* центрируем текст внутри пагинатора */
    justify-content: center; /* центрируем пагинатор по горизонтали */
    gap: 20px; /* отступы между элементами пагинатора */
    margin-top: 20px; /* отступ сверху для отделения от новостей */
    color: var(--main-text); /* цвет текста для пагинатора */
}
.pagination a {
    padding: 8px 12px; /* отступы внутри ссылок пагинатора */
    background: var(--main-color); /* светло-зеленый фон для ссылок пагинатора */
    border-radius: 6px; /* скругляем углы ссылок пагинатора */
    color: var(--main-background); /* цвет текста для ссылок пагинатора */
    text-decoration: none; /* убираем подчеркивание у ссылок пагинатора */
    font-weight: 500; /* полужирный шрифт для ссылок пагинатора */
    transition: color 0.3s ease; /* плавное изменение цвета при наведении на ссылки пагинатора */
}
.pagination a:hover {
    background: var(--main-hover); /* цвет фона при наведении на ссылки пагинатора */
    color: var(--main-text); /* цвет текста при наведении на ссылки пагинатора */
    text-decoration: underline; /* подчеркивание при наведении на ссылки пагинатора */
}
.pagination span {
    color: var(--main-text); /* цвет текста для текущей страницы в пагинаторе */
    font-weight: 500; /* полужирный шрифт для текущей страницы в пагинаторе */
}
.social-links {
    display: inline-block; /* используем flexbox для расположения социальных ссылок */
    gap: 15px; /* отступы между социальными ссылками */
    margin-top: 15px; /* отступ сверху для блока социальных ссылок */
    color: var(--main-text); /* цвет текста для социальных ссылок */
}
.social-links img {
    width: 50px; /* фиксированная ширина для иконок социальных ссылок */
    height: 50px; /* фиксированная высота для иконок социальных ссылок */
    object-fit: cover; /* обрезаем изображение по размеру контейнера */
    border-radius: 50%; /* делаем иконки социальных ссылок круглыми */
    margin-bottom: 15px; /* отступ снизу для отделения от текста */
    margin-right: 5px; /* отступ справа для иконок социальных ссылок */
    transition: transform 0.3s ease; /* плавное увеличение при наведении на иконки социальных ссылок */
}
.social-links a{
    align-items: center;
    margin-top: 15px; /* отступ сверху для блока социальных ссылок */
    display: inline-flex; /* используем flexbox для расположения социальных ссылок */
    gap: 15px; /* отступы между социальными ссылками */
    color: var(--main-text); /* цвет текста для социальных ссылок */
    transition: 0.3s ease; /* плавное изменение цвета при наведении на социальные ссылки */ 
    text-decoration: none; /* убираем подчеркивание у социальных ссылок */
}
.social-links a:hover {
    color: var(--main-hover); /* цвет текста при наведении на социальные ссылки */
    text-decoration: none; /* подчеркивание при наведении на социальные ссылки */
}
.allvega-logo {
    width: auto; /* фиксированная ширина для логотипа ALLVEGA */
    height: 40px; /* фиксированная высота для логотипа ALLVEGA */
    object-fit: cover; /* обрезаем изображение по размеру контейнера */
    border-radius: 6px; /* делаем логотип ALLVEGA круглым */
    margin-bottom: 15px; /* отступ снизу для отделения от текста */
    margin-right: 5px; /* отступ справа для логотипа ALLVEGA */
    transition: transform 0.3s ease; /* плавное увеличение при наведении на логотип ALLVEGA */
}
.allvega-logo img {
    width: auto; /* фиксированная ширина для логотипа ALLVEGA */
    height: 40px; /* фиксированная высота для логотипа ALLVEGA */
    object-fit: cover; /* обрезаем изображение по размеру контейнера */
    border-radius: 6px; /* делаем логотип ALLVEGA круглым */
    margin-bottom: 15px; /* отступ снизу для отделения от текста */
    margin-right: 5px; /* отступ справа для логотипа ALLVEGA */
    transition: transform 0.3s ease; /* плавное увеличение при наведении на логотип ALLVEGA */
}
.allvega-logo:hover {
    transform: scale(1.1); /* увеличиваем логотип ALLVEGA при наведении */
}
.on-fishing-logo {
    width: auto; /* фиксированная ширина для логотипа "На рыбалку" */
    height: 40px; /* фиксированная высота для логотипа "На рыбалку" */
    object-fit: cover; /* обрезаем изображение по размеру контейнера */
    border-radius: 6px; /* делаем логотип "На рыбалку" круглым */
    margin-bottom: 15px; /* отступ снизу для отделения от текста */
    margin-right: 5px; /* отступ справа для логотипа "На рыбалку" */
    transition: transform 0.3s ease; /* плавное увеличение при наведении на логотип "На рыбалку" */
}
.on-fishing-logo:hover {
    transform: scale(1.1); /* увеличиваем логотип "На рыбалку" при наведении */
}
.on-fishing-logo img {
    width: auto; /* фиксированная ширина для логотипа "На рыбалку" */
    height: 40px; /* фиксированная высота для логотипа "На рыбалку" */
    object-fit: cover; /* обрезаем изображение по размеру контейнера */
    border-radius: 6px; /* делаем логотип "На рыбалку" круглым */
    margin-bottom: 15px; /* отступ снизу для отделения от текста */
    margin-right: 5px; /* отступ справа для логотипа "На рыбалку" */
    transition: transform 0.3s ease; /* плавное увеличение при наведении на логотип "На рыбалку" */
}
.icon {
    width: 35px; /* фиксированная ширина для иконок социальных ссылок */
    height: 35px; /* фиксированная высота для иконок социальных ссылок */
}
.icon:hover {
    transform: scale(1.2); /* увеличиваем иконку при наведении */
    transition: transform 0.3s ease; /* плавное увеличение при наведении на иконки социальных ссылок */
}
.gallery-arrow {
    position: absolute; /* позиционируем стрелки поверх фотографии */
    top: 50%; /* вертикальное центрирование */
    transform: translateY(-50%); /* корректируем позицию по вертикали */
    background-color: rgba(0, 0, 0, 0.5); /* полупрозрачный черный фон для лучшей видимости стрелок */
    color: white; /* цвет стрелок */
    border: none; /* убираем рамки у кнопок */
    font-size: 2rem; /* размер стрелок в  галереи */
    padding: 8px 12px; /* отступы внутри стрелок */
    border-radius: 50%; /* делаем стрелки круглыми */
    cursor: pointer; /* курсор при наведении на стрелки */
}
.gallery-arrow.left {
    left: 10px; /* отступ слева для левой стрелки */
}
.gallery-arrow.right {
    right: 10px; /* отступ справа для правой стрелки */
}
.photo-thumbnail {
    display: flex; /* используем flexbox для расположения миниатюр */
    gap: 10px; /* отступы между миниатюрами */
    border-radius: 10px; /* скругляем углы миниатюр */
    margin-top: 10px; /* отступ сверху для отделения от основной фотографии */
    overflow-y: auto; /* добавляем вертикальную прокрутку, если миниатюр слишком много */
}
.thumb {
    width: 60px; /* фиксированная ширина для миниатюр */
    height: 60px; /* фиксированная высота для миниатюр */
    object-fit: cover; /* обрезаем изображение по размеру контейнера */
    cursor: pointer; /* курсор при наведении на миниатюры */
    border-radius: 6px; /* скругляем углы миниатюр */
    border: 2px solid transparent; /* добавляем рамку для выделения активной миниатюры */
}
.thumb:hover {
    border-color: var(--main-hover); /* цвет рамки при наведении на миниатюру */
    transform: scale(1.05); /* немного увеличиваем миниатюру при наведении */
    transition: transform 0.3s ease, border-color 0.3s ease; /* плавное увеличение и изменение цвета рамки */
}
.active-thumb {
    border: 2px solid var(--main-color); /* добавляем рамку для активной миниатюры */
}  
.lightbox {
    display: none; /* используем flexbox для центрирования изображения */
    position: fixed; /* фиксированное позиционирование для перекрытия всего экрана */
    z-index: 999; /* высокий z-index для перекрытия всех элементов на странице */
    top: 0; left: 0; width: 100%; height: 100%; /* занимаем весь экран */
    padding-top: 10px; /* отступ сверху для центрирования изображения по вертикали */
    background-color: rgba(0, 0, 0, 0.8); /* полупрозрачный черный фон для затемнения фона */
    justify-content: center; /* горизонтальное центрирование изображения */
    align-items: center; /* вертикальное центрирование изображения */
} 
.lightbox img {
    max-width: 90%; /* ограничиваем максимальную ширину изображения в лайтбоксе */
    max-height: 90%; /* ограничиваем максимальную высоту изображения в лайтбоксе */
    border-radius: 10px; /* скругляем углы изображения в лайтбоксе */
}
@media (max-width: 768px) {
    .member-layout {
        flex-direction: column; /* на мобильных устройствах расположение в столбец */
        align-items: center; /* центрируем по горизонтали на мобильных устройствах */
    }
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(255,255,255,0.1); /* легкий белый при наведении */
}
.no-photo {
    width: 100%; /* занимает всю ширину контейнера */
    aspect-ratio: 1 / 1;
    height: 33vh; /* фиксированная высота для блока без фотографии */
    display: flex; /* используем flexbox для центрирования текста */
    align-items: center; /* вертикальное центрирование текста */
    justify-content: center; /* горизонтальное центрирование текста */
    background-color: var(--main-background); /* светло-зеленый фон для блока без фотографии */
    color: var(--main-text); /* цвет текста на фоне */
    font-size: 1.5rem; /* размер шрифта для текста в блоке без фотографии */
    border-radius: 10px; /* скругляем углы блока без фотографии */
    border: 2px dashed var(--main-hover); /* пунктирная рамка для блока без фотографии */
}
.scroll-top {
    position: absolute; /* фиксируем кнопку при прокрутке */
    bottom: 20px; /* отступ снизу для кнопки */
    right: 20px; /* отступ слева для кнопки */
    background-color: var(--main-color); /* цвет фона кнопки */
    color: white; /* цвет текста кнопки */
    border: none; /* убираем рамки у кнопки */
    display: block; /* отображаем кнопку как блочный элемент */
    width: 40px; /* фиксированная ширина для кнопки */
    height: 40px; /* фиксированная высота для кнопки */
    border-radius: 5px; /* делаем кнопку круглой */
    font-size: 1.5rem; /* размер текста для кнопки */
    cursor: pointer; /* курсор при наведении на кнопку */
    opacity: 0; /* изначально скрываем кнопку */
    transition: opacity 0.3s ease; /* плавное появление кнопки */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 3000; /* гарантируем, что кнопка будет поверх других элементов */
}
.achievements ul {
    margin-top: 15px; /* отступ сверху для списка достижений */
    list-style-type: none; /* убираем стандартные маркеры у списка */
    padding: 0; /* убираем отступ слева для списка */
}
.achievement-item {
    background-color: var(--main-background); /* светло-зеленый фон для элемента достижения */
    border-left: 5px solid var(--main-color); /* цветная полоса слева для выделения элемента достижения */
    padding: 14px 18px; /* отступы внутри элемента достижения */
    margin-bottom: 14px; /* отступ между достижениями */
    border-radius: 6px; /* скругляем углы элемента достижения */
    text-align: left; /* выравнивание текста по левому краю */
    animation: fadeIn 0.5s ease; /* анимация появления элемента достижения */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* легкая тень для объема элемента достижения */
}
.achievement-item strong {
    color: var(--main-color); /* цвет текста для названия достижения */
    font-size: 1.2rem; /* размер шрифта для названия достижения */
}
.achievement-members {
    display: flex; /* используем flexbox для расположения списка спортсменов */
    flex-wrap: wrap; /* позволяет списку спортсменов переноситься на следующую строку */
    align-items: center; /* выравнивание по вертикали для списка спортсменов */
    font-size: 18px; /* размер шрифта для списка спортсменов */
    margin-top: 10px; /* отступ сверху для списка спортсменов */
    font-style: italic; /* курсив для текста списка спортсменов */
    color: var(--main-text); /* цвет текста для списка спортсменов */
}
.member-link {
    display: inline-flex; /* используем inline-flex для расположения аватара и текста в одной строке */
    align-items: center; /* выравнивание по вертикали для аватара и текста */
    gap: 8px; /* отступ между аватаром и текстом */
    color: var(--main-text); /* цвет текста для ссылок в списке спортсменов */
    font-weight: 500; /* полужирный шрифт для ссылок в списке спортсменов */
    text-decoration: none; /* убираем подчеркивание у ссылок в списке спортсменов */
    transition: color 0.3s ease; /* плавное изменение цвета при наведении на ссылки в списке спортсменов */
    margin-right: 10px; /* отступ справа для каждой ссылки в списке спортсменов */
}
.member-link:hover {
    color: var(--main-hover); /* цвет текста при наведении на ссылки в списке спортсменов */
    text-decoration: underline; /* подчеркивание при наведении на ссылки в списке спортсменов */
}
.member-avatar {
    width: 25px; /* фиксированная ширина для аватара спортсмена */
    height: 25px; /* фиксированная высота для аватара спортсмена */
    object-fit: cover; /* обрезаем изображение по размеру контейнера */
    border-radius: 50%; /* делаем аватар круглым */
    margin-right: 5px; /* отступ справа для аватара спортсмена */
    display: inline-block; /* отображаем аватар как блочный элемент для правильного выравнивания с текстом */
    vertical-align: middle; /* выравнивание по вертикали для аватара спортсмена */
}
.achievement-members span,
.achievement-members a {
    display: inline-flex; /* используем inline-flex для расположения аватара и текста в одной строке */
    align-items: center; /* выравнивание по вертикали для аватара и текста в списке спортсменов */
    margin-left: 30px; /* отступ слева для списка спортсменов */
    font-style: italic; /* курсив для текста списка спортсменов */
    color: var(--main-text); /* цвет текста для списка спортсменов */
}
.achievement-members a{
    display: inline-flex; /* используем inline-flex для расположения аватара и текста в одной строке */
    align-items: center; /* выравнивание по вертикали для аватара и текста в ссылках списка спортсменов */
    margin-left: 30px; /* отступ слева для списка спортсменов */
    text-decoration: none; /* убираем подчеркивание у ссылок в списке спортсменов */
    transition: color 0.3s ease; /* плавное изменение цвета при наведении на ссылки в списке спортсменов */
    color: var(--main-text); /* цвет текста для списка спортсменов */
}
.achievement-members a:hover {
    color: var(--main-hover); /* цвет текста при наведении на ссылки в списке спортсменов */
    text-decoration: none; /* подчеркивание при наведении на ссылки в списке спортсменов */
}
.achievement-item img {
    display: inline-block;
    text-align: center;
    margin-top: 10px; /* отступ сверху для изображения достижения */
    border-radius: 6px; /* скругляем углы изображения достижения */
    max-width: 220px; /* ограничиваем максимальную ширину изображения достижения */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* легкая тень для объема изображения достижения */
}
.achievement-image {
    display: flex;
    justify-content: center; /* центрируем изображение достижения по горизонтали */
}
.achievement-image img {
    display: block; /* отображаем изображение как блочный элемент для правильного центрирования */
    margin: 10px auto; /* центрируем изображение по горизонтали */
    margin-top: 10px; /* отступ сверху для изображения достижения */
    ;
    border-radius: 6px; /* скругляем углы изображения достижения */
    max-width: 220px; /* ограничиваем максимальную ширину изображения достижения */
    height: auto; /* сохраняем пропорции изображения достижения */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* легкая тень для объема изображения достижения */
}
@media (max-width: 768px) {
    .achievement-image img {
        max-width: 100%;  /* всегда под ширину экрана */
        height: auto;
    }
}
.achievements-year {
    text-align: center; /* выравнивание текста по центру для заголовка года достижений */
    margin-bottom: 10px; /* отступ между годами достижений */
    padding-bottom: 10px; /* отступ снизу для заголовка года достижений */
}
.achievements-year summary {
    display: flex; /* используем flexbox для расположения текста и стрелки */
    gap: 10px; /* отступ между текстом и стрелкой */
    justify-content: center; /* центрируем по горизонтали */
    font-size: 30px; /* размер шрифта для заголовка года */
    font-weight: 700; /* жирный шрифт для заголовка года */
    cursor: pointer; /* курсор при наведении на заголовок года */
    color: var(--main-color); /* цвет текста для заголовка года */
    padding: 10px 0; /* отступы для заголовка года */
    background-color: var(--main-background); /* светло-зеленый фон для заголов */
    list-style: none; /* убираем стандартные маркеры у списка */
    border-radius: 6px; /* скругляем углы заголовка года */
    border-bottom: 3px solid var(--main-color); /* линия под заголовком года */
    padding-bottom: 10px; /* отступ снизу для заголовка года */
}
/* убираем стандартный маркер */
.achievements-year summary::-webkit-details-marker {
    display: none;
}

.year-arrow::before {
    content: "▶";
    display: inline-block;
    font-size: 20px;
    transition: transform 0.25s ease;
}

/* поворот стрелки при открытии */
.achievements-year[open] .year-arrow::before {
    align-items: center;
    transform: rotate(90deg);
}
.achievements-year summary:hover {
    background-color: var(--main-background); /* цвет фона при наведении на заголовок года */
    color: var(--main-hover); /* цвет текста при наведении на заголовок года */
}
.achievements-list {
    list-style: none;
    padding: 20px; /* отступы для списка достижений внутри года */
    padding-left: 20px; /* отступ слева для списка достижений внутри года */
    max-height: 0; /* изначально скрываем список достижений внутри года */
    overflow: hidden; /* скрываем избыточный контент, если он превышает высоту контейнера */
    transition:
        max-height 0.4s ease, /* плавное раскрытие списка достижений внутри года */
        opacity 0.3s ease; /* плавное изменение прозрачности при раскрытии списка достижений внутри года */
}
/* когда год уже открыт */
.achievements-year[open] .achievements-list {
    animation: fadeIn 1s ease forwards; /* анимация появления списка достижений внутри года */
    max-height: 1000px; /* достаточно большая высота для отображения всех достижений внутри года */
    opacity: 1; /* делаем список достижений внутри года полностью видимым */
}
@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(-10px); /* начальное положение для эффекта подъема */}
        to { 
            opacity: 1; 
            transform: translateY(0); /* конечное положение для эффекта подъема */}
        }
@media (max-width: 768px) {
    .achievements-year summary {
        font-size: 16px; /* уменьшаем размер шрифта для заголовка года на мобильных устройствах */
        padding: 8px 5px; /* уменьшаем отступы для заголовка года на мобильных устройствах */
    }
    .year-arrow::before {
        font-size: 14px; /* уменьшаем размер стрелки для заголовка года на мобильных устройствах */
    }
    .achievements-list {
        padding: 10px; /* уменьшаем отступы для списка достижений внутри года на мобильных устройствах */
    }
    .achievement-item {
        flex-wrap: wrap; /* позволяет элементам достижения переноситься на следующую строку на мобильных устройствах */
        gap: 5px; /* уменьшаем отступы между элементами достижения на мобильных устройствах */
        font-size: 13px; /* уменьшаем размер шрифта для элементов достижения на мобильных устройствах */
        padding: 10px; /* уменьшаем отступы внутри элемента достижения на мобильных устройствах */
    }
    .member-avatar {
        width: 20px; /* уменьшаем ширину аватара спортсмена на мобильных устройствах */
        height: 20px; /* уменьшаем высоту аватара спортсмена на мобильных устройствах */
        margin-right: 4px;
    }
    .achievement-item img {
        max-width: 100%; /* уменьшаем максимальную ширину изображения достижения на мобильных устройствах */
        height: auto; /* сохраняем пропорции изображения достижения на мобильных устройствах */
    }
    .scroll-top {
        position: fixed; /* фиксируем кнопку при прокрутке на мобильных устройствах */
        bottom: 60px; /* уменьшаем отступ снизу для кнопки на мобильных устройствах */
        right: 15px; /* добавляем отступ справа для кнопки на мобильных устройствах */
        width: 30px; /* уменьшаем ширину кнопки на мобильных устройствах */
        height: 30px; /* уменьшаем высоту кнопки на мобильных устройствах */
        font-size: 22px; /* уменьшаем размер текста для кнопки на мобильных устройствах */
        cursor: pointer; 
        background: var(--main-color); /* цвет фона для кнопки на мобильных устройствах */
        color: var(--main-background); /* цвет текста для кнопки на мобильных устройствах */
        border-radius: 6px; /* делаем кнопку более круглой на мобильных устройствах */
        z-index: 3000; /* гарантируем, что кнопка будет поверх других элементов на мобильных устройствах */
    }   
}
@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 12px;
        margin: 0;
    }
    .achievements-year summary {
        font-size: 12px; /* уменьшаем размер шрифта для заголовка года на очень маленьких экранах */
        padding: 6px 3px; /* уменьшаем отступы для заголовка года на очень маленьких экранах */
    }
    .achievement-item {
        font-size: 12px; /* уменьшаем размер шрифта для элементов достижения на очень маленьких экранах */
        padding: 8px; /* уменьшаем отступы внутри элемента достижения на очень маленьких экранах */
    }
    .achievement-members {
        font-size: 14px; /* уменьшаем размер шрифта для списка спортсменов на очень маленьких экранах */
    }
    .member-avatar
    {
        width: 18px; /* уменьшаем ширину аватара спортсмена на очень маленьких экранах */
        height: 18px; /* уменьшаем высоту аватара спортсмена на очень маленьких экранах */
    }   
}
.image-modal {
    display: none; /* изначально скрываем модальное окно */
    position: fixed; /* фиксированное позиционирование для перекрытия всего экрана */
    z-index: 1001; /* высокий z-index для перекрытия всех элементов на странице, включая футер */
    top: 0; left: 0; width: 100%; height: 100%; /* занимаем весь экран */
    background-color: rgba(0, 0, 0, 0.8); /* полупрозрачный черный фон для затемнения фона */
    justify-content: center; /* горизонтальное центрирование изображения */
    align-items: center; /* вертикальное центрирование изображения */
}
.image-modal-content {
    display: block;
    margin: auto; /* центрируем изображение в модальном окне */
    max-width: 90vw; /* ограничиваем максимальную ширину изображения в модальном окне */
    max-height: 90vh; /* ограничиваем максимальную высоту изображения в модальном окне */
    border-radius: 10px; /* скругляем углы изображения в модальном окне */
    object-fit: contain; /* сохраняем пропорции изображения в модальном окне */
}
@media (max-width: 768px) {
    .image-modal-content {
        max-width: 95vw; /* увеличиваем максимальную ширину изображения в модальном окне на мобильных устройствах */
        max-height: 95vh; /* увеличиваем максимальную высоту изображения в модальном окне на мобильных устройствах */
    }
}
.image-close {
    position: absolute; /* позиционируем кнопку закрытия поверх модального окна */
    top: 20px; /* отступ сверху для кнопки закрытия */
    right: 20px; /* отступ справа для кнопки закрытия */
    color: white; /* цвет текста для кнопки закрытия */
    font-size: 2rem; /* размер текста для кнопки закрытия */
    font-weight: bold; /* жирный шрифт для кнопки закрытия */
    cursor: pointer; /* курсор при наведении на кнопку закрытия */
    z-index: 1002; /* гарантируем, что кнопка закрытия будет поверх всех элементов в модальном окне */
}
.clickable-image {
    cursor: zoom-in; /* курсор при наведении на кликабельные изображения */
}
.clickable-image:hover {
    transform: scale(1.05); /* немного увеличиваем изображение при наведении на кликабельные изображения */
    opacity: 0.8; /* легкое затемнение при наведении на кликабельные изображения */
    transition: opacity 0.3s ease; /* плавное изменение прозрачности при наведении на кликабельные изображения */
}

.footer {
    background-color: var(--main-color);
    margin-top: auto; /* отталкиваем футер от основного контента, чтобы он всегда был внизу страницы */
    z-index: 1000; /* гарантируем, что футер будет поверх других элементов */
}