.swiper-slide {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	opacity: 0.4;
	background: #fff;
}

.swiper-slide-active {
	opacity: 1;
	z-index: 10;
	background: #fff;
}

.swiper-button-next,
.swiper-button-prev {
	@apply text-gray-800 dark:text-gray-200; /* Text color */
	@apply shadow-md; /* Add a subtle shadow */
	@apply rounded-full; /* Circular shape */
	@apply w-5 h-5; /* Half the size (overrides Swiper's size) */
	@apply flex items-center justify-center; /* Center the icon */
	@apply bg-white bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75; /* Background */
	@apply hover:bg-opacity-100 dark:hover:bg-opacity-100; /* Hover effect */
	@apply transition-colors duration-200; /* Smooth background transition */
	@apply focus:outline-none focus:ring-2 focus:ring-green-500; /* Focus style */
	@apply !absolute !top-1/2 !transform !-translate-y-1/2; /* Positioning - IMPORTANT! */
}

.swiper-button-next::after,
.swiper-button-prev::after {
	@apply text-xl; /* Adjust arrow size */
	font-size: 1.5rem !important; /* Adjust arrow size */ /* !important is needed to override swiper.min.css */
}

.swiper-button-prev {
	@apply !left-3; /* Adjust position */
}

.swiper-button-next {
	@apply !right-3; /* Adjust position */
}