.useful_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
}

.useful_header h2 {
	margin: 0;
}

.userful_tab-container {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 40px;
}

.userful_tab-item {
	font-family: var(--font-family);
	font-size: 18px;
	text-transform: uppercase;
	color: var(--text_color);
	text-decoration: none;
	transition: .4s ease-out;
}

.userful_tab-item:hover,
.userful_tab-item.active {
	color: var(--main_color);
	transition: .4s ease-out;
}

.useful_container {
	position: relative;
	overflow: hidden;
	padding-top: 90px;
}

.useful_list-item {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.useful_list-item img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 39/50;
}

.useful_list-item h4 a {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 130%;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text_color);
}

.useful_list-item .useful-item_text {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 14px;
	line-height: 130%;
	color: var(--text_color);
}

.useful-item_info {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 12px;
	color: #fff;
	display: flex;
	gap: 12px;
}


.useful-item_info-view,
.useful-item_info-time,
.useful-item_info-date {
	display: flex;
	gap: 5px;
	align-items: center;
}


.useful-item_info-view::before {
	content: url('/local/templates/flowers/images/icons/eye.svg');
	/* width: 24px;
	height: 24px; */
	display: block;
}

.useful-item_info-time::before {
	content: url('/local/templates/flowers/images/icons/time.svg');
	/* width: 24px;
	height: 24px; */
	display: block;
}

.useful-item_info-date::before {
	content: url('/local/templates/flowers/images/icons/Calendar1.svg');	
	/* width: 24px;
	height: 24px; */
	display: block;
}

.useful .useful_list-item.swiper-slide {
	transition: transform 0.3s ease;
	user-select: none;
}

.useful .useful_list-item.swiper-slide h4,
.useful .useful_list-item.swiper-slide p {
	margin: 0;
}

.useful .useful_list-item.swiper-slide-active {
	transform: translateY(-90px);
	z-index: 10;
}

.preloader_container {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	z-index: 100;
}

.preloader {
	width: 60px;
	height: 60px;
	background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.6"><path d="M30 55C32.7614 55 35 52.7614 35 50C35 47.2386 32.7614 45 30 45C27.2386 45 25 47.2386 25 50C25 52.7614 27.2386 55 30 55Z" fill="white" /><path d="M30 15C32.7614 15 35 12.7614 35 10C35 7.23858 32.7614 5 30 5C27.2386 5 25 7.23858 25 10C25 12.7614 27.2386 15 30 15Z" fill="white" /><path d="M15.8574 49.1426C18.6188 49.1426 20.8574 46.904 20.8574 44.1426C20.8574 41.3812 18.6188 39.1426 15.8574 39.1426C13.096 39.1426 10.8574 41.3812 10.8574 44.1426C10.8574 46.904 13.096 49.1426 15.8574 49.1426Z" fill="white" /><path d="M44.1426 20.8574C46.904 20.8574 49.1426 18.6188 49.1426 15.8574C49.1426 13.096 46.904 10.8574 44.1426 10.8574C41.3812 10.8574 39.1426 13.096 39.1426 15.8574C39.1426 18.6188 41.3812 20.8574 44.1426 20.8574Z" fill="white" /><path d="M10.0001 35.0026C12.7629 35.0026 15.0026 32.7629 15.0026 30.0001C15.0026 27.2373 12.7629 24.9976 10.0001 24.9976C7.23725 24.9976 4.99756 27.2373 4.99756 30.0001C4.99756 32.7629 7.23725 35.0026 10.0001 35.0026Z" fill="white" /><path d="M50 35C52.7614 35 55 32.7614 55 30C55 27.2386 52.7614 25 50 25C47.2386 25 45 27.2386 45 30C45 32.7614 47.2386 35 50 35Z" fill="white" /><path d="M15.8574 20.8599C18.6188 20.8599 20.8574 18.6213 20.8574 15.8599C20.8574 13.0984 18.6188 10.8599 15.8574 10.8599C13.096 10.8599 10.8574 13.0984 10.8574 15.8599C10.8574 18.6213 13.096 20.8599 15.8574 20.8599Z" fill="white" /><path d="M44.1426 49.145C46.904 49.145 49.1426 46.9064 49.1426 44.145C49.1426 41.3836 46.904 39.145 44.1426 39.145C41.3812 39.145 39.1426 41.3836 39.1426 44.145C39.1426 46.9064 41.3812 49.145 44.1426 49.145Z" fill="white" /></g></svg>');
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50%, -50%;
	animation: rotate 2s infinite;
}

@keyframes rotate {
	0% {
		rotate: 0;
	}

	50% {
		rotate: 180deg;
	}

	100% {
		rotate: 3600deg;
	}
}


@media(max-width: 1024px) {

	.useful_container {
		padding-top: 0;
	}

	.useful .useful_list-item.swiper-slide-active {
		transform: translateY(0);
	}
}