@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");

*,
*:before,
*:after {
	box-sizing: border-box;
}


#features {
	scroll-behavior: smooth;
	margin-left: auto;
	margin-right: auto;
	width: 85%;
}

/* Some basic CSS overrides */
.features {
	line-height: 1.5;
	min-height: 100vh;
}


.features button,
.features input,
.features select,
.features textarea {
	font: inherit;
}

.features .section_header h1 {
	color: var(--navy-blue);
	font-family: "Amatic SC", sans-serif;
	font-weight: 900;
}

.features a {
	color: inherit;
}

.features img {
	display: block;
	max-width: 100%;
}

/* End basic CSS override */

.features .timeline {
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	padding: 32px 0 32px 32px;
	border-left: 4px solid var(--navy-blue);
	font-size: 1.25rem;
	margin-bottom: -3rem;
}


.features .timeline-item {
	display: flex;
	gap: 24px;
	width: 100%;
}

.features .timeline-item+* {
	margin-top: 24px;
}

.features .timeline-item+.extra-space {
	margin-top: 48px;
}

.features .timeline-item:hover .card {
	border-color: var(--emerald);
	box-shadow: 0 4px 4px 0 var(--emerald-light);
	color: var(--emerald);
}

.features .timeline-item:hover .card .button {
	border-color: var(--emerald-light);
	color: var(--emerald-light);
}

.features .timeline-item:hover .card .button .hover-emerald {
	filter: brightness(0) saturate(100%) invert(55%) sepia(4%) saturate(6920%) hue-rotate(132deg) brightness(101%) contrast(83%);
}

.features .timeline-item:hover .icon {
	filter: brightness(0) saturate(100%) invert(55%) sepia(4%) saturate(6920%) hue-rotate(132deg) brightness(101%) contrast(83%);
}

.features .timeline-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-left: -52px;
	flex-shrink: 0;
	overflow: hidden;
	background-color: var(--background);
	box-shadow: 0 0 0 8px var(--background);
	margin-top: 24px;
}

.features .timeline-item-icon img {
	width: 35px;
	height: 35px;
	filter: brightness(0) saturate(100%) invert(29%) sepia(50%) saturate(620%) hue-rotate(161deg) brightness(93%) contrast(95%);
	/* https://isotropic.co/tool/hex-color-to-css-filter/  */
}

.features .card {
	color: var(--navy-blue-light);
	border: 3px solid var(--navy-blue);
	box-shadow: 0 4px 4px 0 var(--navy-blue-light);
	border-radius: 6px;
	padding: 16px;
	font-weight: 600;
	width: 100%;
}



.features .card h1 {
	padding: 0;
	margin: 0;

	font-family: "Amatic SC", sans-serif;
	font-weight: 900;
	font-size: 2.5rem;
	font-optical-sizing: auto;
	font-style: normal;
}

.features .card h2 {
	padding: 0;
	margin: 0;

	font-weight: 700;
	font-size: 1.25rem;
	font-optical-sizing: auto;
	font-style: italic;
}

.features .card p {
	margin-top: 4px;
	color: var(--offwhite);
}

.features .card .simple {
	display: none;
}

.features a {
	color: var(--background);
}

.features .button {
	border: 0;
	padding: 0;
	display: inline-flex;
	vertical-align: middle;
	margin-right: 4px;
	align-items: center;
	justify-content: center;
	height: max-content;
	padding: 4px 12px;

	border: 5px solid var(--navy-blue);
	border-radius: 15px;
	background-color: var(--background);
	color: var(--navy-blue);
	flex-shrink: 0;
	cursor: pointer;

	font-weight: 400;
	font-size: 1.25rem;
	font-optical-sizing: auto;
}

.features .button img {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0px 16px 0px 8px;
	filter: brightness(0) saturate(100%) invert(29%) sepia(50%) saturate(620%) hue-rotate(161deg) brightness(93%) contrast(95%);
}

.features .button:hover {
	border-color: var(--emerald) !important;
	color: var(--emerald) !important;
	font-weight: 700;
}

.features .button:hover .hover-emerald {
	filter: brightness(0) saturate(100%) invert(55%) sepia(4%) saturate(6920%) hue-rotate(132deg) brightness(101%) contrast(83%);
}

.features .button:hover .icon {
	filter: brightness(0) saturate(100%) invert(55%) sepia(4%) saturate(6920%) hue-rotate(132deg) brightness(101%) contrast(83%);
}

@media (max-width: 1200px) {

	.features .timeline {
		width: 95%;
		max-width: 90%;
	}

	.features .card h1 {
		font-size: 2.4rem;
	}

	.features .card h2 {
		font-size: 1.75rem;
	}

	.features .card .detailed {
		display: none;
	}

	.features .card .simple {
		font-size: 0.9rem;
		display: block;
	}

	.features .button {
		margin-top: 0.75rem;
		font-size: 1.75rem;
	}

	.features .button img {
		display: none;
	}
}