/* FONT STYLES */
.index-section h2 {
	font-size: var(--h2-font-size);
	color: var(--font-colour-dark);
	font-family: var(--font-family-h2);
	line-height: var(--line-height);
	text-align: center;
}

.index-section h3 {
	font-size: var(--h3-font-size);
	color: var(--font-colour-dark);
	font-family: var(--font-family-h3);
	line-height: var(--line-height);
	text-align: center;
}

.index-section h4 {
	font-size: var(--h4-font-size);
	color: var(--font-colour-dark);
	font-family: var(--font-family-h4);
	line-height: var(--line-height);
	text-align: center;
}

.index-section p {
	font-size: var(--p-font-size);
	line-height: var(--line-height);
	color: var(--font-colour-dark);
	font-family: var(--font-family-p);
	text-align: left;
	width: 90%;
}

/**********************************************************/
/**********************************************************/
/* ------------------- */
main {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "index-section";
}
/**********************************************************/

/**********************************************************/
.index-section {
	grid-area: index-section;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows:
		auto
		minmax(20em, auto)
		auto
		minmax(20em, auto)
		auto
		minmax(20em, auto)
		auto
		minmax(20em, auto)
		auto;
	grid-template-areas:
		"above-the-fold"
		"section-heading-about"
		"about-container"
		"section-heading-features"
		"features-container"
		"section-heading-portfolio"
		"portfolio-container"
		"section-heading-contact"
		"contact-container";
}

.index-section .section-heading-about {
	grid-area: section-heading-about;
}
.index-section .section-heading-features {
	grid-area: section-heading-features;
}
.index-section .section-heading-portfolio {
	grid-area: section-heading-portfolio;
}
.index-section .section-heading-contact {
	grid-area: section-heading-contact;
}

.index-section .section-heading-about,
.index-section .section-heading-features,
.index-section .section-heading-portfolio,
.index-section .section-heading-contact {
	background-color: var(--heading-bg-colour);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1em;
}

.index-section .section-heading-about h2,
.index-section .section-heading-features h2,
.index-section .section-heading-portfolio h2,
.index-section .section-heading-contact h2 {
	color: var(--font-colour-light);
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	line-height: var(--line-height);
}

.index-section .above-the-fold {
	grid-area: above-the-fold;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: "logo-container" "info-card-container";
}

.above-the-fold .logo-container {
	grid-area: logo-container;
	background-color: var(--main-bg-colour);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 5em;
	padding-left: 1em;
	padding-right: 1em;
}

.logo-container .logo-img {
	max-width: 60em;
	max-height: 60em;
	border-radius: 50%;
	background-color: var(--logo-bg-colour);
	border: var(--border-styles-1);
}

.logo-img.width {
	width: 60em;
	height: 60em;
}

.logo-container .logo-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

.hwb-logo {
	opacity: 0;
	animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.above-the-fold .info-card-container {
	grid-area: info-card-container;
	background-color: var(--main-bg-colour);

	display: grid;
	grid-template-columns: minmax(auto, 60em) minmax(auto, 60em) minmax(
			auto,
			60em
		);
	grid-template-rows: minmax(30em, auto) minmax(60em, auto);
	grid-template-areas:
		"info-heading info-heading info-heading"
		"info-card-1 info-card-2 info-card-3";
	padding: 5em 1em;
	gap: 1em;
	justify-content: center;
	align-content: center;
}

.info-card-container .info-heading {
	grid-area: info-heading;
	background-color: var(--content-bg-colour);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	border: var(--border-styles-2);
	padding: 5em 1em;
}

.info-card-container .info-heading h2 {
	margin-bottom: 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	line-height: var(--line-height);
}

.info-card-container .info-heading p {
	text-align: center;
	width: 90%;
	margin-bottom: 1em;
}

.info-card-container .info-card-1 {
	grid-area: info-card-1;
}
.info-card-container .info-card-2 {
	grid-area: info-card-2;
}
.info-card-container .info-card-3 {
	grid-area: info-card-3;
}

.info-card-1,
.info-card-2,
.info-card-3 {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	padding: 5em 1em;
	background-color: var(--content-bg-colour);
	border-radius: 20px;
	border: var(--border-styles-2);
}

.info-card-img img {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 17em;
	height: 17em;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	border: var(--border-styles-2);
}

.info-card-1 .info-card-content,
.info-card-2 .info-card-content,
.info-card-3 .info-card-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 5em;
}

.info-card-content h3 {
	margin-bottom: 1em;
}

.info-card-content p {
	width: 90%;
}

.info-card-content p:nth-child(2) {
	margin-bottom: 0.5em;
}

/* ------------------- */
/* ------------------- */
/* ABOUT */
/* ------------------- */
.index-section .about-container {
	grid-area: about-container;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 100em;
	grid-template-areas: "bg-img-container";
}

.about-container .bg-img-container {
	grid-area: bg-img-container;
}

.bg-img-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.about-container .about-content-container {
	grid-column: 1 / span 1;
	grid-row: 1;
	z-index: 10;
	width: 100%;
	height: 100%;

	display: grid;
	grid-template-columns: minmax(auto, 100em);
	grid-template-rows: auto;
	grid-template-areas: "about-content";
	justify-content: center;
	align-content: center;
	padding: 5em 1em;
}

.about-content-container .about-content {
	grid-area: about-content;
	border-radius: 20px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	border: var(--border-styles-2);
	padding: 5em 1em;
	background: linear-gradient(
		rgba(253, 243, 199, 0.8),
		rgba(253, 243, 199, 0.9)
	);

	border: 1px solid rgba(255, 255, 255, 0.5);
	border-top: 1px solid rgba(255, 255, 255, 0.75);
	border-left: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5);
}

.about-content .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.about-content .content h2 {
	margin-bottom: 1em;
}

.about-content .content span {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.about-content .content p {
	color: var(--font-colour-dark);
	line-height: var(--line-height);
	width: 90%;
	margin-bottom: 1em;
}

.about-content .content-features-link {
	margin-top: 3em;
}

/* ------------------- */
/* ------------------- */
/* FEATURES */
/* ------------------- */
.index-section .features-container {
	grid-area: features-container;
	background-color: var(--main-bg-colour);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:
		minmax(100em, auto)
		minmax(100em, auto);
	grid-template-areas:
		"features-card-1 features-card-2 features-card-3"
		"features-card-4 features-card-5 features-card-6";

	padding: 5em 10em;
	gap: 3em;
	justify-content: center;
	align-content: center;
}

.features-container .features-card-1 {
	grid-area: features-card-1;
	background-color: var(--content-bg-colour);
}
.features-container .features-card-2 {
	grid-area: features-card-2;
	background-color: var(--content-bg-colour);
}
.features-container .features-card-3 {
	grid-area: features-card-3;
	background-color: var(--content-bg-colour);
}
.features-container .features-card-4 {
	grid-area: features-card-4;
	background-color: var(--content-bg-colour);
}
.features-container .features-card-5 {
	grid-area: features-card-5;
	background-color: var(--content-bg-colour);
}
.features-container .features-card-6 {
	grid-area: features-card-6;
	background-color: var(--content-bg-colour);
}

.features-card-1,
.features-card-2,
.features-card-3,
.features-card-4,
.features-card-5,
.features-card-6 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "features-card-bottom";
	overflow: hidden;
	border-radius: 20px;
	border: var(--border-styles-2);
}

.features-card-bottom {
	grid-area: features-card-bottom;
	background-color: var(--content-bg-colour);
}

.features-card-top {
	grid-column: 1 / span 1;
	grid-row: 1;
	z-index: 2;
	width: 100%;
	height: 100%;
	transform: translateX(0%);
}

.features-card-top img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.features-title-container {
	grid-column: 1 / span 1;
	grid-row: 1;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5em 1em;
}

.features-title-container .title {
	max-width: 50em;
	min-height: 30em;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5em 3em;
}

.features-title-container .title h2 {
	color: var(--font-colour-light);
	line-height: var(--line-height);
	margin-bottom: 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.features-title-container .title button {
	padding: 1em 2em;
	border-radius: 20px;
	border: none;
	font-size: var(--p-font-size);
	cursor: pointer;

	background-color: var(--content-bg-colour);
	color: var(--font-colour-dark);
	transition: all 0.3s ease-in-out;
}

.title button:hover {
	background-color: var(--heading-bg-colour);
	color: var(--font-colour-light);
}

#features-card-bottom-0,
#features-card-bottom-1,
#features-card-bottom-2,
#features-card-bottom-3,
#features-card-bottom-4,
#features-card-bottom-5 {
	display: none;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	padding: 5em 1em;
}

.features-card-0-bottom,
.features-card-1-bottom,
.features-card-2-bottom,
.features-card-3-bottom,
.features-card-4-bottom,
.features-card-5-bottom,
.features-card-bottom-0-p-1,
.features-card-bottom-0-p-2,
.features-card-bottom-1-p-1,
.features-card-bottom-1-p-2,
.features-card-bottom-2-p-1,
.features-card-bottom-2-p-2,
.features-card-bottom-3-p-1,
.features-card-bottom-3-p-2,
.features-card-bottom-4-p-1,
.features-card-bottom-4-p-2,
.features-card-bottom-5-p-1,
.features-card-bottom-5-p-2 {
	opacity: 0;
}

@keyframes animateFeaturesBottomCardText {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.features-card-bottom .img-container-bottom {
	width: 20em;
	height: 20em;
	border-radius: 50%;
	margin-bottom: 5em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: var(--border-styles-2);
}

.img-container-bottom img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

.features-card-bottom .text-container-bottom {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.text-container-bottom p {
	width: 90%;
	margin-bottom: 1em;
}

/* ------------------- */
/* ------------------- */
/* ------------------- */
.index-section .portfolio-container {
	grid-area: portfolio-container;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "portfolio-card-container";
}

.portfolio-container .portfolio-card-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(100em, auto);
	grid-template-areas: "portfolio-card-left portfolio-card-right";
}

.portfolio-card-container .portfolio-card-left {
	grid-area: portfolio-card-left;
	background-color: black;
}

.portfolio-card-container .portfolio-card-right {
	grid-area: portfolio-card-right;
	background-color: var(--content-bg-colour);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5em 1em;
}

.portfolio-card-right .heading {
	margin-bottom: 5em;
}

.portfolio-card-right .heading h3 {
	margin: 0.5em 0em;
}

.portfolio-card-right .content,
.portfolio-card-container .links {
	margin-bottom: 1em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.portfolio-card-right .content p,
.portfolio-card-container .links p {
	width: 90%;
	text-align: left;
}

.portfolio-card-right .visit-eva-tomala {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 3em 0em;
}

.visit-eva-tomala a {
	font-size: var(--p-font-size);
	font-family: var(--font-family-p);
}

.portfolio-card-container .portfolio-slide-card {
	grid-column: 1 / span 1;
	grid-row: 1;
	z-index: 10;
	width: 100%;
	height: 100%;
	background-color: black;
	transform: translateX(100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.portfolio-slide-card img {
	width: 80em;
	object-fit: contain;
	object-position: center;
}

/* ------------------- */
/* CONTACT */
/* ------------------- */
.index-section .contact-container {
	grid-area: contact-container;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-template-areas: "contact-card-main";
	padding: 5em 1em;
	justify-content: center;
	align-content: center;
	background-color: var(--main-bg-colour);
}

.contact-container .contact-card-main {
	grid-area: contact-card-main;
	display: grid;
	grid-template-columns: minmax(auto, 80em);
	grid-template-rows: minmax(90em, auto);
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1), 0 10px 40px rgba(0, 0, 0, 0.2);
	border: var(--border-styles-2);
}

.contact-card-main .contact-card-top {
	grid-column: 1 / span 1;
	grid-row: 1;
	z-index: 2;
	background-color: var(--content-bg-colour);

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5em 1em;
}

.contact-card-top .heading,
.contact-card-top .content,
.contact-card-top .contact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.contact-card-top .content {
	margin: 5em 0em;
}

.contact-card-top .heading h2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	line-height: var(--line-height);
}

.contact-card-top .content p {
	margin-bottom: 1em;
	width: 90%;
}

.contact-card-top button {
	padding: 1em 2em;
	border: none;
	border-radius: 20px;
	font-size: var(--p-font-size);
	margin-bottom: 1.5em;
	background-color: var(--heading-bg-colour);
	color: var(--font-colour-light);
	cursor: pointer;
	transition: all 0.5s ease-in;
	line-height: var(--line-height);
}

.contact-card-top a {
	padding: 1em 2em;
	border: none;
	border-radius: 20px;
	font-size: var(--p-font-size);
	font-family: var(--font-family-p);
	cursor: pointer;
	text-decoration: none;
	background-color: var(--heading-bg-colour);
	color: var(--font-colour-light);
	transition: all 0.5s ease-in;
}

.contact-card-top button:hover,
.contact-card-top a:hover {
	background-color: var(--font-colour-light);
	color: var(--font-colour-dark);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ********************** */
/* ********************** */

.contact-card-main .contact-card-right {
	grid-column: 1 / span 1;
	grid-row: 1;
	z-index: 3;
	background-color: var(--content-bg-colour);
	transform: translateX(100%);

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(10em, auto) auto;
	grid-template-areas: "heading" "form";
	padding: 1em 3em;
}

.contact-card-right .heading {
	grid-area: heading;
	display: flex;
	justify-content: center;
	align-items: center;
}

form {
	grid-area: form;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto minmax(25em, auto) auto;
	grid-template-areas:
		"form-group-1 form-group-3"
		"form-group-2 form-group-2"
		"form-group-4 form-group-4"
		"form-group-5 form-group-5";
	gap: 1em;
}

.form-group-1 {
	grid-area: form-group-1;
}

.form-group-2 {
	grid-area: form-group-2;
}

.form-group-3 {
	grid-area: form-group-3;
}

.form-group-4 {
	grid-area: form-group-4;
}

.form-group-1 label,
.form-group-2 label,
.form-group-3 label,
.form-group-4 label {
	font-size: var(--p-font-size);
	font-family: var(--font-family-h2);
	color: var(--font-colour-dark);
	margin-bottom: 0.5em;
}

.form-group-1 input,
.form-group-2 input,
.form-group-3 input {
	padding: 1em;
	width: 100%;
	font-size: 2rem;
	border-radius: 10px;
	border: var(--border-styles-3);
	background-color: var(--heading-bg-colour);
	color: var(--font-colour-light);
	transition: all 0.5s ease;
}

.form-group-1 input:focus,
.form-group-2 input:focus,
.form-group-3 input:focus,
.form-group-1 input:not(:placeholder-shown),
.form-group-2 input:not(:placeholder-shown),
.form-group-3 input:not(:placeholder-shown) {
	background-color: var(--font-colour-light);
	color: var(--font-colour-dark);
}

.form-group-4 .textarea {
	width: 100%;
	height: 90%;
	font-size: 2rem;
	padding: 0.5em;
	border-radius: 10px;
	border: var(--border-styles-3);
	background-color: var(--font-colour-dark);
	color: var(--font-colour-light);
	resize: none;
	font-family: var(--font-family-p);
	transition: all 0.5s ease;
}

.form-group-4 .textarea::placeholder {
	color: var(--font-colour-light);
	font-style: italic;
}

.form-group-4 .textarea:focus,
.form-group-4 .textarea:not(:placeholder-shown) {
	background-color: var(--font-colour-light);
	color: var(--font-colour-dark);
}

.form-group-5 {
	grid-area: form-group-5;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: minmax(10em, auto);
	grid-template-areas: "captcha input-btn";
	justify-content: center;
	align-items: center;
}

.input-btn {
	grid-area: input-btn;
	width: 100%;
	height: 8em;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.input-btn button {
	height: 100%;
	width: 100%;
	cursor: pointer;
	font-size: var(--p-font-size);
	background-color: var(--font-colour-dark);
	color: var(--font-colour-light);
	text-align: center;
	border-radius: 20px;
	border: none;
	transition: all 0.5s ease-in-out;
}

.input-btn button:hover {
	background-color: var(--font-colour-light);
	color: var(--font-colour-dark);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.form-group-5 .captcha {
	grid-area: captcha;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas: "p input";
}

.captcha p {
	grid-area: p;
	font-size: var(--p-font-size);
	font-family: var(--font-family-p);
	display: flex;
	flex-direction: row;
	align-items: center;
}

.captcha span {
	font-size: var(--p-font-size);
	font-family: var(--font-family-p);
	padding: 0em 0.5em;
}

.captcha input {
	grid-area: input;
	height: 2.5em;
	width: 2.5em;
	text-align: center;
	font-size: var(--p-font-size);
	border-radius: 50%;
	border: var(--border-styles-3);
}

input::placeholder {
	color: var(--font-colour-light);
	font-family: var(--p-font-size);
	font-style: italic;
}

/* *************************** */
/* *************************** */

.contact-card-main .contact-card-bottom {
	grid-column: 1 / span 1;
	grid-row: 1;
	z-index: 5;
	background-color: var(--content-bg-colour);
	transform: translateY(100%);

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(13em, auto) auto auto;
	grid-template-areas:
		"heading"
		"msg"
		"img";
}

.contact-card-bottom .heading {
	grid-area: heading;
	background-color: var(--heading-bg-colour);
}
.contact-card-bottom .msg {
	grid-area: msg;
	background-color: var(--content-bg-colour);
	padding: 1em;
}
.contact-card-bottom .img {
	grid-area: img;
	background-color: var(--content-bg-colour);
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	padding: 1em;
}

.contact-card-bottom .heading,
.contact-card-bottom .msg,
.contact-card-bottom .img {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1em;
}

.contact-card-bottom .heading h2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: var(--font-colour-light);
	margin-bottom: 1em;
}

.contact-card-bottom .heading h3 {
	color: var(--font-colour-light);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.contact-card-bottom .msg p {
	width: 90%;
	text-align: center;
	margin-bottom: 0.5em;
}

.msg p span {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.img .img-container {
	max-width: 30em;
	max-height: 30em;
	background-color: var(--logo-bg-colour);
	border: var(--border-styles-1);
	border-radius: 50%;
}

.img-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/******************************/
/******************************/
/******************************/

.contact-card-main .contact-card-left {
	grid-column: 1 / span 1;
	grid-row: 1;
	z-index: 4;
	transform: translateX(-100%);
}

.contact-card-left {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(5em, auto) auto;
	grid-template-areas:
		"message"
		"animation-container";
}

.contact-card-left .message {
	grid-area: message;
	background-color: var(--heading-bg-colour);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.contact-card-left .message h2 {
	line-height: var(--line-height);
	color: var(--font-colour-light);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.contact-card-left .animation-container {
	grid-area: animation-container;
	display: grid;
	grid-template-columns: minmax(auto, 40em);
	grid-template-rows: auto;
	grid-template-areas: "animation-window";
	justify-content: center;
	align-content: center;
	background-color: var(--content-bg-colour);
	padding: 1em;
}

.animation-container .animation-window {
	grid-area: animation-window;
	border-radius: 50%;
	display: flex;
	overflow: hidden;
	border: var(--border-styles-2);
	position: relative;
}

.animation-window .animation-envelope {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10em;
	height: 10em;
	/* animation: floatingAnimation 10s linear infinite; */
}

.animation-envelope img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.animation-window .bg-animation-container {
	display: flex;
	transform: translateX(0%);
	/* animation: slideAnimation 30s linear infinite; */
}

.animation-container .bg-animation-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bg-animation-container .second-img {
	transform: scaleX(-1);
}

/******************************/
/******************************/
/******************************/
.contact-card-main .contact-card-error {
	grid-column: 1 / span 1;
	grid-row: 1;
	z-index: 6;
	background-color: var(--content-bg-colour);
	transform: translateX(-100%);

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "title";
}

.contact-card-error .title {
	grid-area: title;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--heading-bg-colour);
	padding: 5em 1em;
}

.contact-card-error .title h2,
.contact-card-error .title h3 {
	line-height: var(--line-height);
	color: var(--font-colour-light);
}

.contact-card-error .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 3em 1em;
}

.contact-card-error .content p {
	width: 90%;
	text-align: center;
	margin-bottom: 0.5em;
}

.contact-card-error .content a {
	font-size: var(--p-font-size);
	background-color: var(--heading-bg-colour);
	color: var(--font-colour-light);
	padding: 1em 2em;
	border-radius: 20px;
	text-decoration: none;
	margin: 0.5em 0em;
	transition: all 0.5s ease;
}

.contact-card-error .content span {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.contact-card-error .content a:hover {
	color: var(--heading-bg-colour);
	background-color: var(--font-colour-light);
}

/* ------------------- */
/* ------------------- */
/* ------------------- */
.viewport-section .footer {
	grid-area: footer;
	background-color: lightseagreen;
}
/* ------------------- */
/* ANIMATIONS */
@keyframes floatingAnimation {
	0%,
	100% {
		transform: translate(-50%, -50%) translateZ(0px) rotate(0deg);
	}
	25% {
		transform: translate(-50%, -70%) translateZ(20px) rotate(10deg);
	}
	50% {
		transform: translate(-50%, -60%) translateZ(0px) rotate(-10deg);
	}
	75% {
		transform: translate(-50%, -20%) translateZ(20px) rotate(10deg);
	}
}

@keyframes slideAnimation {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-200%);
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes slideLeft {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-100%);
	}
}

@keyframes slideRight {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(100%);
	}
}

@keyframes slideLeftContactCard {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0%);
	}
}

@keyframes contactCardLeftSlideRight {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(0%);
	}
}

@keyframes slideLeftPortfolioCard {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0%);
	}
}

@keyframes contactCardBottomSlideUp {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0%);
	}
}

/* MEDIA QUERIES */
@media (max-width: 1920px) {
	.index-section .features-container {
		grid-area: features-container;
		background-color: var(--main-bg-colour);
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows:
			minmax(85em, auto)
			minmax(85em, auto);
		grid-template-areas:
			"features-card-1 features-card-2 features-card-3"
			"features-card-4 features-card-5 features-card-6";

		padding: 5em 1em;
		gap: 1em;
	}

	.portfolio-slide-card img {
		width: 60em;
		object-fit: contain;
		object-position: center;
	}
}

@media (max-width: 1440px) {
	.index-section {
		grid-area: index-section;

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			auto
			minmax(17em, auto)
			auto
			minmax(17em, auto)
			auto
			minmax(17em, auto)
			auto
			minmax(17em, auto)
			auto;
		grid-template-areas:
			"above-the-fold"
			"section-heading-about"
			"about-container"
			"section-heading-features"
			"features-container"
			"section-heading-portfolio"
			"portfolio-container"
			"section-heading-contact"
			"contact-container";
	}

	.index-section h2 {
		font-size: var(--mq-h2-font-size);
	}

	.index-section h3 {
		font-size: var(--mq-h3-font-size);
	}

	.index-section h4 {
		font-size: var(--mq-h4-font-size);
	}

	.index-section p {
		font-size: var(--mq-p-font-size);
	}

	.above-the-fold .info-card-container {
		grid-area: info-card-container;
		background-color: var(--main-bg-colour);

		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: minmax(30em, auto) minmax(60em, auto);
		grid-template-areas:
			"info-heading info-heading info-heading"
			"info-card-1 info-card-2 info-card-3";
		padding: 5em 1em;
		gap: 1em;
	}

	.index-section .about-container {
		grid-area: about-container;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 80em;
		grid-template-areas: "bg-img-container";
	}

	.index-section .features-container {
		grid-area: features-container;
		background-color: var(--main-bg-colour);
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows:
			minmax(70em, auto)
			minmax(70em, auto)
			minmax(70em, auto);
		grid-template-areas:
			"features-card-1 features-card-2"
			"features-card-3 features-card-4"
			"features-card-5 features-card-6";

		padding: 5em 10em;
		gap: 3em;
	}

	.about-container .about-content-container {
		grid-column: 1 / span 1;
		grid-row: 1;
		z-index: 10;
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: minmax(auto, 80em);
		grid-template-rows: auto;
		grid-template-areas: "about-content";
		justify-content: center;
		align-content: center;
		padding: 3em 1em;
	}

	.portfolio-container .portfolio-card-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(60em, auto);
		grid-template-areas: "portfolio-card-left portfolio-card-right";
	}

	.portfolio-slide-card img {
		width: 80%;
		object-fit: contain;
		object-position: center;
	}

	.visit-eva-tomala a {
		font-size: var(--mq-p-font-size);
		font-family: var(--font-family-p);
	}

	.contact-container .contact-card-main {
		grid-area: contact-card-main;
		display: grid;
		grid-template-columns: minmax(auto, 60em);
		grid-template-rows: minmax(70em, auto);
		overflow: hidden;
		border-radius: 20px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1), 0 10px 40px rgba(0, 0, 0, 0.2);
		border: var(--border-styles-2);
	}

	.contact-card-top .content {
		margin: 3em 0em;
	}

	.contact-card-error .content a,
	.features-title-container .title button,
	.contact-card-top button,
	.contact-card-top a,
	.form-group-1 label,
	.form-group-2 label,
	.form-group-3 label,
	.form-group-4 label,
	.input-btn button {
		font-size: var(--mq-p-font-size);
	}

	.features-card-bottom .img-container-bottom {
		width: 17em;
		height: 17em;
	}
}

/* ******************************************** */
/* ******************************************** */

@media (max-width: 1024px) {
	.index-section .features-container {
		padding: 5em 1em;
		gap: 1em;
	}

	.above-the-fold .info-card-container {
		grid-area: info-card-container;
		background-color: var(--main-bg-colour);

		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows:
			minmax(30em, auto)
			minmax(60em, auto)
			auto;
		grid-template-areas:
			"info-heading info-heading"
			"info-card-1 info-card-2"
			"info-card-3 info-card-3";
		padding: 5em 1em;
		gap: 1em;
	}

	.index-section .about-container {
		grid-area: about-container;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 80em;
		grid-template-areas: "bg-img-container";
	}

	.portfolio-card-right .content p,
	.portfolio-card-container .links p,
	.info-card-content p {
		max-width: 40em;
	}

	.portfolio-container .portfolio-card-container {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(60em, auto);
		grid-template-areas: "portfolio-card-right";
		overflow: hidden;
	}

	.portfolio-card-container .portfolio-slide-card {
		grid-column: 1 / span 1;
		grid-row: 1;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-color: black;
		transform: translateX(0%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	@keyframes slideLeftPortfolioCard {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(100%);
		}
	}
}

@media (max-width: 768px) {
	:root {
		--mq-p-font-size: 2.3rem;
	}

	.index-section .about-container {
		grid-area: about-container;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas: "bg-img-container";
	}

	.index-section .features-container {
		grid-area: features-container;
		background-color: var(--main-bg-colour);
		display: grid;
		grid-template-columns: minmax(auto, 60em);
		grid-template-rows:
			minmax(70em, auto) minmax(70em, auto) minmax(70em, auto) minmax(
				70em,
				auto
			)
			minmax(70em, auto) minmax(70em, auto);
		grid-template-areas:
			"features-card-1"
			"features-card-2"
			"features-card-3"
			"features-card-4"
			"features-card-5"
			"features-card-6";

		justify-content: center;
		align-content: center;
		padding: 5em 1em;
	}
}

@media (max-width: 540px) {
	.form-group-5 {
		grid-area: form-group-5;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(10em, auto) minmax(10em, auto);
		grid-template-areas: "captcha" "input-btn";
	}

	.form-group-5 .captcha {
		grid-area: captcha;
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: "p input";
		justify-items: center;
	}
}

@media (max-width: 425px) {
	.above-the-fold .info-card-container {
		grid-area: info-card-container;
		background-color: var(--main-bg-colour);

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			minmax(30em, auto)
			minmax(60em, auto)
			minmax(60em, auto);
		grid-template-areas:
			"info-heading"
			"info-card-1"
			"info-card-2"
			"info-card-3";
		padding: 5em 1em;
		gap: 1em;
	}

	form {
		grid-area: form;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto minmax(25em, auto) auto;
		grid-template-areas:
			"form-group-1"
			"form-group-3"
			"form-group-2"
			"form-group-4"
			"form-group-5";
		gap: 1em;
	}

	.form-group-5 {
		grid-area: form-group-5;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(10em, auto) minmax(10em, auto);
		grid-template-areas: "captcha" "input-btn";
		justify-content: center;
		align-items: center;
	}

	.contact-card-main .contact-card-right {
		padding: 1em;
	}
}

@media (max-width: 375px) {
	.form-group-5 .captcha {
		grid-area: captcha;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: "p" "input";
		background-color: pink;
	}

	.captcha p {
		grid-area: p;
		font-size: var(--p-font-size);
		font-family: var(--font-family-p);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 0.5em;
	}
}

@media (max-width: 355px) {
	.contact-card-top button span {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
}