/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* RESET */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ROOT */

:root {
	--unit: 40px;

	--primary-color: #236C50;
	--secondary-color: #47C291;
	--primary-background-color: #E1F5EE;
	--secondary-background-color: #F0FAF6;

	--white-color: #FFFFFF;

	--font-size: 16px;
	--line-height: 28px;

	--font-size-h1: 3rem;
	--line-height-h1: 4rem;
	--font-size-h2: 1.8rem;
	--line-height-h2: 2.8rem;
	--font-size-h3: 2rem;
	--line-height-h3: 2rem;
	--font-size-h4: 1.6rem;
	--line-height-h4: 2.6rem;

	--font-size--large: 11rem;
	--line-height--large: 11rem;

	--font-size--small: 0.72rem;
	--line-height--small: 1.2rem;
}

@media (max-width: 1800px) {
	:root {
		font-size: 14px;
		line-height: 24px;
	}
}

@media (max-width: 1440px) {
	:root {
		--font-size--large: 8rem;
		--line-height--large: 8rem;
	}
}

@media (max-width: 1024px) {
	:root {
		--font-size-h1: 2rem;
		--line-height-h1: 3rem;

		--font-size--large: 11vw;
		--line-height--large: 11vw;
	}
}

@media (max-width: 600px) {
	:root {
		--font-size-h1: 1.7rem;
		--line-height-h1: 2.7rem;
	}
}

/* HEADLINES */

h1,
h2,
h3 {
	font-weight: 300;
	color: var(--primary-color);
}

h1:nth-child(n+2),
h2:nth-child(n+2),
h3:nth-child(n+2) {
	margin-top: calc(var(--unit) * 1);
}

h1 {
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
}

h1.special {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--secondary-color);
}

h2 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
}

h3 {
	font-size: var(--font-size-h3);
	font-weight: 700;
	line-height: var(--line-height-h3);
	text-transform: uppercase;
	color: var(--secondary-color);
}

h4 {
	font-weight: 400;
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
}

/* TEXT */

p.small {
	font-size: var(--font-size--small);
	line-height: var(--line-height--small);
}

p.small a {
	text-decoration: none;
}

p a {
	color: var(--primary-color);
}

@media (hover: hover) {
	p a {
		transition: color .2s ease-out;
	}

	p a:hover {
		color: var(--secondary-color);
	}
}

p.short {
	width: calc((100% - var(--unit) * 1) / 2);
}

p:nth-child(n+2) {
	margin-top: calc(var(--unit) * 1);
}

/* LIST */

ul {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: calc(var(--unit) * 0.15);
}

ul.check {
	width: 100%;
}

ul.check:nth-child(n+2) {
	margin-top: calc(var(--unit) * 0.5);
}

ul li {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: calc(var(--unit) * 0.25);
	width: 100%;
}

ul.check li {
	align-items: flex-start;
}

ul.check li::before {
	content: '\f14a';

  font-family: 'Font Awesome 6 Pro';
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
	color: var(--secondary-color);
}

body.meta .main ul {
	list-style-type: square;
	margin-left: 20px;
}

body.meta .main ul:nth-child(n+2) {
	margin-top: calc(var(--unit) * 1);
}

body.meta .main ul li {
	display: list-item;
}

/* BODY */

body {
	background-color: var(--primary-background-color);

	font-family: 'Poppins', sans-serif;
	font-size: var(--font-size);
	line-height: var(--line-height);
	color: var(--primary-color);
}

/* HEADER */

.header {
	z-index: 1000;
	position: fixed;
	top: calc(var(--unit) * 2.2);
	left: calc(var(--unit) * 2.2);
	width: auto;
	height: calc(var(--unit) * 0.75);
}

@media (max-width: 1820px) {
	.header {
		position: absolute;
	}
}

@media (max-width: 600px) {
	.header {
		top: calc(var(--unit) * 1);
    	left: calc(var(--unit) * 1);
	}
}

body.meta .header {
	display: none;
}

.header__content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: inherit;
	height: inherit;
}

.header .logo {
	width: inherit;
	height: inherit;

	line-height: 0;
}

.header .logo a {
	display: block;
	height: inherit;

	line-height: inherit;
}

.header .logo img {
	width: auto;
	height: inherit;
}

/* FOOTER */

.footer {
	width: 100%;
	background-color: var(--secondary-background-color);
}

.footer__content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: calc(var(--unit) * 2);
	margin: 0 auto;
	padding: calc(var(--unit) * 3) 0;
	max-width: 1440px;
}

@media (max-width: 1800px) {
	.footer__content {
		padding: calc(var(--unit) * 2);
	}
}

@media (max-width: 700px) {
	.footer__content {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: calc(var(--unit) * 1);
		padding: calc(var(--unit) * 1);

		text-align: left;
	}
}

.footer__content .footer__content--left {
	flex: 1;
}

.footer__content .footer__content--right {
	flex: 0;
}

.footer__content .footer__content--left h3 a {
	color: var(--secondary-color);
}

@media (hover: hover) {
	.footer__content .footer__content--left h3 a {
		transition: color .2s ease-out;
	}

	.footer__content .footer__content--left h3 a:hover {
		color: var(--primary-color);
	}
}

/*
.footer__content p {
	font-size: var(--font-size--small);
	line-height: var(--line-height--small);
	text-transform: uppercase;
}
*/
.footer__content p:nth-child(n+2) {
    margin-top: calc(var(--unit) * 0.25);
}

.footer__content ul li {
	justify-content: flex-end;
}

@media (max-width: 700px) {
	.footer__content ul li {
		justify-content: flex-start;
	}
}

.footer__content a {
	text-decoration: none;
	color: var(--primary-color);
}

.footer__content a.active {
	color: var(--secondary-color);
}

@media (hover: hover) {
	.footer__content a {
		transition: color .2s ease-out;
	}

	.footer__content a:hover {
		color: var(--secondary-color);
	}
}

/* MAIN */

.main {

}

/* SECTION */

.section {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.section ul li a {
	color: var(--primary-color);
}

.section__background--1::before {
	pointer-events: none;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/background-1.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
}

.section__background--2::before {
	pointer-events: none;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/background-2.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right top;
}

@media (max-width: 1024px) {
	.section__background--2::before {
		display: none;
	}
}

.section__background--3::before {
	pointer-events: none;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80%;
	background-image: url('../img/background-3.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
}

.section__content {
	position: relative;
	margin: calc(var(--unit) * 3) auto;
	width: 100%;
	max-width: 1440px;
}

body:not(.meta) .section:last-child .section__content {
	margin-bottom: calc(var(--unit) * 5);
}

@media (max-width: 1800px) {
	.section__content {
		margin: calc(var(--unit) * 2) auto;
		padding: 0 calc(var(--unit) * 2);
	}
}

@media (max-width: 1440px)  {
	body:not(.meta) .section:last-child .section__content {
		margin-bottom: calc(var(--unit) * 2);
	}
}

@media (max-width: 600px) {
	.section__content {
		margin: calc(var(--unit) * 1) auto;
		padding: 0 calc(var(--unit) * 1);
	}

	body:not(.meta) .section:last-child .section__content {
		margin-bottom: calc(var(--unit) * 1);
	}
}

/* TYPEWRITER */

#typewriter {
	padding-top: calc(var(--unit) * 3);

	font-size: var(--font-size--large);
	font-weight: 700;
	line-height: var(--line-height--large);
	text-transform: uppercase;
	color: var(--secondary-color);
}

#typewriter--dynamic {

}

#cursor {
	animation: blink 1s step-end infinite;

	font-weight: 400;
}

@keyframes blink {
	from, to {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

/* COLUMNS */

.columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	gap: calc(var(--unit) * 1);
}

@media (max-width: 1440px) {
	.columns {
		flex-direction: column;
	}
}

.columns--center {
	align-items: center;
}

.column {
	/*flex: 1;*/
	width: calc((100% - var(--unit) * 1) / 2);
}

@media (max-width: 1440px) {
	.column {
		width: 100%;
	}

	.column:empty {
		display: none;
	}
}

@media (max-width: 600px) {
	.column:last-child {
		margin: 0 calc(var(--unit) * -1) calc(var(--unit) * -1) calc(var(--unit) * -1);
		width: calc(100% + var(--unit) * 2);
	}

	.column:last-child .highlight--filled {
		padding: calc(var(--unit) * 1);
		border-radius: 0;
	}
}

/* HIGHLIGHT */

.highlight {
	padding: calc(var(--unit) * 1) calc(var(--unit) * 1.25);
	height: 100%;
	background-color: var(--secondary-background-color);
	border-radius: calc(var(--unit) * 0.5);
}

@media (max-width: 600px) {
	.highlight {
		padding: calc(var(--unit) * 0.75) calc(var(--unit) * 1);
	}
}

.highlight--center {
	text-align: center;
}

.highlight--filled {
	background-color: var(--secondary-color);

	color: var(--primary-background-color);
}

.highlight--filled h2 {
	color: var(--primary-background-color);
}

.highlight--filled p:nth-child(n+2) {
	margin-top: calc(var(--unit)* 0.5);
}

.highlight--filled ul.check li::before {
	color: var(--primary-background-color);
}

.highlight--filled h4,
.highlight--filled a {
	color: var(--white-color);
}

.highlight--filled a {
	border-bottom: 2px solid var(--white-color);

	white-space: nowrap;
	text-decoration: none;
}

@media (hover: hover) {
	.highlight--filled a {
		transition: color .2s ease-out, border-color .2s ease-out;
	}

	.highlight--filled a:hover {
		color: var(--secondary-background-color);
		border-color: var(--secondary-background-color);
	}
}