.carousel-container {
	position: relative;
}

.slider {
	overflow: hidden;
}

.slides {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.slide {
	min-width: 100%;
	margin: 0;
	padding: 0;
}

.dots-container {
	position: absolute;
	top: 50%;
	right: 50px;
	transform: translateY(-50%);
}

.dot {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #bbb;
	margin: 0 5px;
	cursor: pointer;
}

.dot.active {
	background-color: #717171;
}

.slide img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/* Media Query for Mobile */
@media (max-width: 767px) {
	.dots-container {
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		flex-direction: row; /* revert to horizontal layout on larger screens */
	}
	.dot {
		width: 10px;
		height: 10px;
	}
}