/* FONT STYLES */
.contact-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;
}

.contact-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;
}

.contact-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;
}

.contact-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: "contact-section";
}
/**********************************************************/

/**********************************************************/
/* ------------------- */
/* CONTACT */
/* ------------------- */
.contact-section {
	grid-area: contact-section;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(15em, auto) minmax(70vh, auto);
	grid-template-areas: "heading" "contact-card-container";
	justify-content: center;
	align-content: center;
	background-color: var(--main-bg-colour);
}

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

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

.contact-section .contact-card-container {
	grid-area: contact-card-container;
	display: grid;
	grid-template-columns: minmax(auto, 80em);
	grid-template-rows: minmax(90em, auto);
	grid-template-areas: "contact-card-main";
	justify-content: center;
	align-content: center;
	padding: 5em 1em;
}

.contact-card-container .contact-card-main {
	grid-area: contact-card-main;
	display: grid;

	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: 3em 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 {
	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);
}

/* ------------------- */
/* ------------------- */
/* ------------------- */
/* 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 (max-width: 1440px) {
	.contact-section .contact-card-container {
		grid-area: contact-card-container;
		display: grid;
		grid-template-columns: minmax(auto, 60em);
		grid-template-rows: minmax(70em, auto);
		grid-template-areas: "contact-card-main";
		justify-content: center;
		align-content: center;
		padding: 5em 1em;
	}

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

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

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

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

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

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

@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;
	}
}