html,
body {
	font-family: Arial, sans-serif;
	height: 100%;
	margin: 0;
}
.carou-xial {
	/* Height of the slides */
	--height: 450px;
	/* This will hide or show the nav buttons. Use none or flex */
	--show-nav: flex;
	--content-padding: 16px;
	--nav-button-gap: 4px;
	/* This will hide or show the scrollbar. Use hidden or auto */
	--show-scrollbar: hidden;
	--overlay-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	overflow: hidden;
	background: #004d86;
	position: relative;
	display: block;
}
.carou-xial img {
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.carou-xial .slides {
	display: flex;
	overflow-x: var(--show-scrollbar, auto);
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
.carou-xial .slides::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.carou-xial .slides::-webkit-scrollbar-thumb {
	background: black;
	border-radius: 10px;
}
.carou-xial .slides::-webkit-scrollbar-track {
	background: transparent;
}
.carou-xial .slides .slide {
	scroll-snap-align: start;
	flex-shrink: 0;
	width: 100%;
	height: var(--height);
	background: #eee;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.carou-xial .slides .slide-bg:after {
	content: '';
	background: var(--overlay-color);
	position: absolute;
	inset: 0;
}
.carou-xial .slides .slide-content {
	font-size: 100px;
	color: white;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--content-padding);
}
@media (max-width: 767px) {
	.carou-xial .slides .slide-content {
		font-size: 50px;
	}
}
.carou-xial .carou-xial-nav {
	display: var(--show-nav, flex);
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 24px;
	width: 100%;
	gap: var(--nav-button-gap, 4px);
}
.carou-xial .carou-xial-nav button {
	display: inline-flex;
	border: none;
	width: 1.5rem;
	height: 1.5rem;
	background: white;
	color: black;
	text-decoration: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 0 0 0.5rem 0;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
.carou-xial .carou-xial-nav button:hover {
	background: #e7e7e7;
}
.carou-xial .carou-xial-nav button.visible {
	background: #000000;
	color: white;
}