.slider {
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
	justify-content: center;
	gap: 20px;
	.slider-nav {
		display: flex;
		position: absolute;
		background-image: url('../images/left-chevron.png');
		background-repeat: no-repeat;
		background-size: cover;
		height: 40px;
		width: 40px;
		cursor: pointer;
	}
	#back {
		left: -50px;
	}
	#foreward {
		right: -50px;
		transform: rotate(180deg);
	}
	.dot-nav-container {
		display: inline-flex;
		gap: 10px;
		.dot-nav {
			display: flex;
			background-color: #fff;
			width: 10px;
			height: 10px;
			border-radius: 5px;
			cursor: pointer;
		}
		.dot-nav.active {
			background-color: #000;
		}
	}
	.slide-container {
		display: flex;
		width: 100%;
		.slide {
			display: flex;
			overflow: hidden;
			position: absolute;
			opacity: 0;
			width: 0;
			transition: opacity linear 0.2s;
		}
		.slide.active {
			position: relative;
			opacity: 1;
			width: 100%;
			transition: opacity linear 0.5s;
		}
		#upload,
		#fill,
		#get-price {
			display: flex;
			.image {
				display: flex;
				max-width: 50%;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
			}
			.text {
				display: flex;
				max-width: 50%;
				padding: 0 50px;
				overflow: scroll;
				justify-content: center;
				background-color: #fff;
				color: #000;
				border-top-right-radius: 40px;
				border-bottom-right-radius: 40px;
			}
		}
		#upload {
			.image {
				background-image: url('../images/upload.jpg');
			}
		}
		#fill {
			.image {
				background-image: url('../images/fill.jpg');
			}
		}
		#get-price {
			.image {
				background-image: url('../images/get-price.jpg');
			}
		}
	}
}