/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

* {
	transition: 0.5s;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}
body {
	line-height: 1;
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	max-width: 100%;
}

body {
	font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	z-index: 2;
	background-color: #fff;
}

section {
	margin: 1.8rem 0;
	padding-left: 1.8rem;
	padding-right: 1.8rem;
	background-color: #fff;
}

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

.c-sm {
	max-width: 1280px;
}

.logo {
}

.d-flex {
	display: flex;
}

.fld-col {
	flex-direction: column;
}

.flw-inherit {
	flex-wrap: wrap;
}

/* NAVBAR */
.navbar {
	background-color: #fff;
}

nav {
	margin-top: 2rem;
	align-items: center;
	justify-content: space-between;
}

.nav {
	flex-wrap: wrap;
	position: relative;
}

.menu {
	flex-basis: 100%;
	flex-grow: 1;
	align-items: center;
	width: 100%;
	/* display: none; */
	/* opacity: 0; */
	position: absolute;
	/* opacity: 0; */
	/* z-index: -5; */
	transform: translate(0, -580px);
	min-height: 70vh;
	justify-content: space-between;
	transition: 0s;
}

.list {
	margin-top: 1.8rem;
	width: 100%;
	text-align: center;
}

.link {
	text-decoration: none;
	color: rgb(116, 116, 116);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.125rem;
}

.link-active {
	color: rgb(0, 0, 0);
}

.link-cta {
	background-color: rgb(222, 225, 241);
	color: rgb(27, 27, 27);
	display: flex;
	justify-content: center;
	padding: 1.2rem 0;
	border-radius: 1rem;
}

.link:hover {
	opacity: 0.8;
}

.show {
	opacity: 1;
	position: relative;
	transform: translate(0, 0);
	transition: 0.5s;
}

.mobileBtn {
	cursor: pointer;
}

.navbar {
	margin-top: 2.8rem;
}

/* Header */
.hero {
	margin-top: 4rem;
	margin-bottom: 2rem;
	background-color: #fff;
}

.hero-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.underline {
	border-bottom: 10px solid rgb(124, 124, 255);
	display: inline-block;
	line-height: 0.5;
}

.hero-banner {
	display: none;
	position: relative;
}

.hero-textWrapper {
}

.hero-greeting {
	color: rgb(101, 104, 143);
	padding: 0.5rem 0;
}

.hero-title {
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: 1px;
	padding: 0.5rem 0;
	line-height: 3.8rem;
	color: rgb(1, 1, 77);
}

.hero-text {
	padding: 0.5rem 0;
	color: rgb(1, 1, 56);
	line-height: 2rem;
	font-size: 1.2rem;
	letter-spacing: 1px;
}

.cta-wrapper {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-top: 0.5rem;
}

.hero-link {
	text-decoration: none;
	margin: 0.5rem 0;
}

.hero-link:hover {
	opacity: 0.8;
}

.cta-getStarted {
	color: #fff;
	background-color: rgb(88, 88, 216);
	padding: 1.3rem 4rem;
	border-radius: 1rem;
}

.cta-decoy {
	text-decoration: underline;
}

.card {
	background-color: white;
	padding: 1rem 1.3rem;
	border-radius: 1.5rem;
}

.user-review {
	position: absolute;
	flex-wrap: wrap;
	align-items: center;
	width: 180px;
	top: 100px;
	left: -72px;
	box-shadow: -8px 8px 58px rgba(0, 0, 0, 0.1);
	border: 3px solid rgba(155, 155, 253, 0);
}

.user-review:hover {
	border: 3px solid rgba(192, 192, 255, 0.658);
}

.user-info {
	margin-left: 1.3rem;
}

.stars {
	display: flex;
	flex-basis: 100%;
	flex-grow: 1;
	margin-top: 0.9rem;
}

.star {
	margin-right: 0.5rem;
}

.hero-card {
	position: absolute;
	align-items: center;
	flex-direction: column;
	right: -50px;
	bottom: 108px;
	box-shadow: -8px 8px 58px rgba(0, 0, 0, 0.1);
	border: 3px solid rgba(192, 192, 255, 0);
}

.hero-card:hover {
	border: 3px solid rgba(192, 192, 255, 0.658);
}

.status-wrapper {
	font-size: 0.8rem;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	bottom: 74px;
	left: 50%;
	margin-left: -50px;
	right: 50%;
	margin-right: -50px;
}

.status {
	padding: 0.2rem 0.5rem;
	background-color: rgb(129, 152, 255);
	border-radius: 4px;
}

.hero-name {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

/* feature */
.feature {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.f-container {
	flex-direction: column;
}

.feature-title {
	text-align: center;
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 2.5rem;
	color: rgb(1, 1, 77);
}

.card-wrapper {
	margin: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
}

.feature-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 1.325rem;
	text-align: center;
	background-color: #eeefff;
	flex-basis: 100%;
	flex-grow: 1;
	text-align: center;
	padding: 3rem;
	box-sizing: border-box;
	border: 3px solid rgba(124, 124, 255, 0);
}

.feature-card:hover {
	border: 3px solid rgb(155, 155, 253);
}

.feature-textWrapper {
	max-width: 280px;
}

.feature-card-title {
	font-size: 1.4rem;
	font-weight: 600;
	margin-top: 1.8rem;
}

.feature-card-text {
	margin-top: 0.8rem;
	font-size: 1.128rem;
	letter-spacing: 1px;
	line-height: 1.5rem;
}

/* Reached */
.reached {
	margin-top: 4rem;
	margin-bottom: 4rem;
	text-align: center;
}

.r-container {
	flex-direction: column;
	text-align: center;
	/* gap: 1.8rem; */
}

.reach-info {
	padding: 2.8rem;
}

.reach-info + .reach-info {
	border-top: 1px solid rgba(1, 1, 56, 0.151);
}

.reach-title {
	font-size: 2.2rem;
	font-weight: 800;
	color: rgb(1, 1, 56);
	margin-bottom: 0.8rem;
	letter-spacing: 1px;
}

.reach-text {
	letter-spacing: 1px;
	color: rgb(121, 121, 153);
}

/* Story */
.story {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.s-container {
	flex-direction: column;
	gap: 2rem;
}

.story-info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 620px;
	margin: 0 auto;
}

.story-title {
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: 1px;
}

.story-text {
	color: rgb(1, 1, 56);
	line-height: 2rem;
	font-size: 1.2rem;
	letter-spacing: 1px;
	max-width: 500px;
}

.story-cta {
	font-size: 1.128rem;
	text-align: center;
	text-decoration: none;
	color: rgb(1, 1, 77);
	padding: 1.5rem 0;
	background-color: rgba(173, 173, 255, 0.281);
	border-radius: 8rem;
}

/* Footer */
.footer {
	background-color: rgba(173, 173, 255, 0.192);
	margin-bottom: 0;
}

.footer-container {
	flex-direction: column;
	padding: 6rem 0;
	gap: 1.5rem;
}

.first-section {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}

.second-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.footer-text {
	color: rgb(1, 1, 56);
	line-height: 2rem;
	font-size: 1.2rem;
	letter-spacing: 1px;
	max-width: 500px;
}

.col {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

.title {
	font-weight: 600;
}

.footer-link {
	color: rgb(73, 73, 73);
	font-weight: normal;
}

@media screen and (min-width: 560px) {
	/* Navbar */
	.list .link {
		font-size: 1.8rem;
	}

	/* HERO */
	.hero-textWrapper {
		text-align: center;
		max-width: 650px;
	}

	/* Feature */
	.feature-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		text-align: start;
	}

	.feature-card-title {
		margin-top: 0;
	}

	/* Reached */
	.reach-title {
		font-size: 3rem;
	}

	.reach-info {
		margin-left: 8rem;
		margin-right: 8rem;
	}

	/* Story */
	.story {
		text-align: center;
	}

	.story-image {
		margin: 0 auto;
	}
}

@media screen and (min-width: 800px) {
	/* Feature */
	.card-wrapper {
		flex-wrap: unset;
		gap: 1rem;
	}

	.feature-card {
		flex-direction: column;
		text-align: center;
		gap: 0.8rem;
		justify-content: unset;
	}

	/* footer */
	.second-section {
		margin-top: 2rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 5rem;
	}
}

@media screen and (min-width: 1100px) {
	/* Navbar */
	.mobileBtn {
		display: none;
	}

	.menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		max-width: 800px;
		justify-content: space-between;
		list-style-type: none;
		padding: 0;
		min-height: unset;
		opacity: 1;
		transform: translate(0, 0);
		position: relative;
		transition: 0s;
	}

	.list .link {
		font-size: 1em;
	}

	.list {
		margin-top: 0;
		text-align: unset;
		width: unset;
	}

	.link-cta {
		display: unset;
		padding: 1rem 2rem;
	}

	/* Hero */

	.hero {
		margin-top: 6rem;
	}

	.hero-container {
		justify-content: space-between;
		padding: 0 2rem;
	}

	.hero-textWrapper {
		text-align: start;
	}

	.cta-wrapper {
		flex-direction: row;
		align-items: center;
	}

	.cta-getStarted {
		margin-right: 1.4rem;
	}

	.hero-banner {
		display: unset;
	}

	.hero-text {
		max-width: 500px;
	}

	/* Feature */
	.feature {
		margin-top: 6.5rem;
		margin-bottom: 6.5rem;
	}

	.card-wrapper {
		gap: 2.8rem;
	}

	.feature-card {
		flex-direction: row;
		text-align: start;
		gap: 1rem;
		justify-content: space-around;
	}

	/* reached */
	.reached {
		margin-top: 6.5rem;
		margin-bottom: 6.5rem;
	}

	.r-container {
		flex-direction: row;
	}

	.reach-title {
		font-size: 2.2rem;
	}

	.reach-info {
		/* padding: 2rem; */
		width: 25%;
		margin-left: 0;
		margin-right: 0;
	}

	.reach-info + .reach-info {
		border-top: unset;
		border-left: 1px solid rgba(0, 0, 0, 0.137);
	}

	/* Story */
	.s-container {
		flex-direction: row;
		align-items: center;
		text-align: start;
	}

	/* footer */
	.footer {
		margin-top: 8rem;
	}

	.footer-container {
		flex-direction: row;
		justify-content: space-between;
	}

	.first-section {
		align-items: flex-start;
		text-align: start;
		width: 25%;
	}

	.second-section {
		margin-top: 0;
		gap: 0;
		justify-content: space-between;
		width: 70%;
	}
}