.contact-cover {
	background-color: var(--background-primary-color);
	text-align: center;
	min-height: 100vh;
	padding-top: 10em;
	padding-right: clamp(1em, 4vw, 5em);
	padding-left: clamp(1em, 4vw, 5em);

	& h1 {
		color: #ffffff;
	}

	& .text-secondary {
		font-size: 7rem;
		color: var(--secondary-color);
		padding-top: 0.3em;
		line-height: 1em;
	}
}

.white-bird {
	height: 150px;
	margin-top: 1.5em;
	margin-bottom: 1em;
}

.contact {
	background-color: var(--background-secondary-color);
	min-height: 100vh;
	padding-top: 5em;
	padding-right: clamp(1em, 4vw, 5em);
	padding-left: clamp(1em, 4vw, 5em);

	& h1 {
		color: var(--primary-color);
		padding-bottom: 1.5em;
	}
}

form {
	display: flex;
	flex-direction: column;
	width: 60%;
	margin: auto;
	gap: 2.5em;

	& .redirect-link {
		align-self: flex-end;
		border: none;
		width: 200px;
		margin-bottom: 5em;
		cursor: pointer;
	}
}

.form-row {
	display: flex;
	gap: 3em;
	width: 100%;

	&.recaptcha {
		justify-content: end;
	}
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1;

	&.recaptcha {
		flex: unset;
	}
}

input,
textarea {
	font-family: 'dosis', sans-serif;
	color: var(--primary-color);
	border-radius: 15px;
	border: solid thin var(--primary-color);
	padding: 10px;
	text-align: center;
	flex: 1;
	min-width: 0;
}

input::placeholder,
textarea::placeholder {
	text-align: center;
	text-transform: uppercase;
}

textarea:placeholder-shown {
	padding-top: calc(100px - 0.5em);
}

textarea {
	width: 100%;
	height: 200px;
	resize: none;
	text-align: left;
	flex: none;
}

@media screen and (max-width: 1440px) {
	.contact-cover .text-secondary {
		font-size: 4.5rem;
	}
}

@media screen and (max-width: 1280px) {
	.contact-cover h1 {
		font-size: 3em;
	}

	.contact-cover .text-secondary {
		font-size: 3.5rem;
	}
}

@media screen and (max-width: 1130px) {
	.contact-cover {
		min-height: 750px;
	}
}

@media screen and (max-width: 1025px) {
	.contact-cover {
		min-height: unset;
		padding-bottom: 3em;
		padding-top: clamp(4em, 6vw, 8em);
	}

	.contact {
		min-height: unset;
		padding-top: clamp(4em, 6vw, 8em);
	}

	form {
		width: 80%;
	}

	.form-row {
		gap: 1em;
	}
}

@media screen and (max-width: 740px) {
	.contact-cover h1 {
		font-size: 2.5em;
	}

	.contact-cover .text-secondary {
		font-size: 3rem;
	}

	form {
		width: 100%;
	}
}

@media screen and (max-width: 510px) {
	.contact-cover h1 {
		font-size: 2em;
	}

	.contact-cover .text-secondary {
		font-size: 2.3rem;
	}

	form {
		gap: 1em;
	}

	form .redirect-link {
		align-self: center;
	}

	.form-row:not(.recaptcha) {
		flex-direction: column;
	}

	.form-row.recaptcha {
		justify-content: center;
	}
}