:root {
  /* text */
  --green: #778272;
  --lightgreen: #D3DECF;
  --extralight: #D3DECF90;
  --darkgreen: #4C5647;
  --yellow: #E9C03C;
  --accent: #BCE1A9;
  --tan: #f6ede3;
  
  --book: 400;
  --regular: 500;
  --bold: 600;
}



body { background: #FFFAF8 }
* { font-family: 'nexa', sans-serif; font-style: normal; color: var(--darkgreen) }
h1, h2, h3 { font-family: 'nexa', sans-serif; font-style: normal; font-weight: var(--regular) }
h1 { margin-bottom: 20px; font-size: 2rem; line-height: 1 }
h2 { line-height: 1.1; margin-bottom: 25px }
h3 { font-size: 2.2rem }
p, li { line-height: 1.45; font-size: 1.2rem }
p a { color: var(--green); text-decoration: underline; text-underline-offset: 5px; transition: all 0.3s ease; position: relative }
p a:hover { color: var(--darkgreen); text-decoration: none; background-color: var(--lightgreen); padding: 2px 4px; border-radius: 3px }
.button { background: var(--yellow); font-size: .9rem; font-weight: var(--bold); text-transform: uppercase; border-radius: 12px; margin-top: 4px; color: var(--darkgreen) }
.button.call:after { font-family: "Font Awesome 7 Pro"; content: "\f2a0"; font-weight: 600; margin-left: 10px }
.button:hover { background: var(--green); color: white }

.full-width-bg { padding: 60px 0; background: #FFF }
.row { max-width: 75rem }

.intro p { font-size: 1.2rem; line-height: 1.2 }

.image-style-align-right { float: right; margin-left: 15px; margin-bottom: 15px }


@media only screen and (min-width: 40.063em) {
  h3 { font-size: 1.9375rem }
}







.pill-list { list-style: none; margin: 0; padding: 0 }

.pill-list li { padding: 15px 5px; font-size: 1.2rem; line-height: 1.2; margin-bottom: 5px; border-bottom: 2px solid var(--lightgreen); font-weight: var(--regular) }

.logo-strip { margin-top: 60px; height: 90px; overflow: hidden; position: relative; width: 100%; }
.logo-ticker { width: 100%; height: 100%; overflow: hidden; }
.logo-track { display: flex; align-items: center; height: 100%; animation: logoScroll 40s linear infinite; white-space: nowrap; }
.logo-track img { height: 90px; width: auto; margin: 0 30px; mix-blend-mode: multiply; flex-shrink: 0; }

@keyframes logoScroll {
    0% { transform: translateX(0) }
    100% { transform: translateX(-50%) }
}

/* Mobile: faster speed for logo scroller */
@media only screen and (max-width: 40em) {
	.logo-track { animation: logoScroll 30s linear infinite; }
	.logo-track img { margin: 0 20px; }
}

.left-list, .right-list { height: 100% }
.left-list { background: var(--lightgreen); padding: 50px 10px 40px 10px; border-radius: 20px }
.left-list ul li { font-weight: var(--book); font-size: 1.4rem; line-height: 0.9; margin-bottom: 15px; color: var(--darkgreen); padding: 0; text-align: center }

@media only screen and (min-width: 40.063em) {
  .section-header.services { margin-bottom: 80px }
  .left-list { background: var(--darkgreen); padding: 100px 5px 100px 60px; border-radius: 40px }
  .left-list ul li { font-weight: var(--book); font-size: 1.65rem; line-height: 1.2; margin-bottom: 12px; color: white; cursor: pointer; transition: all 0.3s ease; padding: 8px 0; border-radius: 8px; text-align: left }
  .left-list ul li:hover { transform: translateX(5px); }
  .left-list ul li:hover:after { content: "\f061"; font-family: "Font Awesome 7 Pro"; font-weight: 400; margin-left: 10px; opacity: .4 }
  .left-list ul li.active { color: var(--accent); font-size: 1.85rem; font-weight: var(--bold); transform: translateX(-10px) }
  .left-list ul li.active:after { content: "\f061"; font-family: "Font Awesome 7 Pro"; font-weight: 400; margin-left: 10px }
}

.right-list { background: var(--lightgreen); padding: 100px 60px; border-radius: 40px }
.right-list h3 { font-size: 2.1rem; line-height: 1; margin-bottom: 20px; color: var(--darkgreen) }
.right-list p { font-size: 1.2rem; line-height: 1.4; color: var(--darkgreen) }
.service-content { transition: opacity 0.3s ease }




.banner-quote { background: var(--tan); text-align: center; border-radius: 40px; padding: 60px; margin-top: 60px }
.banner-quote p { font-weight: 500; font-size: 1.6rem; line-height: 1.6; margin-bottom: 0 }


.row.quote { max-width: 64rem; margin: 0 auto }

blockquote { 
  text-align: center;
  border: 0;
  position: relative;
  padding: 90px 30px 60px; margin-top: 155px; margin-bottom: 160px; background: var(--extralight);
  border-radius: 40px;
}
blockquote p:first-of-type { 
  font-size: 2rem;
  line-height: 1.3;
  color: var(--darkgreen);
}
blockquote::before {
  content: '\201C';
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9rem;
  line-height: 1;
  color: var(--green);
  font-weight: normal;
}
/* blockquote::after {
  content: '”';
  position: absolute;
  bottom: -85px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11rem;
  line-height: 1;
  color: var(--green);
  font-weight: normal;
} */
blockquote cite, blockquote p:nth-of-type(2) { font-size: 1.2rem; line-height: 1.2; margin-top: 20px; display: block }
@media only screen and (min-width: 40.063em) {
  blockquote { padding: 90px 60px 60px }
}
@media only screen and (min-width: 68.75em) {
  blockquote { margin-left: -60px; margin-right: -60px }
}

.row#hero { background: var(--extralight); padding: 160px 0 60px }
.row#hero > .row { max-width: 70rem }
#hero img { width: 100%; height: auto; display: block; border-radius: 40px }
#hero .hero-image .text { padding: 0 15px; margin-top: 30px }
#hero h1 { color: var(--darkgreen); display: inline-block; font-size: 3.8rem; line-height: .92; letter-spacing: -0.05rem }

h1 strong, h2 strong { color: var(--green); font-weight: var(--regular) }
.section-header { text-align: center; margin-top: 100px }
.section-label { position: relative; display: inline-block; font-size: 1.4rem; text-transform: uppercase; color: var(--green); font-weight: var(--bold) }
.section-label::after { content: ""; display: block; width: 80px; height: 2px; background-color: currentColor; margin: 0.5rem auto 0 }
p.section-intro { text-align: center; max-width: 560px; margin: 0 auto; line-height: 1.2 }

.row.icon-boxes { max-width: 64rem !important; margin: 0 auto; margin-top: 40px }
.row.icon-boxes .column { margin-bottom: 15px }
.icon-boxes .box { background: var(--darkgreen); border-radius: 20px; text-align: center; padding: 30px; height: 100% }
.icon-boxes .box p { color: white; font-weight: var(--bold); text-transform: uppercase; max-width: 170px; margin: 0 auto; line-height: 1.2; margin-bottom: 0; font-size: 1rem }
.icon-boxes .box i { color: var(--accent); font-size: 3rem; margin-bottom: 20px }

@media only screen and (max-width: 40em) {
  #hero h1 { font-size: 3.2rem; margin-bottom: 60px }
  body.home .row.icon-boxes .column { padding: 0 }
  .text-columns .image-style-align-right { float: none; margin-left: 0; margin-bottom: 15px }
  .text-columns .image-style-align-left { float: none; margin-right: 0; margin-bottom: 15px }
}




.phone-link,
.phone-link:link,
.phone-link:visited,
.phone-link:hover,
.phone-link:active { color:#4C5647; -webkit-text-fill-color:#4C5647; text-decoration:none }






@media only screen and (min-width: 40.063em) {
	h1 { font-size: 3rem }
  .icon-boxes .box { margin-bottom: 30px }
  .icon-boxes .box p { font-size: 1.2rem }
}
@media only screen and (min-width: 64.063em) {
	
}

/* ----------------------
	FOOTER
---------------------- */
footer { background: var(--darkgreen); margin-top: 100px; padding: 20px 0 100px 0 }
footer img.logo { width: 220px; margin-top: 30px }
footer a, footer a:hover, footer h3 { color: #E1EADC }
footer a:hover { text-decoration: underline }
footer ul { margin-left: 0 }
footer i { margin-right: 8px }
footer h3 { font-size: 1.2rem; margin-bottom: 10px; margin-top: 15px }
footer .button:hover { background: #E1EADC; color: var(--darkgreen) }

footer .contact { text-align: center }
body:not(.home) footer .contact { display: none }

footer .phone-link,
footer .phone-link:link,
footer .phone-link:visited,
footer .phone-link:hover,
footer .phone-link:active { color: var(--yellow)  ; -webkit-text-fill-color: var(--yellow); text-decoration:none; font-size: 2.6rem; line-height: 1; margin-bottom: 0; margin-top: 0 }

@media only screen and (min-width: 40.063em) {
  footer { padding: 50px 0 100px 0 }
  footer img.logo { margin-top: 0 }
  footer .contact { text-align: left }
  body:not(.home) footer .contact { display: block }
  footer .phone-link,
  footer .phone-link:link,
  footer .phone-link:visited,
  footer .phone-link:hover,
  footer .phone-link:active { font-size: 2rem }
}

/* ----------------------
	ANIMATIONS
---------------------- */
.slide-up {
	opacity: .25;
	transform: translateY(100px);
	transition: opacity 1s ease, transform 1s ease;
}

.slide-up.visible {
	opacity: 1;
	transform: translateY(0);
}