.container {
  flex: 1;
}

header {
  padding: 10px 0;
}

.logo {
  z-index: 0;
  text-align: center;
}

.menu {
  animation: 3s show ease;
  list-style-type: none;
  padding: 10px 0; /* Добавляем отступы сверху и снизу */
  margin: 0;
  position: absolute;
  bottom: 5vh; /* Отступ от нижнего края страницы */
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* Ширина меню */
  z-index: 1;
}

.menu li {
  display: inline-block; /* Располагаем поля горизонтально */
  width: 25%; /* Задаем каждому полю ширину в 25%, чтобы они растянулись по всей ширине меню */
  text-align: center; /* Центрируем текст внутри полей */
  font-size: 24px;
}

.menu li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  border-right: 1px solid #555;
  background-color: rgb(50, 50, 50, 0.2);;
  transition: background-color 0.3s; /* Плавное изменение цвета фона при наведении мыши */

}

.menu li a:hover {
  background-color: rgb(100, 100, 100, 0.4); /* Изменение цвета фона при наведении мыши */

}

@media screen and (max-width: 768px) {
  .menu {
    width: 100%; /* При ширине экрана до 768px меню будет занимать всю ширину экрана */
    bottom: 10%; /* Помещаем меню внизу экрана */
    border-radius: 10%;
  }

  #leaves {position:absolute;top:-50px;width:100%;text-align: center;}

  #leaves i {
      width: calc(20px);;
      height: calc(5px);;
  }
  
  #leaves i:nth-of-type(n)    { height:12px; width:15px; }
#leaves i:nth-of-type(n):before { width:7px; height:5px; top:17px; right:1px; }
#leaves i:nth-of-type(n):after { width:2px; height:17px; left: 12px; top:0px; }

#leaves i:nth-of-type(2n+1)    { height:11px; width:16px; }
#leaves i:nth-of-type(2n+1):before { width:4px; height:3px; top:7px; right:0px; }
#leaves i:nth-of-type(2n+1):after { width:2px; height:6px; left: 5px; top:1px; }

#leaves i:nth-of-type(3n+2)  { height:9px; width:11px; }
#leaves i:nth-of-type(3n+2):before  { height:4px; width:4px; top:12px; right:1px; }
#leaves i:nth-of-type(3n+2):after  { height:10px; width:2px; top:1px; left:8px; }

  img{
    display: none;
  }
  body {
/* Фоновое изображение для мобильных устройств */
    background-size: cover; /* Полностью заполняет заданный размер элемента фоновым изображением */
    background-position: center; /* Центрирует фоновое изображение по горизонтали и вертикали */
    background-attachment: fixed; /* Зафиксирует фоновое изображение, чтобы оно не скроллилось вместе со страницей */
  }

  .header{
    display: none;
    padding: 50% 0;
  }
  .logo{
    padding: 110% 0;
    padding-bottom:0 ;
    width: 80%;
  }
  .menu li {
    padding-top: 20px;
    padding: 5px;
    margin-left: 10%;
    display: block; /* Располагаем поля вертикально */
    width: 70%; /* Задаем каждому полю ширину в 25%, чтобы они растянулись по всей ширине меню */
    text-align: left; /* Центрируем текст внутри полей */
    font-size: 14px;
  }
  .menu li a {
    display: block;
    color: black;
    text-decoration: none;
    padding: 10px 0;
    border-right: 1px solid #555;
    border-right: 0px ;
    background-color: rgb(50, 50, 50, 0);;
    transition: background-color 0.3s; /* Плавное изменение цвета фона при наведении мыши */
  
  }
}