/* Пример сайдбара, который изначально узкий и ниже баннера */
.vertical-glass-sidebar {
  position: fixed;
  /* Меняем это значение, чтобы расположить «чуть ниже» баннера */
  top: 35vh;   
  left: 0;

  width: 2.2vw;          /* узкая ширина в свернутом состоянии */
  height: 25vh;        /* произвольная высота, пока «свернут» */
  overflow: hidden;     /* скрываем содержимое за границами */
  
  background: rgba(255, 255, 255, 0.1); /* полупрозрачный фон для glassmorphism */
  backdrop-filter: blur(12px);          /* размытие фона */
  border-right: 0.05vw solid rgba(255, 255, 255, 0.2);
  border-radius: 0 0.5rem 0.5rem 0;
  
  transition: all 0.4s ease; /* плавная анимация при изменении ширины/высоты */
  z-index: 1000;             /* поверх основного контента */
}

/* Содержимое внутри сайдбара (отступы, стили текста) */
.sidebar-content {
  padding: 1.25rem;
  color: #fff;
}
.sidebar-content h2 {
  margin-bottom: 0.94rem;
}
.sidebar-content ul {
  list-style: none;
  margin-top: 0.63rem;
}
.sidebar-content li {
  margin: 0.63rem 0;
}
.sidebar-content a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s;
}
.sidebar-content a:hover {
  color: #ddd;
}

/* При наведении (hover) сайдбар «растягивается» на половину экрана по ширине 
   и заполняет всю высоту окна (сверху донизу) */
.vertical-glass-sidebar:hover {
  top: 0;        /* прилипает к верхней границе окна */
  bottom: 0;     /* прилипает к нижней границе окна */
  height: auto;  /* авто-высота, раз у нас есть top и bottom */
  width: 50vw;   /* занимает половину ширины экрана */
}
/* Скрываем содержимое в закрытом состоянии */
.vertical-glass-sidebar .sidebar-content {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* При наведении делаем текст видимым */
.vertical-glass-sidebar:hover .sidebar-content {
  opacity: 1;
}
/* Стили для логотипа */
.sidebar-logo {
  font-family: 'CustomFont1', sans-serif; /* Пользовательский шрифт для логотипа */
  font-size: 1.3rem;          /* Размер шрифта */
  color: #fff;              /* Цвет текста */
  margin-bottom: 1.25rem;      /* Отступ снизу */
  margin-left: 0.125rem;
  letter-spacing: 0.94rem;      /* Межбуквенный интервал */
  padding-left: 0.625rem; /* отступ, чтобы текст не прилипал к линии */
  border-left: 1px solid #fff; /* тонкая белая линия слева */
}

/* Общие стили для меню */
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Общие стили для пунктов меню */
.sidebar-menu-item {
  margin-bottom: 0.94rem; /* Отступ между пунктами */
}
/* Индивидуальные настройки для каждого пункта меню */

/* Для первого пункта (можно использовать псевдокласс или id) */
.sidebar-menu-item:nth-child(1) a {
  position: absolute;   /* Абсолютное позиционирование относительно родителя */
  font-family: 'CustomFont3', sans-serif;
  top: 22%;             /* Центр по вертикали */
  left: 3%;            /* Центр по горизонтали */
  transform: translate(-50%, -50%) rotate(90deg); /* Центрируем элемент и поворачиваем его */
  transform-origin: center; /* Точка вращения – центр элемента */
  pointer-events: none; /* Без hover-эффектов, если нужно */
  letter-spacing: 0.31rem;
  font-size: 0.8rem;
}
.sidebar-menu-item:nth-child(1) a::after {
  content: "";
  position: absolute;
  /* Размеры линии */
  width: 4.4rem;       /* длина линии – измените по вкусу */
  height: 1px;       /* толщина линии */
  background-color: #fff; /* цвет линии */
  /* Располагаем линию рядом с текстом */
  left: calc(100% + 0.31rem);  /* линия начинается справа от текста с отступом 5px */
  top: 50%;               /* по вертикали – по центру элемента */
  transform: translateY(-50%); 
  transform-origin: left center;
  pointer-events: none;  /* чтобы линия не мешала взаимодействию */
}


/* Для второго пункта */
.sidebar-menu-item:nth-child(2) a {
  position:absolute;
  font-family: 'CustomFont3', sans-serif;
  font-size: 2rem;
  color: #fff;
  top: 23vh;
  left: 15.6vw;
  letter-spacing: 0.25rem;
}

/* Для третьего пункта (также можно через id) */
.sidebar-menu-item:nth-child(3) a {
  position:absolute;
  font-family: 'CustomFont3', sans-serif;
  font-size: 2rem;
  color: #fff;
  top: 32.4vh;
  left: 15.6vw;
  letter-spacing: 0.25rem;
}

/* Для четвертого пункта */
.sidebar-menu-item:nth-child(4) a {
  position:absolute;
  font-family: 'CustomFont3', sans-serif;
  font-size: 2rem;
  color: #fff;
  top: 41.7vh;
  left: 15.6vw;
  letter-spacing: 0.25rem;
}

/* Для пятого пункта */
.sidebar-menu-item:nth-child(5) a {
  position:absolute;
  font-family: 'CustomFont3', sans-serif;
  font-size: 2rem;
  color: #fff;
  top: 51.0vh;
  left: 15.6vw;
  letter-spacing: 0.25rem;
}

/* Для шестого пункта */
.sidebar-menu-item:nth-child(6) a {
  position:absolute;
  font-family: 'CustomFont3', sans-serif;
  font-size: 2rem;
  color: #fff;
  top: 60.2vh;
  left: 15.6vw;
  letter-spacing: 0.25rem;
}

/* Hover-эффект для пунктов меню */
.sidebar-menu-item a {
  border: 0.125rem solid transparent; /* Изначально прозрачная рамка */
  border-radius: 0.5rem;              /* Округление углов */
  transition: border 0.3s ease, transform 0.3s ease; /* Плавные переходы */
}

.sidebar-menu-item a:hover {
  border-color: #fff;              /* При наведении рамка становится белой */
  transform: translateX(10px);     /* Эффект сдвига вправо */
  box-shadow: 0 0 1.875rem rgba(255, 255, 255, 0.7); /* Glow-эффект */
}
.custom-box {
  position: absolute;
  font-family: 'CustomFont2', sans-serif;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 4px;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

/* Стили для первого бокса */
.box1 {
  top: 94vh;
  left: 2.6vw;
}

/* Стили для второго бокса */
.box2 {
  top: 93.8vh;
  left: 14.6vw;
}

/* Абсолютно позиционированная линия */
.decor-line {
  position: absolute;
  left: 130%;         /* Располагаем линию сразу после текста */
  top: 50%;           /* Центрируем по вертикали относительно контейнера */
  transform: translateY(-50%);
  width: 5rem;        /* Длина линии – настройте по вкусу */
  height: 1px;        /* Толщина линии */
  background-color: #fff;
  pointer-events: none;  /* Линия не будет реагировать на hover и клики */
  user-select: none;    /* Линия не выделяется */
}

/* Попытка отменить выделение для псевдоэлемента */
.box2::after::selection {
  background: transparent;
}

.custom-box:hover {
  border-color: #000;
  border: 2px solid transparent; /* Изначально прозрачная рамка */
  border-radius: 10px;              /* Округление углов */
  transition: border 0.3s ease, transform 0.3s ease; /* Плавные переходы */
  transform: translateX(10px);     /* Эффект сдвига вправо */
}
/* Стили для логотипов внутри боксов */
.logo-icon {
  width: 40px;        /* размер логотипа */
  height: auto;
  user-select: none;
  vertical-align: middle; /* если требуется, для inline-block элементов */
  margin-right: 10px; /* отступ между логотипом и текстом */
}