.carousel{
height: 500px;
min-height: 20vh;
overflow: hidden;
position: relative;
justify-content: start;
width: 100%;
object-fit: contain;

}

.slide {
    min-width: 100%; /* Each slide is exactly one 'window' wide */
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide img {
    width: 50%; /* Keeps the image from touching the edges */
    height: auto;
    object-fit: contain; /* Ensures the whole image (and placard text) is visible */
    border-radius: 8px; /* Optional: adds a nice look */
    flex-shrink: 0;
}






.carousel .slides {
position: relative;
width: 100%;
height: 100%; /*fixed images not displaying properly*/
}


.carousel .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.5s ease;
}



.carousel .slide.moving {
	transition: all 0.3s;
}

.carousel .slide.left,
.carousel .slide.right,
.carousel .slide.center{

	opacity: 1;

}



.carousel .slide.center{
	transform: translateX(0);
	opacity: 1;
	z-index: 2;
}

.carousel .slide.left{
	transform: translateX(-100%);
}

.carousel .slide.right{
	transform: translateX(100%);
}




.carousel .controls {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
	z-index: 5;
}

/*go inside carousel and find any class that contains control- */
.carousel [class*='control-']{
	pointer-events: initial;
}

.carousel .control-left,
.carousel .control-right{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 1rem;
	font-size: 2em;
	color: #3d4234;
}

.carousel .control-left{
	left: 1rem;
}

.carousel .control-right{
	right: 1em;
}

.carousel .control-pagination{
	display: flex;
	position: absolute;
	bottom: 1em;
	left: 50%;
	transform: translateX(-50%);
	color:#3d4234;
}

.carousel .control-dot{
	padding: 1rem;
	font-size: 2em;
	line-height: 1rem;
	transition: 0.3s;
	position: relative;
	justify-content: center;
	transform: scale(1, 1);
}

.carousel .control-dot.active{

transform: scale(1.5, 1.5);
color: whitesmoke;
}


.carousel .control-dot,
.carousel .control-left,
.carousel .control-right{
	cursor: pointer;
}