@import url(fontawesome/css/all.min.css);
@font-face {
	font-family: 'Main';
	src: url(fonts/Inter_18pt-Light.ttf);
}
@font-face {
	font-family: 'Title';
	src: url(fonts/Poppins-SemiBold.ttf);
}

* {
	margin-top: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	padding: 0;
	font-family: 'Main', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	background-color: #F5F6FA;
	color: hsl(217, 10%, 55%);
}

header {
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 72px;
	display: flex;
	background-color: #F87745;
}
	header > * {
		flex-grow: 1;
	}
	header .title {
		padding: 24px;
		background-color: #F4A783;
		background-image: url(images/header-left.svg);
		background-position: right;
		background-repeat: repeat-y;
		display: flex;
		align-items: center;
	}
		#logo {
			display: block;
			opacity: 0.9;
		}
		#logo:hover {
			opacity: 1;
		}
			#logo img {
				width: 120px;
				display: block;
			}
	header .separator {
		width: 106px;
		min-width: 106px;
		margin-right: -1px;
		flex-grow: 0;
		background-image: url(images/header-separator.svg);
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: right;
	}
	header .options {
		padding: 24px;
		background-color: #4A5B6B;
		background-image: url(images/header-right.svg);
		background-position: left;
		background-repeat: repeat-y;
	}

#wrapper {
	padding-top: 72px;
}

#slider {
	height: 560px;
	position: relative;
	overflow: hidden;
}
	#slider img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		min-height: 100%;
		object-fit: cover;
	}
	#slider img:not(:first-child) {
		opacity: 0;
		animation-name: Slider;
		animation-duration: 10s;
		animation-iteration-count: infinite;
	}
	#slider .info {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 64px;
		align-items: center;
	}
		#slider .container {
			height: 100%;
			display: flex;
			align-items: center;
		}
			#slider h2 {
				display: inline-block;
				background-color: rgba(52, 64, 75, 0.66);
				color: #fff;
				padding: 8px 24px;
				font-size: 190%; 
				margin-bottom: 16px; 
				animation-name: SliderInfo;
				animation-duration: 1.5s;
				animation-iteration-count: 1;
				animation-delay: 0.5s;
				animation-fill-mode: forwards;
				opacity: 0;
			}
			#slider .info p {
				background-color: rgba(255, 255, 255, 0.66);
				color: #1F2937;
				padding: 16px 24px; 
				font-size: 110%;
				line-height: 1.5; 
				animation-name: SliderInfo;
				animation-duration: 2s;
				animation-iteration-count: 1;
				animation-delay: 0.75s;  
				animation-fill-mode: forwards;
				opacity: 0;
			}
			#slider .info a {
				display: inline-block;
				background-color: #F2744B;
				color: #fff;
				text-decoration: none;
				padding: 12px 24px;  
				font-size: 105%; 
				line-height: 1; 
				animation-name: SliderInfo;
				animation-duration: 2s;
				animation-iteration-count: 1;
				animation-delay: 1s;  
				animation-fill-mode: forwards;
				opacity: 0;
				transition: 0.3s;
			}
			#slider .info a:hover {
				background-color: hsl(15, 67%, 50%);	
			}
				#slider .info a i {
					margin-left: 4px; 
				}

@keyframes Slider {
	0% { opacity: 0; }
	40% { opacity: 0; }
	54% { opacity: 1; }
	86% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes SliderInfo {
	0% { opacity: 0; transform: translateY(64px); }
	100% { opacity: 1; transform: translateY(0); }
}

header nav {
	font-family: 'Menu', sans-serif;
	height: 100%;
}
	header nav ul {
		height: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
		header nav li:not(:first-child) {
			margin-left: 4px;
		}
			header nav ul a {
				display: block;
				padding: 8px 16px;
				border-radius: 8px;
				color: #fff;
				text-decoration: none;
				font-size: 87.5%;
				opacity: 0.85;
			}
			header nav ul a:hover {
				background-color: rgba(0,0,0, 0.25);
				opacity: 1;
				text-decoration: none;
			}
				header nav a i {
					margin-right: 8px;
					transform: translateY(-1px);
				}
		header nav ul .app {
			margin-left: 8px;
			border-left: 1px solid rgba(255,255,255, 0.2);
		}
			header nav ul .app a {
				padding: 4px 12px;
				margin-left: 8px;
				transform: translateY(1px);
			}

.container {
	max-width: 1280px;
	margin: auto;
}

h1, h2, h3 {
	font-family: 'Title', sans-serif;
}
b, strong {
	font-family: 'Title', sans-serif;
}

.block {
	padding: 64px 32px;
}
.block.standard {
	background-color: #fff;
}
.block.highlight {
	background-color: rgb(52, 64, 75);
	color: #fff;
}

.block.features {
	padding: 0 32px; 
}
	.features ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;
	}
		.features ul li {
			width: 25%;
			text-align: center;
			padding: 56px 16px;  
		}
		.features ul li:not(:last-child) {
			border-right: 1px solid hsl(217, 10%, 92%);    
		}
			.features ul i {
				font-size: 185%; 
				height: 40px;
			}
			.features ul h3 {
				font-size: 110%;
				margin-bottom: 8px;
				color: #1F2937;
			}
			.features ul p {
				margin-bottom: 0;
			}

.block.features.instructions {
	padding: 0 32px; 
}
	.features.instructions ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;
	}
		.features.instructions ul li {
			width: 20%;
			text-align: center;
			padding: 56px 16px;  
		}
		.features.instructions ul li:not(:last-child) {
			border-right: 1px solid hsl(217, 10%, 92%);    
		}
			.features.instructions ul i {
				font-size: 185%; 
				height: 40px;
			}
			.features.instructions ul h3 {
				font-size: 110%;
				margin-bottom: 8px;
				color: #1F2937;
			}
			.features.instructions ul p {
				margin-bottom: 0;
			}


		.features.black ul li:not(:last-child) {
			border-right: 0px solid hsl(217, 10%, 92%);  
			
		}
		.features.black ul h3 {
				font-size: 110%;
				margin-bottom: 8px;
				color: #FFFFFF;
			}


.block.title {
	padding: 32px 32px;   
	text-align: center;
}
	.block.title h1 {
		font-size: 200%; 
		margin-bottom: 0;
	}
		.block.title h1 span {
			display: block;
			font-size: 66%; 
			opacity: 0.75;  
			font-weight: normal;
			margin-top: 8px; 
			font-family: 'Main', sans-serif;  
		}

p {
	margin-bottom: 8px;
}
.extra {
	margin-top: 16px;  
	margin-bottom: 16px;
	background-color: hsl(228, 33%, 96%);
	border: 1px solid hsl(228, 33%, 92%);
	padding: 24px 32px;     
	padding-bottom: 16px; 
	color: hsl(217, 10%, 50%); 
}
block.footers {
	padding: 0 32px;
	
}	
.footers.title  {
	background-color: rgb(52, 64, 75);
	color: #fff;
	text-align: left;
	}
		.footers.title p   {
			display: block;
			font-size: 12px;
			color: #A9A9A9;
		}
		.footers.title a {
			color: #A9A9A9;
			text-decoration: none;
	}
		.footers.title a:hover {
		text-decoration: underline;
		color: hsl(15, 67%, 52%);
	}
	.footers.title span {
	white-space: nowrap;
	display: inline-block;
	}

a {
	color: hsl(15, 67%, 52%);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.button {
	padding: 10px 16px;
	border-radius: 4px;
	font-size: 100%;
	color: #fff;
	border: 0;
	cursor: pointer;
	font-family: 'Main', sans-serif;
	background-color: #F2744B;
	display: inline-block;
	line-height: 1;
	transition: 0.3s;
}
.button:hover {
	background-color: hsl(15, 67%, 50%);
	text-decoration: none;
}

.row {
	display: flex;
	gap: 64px;
}
	.row > * {
		flex-grow: 1;
		flex-basis: 50%;
	}

.users {
	padding-top: 16px;
}
.users > p {
	text-align: center;
}
.users .row {
	padding: 32px 0; 
	gap: 0;
}
	.users .row > div:first-child {
		border-right: 1px solid hsl(217, 10%, 92%); 
	}
	.users .row > div {
		padding: 16px; 
		text-align: center;
		width: 50%;
	}
		.users .row h3 {
			color: #1F2937;
			margin-bottom: 8px;
		}
			.users .row h3 i {
				display: block;
				font-size: 150%; 
				margin-bottom: 4px;
			}
		.users .row p {
			margin-bottom: 16px; 
		}

.panel {
	background-color: #fff;
	border-radius: 8px;
	padding: 48px;
	box-shadow: 0 48px 48px -32px hsla(210, 75%, 18%, 0.25);
	position: relative;
	margin-bottom: 48px;
}


h2 {
	color: hsl(215, 28%, 27%); 
}
section h3 {
	color: hsl(215, 28%, 27%); 
	margin-bottom: 16px; 
}
section h4 {
	color: hsl(215, 28%, 27%); 
	margin-bottom: 8px;
	font-family: 'Title', sans-serif; 
}
section ul {
	margin: 0;
	margin-bottom: 24px;  
}
.price {
	text-align: center;
	font-size: 150%;
	padding: 16px;
	color: #1F2937;
}
.price span {
	white-space: nowrap;
}
.offers h3 {
	text-align: center;
	margin-bottom: 32px; 
}
.offers.panel {
	max-width: 1024px;  
	margin-left: auto;
	margin-right: auto;
}
	.offers .details {
		display: none;
	}

.jvk.panel {
	max-width: 1024px;  
	margin: auto; 
	display: flex;
	gap: 32px;
	margin-bottom: 48px;
}
.jvk.panel > div {
	flex-basis: 50%;
}
.jvk.panel span {
	float: left;
}
	.jvk .details {
		display: none;
	}
.jvk.panel img {
	width: 100%;
	max-width: 800px;
}
	
table {
	margin: auto;
	border-collapse: collapse;
}
	table tr {
		border-bottom: 1px solid hsl(217, 10%, 90%);   
	}
		table th,
		table td {
			padding: 8px;
		}
		table th {
			font-family: 'Title', sans-serif;
			font-size: 85%;  
			color: hsl(215, 28%, 32%);  
		}
		table thead th {
			font-size: 100%;  
		}
		table tbody th {
			text-align: left;
			max-width: 200px; 
			vertical-align: top;
		}
		table td {
			text-align: center;
		}
		table tr:nth-child(4) td {
			text-align: left;
		}
		table tr:nth-child(2) td,
		table tr:nth-child(3) td {
			font-weight: bold;
			font-family: 'Title', sans-serif;
		}
			table ul {
				margin-bottom: 0;
			}

.offers .details ul {
	padding-left: 16px;
}
.card {
	border-bottom: 1px solid hsl(217, 10%, 90%);
	padding-bottom: 16px;
	margin-bottom: 16px;
}
	.card p {
		margin-bottom: 4px;  
	}
	.card a {
		margin-top: 8px;
	}

.mediaContainer {
	display: flex;
	justify-content: center;
	background-color: #f4f6f9;
	margin-bottom: 24px;
}
video {
	width: 100%;
	max-width: 800px;
}

@media screen and (max-width: 900px) {
	header nav ul {
		display: none;
	}
	table {
		display: none;
	}
	.offers .details {
		display: block;
	}
	#slider {
		height: 480px;
	}
	.features ul {
		flex-wrap: wrap;
	}
	.features ul li {
		width: 50%;
		padding: 40px 32px;
	}
	.features ul li:nth-child(1),
	.features ul li:nth-child(2) {
		border-bottom: 1px solid hsl(217, 10%, 92%);
	}
	.features ul li:nth-child(2) {
		border-right: 0;
	}
	.jvk.panel {
		flex-direction: column;
		gap: 16px;
	}
	.jvk.panel > div {
		flex-basis: auto;
	}
	.jvk.panel .img {
		text-align: center;
	}
	.jvk.panel img {
		max-width: 480px;
	}
}
@media screen and (max-width: 600px) {
	.row {
		flex-direction: column;
	}
	.users .row > div,
	.row > div {
		width: auto;
		flex-basis: initial;
	}
	.users .row > div:first-child {
		border-bottom: 1px solid hsl(217, 10%, 92%);
		border-right: 0;
	}
	#slider .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#slider .content h2 {
		text-align: center;
		padding: 8px 16px; 
		font-size: 150%;   
	}
	.features ul {
		flex-direction: column;
	}
	.features ul li,
	.features ul li:nth-child(1),
	.features ul li:nth-child(3) {
		width: auto;
		border-bottom: 1px solid hsl(217, 10%, 92%);
		border-right: 0;
	}
}