/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
  --main: #7d9d60;
  --secondary: #e1cf97;
  --white: #ffffff;
  --black: #000000;
  --lightmain: rgba(125,157,96,0.5);
  --lightermain: rgba(125,157,96,0.1);
  --lightsecondary: rgba(225,207,151,0.5);
  --lightersecondary: rgba(225,207,151,0.1);
  --lightblack: rgba(0,0,0,0.5);
  --lighterblack: rgba(0,0,0,0.1);
  --lightwhite: rgba(255,255,255,0.5);
  --lighterwhite: rgba(255,255,255,0.1);
  --lightbshadow: rgba(0, 0, 0, 0.15);
}

body { font-size: 1.2rem; }
* { position: relative; margin-top: 0; margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', san-serif; letter-spacing: -1px; color: var(--main); line-height: 3rem; transition: all .3s ease-out !important; }
a { transition: all .3s ease-out !important; }
p { line-height: 1.2 !important; }
p:last-child { margin-bottom: 0; }
.section { background-color: transparent; }
#slider{ padding: 0; }
#wrapper { z-index: 1; overflow: hidden; }
.hide { display: block; }
.button { text-shadow: none; text-transform: none; letter-spacing: 0; }
.button:hover { text-shadow: none; }
.content-wrap { padding-top: 1rem; }
#google_translate_element { height: 25px; margin: 9px 12px; overflow: hidden; }

.why i.icon-products:before { content: "\ebac"; }
.why i.icon-compliance:before { content: "\e980"; }
.why i.icon-supply:before { content: "\eb6f"; }
.why i.icon-response:before { content: "\e9b4"; }
.why i.icon-expertise:before { content: "\eb94"; }
.why i.icon-approach:before { content: "\ea6c"; }

.quotes { background-image: url('../images/img_quote.png'); background-repeat: no-repeat; background-size: 100%; background-position: center; width: 60px; height: 60px; }

.top-phone { background-color: var(--main); color: var(--white); padding: 10px 14px; border-radius: 10rem; overflow: hidden; }
.top-phone:hover { box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); background-color: var(--black); color: var(--white); }
.top-phone i, .top-phone span { transition: all .3s ease-out !important; }
.top-phone span { position: absolute; right: -7rem; font-size: 1.1rem; font-weight: bold; }

.intro { padding: 0; margin: 0 0 7rem; }
.intro .container [class*=col-], .tagline .row div { display: flex; }
.intro .container [class*=col-] div { margin: auto 0; }
.intro .container [class*=col-] div h2 { line-height: 1; color: var(--black); margin-bottom: 0; }
.intro .container [class*=col-] div h2 span { color: var(--secondary); }
.intro .container div i { font-size: 4rem; color: var(--lightsecondary); }

.jumbotron:before { content: ''; width: 50%; height: 4rem; position: absolute; top: -2rem; background-color: var(--main); z-index: 1; }

.tagline { margin-top: -5rem; z-index: 1; }
.tagline h3 { background-color: var(--secondary); border-radius: 2rem; border-bottom-right-radius: 0; border-top-right-radius: 0; font-size: 3rem; color: var(--black); margin-bottom: 0; line-height: 1; font-weight: bold; padding: 2rem; display: inline-block; margin: auto -3rem auto auto; }
.tagline h3 p { margin-bottom: 0; line-height: 1 !important; }
.tagline h3 strong { color: var(--white) !important; }

.welcome { margin-bottom: 5rem; }
.welcome [class*=col-] > div { background-color: var(--main); padding: 0 4rem 4rem; border-radius: 1rem; color: var(--white); margin-top: -2rem;}
.welcome div i { font-size: 4rem; color: var(--white); line-height: 3rem; }
.welcome div h2 { font-size: 4rem; color: var(--lightwhite); Font-weight: bold; }
.welcome div h2 + div { font-size: 2.5rem; font-family: 'Poppins', san-serif; letter-spacing: -1px; font-weight: bold; line-height: 1.2; }
.welcome div a { font-size: 2rem !important; padding: 1.5rem 2rem !important; height: auto; font-family: 'Poppins', san-serif; margin-bottom: 5rem; display: block; letter-spacing: -1px !important; font-weight: bold; border-radius: 1rem !important; margin: -3rem 3rem auto auto; float: right; }
.welcome div a:hover, .container-fluid.services .button:hover { color: var(--secondary); -webkit-transform: scale(1.1);  -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.why { margin-bottom: 10rem; }
.why .col-lg-8 > div { background-color: var(--lightsecondary); border-radius: 3rem; padding: 5rem 5rem 4rem 5rem; }
.why .col-lg-8 > div > h3 { font-size: 3rem; font-weight: bold; color: var(--black); }
.why .col-lg-8 .accordion { margin-bottom: 0; }
.why .col-lg-8 .accordion .accordionButton2 { border-top: 1px solid var(--main); padding: 1rem 0; display: flex; }
.why .col-lg-8 .accordion .accordionButton2 h3 { margin: auto 0 auto 0.5rem; font-size: 2rem; font-weight: 600; color: var(--lightmain); cursor: pointer; line-height: 2rem; }
.why .col-lg-8 .accordion .accordionButton2 i { margin: 0 0 auto 0; font-size: 2rem; color: var(--lightmain); width: 3rem; }
.why .col-lg-8 .accordion .accordionButton2.on h3, .why .col-lg-8 .accordion .accordionButton2.on i { color: var(--main); }
.why .col-lg-8 .accordion div:first-child .accordionButton2:first-child { border: none; }
.why .col-lg-8 .accordion .accordionContent2 { padding-bottom: 3rem; font-size: 1.3rem; line-height: normal; color: var(--main); padding-left: 3.5rem; }
.why .col-lg-8 .accordion .accordionContent2 p { margin-bottom: 0; }
.why .col-lg-4 { margin-top: -2rem; padding: 0 4rem; }
.why .col-lg-4 img { border-radius: 3rem; overflow: hidden; aspect-ratio: 1/1; webkit-transform: rotate(15deg);  -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); margin-left: -3rem; }
.why .col-lg-4 div:first-child img { webkit-transform: rotate(-5deg);  -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); margin-left: 1rem; }

.container-fluid.services { background-color: var(--lightsecondary); color: var(--black); font-family: 'Poppins', san-serif; font-size: 2rem; font-weight: bold; letter-spacing: -1px; }
.container-fluid.services .row [class*=col-] { padding: 20rem 0; background-color: var(--main); }
.container-fluid.services .row [class*=col-].img { background-size: cover; background-position: center; }
.container-fluid.services h3 { color: var(--white); font-size: 3rem; font-weight: bold; margin-bottom: 0; }
.container-fluid.services h3 p { line-height: 1 !important; }
.container-fluid.services div { line-height: 1.2; font-size: 1.5rem }
.container-fluid.services .button { color: var(--black); letter-spacing: -1px; margin: 2rem 0 0; font-size: 1.3rem !important; padding: 1rem 2rem !important; height: auto; font-family: 'Poppins', san-serif; border-radius: 1rem; }
.container-fluid.services .quotes, .welcome .quotes { filter: brightness(100); }
.welcome .quotes { width: 90px; height: 90px; top: -1rem; }
.container-fluid.services .quotes { margin-left: 0 !important; }
.container-fluid.services dd p { font-weight: 300; }
.container-fluid.services dl { word-break: break-word; }

.brands { margin-bottom: 0; }
.brands h2 { font-size: 3rem; font-weight: bold; margin-bottom: 1rem; }

#page-title { z-index: 1; }
#page-title h1 { position: absolute; bottom: -6rem; padding: 1rem 2rem; background-color: var(--secondary);  border-top-right-radius: 1rem; }
#page-title h1::after { content: ""; width: 80%; height: 10px; background-color: var(--black); position: absolute; bottom: -10px; left: 0;}

.subhead { padding-top: 5rem; }
.subhead [class*=col-] { display: flex; }
.subhead h2 { line-height: 2.5rem; color: var(--black); font-size: 2.5rem; margin: auto 2rem auto 0; }
.subhead [class*=col-]:nth-of-type(even) { border-left: 10px solid var(--main); padding-left: 2rem; }
.subhead [class*=col-]:nth-of-type(even) div { padding: 10rem 0; background-size: cover; width: 100%; }

.text { padding: 5rem 2rem; color: var(--black); }

.device-xl .section-scroller .swiper-container .swiper-slide { width: 42%; }
.device-lg .section-scroller .swiper-container .swiper-slide { width: 58%; }
.device-md .section-scroller .swiper-container .swiper-slide { width: 75%; }
.device-xs .section-scroller .swiper-container .swiper-slide { width: 100%; }

.team { margin-bottom: 5rem; }
.team .tabs_div { display: none; }
.team ul li { display: inline-block; }
.team h2 { display: inline-block; padding: 1rem 2rem; background-color: var(--lightsecondary); color: var(--black); margin-bottom: -3rem; z-index: 2; border-top-right-radius: 1rem; }
.team a.selected h2 { background-color: var(--secondary); }
.section-scroller { padding: 0;  background-color: var(--lightsecondary);}
.section-scroller .swiper-container .swiper-slide .row { padding: 5rem 3rem 3rem; }
.section-scroller .swiper-container .swiper-slide:nth-of-type(even) .row { background-color: var(--lightermain); }
.section-scroller .swiper-container .swiper-slide .row h3 { margin-bottom: 0; line-height: 1; }
.section-scroller .swiper-container .swiper-slide .row img { width: 100%; }
.section-scroller .swiper-container .swiper-slide .row h3 + span { display: block; font-family: 'Poppins', san-serif; margin-bottom: 0.5rem; letter-spacing: -1px; text-transform: uppercase; font-weight: bold; font-size: 1rem; }

blockquote { font-size: 1.5rem; font-weight: bold; font-family: 'Poppins', san-serif; padding: 2rem 0 2rem 2rem; border-left: 10px solid var(--main); margin: 3rem auto 0 auto; width: 90%; color: var(--main); line-height: 2rem; }
blockquote i { font-size: 3rem; display: block; }
.text ul { margin: 3rem auto; width: 90%; background-color: var(--lightsecondary); border-radius: 2rem; padding: 0; list-style: none; list-style-type: none; overflow: hidden; }
.text ul li { padding: 2rem; }
.text ul li:nth-of-type(even) { background-color: var(--secondary); }

.container.email { padding: 80px 0; }

#footer { background-color: #88a46f; padding: 2rem 2rem 0 2rem; } 
#footer .footer-logo { background-color: #fff; border-radius: 2rem; display: inline-block; padding: 1rem 2rem; }
#footer .footer-logo img { height: 100px; }
#footer .container [class*=col-] { margin-bottom: 2rem; z-index: 1 }
#footer .container [class*=col-] ul { margin: 0; padding: 0; list-style: none; }
#footer .container [class*=col-] ul li { margin-top: 0.5rem; }
#footer .container [class*=col-] h3 { margin-bottom: 0.5rem; color: #000 !important; }
#footer .container .col-lg-4 + .col-lg-3 i, #footer .container .col-lg-3 + .col-lg-2 i { font-size: 13px; }
#footer .container [class*=col-] a { color: #000; }
#footer .container [class*=col-] a:hover, #footer .container [class*=col-] ul li.active a { color: #fff; }
#footer .container [class*=col-] a i { margin-right: 0.5rem; }
#footer dt { display: flex; color: #000; margin-top: 1rem; }
#footer dt p { margin-bottom: 0; }
#footer dt i { width: 10%; text-align: center; background-color: rgba(255,255,255,0.3); height: max-content; margin-right: 0.5rem; border-radius: 0.3rem; font-size: 1.2rem; }
#footer dt div { width: 90%; font-size: 1.1rem; font-weight: normal; }
#footer .copyright { border-top: 1px solid rgba(255,255,255,0.3); padding: 2rem 0; font-size: 13px; color: #000; }
#footer .copyright .col-lg-4 { text-align: right; color: #000; padding-right: 0; }
#footer .copyright .col-lg-4 span { display: inline-block; padding: 0 1rem; }
#footer .copyright .col-lg-4 .select { border: 1px solid rgba(255,255,255, 0.5); padding: 0 1rem; border-radius: 0.5rem; }
#footer .copyright .col-lg-4 .select h3 { font-size: 15px; margin-bottom: 0; cursor: pointer; margin-right: 0.5rem; }
#footer .copyright .col-lg-4 .select h3:hover { color: #fff !important; }
#footer .copyright .col-lg-4 div:first-child { position: absolute; right: 0rem; bottom: 0; border: 1px solid rgba(255,255,255, 0.5); border-radius: 0.5rem; padding: 0.5rem 1rem; background-color: #88a46f; z-index: -1; width: max-content; }
#footer .copyright .col-lg-4 div:first-child a { display: block; font-size: 15px; }
#footer .copyright .col-lg-4 div + div { display: flex; background-color: #88a46f; }
#footer .copyright .col-lg-4 div + div i { margin: auto 0 auto auto; }
#footer .copyright .col-lg-4 div:first-child.active { bottom: 2.5rem; display: block; transform: translate3d(0, 0%, 0); }
#footer .copyright .col-lg-4 div:first-child.active + div i { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
#footer .copyright i { transition: transform 0.4s; }

@media (max-width: 480px) {
#logo { width: 80%; }
#logo img { height: auto !important; }
.intro { padding-left: 2rem; padding-right: 2rem; }
.tagline h3 { margin-right: -1rem; font-size: 2rem; }
.welcome [class*=col-] > div { margin-top: 1rem; padding: 0 2rem 5rem; }
.welcome div h2 + div { font-size: 1.5rem; font-weight: 500; }
.why .col-lg-8 > div { padding: 2rem 2rem 4rem 2rem; }
.brands h2 { font-size: 2rem; }
#footer .footer-logo img { height: auto; }
#footer .container [class*=col-] a { margin-bottom: 0; }
.subhead { padding:6rem 0 2rem 2rem; }
.subhead [class*=col-]:nth-of-type(even) { margin-top: 3rem; padding-left: 1rem; margin-left: 1rem; }
.text { padding: 3rem; }
blockquote { margin-left: 0; margin-right: 0; width: 100%; }
.section-scroller .col-md-8 { margin-top: 2rem; }
#page-title { padding-bottom: 4rem; }
.container.email { padding: 80px 2rem; }
.intro .lead { padding-top: 2rem; }
.team h2 { padding: 1rem 1.5rem; font-size: 1.3rem; }
.section-scroller .swiper-container .swiper-slide .row img { border-radius: 1rem; }
}

@media (max-width: 768px) {
.container-fluid.services .col-lg-6:first-child { padding-left: 4rem; padding-right: 4rem; }
.container-fluid.services .col-lg-6 { margin-top: -5rem; }
.container-fluid.services .col-lg-6:first-child { z-index: 1; margin-top: 0; }
.text + .container-fluid.services .col-lg-6 { margin-top: 0; padding-left: 2rem; padding-right: 2rem; }
}

@media (min-width: 768px) {
.section-scroller .swiper-container .swiper-slide .row [class*=col-] > div { padding: 0 0 0 2rem; }
.text { font-size: 1.5rem; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); }
}

@media (min-width: 992px) {
.why .col-lg-4 { margin-top: 3rem; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); }
.container-fluid.services > div { margin-left: 1rem; }
.container-fluid.services div:first-child { margin-right: -5rem; z-index: 1; margin-left: 1rem; }
}

@media (min-width: 1200px) {
.top-phone:hover span { right: 1rem; }
.top-phone:hover i { margin-right: 5rem; }
.tagline h3 { border-radius: 2rem; }
.text { font-size: 1.8rem; }
}