@import "@{parenturl}/less/mixins.less";
@import "@{themeurl}/less/vars.less";

div.hero {
	width: 100%;
	display: block;
	.pseudoAfter;
	&:after {
		background-image:url('/wp-content/uploads/2021/10/hero.svg');
		background-size:cover;
		background-position:bottom center;
		background-repeat:no-repeat;
		z-index: 4;
	}
	.hero-image {
		max-height:none;
		z-index:1;
		width: 100%;
	}
	.hero-overlay {
		position: absolute;
		top: 400px;
		left: 0;
		right: 0;
	}
	h1 {
		text-align: center;
		margin-bottom:25px;
		@media (max-width: 768px) {
			display: none;
		}
	}
	@media (max-width: 768px) {
		margin-top: 195px;
	}
}

.overlay {
	h1 {
		text-shadow: 2px 4px 4px rgb(0 0 0 / 20%), 0px 1px 10px rgb(255 255 255 / 59%);
	}
}

#welcome,
#tagline {
	.margin-ends(1vw);
	> div {
		.padding-ends(5vw);
		background-image:url('/wp-content/uploads/2021/10/icon.svg');
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
	}
	h2 {
		margin:0;
		text-align:center;
	}
}

#help {
	.margin-ends(7vw);
	position:relative;
	overflow:hidden;
	> * {
		position:relative;
		z-index:3;
	}
	&:before {
		content:' ';
		display:block;
		position:absolute;
		pointer-events:none;
		width:100%;
		height:56.25vw;
		background-image:url('/wp-content/uploads/2021/10/hero.svg');
		background-size:contain;
		background-position:bottom center;
		background-repeat:no-repeat;
		z-index:6;
		left:0;
		top:0;
		.rotate(180deg);
	}
}

#help-is-here {
	background-image:url('/wp-content/uploads/2021/10/help.jpg');
	.hero(1280px);
	.vertAlign;
	flex-direction:column;
	h2 {
		margin-top:-5vw;
		font-size:64px;
		margin-bottom:25px;
	}
	@media (max-width: 719px) {
		min-height: 400px;
		h2 {
			text-align: center;
			font-size: 54px;
		}
	}
	@media (max-width: 719px) and (min-width: 297px) {
		h2 {
			margin: 50px 50px 25px;
		}
	}
}

#services {
	position:relative;
	padding-bottom:75px;
	margin-bottom:0;
	> * {
		position:relative;
		z-index:10;
		overflow:visible;
	}
	@slant: 20vw;
	&:before, &:after {
		content:' ';
		display:block;
		position:absolute;
		pointer-events:none;
		left:0;
		width:100%;
		.clip(~"0 @{slant}, 100% 0, 100% 100%, 0% 100%");
	}
	&:before {
		z-index:4;
		background-color:#fff;
		top:-@slant;
		height:~"calc(100% - -@{slant})";
	}
	&:after {
		z-index:5;
		background-color:fade(#C0DCD4, 47);
		top:-(@slant * 1.5);
		height:~"calc(100% - (-@{slant} * 1.5) )";
	}
	.grid {
		align-items:start;
		margin-bottom:75px;
	}
	
	.service {
		background-color:#fff;
		border:1px solid @teal;
		border-radius:15px;
		box-shadow:0 3px 6px @teal;
		padding:35px 25px 40px;
		h2 {
			color:#050505;
			cursor:pointer;
			margin:0;
			text-align:center;
			font-size: 34px;
		}
		.copy {
			> div {
				padding-top:25px;
			}
			p {
				color:#050505;
				.font(@helvetica, 300, 20px, 1.375);
			}
		}
		@media (max-width: 959px) and (min-width: 769px) {
			grid-column: 2;
		}
	}
}

#testimonials {
	margin-top:7vw;
	margin-bottom:1vw;
	h2 {
		margin-bottom:25px;
		text-align:center;
	}
	.video-shortcode {
		margin-bottom:0;
		border-radius:15px;
		@media (max-width: 959px) and (min-width: 769px) {
			grid-column: 2;
		}
	}
}

#cta {
	> div {
		overflow:visible;
		@media (max-width: 768px) {
			overflow: hidden;
		}
	}
	.grid {
		align-items:center;
		justify-items:center;
		> * {
			grid-row:1;
		}
	}
	.copy {
		position:relative;
		grid-column:1;
		border-radius:15px;
		background-color:fade(#F6E0CF, 48);
		.blur(10px);
		padding:50px 25px;
		h3 {
			color:@light_orange;
			.font(@helvetica, 300, 45px);
			margin-bottom:10px;
			text-align:center;
			text-transform:none;
		}
		p {
			color:#050505;
			.font(@helvetica, 300, 20px, 1.375);
			text-align:center;
		}
	}
	.background {
		pointer-events:none;
		border-top:1px solid #fff;
		background-image:url('/wp-content/uploads/2021/10/cta.jpg');
		position:relative;
		line-height:0;
		max-width:1400px;
		margin-right:-30vw;
		margin-bottom:-15vw;
		.translateX(-10vw);
		img {
			width:100%;
			height:auto;
		}
	}
}