/* Общие стили */
body {
  font-family: 'Fira Sans', 'Inter', 'Roboto Flex', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #FFEE58;
  color: #333F48;
  font-size: 14px;
  margin: 0;
  padding: 0;
  max-width: 1128px;
  margin: 0 auto;
}

.home-info {
position: absolute;
top: 40px;
left: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
color: #333F48;
font-size: 10px;
z-index: 15; /* поверх фона и навигации */
}

/* Навигация */
.nav {
  position: absolute;
  width: 600px;
  height: 100px;
  left: 236px;
  top: 113px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  padding: 120px 0px 0px 60px;
  box-sizing: border-box;
  border: 0px solid rgb(255, 255, 255);
  border-radius: 80px;
  transition: 0.3s ease;
  z-index: 10; /* Навигация поверх фона */
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* Скрыто по умолчанию */
}

.nav-menu li {
  margin: 0 0;
}

.nav-menu a {
  text-decoration: none;
  color: rgb(51, 63, 72);
  font-family: 'Fira Sans';
  font-size: 48px;
  font-weight: 300;
  line-height: 58px;
  letter-spacing: 0%;
  text-align: left;
  transition: all 0.2s ease; /* Плавный переход для анимации */
  background-color: transparent !important; /* Прозрачный фон */
}

/* Стиль для перечеркнутого текста при наведении */
.nav-menu a:hover {
  text-decoration: line-through; /* Перечеркивание */
  text-decoration-color: #FFEE58; /* Цвет линии */
  text-decoration-thickness: 50px; /* Толщина линии */

}
/* Активное состояние меню */
.nav.active .nav-menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  padding: 90px 0px 0px 40px;
}

/* Расположение кнопки expand-button */
.expand-button {
  position: absolute;
  width: 80px;
  height: 80px;
  right: 24px; /* Позиционирование внутри .nav */
  top: 20px;
  z-index: 20; /* Кнопка поверх навигации */
  background: none;
  border: none;
  cursor: pointer;
}

.arrow-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: #FFEE58;
  color: #333F48;
  border-radius: 50%;
  font-family: 'Fira Sans';
  font-size: 24px;
  font-weight: 500;
  transition: transform 0.3s ease;
  transform: rotate(90deg);
}

.expand-button.active .arrow-circle {
  background-color: #ffffff;
  transform: rotate(180deg); /* Поворот стрелки на 90 градусов */
}

.expand-button:hover .arrow-circle {
  background-color: #333F48;
  color: #ffffff;
  transition: all 0.2s ease;
}

/* Стили для раскрытого состояния .nav */
.nav.active {
  position: absolute;
  width: 600px;
  height: 754px;
  left: 236px;
  top: 113px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  padding: 140px 0px 0px 40px;
  border-radius: 60px;
  background: rgb(255, 255, 255);
  transition: 0.6s ease;
}

/* Анимированный фон */
.gif-container {
  position: fixed;
  left: 320px;
  top: 70px;
  z-index: -1;
}

.responsive-gif {
  width: 375px; /* Размер по умолчанию */
  height: auto; /* Сохранение пропорций */
}

/* Footer */
.home-footer {
  position: absolute;
  bottom: 100px;
  left: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: #333F48;
  font-size: 10px;
  z-index: 5; /* Footer поверх фона, но ниже навигации */
}

.year-first,
.year-last {
  margin: 0;
  padding: 0;
}

.year-first {
  font-weight: 700;
}

.year-last {
  font-weight: 300;
}

/* Стрелка-разделитель */
.arrow-separator {
  position: relative;
  width: 1px; /* Толщина линии */
  height: 50px; /* Длина линии */
  background-color: #333F48; /* Цвет линии */
  margin-left: 0; /* Выравнивание по левой стороне */
}

.arrow-separator::after {
  content: '';
  position: absolute;
  top: 100%; /* Размещение головки стрелки под линией */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 2px solid transparent; /* Левая сторона треугольника */
  border-right: 2px solid transparent; /* Правая сторона треугольника */
  border-top: 4px solid #333F48; /* Цвет и размер головки стрелки */
}