
/*HOME PAGE

@media (min-width: 500px) {
@keyframes bgimgboxzoom {
   0% {-webkit-transform: translateY(-50%) scale(0.5); opacity: 0;}
   100% {-webkit-transform: translateY(-50%) scale(1); opacity: 1;}
}
.bgimgbox {-webkit-animation: bgimgboxzoom 1s;}
.homecap {-webkit-animation: slidecap 1s;}

@keyframes sblockzoom {
0% {-webkit-transform: scale(0); transform: scale(0); opacity: 0;}
1% {-webkit-transform: scale(.5); transform: scale(.5); opacity: 0;}
5% {-webkit-transform: scale(1.05); transform: scale(1.05); opacity: 1;}
10% {-webkit-transform: scale(1); transform: scale(1); opacity: 1; transform-origin: 20% 0%;}
}
.sb:nth-child(1) {-webkit-animation: sblockzoom 8s;}
.sb:nth-child(2) {-webkit-animation: sblockzoom 10s; animation-delay: .05s;}
.sb:nth-child(3) {-webkit-animation: sblockzoom 12s; animation-delay: .08s;}
.sb:nth-child(4) {-webkit-animation: sblockzoom 14s; animation-delay: .11s;}
.sb:nth-child(5) {-webkit-animation: sblockzoom 16s; animation-delay: .14s;}
.sb:nth-child(6) {-webkit-animation: sblockzoom 18s; animation-delay: .17s;}
.sb:nth-child(7) {-webkit-animation: sblockzoom 20s; animation-delay: .2s;}
.sb:nth-child(8) {-webkit-animation: sblockzoom 22s; animation-delay: .23s;}
.sb:nth-child(9) {-webkit-animation: sblockzoom 24s; animation-delay: .26s;}
}*/

/*-----------------------------------------------*/

/*Big Home Pic*/

/*.homecap {outline: 1px solid #F00} #homecapback {outline: 1px solid #FF0}*/

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #444 /*sdf*/;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 650px; object-fit: cover; object-position: 50% 70%; display: block;}
#homecapback {position: absolute; width: 100%; max-width: 1300px; left: 0; right: 0; margin: auto; text-align: center; top: 46%; transform: translateY(-46%); z-index: 2;}
.homecap {position: relative; text-align: left; z-index: 1; color: #FFF; font-size: 16px; max-width: 770px;}

@media (max-width: 1370px) {.homecap {margin-left: 30px; margin-right: 20px;}}
@media (max-width: 500px) {.homecap {margin-left: 20px; margin-right: 15px;}}

.homecap h1 {font-size: 1.3em; line-height: 1.2; font-weight: 500; margin: 0; /*text-transform: uppercase; letter-spacing: 1px;*/}
.homecap h2 {font-size: 4em; line-height: 1.2; padding-top: 20px; margin: 0; font-weight: 600 !important;}
.homecap h2 span {white-space: nowrap;}
.homecap h2 span:last-child {display: block; font-size: .8em; color: var(--yellowlite);}
.homecap3 {font-size: 1.2em; line-height: 1.55; padding-top: 20px; font-weight: 400; color: #DDD;}

@media (max-width: 1000px) {#homepic img {height: 580px;} .homecap {max-width: 670px;} .homecap h2 {font-size: 3.5em;}}
@media (max-width: 860px) {#homepic img {height: 550px;} .homecap {max-width: 570px;} .homecap h2 {font-size: 3em;}}
@media (max-width: 680px) {#homepic img {height: calc(40vw + 280px);} .homecap {max-width: auto;} .homecap h2 {font-size: 7.7vw;}}
@media (max-width: 550px) {#homepic img {height: 520px;} .homecap h1 span {display: block;} .homecap3 {line-height: 1.45;}}
@media (min-width: 501px) {#homepic img {filter: brightness(45%);}}
@media (max-width: 450px) {#homepic img {height: 540px;}}

#btn {text-align: center; margin: 30px auto 0 auto;}
#btn a {display: table-cell; margin: auto; text-align: center; font-size: 18px; font-weight: 500; line-height: 1.4; background-color: var(--colormain); border: 1px solid #BBB; -webkit-transition: 0.15s; white-space: nowrap; border-radius: 4px; padding: 10px 13px 8px 13px; color: #FFF !important; text-decoration: none;}
#btn a:hover {background-color: var(--yellow);}
#btn a:hover {color: #000 !important;}

/*--------------------------------*/

/*Under Pic*/

/*.benefitsinside {osutline: 1px solid green} .benefit {osutline: 1px solid yellow}*/

#benefits {background-color: var(--colordark); padding: 32px;} /*DCB543*/
.benefitsinside {max-width: 1300px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr);}
.benefit {position:relative; display:grid; grid-template-columns:max-content 1fr; align-items:center;}
.benefit img {display:block; width: 48px; height: 48px; margin:auto;}
.benefittext {padding-left:20px;}
.benefittext div {margin:0 0 7px 0; font-size:18px; line-height:1.2; font-weight:700; color: var(--yellowlite);}
.benefit p {margin:0; font-size:14px; line-height:1.45; color: #FFF;}

@media (min-width:1016px) {
.benefit {padding:0 25px;}
.benefit:first-child {padding-left: 0;} .benefit:last-child {padding-right: 0;}
.benefit:not(:last-child) {border-right:1px solid #888;}
}
@media (max-width:1015px) and (min-width: 481px) {
.benefitsinside {grid-template-columns:repeat(2,1fr); max-width: 600px;}
.benefit:nth-child(1),.benefit:nth-child(2) {padding-bottom: 15px;}
.benefit:nth-child(3),.benefit:nth-child(4) {padding-top: 15px;}
.benefit:nth-child(1),.benefit:nth-child(3) {padding-right: 15px;}
.benefit:nth-child(2),.benefit:nth-child(4) {padding-left: 15px;}
}

@media (max-width:480px) {#benefits {padding:15px 25px;}.benefitsinside {grid-template-columns:1fr;}.benefit {padding:22px 10px;}}

/*--------------------------------*/

/*Services (Pest Blocks)*/

#pests {padding: 35px 0; background-color: #EEE;}
.pestgrid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 25px 0;}

.pestbox {min-width: 0; padding: 24px 18px 20px; background: #fff; border: 1px solid #ddd; border-radius: 8px; text-align: center; text-decoration: none; box-shadow: 0 1px 4px 1px rgba(0,0,0,.05); transition: .2s ease; color: inherit !important;}

.pestbox:hover {border-color: #AAA; box-shadow: 0 5px 15px rgba(0,0,0,.10);}
.pestbox img {display: block; width: 100%; max-width: 185px; height: 115px; object-fit: contain; margin: 0 auto 8px;}
.pestbox h3 {padding-bottom: 5px;; font-size: 23px; line-height: 1.15; color: var(--colormain);}
.pestbox p {min-height: 40px; margin: 0 0 12px 0; font-size: 16px; line-height: 1.35;}
.learnmore {display: inline-block; padding: 10px 18px; border-radius: 7px; font-size: 15px; font-weight: 400; line-height: 1; white-space: nowrap; background: var(--yellow); color: #000;}
.learnmore b {display: inline-block; margin-left: 7px; font-size: 18px; font-weight: 400; transition: margin-left .2s ease;}

.pestbox:hover {filter: saturate(110%) brightness(110%);}
.pestbox:hover .learnmore {background: var(--yellowlite);}
.pestbox:hover .learnmore b {margin-left: 10px;}

@media (max-width: 1000px) {.pestgrid {grid-template-columns: repeat(3, 1fr);}}
@media (max-width: 715px) {.pestgrid {grid-template-columns: repeat(2, 1fr);} #pests {padding: 20px 0;}}

@media (max-width: 500px) {
#pests {padding: 10px 0;} .pestgrid {grid-template-columns: 1fr; gap: 15px; max-width: 350px; margin: auto;}
.pestbox {padding: 20px 15px;} .pestbox img {height: 105px;}
}

/*--------------------------------*/

/*Values*/

/*#valueswrap, #valueswrap * {border: 1px solid red}*/

#valueswrap {width: 100%; max-width: 1600px; margin: 30px auto 10px auto;}
.value {vertical-align: top; font-size: 20px;}
.value img {display: block; vertical-align: middle; margin: auto; width: 64px; height: 64px;}
.valhead {margin: 15px auto 10px auto; font-weight: 600; text-transform: uppercase; font-size: 1.2em; line-height: 1.4;}
.valtxt {font-size: .85em; line-height: 1.5;}

@media (max-width: 1230px) and (min-width: 1101px) {.valsection .bodyarea {width: 90%;}}
@media (max-width: 1195px) {.valsection .bodyarea {padding: 60px 0 55px 0;}}
@media (max-width: 1195px) and (min-width: 1101px) {.valhead {font-size: 1.1em;}}

@media (min-width: 1101px) {
#valueswrap {display: table; table-layout: fixed;}
.valsection .bodyarea {padding: 70px 0 55px 0;}
.value {display: table-cell; width: 20%; text-align: center;}
.valueimg {vertical-align: middle; display: table-cell; width: 1%;} .valtxt {padding: 0 20px;}
}
@media (max-width: 1100px) {
.valsection .bodyarea {padding: 60px 0 30px 0;}
.value {display: block; width: auto; text-align: left; margin: 0; /*min-height: 110px;*/ padding: 20px 0;}
.valueimg {float: left; vertical-align: top; text-align: left; margin: -5px 20px 0 0;}
.valhead {margin: 0 auto;} .valtxt {display: table-cell;}
}
@media (max-width: 500px) {.value {padding: 15px 0;}}
@media (max-width: 320px) {
.valsection .bodyarea {width: 85%;} .value {text-align: center;} .valueimg {display: table-cell; float: none; height: auto; width: 1%; vertical-align: middle; margin: auto; padding-bottom: 15px;}
}

/*-----------------------------------------------*/

/*Reviews*/

.reviews-section {padding: 60px 30px !important; background-color: #EEE;}

.reviews-head {max-width: 800px; margin: 0 auto 20px auto; padding: 0 20px; text-align: center;}
.reviews-head .eyebrow {margin-bottom: 8px; font-size: 14px; letter-spacing: 4px; color: #666; font-weight: 600;}

.reviews-head .whatsay {margin: 0 0 12px 0; font-size: 40px; line-height: 1.2; font-weight: 500; color: inherit; color: var(--colormain);}
@media (max-width: 900px) {.reviews-head .whatsay {font-size: 35px;}}
@media (max-width: 600px) {.reviews-head .whatsay {font-size: 30px;}}

.reviews-head p {margin: 0; font-size: 18px; line-height: 1.5; color: #555;}

.reviews-carousel {max-width: 1400px; margin: 0 auto; position: relative; z-index: 0;}

.reviews-window {position: relative; overflow: hidden; padding: 25px 70px 35px 70px; cursor: grab; touch-action: pan-y; z-index: 1;}
.reviews-window,.reviews-window * {user-select: none; -webkit-user-select: none;}
.reviews-window.is-dragging {cursor: grabbing;} .reviews-window.is-dragging .reviews-track {transition: none;}

.reviews-track {display: flex; transition: transform .6s ease-in-out;}
.reviews-track.quick-slide {transition: transform .25s ease-out;}

.review-card {flex: 0 0 calc((100% - 40px) / 3); box-sizing: border-box; padding: 32px; background: #fff; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.10); margin-right: 20px;}
.review-card:last-child {margin-right: 0;}
.review-card span {display: block; margin: 0 0 8px 0; font-size: 22px; font-weight: 500; line-height: 1.2; color: #111827;}

.stars {margin-bottom: 22px; font-size: 24px; letter-spacing: 3px; color: var(--yellowlite); line-height: 1;}

.review-card p {margin: 0; font-size: 17px; line-height: 1.6; color: #222;}

.review-arrow {position: absolute; top: 50%; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; transform: translateY(-50%); background: #fff; color: #111827; box-shadow: 0 8px 22px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-size: 34px; line-height: 1; cursor: pointer; appearance: none; -webkit-appearance: none; z-index: 2; border: 2px solid #CCC;} /*outline doesn't work in old Safari*/
.review-arrow.is-hidden {visibility: hidden; opacity: 0; pointer-events: none;}
.review-arrow-left {left: 10px;}
.review-arrow-right {right: 10px;}
.review-arrow:hover {background: #F2F2F2;}

.review-dots {display: flex; justify-content: center; margin-top: 5px;}
.review-dots button {display: block; margin: 0 6px; width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; background: var(--colordark); cursor: pointer; appearance: none; -webkit-appearance: none;}
.review-dots button.active {background: #000;}

@media (max-width: 1270px) {.reviews-window {padding: 25px 60px 35px 60px;} .review-card {flex: 0 0 calc((100% - 20px) / 2);}}
@media (max-width: 830px) {.review-card {padding: 22px;}}
@media (max-width: 800px) {
.reviews-section {padding: 45px 15px;}
.reviews-window {padding: 25px 48px 35px 48px;}
.review-card {flex: 0 0 100%; margin-right: 20px; padding: 26px 22px;}
.review-arrow {width: 42px; height: 42px; font-size: 28px;}
.review-arrow-left {left: 8px;} .review-arrow-right {right: 8px;}
}

@media (max-width: 400px) {
.review-card {height: 360px; overflow: hidden;}
.review-card p {max-height: 210px; overflow-y: scroll; overflow-x: hidden; background-attachment: local, scroll, scroll; scrollbar-width: auto; scrollbar-color: #999 #F2F2F2;padding-right: 10px;}
}

/*-----------------------------------------------*/