.hero_2{background: #f9f8f3;}
.hero_grid{
	display: flex;
	padding-left: 5%;
	gap: 120px;
	max-height: 700px;
	overflow: hidden;
	flex-direction: row-reverse;
}
.hero_left{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 calc(50% - 120px);
}
.hero_card{
	/* background: #F5D661; */
	padding: 30px;
	color: #000;
	border-radius: 24px;
	max-width: 620px;
}
.hero_media{
	flex: 0 0 55%;
	position: relative;
	box-sizing: border-box;
}
.hero_media:before{
	content: "";
	position: absolute;
  	border-top: 100vh solid #f9f8f3;
    border-right: 120px solid transparent;
	top: 0;
	left: -1px;
}
.hero_media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
.hero_2 h1{
	font-size: 42px;
	line-height: 1.3em;
	margin-bottom: 15px;
	font-family: 'Oakes Grotesk';
	font-weight: 400;
}
.hero_2 .btn{
	background: #637AFF;
	color: #fff;
	border: 0;
	border-radius: 10px;
}
.state_card{
	padding: 60px 20%;
	background: rgb(245,237,224);
}
.state_card h2{
	text-align: center;
	max-width: 768px;
	margin: 0 auto 30px;
}
#center_heading .heading{text-align: center;}
.state_card .cards{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 60px;
	justify-content: center;
}
.state_card .card{
	flex: 0 0 calc((100% - 40px) / 3);
	padding: 30px;
	background: #d2deee;
	border-radius: 6px;
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
	text-align: center;
}
.state_card .card_btn{
	background: #637AFF;
	display: inline-block;
	padding: 15px 30px;
	border-radius: 12px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	margin-bottom: 30px;
	pointer-events: none;
}
.state_card .card_btn *{display: block;}
.state_card .card_btn span{font-size: 24px;}
.state_card .card_btn strong{font-weight: normal;}
#app-form{padding-bottom: 60px;}
.color_cards .heading{
	text-align: center;
	font-size: 48px;
}
#app-form + section + section:before{display: none;}
#app-form .form-tabs{padding-top: 20px;}
@media(max-width: 1540px){
	.state_card{
		padding: 60px 10%;
	}
	.hero_grid{gap: 0;}
	.hero_left{
		flex: 0 0 45%;
	}
	.color_cards .cards h3{
		font-size: 24px;
		line-height: 1.3em;
	}
	#before_form{padding-top: 0 !important;}
	.color_cards .container{padding: 0 5%}
}
@media(max-width: 1920px){
	.hero_grid{gap: 60px;}
}
@media(max-width: 1280px){
	.hero_left{
		flex: 0 0 50%;
	}
	.hero_grid{gap: 0;}
	.hero_2{padding: 0;}
	.hero_grid{
		max-height: 600px;
		padding-left: 25px;
	}
	.color_cards .cards{
		flex-wrap: wrap;
	}
	.color_cards .cards li{ flex: 0 0 calc((100% - 20px) / 2);}
	.state_card{padding: 60px 5%;}
	.hero_media{flex: 0 0 50%;}
}
@media(max-width: 1024px){
	.hero_2 h1{
		font-size: 28px;
	}
	.state_card .card{
		flex: 0 0 calc((100% - 20px) / 2);
	}
	.state_card .cards{justify-content: center;}
}
@media(max-width: 980px){
	.hero_grid{
		display: block;
	}
	.hero_media:before{display: none;}
	.hero_media img{
		width: 100%;
		height: auto;
		display: block;
	}
	.hero_grid{
		max-height: 800px;
		overflow: hidden;
		padding: 0;
	}
	.hero_left{
		flex: 0 0 100%;;
		width: 100%;
		display: block;
		/* margin-top: -100px; */
		z-index: 2;
		padding: 0;
		position: relative;
	}
	.hero_card{
		max-width: 100%;
		border-radius: 0;
	}
	.hero_media{
		max-height: 400px;
		overflow: hidden;
	}
	.hero_2 .btn{
		max-width: max-content;
		margin: 0  auto;
		display: block;
	}
	.color_cards .extra_btn{
		max-width: max-content;
	}
	.two_col img{margin: 0 auto;}
	.color_cards .container{padding: 0 5%;}
}
@media(max-width: 667px){
	.color_cards{padding: 30px 0 !important;}
	.color_cards .cards li{ flex: 0 0 100%;}
	.color_cards .cards{padding-bottom: 30px;}
	.state_card .card{flex: 0 0 100%;}
	.state_card h2{
		text-align: left;
		font-size: 28px;
	}
	.contact_form  h2,
	.color_cards .heading{font-size: 22px !important;}
	.article .container{width: 100% !important;}
	.color_cards .cards{padding-top: 15px;}
	#before_form{padding-top: 0 !important;}
	.state_card{padding-bottom: 20px;}
	#app-form{padding-bottom: 0;}
	.big_faq .faq_block{padding-top: 30px;}
	.big_faq .container{width: 100% !important;}
	.state_card h2{text-align: center;}
}
@media(max-width: 540px){
	.hero_media img{display: block !important;}
	.color_cards .cards h3{font-size: 24px;}
}