/* MASTER CSS ITEMS */
*{
  margin: 0px;
  padding: 0px;
  transition: all 0.25s ease;
  font-family: 'Roboto Condensed', sans-serif;
}

html{
  scroll-behavior: smooth;
}

.flexRow{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flexCol{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sectionWrap{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 50px;
  width: 100%;
}

.sectionHeader + .sectionWrap{
  padding-top: 50px;
}

section{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 80%;
  max-width: 1200px;
  z-index: 2;
}

.coverImage{
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.coverImage > img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 1;
  transition: none;
}

.containImage{
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.containImage > img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: contain;
  z-index: 1;
}

.rellax {
  height: 130% !important;
  width: 130% !important;
}

.overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #000000;
  mix-blend-mode: multiply;
  opacity: 0.3;
  z-index: 1;
}

.threeColumnWrap{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}

.column{
  flex: 1;
  flex-basis: 200px;
}

.greenButton,
.loadMoreButton{
  color: #ffffff;
  text-align: center;
  background-color: #36965F;
  padding: 10px 30px 10px 30px;
  margin-top: 25px;
  transform: scale(1);
}

.greenButton:hover{
  background-color: #081E1E;
  transform: scale(1.1);
}

.loadMoreButton{
  width: 100%;
  border: 0px;
  margin: 0px;
  font-size: 20px !important;
}

.loadMoreButton:hover{
  background-color: #081E1E !important;
  cursor: pointer;
}

.scrollPoint{
  position: absolute;
  height: 0px;
  width: 0px;
  top: -80px;
}

@media only screen and (max-width: 400px) {
  section{
    width: 90%;
  }
}

/* Text */
a{
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
nav li,
.iconWrap:last-child,
.topNav,
.greenButton,
.loadMoreButton,
.addOnLink,
.submitButton,
.copyrightBar{
font-family: futura-pt-condensed, sans-serif !important;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
}

h1{
  color: #ffffff;
  font-size: 85px;
  line-height: 75px;
  text-align: center;
  font-weight: 800;
  text-shadow: 0px 5px 10px black;
}

h2{
  font-size: 30px;
  line-height: 25px;
  font-weight: 800;
  text-align: center;
}

h3{
  font-size: 25px;
  line-height: 20px;
  font-weight: 800;
}

p,
li{
  font-family: 'Roboto Condensed', sans-serif;
  color: #0C4243;
}

span{
  color: #36965F;
  font-family: inherit;
}

@media only screen and (max-width: 700px) {
  h1{
    font-size: 45px;
    line-height: 40px;
  }
}
/* Text END */

/* Colors */
.bgAqua{
  background-color: #0C4243;
}

.bgDeepAqua{
  background-color: #052A2B;
}

.bgDarkAqua{
  background-color: #081E1E;
}

.bgGreen{
  background-color: #36965F;
}

.bgWhite{
  background-color: #ffffff;
}
/* Colors END */
/* MASTER CSS ITEMS END*/

/* HEADER */

header{
  width: 100vw;
  position: relative;
}

.socialBar{
  width: 100%;
  color: #ffffff;
}

.socialBar section{
  justify-content: flex-end;
}

.iconWrap,
.topNav{
  height: 25px;
  width: 25px;
  padding: 5px;
  margin-left: 1px;
  color: #ffffff;
}

.iconWrap:last-child,
.topNav{
  width: auto;
  padding: 5px 10px 5px 10px;
}

.iconWrap:hover{
  background-color: #36965F;
}

.mainHeader{
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.mainHeader section{
  justify-content: space-between;
}

.logoWrap{
  width: 150px;
}

.logoWrap img{
  width: 100%;
}

#desktopNav ul,
#desktopNav li{
  list-style-type: none;
  padding-left: 0px;
}

#desktopNav li{
  margin-left: 20px;
  color: #0C4243;
}

#desktopNav li:hover{
  color: #36965F;
}

#desktopNav li:last-child{
  background-color: #0C4243;
  padding: 5px 10px 5px 10px;
  color: #ffffff;
}

#desktopNav li:last-child:hover{
  background-color: #36965F;
}

/*Mobile Nav Button-----------*/

#mobileNav{
  position: absolute;
	bottom: 0;
	width: 100%;
}

#mobile-nav{
	display: none;
}

.mobile-nav{
	height: calc(100vh - 128px); /*full-screen - height of header*/
	width: 100vw;
	background-color: #022D3B;
	position: absolute;
	z-index: 996;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin: 0px;
	padding: 0px;
	padding-top: 10px;
	box-sizing: border-box;
	top: 0;
}

.mobile-nav section{
	flex-direction: column;
}

.mobile-nav li{
	list-style-type: none;
	background-color: transparent;
	border: 2px solid #36965F;
	border-radius: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	transition: all .25s ease;
  width: 100%;
}

.mobile-nav li:hover{
	background-color: #36965F;
}

.mobile-nav li a{
	text-decoration: none;
	color: #ffffff;
	font-size: 25px;
	padding: 10px 20px 10px 20px;
	display: block;
}

.navLogo{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 50vw;
	opacity: 0.1;
}

button:focus,
button:active,
button:visited,
button:hover{
	background-color: transparent !important;
}

.mobile-nav-button{
	height: 40px;
	width: 40px;
	background-color: transparent;
	border: none;
	outline: none;
	cursor: pointer;

	position: absolute;
	margin: auto;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: visible;
	display: none;
}

.mobile-nav-button:hover .hamburger{
	background-color: #77C5A3;
	transition: all 0.25s ease;
}

.hamburger{
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	height: 3px;
	width: 20px;
	border-radius: 999px;
	background-color: #022D3B;
	transition: all 0.25s ease;
}

#burger-one,
#burger-two{
	transform: rotate(0deg);
}

#burger-one{
	top: 15px;
}

#burger-two{
	bottom: 15px;
}

.popup { display: none; }
.popup.show { display: flex; }
.popup-shown { overflow: hidden; }

@media only screen and (max-width: 700px) {

  .mobile-nav-button{
    display: flex;
  }

  #desktopNav{
    display: none;
  }
}
/*Mobile Nav Button END-----------*/

/* HEADER END */

.contentWrap{
  width: 100%;
}

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

.hero{
  width: 100%;
  min-height: 50vh;
  padding-top: 5vh;
  padding-bottom: 5vh;
  box-sizing: border-box;
}

.hero .greenButton{
  box-shadow: 0px 5px 10px black;
  font-size: 25px;
  line-height: 20px;
}

/* Hero END------------------------ */

/* Section Header------------------------ */

.sectionHeader{
  background-color: #052A2B;
  border-bottom: 5px solid #36965F;
  color: #ffffff;
  width: 100%;
  padding-top: 25px;
  padding-bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Section Header END------------------------ */

/* Text Left Image Right------------------------ */

.textLeftWrap{

}

.textLeftWrap section,
.textRightWrap section{
  gap: 25px;
  align-items: stretch;
  justify-content: stretch;
}

.textLeftWrap .textWrap,
.textRightWrap .textWrap,
.textLeftWrap .coverImage,
.textRightWrap .coverImage{
  flex: 1;
  flex-basis: 300px;
}

.textLeftWrap .textWrap,
.textRightWrap .textWrap{
  align-items: flex-start;
  padding-top: 5vw;
  padding-bottom: 5vw;
}

.textLeftWrap .coverImage,
.textRightWrap .coverImage{
  min-height: 200px;
}

.textLeftWrap h3,
.textRightWrap h3{
  color: #0C4243;
  margin-bottom: 15px;
}

.textLeftWrap .triangleOverlay {
  position: absolute;
  width: 0;
  height: 0;
  border-right: 10vw solid transparent;
  border-top: 60vh solid #ffffff;
  z-index: 2;
  bottom: 0;
}

.textRightWrap .triangleOverlay {
  position: absolute;
  width: 0;
  height: 0;
  right: 0;
  border-left: 10vw solid transparent;
  border-bottom: 60vh solid #ffffff;
  z-index: 2;
  top: 0;
}

@media only screen and (max-width: 700px) {
  .textLeftWrap section{
    flex-wrap: wrap-reverse;
  }

  .textRightWrap section{
    flex-wrap: wrap;
  }

  .textLeftWrap .triangleOverlay,
  .textRightWrap .triangleOverlay{
    display: none;
  }
}

/* Text Left Image Right END------------------------ */

/* Lawn Care Plans------------------------ */

.plansWrap .column{
  box-shadow: 0px 10px 15px black;
}

.plansWrap .threeColumnWrap{
  justify-content: stretch;
  align-items: stretch;
}

.plansWrap .column{
  display: flex;
  flex-direction: column;
}

.plansWrap .greenButton{
  margin-top: auto;
  width: calc(100% - 50px);
}

.planTitleWrap{
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
}

.planTitleWrap h3{
  text-align: center;
  color: #0C4243;
}

.planContentWrap{
  padding: 25px 25px 0px 25px;
  background-color: rgba(8,30,30,0.75);
  border: 2px solid #36965F;
  border-top: 0px;
  flex: 1;
}

.planContentWrap p{
  color: #ffffff;
  margin-bottom: 25px;
}

.planContentWrap ul,
.addOnPlansWrap .content ul{
  padding-left: 14px;
}

.planContentWrap li,
.addOnPlansWrap .content li{
  color: #ffffff;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  border-bottom: 1px solid #36965F;
}

.planContentWrap li p,
.addOnPlansWrap .content li p{
  color: #ffffff;
  margin: 0px;
}

.planContentWrap li:first-child,
.addOnPlansWrap .content li:first-child{
  padding-top: 0px;
}

.planContentWrap li:last-child,
.addOnPlansWrap .content li:last-child{
  border: 0px;
  margin-bottom: 25px;
}

.addOnPlansWrap{
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.addOnPlansHeader{
  background-color: #36965F;
  width: 100%;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
}

.addOnPlansHeader h3{
  color: #ffffff;
}

.addOnPlansHeader h3 span{
  color: #052A2B;
}

.addOnPlans{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.addOnLink{
  text-decoration: none;
  list-style-type: none;
  padding-left: 0px;
  flex: 1;
  text-align: center;
  border: 1px solid #36965F;
  box-sizing: border-box;
  white-space: nowrap;
  margin-left: -1px;
  margin-top: -1px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.addOnLink a{
  flex: 1;
  padding: 25px;
  display: block;
  color: #ffffff;
  background-color: #052A2B;
}

.addOnLink a:hover{
  background-color: #36965F;
}

.addOnLink a:hover span{
  color: #052A2B;
}

/* Popups */
.popOverlay {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
}

.popOverlay:target {
  visibility: visible;
  opacity: 1;
}

.addOnPopup {
  padding: 25px;
  padding-bottom: 0px;
  border: 1px solid #36965F;
  color: #ffffff;
  width: auto;
  max-width: 90%;
  position: relative;
  transition: all 5s ease-in-out;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.addOnPopup section{
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.addOnPopup h2 {
  margin-top: 0;
  margin-bottom: 25px;
  max-width: 80%;
  text-align: left;
}

.addOnPopup p{
  color: #ffffff;
}

.addOnPopup .greenButton{
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

.addOnPopup .close {
  position: absolute;
  top: 20px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  line-height: 20px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
}
.addOnPopup .close:hover {
  color: #36965F;
}
.addOnPopup .content {
  overflow: auto;
}

.closeOverlay{
  position: absolute;
  height: 100%;
  width: 100%;
}
/* Popups END */

/* Lawn Care Plans END------------------------ */

/* Banner------------------------ */

.bannerWrap{
  padding-top: 100px;
  padding-bottom: 100px;
}

.bannerWrap section{
  justify-content: space-between;
  gap: 5vw;
  flex-wrap: wrap;
}

.bannerWrap .containImage{
  flex: 1;
  flex-basis: 200px;
  height: 20vw;
  max-height: 200px;
  min-height: 100px;
}

.bannerTextWrap{
  z-index: 1;
  flex: 1;
  flex-basis: 200px;
}

.bannerTextWrap h2{
  color: #ffffff;
  font-size: 50px;
  line-height: 45px;
  text-shadow: 0px 5px 10px black;
}

.bannerTextWrap .greenButton{
  box-shadow: 0px 5px 10px black;
}

/* Banner END------------------------ */

/*FAQs---------------------------*/

.faqsWrap{
	margin-bottom: 0px;
  padding-bottom: 0px;
  padding-top: 0px !important;
  position: relative;
}

.faqs-list{
	flex-direction: column;
	overflow-x: hidden;
	width: 100%;
  max-width: none;
}

.accordion-wrap{
	display: flex;
	flex-direction: row;
	width: 100%;
}

.accordion {
	background-color: #ffffff;
	color: #052A2B;
	cursor: pointer;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	border: 1px solid #36965F;
	font-size: 20px;
	padding: 0px;
	transition: all 0.25s ease;

	display: flex;
	justify-content: center;
	align-items: center;
}

/*.accordion:last-of-type{
	border-bottom: none;
}*/

.accordion section{
	width: calc(80% - 29.5px);
    max-width: calc(1200px - 29.5px);
}

.accordion span{
	color: #891723;
	transition: all 0.25s ease;
}

.accordion:focus{
	background-color: #36965F !important;
}

.faqs-active, .accordion:hover {
  background-color: #36965F !important;
  color: #ffffff !important;
}

.accordion:hover .faqs-category,
.faqs-active .faqs-category{
	background-color: #540C0E;
}

.accordion:after {
  content: "+";
  color: #052A2B;
  font-weight: bold;
  float: right;
  margin-left: 18px;
  line-height: 20px;
}

.faqs-active:after {
  content: "-";
}

.faqs-question{
	margin: 0px;
	font-size: 20px;
	padding-right: 18px;
	padding-top: 18px;
	padding-bottom: 18px;
  flex: 1;
}

.panel {
  background-color: #ffffff;
  max-height: 0;
  overflow: hidden;
  display: block;
  transition: max-height 0.25s ease-out;
}

.panel p{
	margin-top: 25px;
	margin-bottom: 25px;
}

/*.panel:last-of-type{
	border-bottom: 2px solid #000000;
}*/

.panel img,
.panel iframe{
	max-width: 100%;
	width: 100%;
	height: auto;
}

.panel iframe{
	min-height: 400px;
}

/*FAQs END---------------------------*/

/* Footer------------------------ */

footer{
  background-color: #052A2B;
}

footer section{
  gap: 25px;
  align-items: stretch;
}

.contactInfoWrap{
  flex: 1;
  background-color: #081E1E;
  width: 30%;
  min-width: 250px;
  max-width: 350px;
  padding: 50px;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: flex-start;
}

.contactInfoWrap img{
  width: 100%;
  margin-bottom: 50px;
}

.contactInfoWrap ul,
.contactInfoWrap li{
  padding: 0px;
  list-style-type: none;
  color: #ffffff;
}

.contactInfoWrap li{
  border-bottom: 1px solid #36965F;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
}

.contactInfoWrap li:first-child{
  padding-top: 0px;
}

.contactInfoWrap li:last-child{
  border-bottom: 0px;
  padding-bottom: 0px;
}

.contactFormWrap{
  flex: 1;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 50px;
  padding-bottom: 50px;
  box-sizing: border-box;
}

.contactFormWrap h2{
  color: #ffffff;
  margin-bottom: 10px;
  text-align: left;
}

.contactFormWrap p{
  color: #ffffff;
}

.contactFormWrap .inputRow{
  width: 100%;
  gap: 10px;
}

.contactFormWrap input,
.contactFormWrap textarea,
.contactFormWrap button{
  margin-bottom: 10px;
  flex: 1;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 0px;
  border-left: 4px solid #36965F;
  border-top: 0px;
  border-bottom: 0px;
  border-right: 0px;
  font-size: 15px;
}

.contactFormWrap input:focus,
.contactFormWrap textarea:focus{
  outline: none;
  border-top: 2px solid #36965F;
  border-bottom: 2px solid #36965F;
  border-right: 2px solid #36965F;
  box-sizing: border-box;
}

.submitButton{
  border: 0px !important;
  background-color: #36965F;
  color: #ffffff;
  font-size: 20px !important;
  border-radius: 0px !important;
}

.submitButton:hover{
  background-color: #081E1E !important;
  cursor: pointer;
}

input#secretHoneypotParamName { display: none; }

.sprig-component{
  width: 100%;
}

.copyrightBar{
  background-color: #081E1E;
  width: 100%;
  padding: 10px;
  color: #ffffff;
  box-sizing: border-box;
}

@media only screen and (max-width: 700px) {
  footer section{
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .contactFormWrap{
    padding-bottom: 0px;
  }

  .contactInfoWrap{
    width: 100%;
    align-self: center;
  }
}

/* Footer END------------------------ */

/* Internet Explorer Check */

.iecheck{
	display: none;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.iecheck{
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	z-index: 99999;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;

	background-color: #081E1E;
}

	.message-wrap{
		width: 80%;
		max-width: 500px;
		text-align: center;
	}

	.ie-logo{
		width: 150px;
	}

	.iecheck h1{
		color: #ffffff;
	}

  .iecheck span{
    color: #36965F;
  }


  .iecheck p{
    color: #ffffff;
    font-size: 18px;
	line-height: 30px;
  }
}

/* Lower */
.iecheck-lower{
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	z-index: 99999;

	background-color: #081E1E;
}

.message-wrap-lower{
	width: 80%;
	max-width: 600px;
	text-align: center;
	position: absolute;
	margin: auto;
	top: 200px;
	bottom: 0;
	left: 0;
	right: 0;
}

.ie-logo-lower{
	width: 150px;
}

.ie-logo-lower{
	width: 100px;
}

.iecheck-lower h1{
	color: #ffffff;
}

.iecheck-lower span{
  color: #36965F;
}

.iecheck-lower p{
  color: #ffffff;
  font-size: 18px;
	line-height: 30px;
}

/* Internet Explorer Check END */




.jobber-inline-work-request,
.copilot-request-container{
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 50px !important;
}

.copilot-request-container .container-fluid{
  padding: 0px !important;
}

.simpleText{
    padding-top: 50px;
    padding-bottom: 50px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.simpleText h2{
    text-align: left;
    color: #36965F;
    margin-bottom: 25px;
}

.simpleText p{
    text-align: left;
    margin-bottom: 10px;
}