/**
* Fuel Theme
* Version 6.4.4
**/

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

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

.hero.wp-block-cover .wp-block-cover__inner-container{
	position: relative; 
	z-index: 10; 
}

.hero{
	padding-right: 0 !important; 
}


.hero:after{
	content:'';
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 100%; 
	background: linear-gradient(180deg, rgba(51, 140, 185, 0) -7.44%, #00406C 100%);
	z-index: 1; 
}

.hero-tagline{
	margin-bottom: 0 !important ; 
}

.hear{
	font-size: 2.8rem !important ; 
	line-height: 1; 
	text-shadow: 2px 2px 8px rgba(0, 0, 0, .25);

}

.of-so-cal{
	font-size: 1.1rem !important ; 
	letter-spacing: 4px; 
}

@media (min-width: 68.5em) {
	.hero{
		padding-bottom: 1rem !important ;
	}
	.hear br{
		display: none; 
	}
	.hear{
		font-size: 5.2rem !important ; 
	}
	.of-so-cal{
		font-size: 1.8rem !important ; 
	}
	.hero .wp-block-button{
		padding-left: 2rem; 
		
	}
	.hero .wp-block-buttons{
		margin-bottom: 3rem !important ;
	}
}

.hero.wp-block-cover{
	padding-left: 0 !important ; 
}

.cta1-wrapper{
	padding-top: 8rem !important ; 
}

.home-hero-lines{
	position: absolute;
	right: 45%; 
	bottom: 17.8rem;
}

@media (min-width: 68.5em) {
	.home-hero-lines{
		bottom: 7.8rem;
	}
}

@media (min-width: 112.5em) {
	.home-hero-lines{
		right: initial; 
		left: 0;
   		width: 52%;
    	max-width: 52%;
    	height: auto;
	}
}

@keyframes showHeroLines{
	to{
		stroke-dashoffset: 0 ;
	}
}

@keyframes showHeroCta{
	to{
		
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.home-hero-lines path{
		stroke-dasharray: 1800;
    	stroke-dashoffset: 1800;
		animation: showHeroLines 3s .25s ease-out forwards; 
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 68.5rem) {
	.home-hero-lines path{
		stroke-dasharray: 1800;
    	stroke-dashoffset: 1800;
		animation: showHeroLines 2.5s .25s ease-out forwards; 
	}
	
	#cta_section a:first-child, 
	#cta_section a:last-child{
		transform: translateY(-1rem);
		animation: showHeroCta 1.25s .5s ease-out forwards; 
	}
	#cta_section a:nth-child(2){
		transform: translateY(1rem);
		animation: showHeroCta 1.25s .5s ease-out forwards; 
	}
}
		
	


/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/
.welcome-left{
	position: relative; 
	padding-bottom: 3rem; 
}

.home-welcome-columns img{
	max-width: 9rem; 
	width: 100%; 
}

@media (min-width: 68.5em) {
	.home-welcome-columns img{
		max-width: 13rem; 
		
	}	
}

.award-favorite{
	font-size: clamp(1rem, 4vw, 1.2rem); 
	margin-top: .5rem !important ; 
}

.award-since{
	position: relative; 
	letter-spacing: 4px; 
	margin-bottom: .5rem;
	line-height: 2; 
	
}

.award-since em{
	border-bottom : 1px solid var(--primary-color);
}

.award-reviews{
	font-weight: 700; 
	margin-bottom: 1rem !important ; 
}

.award-reviews a{
	background: linear-gradient(0deg, var(--primary-color), var(--primary-color)) no-repeat 0 bottom / 0 2px;
  	transition: background-size 350ms;
}

.award-reviews a:hover{
	background-size: 100% 2px;
}

.award-reviews a:focus-visible{
	background-size: 100% 2px;
}

.welcome{
	font-style: italic; 
	letter-spacing: 4px; 
}

.welcome em {
	font-size: clamp(16px, 3vw, 20px) !important ;
}



.home-title{
	font-size: clamp(1.4rem, 4vw, 1.6rem); 
	color: var(--primary-color) !important ; 
	position: relative; 
	padding-bottom: 1rem; 
}

.home-title:after{
	content: '';
  	position: absolute;
  	border: 2px solid var(--wp--preset--color--blue);
  	width: 4.25rem;
  	height: .5rem;
  	border-bottom: none;
  	border-left: none;
  	border-radius: 0 20px 0 0;
  	bottom: 0;
  	left: -2rem;
}

.welcome-left svg.mobile-only {
	position: absolute;
	left: 0; 
	right: 0;
	bottom: 0;
	margin: auto; 
	z-index: -1; 

}

.welcome-right {
	margin-top: -1rem !important; 
}

@media (min-width: 49em) {
	.welcome-right {
		margin-top: 0 !important; 
	}
}


@media (min-width: 68.5em) {
	.welcome-left{
		padding-right: 2rem;
	}
	.home-welcome-columns{
		max-width: 56rem !important ; 
		padding-top: 5rem !important ;
		padding-bottom: .5rem !important ; 
	}
	.welcome-left p{
		font-size: 1rem !important ; 
	}
	.award-since em{
		font-size: 1rem !important; 
	}
	.award-reviews a{
		font-size: 1rem !important; 
	}
	.welcome-middle{
		margin-top: -3rem !important ;
	}
}

@keyframes homeTitleAccent{
	to{
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 68.5rem){
	.home-title:after{
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	.home-welcome-columns.js-intersected .home-title:after{
		animation: homeTitleAccent .5s ease-out forwards; 
	}
	.welcome-middle svg path:first-child{
		transform: translateY(-3rem);
		transition: transform 1s ease;
	}
	.welcome-middle svg path:nth-child(2){
		transform: translateY(5rem);
		transition: transform 1s ease;
	}
	.welcome-middle svg path:last-child{
		transform: translateY(2rem);
		transition: transform 1s ease;
	}
	.home-welcome-columns.js-intersected .welcome-middle svg path {
		transform: translateY(0);
	}
}




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

.cta1-wrapper{
	padding-left: 1rem !important ;
    padding-right: 1rem !important ;
}

#cta_section{
	gap: 1rem; 
	justify-content: center; 
}

#cta_section a {
	border-radius: 0 16px 0 16px  ; 
	overflow: hidden;
	position: relative; 
	padding-bottom: .5rem; 
	max-width: 18rem; 
	width: 100%; 
	align-self: center ; 
}

#cta_section a .cta-chevron{
	transition: transform .5s ease; 
	z-index: 10; 
}

#cta_section a:hover .cta-chevron{
	transform: rotate(90deg);
}

#cta_section a:focus-visible .cta-chevron{
	transform: rotate(90deg);
}

#cta_section p{
	font-size: clamp(1.2rem, 4vw, 1.5rem) !important ;
	padding-bottom: .5rem !important ; 
	padding-top: .5rem !important;
	padding-left: 0 !important; 
	z-index: 10; 
}

.cta-swoosh{
	transform: translate(-3.5rem, -.5rem);
}

#cta_section a:before{
	content:''; 
	position: absolute;
	left: -2.1rem;
	top: -2.1rem;
	width: 4rem; 
	height: 4rem; 
	background: #7FC6DC; 
/* 	z-index: -1;  */
	z-index: 0; 
	transform: rotate(45deg);
	transition: transform .6s ease;
}

#cta_section a:after {
	content:''; 
	position: absolute;
	left: -2.75rem;
	top: -2rem;
	width: 4rem; 
	height: 4rem; 
	background: #3D9BC4;
/* 	z-index: -1;  */
	z-index: 0; 
	transform: rotate(45deg);
	border: 7.5px solid #4AB2D6; 
	transition: transform .6s ease;
}

#cta_section a p{
	transition: color .6s ease; 
}





#cta_section svg{
	display: block; 
	margin-top: 0; 
}

@media (min-width: 68.5em) {
	#cta_section a:before{
		z-index: -1;
	}
	#cta_section a:after{
		z-index: -1;
	}
	#cta_section a:hover:before{
		transform: rotate(45deg) scale(13) ;
	}

	#cta_section a:hover:after{
		transform: rotate(45deg) scale(20) ;
	}
	#cta_section a{
		padding-bottom: 1rem;
	}	
	#cta_section p{
		padding-bottom: 1rem !important;
		padding-top: 1rem !important;
		padding-right: 0 !important; 
	}
	.cta1-wrapper{
		padding-left: 1rem; 
	}
	#cta_section a:hover p{
		color: #fff; 
	}
}


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


.home .entry-content .location-cta{
	position: relative;
	z-index: 5; 
}

.home .entry-content #location_section {
	margin-top: 1rem;
}

.home .entry-content #location_section a{
	color: #fff; 
}

.home .entry-content #location_section .phone {
	margin-left: .4rem;
}

.home .entry-content #location_section svg{
	color: var(--accent-color); 
}

.home .entry-content #location_section h2{
 	font-size: clamp(1.4rem, 4vw, 1.6rem) !important ; 	
	position: relative; 
	text-align: left !important ; 
}

.home .entry-content #location_section h2:after{
	content: '';
  	position: absolute;
	border: 2px solid var(--wp--preset--color--blue); 
	width: 4.55rem;
	height: .5rem;
	border-bottom: none;
	border-left: none;
	border-radius: 0 20px 0 0;
	bottom: -1rem;
	left: -2rem;
}

.home .entry-content #location_section h3{
	display: none; 
}

.home .entry-content #location_section .location-card{
	padding-top: 0 !important; 
}

.loc-lines{
	width: 1920px;
	height: 35rem; 
	z-index: 10000;
}

.group-svg-home-loc svg {
	position: absolute; 
	display: block;
    right: .5rem;
	top: 100%; 
	width: 1904px;
    max-width: none;
	z-index: 1;
   
}

@media (min-width: 68.5em) {
	.home-loc-cover{
		padding-top: 5rem;
		padding-bottom: 4rem; 
	}	
	.home .entry-content #location_section a{
		font-size: 1rem !important; 
	}
	.home .entry-content #location_section{
		padding-top: 2rem !important ; 
		padding-bottom: 1.5rem !important ; 
	}
}

@keyframes locLines{
	to{
		stroke-dashoffset: 0;
		
	}
}

@media (prefers-reduced-motion: no-preference) {
	.home .entry-content .location-card .wp-block-post-featured-image:before{
		transform: translateY(1rem);
		transition: transform .5s 1s ease;  
	}
	.home .entry-content .location-card .wp-block-post-featured-image:after{
		transform: translateY(-1rem);
		transition: transform .5s 1s ease;  
	}
	
	.home .entry-content .home-loc-cover.js-intersected .location-card .wp-block-post-featured-image:after {
		transform: translateY(0);
	}
	.home .entry-content .home-loc-cover.js-intersected .location-card .wp-block-post-featured-image:before {
		transform: translateY(0);
	}

	.location-lines svg path{
		stroke-dasharray: 3000;
		stroke-dashoffset: 3000;
	}
	.home-loc-cover.js-intersected .location-lines svg path {
		animation: locLines 3s ease forwards ; 
	}
}


.home-loc-cover{
	overflow: hidden; 
}

.home-loc-cover .wp-block-cover__inner-container{
	position: initial !important ; 
}
.home-loc-cover .location-lines{
	position: initial !important ; 
}

/* new home loc lines */
.location-lines svg {
  position: absolute;
  display: block;
  right: -8.5rem;
  top: .5rem;
  width: 1904px;
  max-width: none;
  z-index: 0;
}

@media (min-width: 68.5em) {
	.location-lines svg {
		right: .5rem;
  		top: 1.5rem;
	}
}

@media (min-width: 115.5em) {
	.location-lines svg {
		width: 100vw;
		margin-left: calc(50% - 32vw) !important;
		
	}
}