/*
Page: Home
*/
#hero {
	max-height: calc(100vh - 180px);
	height: 700px;
}

#hero .container {
	position: absolute;
	inset: 0;
}

#services {
	margin-top: 87px;
	padding-bottom: 219px;
}

#services .container {
	display: flex;
	justify-content: center;
	text-align: center;
}

#services .el {
	width: calc(100% / 4);
	padding: 0 19px;
}

#services .el h1,
#services .el h2,
#services .el h3,
#services .el h4,
#services .el h5,
#services .el h6 {
	font-size: 36px;
	font-weight: 800;
	margin: 38px 0 20px 0;
}

#services p {
	/* text-align: left; */
}

#services .button {
	margin-top: 28px;
}

@media screen and (max-width: 1400px) {

	#services .el h1,
	#services .el h2,
	#services .el h3,
	#services .el h4,
	#services .el h5,
	#services .el h6 {
		font-size: 28px;
	}
}

@media screen and (max-width: 1200px) {
	#services .container {
		flex-wrap: wrap;
		gap: 80px 0;
	}

	#services .el {
		width: calc(100% / 3);
	}
}

@media screen and (max-width: 992px) {
	#hero {
		max-height: calc(100vh - 60px);
	}

	#services .el {
		width: 50%;
	}

	#services .el h1,
	#services .el h2,
	#services .el h3,
	#services .el h4,
	#services .el h5,
	#services .el h6 {
		font-size: 24px;
	}

	#services img {
		max-width: 120px;
	}
}

@media screen and (max-width: 567px) {
	#services {
		margin-top: 50px;
		padding-bottom: 180px;
	}

	#services .container {
		gap: 50px 0;
	}

	#services .el {
		width: 100%;
	}
}