.contact {
	gap: 80px;
}
.contact h3 {
	font-size: 40px;
	text-transform: capitalize;
	line-height: 1.4;
}
.contact .box {
	position: relative;
	padding: 40px 60px;
	border-radius: 10px;
	background: var(--gray);
	box-sizing: border-box;
}
.contact .gray_bg {
	padding: 60px;
	gap: 20px;
	border-radius: 10px;
	background: var(--gray);
	font-size: 20px;
	line-height: 1.4;
	box-sizing: border-box;
}
.contact .gray_bg h3 {
	text-transform: uppercase;
}
.contact .map {
	position: relative;
	width: 100%;
	height: 480px;
	overflow: hidden;
}
.contact .map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.contact .form {
	gap: 10px;
}
.contact .form > div {
	width: calc(50% - 5px);
}
.contact .form > div input {
	display: block;
	width: 100%;
	height: 54px;
	border-radius: 10px;
	font-size: 16px;
	padding: 0 20px;
	box-sizing: border-box;
}
.contact .form > div.w100 {
	width: 100%;
}
.contact .form > div textarea {
	display: block;
	width: 100%;
	height: 200px;
	resize: none;
	border-radius: 10px;
	font-size: 16px;
	padding: 20px;
	border: 0;
	box-sizing: border-box;
}
.contact .form > div button {
	width: 80px;
	height: 38px;
	font-family: "Source Sans 3", sans-serif;
	font-size: 16px;
	font-weight: 700;
	border-radius: 5px;
	margin-top: 10px;
}





@media screen and (max-width: 1280px) {
	.contact h3 {
		font-size: 28px;
	}
	.contact .gray_bg {
		font-size: 18px;
	}
}
@media screen and (max-width: 1024px) {
	.contact {
		gap: 40px;
	}
	.contact h3 {
		font-size: 20px;
	}
	.contact .box {
		padding: 20px 30px;
	}
	
	.contact .gray_bg {
		padding: 30px;
		font-size: 16px;
	}
	.contact .map {
		height: 360px;
	}
}
@media screen and (max-width: 768px) {
	.contact .form > div {
		width: 100%;
	}
	.contact .form > div input,
	.contact .form > div textarea {
		font-size: 14px;
	}
}
@media screen and (max-width: 480px) {
}