:root {
	--nunito: 'Nunito';
    --imageopacity: 0.7;
    --transition: all .3s;
    --yellow: #fcd644;
    --brown: #9e856a;
    --green: #009a9f;
    --pastel: #fff2e6;
}

html, body {margin: 0; padding: 0; height: 100%; font-family: var(--nunito);}

a {text-decoration: none; transition: var(--transition);}
a:hover {text-decoration: none;}
.inline-container {padding-left: 5%; padding-right: 5%;}
.inline-container2 {max-width: 1000px; margin: auto;}
img {max-width: 100%; transition: var(--transition);}
a:hover img {opacity: var(--imageopacity);}

#wrap {min-height: 100%;}

#main {overflow:auto; padding-bottom: 190px;}

#header {position: relative; z-index: 1; height: 110px; background-color: #FFF; box-shadow: -1px 7px 9px -5px rgba(0,0,0,0.4); -webkit-box-shadow: -1px 7px 9px -5px rgba(0,0,0,0.4); -moz-box-shadow: -1px 7px 9px -5px rgba(0,0,0,0.4);}
#header .inline-container {height: 100%; display: flex;}
#header .inline-container2 {height: 100%; display: flex; align-items: center; justify-content: space-between; flex: 1; padding-top: 20px; padding-bottom: 20px;}
.logo-wrapper {width: 110px; height: 100%;}
.logo-wrapper img {max-height: 100%;}
.nav-wrapper {width: 100%; max-width: 500px; display: flex; justify-content: space-between; align-items: center; }
.nav-item a {transition: var(--transition); font-weight: bold; font-size: 16.67px; color: var(--brown);}
.nav-item a:hover {color: var(--yellow);}
.back-to-top {transition: var(--transition); cursor: pointer; width: 139px; height: 194px; background: url('../img/back-to-top.png') no-repeat 0 0; background-size: 100%; position: fixed; bottom: 10px; right: 10px; z-index: 10;}
.back-to-top:hover {filter: brightness(120%);}
.btn-nav-mobile {background: url('../img/btn-nav-mobile.png') no-repeat 0 0; background-size: 100%; width: 40px; height: 29px; display: none; cursor: pointer;}
#nav-mobile-wrapper {display: none; padding-top: 9vw; padding-bottom: 9vw; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url('../img/running-text-mobile-nav.png') no-repeat center center; background-color: var(--green); background-size: 100%; z-index: 99;}
.logo-white img {width: 100px; margin-bottom: 9vw;}
.mobile-nav-item {margin-bottom: 20px; font-size: 20px;}
.mobile-nav-item a {color: #FFF; font-family: var(--nunito); font-weight: bold;}
.nav-mobile-decor {position: absolute; right: 5%; bottom: 30px; width: 200px; width: 35vw; height: 248px; height: 43.5vw; background: url('../img/mobile-nav-decor.png') no-repeat 0 0; background-size: 100%;}
.btn-close-nav-mobile {position: absolute; top: 9vw; right: 5%; width: 24px; height: 24px; background: url('../img/icon-close-mobile-nav.png') no-repeat center center; background-size: 100%; cursor: pointer;}

section {position: relative;}
.section-title {font-size: 30px; font-weight: bold; line-height: 1.1em;}
.section-title.yellow {color: var(--yellow);}
.section-title.white {color: #FFF;}
.section-title.brown {color: var(--brown);}

#section-slide-mobile {display: none;}
.slide-wrapper.slick-dotted.slick-slider {margin-bottom: 0;}
.slide-wrapper, .slide-wrapper .slick-list, .slide-wrapper .slick-track {height: 500px; height: 36.6vw;}
.slide-wrapper .slick-dots {bottom: 55px; bottom: 4vw;}
.slide-wrapper .slick-dots li {margin: 0 5px;}
.slide-wrapper .slick-dots li button {width: 11px !important; height: 11px !important; border-radius: 50%; background: #FFF;}
.slide-wrapper .slick-dots li.slick-active button {background: var(--green);}
.slide-wrapper .slick-dots li button:before {content: '';}
.slide-item {height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center;}

#section-about {padding-top: 90px; padding-top: 6.6vw; padding-bottom: 130px; background: url('../img/korean-word.gif') no-repeat 0 0; background-size: 100%; background-color: var(--pastel);}
#section-about .inline-container2 {padding-left: 10%; padding-right: 10%;}
.about-box-wrapper {position: relative;}
.about-box {position: relative; z-index: 1; border-radius: 40px; background-color: var(--yellow); padding: 0px 10% 0px 10%; margin-top: 200px; height: 400px;}
.rabbit-foot {width: 166px; height: 27px; background: url('../img/rabbit-foot.png') no-repeat 0 0; position: absolute; right: 10%; top: -17px; z-index: 1;}
.rabbit-head {z-index: 0; width: 169px; height: 160px; background: url('../img/rabbit-head.png') no-repeat 0 0; position: absolute; right: 10%; top: -55px;}
.about-content-wrapper {
    float: right; width: 50%; height: 80%; overflow: auto; position: relative; margin-top: 7%; padding-right: 20px;
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    mask-image: linear-gradient(black 90%, transparent 100%);
}
.about-content-inner {position: absolute; top: 0;}
.about-title {font-weight: 600; font-size: 36px; color: #FFF; line-height: 1em; margin-bottom: 37px; margin-bottom: 2.7vw;}
.about-content {font-size: 12px; color: var(--brown); font-weight: 600; margin-bottom: 40px;}
.about-content p {line-height: 1.7em;}
.about-content-gradient-bottom{
    position:absolute; bottom:0px; left:0px; width:100%; height:50px;
    background: linear-gradient(to bottom,  rgba(255,214,68,0) 0%,rgba(255,214,68,1) 100%);
}
.about-image-wrapper {
    position: absolute; left: 5%; overflow: auto; top:50%; width: 35%; height: 140%; transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(black 90%, transparent 100%);
    mask-image: linear-gradient(black 90%, transparent 100%);
}
.about-image-item {margin-bottom: 20px;}
.about-image-slider-wrapper {
	display: none; position: relative;
	-webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 90%, transparent 100%);}
.about-image-slider-inner {width: 180%;}
.about-image-slider-item {width: 160px}
.about-box-outer {
    background: url('../img/about-box-outer.png') no-repeat 0 0; background-size: 100% 100%; width: 208px; height: 208px; position: relative;
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
.about-box-outer.with-text {height: 258px;}
.about-box-inner {background: url('../img/about-box-inner.png') no-repeat 0 0; background-size: 100%; position: absolute; width: 208px; height: 208px; bottom: 0; left: 0; -webkit-mask-image: url('../img/about-box-inner.png'); mask-image: url('../img/about-box-inner.png'); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-position: center center; mask-position: center center;}
.about-box-inner img {max-width: none; height: 100%; position: relative; left: 50%; transform: translateX(-50%);}
.about-box-text {display: flex; align-items: center; justify-content: center; font-weight: bold; position: absolute; width: 100%; height: 50px; font-size: 14px; text-align: center; padding: 10px 10px 0 10px; overflow: hidden; color: var(--brown); line-height: 1.1em;}
.scroll-nav {display: none; position: absolute; z-index: 5; background-color: rgba(0, 0, 0, 0.4); border-radius: 20px; top: 0; left: 0; right: 0; bottom: 0;}
.scroll-nav-about-content {inset: 7% 8% 5% 47%;}
.scroll-nav-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.about-image-slider-wrapper .scroll-nav-content {display: flex; width: 80%;}
.scroll-up {background: url('../img/scroll-up.png') no-repeat 0 0; background-size: 100%; width: 23px; height: 28px; margin: auto; margin-bottom: 10px; animation: scrollMoveUpDown 1s linear infinite;}
.scroll-down {background: url('../img/scroll-down.png') no-repeat 0 0; background-size: 100%; width: 23px; height: 28px; margin: auto; margin-top: 10px; animation: scrollMoveDownUp 1s linear infinite;}
.scroll-left {background: url('../img/scroll-left.png') no-repeat 0 0; background-size: 100% 100%; width: 28px; height: 23px; margin: auto; margin-right: 10px; animation: scrollMoveLeftRight 1s linear infinite;}
.scroll-right {background: url('../img/scroll-right.png') no-repeat 0 0; background-size: 100% 100%; width: 28px; height: 23px; margin: auto; margin-left: 10px; animation: scrollMoveRightLeft 1s linear infinite;}
.scroll-hint {font-family: var(--nunito); font-weight: bold; font-size: 25px; color: #FFF; line-height: 1.2em;;}

@keyframes scrollMoveUpDown {
	0%, 100% {
	  transform: translateY(0);
	}
	50% {
	  transform: translateY(-10px);
	}
  }

@keyframes scrollMoveDownUp {
	0%, 100% {
	  transform: translateY(0);
	}
	50% {
	  transform: translateY(10px);
	}
  }

@keyframes scrollMoveLeftRight {
	0%, 100% {
	  transform: translateX(0);
	}
	50% {
	  transform: translateX(-10px);
	}
  }

@keyframes scrollMoveRightLeft {
	0%, 100% {
	  transform: translateX(0);
	}
	50% {
	  transform: translateX(10px);
	}
  }

#section-product {padding-top: 100px; padding-bottom: 75px; background-image: url('../img/bg-korean-text-product.png'); background-repeat: no-repeat; background-position: center center; background-size: 100%;}
.product-main-info {position: relative; margin-bottom: 60px;}
.product-left {width: 40%;}
.product-right {width: 70%; position: absolute; right: 0; bottom: 0; text-align: right; height: 100%;}
.product-name {font-size: 30px; line-height: 1em; margin-bottom: 50px; margin-bottom: 3.7vw;}
.product-slogan {font-weight: bold; font-size: 53px; line-height: 1em; margin-bottom: 30px;}
.product-short-desc {font-size: 16px; font-weight: bold;}
.product-image-gif-wrapper-mobile {display: none; position: relative; margin-bottom: 25px;}
.product-image-wrapper {position: relative; z-index: 1; overflow: hidden;}
.product-gif-wrapper {position: absolute; left: 0; top: 0; width: 100%; z-index: 2;}
.product-image-wrapper img, .product-gif-wrapper img, .product-gif-wrapper video {max-height: 400px;}
.product-slider-wrapper {overflow: hidden;}
.product-slider {width: 100%; z-index: 3;}
.product-item {padding-right: 0.5%; padding-left: 0.5%; cursor: pointer;}
.product-item-inner {transition: var(--transition); background: #FFF; border-radius: 20px; padding: 40px 0 40px 0; box-shadow: inset 3px 3px 6px -3px #000; height: 100%;}
.product-item:hover .product-item-inner {filter: brightness(80%)}
.product-item-image {margin-bottom: 10px; text-align: center; height: 120px;}
.product-item-image img {max-height: 100%; display: inline-block}
.product-item-name {transition: var(--transition); padding-left: 10%; padding-right: 10%; font-size: 18px; font-weight: bold; color: var(--brown); line-height: 1em; margin-bottom: 10px;}
.product-item-short-desc {transition: var(--transition); padding-left: 10%; padding-right: 10%; line-height: 1.2em; font-weight: bold; font-size: 12px; color: #383838;}
.product-item.selected .product-item-name, .product-item.selected .product-item-short-desc {color: #FFF;}

#section-technology {padding-top: 65px; padding-bottom: 55px; background: url('../img/running-text-technology.png') no-repeat center center;}
#section-technology .section-title {margin-bottom: 100px; margin-bottom: 7.4vw;}
.home-technology-right .section-title {display: none;}
.home-technology-wrapper {display: grid; grid-template-columns: 50% 50%; grid-auto-rows: 1fr;}
.home-technology-slogan {font-size: 40px; font-weight: bold; color: var(--brown); line-height: 1.4em; margin-bottom: 100px; margin-bottom: 7.4vw;}
.home-technology-highlight {border-radius: 40px; background-color: #fbd544; margin-left: -5%; padding: 10px 5% 10px 5%; display: inline-block; line-height: 1.1em; box-shadow: inset 2px 2px 6px -4px #000;}
/* .home-technology-link {} */
.tech-arrow-wrapper {transition: var(--transition); border-radius: 50%; border: 2px solid var(--brown); width: 23px; height: 23px; margin-left: 15px; background: url('../img/tech-arrow.png') no-repeat -16px center; background-size: 180%;}
.home-technology-link {display: inline-block;}
.home-technology-link a {transition: var(--transition); display: flex; align-items: center; color: var(--brown); font-weight: bold; font-size: 30px; white-space: nowrap;}
/* .home-technology-link a:hover {color: var(--yellow);} */
.home-technology-link a:hover .tech-arrow-wrapper {background-position: 2px center;}
.home-technology-link img {margin-left: 15px;}

#section-instagram-feed {padding-top: 60px; padding-bottom: 50px; background-color: var(--yellow);}
#section-instagram-feed .inline-container2 {padding-left: 10%; padding-right: 10%;}
#section-instagram-feed .section-title {margin-bottom: 30px;}
#section-instagram-feed .slick-prev, #section-instagram-feed .slick-next {transition: var(--transition); color: #000; z-index: 5; width: 42px; height: 43px;}
#section-instagram-feed .slick-prev:hover, #section-instagram-feed .slick-next:hover {opacity: var(--imageopacity);}
#section-instagram-feed .slick-prev {background: url('../img/slide-prev.png') no-repeat 0 0;}
#section-instagram-feed .slick-next {background: url('../img/slide-next.png') no-repeat 0 0;}
#section-instagram-feed .slick-prev:before, #section-instagram-feed .slick-next:before {content: '';}
.instagram-item {padding-bottom: 10px;}
.instagram-item:not(.slick-center) {padding-top: 30px;}
.btn-instagram {transition: var(--transition); width: 251px; height: 49px; background: url('../img/btn-instagram.png') no-repeat 0 0; margin: auto; display: inline-block; margin-top: 50px;}
.btn-instagram:hover {filter: brightness(120%);}
.instagram-box-outer {
    background: url('../img/about-box-outer.png') no-repeat 0 0; background-size: 100%; width: 208px; height: 208px; position: relative; margin: auto;
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
.instagram-box-inner {background: url('../img/about-box-inner.png') no-repeat 0 0; background-size: 100%; position: absolute; width: 208px; height: 208px; top: 0; left: 0; -webkit-mask-image: url('../img/about-box-inner.png'); mask-image: url('../img/about-box-inner.png'); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-position: center center; mask-position: center center;}
.instagram-box-inner img {max-width: none; height: 100%; position: relative; left: 50%; transform: translateX(-50%);}
.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 258px; height: 258px;}

#section-contact {background: url('../img/running-text-contact.png') no-repeat center center; background-size: 100%; background-color: var(--pastel); padding-top: 80px; padding-bottom: 30px;}
#section-contact .section-title {text-align: center; margin-bottom: 70px;}
.location-slider-outer {position: relative; padding-bottom: 50px; margin-bottom: 40px;}
.location-slider {background-color: var(--yellow); padding-top: 40px; padding-bottom: 35px; border-radius: 40px; margin-bottom: 30px;}
.location-slider .slick-prev, .location-slider .slick-next {transition: var(--transition); color: #000; z-index: 5; width: 42px; height: 43px;}
.location-slider .slick-prev:hover, .location-slider .slick-next:hover {opacity: var(--imageopacity);}
.location-slider .slick-prev {left: 20px; background: url('../img/slide-prev.png') no-repeat 0 0;}
.location-slider .slick-next {right: 20px; background: url('../img/slide-next.png') no-repeat 0 0;}
.location-slider .slick-prev:before, .location-slider .slick-next:before {content: '';}
.location-item {color: #FFF; position: relative;}
.location-item-left {float: left; width: 40%; margin-left: 10%; padding-right: 3%; position: relative; height: 100%;}
.location-item-city {font-weight: bold; font-size: 31px; padding-bottom: 5px; border-bottom: 2px solid #FFF; margin-bottom: 15px; display: inline-block; padding-right: 20%; line-height: 1.2em;}
.location-item-address {font-size: 14px; margin-bottom: 60px;}
.location-item-wa {white-space: nowrap; display: inline-block; position: absolute; left: 0; bottom: 0;}
.location-item-wa a {display: flex; align-items: center; color: #FFF; font-size: 15px;}
.location-item-wa a:hover {color: var(--brown)}
.location-item-wa img {margin-right: 15px;}
.location-gmap-image-wrapper {position: absolute; right: 10%; bottom: 0; top: 40px; width: 40%;}
.location-slider-outer .about-box-outer {width: 100%; height: 100%; background-size: 100% 100%;}
/* .location-slider-outer .about-box-outer:after {content: ""; display: block; padding-bottom: 100%;} */
.location-slider-outer .about-box-inner {width: 100%; height: 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;}
.store-box {background-color: #FFF; padding: 25px 5% 25px 5%; border-radius: 20px; box-shadow: 5px 5px 6px -6px #000; margin-bottom: 60px;}
.store-box-label {float: left; width: 30%; padding-right: 5%; font-weight: bold; font-size: 27px; color: var(--brown); line-height: 1.1em; padding-top: 20px;}
.store-list-wrapper {float: left; width: 70%; padding-left: 5%;}
.store-city {font-size: 15px; color: #FFF; background-color: var(--yellow); padding: 5px 20px 5px 20px; border-radius: 20px; display: inline-block; margin-left: -20px; margin-bottom: 10px;}
.store-list {color: var(--brown);}
.store-category-wrapper {margin-bottom: 15px;}
.store-category-wrapper .clearfix-2 {display: none;}
.store-category {font-size: 20px; font-weight: bold;}
.store-item {float: left; width: 33.33%; line-height: 1.3em;}
.contact-form-wrapper {padding-left: 10%; padding-right: 10%;}
.contact-form-title {text-align: center; margin-bottom: 40px;}
.contact-form-group {margin-bottom: 15px;}
.contact-form-label {float: left; width: 100px; font-weight: bold; font-size: 14px; color: var(--brown)}
.contact-form-input {overflow: hidden;}
.softheaven-input {border-radius: 20px; font-family: var(--nunito); font-size: 14px; color: var(--brown); background-color: transparent; padding: 5px 20px; box-shadow: inset 2px 2px 6px -3px rgba(0, 0, 0, 0.4); border: 2px solid var(--yellow); width: 100%;}
.btn-softheaven {transition: var(--transition); font-size: 18px; color: var(--brown); background-color: var(--yellow); padding: 5px 40px; border-radius: 20px; border: 0; box-shadow: inset -2px -2px 6px -3px rgba(0,0,0,0.4)}
.btn-softheaven:hover {filter: brightness(110%);}

#footer {padding-top: 35px; padding-bottom: 40px; position: relative; margin-top: -190px; min-height: 190px; clear:both; background-color: #FFF;}
#footer .inline-container {padding-right: calc(5% + 85px)}
.footer-logo-wrapper {margin-bottom: 45px; float: left; width: 120px;}
.footer-right {overflow: hidden; padding-left: 5%;}
.footer-address-wrapper {color: var(--brown); margin-bottom: 10px;}
.company-name {font-weight: bold; font-size: 14px; margin-bottom: 5px; line-height: 1.2em;}
.company-address {font-size: 14px; line-height: 1.2em;}
.copyright-wrapper {display: flex; align-items: flex-end; justify-content: space-between;}
.copyright {font-family: 'Proxima Nova Rg'; font-size: 12px; color: var(--brown); flex-grow: 1;}
.social-media-item {transition: var(--transition); width: 36px; height: 36px; /*float: left;*/ margin-right: 20px; background-size: 100% !important;}
#footer-fb {background: url('../img/icon-fb.png') no-repeat 0 0;}
#footer-instagram {background: url('../img/icon-instagram.png') no-repeat 0 0;}
#footer-twitter {background: url('../img/icon-twitter.png') no-repeat 0 0;}
#footer-wa {background: url('../img/icon-wa.png') no-repeat 0 0;}
.social-media-wrapper {display: flex;}
.social-media-wrapper a:hover .social-media-item {opacity: var(--imageopacity);}

#tech-banner {background-color: #95d3d2; padding-top: 70px; padding-bottom: 70px;}
#tech-banner .inline-container2 {padding-left: 5%; padding-right: 5%; position: relative}
#tech-banner .banner-inner-wrapper {display: grid; grid-template-columns: 50% 50%; grid-auto-rows: 1fr;}
#tech-banner .banner-image {display: flex; align-items: center; text-align: right}
#tech-banner .banner-title {font-size: 52px; color: #FFF; text-align: right; line-height: 1em;}

.section-tech {position: relative; font-size: 12px; color: var(--brown); font-weight: bold;}
.section-tech .inline-container2 {padding-left: 10%; padding-right: 10%;}
.section-tech-title {font-size: 23px; line-height: 1.1em; margin-bottom: 10px;}
.section-tech-title-bigger {font-size: 30px; line-height: 1.1em; margin-bottom: 40px;}
#section-halal {background: url('../img/running-text-halal.png') no-repeat center center; background-color: #fff2e6; padding-top: 80px; padding-bottom: 80px;}
.halal-left {float: left; width: 50%; padding-right: 2.5%;}
.halal-right {float: left; width: 50%; padding-left: 2.5%;}
.halal-box {background-color: #FFF; padding: 20px 5% 20px 5%; box-shadow: inset 3px 3px 6px -2px rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: space-evenly; border-radius: 20px;}
.icon-iso2 {position: absolute; top: -30px; right: 15%; width: 166px; height: 131px; background: url('../img/icon-iso2.png') no-repeat 0 0; background-size: 100%;}

#section-tested {background-color: var(--yellow);}
.tested-left {float: left; width: 35%; margin-top: -20px; padding-bottom: 40px;}
.tested-right {float: left; width: 65%; padding-top: 45px; padding-bottom: 40px; padding-left: 7.5%;}
.owl {position: absolute; width: 120px; height: 145px; background: url('../img/owl.png') no-repeat 0 0; background-size: 100%; top: -100px; right: 15%;}

#section-natural {background-color: var(--pastel); padding-top: 40px; padding-bottom: 20px;}
.natural-left {float: left; width: 35%;}
.natural-right {float: right; width: 65%; padding-left: 7.5%; padding-top: 40px;}
.branch-left {background: url('../img/branch-left.png') no-repeat 0 0; background-size: 100%; width: 505px; height: 197px; position: absolute; left: 0; bottom: 10px;}
.branch-right {background: url('../img/branch-right.png') no-repeat 0 0; background-size: 100%; width: 317px; height: 197px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--brown);
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--brown);
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--brown);
  }

  /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {-moz-appearance: textfield;}

/* width */
::-webkit-scrollbar {width: 10px;}
  
/* Track */
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 10px;}
   
/* Handle */
::-webkit-scrollbar-thumb {background: var(--brown);  border-radius: 5px;}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #BFA78C;}

div * {
  	scrollbar-width: none; /* Firefox */
  	-ms-overflow-style: none; /* IE 10+ */
  	::-webkit-scrollbar-track {
    	-webkit-box-shadow: none !important;
    	background-color: transparent;
  	}
  	::-webkit-scrollbar {
    	width: 3px !important;
    	background-color: transparent;
  	}
  	::-webkit-scrollbar-thumb {
    	background-color: transparent;
  	}
}

.on-scrollbar{
  	scrollbar-width: thin; /* Firefox */
  	-ms-overflow-style: none; /* IE 10+ */
}

.on-scrollbar::-webkit-scrollbar-track {
  	-webkit-box-shadow: none !important;
  	background-color: transparent !important;
}

.on-scrollbar::-webkit-scrollbar {
  	width: 6px !important;
  	background-color: transparent;
}

.on-scrollbar::-webkit-scrollbar-thumb {
  	background-color: #acacac;
}

.grecaptcha-badge { display:none !important; }
.recaptcha-label {font-size: 12px;}

@media screen and (max-width: 1300px) {
	.branch-right {transform: none; top: -12%;}
}

@media screen and (max-width: 1250px) {
	/* .back-to-top {bottom: 100px;} */
	.branch-left {width: 400px; height: 158px;}
	.branch-right {width: 255px; height: 159px; top: -4%;}
}

@media screen and (max-width: 1100px) {
	#section-instagram-feed .inline-container2 {padding-left: 0; padding-right: 0;}
}

@media screen and (max-width: 1000px) {
	.section-title, .product-name, .home-technology-link a {font-size: 28px;}

	#section-about .inline-container2 {padding-left: 5%; padding-right: 5%;}
	.about-title {font-size: 34px;}

	/* .product-right {width: 60%;} */
	.product-slogan {font-size: 48px}
	.product-item-name {font-size: 17px;}

	.home-technology-slogan {font-size: 37px;}

	#tech-banner .banner-title {font-size: 48px;}

	.section-tech .inline-container2 {padding-left: 0; padding-right: 0;}
	#section-halal {padding-top: 110px;}
	#section-natural {padding-bottom: 120px;}

	.social-media-item {width: 31px; height: 31px; margin-right: 15px;}
}

@media screen and (max-width: 900px) {
	.section-title, .product-name, .home-technology-link a {font-size: 26px;}
	.back-to-top {width: 110px; height: 150px;}

	.nav-wrapper {max-width: 450px;}

	.about-title {font-size: 32px;}

	/* .product-right {width: 55%;} */
	.product-slogan {font-size: 43px}
	.product-item-name {font-size: 16px;}
	
	.home-technology-slogan {font-size: 34px;}

	.instagram-box-outer, .instagram-box-inner {width: 180px; height: 180px;}
	.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 230px; height: 230px;}

	.social-media-item {width: 26px; height: 26px; margin-right: 10px;}
	#footer .inline-container {padding-right: calc(5% + 70px)}

	#tech-banner .banner-title {font-size: 44px;}
}

@media screen and (max-width: 800px) {
	.section-title, .product-name, .home-technology-link a {font-size: 24px;}

	.nav-wrapper {max-width: 400px;}

	#section-about .inline-container2 {padding-left: 0; padding-right: 0;}

	.about-title {font-size: 30px;}

	.product-slogan {font-size: 38px}
	.product-short-desc {font-size: 15px;}
	.product-item-name {font-size: 15px;}
	
	.home-technology-slogan {font-size: 31px;}

	.instagram-box-outer, .instagram-box-inner {width: 160px; height: 160px;}
	.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 210px; height: 210px;}

	/* .location-item {padding-left: 1%; padding-right: 2.5%;} */
	.location-gmap-image-wrapper {right: 13%;}
	.location-item-left {padding-right: 6%;}

	.footer-logo-wrapper {float: none; width: 100px; margin-bottom: 30px;}
	.footer-right {padding-left: 0;}

	#tech-banner .banner-title {font-size: 40px;}

	#section-natural {padding-bottom: 65px;}
}

@media screen and (max-width: 700px) {
	.section-title, .product-name, .home-technology-link a {font-size: 22px;}
	.back-to-top {width: 90px; height: 120px;}

	.nav-wrapper {max-width: 350px;}

	.about-title {font-size: 28px;}
	.about-box-outer, .about-box-inner {width: 180px; height: 180px;}
	.about-box-outer.with-text {height: 228px;}

	.product-slogan {font-size: 33px}
	.product-short-desc {font-size: 14px;}
	.product-item-name {font-size: 14px;}

	.home-technology-slogan {font-size: 28px;}

	.instagram-box-outer, .instagram-box-inner {width: 140px; height: 140px;}
	.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 190px; height: 190px;}

	.location-item-left {float: none; width: 100%;}

	#tech-banner .banner-title {font-size: 36px;}
}

@media screen and (max-width: 650px) {
	.about-title {font-size: 26px;}
	.about-box-outer, .about-box-inner {width: 170px; height: 170px;}
	.about-box-outer.with-text {height: 218px;}

	.home-technology-slogan {font-size: 25px;}
	.product-short-desc {font-size: 13px;}
	.product-item-name {font-size: 13px;}

	#tech-banner .banner-title {font-size: 32px;}
}

@media screen and (max-width: 600px) {
	.section-title, .product-name, .home-technology-link a {font-size: 30px;}

	.nav-wrapper {display: none;}
	.btn-nav-mobile {display: block;}

	#section-slide {display: none;}
	#section-slide-mobile {display: block;}
	.slide-wrapper, .slide-wrapper .slick-list, .slide-wrapper .slick-track {height: calc(100vw + 110px);}

	#section-about {padding-bottom: 170px;}
	.about-image-slider-wrapper {display: block;}
	.about-image-wrapper {display: none; transform: rotate(-90deg); left: 25%;top: 55%; width: 240px; height: 106%;}
	.about-image-item {transform: rotate(90deg)}
	.about-content-wrapper {float: none; width: 100%;}
	.about-content-inner {position:static; margin-top: 7%;}
	.scroll-nav-about-content {inset: 4% 5% 27% 5%;}
	.about-image-wrapper .scroll-nav-content {display: flex; flex-direction: column; width: 100%;}
	.about-image-wrapper .scroll-nav-content .scroll-hint {transform: rotate(90deg);}
	.about-image-item:nth-child(2) .about-box-outer.with-text {margin-left: 20px;}

	.product-image-gif-wrapper-mobile {display: block;}
	.product-right {display: none;}
	.product-left {width: 100%;}
	.product-slogan {font-size: 45px;}
	.product-short-desc {font-size: 16px;}

	.home-technology-wrapper {display: flex; flex-direction: column-reverse;}
	.home-technology-slogan {font-size: 40px;}
	.home-technology-left .section-title {display: none;}
	.home-technology-right .section-title {display: block;}
	.home-technology-right {margin-bottom: 30px;}

	#section-instagram-feed .inline-container {padding-left: 0; padding-right: 0;}
	.instagram-box-outer, .instagram-box-inner {width: 228px; height: 228px;}
	.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 278px; height: 278px;}

	.location-item-left {float: none; width: 100%; text-align: center; margin-left: 0; padding-left: 5%; padding-right: 5%;}
	.location-item-city {padding-right: 0; display: block;}
	.location-item-address {margin-bottom: 60px;}
	.location-item-wa {left: 50%; transform: translateX(-50%);}
	.location-item-wa a {justify-content: center;}
	.location-gmap-image-wrapper {top: unset; left: 50%; right: unset; bottom: 40px; width: 300px; height: 260px; transform: translateX(-50%);}
	.location-slider {padding-bottom: 280px; border-radius: 20px;}
	.location-slider .slick-prev {left: -15px;}
	.location-slider .slick-next {right: -15px;}
	.store-box-label {float: none; width: 100%; padding-right: 0; margin: auto; margin-bottom: 30px; text-align: center; max-width: 200px;}
	.store-list-wrapper {float: none; width: 100%; padding-left: 0; text-align: center;}
	.store-city {margin: auto; margin-bottom: 20px;}
	.store-list {text-align: left;}
	.store-item {width: 50%;}
	.store-category-wrapper .clearfix {display: none;}
	.store-category-wrapper .clearfix-2 {display: block;}
	.contact-form-wrapper {padding-left: 0; padding-right: 0;}
	.contact-form-label {width: 90px;}

	.social-media-wrapper {margin-bottom: 15px;}
	.social-media-item {width: 36px; height: 36px; margin-right: 20px;}
	.copyright-wrapper {flex-direction: column-reverse; align-items: flex-start;}

	#tech-banner .banner-inner-wrapper {grid-auto-flow: row; grid-template-columns: 100%;}
	#tech-banner .banner-image {align-items: center; display: block; margin-bottom: 20px;}
	#tech-banner .banner-image img {max-width: 300px;}

	.halal-left {float: none; margin-bottom: 20px; width: 100%; padding-right: 0;}
	.halal-box {max-width: 300px;}
	.halal-right {float: none; width: 100%; padding-left: 0;}
	.tested-left {float: none; width: 100%; padding-bottom: 10px;}
	.tested-right {float: none; width: 100%; padding-left: 0; padding-top: 10px;}
	.owl {width: 100px; height: 122px; top: -75px; right: 5%;}
	.section-tech-title {margin-top: 20px;}
	#section-natural {padding-bottom: 180px;}
	.natural-left {float: none; width: 50%; margin-top: -100px;}
	.natural-right {float: none; width: 100%; padding-left: 0;}
}

@media screen and (max-width: 550px) {
	.section-title, .product-name, .home-technology-link a {font-size: 28px;}

	/* .about-image-wrapper {left: 33%; height: 100%;} */

	.about-box-outer, .about-box-inner {width: 130px; height: 130px;}
	.about-box-text {font-size: 11px; height: 40px; padding: 5px 5px 0 5px;}
	.about-box-outer.with-text {height: 170px;}

	.home-technology-slogan {font-size: 37px;}

	.instagram-box-outer, .instagram-box-inner {width: 208px; height: 208px;}
	.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 258px; height: 258px;}

	.section-tech-title-bigger {text-align: left; max-width: 220px; margin-bottom: 0;}
}

@media screen and (max-width: 500px) {
	.section-title, .product-name, .home-technology-link a {font-size: 26px;}

	/* .about-image-wrapper {height: 95%;} */

	.home-technology-slogan {font-size: 34px;}

	.instagram-box-outer, .instagram-box-inner {width: 180px; height: 180px;}
	.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 230px; height: 230px;}
	
	.location-slider {border-radius: 10px;}
	.location-item-city {font-size: 27px;}

	.social-media-item {width: 26px; height: 26px;}
	.company-address {padding-right: 90px;}

	.section-tech-title-bigger {margin-bottom: 30px;}
	.branch-right {top: 2%;}
}

@media screen and (max-width: 450px) {
	.section-title, .product-name, .home-technology-link a {font-size: 24px;}

	/* .about-image-wrapper {height: 80%; left: 28%; top: 64%;} */

	.about-box-outer, .about-box-inner {width: 170px; height: 170px;}
	.about-box-text {font-size: 14px; height: 50px; padding: 10px 10px 0 10px;}
	.about-box-outer.with-text {height: 230px;}
	.about-image-slider-inner {width: 150%;}

	.home-technology-slogan {font-size: 31px;}

	.instagram-box-outer, .instagram-box-inner {width: 170px; height: 170px;}
	.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 220px; height: 220px;}

	.location-gmap-image-wrapper {width: 240px; height: 240px;}

	.owl {width: 70px; height: 85px; top: -55px;}

	.branch-left {max-width: 90%;}
}

@media screen and (max-width: 400px) {
	.section-title, .product-name, .home-technology-link a {font-size: 22px;}

	/* .about-image-wrapper {height: 70%; left: 24%; top: 71%;} */

	.home-technology-slogan {font-size: 28px;}
	
	.instagram-box-outer, .instagram-box-inner {width: 160px; height: 160px;}
	.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 210px; height: 210px;}

	.location-gmap-image-wrapper {width: 230px; height: 230px;}
}

@media screen and (max-width: 350px) {
	.section-title, .product-name, .home-technology-link a {font-size: 20px;}

	/* .about-image-wrapper {height: 62%; left: 20%; top: 75%;} */

	.home-technology-slogan {font-size: 25px;}

	.instagram-box-outer, .instagram-box-inner {width: 150px; height: 150px;}
	.instagram-item.slick-center .instagram-box-outer, .instagram-item.slick-center .instagram-box-inner {width: 200px; height: 200px;}

	.location-gmap-image-wrapper {width: 220px; height: 220px;}
}