:root {
	--header-height: 3.5rem;

	/*========== Colors ==========*/
	/*Color mode HSL(hue, saturation, lightness)*/
	--first-color: #d2c1af;
	--first-color-alt: #372d24;
	--second-color: #292136;
	--second-color-alt: #211b15;
	--text-color: #cfcfcf;
	--white-color: #fff;
	--body-color: #0b0c0c;

	/*========== Font and typography ==========*/
	/*.5rem = 8px | 1rem = 16px ...*/
	--body-font: "Roboto", sans-serif;
	--design-font: "Italiana", sans-serif;
	--h1-font-size: 2.5rem;
	--h2-font-size: 1.25rem;
	--h3-font-size: 1rem;
	--normal-font-size: 1.5rem;
	--small-font-size: 1.2rem;
	--smaller-font-size: 0.75rem;

	/*========== Font weight ==========*/
	--font-medium: 500;
	--font-semi-bold: 600;

	/*========== z index ==========*/
	--z-tooltip: 10;
	--z-fixed: 1000;
}

section.home {
	background: linear-gradient(rgba(0, 0, 0, 0.77), rgba(0, 0, 0, 0.77)),
		url(/assets/images/project-images/background.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.home-container {
	height: 70vh;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
}

.contact-form-container {
	display: grid;
	grid-template-columns: 1fr 2fr; /* First column is 1 part, second column is 2 parts */
	padding: 5rem 0;
}

.card-content {
	display: flex;
	flex-direction: column;
	background: var(--first-color-alt);
	justify-content: center;
	gap: 4rem;
	padding: 8rem;
}

.card-content-header {
	color: var(--first-color);
	font-family: var(--design-font);
	font-size: 3.8rem;
}
.card-content-desc {
	color: var(--text-color);
	margin: 1rem 0;
	font-size: 1.6rem;
	line-height: normal;
}

.contact-info-details {
	display: flex;
	flex-direction: column;
}

.contact-info {
	display: flex;
	align-items: center;
	margin-bottom: 4rem;
	transition: transform 0.3s ease; /* Smooth transition for the hover effect */
}

.info-icon {
	background: var(--first-color);
	color: var(--body-color);
	font-size: 2.5rem;
	padding: 0.8rem;
	margin-right: 1.5rem;
}

.details {
	display: flex;
	flex-direction: column;
	color: var(--first-color);
}

.details p {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.details span {
	color: var(--text-color);
	font-style: 1.2rem;
}

.contact-info:hover {
	transform: translateY(-10px); /* Move the div up by 10px on hover */
}

.contact-form-section {
	display: flex;
	flex-direction: column;
	padding: 8rem;
	justify-content: space-between;
	gap: 5rem;
	border: 1px solid var(--first-color-alt);
}

.contact-form-section {
	padding: 8rem;
	border: 1px solid var(--first-color-alt);
}

.input-field {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 1rem;
}

.input-field div {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
}

label {
	color: var(--first-color);
	text-transform: uppercase;
}
.name-input-field label,
.phone-number-input label,
.email-input label,
.project-input-field label,
.project-location-field label,
.subject-field label,
.text-area label {
	margin-bottom: 1.5rem;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select {
	width: 100%;
	height: 5rem;
	outline: none;
	padding: 1rem;
	background: var(--first-color-alt);
	color: var(--first-color);
	border: 1px solid var(--first-color-alt);
	font-size: 1.2rem;
}

.subject-input-field {
	width: 100%;
	display: flex;
	margin: 2rem 0;
}

select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: var(--first-color);
	color: var(--first-color-alt);
	background-image: none; /* Remove default arrow in some browsers */
	position: relative;
}

/* Custom arrow using a pseudo-element */
.select-container {
	position: relative;
	display: inline-block;
	width: 100%; /* Adjust width as needed */
}

.select-container::after {
	content: "\25BC"; /* Unicode character for downward arrow */
	position: absolute;
	top: 50%;
	right: 10px; /* Adjust right position as needed */
	transform: translateY(-50%);
	pointer-events: none; /* Make the arrow non-interactive */
	font-size: 1.5rem;
	background-color: var(--first-color-alt);
	color: var(--body-color); /* Arrow color */
}
textarea {
	width: 100%;
	height: 15rem;
	outline: none;
	padding: 1rem;
	background: var(--first-color-alt);
	color: var(--first-color);
	border: 1px solid var(--first-color-alt);
	font-size: 1.2rem;
	margin: 2rem 0;
}

button {
	margin-top: 5rem;
}

select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

textarea {
	resize: vertical;
}

.map-container {
	width: 100%;
	height: 400px; /* Set the desired height for the map */
	position: relative;
}

.map-container iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

@media screen and (max-width: 1024px) {
	.contact-form-container {
		display: grid;
		grid-template-columns: 1fr; /* First column is 1 part, second column is 2 parts */
		padding: 5rem 0;
	}

	.card-content,
	.contact-form-section {
		padding: 6rem 3rem;
	}
}

@media screen and (max-width: 768px) {
	.input-field {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		margin-bottom: 1rem;
	}
}