.custom-slider {

	position: relative;

	width: 100vw;

	height: 60vh;

	/*max-height: 500px;*/ 

	margin: 0;

	overflow: hidden;

	touch-action: pan-y;

	box-shadow: rgb(0 0 0 / 31%) 0px 10px 20px, rgb(0 0 0 / 25%) 0px 6px 6px !important;

}

@media (max-width: 768px) {

.custom-slider {

	width: 100% !important;

	height: 23vh;

	/*max-height: 200px !important;*/

}

}

.slider-container {

	position: relative;

	width: 100%;

	height: 100%;

}

.slide {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	text-align: center;

	opacity: 0;

	transform: scale(1.1); 

	transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;

	z-index: 0;

}

.slide img {

	width: 100%;

	height: 100%;

	object-fit: cover; 

}

.slide.active {

	opacity: 1; 

	transform: scale(1); 

	z-index: 1; 

}

button.prev, button.next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(0, 0, 0, 0.5);

    color: #e9e9e9;

    border: none;

    padding: 5px;

    cursor: pointer !important;

    z-index: 10;

    border-radius: 50%;

}

button.prev {

	left: 10px;

}

button.next {

	right: 10px;

}

button.prev:hover, button.next:hover {

	background-color: rgba(0, 0, 0, 0.8);

}

.slider-dots {

	position: absolute;

	bottom: 20px;

	left: 50%;

	transform: translateX(-50%);

	display: flex;

	gap: 10px;

	z-index: 10;

}

.slider-dots .dot {

	width: 10px;

	height: 10px;

	border-radius: 50%;

	background-color: rgba(255, 255, 255, 0.5);

	cursor: pointer;

}

.slider-dots .dot.active {

	background-color: rgba(255, 255, 255, 0.9);

}

.icon-arrow {

	font-size:50px !important;

}

@media (max-width: 768px) {

.icon-arrow {

	font-size:25px !important;

}

}