@font-face {
	font-family: "72-Regular";
	font-display: swap;
	src: url("../assets/fonts/72-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "72-Bold";
	font-display: swap;
	src: url("../assets/fonts/72-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "72-Light";
	font-display: swap;
	src: url("../assets/fonts/72-Light.woff2") format("woff2");
}

/* ----------- CSS Reset ----------- */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
picture,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
	overflow-wrap: break-word;
}

ul {
	list-style: none;
}

textarea,
button,
input,
select {
	font: inherit;
	margin: 0;
}

html {
	box-sizing: border-box;
}

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

html,
body {
	height: 100%;
}

picture,
canvas,
svg,
img,
video {
	display: block;
	height: auto;
	max-width: 100%;
}

iframe {
	border: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/* ----------- PROPERTIES ----------- */
:root {
	/* --- Fonts --- */
	--document-font-size: 16px;
	--font-regular: "72-Regular", Arial, Helvetica, sans-serif;
	--font-bold: "72-Bold", Arial, Helvetica, sans-serif;
	--font-light: "72-Light", Arial, Helvetica, sans-serif;

	/* --- Colors --- */
	--primary-text-color: #333333;
	--primary-emphasize-color: #1873b4;
	--white-color: #ffffff;
	--header-bg-color: #f7f7f7;
	--header-text-color: #000000;

	/* --- Common --- */
	/* 100 - (((157 * 2) / 1920) * 100) */
	--section-max-width: 83.65%;
	--section-title-font-size: 4rem;

	/* --- Hero --- */
	--header-height: 4rem;
	--navigation-bar-icon-size: 2rem;
	--navigation-bar-font-size: 1.125rem;
	--hero-intro-title-font-size: 8rem;
	--hero-intro-description-font-size: 1.75rem;
	--hero-intro-btn-font-size: 1.5rem;
	--hero-info-max-width: 61.5rem;
	--hero-info-description-font-size: 1.25rem;

	/* --- Example App --- */
	--example-app-description-font-size: 1.25rem;

	/* --- Main Features --- */
	/* (100 - 83.65%) / 2 */
	--main-features-padding: 0 8.175%;
	--main-features-subtitle-font-size: 2.25rem;
	--main-features-description-font-size: 1.5rem;

	/* --- Footer --- */
	--footer-grid-max-width: 67.4%;
	--footer-subsection-title-font-size: 1.5rem;
	--footer-subsection-link-font-size: 1.125rem;

	/* --- Decorations --- */
	--card-box-shadow: 0 0.25rem 2rem 0.25rem rgba(0,0,0,0.1);
}

/******************************/
/* BELOW 1344px ( 1344 / 16 = 84em )*/
/******************************/
@media (max-width: 84em) {
	:root {
		--header-height: 42px;
		--navigation-bar-icon-size: 26px;
		--navigation-bar-font-size: 12px;
	}
}

/******************************/
/* BELOW 576px ( 576 / 16 = 36em )*/
/******************************/
@media (max-width: 36em) {
	:root {
		--section-title-font-size: 3.3rem;
		--hero-intro-title-font-size: 5.6rem;
		--hero-intro-description-font-size: 1.5rem;
	}
}

/******************************/
/* BELOW 460px ( 460 / 16 = 28.75em )*/
/******************************/
@media (max-width: 28.75em) {
	:root {
		--hero-intro-title-font-size: 4rem;
		--hero-info-description-font-size: 1.3rem;
		--example-app-description-font-size: 1.3rem;
	}
}

/* ----------- COMMON ----------- */
html {
	font-size: var(--document-font-size);
	min-width: 300px;
	overflow-x: hidden;
	scroll-behavior: smooth;
	color: var(--primary-text-color);
	font-family: var(--font-regular);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a {
	color: currentColor;
	cursor: pointer;
	text-decoration: none;
}

.btn,
.btn:link,
.btn:visited {
	display: inline-block;
	font-family: var(--font-bold);
	background-color: var(--primary-emphasize-color);
	border: none;
	border-radius: 0.625rem;
	color: var(--white-color);
	cursor: pointer;
	transition-duration: 300ms;
	transition-property: box-shadow, transform;
}

.btn:hover {
	box-shadow: 0 0.9375rem 1.875rem rgba(0, 0, 0, 0.2);
	transform: scale(1.02) translateY(-4px);
}

.btn:active {
	box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.3);
	transform: scale(0.98) translateY(-2px);
}

.main {
	position: relative;
}

/* --------- UTILITIES --------- */
.reversed {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}

.scaled-up {
	transition-duration: 200ms;
	transition-property: transform;
}

.scaled-up:hover {
	transform: scale(1.25);
}

.scaled-up:active {
	transform: scale(1.1);
}

/* ----------- HEADER ----------- */
.header {
	height: var(--header-height);
	color: var(--header-text-color);
	background-color: var(--header-bg-color);
	box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.2);
}

.navigation-bar {
	height: 100%;
	display: flex;
	justify-content: end;
	align-items: center;
}

.navigation-bar__icon {
	width: var(--navigation-bar-icon-size);
}

.navigation-bar__link:first-child {
	font-size: var(--navigation-bar-font-size);
	font-family: var(--font-bold);
	margin-right: 2.375rem;
}

.navigation-bar__link:last-child {
	margin-right: 2.6875rem;
}

/* ----------- SHARED ----------- */
.hero,
.example-app {
	max-width: var(--section-max-width);
	margin: 0 auto;
	position: relative;
}

/* -------- SECTION: HERO ------- */
.hero {
	margin-bottom: 16.5rem;
}

.hero-intro {
	padding: 7.1875rem 0;
}

.hero-intro__title {
	font-size: var(--hero-intro-title-font-size);
	font-family: var(--font-bold);
	color: var(--primary-emphasize-color);
	margin-bottom: 7.25rem;
}

.hero-intro__description {
	font-size: var(--hero-intro-description-font-size);
	margin-bottom: 3.125rem;
}

.hero-intro__btn {
	font-size: var(--hero-intro-btn-font-size);
	padding: 1.125rem 2.15rem;
}

.hero-info {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: var(--hero-info-max-width);
	gap: 3.375rem;
}

.hero-info__card {
	background-color: var(--white-color);
	opacity: 0.95;
	box-shadow: var(--card-box-shadow);
	border-radius: 2rem;
}

.hero-info__card--inner {
	padding: 1.875rem;
}

.hero-info__icon {
	width: 5.25rem;
	margin: 0 auto 1.4375rem auto;
}

.hero-info__description {
	font-size: var(--hero-info-description-font-size);
	text-align: center;
}

.hero-bg-image {
	max-width: 50%;
	position: absolute;
	top: 3.125rem;
	right: 0;
}

/* -------- SECTION: EXAMPLE APP -------- */
.example-app {
	margin-bottom: 7.8125rem;
}

.example-app__title,
.main-features__title {
	color: var(--primary-emphasize-color);
	font-size: var(--section-title-font-size);
	font-family: var(--font-bold);
	margin-bottom: 4.9375rem;
}

.example-app-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7.5rem;
}

.example-app__card--inner {
	height: 100%;
	padding: 2.5rem 2.8125rem;
	background-color: var(--white-color);
	opacity: 0.95;
	box-shadow: var(--card-box-shadow);
	border-radius: 2rem;
}

.example-app__icon {
	width: 5.8rem;
	margin: 0 auto 2.0625rem auto;
}

.example-app__description {
	font-size: var(--example-app-description-font-size);
	text-align: center;
}

/* -------- SECTION: MAIN FEATURES -------- */
.main-features {
	position: relative;
}

.main-features::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../assets/images/left-bg.svg"), url("../assets/images/right-bg.svg");
	background-color: var(--white-color);
	background-position-x: left, right;
	background-size: 58rem, 40rem;
	background-repeat: no-repeat;
	z-index: -1;
}

.main-features__title {
	max-width: var(--section-max-width);
	margin-left: auto;
	margin-right: auto;
}

.main-features-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	margin-bottom: 9.75rem;
}

.main-features-content--wrapper:last-child {
	background-color: var(--white-color);
	box-shadow: var(--card-box-shadow);
}

.main-features-content--wrapper.reversed {
	padding: 4.375rem 4.375rem 4.375rem 9.375rem;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	text-align: right;
}

.main-features-content--wrapper:last-child:not(.reversed) {
	padding: 4.375rem 9.375rem 4.375rem 4.375rem;
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
	text-align: left;
}

.main-features__subtitle {
	font-family: var(--font-bold);
	font-size: var(--main-features-subtitle-font-size);
	padding-bottom: 1.5625rem;
}

.main-features__description {
	font-size: var(--main-features-description-font-size);
	font-family: var(--font-light);
	line-height: 1.5;
}

.main-features__icon {
	width: 13.75rem;
	margin: 0 auto;
}

/* -------- FOOTER -------- */
.footer {
	background-color: var(--primary-emphasize-color);
	color: var(--white-color);
	border-top-left-radius: 6rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 3.125rem;
	max-width: var(--footer-grid-max-width);
	margin: 0 auto;
	padding: 6.25rem 0;
}

.footer-subsection__title {
	font-family: var(--font-bold);
	font-size: var(--footer-subsection-title-font-size);
	color: var(--white-color);
	margin-bottom: 2.5rem;
}

.footer-subsection__list {
	font-family: var(--font-regular);
	font-size: var(--footer-subsection-link-font-size);
	color: var(--white-color);
}

.footer-subsection__list--community {
	display: flex;
	align-items: center;
}

.footer-subsection__list--community li:not(:last-child) {
	margin-right: 1.4375rem;
}

.footer-subsection__item:not(:last-child) {
	margin-bottom: 2rem;
}

.footer-subsection__item a:hover,
.footer-subsection__item a:active {
	text-decoration: underline;
}

.footer__icon {
	width: 2.1875rem;
}

.footer-subsection__list--copyright{
	margin-bottom: 2rem;
}

/******************************/
/* BELOW 1920px ( 1920 / 16 = 160em )*/
/******************************/
@media (max-width: 120em) {
	html {
		font-size: 14px;
	}

	.hero-bg-image {
		max-width: 40%;
	}
}

/******************************/
/* BELOW 1600px ( 1600 / 16 = 100em )*/
/******************************/
@media (max-width: 100em) {
	html {
		font-size: 12px;
	}
}

/******************************/
/* BELOW 1344px ( 1344 / 16 = 84em )*/
/******************************/
@media (max-width: 84em) {
	html {
		font-size: 10px;
	}

	.hero-bg-image {
		top: 5rem;
	}

	.example-app-cards {
		gap: 3.75rem;
	}
}

/******************************/
/* BELOW 1024px ( 1024 / 16 = 64em )*/
/******************************/
@media (max-width: 64em) {
	html {
		font-size: 9px;
	}

	.example-app__card--inner {
		padding: 1.25rem 1.875rem;
	}

	.footer-grid {
		max-width: var(--section-max-width);
	}
}

/******************************/
/* BELOW 900px ( 900 / 16 = 56.25em )*/
/******************************/
@media (max-width: 56.25em) {
	.main-features::before {
		background-size: 45rem, 30rem;
		background-position-y: 0, 30rem;
	}
}

/******************************/
/* BELOW 768px ( 768 / 16 = 48em )*/
/******************************/
@media (max-width: 48em) {
	.hero {
		/* -50% */
		margin-bottom: 8.25rem;
	}

	.hero-bg-image {
		top: 8.125rem;
	}
}

/******************************/
/* BELOW 678px ( 678 / 16 = 42.375em )*/
/******************************/
@media (max-width: 42.375em) {
	.hero-bg-image {
		top: 11.25rem;
	}

	.hero-intro__description {
		max-width: 55%;
	}

	.hero-intro__description br {
		display: none;
	}

	.example-app-cards {
		gap: 1.875rem;
	}

	.example-app__card {
		grid-column: span 2;
	}

	.example-app__description br {
		display: none;
	}

	.example-app__icon {
		width: 4.75rem;
	}

	.main-features::before {
		background-size: 40rem, 25rem;
    	background-position-y: 0, bottom;
		background-position-x: -10rem, right;
	}
}

/******************************/
/* BELOW 576px ( 576 / 16 = 36em )*/
/******************************/
@media (max-width: 36em) {
	.hero-bg-image {
		top: 6.25rem;
	}

	.hero-intro {
		/* -30% from its previous values */
		padding: 5rem 0;
	}

	.hero-intro__title {
		margin-bottom: 5.075rem;
	}

	.hero-info {
		grid-template-columns: 1fr;
		/* -50% from its previous values */
		gap: 1.6875rem;
	}

	.hero-info__card--inner {
		display: grid;
		grid-template-columns: 1fr 2fr;
		align-items: center;
		justify-items: center;
	}

	.hero-info__icon {
		margin-bottom: unset;
	}

	.hero-info__description {
		text-align: left;
	}

	.hero-info__description br {
		display: none;
	}

	/* ------------- MAIN FEATURES -------------- */
	.main-features {
		padding: var(--main-features-padding);
	}

	.main-features__title {
		max-width: unset;
		margin-bottom: 3.75rem;
	}

	.main-features__subtitle {
		text-align: center;
	}

	.main-features-row {
		grid-template-columns: 1fr;
	}

	.main-features-row:not(:last-child) {
		margin-bottom: 3.125rem;
	}

	.main-features-row:last-child {
		margin-bottom: 6.75rem;
	}

	.reversed {
		grid-row: unset;
		grid-column: unset;
	}

	.main-features-content--wrapper:last-child:not(.reversed) {
		padding: 4.375rem;
	}

	.main-features-content--wrapper:last-child {
		padding: 4.375rem;
		border-radius: 2rem;
		text-align: left;
	}

	.main-features__icon {
		width: 6.25rem;
		position: relative;
		top: 2.5rem;
	}

	/* ------------- FOOTER ------------- */
	.footer__logo{
		position:absolute
	}

	.footer-grid {
		padding: 3.125rem 0;
		gap: 2.125rem 0.625rem;
	}

	.footer__item:nth-child(1) {
		grid-column: span 2;
	}

	.footer__item:nth-child(2) {
		grid-column: span 3;
	}

	.footer__item:nth-child(4) {
		grid-row: 2;
		grid-column: 6 / 3;
	}

	.footer__item:nth-child(5) {
		grid-row: 2;
		grid-column: span 3;
	}

	.footer__icon {
		width: 2.65625rem;
	}

	.footer-subsection__list--community li:not(:last-child) {
		margin-right: 2.1875rem;
	}

	.footer-subsection__item:not(:last-child) {
		margin-bottom: 1.75rem;
	}
}

/******************************/
/* BELOW 576px ( 576 / 16 = 36em )*/
/******************************/
@media (max-width: 36em) {
	.footer__item:nth-child(2) {
		margin-left: 3em;
	}

	.footer__item:nth-child(4) {
		margin-left: 3em;
	}
}

/******************************/
/* BELOW 460px ( 460 / 16 = 28.75em )*/
/******************************/
@media (max-width: 28.75em) {
	.hero-intro__title {
		margin-bottom: 3.55rem;
	}
}

/******************************/
/* BELOW 320px ( 320 / 16 = 20em )*/
/******************************/
@media (max-width: 20em) {
	.hero-bg-image {
		top: 11.5rem;
	}

	.example-app__card {
		grid-column: span 4;
	}

	.example-app__card--inner {
		display: grid;
		grid-template-columns: 1fr 2fr;
		column-gap: 1.25rem;
		align-items: center;
		justify-items: center;
	}

	.example-app__icon {
		margin-bottom: unset;
	}

	.example-app__description {
		text-align: left;
	}

	.footer-grid {
		max-width: 90%;

	}
}