body {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

.header {
    display: flex;
    justify-content: space-evenly; /* ← равномерное распределение */
    align-items: center;
    color: aliceblue;
    background-color: #1a3c70;
    display: flex;           /* ← Важно: располагает детей в ряд */
    align-items: center;     /* ← Выравнивает по вертикали */
    padding: 10px 20px;      /* ← Добавим отступы для красоты */
    gap: 20px;               /* ← Расстояние между элементами */
}

.header-title p {
    margin: 0;               /* Убираем стандартный отступ у <p> */
    font-size: 1.5rem;       /* При необходимости — увеличим шрифт */
    font-weight: bold;
}

.header-menu ul {
    /* list-style: none;        Убираем маркеры */
    margin: 0;
    padding: 0;
    display: flex;           /* Если пунктов меню будет несколько — тоже в ряд */
    gap: 15px;
}

.header-menu li {
    color: inherit;
}

.header-menu a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.header-logo img {
    height: 100px;            /* Лучше задавать высоту, а не ширину 10px — иначе слишком мелко */
    width: auto;             /* Сохраняем пропорции */
}

/* Убираем маркеры списка и наследуем цвет */
ul li {
    list-style: none;        /* ← убирает точки/маркеры */
    color: inherit;          /* ← наследует цвет от родителя */
    text-decoration: none;   /* ← хотя это для ссылок, но ок, оставим */
}

/* Если внутри li есть ссылки <a>, им тоже можно сбросить стиль и передать цвет: */
ul li a {
    color: inherit;
    text-decoration: none;
}

.header-link {
    display: flex;
    justify-content: space-evenly; /* ← ВОТ КЛЮЧЕВОЕ СВОЙСТВО */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap; /* на случай маленьких экранов */
}

/* Стили для бургер-меню */
.burger-menu {
    display: none; /* Скрываем на десктопе */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.burger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background: aliceblue;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.content {
    padding: 20px;
}



.flowchart_losa_picture-l {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    margin: 10px;
    float:left;
    width: 400px;
    margin: 30px;          /* Отступы сверху и снизу для визуального разделения */
        /* Центрируем картинку по горизонтали */
}

.flowchart_losa_picture-r {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    margin: 10px;
    float:right;
    width: 400px;
    margin: 30px;          /* Отступы сверху и снизу для визуального разделения */
        /* Центрируем картинку по горизонтали */
}

.flowchart_losa_picture img {
    max-width: 100%;         /* ← Главное: изображение не будет шире контейнера */
    height: auto;            /* ← Сохраняем пропорции */
    display: block;          /* ← Убираем лишнее пространство снизу (inline-gap) */
    border-radius: 8px;      /* Опционально: скругление углов для красоты */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Опционально: лёгкая тень */
}


/* Адаптивность: мобильное меню при < 649px */
@media (max-width: 648px) {
    .header {
        justify-content: space-between;
        flex-wrap: nowrap;
        position: relative;
        overflow: visible; /* ← чтобы выпадающее меню не обрезалось */
    }

    /* Скрываем ВЕСЬ блок меню (включая ul внутри) */
    .header-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 50;
        right: 0;
        background-color: #1a3c70;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        gap: 15px;
        z-index: 5;
    }

    /* Показываем ВЕСЬ блок, включая ul */
    .header-menu.active {
        display: flex;
    }

    .burger-menu {
        display: flex;
        flex-shrink: 0;
    }

    /* Убедимся, что ul внутри отображается */
    .header-menu ul {
        display: flex; /* или display: block — но НЕ none! */
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .content {}

    .flowchart_losa_picture-l {


        width: 300px;
        margin: 20px;          /* Отступы сверху и снизу для визуального разделения */
        /* Центрируем картинку по горизонтали */
    }

    .flowchart_losa_picture-r {


        width: 300px;
        margin: 20px;          /* Отступы сверху и снизу для визуального разделения */
        /* Центрируем картинку по горизонтали */

    }
}



/* футер */

.footer {
    text-align: center;
    color: aliceblue;
    background-color: #1a3c70;
    align-items: center;
    padding: 10px 20px;
    gap: 20px;
}

.footer ul {

  list-style: none;
  display: flex;
  justify-content: left;
  gap: 15px;
  padding: 0;
  margin: 0 0 10px 0;
}

.footer li a img {
  width: 35px;
  height: 35px;
  vertical-align: middle;
  color: white;
}

.copyright a{
  margin: 0;
  font-size: 14px;
  color: white;
  text-decoration: none;  /* Опционально: убрать подчёркивание */
}

/* Кнопка "Наверх" */
.back-to-top {
    position: fixed;
    bottom: 100px; /* Расстояние от нижнего края экрана — выше футера */
    right: 30px;  /* Отступ справа */
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: rgb(228, 93, 15);
    color: rgb(251, 249, 249);
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.back-to-top:hover {
    background-color: rgb(203, 59, 20);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
}

 .back-to-top.show {
    opacity: 1;
    visibility: visible;
}