
@keyframes featuresSlideUp {
	0%, 30% {
		transform: translateY(120px);
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	100% {
	}
}
@media screen and (orientation: landscape) and (min-height: 720px) {
	.features {
		animation: 0.5s ease-in-out 0s 1 featuresSlideUp;
	}
}

$IS_DARK_THEME: ":root[data-theme='dark']";

.features {
	--page-card-border-color: #1B1B1B;
	--page-card-bgc: #E2ECFF;
	--page-card-hover-bgc: #f0f5ff;
}

#{$IS_DARK_THEME}
.features {
	--page-card-border-color: black;
	--page-card-bgc: #00050F;
	--page-card-hover-bgc: #00253a;
}

.features {
	width: 100%;
	margin-top: 50px;
	margin-bottom: 40px;
	display: flex;
	flex: 0 0 1fr;
	justify-content: space-between;
	max-width: 680px;
	flex-direction: row;
	flex-wrap: wrap;
}

$iconSize: 48px;
.pageCardSvg>img {
	height:	$iconSize;
	width:	$iconSize;
}

////////////////////////
// White mode
////////////////////////

.pageCard {

	display: flex;
	margin-bottom: 20px;
	height: 100px;


	// Variables set up
	&:nth-child(1)>.pageCardInner {
		--bg-gradient-color-inner: rgba(146, 255, 164, 0.9);
		--bg-gradient-color-outer: rgba(146, 255, 164, 0.9);
	}
	&:nth-child(2)>.pageCardInner {
		--bg-gradient-color-inner: rgba(180, 159, 255, 0.9);
		--bg-gradient-color-outer: rgba(180, 159, 255, 0.9);
	}
	&:nth-child(3)>.pageCardInner {
		--bg-gradient-color-inner: rgba(255, 194, 159, 0.9);
		--bg-gradient-color-outer: rgba(255, 194, 159, 0.9);
	}
	&:nth-child(4)>.pageCardInner {
		--bg-gradient-color-inner: rgba(159, 236, 255, 0.9);
		--bg-gradient-color-outer: rgba(159, 236, 255, 0.9);
	}

	// Properties
	cursor: pointer;

	&:not(:last-child)
	{
		// margin-right: 20px;
	}

	&:not(:hover) .pageCardSvg {
		// display: none;
	}

	&:not(:hover) .pageCardSvg {
		.normalIcon {
			display: inline;
		}
	}

	&:hover>.pageCardInner {
		background-color: var(--page-card-hover-bgc);
	}
}

.pageCardInner
{
	// Sizing
	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: 0px 40px;
	min-width: calc(min(150px,25vw));
	width: 100%;
	height: 100%;
	position: relative;

	// Colors
	background-color: var(--page-card-bgc);
	border-radius: 10px;
	border: 1px solid var(--page-card-border-color);


	.pageCardSvg {
		text-align: center;
		// margin-bottom: 10px;
	}
	
	.pageCardSvg .hoverIcon {
		display: none;
	}
	
	.pageCardText {
		color: black;
		text-align: center;
		// font-family: var(--font-inter);
		font-weight: normal;
		font-size: 18px;
		>p {
			margin: 0;
			padding: 0;
			line-height: 100%;
		}
	}

	transition: background-color 0.1s, transform 0.1s;

	box-sizing: border-box;
}


@media (max-width: 800px) {

// .featuresContainer {
// 	justify-content: space-evenly;
// 	width: 100%;
// }

// .pageCard:not(:last-child) {
// 	margin-right: 0;
// }

}

@media (max-width: 900px) {
.featuresContainer {
	flex-wrap: wrap;
	width: 90%;
}
.pageCard {
	width: 45%;
	&>.pageCardInner {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	&:nth-child(1), &:nth-child(2) {
		margin-bottom: 20px;
	}
}

}

@media (max-width: 600px) {

.pageCard {
	width: 100%;
	margin: 0;
	&:not(:last-child) {
		margin-bottom: 20px;
	}
}

}

////////////////////////
// Dark mode
////////////////////////
html[data-theme='dark']
{

.pageCard {
	&:nth-child(1)>.pageCardInner {
		// --outline-color-primary: rgba(9, 75, 129, 0.8);
		// --outline-color-secondary: rgba(20, 35, 68, 0.7);

		--outline-color-hover-primary: rgb(0, 123, 255);
		--outline-color-hover-secondary: rgb(7, 11, 123);
	}
	
	&:nth-child(2)>.pageCardInner {
		// --outline-color-primary: rgba(4, 133, 4, 0.6);
		// --outline-color-secondary: rgba(8, 139, 30, 0.5);

		--outline-color-hover-primary: rgb(30, 184, 30);
		--outline-color-hover-secondary: rgb(3, 116, 22);
	}
	
	&:nth-child(3)>.pageCardInner {
		// --outline-color-primary: rgba(109, 23, 83, 0.6);
		// --outline-color-secondary: rgba(136, 20, 97, 0.5);

		--outline-color-hover-primary: rgb(196, 63, 156);
		--outline-color-hover-secondary: rgb(121, 3, 82);
	}
	
	&:nth-child(4)>.pageCardInner {
		// --outline-color-primary: rgba(80, 52, 26, 0.8);
		// --outline-color-secondary: rgba(95, 62, 34, 0.7);

		--outline-color-hover-primary: rgb(156, 105, 58);
		--outline-color-hover-secondary: rgb(91, 43, 1);
	}
}

.pageCardInner {
	--border-color: rgba(200, 200, 200, 0.2);

	.pageCardText {
		color: rgb(244, 244, 244);
		text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
	}

	.pageCardSvg img {
		filter: drop-shadow(4px 4px 1px rgba(0, 0, 0, 0.3));
	}	
}

.overview {
	background: none;
	background-color: rgba(black, 0.80);
	border-top: none;
	backdrop-filter: contrast(150%) blur(8px);
	margin-top: 100px;

	&:nth-child(4) {
		border-top: none;
		
		background-color: rgb(22, 22, 32);
	}
	&:nth-child(odd) {
		backdrop-filter: contrast(100%) blur(20px);
		background-color: rgba(0,0,0, 0.20);
	}
}

}

.overview {
	// backdrop-filter: blur(16px) opacity(95%);

	// background: linear-gradient(180deg, rgb(243, 243, 243) 10%, white 30%);
	// background-color: rgb(243, 243, 243);
	border-top: 1px solid gray;
	&:nth-child(3) {
		border-top: none;
		background: linear-gradient(180deg, rgba(white,1) 24%, rgb(250, 250, 250) 61%, white 92%);
	}

	display: flex;
	align-items: center;
	min-height: 600px;
 	background-color: rgb(245, 245, 245);
	p, h1, h2, h3 { font-family: var(--font-inter); }
	figure {
		display: flex;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		max-height: 350px;
		width: 45%;
		align-items: center;
	}
	img, video {
		display: block;
		width: 100%;
		height: auto;
	}
	.actionButton {
		display: inline-block;
		color: white;
		text-decoration: none;
		margin-top: 10px;
		padding: 15px 30px;
		border: none;
		border-bottom: 3px solid blue;
		border-radius: 2px;
		box-sizing: border-box;
		background-color: rgb(0, 119, 255);
		transition: 0.2s;
		&:hover {
			background-color: rgb(52, 133, 255);
		}
	}
}

@media (min-width: 901px) {

.overview:nth-child(even) {
	.overviewContent {
		h1 { text-align: right; }
	}
	.overviewContainer {
		flex-direction: row-reverse;
	}
}

}

.overviewContainer {
	display: flex;
	justify-content: space-between;
	padding: 20px 0;
	width: 60%;
	margin: 0 auto;
	box-sizing: border-box;
}

.overviewContent {
	width: 45%;
	padding: 10px 0;
	min-height: 350px;
}

@media (max-width: 1300px) {
	.overviewContainer {
		width: 85%;
	}
}


@media (max-width: 900px) {
	.overviewContainer {
		width: 95%;
	}
}

@media (max-width: 900px) {
	.overviewContainer {
		flex-direction: column-reverse;
		align-items: center;
		flex-wrap: wrap;

		>* {
			width: 100%;
		}

		figure {
			width: 80%;
			margin-bottom: 20px;
		}

		h1, p {
			text-align: center;
		}
		.actionButton {
			margin: 0 auto;
		}
	}
	.overviewContent {
		min-height: unset;
	}
}

// .headline {
// 	padding: 80px 0;
// 	text-align: center;
// 	font-size: 2.5em;
// 	color: white;
// 	text-transform: uppercase;
// }

