/************************ RESET *********************************/
*		{ margin: 0; padding: 0; }
img, fieldset { border: none; }
:focus	{ outline: 0; }
a		{ text-decoration: none; }
.alt	{ display: none; }
figure { margin: 0; }
button:focus { outline: none; box-shadow: none; }

/************************ TYPO *********************************/ 
@font-face {
  font-family: 'Roboto';
  src: url('../../css/frontend/fonts/subset-Roboto-Light.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-Roboto-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../../css/frontend/fonts/subset-Roboto-Bold.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-Roboto-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../../css/frontend/fonts/subset-Roboto-Black.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-Roboto-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../../css/frontend/fonts/subset-Roboto-Regular.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-Roboto-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../../css/frontend/fonts/subset-Roboto-Medium.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-Roboto-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body { font-family: 'Roboto', sans-serif; color: #078141; font-size: 16px; line-height: 1.4; font-weight: 400; }

a       { color: #078141; outline: 0; }
a:hover, a:focus { color: #078141; text-decoration: none; outline: 0; }

b, strong { font-weight: 700; }

h1 { margin: 0 0 30px 0; color: #078141; font-family: 'Roboto', sans-serif; font-size: 62px; line-height: 1.2; font-weight: 700; }
h2 { margin: 0 0 20px 0; color: #078141; font-family: 'Roboto', sans-serif; font-size: 55px; line-height: 1.2; font-weight: 500; }
h3 { margin: 0 0 20px 0; color: #078141; font-family: 'Roboto', sans-serif; font-size: 38px; line-height: 1.3; font-weight: 700; }
h4 { margin: 0 0 20px 0; color: #078141; font-family: 'Roboto', sans-serif; font-size: 24px; line-height: 1.3; font-weight: 700; }
.bg4 h1, .bg4 h2, .bg4 h3, .bg4 h4 { color: #f0ede0; }

h1 a, h2 a, h3 a { color: #078141; }
h1 a:hover, h2 a:hover, h3 a:hover { color: #078141; }

/************************ GENERAL *********************************/
html { background: inherit; }
body { background: #f0ede0; }
body.bg1 { background: #f0ede0 url('../../img/frontend/bg1.png') center top repeat-y; }
body.bg2 { background: #f0ede0 url('../../img/frontend/bg2.png') center top repeat-y; }
body.bg3 { background: #f0ede0 url('../../img/frontend/bg3.png') center top repeat-y; }
body.bg4 { background: #20342f; color: #f0ede0; }
body.bg5 { background: #3a3029; }

/*space*/
.top10 { margin-top: 10px; }
.top20 { margin-top: 20px; }
.top30 { margin-top: 30px; }
.top40 { margin-top: 40px; }
.top50 { margin-top: 50px; }
.top60 { margin-top: 60px; }
.bottom10 { margin-bottom: 10px; }
.bottom20 { margin-bottom: 20px; }
.bottom30 { margin-bottom: 30px; }
.bottom40 { margin-bottom: 40px; }
.bottom50 { margin-bottom: 50px; }
.bottom60 { margin-bottom: 60px; }

/*white*/
.white { color: #f0ede0 !important; }

/*loader*/
.loader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999; background:#fff;}
.loader img { position:absolute; width:100px; height:100px; top:0; bottom:0; left:0; right:0; margin:auto; }

/*go-up*/
#go-up { position: fixed; right: 20px; bottom: 40px; width: 44px; height: 44px; border-radius: 50%; text-align: center; background-color: #078141; color: #fff; font-size: 26px; line-height: 44px; cursor: pointer; z-index: 1001; opacity: 0; transition: all .3s; -webkit-transition: all .3s; }
.smaller #go-up { opacity: 1; }

/*transition link/button*/
a, button { transition: color .3s, background-color .3s; -webkit-transition: color .3s, background-color .3s; -o-transition: color .3s, background-color .3s; -moz-transition: color .3s, background-color .3s; }

/*lazy*/
.lazy { background: url('../../img/frontend/lazyloader.svg') no-repeat center center; }
.lazy img { color: transparent; }
.lazy.image-loaded { background-image: none; /*background-color: transparent;*/ }

/*parallax*/
.parallax { background-position: 50% top; background-attachment: fixed; }

/*photo hover*/
.photo-hover { position: relative; overflow: hidden; }
.photo-hover span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; text-align: center; background: rgba(53,127,61,0.8); opacity: 0; z-index: 20; transition: opacity .3s; -webkit-transition: opacity .3s; -o-transition: opacity .3s; -moz-transition: opacity .3s; }
.photo-hover span i { position: absolute; left: 0; top: 0; bottom: 0;  margin: auto; width: 100%; height: 50px; font-size: 50px; color: #fff; }
.photo-hover span:hover { opacity: 1; }
.photo-hover img { transition: transform .3s; -webkit-transition: -webkit-transform .3s; -o-transition: -o-transform .3s; -moz-transition: -moz-transform .3s; }
.photo-hover:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -moz-transform: scale(1.05); }

/*content*/
#page-container { max-width: 2000px; margin: 0 auto; overflow: hidden; position: relative; }
.container { max-width: 1230px; }
.content { float: left; width: 100%; padding: 90px 0; position: relative; }
.content.p200 { padding-top: 200px; }
.content.p0 { padding-top: 0; }
.content-text, .content-list{ float: left; width: 100%; }
.bigger-text { font-size: 18px; }
.content-text .picture { float: left; width: auto; margin: 0 30px 10px 0; }
.content-text a:hover { text-decoration: underline; }
.content-text ul  { list-style: none; margin: 10px 0; overflow: hidden; text-align: left; }
.content-text ul li { padding-left: 20px; position: relative; }
.content-text ul li::after { content: "\ea69"; position: absolute; left: 0; top: 3px; font-family: 'IcoFont' !important; font-size: 13px; color: #078141; }
.content-text ul li a { text-decoration: none; }
.content-text ul li a:hover { text-decoration: underline; }
.content-text ul li ul { margin: 5px; }
.content-text ul li ul li::after { color: #078141; }
.content-text ul li ul li ul  { margin: 5px; }
.content-text ul li ul li ul li::after { color: #078141; }
.content-text table { width: 100%; margin: 20px 0; border: 1px solid #ccc; }
.content-text table thead tr th, 
.content-text table thead tr td { padding: 10px; border: 1px solid #ccc; vertical-align: middle; background: #078141; color: #fff; font-weight: bold; }
.content-text table tbody tr td { padding: 10px; border: 1px solid #ccc; vertical-align: middle; }
#content-list-top { float: left; width: 100%; }
#content-list-top .pagination > .page-item { margin-bottom: 30px; }
#content-list-bottom { float: left; width: 100%; }
#content-list-bottom .pagination > .page-item { margin-top: 30px; }
.content-row { margin-bottom: 60px; }
.content-row:last-child { margin-bottom: 0px; } 
.content-block{ float: left; width: 100%; padding: 45px 0; }

/*highlight*/
.highlight-text { margin-bottom: 25px; font-weight: 700; font-size: 32px; }

/*pre*/
pre { width: 100%; white-space: unset; overflow: unset; background-color: transparent; border-left: none; color: #078141; text-align: center; position: relative; margin-bottom: 0px; padding: 50px 100px 30px 100px; font-style: italic; font-size: 26px; font-family: 'Roboto', sans-serif; }
pre::before { position: absolute; background-color: transparent; content: "\efcd"; font-family: 'IcoFont'; font-size: 35px; width: 55px; left: 0; right: 0; top: 0; margin: 0 auto; z-index: 1; }

/*box-text*/
.box-text { font-size: 16px; }

/*custom-select-container*/
.custom-select-container { float: right; margin: -95px 55px 0 0; }

/************************ HEADER *********************************/
#header { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: 2000px; margin: 0 auto; z-index: 100; }
#header-inside { position: relative; float: left; width: 100%; border-radius: 0 0 20px 20px; background: rgba(229, 229, 216, 0.8); transition: all .3s; -webkit-transition: all .3s; }
.smaller #header-inside { background: rgba(229, 229, 216, 1); box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.bg4 #header-inside { background: rgba(32, 52, 47, 0.7); }
.bg4.smaller #header-inside { background: rgba(32, 52, 47, 1); }
.bg5 #header-inside { background: rgba(229, 229, 216, 1); }
#header-top { float: left; width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid #078141; }
#top-left a { float: left; padding-right: 15px; margin-right: 15px; border-right: 1px solid #aaa; font-size: 14px; line-height: 1; font-weight: 600; }
#top-left a:last-child { padding-right: 0; margin-right: 0; border-right: none; }
#top-left a i { margin-right: 5px; }
#top-right a { float: left; padding-right: 15px; margin-right: 15px; border-right: 1px solid #aaa; font-size: 14px; line-height: 1; font-weight: 600; }
#top-right a:last-child { padding-right: 0; margin-right: 0; border-right: none; }
#top-right a i { margin-right: 5px; }
#header-bottom { float: left; width: 100%; height: 112px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; }
#main-menu { margin-left: auto; }
#header-cart { margin-left: 15px; }

/************************ HOME1 *********************************/
#home1 { float: left; width: 100%; height: 680px; border-radius: 0 0 0 120px; background-size: cover; background-repeat: no-repeat; }
#home1 .container { display: flex; height: 100%; justify-content: center; align-items: flex-end; position: relative; z-index: 5; pointer-events: none; }
#home1 .btn { pointer-events: all; }
#social { position: absolute; left: 80px; top: 160px; width: 75px; height: 375px; background: rgba(229, 229, 216, 0.8); border-radius: 35px; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 5; }
#social a { width: 47px; height: 47px; margin: 5px 0; background-image: url('../../img/frontend/social.png'); background-repeat: no-repeat; }
.bg4 #social { background: rgba(32, 52, 47, 0.7); }
.bg4 #social a { background-image: url('../../img/frontend/social-light.png'); }
#social a.whatsapp { background-position: 0 0; }
#social a.facebook { background-position: -47px 0; }
#social a.instagram { background-position: -94px 0; }
#social a.linkedin { background-position: -141px 0; }
#social a.tiktok { background-position: -188px 0; }
#social a.gruntek { background-position: -235px 0; }
#home1-video { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; }
#home1-video .plyr--video { height: 100%; width: 100%; object-fit: cover; }
#home1-video video { height: 100%; width: 100%; object-fit: cover; }
.bg4 .lang-link {
  color: white;
}
.bg4 .lang-separation {
  background-color: white;
}
.bg4 #headline-slider.owl-carousel .owl-nav button.owl-prev {
  color: white;
}
.bg4 #headline-slider.owl-carousel .owl-nav button.owl-next {
  color: white;
}

/************************ HOME2 *********************************/
.headline { max-width: 650px; background-color: #35727f; border-radius: 25px 25px 0 25px; padding: 70px 50px 70px 30px; background-position: center center; background-size: cover; position: relative; overflow: hidden; }
.headline::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.3); content: ""; z-index: 0; }
.headline-title { color: #fff; flex: 0 0 200px; padding-right: 20px; position: relative; z-index: 5; float: left; width: 40%; line-height: 1.1; }
.headline .box-text { float: left; width: 60%; background: rgba(217, 217, 217, 0.9); padding: 25px; position: relative; z-index: 5; }
.headline .box-text p { margin: 0; }
#accordion { margin-top: -20px; }
.card { background-color: transparent; border: none; border-radius: 0; border-bottom: 3px solid #078141; }
.card-header { padding: 0; margin-bottom: 0; background-color: transparent; border: none; }
.card-header h3 { margin: 0; padding: 15px 0; cursor: pointer; position: relative; }
.card-header h3::after { position: absolute; right: 0; top: 0; bottom: 0; height: 25px; margin: auto 0; font-family: 'IcoFont'; font-size: 25px; line-height: 1; }
.card-header h3[aria-expanded="false"]::after { content: "\eaa0"; }
.card-header h3[aria-expanded="true"]::after { content: "\ea99"; }
.card-body { padding: 0 0 20px 0; }
.card-body .btn { margin-top: 10px; }
.headline-item {  position: relative; text-align: center; }
.headline-item figure { background-color: #35727f; height: 325px; border-radius: 20px 20px 0 20px; overflow: hidden; }
.headline-item figure img { width: 100%; height: 100%; object-fit: cover; }
.headline-item-title { position: relative; padding-bottom: 30px; margin: 15px 0; cursor: pointer; }
.headline-item-title::after { position: absolute; right: 0; left: 0; bottom: 0; height: 25px; margin: 0 auto; font-family: 'IcoFont'; font-size: 25px; line-height: 1; }
.headline-item-title[aria-expanded="false"]::after { content: "\eaa0"; }
.headline-item-title[aria-expanded="true"]::after { content: "\ea99"; }
.white.headline-item .headline-item-title { color: #f0ede0; }
.white.headline-item .box-text { color: #f0ede0; }

/************************ HOME3 *********************************/
#home3 { padding-top: 0; }
#step-list { float: left; width: 100%; margin-top: 40px; display: flex; justify-content: space-between; align-items: flex-end; }
.step-item { text-align: center; flex: 0 0 25%; }
.step-item figure { position: relative; display: inline-block; }
.step-item figure::before { position: absolute; bottom: -37px; left: -215px; width: 270px; height: 3px; background: #078141; content: ""; }
.step-item:first-child figure::before { display: none; }
.step-item h4 { margin: 60px 0 0 0; position: relative; }
.step-item h4::before { position: absolute; top: -30px; left: 0; right: 0; width: 12px; height: 12px; margin: 0 auto; border-radius: 50%; background: #078141; content: ""; }

/************************ HOME4 *********************************/
#home4 { margin-bottom: 90px; }
#reviews-slider { max-width: 1000px; margin: 0 auto; border-radius: 25px 25px 0 25px; background: rgba(53,127,61,0.8); overflow: hidden; }
.bg4 #reviews-slider { background: rgba(0,0,0,0.4); }
.review-item { float: left; width: 100%; padding: 70px 120px; border-radius: 25px 25px 0 25px; }
.review-item figure { float: left; width: 210px; height: 210px; border-radius: 50%; background-color: #35727f; overflow: hidden; }
.review-item figure img { width: 100%; height: 100%; object-fit: cover; }
.review-content { display: block; width: 100%; padding: 20px 0 0 250px; font-size: 26px; color: #fff; font-weight: 300; }
.review-content.no-photo { padding-left: 0; }
.review-text { font-style: italic; }
.review-name { margin-top: 25px; }

/************************ PRICING *********************************/
.pricing-list { max-width: 1025px; margin-left: auto; margin-right: auto; margin-bottom: 90px; align-items: flex-end; }
.pricing-list > div:nth-child(1) .pricing-box { min-height: 670px; }
.pricing-list > div:nth-child(2) .pricing-box { min-height: 730px; }
.pricing-list > div:nth-child(3) .pricing-box { min-height: 670px; }
.pricing-list.equal { align-items: stretch; }
.pricing-list.equal > div .pricing-box { min-height: 1px; height: 100%; }
.pricing-box { background: #078141; padding: 35px; border-radius: 25px 25px 0 25px; text-align: center; color: #f0ede0; }
.bg4 .pricing-box { background: transparent; border: 3px solid #f0ede0; }
.bg4 .pricing-list > div:nth-child(1) .pricing-box { min-height: 590px; }
.bg4 .pricing-list > div:nth-child(2) .pricing-box { min-height: 660px; }
.bg4 .pricing-list > div:nth-child(3) .pricing-box { min-height: 590px; }
.pricing-box h2 { margin: 30px auto 20px auto; max-width: 210px; font-size: 40px; color: #f0ede0; font-weight: 700; }
.price-info { margin-bottom: 35px; font-size: 24px; font-weight: 700; color: #f0ede0; }
.price-feature { margin: 30px 0 0 0; text-align: left; color: #f0ede0; font-weight: 600; list-style: none; }
.price-feature li { background: url('../../img/frontend/check.png') 0 0 no-repeat; min-height: 21px; margin-bottom: 10px; padding-left: 35px; }
.price-feature a { color: #f0ede0; }
.more-link { display: block; position: relative; padding-right: 20px; }
.more-link::after { position: absolute; right: 0; top: 2px; font-family: 'IcoFont'; content: "\ea99"; }

/* The custom-check */
.custom-check { display: block; position: relative; padding-left: 35px; margin-bottom: 10px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Hide the browser's default checkbox */
.custom-check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
/* Create a custom checkbox */
.checkmark { position: absolute; top: 0; left: 0; height: 21px; width: 21px; background-color: transparent; border: 1px solid #f0ede0; border-radius: 50%; }
/* On mouse-over, add a grey background color */
.custom-check:hover input ~ .checkmark { background-color: #235328; }
/* When the checkbox is checked, add a blue background */
.custom-check input:checked ~ .checkmark { background-color: #235328; }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark::after { content: ""; position: absolute; display: none; width: 100%; height: 100%; line-height: 1; font-size: 12px; }
/* Show the checkmark when checked */
.custom-check input:checked ~ .checkmark::after { display: flex; }
/* Style the checkmark/indicator */
.custom-check .checkmark::after { align-items: center; justify-content: center; content: "\eed8"; font-family: 'IcoFont'; }

/* The custom-radio */
.custom-radio { display: block; position: relative; padding-left: 35px; margin: 20px 0 0 0; cursor: pointer; font-size: 18px; font-weight: 500; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Hide the browser's default radio button */
.custom-radio input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; }
/* Create a custom radio button */
.checkmark-radio { position: absolute; top: 2px; left: 0; height: 21px; width: 21px; background-color: transparent; border: 2px solid #078141; border-radius: 50%; }
/* On mouse-over, add a grey background color */
.custom-radio:hover input[type="radio"] ~ .checkmark-radio { background-color: #dadada; }
/* When the radio button is checked, add a blue background */
.custom-radio input[type="radio"]:checked ~ .checkmark-radio { background-color: transparent; }
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-radio:after { content: "\eed8"; font-family: 'IcoFont'; color: #078141; font-size: 20px; line-height: 1; position: absolute; top: 0; left: 0; width: 18px; height: 18px; align-items: center; justify-content: center; display: none; }
/* Show the indicator (dot/circle) when checked */
.custom-radio input[type="radio"]:checked ~ .checkmark-radio:after { display: flex; }

/************************ CALENDAR *********************************/
#calendar-list { margin-top: 30px; }
.calendar-row { margin-right: -5px; margin-left: -5px; margin-bottom: 50px; }
.calendar-row:last-child { margin-bottom: 0; }
.calendar-row > div { padding-right: 5px; padding-left: 5px; }
.calendar-item { text-align: center; }
.calendar-item-icon { display: inline-block; width: 100px; height: 100px; margin-bottom: 15px; background-color: #fff; border-radius: 20px 20px 0 20px; }
.calendar-item-head { cursor: pointer; }
.calendar-item-title { position: relative; padding-bottom: 30px; }
.calendar-item-title::after { position: absolute; right: 0; left: 0; bottom: 0; height: 25px; margin: 0 auto; font-family: 'IcoFont'; font-size: 25px; line-height: 1; }
.calendar-item-head[aria-expanded="false"] .calendar-item-title::after { content: "\eaa0"; }
.calendar-item-head[aria-expanded="true"] .calendar-item-title::after { content: "\ea99"; }
.harvest-months { margin-top: 15px; }
.harvest-months > div { display: inline-block; width: 20px; text-align: center; }
.harvest-title { font-size: 12px; font-weight: 500; }
.harvest-icon { display: flex; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(53,127,61,0.5); background-image: url('../../img/frontend/month.png'); background-position: center center; background-repeat: no-repeat; }
.harvest-months-2 { margin: 12px; margin-top: 8px; }
.harvest-months-2 > div { display: inline-block; width: 20px; text-align: center; }
.harvest-title-2 { font-size: 11px; font-weight: 500; }
.active > .harvest-icon { background-color: rgba(53,127,61,1); }
.harvest-months.bigger > div { width: 35px; margin: 0 4px; }
.harvest-months.bigger .harvest-icon { width: 35px; height: 35px; background-image: url('../../img/frontend/month-bigger.png'); }

/************************ PAGE HEAD *********************************/
#page-head { float: left; width: 100%; border-radius: 0 0 0 120px; background-color: #35727f; overflow: hidden; }
.head-item { height: 680px; position: relative; }
.head-item .container { display: flex; height: 100%; padding-top: 140px; align-items: center; justify-content: flex-end; position: relative; z-index: 5; }
.head-item.ver2 .container { justify-content: flex-start; }
.head-photo { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }
.head-photo img { width: 100%; height: 680px; object-fit: cover; }
.head-content { width: 500px; border-radius: 20px 20px 0 20px; background: rgba(229, 229, 216, 0.8); padding: 30px 25px; }
.head-title { font-size: 32px; font-weight: 700; margin-bottom: 15px; }
.head-text { font-size: 18px; font-weight: 500; }
.head-title-detail { color: #fff; font-size: 62px; font-weight: 700; max-width: 50%; }
.owl-carousel .owl-slide-animated { transform: translateX(20px); opacity: 0; visibility: hidden; transition: all 0.05s; }
.owl-carousel .owl-slide-animated.is-transitioned { transform: none; opacity: 1; visibility: visible; transition: all 0.5s; }
.owl-carousel .head-content.is-transitioned { transition-delay: 0.25s; }
.owl-carousel .head-title.is-transitioned { transition-delay: 0.35s; }
.owl-carousel .head-title-detail.is-transitioned { transition-delay: 0.35s; }
.owl-carousel .head-text.is-transitioned { transition-delay: 0.5s; }

/************************ RECIPES *********************************/
.sidebar { width: 100%; margin-bottom: 50px; background-color: #078141; border-radius: 25px 25px 0 25px; overflow: hidden; float: left; }
.sidebar-content { padding: 40px 30px; color: #fff; }
.sidebar-content h3,.sidebar-content h2, .sidebar-content h1,.sidebar-content h4, .sidebar-content a { color: #fff; }
.sidebar img { width: 100%; }
.small-sidebar { width: 235px; margin-bottom: 50px; text-align: center; background-color: #078141; border-radius: 25px 25px 0 25px; overflow: hidden; float: right; }
.small-sidebar img { width: 100%; }
.small-sidebar .btn { margin: 15px 0; }

/************************ OUR STORY *********************************/
.award-item { text-align: center; }
.inMedia-item { text-align: center; }
#contact-form { float: left; width: 100%; margin-top: 30px; }
.underline { text-decoration: underline !important; }
#contact-photo { float: left; margin: 20px 0 45px 0; border-radius: 25px 25px 0 25px; overflow: hidden; }
#contact-right { float: right; max-width: 440px; }
#contact-right .content-text { width: 50%; }
#map { float: right; width: 157px; height: 157px; border-radius: 50%; overflow: hidden; }

/************************ FOR COMPANY *********************************/
.number-box { margin-top: 50px; text-align: center; }
.number-value { font-size: 170px; line-height: 1; font-weight: 900; margin-bottom: 30px; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #f0ede0; }
.number-text { padding: 0 30px; }

/************************ WEBSHOP CHECKOUT / ORDER *********************************/
.order-box { margin-top: 80px; padding: 30px 25px 25px 25px; border-radius: 25px 25px 0 25px; background-color: #078141; color: #f0ede0; }
.order-box h1, .order-box h2, .order-box h3, .order-box h4 { color: #f0ede0; }
.order-head { display: flex; width: 100%; align-items: flex-end; margin-bottom: 55px; }
.order-head img { margin-right: 30px; }
.order-head h3 { margin: 0; }
.order-list { margin-top: 55px; border-bottom: 3px solid #f0ede0; }
.order-item { position: relative; margin-bottom: 20px; }
.order-number { float: left; width: 75px; }
.order-number .form-control { border-color: #f0ede0; font-size: 28px; font-weight: 700; color: #fff; padding: 6px 0; text-align: center; }
.order-number .form-control:focus { border-color: #fff; }
.order-info { display: block; width: 100%; padding: 0 40px 0 90px; }
.order-info h3 { margin: 0; font-size: 28px; }
.order-mini-btn { position: absolute; right: 0; top: 0; bottom: 0; margin: auto 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #f0ede0; border-radius: 50%; text-decoration: none !important; color: #078141; font-size: 14px; line-height: 1; padding-top: 2px; }
.order-promo { position: relative; padding: 25px 0; border-bottom: 3px solid #f0ede0; }
.order-promo label { float: left; width: 110px; font-size: 16px; padding-left: 0; margin: 15px 0 0 0; font-weight: 700; }
.promo-number { display: block; width: 100%; padding: 0 60px 0 115px; }
.promo-number .form-control { color: #fff; border-color: #f0ede0; }
.promo-number .form-control:focus { border-color: #fff; }
.order-promo .order-mini-btn { font-size: 26px; padding-left: 2px; }
.order-sum { padding: 20px 0; }
.order-action-buttons { display: flex; justify-content: space-between; }
.order-action-buttons .btn { flex: 0 0 45%; border-width: 3px; display: flex; align-items: center; justify-content: center; }
.order-main-btn { margin-top: 25px; display: flex; width: 100%; justify-content: center; }
.order-main-btn .btn { flex: 0 0 45%; }
/*products*/
.product-box { margin: 0 auto; text-align: center; }
.product-price { font-weight: 700; font-size: 24px; margin: 20px 0; }
.additional-info { padding-top: 20px; margin-top: 60px; border-top: 3px solid #078141; }
/*order detail*/
.order-detail-box { max-width: 1060px; margin: 50px auto 0 auto; padding: 30px; background: #f0ede0; border-radius: 25px; position: relative; }
.order-detail-box h4 { text-transform: uppercase; font-size: 22px; margin-bottom: 5px; }
.order-detail-box .box-text { font-size: 18px; font-weight: 500; }
.order-detail-body { margin-top: 20px; }
.detail-line { margin-bottom: 25px; }
.order-detail-buttons { display: flex; width: 100%; justify-content: space-between; }
.order-detail-buttons.center { justify-content: center; }
.custom-radio .form-control { display: inline-block; width: 200px; margin: -15px 0 0 15px; }
/*order list*/
.order-detail-body .card-header h3 { font-size: 22px; text-transform: uppercase; }
.order-detail-body .card-header h3::after { width: 40px; height: 40px; background: #078141; color: #f0ede0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rating-row { display: flex; align-items: center; margin-top: 15px; }
.rating-text { font-size: 18px; font-weight: 700; margin-left: 30px; }
.star { display: inline-block; margin: 0 3px; width: 28px; height: 26px; }
.empty-star { background: url('../../img/frontend/empty-star.png') center center no-repeat; }
.filled-star { background: url('../../img/frontend/filled-star.png') center center no-repeat; }
.align-down { display: flex; align-items: flex-end; }
/*message*/
#message-box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding: 30px; width: 480px; height: 110px; background-color: #3a3029; border-radius: 20px 20px 0 20px; display: flex; align-items: center; justify-content: center; }
#message-text { color: #f0ede0; font-size: 24px; font-weight: 700;  }
#message-close { cursor: pointer; position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #078141; color: #f0ede0; border-radius: 50%; font-size: 14px; line-height: 1; padding-top: 2px; }
/*user profile*/
.user-profile-box { max-width: 1060px; margin: 50px auto 0 auto; display: flex; align-items: center; justify-content: space-between; }
.user-profile-info { flex: 0 0 375px; height: 100%; padding: 35px 65px; margin-right: 30px; background: #f0ede0; border-radius: 25px; min-height: 545px; }
.user-profile-info h4 { text-transform: uppercase; font-size: 22px; margin-bottom: 5px; }
.user-profile-info .box-text { font-size: 18px; font-weight: 500; }
.user-profile-info .detail-line { margin-bottom: 15px; }
.user-profile-photo { border-radius: 25px 25px 0 25px; overflow: hidden; }
.user-profile-edit { max-width: 740px; margin: 50px auto 0 auto; padding: 55px 65px; background: #f0ede0; border-radius: 25px; }
.user-profile-edit #contact-form { float: none; margin: 0; }

/************************ GARDEN *********************************/
.garden-row { display: flex; flex-wrap: wrap; }
.garden-item { cursor: pointer; flex: 0 0 14.25%; text-align: center; margin-bottom: 45px; }
.garden-item-head { margin-bottom: 10px; }
.garden-item-icon { display: inline-block; width: 100px; height: 100px; margin-bottom: 15px; background-color: #fff; border-radius: 20px 20px 0 20px; }
.garden-item-title { text-transform: uppercase; font-size: 18px; color: #f0ede0; margin: 5px 0 10px 0; }
.progress { display: inline-block; width: 100px; height: 15px; border: 2px solid #078141; border-radius: 10px; background: transparent; overflow: hidden; position: relative; }
.progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: #078141; }
.progress.step1 span { width: 25%; }
.progress.step2 span { width: 50%; }
.progress.step3 span { width: 75%; }
.progress.step4 span { width: 100%; }
.garden-item .form-control,
.garden-item .form-control:focus { width: 55px; height: 40px; border-color: #f0ede0; background: #f0ede0; color: #5f3a16; border-radius: 10px; font-size: 24px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; }
.garden-form-holder { display: flex; align-items: center; justify-content: center; }
.garden-form-holder span { margin-right: 15px; font-size: 24px; line-height: 1; font-weight: 700; color: #f0ede0; }
.garden-buttons-holder { display: flex; flex-direction: column; align-items: center; }
.garden-buttons-holder .btn { margin-top: 12px; padding: 0; display: flex; align-items: center; justify-content: center; width: 100px; height: 35px; }
.disabled-item { cursor: not-allowed; opacity: 0.3; filter: grayscale(100%); }
#garden-info-message { float: left; width: 100%; font-size: 24px; margin: 0 0 50px 0; }
#garden-cart-list { float: left; width: 100%; display: flex; justify-content: space-between; }
#garden-cart-list .btn { max-width: 270px; height: 60px; display: flex;align-items: center; justify-content: center; padding: 18px 5px; flex: 0 0 270px; }
#garden-cart-list .content-list { display: flex; flex-wrap: wrap; padding-right: 50px; justify-content: flex-end; }
.garden-mini-item { width: 52px; height: 52px; margin: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); overflow: hidden; }
.garden-mini-item figure { background: #fff; }
#garden-map { float: left; width: 100%; margin: 30px 0;  }
#vegetables-holder { max-width: 980px; margin: 0 auto; height: 570px; position: relative; background: url('../../img/frontend/garden-empty.png') center top no-repeat; background-size: contain; }
#vegetables-rows { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.vegetable-item { position: absolute; width: 195px; height: 117px; text-align: center; }
.vegetable-item img { position: absolute; left: 0; right: 0; bottom: 45px; margin: 0 auto; }
/*row1*/
.position1 { left: 0px; top: 225px; z-index: 1; }
.position2 { left: 135px; top: 150px; z-index: 1; }
.position3 { left: 265px; top: 75px; z-index: 1; }
.position4 { left: 395px; top: 0px; z-index: 1; }
/*row2*/
.position5 { left: 135px; top: 300px; z-index: 2; }
.position6 { left: 265px; top: 225px; z-index: 2; }
.position7 { left: 395px; top: 150px; z-index: 2; }
.position8 { left: 525px; top: 75px; z-index: 2; }
/*row3*/
.position9 { left: 265px; top: 375px; z-index: 3; }
.position10 { left: 395px; top: 300px; z-index: 3; }
.position11 { left: 525px; top: 225px; z-index: 3; }
.position12 { left: 655px; top: 150px; z-index: 3; }
/*row4*/
.position13 { left: 395px; top: 450px; z-index: 4; }
.position14 { left: 525px; top: 375px; z-index: 4; }
.position15 { left: 655px; top: 300px; z-index: 4; }
.position16 { left: 785px; top: 225px; z-index: 4; }


#garden-options { float: left; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
#garden-options-left-buttons { flex: 0 0 20%; }
#garden-options-left-buttons .btn { display: flex; align-items: center; justify-content: center; padding: 5px; width: 220px; height: 60px; margin-bottom: 15px; }
#garden-options-left-buttons .btn:last-child { margin-bottom: 0; }
#garden-options-right-content { flex: 0 0 70%; }

/************************ FOOTER *********************************/
#footer { float: left; width: 100%; }
#footer-top { float: left; width: 100%; padding-top: 30px; border-top: 3px solid #078141; }
#footer-logo { float: left; }
.footer-nav { float: left; margin: 20px 0 0 100px; list-style: none; font-weight: 500; }
.footer-nav li { float: left; margin: 0 40px 10px 0; min-width: 100px; }
.footer-nav li:nth-child(4) { clear: both; }
.footer-nav li a:hover,.footer-nav li a.on { text-decoration: underline; }
#newsletter-form { float: right; width: 405px; margin-top: 20px; position: relative; }
#newsletter-form .form-control { border: 3px solid #078141; border-radius: 30px; height: 55px; background: transparent; }
#newsletter-form .form-control::-webkit-input-placeholder { font-size: 18px; color: #8ba88e; font-style: italic; }
#newsletter-form .form-control:-moz-placeholder { font-size: 18px; color: #8ba88e; font-style: italic; }
#newsletter-form .form-control::-moz-placeholder { font-size: 18px; color: #8ba88e; font-style: italic; }
#newsletter-form .form-control:-ms-input-placeholder { font-size: 18px; color: #8ba88e; font-style: italic; }
#newsletter-form .form-control::-ms-input-placeholder { font-size: 18px; color: #8ba88e; font-style: italic; }
#newsletter-form .form-control:placeholder-shown { font-size: 18px; color: #8ba88e; font-style: italic; }
#newsletter-form button { position: absolute; right: 7px; top: 7px; width: 40px; height: 40px; border-radius: 50%; background: #078141; box-shadow: none; border: none; }
#newsletter-form button::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; font-family: 'IcoFont'; content: "\eaa0"; color: #fff; font-size: 30px; line-height: 1; }
#newsletter-form button:hover { background: #235328; }
#footer-bottom { float: left; width: 100%; padding: 20px 0 50px 0; display: flex; justify-content: space-between; }
#copyright { font-weight: 500; }
#footer-social a { float: left; width: 25px; height: 25px; margin: 0 0 0 5px; background-image: url('../../img/frontend/social-small.png'); background-repeat: no-repeat; }
#footer-social a.whatsapp { background-position: 0 0; }
#footer-social a.facebook { background-position: -25px 0; }
#footer-social a.instagram { background-position: -50px 0; }
#footer-social a.linkedin { background-position: -75px 0; }
#footer-social a.tiktok { background-position: -100px 0; }
/*light changes*/
.bg4 #footer { color: #f0ede0; }
.bg4 #footer a { color: #f0ede0; }
.bg4 #footer-top { border-color: #f0ede0; }
.bg4 #newsletter-form .form-control { border-color: #f0ede0; color: #f0ede0; }
.bg4 #newsletter-form .form-control::-webkit-input-placeholder { color: #f0ede0; }
.bg4 #newsletter-form .form-control:-moz-placeholder { color: #f0ede0; }
.bg4 #newsletter-form .form-control::-moz-placeholder { color: #f0ede0; }
.bg4 #newsletter-form .form-control:-ms-input-placeholder { color: #f0ede0; }
.bg4 #newsletter-form .form-control::-ms-input-placeholder { color: #f0ede0; }
.bg4 #newsletter-form .form-control:placeholder-shown { color: #f0ede0; }
.bg4 #newsletter-form button { background: #f0ede0; }
.bg4 #newsletter-form button::after { color: #20342f; }
.bg4 #footer-social a { background-image: url('../../img/frontend/social-small-light.png'); }
.bg5 #footer { color: #f0ede0; }
.bg5 #footer a { color: #f0ede0; }
.bg5 #footer-top { border-color: #f0ede0; }
.bg5 #newsletter-form .form-control { border-color: #f0ede0; color: #f0ede0; }
.bg5 #newsletter-form .form-control::-webkit-input-placeholder { color: #f0ede0; }
.bg5 #newsletter-form .form-control:-moz-placeholder { color: #f0ede0; }
.bg5 #newsletter-form .form-control::-moz-placeholder { color: #f0ede0; }
.bg5 #newsletter-form .form-control:-ms-input-placeholder { color: #f0ede0; }
.bg5 #newsletter-form .form-control::-ms-input-placeholder { color: #f0ede0; }
.bg5 #newsletter-form .form-control:placeholder-shown { color: #f0ede0; }
.bg5 #newsletter-form button { background: #f0ede0; }
.bg5 #newsletter-form button::after { color: #20342f; }
.bg5 #footer-social a { background-image: url('../../img/frontend/social-small-light.png'); }

/************************ MOBILE CONTACT *********************************/
#mobile-contact { display: none; position: fixed; bottom: 0; left: 0; right: 0; max-width: 2000px; margin: 0 auto; background-color: #f0ede0; border-top: 1px solid #078141; z-index: 100; }
#mobile-contact ul { float: left; width: 100%; margin: 0; list-style: none; text-align: center; }
#mobile-contact ul li { position: relative; display: inline-block; vertical-align: middle; margin: 8px 15px 8px 15px;  } 
#mobile-contact ul li a { display: inline-block; width: 30px; height: 30px; line-height: 30px; font-size: 16px; background: #078141; color: #fff; border-radius: 50%; }

/************************ BOOTSTRAP EDIT *********************************/
/*tooltip*/
/*
.tooltip-inner { border-radius: 10px 10px 0 10px; background: #f0ede0; color: #078141; font-size: 18px; line-height: 1.2; font-weight: 700; max-width: 135px; }
.tooltip.show { opacity: 1; }
.tooltip .arrow { display: none; }
*/

/*form*/
.form-group { margin-bottom: 20px; }
.form-group:last-child { margin-bottom: 0px; }
label { font-size: 18px; font-weight: 500; padding-left: 30px; }
label.light { font-weight: 400; }
.form-control { border-radius: 30px; border: 3px solid #078141; background: rgba(255,255,255,0.2); padding: 6px 25px; }
.form-control:focus { background: rgba(255,255,255,0.2); box-shadow: none; border-color: #078141; }
input.form-control, select.form-control { height: 52px; }
.form-control::-webkit-input-placeholder { color: #a2b9a5; font-weight: 600; font-style: italic; }
.form-control:-moz-placeholder { color: #a2b9a5; font-weight: 600; font-style: italic; }
.form-control::-moz-placeholder { color: #a2b9a5; font-weight: 600; font-style: italic; }
.form-control:-ms-input-placeholder { color: #a2b9a5; font-weight: 600; font-style: italic; }
.form-control::-ms-input-placeholder { color: #a2b9a5; font-weight: 600; font-style: italic;; }
.form-control:placeholder-shown { color: #a2b9a5; font-weight: 600; font-style: italic; }

/*custom-switch*/
.custom-switch .custom-control-label::before { width: 56px; height: 25px; top: 0; border-radius: 15px; border: 3px solid #078141; box-shadow: none; outline: none; }
.custom-switch .custom-control-label::after { width: 15px; height: 15px; top: 5px; left: -30px; background: #078141; }
.custom-control-input:checked~.custom-control-label::before { color: #f0ede0; border-color: #078141; background-color: #078141; box-shadow: none; outline: none; }
.custom-switch .custom-control-input:checked~.custom-control-label::after { -webkit-transform: translateX(31px); transform: translateX(31px); }

/*navbar*/
.navbar { margin: 0; padding: 0; }
.navbar-nav { align-items: center; }
.navbar.bg-dark { background: transparent !important; }
.navbar-dark .navbar-brand { font-weight: 700; display: none; }
.navbar-dark .navbar-nav .nav-item { margin: 0 15px; }
.navbar-dark .navbar-nav .nav-item:last-child { margin-left: 0; }
.navbar-dark .navbar-nav .nav-link { position: relative; padding: 5px; font-size: 14px; color: #078141; font-weight: 600; text-transform: uppercase; }
.bg4 .navbar-dark .navbar-nav .nav-link { color: #f0ede0; }
.navbar-dark .navbar-nav .nav-link.color2 { background: #20342f; color: #fff; padding: 8px 32px; border-radius: 20px; }
.bg4 .navbar-dark .navbar-nav .nav-link.color2 { background: #f0ede0; color: #20342f; }
.navbar-dark .navbar-nav .nav-link.color3 { background: #f3704e; color: #fff; padding: 8px 32px; border-radius: 20px; }
.navbar-dark .navbar-nav .nav-link.color2::before, .navbar-dark .navbar-nav .nav-link.color3::before { display: none; }
.navbar-dark .navbar-nav .nav-link.color2:hover, .navbar-dark .navbar-nav .nav-link.color2:focus,
.navbar-dark .navbar-nav .active>.nav-link.color2, .navbar-dark .navbar-nav .nav-link.active.color2, .navbar-dark .navbar-nav .nav-link.show.color2, .navbar-dark .navbar-nav .show>.nav-link.color2 { color: #fff; background: #2b443e; }
.bg4 .navbar-dark .navbar-nav .active>.nav-link.color2, .bg4 .navbar-dark .navbar-nav .nav-link.active.color2, .bg4 .navbar-dark .navbar-nav .nav-link.show.color2, .bg4 .navbar-dark .navbar-nav .show>.nav-link.color2 { background: #f0ede0; color: #20342f; }
.navbar-dark .navbar-nav .nav-link.color3:hover, .navbar-dark .navbar-nav .nav-link.color3:focus,
.navbar-dark .navbar-nav .active>.nav-link.color3, .navbar-dark .navbar-nav .nav-link.active.color3, .navbar-dark .navbar-nav .nav-link.show.color3, .navbar-dark .navbar-nav .show>.nav-link.color3 { color: #fff; background: #e98824; }
.navbar-dark .navbar-nav .nav-link::before { position: absolute; bottom: 0; left: 0; right: 0; width: 0; height: 4px; background: #078141; border-radius: 3px; content: ""; transition: all .3s; -webkit-transition: all .3s; }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link { color: #078141; }
.navbar-dark .navbar-nav .nav-link:hover::before, .navbar-dark .navbar-nav .nav-link:focus::before,
.navbar-dark .navbar-nav .active>.nav-link::before, .navbar-dark .navbar-nav .nav-link.active::before, .navbar-dark .navbar-nav .nav-link.show::before, .navbar-dark .navbar-nav .show>.nav-link::before { width: 100%; }
.navbar-dark .navbar-toggler { border: none; padding-top: 0; transition: all .3s; -webkit-transition: all .3s; }
.navbar-dark .navbar-toggler-icon { position: relative; width: 25px; height: 2px; background: #078141; transition: all .3s; -webkit-transition: all .3s; }
.navbar-dark .navbar-toggler-icon::before { position: absolute; top: -8px; left: 0; width: 25px; height: 2px; background: #078141; content: ""; transition: all .3s; -webkit-transition: all .3s; }
.navbar-dark .navbar-toggler-icon::after { position: absolute; bottom: -8px; left: 0; width: 25px; height: 2px; background: #078141; content: ""; transition: all .3s; -webkit-transition: all .3s; }
.bg4 .navbar-dark .navbar-toggler-icon { background: #f0ede0; }
.bg4 .navbar-dark .navbar-toggler-icon::before { background: #f0ede0; }
.bg4 .navbar-dark .navbar-toggler-icon::after { background: #f0ede0; }
.navbar-dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { transform: rotate(40deg); }
.navbar-dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: rotate(-80deg); top: 0; }
.navbar-dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { display: none; }

/*btn*/
.btn { padding: 11px 26px; text-transform: uppercase; font-size: 14px; line-height: 1.2; font-weight: 500; border-radius: 22px; text-transform: uppercase; }
.btn.focus, .btn:focus { outline: 0; box-shadow: none; }
.btn.big { font-size: 18px; padding: 18px 75px; border-radius: 32px; }
.disabled, :disabled { opacity: .65; cursor: not-allowed; }

/*btn-color1*/
.btn-color1 { background: #078141; color: #f0ede0; border-color: #078141; }
.btn-color1:hover, .btn-color1:focus { background: #235328; color: #f0ede0; border-color: #235328; }

/*btn-color2*/
.btn-color2 { background: #20342f; color: #f0ede0; border-color: #20342f; }
.btn-color2:hover, .btn-color2:focus { background: #2b443e; color: #f0ede0; border-color: #2b443e; }

/*btn-color3*/
.btn-color3 { background: #f3704e; color: #fff; border-color: #f3704e; }
.btn-color3:hover, .btn-color3:focus { background: #e98824; color: #fff; border-color: #e98824; }

/*btn-color4*/
.btn-color4 { background: #f0ede0; color: #20342f; border-color: #f0ede0; }
.btn-color4:hover, .btn-color4:focus { background: transparent; color: #f0ede0; border-color: #f0ede0; }

/*btn-transparent*/
.btn-transparent { background: transparent; color: #f0ede0; border-color: #f0ede0; }
.btn-transparent:hover, .btn-transparent:focus { background: #f0ede0; color: #078141; border-color: #f0ede0; }

/*pagination*/
.pagination { float: right; margin: 0; border-radius: 0; }
.page-item { float: left; }
.page-link { color: #363636; }
.page-item:first-child .page-link { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.page-item:last-child .page-link { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.page-item.active .page-link { color: #fff; background-color: #078141; border-color: #078141; }
.pagination > li.page-item.disabled { display: none; margin: 0 !important; }

/************************MEDIA QUERIES*************************/
@media (max-width: 575.98px) {  
  #top-left { display: none; }
  #logo { width: 130px; }
  #mobile-contact { display: block; }  
  #go-up { display: none; }
  #contact-right .content-text { padding-left: 0 !important; width: 100%; }
  #contact-photo { width: 100% !important; }
  #map { margin-left: 0 !important; }
  #message-box { width: 95%; }
}

@media (max-width: 767.98px) {    
  /*scroll on mobile*/
  ::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
  ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; -webkit-border-radius: 10px !important; border-radius: 10px !important; }
  ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px !important; border-radius: 10px !important; background: #dee2e6 !important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; }
  ::-webkit-scrollbar-thumb:window-inactive { background: #dee2e6 !important; }
  h1 { font-size: 40px; }
  h2 { font-size: 35px; }
  h3 { font-size: 30px; }
  h4 { font-size: 20px; }
  .highlight-text { font-size: 22px; }
  .headline { padding: 50px 20px; }
  .headline-title { width: 100%; }
  .headline .box-text { width: 100%; }
  .review-item { padding: 60px; }
  .review-item figure { width: 70px; height: 70px; }
  .review-content { padding: 10px 0 0 0; float: left; font-size: 20px; }
  .footer-nav { float: left; width: 100%; margin: 20px 0; }
  .footer-nav li { float: left; width: 100%; clear: both; }
  #newsletter-form { float: left; width: 100%; margin: 0; }
  .step-item { margin-bottom: 30px; }
  .step-item h4 { font-size: 20px; margin-top: 10px; }
  .step-item h4::before { display: none; }
  #step-list { align-items: center; flex-direction: column; }
  .step-item figure::before { display: none; }
  #home1 { height: 450px; border-radius: 0 0 0 60px; }
  .pricing-box { margin-bottom: 30px; }
  .pricing-list > div:nth-child(1) .pricing-box { min-height: 1px; }
  .pricing-list.equal > div .pricing-box { height: auto; }
  #page-head { border-radius: 0 0 0 60px; }
  .head-item { height: 355px; }
  .head-photo img { height: 355px; }
  .head-title { font-size: 24px; }
  .head-text { font-size: 16px; }
  .head-title-detail { font-size: 35px; }
  #contact-form .form-group { margin-bottom: 20px; }
  #contact-form .form-control { margin-bottom: 15px; }
  #story-photo { margin-top: 30px; }
  .order-info h3 { font-size: 24px; }
  .order-detail-buttons { flex-direction: column; }
  .order-detail-buttons > span { display: block; }
  .order-detail-buttons > span .btn { width: 100%; }
  .order-detail-buttons .btn { margin-top: 20px; }
  .custom-radio .form-control { margin: 10px 0 0 0; }
  .user-profile-info, .user-profile-edit { padding: 30px 20px; }
  .garden-item { flex: 0 0 50%; }
  #vegetables-holder { max-width: 340px; }
  #vegetables-rows { transform: scale(0.35); transform-origin: 0 0; }
  #garden-map { height: 200px; margin-top: 50px; overflow: hidden; }
  .btn.big { font-size: 16px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {  
  .review-item { padding: 60px 90px; }
  .review-item figure { width: 80px; height: 80px; }
  .review-content { padding: 0 0 0 95px; font-size: 22px; }
  .step-item h4 { font-size: 20px; }  
  .head-title-detail { font-size: 45px; }
  .garden-item { flex: 0 0 20%; }
  #vegetables-holder { max-width: 720px; }
  #vegetables-rows { transform: scale(0.75); transform-origin: 0 0; }
  #garden-map { height: 430px; margin-top: 50px; overflow: hidden; }
}

@media (max-width: 991.98px) {  
  #footer { margin-bottom: 47px; }
  .step-item figure { width: 80px; }
  .calendar-row { margin-bottom: 0; }
  .calendar-item { margin-bottom: 50px; }
  .head-title-detail { max-width: 100%; }
  .content-row { margin-bottom: 0px; }
  .content-row .headline-item { margin-bottom: 50px; }
  .small-sidebar { margin: 30px 30px 0 0; float: left; }
  .sidebar { margin: 30px 30px 0 0; float: left; max-width: 280px; }
  #contact-right { float: left; width: 100%; max-width: 100%; margin-top: 50px; }
  #contact-photo { float: left; width: 50%; }
  #contact-photo img { width: 100%; }
  #contact-right .content-text { padding-left: 30px; }
  #map { float: left; margin: 20px 0 0 30px; }
  .content.p200 { padding-top: 120px; }
  .user-profile-box { flex-direction: column; }
  .user-profile-info { margin: 0 0 30px 0; height: auto; min-height: 1px; flex: 0 0 100%; width: 100%; }
  #garden-cart-list { flex-direction: column; }
  #garden-cart-list .content-list { padding-right: 0; margin-bottom: 30px; }
  #garden-cart-list .btn { flex: auto; width: 100%; }
  #garden-options { flex-direction: column; justify-content: space-between; }
  #garden-options-left-buttons { flex: 0 0 100%; display: flex; justify-content: space-between; width: 100%; }
  #garden-options-left-buttons .btn { flex: 0 0 48%; }
  #garden-options-right-content { flex: 0 0 100%; width: 100%; }
  #garden-cart-list .content-list { justify-content: center; }
  #garden-cart-list { align-items: center; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {  
  .step-item figure { width: 100px; }
}

@media (max-width: 1199.98px) {  
    #header .container { padding: 0; }
    #header-inside { border-radius: 0; }
    #logo { position: absolute; left: 15px; z-index: 20; }    
    #header-cart { position: absolute; right: 15px; }
    #header-bottom { padding: 0; height: 90px; }
    #main-menu { float: left; width: 100%; height: 100%; padding-top: 26px; }
    /*menu*/
    .navbar-nav { align-items: normal; }
    .navbar-dark .navbar-toggler { margin-right: 60px; }
    .navbar-dark .navbar-brand { display: inline-block; text-indent: -9000px; }
    .navbar-dark .navbar-collapse { margin: 0 -15px; }
    .navbar-dark .navbar-nav { margin-top: 26px; background: rgba(229, 229, 216, 1); max-height: calc(100vh - 145px); overflow: auto; }
    .navbar-dark .navbar-nav .nav-item { margin: 0; border-bottom: 1px solid rgba(53,127,61,0.4); }
    .navbar-dark .navbar-nav .nav-link.color2,
    .navbar-dark .navbar-nav .nav-link.color3,
    .navbar-dark .navbar-nav .nav-link { padding: 14px 30px; font-size: 15px; }
    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link { font-weight: 700; }
    .navbar-dark .navbar-nav .nav-link::before { display: none; }
    .navbar-dark .navbar-nav .dropdown-item { border-bottom: 1px solid rgba(53,127,61,0.4); padding: 13px 15px 13px 25px; }
    /*dropdown sub*/
    .navbar-dark .navbar-nav .dropdown-toggle::before { position: absolute; top: 0 !important; bottom: 0 !important; right: 0 !important; width: 50px !important; left: unset !important; height: auto !important; background: #ddd !important; z-index: 0; content: ""; display: block !important; }
    .navbar-dark .navbar-nav .dropdown-toggle::after { position: absolute; right: 20px; top: 21px; transition: all .3s; -webkit-transition: all .3s; z-index: 5; border-top: 0.4em solid; border-right: 0.4em solid transparent; border-left: 0.4em solid transparent; }
    .navbar-dark .navbar-nav .nav-item.show .dropdown-toggle::after { transform: rotate(180deg); }
    #social { left: 15px; }
    #accordion { margin-top: 20px; }
    .custom-select-container { margin: 0px; width: 100%; text-align: center; }
}

@media (min-width: 1200px) {  }

@media (max-width: 1400px) {  
  #social { display: none; }
}

@media (max-width: 1600px) {  
  #social { left: 10px; }
}