/*HOME PAGE*/

@font-face {font-family: 'Tofino'; font-style: normal; font-weight: 700; font-display: block;
  src: local(''), url('fonts/tofino-700.woff2') format('woff2'), url('fonts/tofino-700.woff') format('woff');
}

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

/*Hero*/

.hero {width: 100%; overflow: hidden; background-color: var(--deeppurple1); border-bottom: 4px solid var(--green1);}
.hero-wrap {position: relative; display: flex; width: 100%; overflow: hidden; z-index: 0;}

.hero-copy {position: relative; display: flex; flex: 0 0 calc(30% + 130px); margin-right: -130px; align-items: center; background-color: var(--deeppurple1); background: url("images/heroback.png") left top repeat; background-size: 589px 677px; overflow: hidden; z-index: 1;}

.hero-photo {position: relative; width: auto; flex: 1 1 auto; min-width: 0; background: url("images/toppic1.jpg") 50% 50% no-repeat; background-size: cover;}

.hero-text {position: relative; color: #FFF; /*border: 1px solid #F00*/}
.hero-text div:nth-child(1) {font-family: 'Molde', 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.4; font-weight: 600;}
.hero-text span:first-child, .hero-text div:nth-child(2) {color: var(--green1);}
.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% - 114px); max-width: 600px; font-size: 55px;}}
@media (max-width: 1900px) and (min-width: 771px) {.hero-text {padding: 4vw 0 4vw 4vw; width: calc(98% - 115px); max-width: 550px; 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(100% - 100px); font-size: calc(9px + 4.2vw);}}

@media (min-width: 771px) {.hero-copy {clip-path:ellipse(70% 120% at 28% 50%);}}
@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: 15px; padding: 0; text-align: center; font-size: calc(40px + 3.5vw);}
.hero-text div:nth-child(1) {margin-bottom: 22px;}
.hero-text div:nth-child(2) {display: block; font-size: calc(11px + 2.2vw)}
.hero-photo {filter: brightness(65%);}
}
@media (max-width: 725px) {.hero-text {margin-top: 0;}}
@media (max-width: 520px) {.hero-text div:nth-child(2) {font-size: calc(11px + 2.2vw);} .hero-photo {height: calc(80vw + 80px);}}
@media (max-width: 400px) {
.hero-photo {height: calc(85vw + 90px);}
.hero-text div:nth-child(1) {font-size: 12vw;} .hero-text span:first-child {display: block; margin-top: 8px; font-size: 1em;}
}

/*Button*/

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

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

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


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

/*Top Area*/

#topback {background: url("images/back2.png") left top repeat; background-size: 589px 677px; overflow: hidden; z-index: 1;}
.toparea {margin: auto; text-align: center;}
.toparea h1 {margin: 0; font-size: 3.5em; font-weight: 700; line-height: 1.1; color: var(--green2);}
.toparea div {margin: auto;}
.toparea h2 {margin: 20px 0; font-family: 'Molde', Arial, Helvetica, sans-serif; font-weight: 600; font-size: 1.6em; line-height: 1.25; color: #000;}
.toparea h3 {margin: 0; font-size: 1em; font-weight: 400; line-height: 1.5;}

@media (min-width: 616px) {.toparea {width: 85%; max-width: 700px; padding: 70px 20px 45px 20px;} .toparea div {width: 500px;}}
@media (max-width: 615px) {.toparea {padding: 60px 8vw 40px 8vw;} .toparea h1 {font-size: calc(7vw + 10px);}}
@media (min-width: 561px) {.toparea h2 span {display: block;}}

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

/*Blocks*/

/*.blocks {border: 1px solid red} .blocks a {border: 1px solid blue}
.blocks .moreinfo {border: 1px solid magenta} .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: var(--green3); padding: 30px 0 0 0; border-radius: 8px; /*box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);*/ border: 3px solid var(--darkpurple1); overflow: hidden; color: inherit; text-decoration: none; transition: .1s}

.blocks img {width: 90px; height: 90px; object-fit: contain; margin-bottom: 20px;}
.blocks h3 {margin: 0 0 18px 0; font-size: 25px; line-height: 1.25; color: #050505; font-weight: 600; white-space: nowrap;}
.blocks p {margin: 0 auto 30px auto; padding: 0 20px; font-size: 17px; line-height: 1.6;}

.blocks .moreinfo {
margin-top: auto;
display: flex; align-items: center; justify-content: center;
width: 100%; height: 45px; padding: 0 0 2px 0; font-size: 16px; font-weight: 500;
background-color: var(--darkpurple1); color: #FFF; text-decoration: none; border-radius: 0;
transition: .1s; white-space: nowrap;
}

.blocks .moreinfo span:first-child {margin-left: 6px;}
.blocks .moreinfo span:last-child {position: relative; display: inline-block; font-size: 22px; line-height: 1; margin-left: 13px; margin-bottom: 2px;}
.blocks a:hover {background-color: var(--green1);} .blocks a:hover .moreinfo {background-color: var(--darkpurple2);}

@media (max-width: 1265px) and (min-width: 931px), (max-width: 835px) and (min-width: 351px) {.blocks h3 span {display: block;}}

@media (max-width: 930px) {.blocks {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 650px) {
.blocks p {visibility: hidden; height: 0; margin: 0; padding: 0;}
.blocks a {margin: 5%; padding: 20px 0 0 0;}
.blocks .moreinfo {max-width: none;}
.blocks img {margin-bottom: 20px;}
.blocks h3 {margin: 0 0 28px 0;}
}
@media (max-width: 500px) and (min-width: 351px) {
.blocks h3 {font-size: 5.5vw;}
.blocks .moreinfo {text-transform: uppercase; height: 40px; width: 100%; max-width: none; padding: 0;}
.blocks .moreinfo span:first-child {display: none;}
.blocks .moreinfo span:last-child {margin-left: 8px;}
}
@media (max-width: 350px) {
.blocks {grid-template-columns: 1fr;} .blocks a {margin: 3% 4%; padding: 15px 0 0 0;}
.blocks img {margin-bottom: 10px;}
.blocks h3 {margin: 0 0 15px 0; font-size: 6.4vw;} .blocks h3::after {content: "\203A"; margin-left: 8px; font-size: 1.3em;}
.blocks .moreinfo {display: none;}
}

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

/*Side by Side*/

/*#sslist {border: 1px solid blue} #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(--greenlite); border-top: 3px solid var(--green3);}
#sideside .ssbody1, #sideside .ssbody2 {font-size: 18px; line-height: 1.6;}
#sideside .ssbody2 {margin-top: 20px; font-size: 16px; line-height: 1.5;}
#sideside .ssbody1 span {display: block; font-size: 1.5em; font-weight: 600;}
#sideside p {margin-bottom: 0;}
#sideside .sshead1 {margin-bottom: 20px; font-family: 'Molde', Arial, Helvetica, sans-serif; font-size: 2.5em; line-height: 1.15; font-weight: 600; color: var(--darkpurple1);}
#sideside .sshead2 {font-family: 'Molde', Arial, Helvetica, sans-serif; font-size: 1.8em; line-height: 1.2; font-weight: 600;}
#sideside .sstbl {padding: 25px; text-align: center; background-color: #FFF; border: 3px solid var(--darkpurple2); border-radius: 8px;}

@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: 52% 48%; 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: 25px auto; text-align: left;}
#sslist ul {vertical-align: top; margin: 0; padding: 0;}
#sslist li {position: relative; padding: 9px 0 9px 20px; font-size: 16px; line-height: 1.45; list-style: none; break-inside: avoid; border-bottom: 1px solid #DDD;}
#sslist li::before {content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 16px; border-right: 4px solid var(--darkpurple2); border-bottom: 4px solid var(--darkpurple2); transform: rotate(32deg); box-sizing: border-box;}

@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: 1191px) {#sslist {column-count: 3;}}
@media (max-width: 1190px) 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); border-radius: 15px 0 0 15px; overflow-y: scroll; overflow-x: hidden; background-attachment: local, scroll, scroll; scrollbar-width: auto; scrollbar-color: var(--green2) #f2f2f2;}
/* Chrome, Edge, Safari */
#sslist::-webkit-scrollbar {width: 14px;}
#sslist::-webkit-scrollbar-track {background: #f2f2f2;}
#sslist::-webkit-scrollbar-thumb {background: var(--green2); border-radius: 10px; border: 3px solid #f2f2f2;}
#sslist::-webkit-scrollbar-thumb:hover {background: var(--green1);}
}

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

/*Why Us*/

#whyus {margin: auto; background-color: var(--deeppurple1); font-size: 17px; color: #FFF;}
#whyus .wubodyarea {-webkit-display: grid; display: grid; padding: 50px 0; margin: auto; width: 85%; max-width: 1250px;}
#whyus div {font-size: 18px; line-height: 1.6;}
#whyus .heading {font-family: 'Molde', Arial, Helvetica, sans-serif; font-size: 2.3em; line-height: 1.2; font-weight: 600; color: var(--green1);}
#whyus img {display: block; width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; /*border: 3px solid var(--green1);*/ /*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: #7AE600; 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: var(--purple); cursor: pointer; appearance: none; -webkit-appearance: none;}
.review-dots button.active {background: var(--darkpurple1);}

@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: var(--green2) #f2f2f2;padding-right: 10px;}
}

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