@charset "UTF-8";

#subBannerHome {
	position: relative;
	width: 100%;
  padding: 8vw 0 12vw;
  background: url(thumbnaillarge/Sub-home.png) no-repeat 105% 50% / 40%;
	overflow: hidden;
}

#subBannerHome:before{
	content: '';
	width: 100%;
	height: 100%;
	max-width:  400px;
	max-height: 400px;
	background: url(files/blob-v1.svg) no-repeat center center / contain;
	position: absolute;
	z-index: -1;
	right: 10%;
	top: calc(50% -200px);
 	animation: move-home 15s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes move-home {
  0%   { transform: scale(1)   translate(10px, -30px); }
  38%  { transform: scale(0.8, 1) translate(50%, 30%) rotate(160deg); }
  40%  { transform: scale(0.8, 1) translate(50%, 30%) rotate(160deg); }
  78%  { transform: scale(1.2) translate(0vw, 20%) rotate(-20deg); }
  80%  { transform: scale(1.2) translate(0vw, 20%) rotate(-20deg); }
  100% { transform: scale(1)   translate(10px, -30px); }
}



#subBannerHome .sub-text{
	padding-top: .8em;
	font-size: 50px;
	font-weight: 700;
	font-size: 4vh;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: relative;
}
#subBannerHome .sub-btn-wrap a:first-child{
	margin: 0;
}

#section1{
  padding-top: 0;
}

#section3 .textSection:before,
#section5 .textSection:before{
	content: '';
	display: block;
	width: 60vw;
	height: calc(100% + 20px);
	background: red;
	background: var(--navy) url(thumbnaillarge/bg-dark-section.jpg) no-repeat bottom center / cover;
	position: absolute;
	right: auto;
	left: 0;
	top: -10px;
	padding: 0;
	border-radius: 0px 40px 40px 0px;
}

#section3 .textSection:before{
	width: 80vw;
}

#section5 .textSection:before{
	left: auto;
	right: 0;
	border-radius: 40px 0px 0px 40px;
}

#section1 .textSection:before{
	width: 60vw;
}

.card-text{
	line-height: 22px;
}

/* GOOGLE RATING */
.google-rating-wrap{
	display: grid;
	grid-template-columns: 120px 1fr;
	grid-template-columns: 3fr 8fr;
	gap: 1em;
	margin: 4em 0 1em;
	width: 100%;
	max-width: 360px;
}

.google-rating-wrap .google-rating{
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.google-rating-wrap .google-rating .title{
	font-size: 28px;
}

.google-rating-wrap .total-stars{
	display: grid;
	grid-template-columns: 1fr 4fr;
	gap: 1em;
	align-items: center;
	width: 100%;
}

.google-rating-wrap .total-stars span{
	font-size: 2.7em;
	font-weight: 900;
}

.google-rating-wrap .total-stars img{
	width: 100%;
	max-width: 250px;
}

.google-rating-wrap .google-rating .reviews{
	font-weight: 500;
	font-size: 1em;
	margin-top: .2em;
}

.review-wrap .card-text{
	width: 100%;
	height: 176px;
	text-overflow: ellipsis;

	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	line-clamp: 8;
}

.review-wrap .card-review a{
	color: var(--blue);
	margin-top: .5em;
	font-weight: 500;
	font-size: .9em;
}

.review-wrap .card-review a:hover{
	color: var(--green);
}


@media all and (max-width:1400px){
	#section1 .textSection:before,
	#section3 .textSection:before,
	#section5 .textSection:before{
		width: 100vw;
		border-radius: 0;
	}
	#section1 .container, #section5 .container{padding: 4em 1em}
	#section1 .textSection h2 span{
		text-align: center;
	}
	#section1 .textSection h2,
	#section1 .highlight-wrap, 
	#section1 .text-wrap p{
		color: white;
		text-align: center;
	}
	#section5 h2{color: white; text-align: center}
	#section5 h2 span{text-align: center}
	#section5 .google-rating{color: white; margin: auto;}
	.google-rating-wrap{margin: 2em auto 0; line-height: 2em;}
	#subBannerHome .sub-btn-wrap {
		display: flex;
	}
	#subBannerHome .sub-btn-wrap .cta-btn{
		width: 350px;
		gap: 0;
	}
}

@media all and (max-width:1200px){
	
	#section1 .siteContent,
	#section3 .siteContent,
	#section5 .siteContent{
		padding-top: 4em;
	}
	
	
	#section3 {
		max-height: 1050px;
		overflow: hidden;
	}
	

	#section3 .grid-6-6{
		grid-template-columns: 1fr;
	}
	#section3 .text-wrap h2,
	#section3 .text-wrap h2 span,
	#section3 .text-wrap p {
		text-align: center;
	}
	#section3 .text-wrap .cta-btn{
		margin: 1em auto 0;
	}	
}

@media (min-width:701px) and (max-width:900px){
	#subBannerHome{
		background-position: 50% 95%;
		padding-bottom: 35vw;
	}
	#subBannerHome:before{
    max-width:  300px;
		max-height: 300px;
		right: auto;
		top: auto;
		left: calc(50% - 150px);
		bottom: 0;
	}
	#subBannerHome h1{
		text-align: center;
	}
	#subBannerHome h2{
		text-align: center;
	}

	#subBannerHome .sub-text {
		font-size: 1em;
		margin-bottom: 64px;
		margin-bottom: 4rem;
		font-size: 20px;
		text-align: center;
		margin-bottom: 0em;
  }
	#subBannerHome .content{
		width: 100%;
		margin: auto;
	}
	#subBannerHome .content__container{
		margin: 0 auto;
		height: 30px;
	}
	#subBannerHome .list{
		position: static;
	}
	#subBannerHome .sub-btn-wrap{
		display: flex;
		justify-content: center;
	}

}
@media all and (max-width:700px){
	#subBannerHome{
		background: none !important;
		padding: 3rem 0;
	}
	#subBannerHome::before{
		display: none;
	}
	#subBannerHome h1{
		text-align: center;
	}
	#subBannerHome h2{
		text-align: center;
	}
	#subBannerHome .sub-text {
		font-size: 1em;
		margin-bottom: 64px;
		margin-bottom: 4rem;
		font-size: 20px;
		text-align: center;
		margin-bottom: 0em;
  }
	#subBannerHome .content{
		width: 100%;
		margin: auto;
	}
	#subBannerHome .content__container{
		margin: 0 auto;
		height: 30px;
	}
	#subBannerHome .list{
		position: static;
	}
	#section1 .container{
		padding:0;
	}
	.sub-btn-wrap{
		justify-content: center;
	}
	.highlight-wrap{
		grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
		font-size: .9em;
		line-height:1.2em;
	}
	.card-heading{
		margin: .2em 0 .5em;
	}
	.card-text{
		padding-bottom: 1em;
	}
	.feature-wrap{
		width: 100%;
		padding: 10px;
	}
	#section2 .image-gfx{
		max-height: 400px;
	}
	#section2 .image-gfx img{
		  height:100%;
		}
	#section3 {
			max-height: none;
	}
	.recent-wrap .device.tablet{display: none;}
	.recent-wrap .device.mobile{
		transform: none;
	   max-width: 200px;
	}
	.recent-wrap{
		padding: 0 0 1rem;
	}
	
	.review-wrap{
		grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
	}
	.google-rating-wrap{
		grid-template-columns: 1fr 6fr;
	}

	.question-wrap .question{
		width: 100%;
	}
	.question-wrap .question .text-wrap p{
		min-height: 0;
		height: auto;
	}
	#section5 h2{color: white; text-align: center}
	#section5 h2 span{text-align: center}
	#section5 .google-rating{color: white; margin: auto;}
	.google-rating-wrap{margin: 2em auto 0; line-height: 2em;}
	.review-wrap{padding:0em;}
	.card-review .card-google{
		top:0; 
		right: 0;
		border: none;
	}
	#section8:before, #section8:after{
		display: none;
	}
	.question-wrap .question{
		box-shadow: none;
	}
	.question-wrap .question .question-image{
		width: 100%;
		display: none;
	}
	.question-wrap .question .text-wrap{
		margin-top: 0;
	}
	#section8{
		padding: 4em 1em;
	}
	#section9{
		padding: 0;
	}


}

@media (max-width:400px){
	#subBannerHome .sub-text{font-size: 18px; font-size: 5vw;}
	#subBannerHome .content__container{}
}