/* CSS Styles */
html,body {
	margin:0;
	padding:0;
	background-color:#1a1a1a;
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:"wdth" 100;
}
.slider {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:970px;
	height:250px;
	overflow:hidden;
	color:#ffffff;
	background-color:#000000;
	font-family:'peugeot-regular', sans-serif;
	user-select:none;
}
.slider-menu {
	position:absolute;
	display:flex;
	flex-direction:column;
	left:0px;
	top:50%;
	transform:translateY(-50%);
	z-index:4;
	gap:1px;
}
.slider-menu-item {
	display:flex;
	gap:8px;
	align-items:center;
	height:40px;
	background-color:#ffffff;
	transition:all ease-in-out .1s;
	white-space:nowrap;
	font-size:11px;
	color:#002d74;
	padding:0 16px;
}
.slider-menu-item.active,
.slider-menu-item:hover {
	transform:scale(1.1);
	cursor:pointer;
	background-color:#002d74;
	z-index:2;
	color:#ffffff;
}
.slider-menu-item:hover {
	background-color:#82bc00;
}
.slider-menu-item.active img,
.slider-menu-item:hover img {
	filter:invert(1);
}
.slider-menu-item img {
	display:inline-block;
	width:14px;
	height:14px;
	object-fit:contain;
	margin:8px auto;
}
.slides {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:all ease-in-out .2s;
}
.slide {
	position:relative;
	width:100%;
	height:100%;
}
.slide-content {
	position:relative;
	width:100%;
	height:100%;
	z-index:2;
}
.slide-background {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
}
.slide-background img {
	position:absolute;
	left:0;
	top:0;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.logo {
	position:absolute;
	top:8px;
	right:8px;
	aspect-ratio:172/32;
	height:32px;
	box-sizing:border-box;
	background-color:#ffffff;
	outline:8px solid #ffffff;
	z-index:3;
}
.btn-cta {
	position:absolute;
	left:140px;
	bottom:46px;
	width:auto;
	display:inline-block;
	padding:12px 16px;
	font-size:11px;
	font-weight:600;
	text-decoration:none;
	color:#ffffff;
	border-radius:10px;
	outline:2px solid #ffffff;
	
	background-color:#82bc00;
	transition:ease-in-out .25s;
}
.btn-cta:hover {
	background-color:#61ce70;
}
.services {
	position:absolute;
	left:140px;
	top:56px;
	width:800px;
	display:flex;
	flex-wrap:wrap;
	gap:2px;
	justify-content:center;
}
.service {
	width:142px;
	font-size:11px;
	padding:4px 8px;
	background-color:#00000077;
	border-radius:8px;
	text-align:center;
	white-space:nowrap;
	transition:all ease-in-out .2s;
}
.service.active,
.service:hover {
	background-color:#002d74;
	transform:scale(1.1);
	z-index:1;
}
.service-image-bg {
	opacity:0;
	transition:all ease-in-out .2s;
}
.service-image-bg.active {
	opacity:1;
}