/**
* Fuel Theme
* Version 6.0.6
**/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Hero
# Welcome
# CTA's
# Locations
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/

.home .entry-content {
	overflow: hidden; 
}

#hero_section {
    padding-top: clamp(2.6rem, 8vw, 6rem);
    padding-bottom: 2.6rem 
}

.home-header-full-width{
	position: relative; 
	padding: 0 2em; 
	background: linear-gradient(180deg, #E1EDFF 47.96%, rgba(225, 237, 255, 0) 100%);
}

.home-header-wrapper{
	position: relative; 
	background-size:cover;
	background-repeat: repeat-x; 
}

.home-header-full-width:before {
	content: '';
	position: absolute;
	top: 0 ;
	left: 0 ; 
	width: 100%;
	height: 100%;
	background-color: rgba(225, 237, 255, 1); 
	background-image: url('../images/main-header-pattern.svg');
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -1; 
}

.home-header-full-width:after{
	content: '';
  	position: absolute;
  	right: 1em;
  	bottom: -1.05em;
  	width: 100%;
  	height: 2em;
  	background: url('../images/line-and-lines-header.svg') no-repeat;
	background-size: cover;
	background-position: right center;
	z-index: 10; 
}

.home-header-left {
	padding-left: 0;
	padding-top: 1.25em;
}

.wp-block-fuel-wrapper-block.button p{
	display: inline-block; 
	padding: .5em;
	margin: 0;
	line-height: normal; 
	font-size: 1rem; 
}

.home-header-left .button,
.home-sub-header .button {
	margin-top: 1em;
	display: block;
	text-align: center;
	max-width: 11em;
	padding: .1em;
	margin-left: auto;
	margin-right: auto;
	font-size: 1rem;
}

.home-sub-header .button p {
	margin: 0; 	
}

.home-header-left h2{
	font-size: clamp(1.6rem, 4vw, 3.2rem);  
	color: var(--primary-color); 
}

.header-statement{
	max-width: 6em; 
	line-height: 1.5em; 
}

.home-header-right{
	position: relative;
	overflow: hidden; 
	margin-top: -1.5em
}

.home-header-right img {
	z-index: 10;
	position: relative;
	margin: auto;
  	display: block;
	max-width: 14em; 
}

.home-header-right:after{
	content:''; 
	position: absolute; 
	bottom: -8em;
	width: 17em;
	height: 17em;
	left: 0;
	right: 0; 
	margin: auto; 
	background: var(--wp--preset--color--dark-periwinkle) ;
	border-radius: 50% ;  
	
}

.home-sub-header p{
	line-height: 1.9;
	font-size: clamp(.9em, 4vw, 1em);
} 

.hero-tagline {
    font-family: var(--title-font);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-size: clamp(1.7rem, 7vw, 3.6rem);
    --time: 800ms;
    --easing: ease-out;
    --x: -2rem;
}

@media (min-width: 37.5em) {
	.header-statement{
		max-width: initial; 
	}
	.home-header-left .button,
	.home-sub-header .button{
		margin-left: initial ;
  		margin-right: initial ;
	}
	.home-header-left {
		padding-bottom: 2em; 
	}
	.home-header-right img{
		max-width: 21em;
	}
	.home-header-right:after{
		bottom: -9em;
  		width: 22em;
  		height: 22em;
	}

}

@media (min-width: 49em) {
	.long-line-with-dots {
		display: none;
	}
	body .home-sub-header-right{
		position: relative;
		padding-left: 1em; 
		margin-top: 6.5em ;
	}
	.home-sub-header-right:before{
		content:''; 
		position: absolute; 
		left: 0; 
		top: 1.25em;
		height: 16em;
		width: .25em;
		background: url('../images/vertical-line.svg') no-repeat; 
	}
}

@media (min-width: 68.5em) {
	.home-header-left h2{
		line-height: 1.1; 
	} 
	.home-header-wrapper{
		padding-top: 0 ;
		padding-bottom: 0 ;
		max-width: 72.5rem;
		margin: 0 auto; 
	}
	.home-header-left {
		padding-left: 0;
		padding-bottom: 0; 
		padding-top: 5.25em
	}
	.home-header-right img{
		max-width: 31em;
	}
	.home-header-right:after {
		bottom: -10em;
		width: 28em;
		height: 28em;
	}
	.home-header-full-width{
		background-size: contain;
		background: linear-gradient(90deg, #E1EDFF 20.96%, rgba(225, 237, 255, 0) 86%);
	}
	body .home-sub-header-right{
		margin-top: 5.5em ;
		padding-left: 3em;
	}
	.home-sub-header-right:before{
		top: .75;
	}
	.home-header-full-width:after{
		bottom: -3em;
		width: 98%;
		height: 6em;
		left: 0;
	}
	.home-sub-header .button{
		margin-top: 2em; 
	}
}

@media (min-width: 83.5em) {
	.home-header-right:after {
    	bottom: -18em;
    	width: 36.8em;
    	height: 36.8em;
  	}
}

@keyframes mainLine{
	to{
		clip-path: circle(150% at 0 50%);
	}
}

@keyframes mainCircle{
	to{
		transform: scale(1)
	}
}

@media (prefers-reduced-motion:no-preference) {
	.home-header-full-width:after{
		clip-path: circle(0% at 0 50%);
		animation: mainLine 2s .5s ease forwards; 
	}
	.home-header-right:after{
		transform: scale(0);
		animation: mainCircle .75s .9s ease-out forwards; 
	}
}
	
	
/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/

.home-sub-header{
	margin-top: 2em; 
	margin-bottom: 4em; 
}

.home-sub-header p.home-partners-dots{
	position: relative;
	font-size: 1rem; 
}

.home-partners-dots:after{
	content: ''; 
	position: absolute; 
	left: 0;
	right: 0;
	margin: auto; 
	bottom: -1em;
	width: 2em;
	height: .5em;
	background: url('../images/dots.svg') no-repeat; 
}

.home-sub-header p {
	margin-top: 0; 
}

.welcome{
	font-size: .9rem; 
	letter-spacing: .5em; 
}

.home-title {
	position: relative; 
	color: var(--primary-color); 
	margin-top: 0;
	padding-top: 0; 
	padding-bottom: 1em; 
	font-size: clamp(1.3rem, 4vw, 2rem);
	
}

.home-title:before{
	content: ''; 
	position: absolute; 
	left: 0;
	bottom: 0;
	width: 100%;
	height: .5em;
	background: url('../images/heading-two-line-dots.svg') no-repeat; 
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  	transition: clip-path 4s ease-out 2s;
}

.js-intersected.home-sub-header .home-title:before{
	clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}




.home-partners-wrapper{
	padding: 1em 1em 1.5em 1em; 
	border-radius: 20px; 
	background: var(--wp--preset--color--periwinkle);
	color: var(--primary-color);
	text-align: center; 
}

.long-line-with-dots svg{
	width: 100%; 
	height: auto;
}


@media (min-width: 68.5em) {	
	.home-sub-header{
		margin-top: 5em;
		margin-bottom: 11em;
	}
}


/*--------------------------------------------------------------
# CTA's
--------------------------------------------------------------*/

body .cta-wrapper{
	gap: 1.5em; 
}

.cta-wrapper{
	position: relative; 
	margin-top: 6em;
}

.cta-wrapper:before{
	content: '';
	position: absolute;
	left: 0;
	top: -3.5em;
	width: 90%;
	height: 16em;
	background: url('../images/cta-pattern.svg') no-repeat;
	background-size: cover;
	background-position: right; 
}



.cta {
	text-align: center; 
	padding: 1.75em 1em 1em 1em;
	background: var(--wp--preset--color--cta-hearing-loss); 
	display:block;
	border-radius: 8px; 
	font-size: clamp(1.2rem, 2vw, 1.5rem); 
	color: #fff; 
	border-top: 8px solid rgba(0, 0, 0, .1); 
	position: relative;
	margin-bottom: 3em; 
	max-width: 13em;
  	width: 100%;

}


a.cta:hover,
a.cta:focus-within {
	color: #fff;
}

.cta:before{
	content:'';
	position: absolute;
	bottom: -.875em;
	width: 1.75em;
	height: 1.75em;
	left: 0;
	right: 0;
	margin: auto;
	background: url('../images/cta-chevron-hl.svg') no-repeat; 
	background-size: cover; 
	transition: transform .5s ease; 
	transform-origin: center; 
}

.cta:hover:before,
.cta:focus-within:before{
	transform: rotate(-90deg); 
	
}

.cta.cta-he{
	background: var(--wp--preset--color--cta-hearing-evaluation); 
}

.cta.cta-he:before{
	background: url('../images/cta-chevron-he.svg') no-repeat; 
	background-size: cover; 
}

.cta.cta-ha{
	background: var(--wp--preset--color--cta-hearing-aids); 
}

.cta.cta-ha:before{
	background: url('../images/cta-chevron-ha.svg') no-repeat; 
	background-size: cover; 
}

.cta img {
	border-radius: 50%; 
	width: 7.5em; 
	transition: transform .5s ease; 
}

.cta-image{
	position: relative; 
	z-index: 10; 
}

.cta-image:before{
	content: ''; 
	position: absolute;
	top: .75em;
	left: 0;
	right: 0;  
	margin: auto; 
	width: 6em; 
	height: 6em; 
	background: rgba(255, 255, 255, .2);
	transform: scale(1.5); 
	border-radius: 50%;
	z-index: -1; 
	transition: transform .5s ease; 
}

.cta:hover .cta-image:before,
.cta:hover .cta-image:focus-visible{
	transform: scale(1.25); 
}


.cta:hover img,
.cta:focus-visible img{
	transform: scale(1.15); 
}


.cta p{
	padding: 0 1em; 
}

.cta.cta-ha p {
	padding: 0 2em; 
}

.cta-wrapper .wp-block-column{
	display: flex;
	justify-content: center; 
}


@media (min-width: 45.5em) {
	.cta p{
		padding: 0; 
	}
	.cta.cta-ha p{
		padding: 0; 
	}
	.cta-wrapper {
		margin-bottom: 9em; 
	}
	body .cta-wrapper {
		gap: 1em;
	}
}


@media (min-width: 68.5em) {
	body .cta-wrapper {
		gap: 2em;
	}
}

@media (prefers-reduced-motion:no-preference) {
	.cta.cta-hl {
		opacity: 0; 
		transform: translateY(3em);
		transition: opacity 1s ease, transform 1s ease; 
	}
	.cta.cta-he {
		opacity: 0; 
		transform: translateY(3em);
		transition: opacity 1s ease .5s, transform 1s ease .5s; 
	}
	.cta.cta-ha {
		opacity: 0; 
		transform: translateY(3em);
		transition: opacity 1s ease 1s, transform 1s ease 1s ; 
	}
	.cta-wrapper:before{
		transform: translateX(-20em);
		transition: transform 1s ease; 
	}
	.js-intersected.cta-wrapper:before {
		transform: translateX(0);
	}
	.js-intersected.cta-wrapper .cta.cta-hl {
		opacity: 1; 
		transform: translateY(0);
	} 
	.js-intersected.cta-wrapper .cta.cta-he {
		opacity: 1; 
		transform: translateY(0);
	} 
	.js-intersected.cta-wrapper .cta.cta-ha {
		opacity: 1; 
		transform: translateY(0);
	} 
	@media (min-width: 68.5em) {
		.cta.cta-hl {
			opacity: 0; 
			transform: translateY(3em);
			transition: opacity 1s ease 1s, transform 1s ease 1s; 
		}
		.cta.cta-he {
			opacity: 0; 
			transform: translateY(3em);
			transition: opacity 1s ease 1.5s, transform 1s ease 1.5s ; 
		}
		.cta.cta-ha {
			opacity: 0; 
			transform: translateY(3em);
			transition: opacity 1s ease 2s, transform 1s ease 2s ; 
		}
	}
}

/*--------------------------------------------------------------
# Home Location Map Section 
--------------------------------------------------------------*/

.home-location-wrapper.js-intersected .home-title:before{
	clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}

.home-location-wrapper{
	position: relative; 
	margin-top: 3em;
}

.home-location-wrapper:before{
	content: '';
	position: absolute;
	right: 0;
	top: 4.25em;
	width: 90%;
	max-width: 35rem;
	height: 16em;
	background: url('../images/map-pattern.svg') no-repeat;
	background-size: cover;
}

.home-map-group{
	padding-top: 6em; 
}

@media (min-width: 68.5em) {
	.home-location-wrapper:before{
		height: 38rem; 
	}
	.home-location-wrapper{
		padding-bottom: 9em; 
	}
}

@media (prefers-reduced-motion:no-preference) {
	.home-location-wrapper:before{
		transform: translateX(10em);
		transition: transform 1s ease .5s; 
	}
	.js-intersected.home-location-wrapper:before {
		transform: translateX(0);
	}

}