/*HOME PAGE*/

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

/*Hero*/

.hero-wrap {position: relative; display: flex; width: 100%; overflow: hidden; z-index: 0;}
.hero-photo {position: relative; width: 100%; min-height: 400px; background: url("images/toppic1.jpg") 50% 50% no-repeat; background-size: cover; z-index: 0;}

@media (min-width: 771px) {
.hero {width: 100%; overflow: hidden; background: none;}

.hero-copy {position: absolute; inset: 0 auto 0 0; width: calc(30% + 130px); display: flex; align-items: center; background: none; overflow: visible; z-index: 2;}

.hero-wrap::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(30% + 130px); background-color: rgba(71,95,99, .7); clip-path: polygon(0 0, calc(100% - 90px) 0, 100% 100%, 0 100%); z-index: 2; pointer-events: none;}
/*blue: background-color: rgba(0, 138, 177, .7), grey: rgba(85, 85, 85, .7)*/

.hero-text {z-index: 3;}
}

.hero-text {position: relative; color: #FFF;}
.hero-text div:nth-child(1) {font-family: 'RobotoCond', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1em; line-height: 1.15; margin-bottom: 30px;}
.hero-text div:nth-child(2) {font-size: .5em; line-height: 1.3; font-weight: 500;}
.hero-text span:first-child, .hero-text div:nth-child(2) {color: var(--orange2);}
.hero-text span:first-child {text-transform: uppercase;}
.hero-text span {white-space: nowrap;}

@media (min-width: 1901px) {.hero-copy {max-width: 800px;} .hero-text {padding: 70px 0 70px 80px; width: calc(93% - 124px); font-size: 55px;}}
@media (max-width: 1900px) and (min-width: 771px) {.hero-text {padding: 4vw 0 4vw 4vw; width: calc(95% - 120px); max-width: 520px; font-size: calc(9px + 2.5vw);}}
@media (max-width: 1170px) {
.hero-text {margin-top: -10px;}
.hero-text div:nth-child(2) {font-size: 0; display: none;}
.hero-text div:nth-child(1) {font-size: .85em; line-height: 1;} .hero-text + div {border: 1px solid red}
.hero-text span:first-child {display: block; font-size: 1.1em; margin-top: 3px;} .hero-text span:last-child {font-size: .9em;}
}
@media (max-width: 1170px) and (min-width: 771px) {.hero-text {width: calc(94% - 90px); font-size: calc(9px + 4.2vw);}}

@media (max-width: 770px) {
.hero-copy {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; margin-right: 0; background: none; overflow: visible;}
.hero-photo {width: 100%; height: calc(35vw + 200px); max-height: 450px;}
.hero-text {width: 88%; max-width: 560px; margin-top: 0; padding: 0; text-align: center; font-size: calc(40px + 3.5vw); z-index: 1;}
.hero-text div:nth-child(1) {margin-bottom: 22px;}
.hero-text div:nth-child(2) {display: block; font-size: calc(10px + 2vw)}
.hero-photo {filter: brightness(65%);}
}
@media (max-width: 400px) {
.hero-text div:nth-child(1) {font-size: 12vw;}
.hero-text span:first-child {display: block; margin-top: 8px; font-size: 1em;} .hero-photo {height: calc(80vw + 80px)}
}

/*Button*/

@media (min-width: 611px) {.hero-text .btn {margin-top: 30px;} .hero-text .btn a {padding: 12px 20px; font-size: 22px;}}
@media (max-width: 610px) {.hero-text .btn {margin-top: 25px;} .hero-text .btn a {padding: 9px 17px; font-size: 20px;}}
@media (max-width: 450px) {.hero-text .btn a {padding: 9px 14px; font-size: 19px;}}

.hero-text .btn {z-index: 20; text-align: center;}
.hero-text .btn a {display: table-cell; text-decoration: none; transition: 0.15s; font-weight: 500; line-height: 1.4; z-index: 20; color: #FFF; border: 2px solid #FFF;}
.hero-text .btn a:hover {background-color: var(--orange2); border: 2px solid var(--orange2); color: #000;}

@media (max-width: 770px) {
.hero-text .btn {display: inline-block; margin-left: auto; margin-right: auto;}
.hero-text .btn a {background-color: var(--bluegrey);}
}

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

/*Top Area*/

.toparea {margin: auto; text-align: center;}
.toparea h1 {margin: 0; font-size: 3.5em; font-weight: 700; line-height: 1.1; color: var(--orange1);}
.toparea div {margin: auto;}
.toparea h2 {margin: 20px 0; font-family: 'RobotoCond', Arial, Helvetica, sans-serif; font-weight: 600; font-size: 1.6em; line-height: 1.25; color: #000;}
.toparea h3 {margin: 0; font-size: 1.05em; font-weight: 400; line-height: 1.6;}

@media (min-width: 621px) {.toparea {width: 85%; max-width: 700px; padding: 70px 20px 35px 20px;} .toparea div {width: 70%;}}
@media (max-width: 620px) {.toparea {padding: 50px 8vw 25px 8vw;} .toparea h1 {font-size: calc(7vw + 10px);}}


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

/*Blocks*/

/*.blocks {border: 1px solid red} .blocks a {border: 1px solid bluegrey} .blocks span:last-child {border: 1px solid green}*/

.blocks {
padding: 0 3% 50px 3%; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin: auto; max-width: 1300px;
}

.blocks a {display: flex; flex-direction: column; align-items: center; margin: 6%; background-color: #EEE /*var(--orange2)*/; border: 1px solid #DDD; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); overflow: hidden; color: inherit; text-decoration: none; transition: .1s;}

.blocks img {width: 90px; height: 90px; width: 100%; height: auto; margin-bottom: 20px; transition: .15s;}
.blocks h3 {font-size: 25px; line-height: 1.2; color: var(--bluegrey); font-weight: 500;}
.blocks h3 span::after {position: relative; display: inline-block; content: "\203A"; margin-left: 8px; top: 1px; font-size: 1.4em; line-height: 0;}

.blocks p {margin: 0 auto 30px auto; padding: 0 20px; font-size: 17px; line-height: 1.6;}
.blocks a:hover {background-color: #FFF;} .blocks a:hover img {filter: brightness(120%) saturate(120%);}

/*@media (max-width: 1400px) and (min-width: 931px), (max-width: 550px) and (min-width: 381px) {.blocks h3 span {display: block;}}*/

@media (max-width: 1400px) {.blocks a:nth-child(6) h3 span {display: block;}}
@media (max-width: 1115px) and (min-width: 931px),(max-width: 760px) and (min-width: 401px), (max-width: 320px) {.blocks a:nth-child(3) h3 span {display: block;}}

@media (max-width: 930px) {.blocks {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 651px) {.blocks h3 {margin: 0 0 18px 0;}}
@media (max-width: 650px) {
.blocks p {visibility: hidden; height: 0; margin: 0; padding: 0;} .blocks a {margin: 5%;}
.blocks img {margin-bottom: 15px;} .blocks h3 {margin: 0 0 15px 0;}
}
@media (max-width: 540px) and (min-width: 401px) {.blocks h3 {font-size: 4.5vw;}}
@media (max-width: 400px) {.blocks {grid-template-columns: 1fr;} .blocks a {margin: 3% 4%;} .blocks h3 {font-size: 25px;}}
@media (max-width: 360px) {.blocks h3 {font-size: 23px;}}

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

/*Side by Side*/

/*#sslist {border: 1px solid bluegrey} #sslist ul {border: 1px solid cyan} #sslist li {border: 1px solid red}
#sideside .ssbodyarea {border: 1px solid green}*/

#sideside {margin: auto; padding: 50px 0; background-color: var(--bluegrey);} /*#B14E01*/
#sideside .ssbody1 {color: #FFF;}
#sideside .ssbody1, #sideside .ssbody2 {font-size: 18px; line-height: 1.6;}
#sideside .ssbody2 {margin-top: 20px; font-size: 17px; line-height: 1.4;}
#sideside .ssbody1 span {display: block; font-size: 1.5em; font-weight: 500;}
#sideside p {margin-bottom: 0;}
#sideside .sshead1 {margin-bottom: 20px; font-family: 'RobotoCond', Arial, Helvetica, sans-serif; font-size: 2.5em; line-height: 1.15; font-weight: 600; color: var(--orange2);}
#sideside .sshead2 {font-family: 'RobotoCond', Arial, Helvetica, sans-serif; font-size: 1.8em; line-height: 1.2; font-weight: 600;}
#sideside .sstbl {padding: 25px 25px 10px 25px; text-align: center; background-color: #FFF; box-shadow: 0 2px 22px rgba(0, 0, 0, 0.22);}

@media (min-width: 1301px) {
#sideside section:first-child {margin-right: 40px;} #sideside section:last-child {margin-left: 40px;}
}
@media (max-width: 1300px) and (min-width: 971px) {
#sideside section:first-child {margin-right: 3vw;} #sideside section:last-child {margin-left: 3vw;}
}
@media (min-width: 971px) {
#sideside .ssbodyarea {-webkit-display: grid; display: grid; grid-template-columns: 50% 50%; grid-auto-rows: 1fr; margin: auto; width: 85%; max-width: 1250px;}
}
@media (max-width: 970px) {#sideside .ssbodyarea {margin: 0 8%;} #sideside section:last-child {margin: 40px auto 0 auto;}}

/*items list*/

#sslist {margin: 20px auto; text-align: left;}
#sslist ul {vertical-align: top; margin: 0; padding: 0;}
#sslist li {position: relative; padding: 9px 0 9px 20px; font-size: 17px; font-weight: 500; line-height: 1.25; list-style: none; break-inside: avoid; border-bottom: 1px solid #DDD; color: #333;}
#sslist li::before {content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 16px; border-right: 4px solid var(--orange1); border-bottom: 4px solid var(--orange1); transform: rotate(32deg); box-sizing: border-box;}
#sslist span {display: block; margin-top: 3px; font-size: .9em; font-weight: 400; line-height: 1.3; color: #777;}

@media (min-width: 401px) {#sslist ul:first-child {padding-right: 10px;} #sslist ul:last-child {padding-left: 10px;}}
@media (max-width: 400px) {#sideside .ssbodyarea {margin: 0 25px;}}

@media (min-width: 1371px) {#sslist {column-count: 3;}}
@media (max-width: 1370px) and (min-width: 971px) {#sslist {column-count: 2;}}
@media (max-width: 970px) and (min-width: 751px) {#sslist {column-count: 4;}}
@media (max-width: 750px) and (min-width: 566px) {#sslist {column-count: 3;}}
@media (max-width: 565px) and (min-width: 361px) {#sslist {column-count: 2;}}
@media (max-width: 360px) {
#sslist {height: 405px; padding: 0 15px; box-shadow: 0 2px 22px rgba(0, 0, 0, 0.22); overflow-y: scroll; overflow-x: hidden; background-attachment: local, scroll, scroll; scrollbar-width: auto; scrollbar-color: var(--orange1) #f2f2f2;}
/* Chrome, Edge, Safari */
#sslist::-webkit-scrollbar {width: 14px;}
#sslist::-webkit-scrollbar-track {background: #f2f2f2;}
#sslist::-webkit-scrollbar-thumb {background: var(--orange1); border: 3px solid #f2f2f2;}
#sslist::-webkit-scrollbar-thumb:hover {background: var(--orange2);}
}

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

/*Why Us*/

#whyus {margin: auto; background-color: #EEE;}
#whyus .wubodyarea {-webkit-display: grid; display: grid; padding: 50px 0; margin: auto; width: 85%; max-width: 1250px;}
#whyus div {font-size: 18.5px; line-height: 1.5;}
#whyus .heading {font-family: 'RobotoCond', Arial, Helvetica, sans-serif; font-size: 2.3em; line-height: 1.2; font-weight: 600; color: var(--orange1);}
#whyus img {display: block; width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 2px 22px rgba(0, 0, 0, 0.22); /*object-position: 50% 50%;*/}
#whyus p {margin-bottom: 0;}

@media (min-width: 1301px) {
#whyus .wubodyarea {grid-template-columns: 60% 40%; grid-auto-rows: 1fr;}
#whyus section:first-child {margin-right: 20px; padding: 25px 0 35px 0;} #whyus section:last-child {margin-left: 20px; height: 90%; align-self: center;}
}
@media (max-width: 1300px) {
#whyus .wubodyarea {padding: 5vw 0;}
#whyus section:first-child {padding: 20px 0 0 0;} #whyus section:last-child {margin: 40px 0 30px 0;}
#whyus img {height: calc(80px + 45vw); max-height: 450px;}
}

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

/*Reviews*/

.reviews-section {padding: 60px 30px !important; background-color: var(--greenlite);}

.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: #111827;}
@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(--orange2); line-height: 1;}

.review-card p {margin: 0; font-size: 15px; 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; outline: 2px solid #CCC;}
.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: #F15704; cursor: pointer; appearance: none; -webkit-appearance: none;}
.review-dots button.active {background: #FFBB00;}

@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;}
}

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