/* Стили для меню */
.side-menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 60%; /* Занимает половину экрана */
	height: 100%; /* Занимает полную высоту */
	background-color: #fff; /* Цвет фона */
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); /* Тень для эффекта выдвижения */
	z-index: 1000; /* Положение над остальными элементами */
	transform: translateX(100%); /* Исходно сдвинуто за пределы экрана */
	transition: transform 0.3s ease; /* Плавное анимированное появление */
}

.side-menu.active {
	transform: translateX(0); /* Появляется на экране при активации */
}

.side-menu-inner {
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 50px;
	text-align: center;
}

.side-menu-inner a {
	width: 100%;
}

/* Стили для закрытия меню */
.close-menu {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	font-size: 34px;
	color: #555;
}

/* Стили для затемнения заднего плана */
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* полупрозрачный черный цвет */
	z-index: 999; /* позволяет слою быть выше других элементов, кроме меню */
	display: none; /* изначально скрыт */
}