:root {
	--dark-blue: hsl(223, 28%, 10%);
	--light-blue: hsl(223, 28%, 20%);
}
html {
	box-sizing: border-box;
	font-size: 62.5%;
}

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

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {
	display: inline-block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:is(:active, :focus, :hover){
	text-decoration: underline;
}

p {
	color: hsl(0, 0%, 25%);
}


a[class^="btn"] {
	padding: 1.5rem 3rem;
	font-weight: bold;
}
.btn-white {
	background: white;
	color: var(--dark-blue);
}
.btn-glass {
	background: rgba(255, 255, 255, 0.25);
	color: white;
}
.btn-black {
	background: var(--dark-blue);
	color: white;
}


button[class^="arrow"] {
	background: none;
	border-radius: 100%;
	border: 2px solid var(--dark-blue);
	border-radius: 100%;
	height: 3rem;
	width: 3rem;
	cursor: pointer;
}
.arrow-right {
	position: relative;
	margin-left: 2.5%;
}
.arrow-right::before {
	content: "";
	background: rgba(255, 255, 255, 0.5);
	width: 2rem;
	height: 2rem;
	position: absolute;
	left: -10%;
	bottom: -10%;
	border-top-right-radius: 100%;
}


figure {
	padding: 2rem;
	text-align: center;
	color: black;
	background: #ddd;
	margin: 0;
	min-width: max-content;
	transition: 500ms color, 500ms background;
}
figure.dark {
	color: white;
	background: var(--dark-blue);
}
figure.dark img {
	filter: invert(1);
}
.placeholder-wrapper {
	padding: 7.5rem;
	background: #ddd;
	min-width: max-content;
}


header {
	color: white;
	height: 60vh;
	position: relative;
}
@media (max-width: 800px) {
	header {
		height: 100%;
	}
}

header p {
	color: hsl(0, 0%, 75%);
}

header .bg {
	position: absolute;
	z-index: -1;
	clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
	background: radial-gradient(circle at 75% 75%, var(--light-blue), var(--dark-blue));
	width: 100%;
	height: 100%;
}
@media (max-width: 800px) {
	header .bg {
		clip-path: none;
	}
}

header nav {
	padding: 3rem 5rem;
	text-align: end;
}

header nav > a {
	position: absolute;
	top: 3rem;
	left: 5rem;
	border: 2px solid white;
	border-radius: 100%;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block;
}

header li {
	margin-left: 2.5vw;
	color: hsl(0, 0%, 75%);
}

header li a.active {
	color: white;
}


@media (max-width: 800px) {
	header li:nth-of-type(even) {
		display: none;
	}
}

@media (max-width: 400px) {
	header li:nth-of-type(odd) {
		display: none;
	}
}

header section {
	height: 100%;
}

header section .placeholder-wrapper {
	float: right;
	margin-right: 10%;
	border: 2rem solid white;
	border-top-width: 1rem;
	border-bottom-width: 1rem;
	border-radius: 1rem;
	box-shadow: 0 .1rem 5rem black;
	width: 33.33%;
}
header section > div:last-of-type {
	width: 50%;
}
@media (max-width: 800px) {
	header section .placeholder-wrapper {
		float: none;
		margin: auto;
		width: 75%;
	}
	header section > div:last-of-type {
		width: 95%;
	}
}

header section > div:last-of-type > * {
	padding-bottom: 2rem;
	margin-left: 10%;
}

header section >div:last-of-type div a {
	margin-right: 1rem;
}
header section >div:last-of-type div a:last-of-type::before {
	content: "> ";
	color: gray;
}

.as-seen-on {
	width: max-content;
	margin-left: auto;
}

.as-seen-on li {
	display: inline-block;
}
.as-seen-on li::after {
	content: "";
	padding-right: 2vw;
}

@media (max-width: 800px) {
	.as-seen-on li::after {
		padding-right: 0;
	}
}
@media (max-width: 700px) {
	.as-seen-on {
		width: auto;
		margin-left: 0;
		text-align: center;
	}
}

.as-seen-on img {
	height: 3rem;
}

main > section {
	margin: 5%;
}

h2 {
	font-size: 2rem;
	font-weight: normal;
}

p {
	line-height: 1.75rem;
}

.about-us {
	overflow: auto;
}

.about-us > * {
	width: 50%;
	float: left;
}

.about-us > div > *:nth-last-child(2) {
	margin-bottom: 5%;
}

.about-us > section {
	overflow: hidden;
}

.about-us > section > section {
	width: 40%;
	float: left;
	margin: 5%;
	text-align: center;
	height: 15rem;
}

@media (max-width: 1000px) {
	.about-us > * {
		width: auto;
		float: none;
		padding-bottom: 7.5vh;
	}
	.about-us > .btn-black {
		position: relative;
		top: 2.5vh;
	}
}

.about-us > section > section:is(:hover, :active, :focus) {
	box-shadow: 0px 7.5px 5px 0px rgba(0, 0, 0, 0.25);
}

.image-left-content-right {
	overflow: hidden;
}

.image-left-content-right > * {
	width: 45%;
	float: left;
	margin: 2.5%;
}

@media (max-width: 800px) {
	.image-left-content-right > * {
		width: auto;
		float: none;
		padding-bottom: 7.5vh;
	}
	.image-left-content-right .btn-black {
		position: relative;
		top: 2.5vh;
	}
}

.image-left-content-right > div:nth-of-type(2) > *:nth-last-child(2) {
	margin-bottom: 5%;
}

.how-it-works > div {
	text-align: center;
	width: 75vmin;
	margin: auto;
	display: block;
	padding: 2.5% 0;
}
.how-it-works > a {
	text-align: center;
	width: initial;
	display: inline-block;
}

.how-it-works li span {
	font-weight: bold;
}

@media (max-width: 800px) {
	.how-it-works {
		padding-bottom: 10vh;
	}
	.how-it-works .btn-black {
		position: relative;
		top: 2.5vh;
	}
}

.checkbox::before {
	content: " ";
	border: 2px solid var(--dark-blue);
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	top: 0.5rem;
	right: 0.5rem;
	border-radius: .25rem;
	display: inline-block;
}

.how-it-works li p {
	margin-left: 1.75rem;
}

.features {
	margin: 0;
	overflow: auto;
	padding-bottom: 10vh;
}

.features > * {
	margin: 0 5% 5% 5%;
}

.features .bg {
	margin: 0;
	position: absolute;
	z-index: -1;
	clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 100%);
	background: radial-gradient(circle at 75% 75%, var(--light-blue), var(--dark-blue));
	width: 100%;
	height: 70%;
}
@media (max-width: 800px) {
	.features .bg {
		clip-path: none;
	}
}

.features > section:nth-of-type(2) > section {
	background: white;
	padding: 1rem;
	margin: 1rem;
	float: left;
	width: 30%;
	height: 20vh;
	border-radius: 1rem;
	box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
}


.features > section:nth-of-type(2) > section:nth-of-type(n+4) {
	position: relative;
	left: 5%;
}
@media (max-width: 1000px) {
	.features .bg {
		height: 90%;
		clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
	}
	.features > section:nth-of-type(2) > section {
		width: 40%;
	}
	.features > section:nth-of-type(2) > section:nth-of-type(n+3) {
		position: relative;
		left: 5%;
	}
	.features > section:nth-of-type(2) > section:nth-of-type(n+5) {
		position: static;
	}
}

@media (max-width: 600px) {
	.features .bg {
		height: 150vh;
	}
	.features > section:nth-of-type(2) > section {
		width: auto;
		float: none;
	}
	.features > section:nth-of-type(2) > section:nth-of-type(n) {

		position: static;
	}
}

.features > section:nth-of-type(2) > section:nth-of-type(2) {
	text-align: center;
	line-height: 18vh;
}

.features > section:nth-of-type(2) span {
	font-weight: bold;
}

.features > section:nth-of-type(2) .checkbox::before {
	right: 0;
}

.testimonials {
	text-align: center;
	position: relative;
}

.testimonials .arrow-left {
	position: absolute;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
}

.testimonials .arrow-right {
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
}

.testimonials li {
	width: 66.66%;
	margin: auto;
}

.testimonials p {
	font-size: 2rem;
	line-height: 3rem;
}

.testimonials section > div:first-of-type {
	background: #dde0e9;
	border-radius: 100%;
	width: 4rem;
	height: 4rem;
	display: inline-block;
	margin-right: 1rem;
}

.testimonials section > div:last-child {
	display: inline-block;
}
.testimonials span {
	color: hsl(0, 0%, 25%);
}

.call-to-action {
	background: var(--dark-blue);
	color: white;
	margin: 0;
	overflow: hidden;
}

.call-to-action > * {
	margin: 5% 7.5%;
	display: inline-block;
	width: 34%;
}

.call-to-action > div:last-of-type {
	text-align: center;
}

.call-to-action a:first-of-type {
	margin-right: 5%;
}

@media (max-width: 1200px) {
	.call-to-action > * {
		margin: 5% 2.5%;
		width: 44%;
	}
}

@media (max-width: 1000px) {
	.call-to-action > * {
		text-align: center;
		width: 100%;
		padding: 7.5vh 0;
	}
}

footer {
	margin: 2.5%;
	overflow: auto;
}

footer ul {
	margin: 0;
}

footer > * {
	width: 16.6666%;
	float: left;
}

footer li {
	display: block;
	color: hsl(0, 0%, 25%);
	margin: 2rem 0.5rem;
}

footer h4 {
	color: var(--dark-blue);
}

footer ul:nth-of-type(3) {
	padding-top: 3rem;
}

footer ul:last-of-type li {
	display: inline-block;
}

@media (max-width: 1000px) {
	footer .checkbox::before {
		display: none;
	}
}
@media (max-width: 800px) {
	footer > * {
		width: 33.3333%;
		height: 36vh;
	}
	footer ul:last-of-type {
		float: right;
		position: relative;
		margin-top: -10%;
	}
	footer ul:nth-of-type(4), footer ul:nth-of-type(5), footer ul:nth-of-type(7) {
		height: max-content;
	}
	footer ul:nth-of-type(5), footer ul:nth-of-type(6) {
		margin-top: 5%;
	}
	footer ul:nth-of-type(7) {
		margin-top: 0;
	}
}
@media (max-width: 600px) {
	footer > * {
		width: 50%;
	}
	footer ul:nth-last-of-type(3), footer ul:last-of-type {
		margin-top: -25%;
		height: max-content;
	}
	footer ul:nth-of-type(4), footer ul:nth-of-type(5) {
		margin-top: 10%;
	}
	footer ul:nth-of-type(7) {
		margin-top: 0;
		width: 100%;
		text-align: center;
	}
}