/* Wrapper */

.slider-button-wrapper {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 0px auto -30px auto;
	max-width: 1200px;
	padding-right: 20px;
}

.slider-button-wrapper svg {

	width: 20px;
}


#left {

	-webkit-transform: scaleX(1);
	transform: scaleX(1);

	transition: background-color 0.3s ease;
}

#right {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);

	transition: background-color 0.3s ease;
}

#left path,
#right path {
	transition: fill 0.02s ease;
	/* smooth fade of 0.2 seconds */
}


#left:hover {
	transform: scale(1.1);
}

#right:hover {
	transform: scale(-1.1);

}

.some-container {
	/* display: flex; */
	/* flex-direction: column; */
	/* gap: 100px; */
	margin-bottom: 100px;
	margin: 40px auto 40px auto;
}



.slider-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 1200px;
	padding: 20px 0;
	margin: 40px auto 0 auto;
	/* Remove bottom margin */
	border-radius: 12px;
	/* border-right: 1px solid black; */
}

/* Track */
.slider-track {
	display: flex;
	gap: 20px;
	padding-bottom: 10px;
	cursor: grab;
	scroll-behavior: smooth;
	transition: transform 0.3s ease;
}

/* Card */
.image-card-container {
	flex: 0 0 auto;
	width: 80vw;
	max-width: 300px;
	max-height: 300px;
	height: 400px;
	/* height: fit-content; */
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	border: 1px solid #f0f0f0;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;


	overflow-y: scroll;
}

/* Card hover effect for desktop */
/* Titles */
.image-card-container h2 {
	font-family: 'Poppins', sans-serif;
	font-size: 1.3rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 10px;
}

/* Descriptions */
.image-card-container p {
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	color: #666;
	line-height: 1.5;
	margin-top: 10px;
	/* overflow: scroll; */
}

/* Images */
.image-card-container img {
	max-width: 100%;
	height: auto;
	max-height: 90%;
	border-radius: 8px;
	border: 1px solid #eee;
	margin-bottom: 10px;
	transition: transform 0.3s ease;

}

@media (width >=700px) {

	/* .image-card-container img:hover { */
	/* 	transform: scale(1.05); */
	/* } */
	.image-card-container:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
		background-color: #fffcf5;
		/* black background */
	}

	.image-card-container:hover h2,
	.image-card-container:hover p {
		/* color: #fff; */
		/* white text */
	}

	.image-card-container:hover img {
		filter: brightness(0.8);
		/* darken the image slightly */
		border-color: #444;
		/* optional: darker border */
	}

}

@media (width >=1200px) {
	.image-card-container {
		width: 80vw;
		max-width: 400px;
		max-height: 500px;
	}


	.image-card-container img {
		max-width: 100%;
	}
}