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

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

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

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

.hero-group {
	background: linear-gradient(180deg, #F4F0E6 9.11%, #FFFFFF 91.37%);
}

.hero-left{
	text-align: center;
	padding-top: 2rem; 
}

.hero-right{
	position: relative; 
	padding-top: 3rem;
	padding-bottom: 3rem; 
}

.hero-right img{
	border-radius: 50%; 
}

.hero-main{
	width: 11.2rem;
	height: 11.2rem; 
	transform: translateX(5rem);
	position: relative; 
	z-index: 5; 
}

.hero-lighthouse{
	position: absolute;
	top: 1rem;
	right: 3rem;
	width: 6.6rem;
	height: 6.6rem; 
	z-index: 3; 
}

.hero-bird{
	position: absolute;
	bottom: 2rem;
	left: 1rem; 
	width: 6.6rem;
	height: 6.6rem; 
	z-index: 10; 
}

.hero-right .wp-block-image{
	z-index: 10; 
}

.hero-right .wp-block-image:after{
	content:'';
	position: absolute; 
	left: -10%;
	top: -10%;
	bottom: -10%;
	right: -10%;
	width: 120%; 
	height: 120%; 
	border: 30px solid rgba(215, 208, 192, .25);
	border-radius: 50%; 
	z-index: -1; 
}

.hero-right .hero-main.wp-block-image:after{
	left: -7.5%;
  	top: -7.5%;
  	bottom: -7.5%;
  	right: -7.5%;
  	width: 115%;
  	height: 115%;
}

.hero-columns{
	position: relative; 
	max-width: 21rem !important ;
  	margin: 0 auto;
}

.hero-columns:before{
	content: '';
    position: absolute;
   	top: -1rem ;
    left: -2rem ;
    width: 10rem;
    height: 10rem;
    background: url('../images/accent.svg') no-repeat;
	background-size: 100%;
    z-index: 0;
}

.hero-right{
	position: relative; 
}

.hero-right:after{
	content: '';
    position: absolute;
	bottom: 4rem;
    right: 1rem;
    width: 5rem;
    height: 7rem; 
	background: url('../images/contact-right.svg') no-repeat;
	background-size: 100%;
    z-index: 0;
}

.hero-left h1{
	font-weight: 500; 
}

.hero-left p{
	font-size: 1rem; 
}

@keyframes showMove{
	to{
		opacity: 1;
		transform: translateX(0);
		transform: translateY(0);
	}
}

@keyframes showMoveMain{
	to{
		opacity: 1;
		transform: translateX(5rem);
		
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 68.5rem){
	.hero-left{
		opacity: 0; 
		transform: translateX(-5rem);
		animation: showMove 1s 1s ease forwards; 
	}
	.hero-main{
		opacity: 0; 
		transform: translateX(8rem);
		animation: showMoveMain 1s 1s ease forwards; 
	}
	.hero-lighthouse{
		transform: translateY(-5rem);
	}
	.hero-bird{
		transform: translateX(-5rem);
	}
	.hero-lighthouse, 
	.hero-bird {
		opacity: 0; 
		animation: showMove 1s 1s ease forwards; 
	}
	
	.hero-right:after{
		opacity: 0; 
		transform: translateX(-5rem);
		animation: showMove 1s 1s ease forwards; 
	}
}

@media (min-width: 49em) {
	.hero-columns{
		max-width: initial !important; 
	}
	.hero-left{
		text-align: left; 
	}
	
	.hero-left h1{
		font-size: 3.2rem; 
	}
	.hero-left p{
		font-size: 1.6rem; 
	}
}
@media (min-width: 68em){
	.hero-group{
		overflow: hidden; 
	}
	.hero-left p{
		padding-right: 4rem; 
	}
	.hero-columns {
		max-width: 53rem !important;
 	 	margin: 3rem auto;
		padding-top: 5rem;
    	padding-bottom: 5rem;
	}	
	.hero-main {
		width: 21.2rem;
		height: 21.2rem; 
	}
	.hero-lighthouse {
		width: 12.5rem;
		height: 12.5rem; 
		top: -3rem;
  		right: -7rem;
	}
	.hero-bird {
		width: 12.5rem;
		height: 12.5rem; 
		bottom: -1rem;
  		left: -2.5rem;
	}
	.hero-columns:after{
		bottom: 8rem;
		right: -11rem;
		width: 10rem;
		height: 12rem;
	}
	.hero-columns:before {
		left: -22rem;
		width: 27rem;
        height: 29rem;
	}
	.hero-right{
		transform: translateX(-6rem);
	}
	.hero-right:after{
		bottom: -1rem;
		right: -9rem;
		width: 11rem;
		height: 13rem;
 	}
}
	

/*--------------------------------------------------------------
# sub hero
--------------------------------------------------------------*/

.sub-hero{
	padding-top: 3rem; 
	padding-bottom: 3rem; 
}

.sub-hero h2{
	text-align: center;
	font-size: 1.6rem;
	padding-bottom: 2rem;
	position: relative; 
	font-weight: 500; 
}

.sub-hero p{
	line-height: 1.7;
}

.sub-hero h2:after{
	content:'';
	position: absolute; 
	left: 0;
	right: 0; 
	bottom: .5rem ;
	margin: auto; 
	width: 80%; 
	height: 1px;
	background: var(--wp--preset--color--content)
}

.sub-hero .wp-block-buttons {
	flex-wrap: nowrap;
  	flex-direction: column;
}

.about-width{
	width: 8.5rem; 
}
.sub-hero-left .wp-block-button:first-child{
	margin-top: .5rem; 
}

@media (min-width: 48.5em) {
	.sub-hero .wp-block-buttons {
		flex-direction: row;
	}
	.sub-hero-left .wp-block-button:first-child{
		margin-top: 0 ; 
	}
}

@media (min-width: 68.5em) {
	.sub-hero-wrap {
		overflow: hidden; 
	}
	.sub-hero h2{
		text-align: left;
		font-size: 2.4rem; 
	}
	
	.sub-hero h2::after{
		right: initial;
		width: 269px; 
	}
	
	.sub-hero img{
		max-width: 37rem;
    	transform: translate(-9rem, -2rem);
    	z-index: -1;
    	position: relative;
	}
	
	
}

.sub-hero-left{
	z-index: 10; 
}

.sub-hero-right{
	z-index: 1; 
}

@media (prefers-reduced-motion: no-preference) and (min-width: 68.5rem){
	.sub-hero-left{
		opacity: 0; 
		transform: translateX(-5rem);
	}
	.sub-hero-right{
		opacity: 0; 
		transform: translateX(5rem);
	}
	.sub-hero-wrap.js-intersected .sub-hero-left{
		animation: showMove 1s .5s ease forwards;		
	}
	
	.sub-hero-wrap.js-intersected .sub-hero-right{
		animation: showMove 1s .5s ease forwards;
	}
	
	body:not(.js-active) .sub-hero-wrap.js-intersect .sub-hero-left, 
	.sub-hero-wrap.js-intersected .sub-hero-left {
		animation: showMove 1s 1.15s ease forwards;
	}
	body:not(.js-active) .sub-hero-wrap.js-intersect .sub-hero-right, 
	.sub-hero-wrap.js-intersected .sub-hero-left {
		animation: showMove 1s 1.15s ease forwards;
	}
	
}



/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/

.service svg{
	display: block; 
}

.service{
	position: relative; 
	z-index: 10;
	overflow: hidden; 
	min-height: 26rem; 
}

.service-content{
	z-index: 5; 
	
}

.service .wp-block-image img{
	position: absolute;
	top: 11rem; 
	left: 0;
	right: 0; 
	margin: auto;
	bottom: 0;
	width: 100%;
	height: auto;
	z-index: 0; 
}
.service h2{
	text-align: center; 
	font-size: 1rem; 
	font-weight: 500; 
}

.service p{
	padding-top: 11rem; 
}

.service-shade{
	position: relative; 
	z-index: 8;
}

.service-shade:before{
	content:''; 
	position: absolute; 
	bottom: 0;
	left: 0;
	width: 100%;
	height: 48%;
	background: linear-gradient(90deg, #000000 27.64%, rgba(102, 102, 102, 0) 200%);
	z-index: -1; 
}

.service.wp-block-group.has-global-padding{
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.service .wp-block-image{
	margin-top: 0; 
}

.service-desktop-wrapper{
	display: none; 
}

@media (min-width: 68.5em) {
	.service{
		display: none; 	
	}
	.service-desktop-wrapper{
		display: block; 
	}
	.service-desktop-wrapper .tab{
		padding: 2rem 2rem 2rem 1rem; 
		border-top: none ;
		border-bottom: none ;
		border-right: none; 
		background: var(--wp--preset--color--warn);
		margin-bottom: 1rem; 
		font-weight: 500; 
		position: relative; 
		display: flex; 
		gap: .5rem;
	}
	.service-desktop-wrapper .tab svg{
		width: 4rem; 
	}
	.service-desktop-wrapper .tab span:last-child{
		align-content: center;
	}
	.wp-block-fuel-tabs-wrapper:not(.tabs-only){
		border: none; 
	}
	.tabs-left .tab[aria-selected="true"]{
		border-right: none; 
	}
	.service-desktop-wrapper .tabpanel-container {
		border-left: 30px solid #fff;
  		padding: 0 ;
  		border-radius: 0 200px 0 0;
		background:  var(--wp--preset--color--warn);
		height: 100%; 
	}
	.tablist li:last-child .tab{
		margin-bottom: 0; 
	}
	.service-desktop-wrapper .tab:hover,
	.service-desktop-wrapper .tab:focus-visible, 
	.service-desktop-wrapper .tab[aria-selected="true"]{
		background: var(--wp--preset--color--content); 
		color: #fff;
	}
	.service-desktop-wrapper .tab svg circle{
		color: #fff; 
		fill: #fff; 
	}
	.service-desktop-wrapper .tab svg path{
		color: var(--wp--preset--color--content) ; 
		fill: var(--wp--preset--color--content) ; 
		stroke: var(--wp--preset--color--content) ; 
	}
	
	.service-desktop-wrapper .tab:hover svg circle,
	.service-desktop-wrapper .tab:focus-visible svg circle,
	.service-desktop-wrapper .tab[aria-selected="true"] svg circle{
		color: var(--primary-color) ; 
		fill: var(--primary-color) ; 
	}
	
	.service-desktop-wrapper .tab:hover svg path,
	.service-desktop-wrapper .tab:focus-visible svg path,
	.service-desktop-wrapper .tab[aria-selected="true"] svg path{
		color: #fff ; 
		fill: #fff ; 
		stroke: #fff ; 
	}
	
	.service-desktop-wrapper .tab:hover .arrow-service-icon path,
	.service-desktop-wrapper .tab:focus-visible .arrow-service-icon path,
	.service-desktop-wrapper .tab[aria-selected="true"] .arrow-service-icon path {
		color: #fff;
		fill: #fff; 
	}
	
	.service-desktop-wrapper .wp-block-fuel-tab-panel:before {
		content: '';
  		position: absolute;
  		bottom: -3.5rem;
    	right: -5.5rem;
    	width: 12.5rem;
    	height: 14.1rem;
  		background: url('../images/contact-right.svg') no-repeat;
 		background-size: cover ;
  		z-index: -1;
	}
	.service-desktop-wrapper .tabs-left {
		grid-template-columns: 32.5% 67.5%;
	}
	#tab_4bolmhj9d{
		background: url(../images/service-hc.jpg) no-repeat; 
		background-size: cover; 
		border-radius: 0 200px 0 0;
		background-position: center; 
	}
	#tab_d8vc2dhy6{
		background: url(../images/service-hearing-tech.jpg) no-repeat; 
		background-size: cover; 
		border-radius: 0 200px 0 0;
	}
	#tab_gndcu413y{
		background: url(../images/service-tinn.jpg) no-repeat; 
		background-size: cover; 
		border-radius: 0 200px 0 0;
		background-position: right; 
	}
	.arrow-service-icon{
		position: absolute; 
		right: -2.5rem; 
		top: 0;
		bottom: 0;
		margin: auto; 
	}
	.service-content-wrapper{
		background: linear-gradient(90deg, #000000 0%, rgba(102, 102, 102, 0) 100%);
		padding-top: 1rem;
		padding-bottom: 1rem; 
		padding-left: 1rem; 
		margin-top: 11rem;
	}
	.service-content-wrapper p{
		color: #fff; 
		padding-right: 30%;
	}
	.tabpanel{
		padding: 1rem 1rem 1rem 0;
	}
	
	.tabpanel {
		position: relative;;
		padding: 1rem;
		height: 100%;
/* 		opacity: 1;  */
		transition: display 1s ease; 
/* 		display: initial; */
	}

	body:not(.wp-admin) .tabpanel:not(:target, .visible) {
		display: none ; 
		
	}
	
/* 	.tabpanel{
		opacity: 0; 
		transition: opacity 1s ease; 
	}
	.tabpanel.visible {
		opacity: 1; 
	} */
}

@media (prefers-reduced-motion: no-preference) and (min-width: 68.5rem){
	.service-desktop-wrapper .tabpanel-container{
		opacity: 0; 
		transform: translateX(5rem) ;
	}
	.service-desktop-wrapper .tab{
		opacity: 0; 
		transform: translateX(-5rem);
	}
	.service-desktop-wrapper.js-intersected .tabpanel-container{
		animation: showMove 1s 1s ease forwards;
	}
	.service-desktop-wrapper.js-intersected .tablist li:first-child .tab {
		animation: showMove 1s .75s ease forwards;
	}
	.service-desktop-wrapper.js-intersected .tablist li:nth-child(2) .tab {
		animation: showMove 1s .9s ease forwards;
	}
	.service-desktop-wrapper.js-intersected .tablist li:last-child .tab {
		animation: showMove 1s 1.15s ease forwards;
	}
	
	body:not(.js-active) .service-desktop-wrapper.js-intersect .tablist li .tab, /* NO JS */
	.service-desktop-wrapper.js-intersected .tablist li .tab {
		animation: showMove 1s 1.15s ease forwards;
	}
	
	body:not(.js-active) .service-desktop-wrapper.js-intersect .tabpanel-container,
	.service-desktop-wrapper.js-intersected .tabpanel-container {
		animation: showMove 1s 1s ease forwards;
	}
}


	
	


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

.cta-wrap-one{
	position: relative;
}

.cta-wrap-two{
	position: relative;
}

.cta-wrap-one:before{
	content: '';
    position: absolute;
    top: -2rem;
    left: 0;
    width: 5rem;
    height: 5rem;
    background: url('../images/contact-right.svg') no-repeat;
 	background-size: 100%;
    z-index: -1;
}

.cta-wrap-two:before{
	content: '';
    position: absolute;
    bottom: -1rem;
    right: 0;
    width: 5rem;
    height: 5rem;
    background: url('../images/contact-right.svg') no-repeat;
	background-size: 100%;
    z-index: -1;
}

.cta-heading{
	position: relative; 
	font-weight: 500; 
	margin-bottom: 4rem; 
	font-size: 1.6rem; 
}

.cta-heading:after {
	content: '';
  	position: absolute;
   	bottom: -1.5rem;
  	left: 0;
  	width: 100%;
  	height: 1px;
  	background: var(--wp--preset--color--content);
}

@media (min-width: 68.5em) {
	.cta-heading:after {
		width: 100%;
		max-width: 269px;
		right: 0;
		margin: auto;
	}	
	.cta-wrap-two:before{
		display: none; 
	}
	.cta-wrap-one:before{
		width: 11rem;
    	bottom: -6.7rem;
    	left: -5rem;
    	background-size: contain;
    	height: 12rem;
    	top: initial;
    	background-position: center;
 	}
	.cta-wrapper:after{
		content: '';
    	position: absolute;
    	right: 0;
    	width: 29rem;
    	height: 41rem;
    	background: url('../images/cta-ear.svg') no-repeat;
    	background-size: auto;
    	background-size: 100%;
    	z-index: -1;
    	top: 0;
	}
	
	.cta-wrapper{
		padding-top: 5rem;
		padding-bottom: 5rem; 
	}
}

.cta {
	background: var(--wp--preset--color--warn);
	color: var(--wp--preset--color--content);
	padding: 1rem; 
	border-radius: 0 0 100px 0;
	display: block;
	height: 100%; 
	max-width: 21rem; 
	width: 100%;
	overflow: hidden; 
	position: relative; 
	z-index: 5; 
}

.cta:before{
	content:''; 
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 110%; 
	height: 100%; 
	background: var(--wp--preset--color--content);
	clip-path: polygon(100% 0, 65% 0, 100% 50%);
	transition: transform .5s ease;
	z-index: 1; 
	transform-origin: 100% 0%;
}

.cta:after{
	content:''; 
	position: absolute; 
	right: .5rem;
  	top: 1rem;
  	width: 1.5rem;
  	height: 1.5rem;
	background: url('../images/cta-arrow.svg') no-repeat;
	z-index: 20; 
	transition: transform .5s ease;
}

.cta:hover:after{
	transform: translateX(.35rem); 
	
}

.cta:focus-visible:after {
	transform: translateX(.35rem);
}

.cta:hover:before,
.cta:focus-visible:before{
	transform: scale(6);
	transform-origin: 100% 0%;
}

.cta-number{
	font-size: 1.6rem;
	line-height: 1; 
	margin-bottom: 1rem; 
	position: relative; 
	z-index: 10; 
	transition: color .5s ease; 
}
.cta:hover .cta-number{
	color: #fff;
}
.cta:focus-visible .cta-number{
	color: #fff;
}
.cta h2{
	font-size: 1.6rem;
	position: relative; 
	z-index: 10; 
	transition: color .5s ease; 
	font-weight: 500; 
	margin-bottom: 1rem;
}

.cta:hover h2{
	color: #fff ; 
}
.cta:focus-visible h2{
	color: #fff ; 
}

.cta-content{
	margin-top: .5rem; 
	line-height: 1.2;
	padding-bottom: 1rem;
	position: relative; 
	z-index: 10; 
	transition: color .5s ease; 
}

.cta:hover .cta-content{
	color: #fff; 
}


.cta:focus-visible .cta-content{
	color: #fff; 
}

.cta p{
	line-height: 1.4;
}

@media (min-width: 68.5em) {
	.cta h2{
		font-size: 2.4rem;
	}
}

/*--------------------------------------------------------------
# Locations
--------------------------------------------------------------*/
.is-layout-flex>.flex-grow {
    flex-grow: 1;
}