.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: 17vh !important;


	/*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;


}


}