@keyframes slideDown {
	0% {
		transform: translateY(-100%);
		opacity: 0.3;
	}
	100% {
		transform: translateY(0);
		opacity: 0.75; /* You can adjust opacity if needed */
	}
}

.item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #3d3d3d;
	opacity: 0; /* Hidden by default */
	z-index: 1; /* On top of the image but below the text */
	animation: slideDown 4s ease forwards;
}

.item .slider-content {
	position: relative;
	z-index: 2; /* To ensure text is on top */
}

.item {
	position: relative;
}