:root {
	--dl-color-gray-700: #687aab;
	--dl-color-gray-900: #a3c5c9ff;
	--dl-size-size-unit: 1rem;
	--dl-color-gray-black: #000000;
	--dl-color-gray-white: #FFFFFF;
	--dl-color-pimary-300: #0284c7ff;
	--dl-color-pimary-500: #4aa4e3ff;
	--dl-color-pimary-700: #c3e5faff;
	--dl-color-pimary-800: #e3e8efff;
	--dl-color-pimary-900: #f2f5f9ff;
	--dl-space-space-unit: 1rem;
	--dl-size-size-halfunit: 0.5rem;
	--dl-color-secondary-100: #111729ff;
	--dl-color-secondary-300: #1e293bff;
	--dl-color-secondary-400: #334155ff;
	--dl-color-secondary-500: #677b8eff;
	--dl-color-secondary-700: #a4a3b8ff;
	--dl-radius-radius-round: 50%;
	--dl-size-size-doubleunit: 2rem;
	--dl-size-size-tripleunit: 3rem;
	--dl-space-space-halfunit: 0.5rem;
	--dl-radius-radius-radius4: 4px;
	--dl-space-space-fiveunits: 5rem;
	--dl-radius-radius-radius25: 0.25rem;
	--dl-radius-radius-radius50: 0.5rem;
	--dl-radius-radius-radius75: 0.75rem;
	--dl-space-space-doubleunit: 2rem;
	--dl-space-space-tripleunit: 3rem;
	--dl-space-space-twoandhalf: 2.5rem;
	--dl-space-space-unitandhalf: 1.5rem;
	--dl-space-space-triplequarter: 0.75rem;
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
	font-weight: 300;
	font-style: normal;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.75;
	color: var(--dl-color-gray-900);
	background-color: var(--dl-color-gray-white);

}

.page {
	width: 100%;
	height: auto;
	display: flex;
	min-height: 100vh;
	align-items: flex-start;
	flex-direction: column;
	background-color: #f2f5f9;
}

.header {
	flex: 0 0 auto;
	width: 100%;
	height: 240px;
	display: flex;
	position: relative;
	align-items: center;
	flex-direction: column;
	opacity: 1;
	background-color: #528664;
	top: auto;
	left: auto;
	right: 0px;
	justify-content: center;
}

.logo {
	flex: 0 0 auto;
	height: 107px;
	position: relative;
	top: -10px;
}

.slope {
	right: 0px;
	bottom: 0px;
	position: absolute;
	object-fit: cover;
}

.section {
	flex: 0 0 auto;
	width: 100%;
	display: flex;
	position: relative;
	align-items: center;
	padding-left: var(--dl-space-space-doubleunit);
	padding-right: var(--dl-space-space-doubleunit);
	flex-direction: column;
}

.title {
	color: #528664;
	font-size: 0.875em;
	font-style: normal;
	font-family: Noto Sans;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	padding-bottom: 3.5em;
}

.cards-container {
	display: flex;
	margin-top: -1.5em;
	align-items: flex-start;
	margin-left: -1.5em;
	margin-right: -1.5em;
	flex-direction: row;
	padding-bottom: 3.5em;
	justify-content: space-between;
}

.card {
	flex: 0 0 auto;
	width: 200px;
	height: 214px;
	margin-inline: 20px;
	cursor: pointer;
	display: flex;
	padding: var(--dl-space-space-unit);
	box-shadow: none;
	transition: 0.3s;
	align-items: center;
	border-radius: var(--dl-radius-radius-radius50);
	flex-direction: column;
	background-color: var(--dl-color-gray-white);
}

.card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.icon {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	display: flex;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	align-items: center;
	border-radius: var(--dl-radius-radius-round);
	flex-direction: column;
	justify-content: center;
}

.pictogram {
	fill: #ffffff;
	width: 32px;
	height: 32px;
}

.gray {
	background-image: linear-gradient(180deg, rgba(187, 187, 187, 0.8) 0.00%, rgba(98, 98, 98, 0.8) 100.00%);
}

.purple {
	background-image: linear-gradient(180deg, rgba(203, 110, 249, 0.8) 0.00%, rgba(125, 34, 144, 0.8) 99.00%);
}

.green {
	background-image: linear-gradient(180deg, rgba(45, 202, 146, 0.8) 0.00%, rgba(9, 156, 110, 0.8) 100.00%);
}

.blue {
	background-image: linear-gradient(180deg, rgba(48, 181, 241, 0.8) 1.00%, rgba(6, 136, 203, 0.8) 100.00%);
}

.orange {
	background-image: linear-gradient(180deg, rgba(236, 197, 48, 0.8) 1.00%, rgba(218, 167, 19, 0.8) 99.00%);
}

.card-title {
	color: var(--dl-color-secondary-100);
	margin-top: var(--dl-space-space-unit);
	text-align: center;
	font-family: Open Sans;
	font-size: 1.25rem;
	font-weight: 400;
	text-transform: none;
	text-decoration: none;
}

.card-description {
	color: var(--dl-color-secondary-700);
	font-size: 1rem;
	margin-top: var(--dl-space-space-halfunit);
	text-align: center;
	font-family: Noto Sans;
	line-height: 1.625rem;
}