body.light-mode {
	background-color: #fff;
	color: #212529;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	opacity: 0.9;
	box-shadow: 0em 0.4em 5px rgba(122, 122, 122, 0.5);
}

header.light-mode {
	background-color: #007bff;
}

.nav-item {
	color: #007bff;
	text-decoration: none;
	border-radius: 0.3rem;
	padding: 0.6rem 0.75rem;
	margin-top: 3px;
	margin-top: 3px;
	border-radius: 0.3rem;
}

.nav-item-on {
	border: 1px solid #0d6efd;
	text-decoration: none;
	background-color: #0d6efd;
	padding: 0.6rem 0.75rem;
	color: #fff;
	border-radius: 0.3rem;
	margin-top: 3px;
	margin-top: 3px;
}

.nav-item:hover {
	border: 1px solid #0d6efd;
	background-color: #0d6efd;
	padding: 0.5rem 0.75rem;
	color: #fff;
	/* border-radius: 0.3rem; */
	transition: all 0.3s; /* Добавьте переход на все свойства */
}

.fade-in {
	opacity: 1;
	transition: opacity 0.1s ease-in;
}

.fade-out {
	opacity: 0;
	transition: opacity 0.1s ease-out;
}


@media (max-width: 768px) {
	.my-img {
		width: 300px;
		padding: 0;
		margin-top: 0;
		display: inline-block;
		text-align: center;
	}

	.my-text {
		font-size: 18px;
	}
	.my-center-img {
		text-align: center;
	}
}

.carousel:not(:hover) .carousel-control-prev,
.carousel:not(:hover) .carousel-control-next {
	opacity: 0;
	transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
	opacity: 1;
	transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
}