:root {
  --input-padding-x: .75rem;
  --input-padding-y: .75rem;
}
@font-face {
	font-family: 'gothic';
	src: url('fonts/gothic.eot');
	src: local('gothic'), url('fonts/gothic.woff') format('woff'), url('fonts/gothic.ttf') format('truetype');
}
body {
  font-family: 'gothic';
  background: #fff;
  color: #444;
  font-size: 18px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 600;text-transform: uppercase}
.h4{font-size:1.5rem}
.title{text-align:center}
a{color: #0073aa;transition: 0.5s;}
code{color: #444 !important}
a:hover,a:active,a:focus {color: #80b241;outline: none;text-decoration: none}
.back-to-top {position: fixed;display: none;background: #50d8af;color: #fff;padding: 6px 12px 9px 12px;font-size: 16px;border-radius: 2px;right: 15px;bottom: 15px;transition: background 0.5s}
.back-to-top:focus {background: #50d8af;color: #fff;outline: none}
.back-to-top:hover {background: #0073aa;color: #fff}
.preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;background: none repeat scroll 0 0 #ffffff}
.spinner {border: 1px solid transparent;border-radius: 3px;position: relative}
.spinner:before {content: '';box-sizing: border-box;position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;margin-top: -10px;margin-left: -10px;border-radius: 50%;border: 1px solid #575757;border-top-color: #ffffff;animation: spinner .9s linear infinite}
@-webkit-@keyframes spinner {to {transform: rotate(360deg);}}
@keyframes spinner {to {transform: rotate(360deg);}}
section,div{position: relative}
.logo-banner{width: 100%}
.clear-both{clear: both}
#topbar{background: #fff;padding: 0;border-bottom: 1px solid #eee;font-size: 14px}
.social-links a:hover {color: #50d8af}
figure {margin: 0}
.form-banner::-webkit-input-placeholder,.form-email::-webkit-input-placeholder {color: #fff}
.form-banner:-moz-placeholder,.form-email:-moz-placeholder {color: #fff;opacity: 1}
.form-banner::-moz-placeholder,.form-email::-moz-placeholder {color: #fff;opacity:	1}
.form-banner:-ms-input-placeholder,.form-email:-ms-input-placeholder {color: #fff}
.form-banner::-ms-input-placeholder,.form-email::-ms-input-placeholder {color: #fff}
.form-banner::placeholder,.form-email::placeholder {color: #fff;}
hr {border-top: unset}
.form-control:focus {outline: 0;box-shadow: unset;background-color: rgba(255, 255, 255, 0.6)}
.txt-cart{color: #ffff}
.top-icon{color: #0073aa;display: inline-block;width: 40px;height: 40px;border: 2px solid #0073aa;line-height: 38px;font-size: 21px;text-align: center;border-radius: 50%}
img{width: 100%;max-width: 100%;height: auto}
.mgt-15{margin-top: 15px}
.mgb-15{margin-bottom: 15px}
.mgt-25{margin-top: 25px}
.mgb-25{margin-bottom: 25px}
.mgt-30{margin-top: 30px}
.mgb-30{margin-bottom: 30px !important}
.mgb-40{margin-bottom: 40px}
.mgt-40{margin-top: 40px}
.c-box-w-20{width: 25%;float: left}
.c-box-w-80{width: 75%;float: left}
.job-career{width: 25px;margin-top: 5px;}
.navbar-nav {-ms-flex-direction: row;flex-direction: row}
.social-links li:nth-child(1) {width: 35%}
.social-links li:nth-child(2) {width: 45%;padding-left: 25px}
.social-links li:nth-child(3) {width: 30%;text-align: right}
.social-links li:nth-child(4) {width: 35%;text-align: left}
.top-title{display: block;font-weight: 600;text-transform: uppercase;color: #0073aa}
#header {padding: 10px 0;height: 60px;transition: all 0.5s;z-index: 997;background: #0073aa;box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06)}
.banner-page{position: relative;color: #0073aa}
.banner-page video{width: 100%;height: auto}
.intro-content {position: absolute;top: 15%;left: 0;right: 0;z-index: 3;width: 100%}
video,iframe,embed{width: 100%;height: auto}
.intro-content h2 {color: #0073aa;margin-bottom: 0;font-size: 45px;font-weight: 400}
.intro-content h1 {color: #0073aa;margin-bottom: 1rem;font-weight: 600;text-transform: uppercase;font-size: 3.5rem}
.intro-content p {font-size: 1.5rem}
.btn-thaicoco,.btn-projects{font-size: 15px;font-weight: bold;display: inline-block;padding: 10px 32px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;transition: 0.5s;color: #0073aa}
.btn-thaicoco,.form-subscribe .btn-thaicoco {border: 2px solid #0073aa}
.form-subscribe .btn-thaicoco {background: #fff}
.btn-thaicoco:hover,.form-subscribe .btn-thaicoco:hover {background: #0073aa;color: #fff;cursor: pointer;}
.intro-content .btn-projects {background: #50d8af;border: 2px solid #50d8af}
.intro-content .btn-projects:hover {background: none;color: #50d8af}
.nav-menu,.nav-menu * {margin: 0;padding: 0;list-style: none}
.nav-menu ul {position: absolute;display: none;top: 100%;left: 0;z-index: 99}
.nav-menu li {position: relative;white-space: nowrap}
.nav-menu > li {float: left}
.nav-menu li:hover > ul,.nav-menu li.sfHover > ul {display: block}
.nav-menu ul ul {top: 0;left: 100%}
.sf-arrows .sf-with-ul {padding-right: 22px}
.sf-arrows .sf-with-ul:after {content: "\f107";position: absolute;right: 8px;font-family: "Font Awesome 5 Free";font-weight: 900}
.sf-arrows ul .sf-with-ul:after {content: "\f105"}
.nav-menu a,.nav-menu i {padding: 5px 0;text-decoration: none;display: inline-block;color: #fff;font-weight: 600;font-size: 16px;outline: none;text-transform: uppercase}
.nav-menu li:hover > a,.nav-menu .menu-active > a {color: #50d8af}
.nav-menu > li {margin-left: 20px}
.nav-menu ul {margin-top: 6px;padding: 10px;width: auto;box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);background: #fff}
.nav-menu ul li {transition: 0.3s}
.nav-menu ul li a {padding: 10px;color: #333;transition: 0.3s;display: block;font-size: 13px}
.logo-mb{display: none}
.nav-menu ul li:hover > a {color: #50d8af}
.nav-menu ul ul {margin: 0}
#mobile-nav-toggle {position: fixed;right: 0;top: 18px;z-index: 999;margin: 20px 20px 0 0;border: 0;background: none;font-size: 24px;display: none;transition: all 0.4s;outline: none;cursor: pointer}
#mobile-nav-toggle i {color: #555}
#mobile-nav {position: fixed;top: 0;padding-top: 18px;bottom: 0;z-index: 998;background: rgba(52, 59, 64, 0.9);left: -260px;width: 260px;overflow-y: auto;transition: 0.4s}
#mobile-nav ul {padding: 0;margin: 0;list-style: none}
#mobile-nav ul li {position: relative}
#mobile-nav ul li a {color: #fff;font-size: 16px;overflow: hidden;padding: 10px 22px 10px 15px;position: relative;text-decoration: none;width: 100%;display: block;outline: none;text-transform: uppercase}
#mobile-nav ul li a:hover {color: #fff}
#mobile-nav ul li li {padding-left: 30px}
#mobile-nav ul .menu-has-children i {position: absolute;right: 0;z-index: 99;padding: 15px;cursor: pointer;color: #fff}
#mobile-nav ul .menu-has-children i.fa-chevron-up {color: #50d8af}
#mobile-nav ul .menu-item-active {color: #50d8af}
#mobile-body-overly {width: 100%;width: 100%;z-index: 997;top: 0;left: 0;position: fixed;background: rgba(52, 59, 64, 0.9);display: none}
body.mobile-nav-active {overflow: hidden}
body.mobile-nav-active #mobile-nav {left: 0}
body.mobile-nav-active #mobile-nav-toggle {color: #fff}
.section-header {margin-bottom: 30px}
.section-header .h2 {font-size: 32px;color: #000;text-transform: uppercase;font-weight: 600;position: relative}
.section-header p {padding: 0;margin: 0}
#about {padding: 60px 0 30px 0}
.line-center{width: 10%}
.line-left{width: 25%;margin-left: -10px;}
.section-header p {padding: 0;margin: 0}
#about {padding: 60px 0 30px 0}
.box-about-img{height: 300px}
.about-cover{padding: 15px;text-align: center}
.about-cover:hover{-moz-box-shadow: 0px -1px 17px #918b91;-webkit-box-shadow: 0px -1px 17px #918b91;box-shadow: 0px -1px 17px #918b91;-webkit-transition: all 300ms ease;-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;-o-transition: all 300ms ease;transition: all 300ms ease;border-radius: 15px;cursor: pointer}
.btn-read-more{border: 1px solid #0073aa;color: #0073aa;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;-webkit-transform:  0.4s;-ms-transform:  0.4s;transform:  0.4s;padding: 5px 15px}
.btn-read-more:hover{background: #0073aa;color: #fff;-webkit-transform:  0.4s;-ms-transform:  0.4s;transform:  0.4s}
.bg-about{background: url(../images/bg-abouts.png) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;height: 90vh;width: 100%;background-position-y: inherit;position: relative}
.box-cover-about{position: absolute;top: 20%;left: 0;right: 0;width: 37%;margin: 0 auto}
.our-brand {padding: 30px 0 0 0;background: url(../images/bg-our-brand.png) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover}
.brand-box-img{text-align: center}
.brand-box-img img{width: 60%}
.our-brand .box {padding: 40px 25px;margin-bottom: 50px;box-shadow: 10px 10px 15px rgba(73, 78, 92, 0.1);background: #fff;transition: 0.4s}
.our-brand .box:hover {box-shadow: 0px 0px 30px rgba(73, 78, 92, 0.15);transform: translateY(-10px);-webkit-transform: translateY(-10px);-moz-transform: translateY(-10px)}
.our-brand .box .icon i:before {background: #0c2e8a;background: linear-gradient(45deg, #50d8af 0%, #a3ebd5 100%);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent}
.our-brand  h4 {font-weight: 600;text-align: center;margin-bottom: 15px;font-size: 22px;color: #000}
.our-brand p {margin-bottom: 0;text-align: center;color: #000}
.col-brand:hover h4,.col-brand:hover p{color: #2dc899}
.col-brand{position: relative;width: 100%;min-height: 1px;padding-right: 15px;padding-left: 15px}
.col-brand{-webkit-box-flex: 0;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%}
.our-product {padding: 30px 0;background-image: url(../images/bg-our-product-left.png), url(../images/bg-our-product-right.png);background-size: 190px;background-position:top 120px left, top 10px right;background-repeat: no-repeat}
.box-cover-product{border: 1px solid #f1f1f1;margin-bottom: 30px;text-align: center}
.box-cover-product:hover{-moz-box-shadow: 0px -1px 17px #918b91;-webkit-box-shadow: 0px -1px 17px #918b91;box-shadow: 0px -1px 17px #918b91;-webkit-transition: all 300ms ease;-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;-o-transition: all 300ms ease;transition: all 300ms ease;border: 2px solid #0073aa}
.box-cover-product .product-item {overflow: hidden;position: relative;padding: 0;vertical-align: middle;text-align: center}
.box-body{position: absolute;top: 86%;left: 0;right: 0}
.box-body h5{border: 1px solid;width: 50%;margin: 0 auto;padding: 25px;background: #fff}
.box-cover-product:hover h5{background: #0073aa;color: #fff;border: 1px solid #0073aa}
.box-cover-product .product-item img {transition: all ease-in-out 0.4s}
.box-cover-product .product-item:hover img {-webkit-transform: scale(1.1);transform: scale(1.1)}
.our-product hr{width: 20%}
.vision{padding: 50px  0;background: url(../images/bg-vision.jpg) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;height: 77vh}
.box-cover-vision{background: rgba(0, 115, 170, 0.79);background: -moz-linear-gradient(right ,rgba(0, 115, 170, 1.79) 0%,rgba(247, 249, 247, 0) 100%);background: -webkit-linear-gradient(right ,rgba(0, 115, 170, 1.79) 0%,rgba(247, 249, 247, 0) 100%);background: linear-gradient(to left,rgba(0, 115, 170, 1.79) 0%,rgba(247, 249, 247, 0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='undefined', endColorstr='undefined', GradientType=1 );position: absolute;top: 50%;left: 50%;right: 0}
.box-cover-vision p{padding: 20px 15px;margin: 0;color: #fff;font-size: 19px}
.news {background: #fff;padding: 30px 0}
.news .box-new {text-align: center;  margin-bottom: 20px}
.news .box-new .pic {overflow: hidden}
.news .box-new .details {color: #000;padding: 25px 15px;border: 1px solid #e6e7e8;min-height: 250px}
.news .box-new h4 {font-weight: 600;margin-bottom: 2px;font-size: 18px}
.create-by{margin: 20px 0;}
#contact {padding: 100px 0;background-image: url(../images/our-story-right.png), url(../images/our-story-left.png);background-size: 190px;background-position: top 450px  left, top 650px  right;background-repeat: no-repeat}
.sec-contact::before{background: linear-gradient(red, white, red);position: absolute;top: 0;left: 0;right: 0;width: 100%}
#contact a, .color-contact, .map p{color: #444}
.color-thaicoco{color: #0073aa}
.about_a a{color: #fff}
#contact a:hover,.about_a a:hover{color: #2dc899}
.contact-svg{width: 10%}
.box-contact{padding: 20px 80px;border: 1px solid #e6e7e8}
.map p{margin: 0}
.contact-detail{margin-bottom: 5px}
#contact .contact-address,#contact .contact-phone,#contact .contact-email {margin-bottom: 20px}
#contact .form #sendmessage {color: #50d8af;border: 1px solid #50d8af;display: none;text-align: center;padding: 15px;font-weight: 600;margin-bottom: 15px}
#contact .form #errormessage {color: red;display: none;border: 1px solid red;text-align: center;padding: 15px;font-weight: 600;margin-bottom: 15px}
#contact .form #sendmessage.show,
#contact .form #errormessage.show,
#contact .form .show {display: block}
#contact .form .validation {color: red;display: none;margin: 0 0 20px;font-weight: 400;font-size: 13px}
#contact .form input,#contact .form textarea {padding: 10px 14px;border-radius: 0;box-shadow: none;font-size: 15px}
#contact .form button[type="submit"] {  background: #fff}
#contact .form button[type="submit"]:hover {background: #0073aa;color: #fff;cursor: pointer}
.footer-page{background: #0073aa;padding: 50px 0;color: #fff}
.footer-page a,.footer-page p{font-size: 14px;}
.title-box{margin-bottom: 15px}
.title-box h4{font-size: 21px;text-transform: uppercase}
.title-box h4::before {content: '';position: absolute;display: block;width: 40px;height: 3px;background: #fff;bottom: -10px;left:  0}
.footer-page ul{padding: 0;list-style: none}
.footer-page li {position: relative;padding-left: 15px}
.footer-page li a{color: #fff}
.footer-page li a:hover{color: #2dc899}
.footer-page hr{margin: 15px 0;border-top: 1px solid #fff}
.footer-page li:before {content: '';width: 12px;height: 12px;position: absolute;background-image: url('../images/right-arrow.png');background-size: cover;background-position: center;left: 0;top: 50%;transform: translateY(-50%)}
.contact-icon{width: 15%}
.box-icon-footer h6,.box-icon-footer p{margin: 0}
.box-icon-footer{display: inline-block;vertical-align: middle;padding-left: 15px}
.w-custom{width: 76.5%}
.img-address{vertical-align: top}
.icon-footer{width: 53px;vertical-align: top;}
.target-bottom{display: flex;align-items: center}
.form-inline .form-control {padding: 8px 10px;background-color: rgba(255, 255, 255, 0.30);border: unset;border-top-left-radius: 0;border-bottom-left-radius: 0;border-top-right-radius: 1px !important;border-bottom-right-radius: 1px !important;color: #fff}
.form-control:focus {box-shadow: unset}
.gass{background: rgba(255, 255, 255, 0.30);border: unset;padding-right: 7px}
.btn-shopping{background: #0073aa;color: rgba(255, 255, 255, 0.30);padding: 12px 15px;border-radius: 20px;vertical-align: text-bottom}
.shopping-cart{width: 9%}
.box-arrow-banner{position: absolute;top: 50%;left: 0;right: 0;width: 100%;z-index: 1}
.banner-arrow{width: 50px;height: 50px;border: 1px solid #0073aa;color: #0073aa;line-height: 3.5;text-align: center;border-radius: 50%;font-size: 14px;}
.banner-arrow:hover{background: #0073aa;border: 1px solid #0073aa;color: #fff}
.banner-arrow-left{float: left;margin-left: 20px}
.banner-arrow-right{float: right;margin-right: 20px}
#footer {background: #f2f5f8;padding: 8px 0;font-size: 14px}
#footer .copyright {text-align: center}
.pc{display: block}
.mb{display: none !important}
.certified{background: #f1f1f2}
.certified p{margin: 0}
.certified a{color: unset}
#world{padding-top: 50px}
.certified-icon{width: 20%;padding: 30px 0}
.text-cover{display: inline-block;vertical-align: middle;padding-left: 5px}
.certified-box:hover{background: #e6e7e8;-webkit-transition: all 300ms ease;-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;-o-transition: all 300ms ease;transition: all 300ms ease}
.mgb-about-cover{margin-bottom: 8px}
.awards{padding: 50px 0}
.awards h2{font-size: 32px;color: #58595b;text-transform: uppercase;font-weight: 600;padding-bottom: 20px;margin: 0}
.cover-brand{background-blend-mode: multiply}
.section{padding: 50px 0}
.section-our{padding: 50px 0 370px;background: url(../images/bg-products.png) no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover}
.section-our-detail{padding: 50px 0;background: url(../images/product/bg-datail-product.jpg) no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover}
.sec-about{padding: 50px 0}
.sec-about-story{padding: 50px 0 480px;background: url(../images/about/bg-cover.png) no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover}
.about-our{padding-bottom: 50px}
.about-our h4{margin-bottom: 30px}
.box-our-about{max-width: 70%}
.txt-cover-company{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);color: #fff}
.img-our-story{width: 50%}
.box-our-story{position: absolute;left: 0;right: 0;bottom: 0}
.about-vision{margin-top: 100px;padding: 50px 0}
.box-cover-contact{background: rgba(15, 63, 86, 0.7);background: -moz-linear-gradient(left ,rgba(15, 63, 86, 0.7) 0%,rgba(247, 249, 247, 0) 100%);background: -webkit-linear-gradient(left ,rgba(15, 63, 86, 0.7) 0%,rgba(247, 249, 247, 0) 100%);background: linear-gradient(to right,rgba(15, 63, 86, 0.7) 0%,rgba(247, 249, 247, 0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='undefined', endColorstr='undefined', GradientType=1 );position: absolute;color: #fff;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 100%}
.contact-title{font-size: 16px;font-weight: 600;text-align: center}
.icon-box-map{width: 80%}
.contact-map .row{padding-bottom: 10px}
.box-contact-us{padding-top: 25px;padding-bottom: 25px}
.box-contact-us h4{margin: 0}
.title-contact-us{text-transform: uppercase;font-weight: 600;font-size: 32px;margin-bottom: 1rem}
.sec-event{padding: 80px 0}
.coconut-left{position: absolute;bottom: -165px;left: -150px;width: 25%}
.coconut-right{position: absolute;top: 15px;right: -116px;width: 20%}
.body-detail{padding: 15px;text-align: center;bottom: 0;left: 0;right: 0}
.body-detail h6{font-weight: 600;color: #000}
.body-detail p{color: #808184;margin: 0;display: inline-block;vertical-align: bottom}
.box-product i {position: absolute;top: 50%;left: 50%;border-radius: 50%;font-size: 34px;color: #fff;width: 60px;height: 60px;line-height: 60px;background: #80b341;text-align: center;box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);-webkit-transform: translate(-50%, -50%) scale(0);transform: translate(-50%, -50%) scale(0);transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045)}
.box-product{border: 1px solid #e6e7e8;margin-bottom: 50px;position: relative;overflow: hidden;width: 100%;text-align: center;box-shadow: 0 0 5px rgba(0, 0, 0, 0.15)}
.box-product:hover i{-webkit-transform: translate(-50%, -50%) scale(1);transform: translate(-50%, -50%) scale(1);transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.box-product:hover img,.box-product.hover img,.box-product:hover p,.box-product:hover h6,.box-product:hover hr {opacity: 0.3;-webkit-filter: grayscale(100%);filter: grayscale(100%)}
.box-product:hover i,.box-product.hover i{-webkit-transform: translate(-50%, -50%) scale(1);transform: translate(-50%, -50%) scale(1);transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.box-product img{padding: 15px}
.img-middle-product{padding: 50px 0}
.cover-middle{margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;display: inline-block}
.tooltip-inner ul{padding: 0;}
.tooltip-inner ul li{text-align: left}
.cover-middle img {vertical-align: middle}
.cover-middle p {display: inline-block}
.border-input{border: 1px solid #e6e7e8}
.border-input .form-control {color: #000}
.hr-product{width: 30%;border-bottom: 1.5px solid #808184}
.gallery ul,.ul-blog,.blog-new,.ul-news,.ul-categories,.ul-product{list-style: none;padding: 0;margin: 0;}
.gallery ul>li{float:left;width:33.333%;padding: 15px}
.text-deail{padding: 50px}
.gallery figure img {-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out}
.gallery figure:hover img {-webkit-transform: scale(1.2);transform: scale(1.2)}
.ul-blog li{padding: 5px 10px}
.ul-blog li{background-color: rgba(245, 245, 245, 0.82);border: 1px solid #e6e7e8;}
.ul-blog li.active-blog{background: #0073aa;color: #fff;border: 1px solid #0073aa}
.ul-blog li.active-blog a{color: #fff}
.ul-news li{float:left;border-bottom: 1px dashed#e6e7e8;padding: 8px 0; display: -webkit-box;display: -ms-flexbox;display: flex}
.ul-news li:last-child{border-bottom: unset}
.ul-news div:nth-child(1){width: 35%;float: left}
.ul-news div:nth-child(2){width: 65%;padding-left: 15px;float: left}
.ul-news{max-height: 300px;overflow-y: scroll}
.ul-news li:hover{background: #f1f1f1;}
.form-inline .input-group {width: 100%}
.ul-categories li{float: left;width: 33.333%;padding: 3px}
.ul-categories li:hover svg *{fill: #80b341;transition: all 100ms}
.box-categories{border: 1px solid #e6e7e8;padding: 8px}
.box-categories p{font-size: 12px}
.private{padding: 150px 0 0}
.badge{font-size: 14px;margin-bottom: 5px;font-weight: 400}
.ul-product li:first-child{margin-top: 15px}
.ul-product li{position: relative;padding: 15px 0}
.ul-product li:after{content: ""; clear: both;display: block;position: absolute;bottom: 0;right: 0;left: 0;width: 75%;margin: 0 auto;border-bottom: 1px dashed #e2e2e2}
.ul-product li:last-child:after{display: none}
.ul-product li:hover{background-image: -webkit-gradient(linear,right top,right bottom,color-stop(0, #FFFFFF),color-stop(1, #F1F1F1));background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F1F1F1 100%);background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F1F1F1 100%);background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F1F1F1 100%);background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F1F1F1 100%);background-image: linear-gradient(to bottom, #FFFFFF 0%, #F1F1F1 100%);color: #80a041;font-weight: 600}
.badge-tag{color: #000;background: #fff;border: 1px solid #e6e7e8}
.badge-tag-active{color: #fff;background: #0073aa}
.box-coconut-cover{position: absolute;top: -230px;left: 0;right: 0;text-align: center}
.box-sub-icon{padding: 30px 15px;border: 1px solid #e6e7e8;box-shadow: 0 0 5px rgba(0, 0, 0, 0.15)}
.box-sub-icon p{margin-top: 1rem;margin-bottom: 0}
.coconut-cover{width: 30%}
.box-our{height: 40vh}
.our-set{margin-top: 80px}
.our-set-1{margin-top: 120px}
#product-flters {padding: 0;margin: 5px 0 35px 0;list-style: none;text-align: center}
#product-flters li {cursor: pointer;display: inline-block;padding: 5px 20px;color: #666666;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;text-transform: uppercase;background: #fff;transition: all 0.3s ease-in-out;border: 1px solid #e6e7e8}
.box-cover-world{position: absolute;right: 30px;bottom: 20px;color: #fff}
.world-circle{width: 20px;height: 20px;background: #0073aa;border-radius: 50%;display: inline-block}
#product-flters li:hover, #product-flters li.filter-active,.ul-blog li.filter-active{background: #0074aa;color: #fff}
#product-flters li:hover a, #product-flters li.filter-active a{color: #fff}
#portfolio #product-flters li:last-child {margin-right: 0}
.circle-world{width: 20px;height: 20px;background: #0073aa;border-radius: 50%;position: absolute}
.world-america{top: 39%;left: 22%}
.world-EU{top: 30%;left: 55%}
.world-UAE{top: 60%;left: 52%}
.world-asia{top: 45%;left: 70%}
.world-oceania{top: 82%;left: 86%}
.tooltip-inner {color: #fff;background-color: #0073aa;border: 1px solid #0073aa}
.tooltip-inner ul{list-style: none}
.tooltip-inner ul b{text-align: left}
.tooltip.bs-tooltip-top .arrow:before {border-top-color: #0073aa}
.tooltip.bs-tooltip-right .arrow:before {border-right-color: #0073aa}
.tooltip.bs-tooltip-bottom .arrow:before {border-bottom-color: #0073aa}
.tooltip.bs-tooltip-left .arrow:before {border-left-color: #0073aa}
.scrllo-x {position: absolute;left: 0;top: 0;right: 0;bottom: 0;color: #fff;background-color: rgba(0, 0, 0, 0.55);width: 100%;z-index: 1}
.click-hide{position: absolute;top: 50%;text-align: center;width: 100%;font-size: 22px}
#mobile-nav ul li.float-right{float: unset !important}
.event-img-cover{margin-top: -50px}
.mb-tel-footer{color: #fff}
.pagination li{padding-right: 5px}
.pagination li:last-child{padding-right: 0}
.form-email, .form-email:focus {padding: 15px 15px;border: 0;color: #fff;background-color: #0073aa;border-radius: 25px}
.input-group-sub{border: 0;border-top-right-radius: 25px !important;border-bottom-right-radius: 25px !important;background-color: #4d9dc4;padding-right: 25px;color: #fff}
.tags span.badge-tag-active a{color: #fff}
.box-label{border: 1px solid #f2f2f2}
.box-label:hover{border: 2px solid #017597;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important}
.title-box-arrow{padding: 15px;text-align: center;margin: 0;color: #017597;display: none}
.title-box{margin: 0;color: #fff}
.sub-title-arrow .h5{margin: 0;color: #fff;text-align: center}
.sub-title-arrow{display: inline-block;position: relative;background: #017597;padding: 8px 0;width: 100%;text-align: center;padding-top: 30px}
.down-arrow{display: block;border-top: 50px solid #017597;border-bottom: 0 solid transparent}
.nav-tabs {border-bottom: 0}
.tab-content{border-bottom: 1px solid #dee2e6}
.nav-pills li, .nav-tabs li{width: 16.66%;padding: 0 20px}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {background-color: unset}
.border-b-none{border-bottom: unset}
.icon-our-product{width: 55%}
/* a.hover-middle{display: block;padding: 0;position:relative}
a.hover-middle{background: #000}
a.hover-middle img{
    display: block;
    -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
}
a.hover-middle img{opacity: 0.3}
a.hover-middle span{visibility:hidden;font-size:16px;font-weight: 600;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;}
a.hover-middle span, a.hover-middle.use span{
    color:#fff;
    visibility:visible;
    -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
} */
.related .item{text-align: center}
.related a span{color: #444}
.related a:hover span{color: #2dc899}
.arrow-re{position: absolute;top: 0;right: 0;padding-right: 15px}
.arrow-re span{font-size: 20px;cursor: pointer}
.arrow-re span:hover{color: #2dc899}
.d-block{display: block}
.mgb-5{margin-bottom: 8px !important}

.form-subscribe {
  width: 100%;
  padding: 15px;
  margin: 0 auto;
}
.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}
.form-label-group > input,
.form-label-group > label {
  padding: var(--input-padding-y) var(--input-padding-x);
}
.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}
.form-label-group input:-ms-input-placeholder {
  color: transparent;
}
.form-label-group input::-ms-input-placeholder {
  color: transparent;
}
.form-label-group input::-moz-placeholder {
  color: transparent;
}
.form-label-group input::placeholder {
  color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}
.col-md-5-5{
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}
.g-recaptcha{
margin: 0 auto;
    width: 300px;
}
.circle-world {
  width: 13px;
  height: 13px;
  background: #FFC107;
  border-radius: 50%;
  position: absolute;
  opacity:0;
}
.logo-land{
  max-height: 400px;
  overflow-y: auto;
  background: rgba(9, 149, 166, 0.2)
}
.logo-land img{
  width: 60px;
}
.logo-land li{
  margin-bottom: .5rem;
}
.logo-land li a{
  color: #fff;
}
.logo-land li:last-child{margin-bottom: 0}
.tooltip-inner b{
  color: #000;
  text-transform: uppercase;
}
.world-EU {
  top: 30%;
  left: 55%;
}
.world-th {
  top: 55%;
  left: 75%;
}
.world-russia {
  top: 29%;
  left: 72%;
}
.world-zealand{
  top: 93%;
  left: 92%;
}
.world-chile{
  top: 88%;
  left: 25%;
}
.world-colombia{
      top: 65%;
    left: 24%;
}
.world-kenya{
  top: 62%;
  left: 57%;
}
.world-turky{
  top: 38%;
  left: 55%;
}
.world-ukrain{
  top: 29%;
  left: 54%;
}
.world-bulgaria {
  top: 35%;
  left: 52%;
}
.world-hungary {
  top: 32%;
  left: 50%;
}
.world-eu {
  top: 26%;
  left: 44%;
}
.world-kuwait{
  top: 44%;
  left: 59%;
}
.world-africa{
  top: 80%;
  left: 52%;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
  border-top-color: #FFC107;
}
.circle-oem {
    background: #8fea26;
    width: 50px;
    height: 50px;
}
@media (min-width: 1440px) {
  .sec-about-story {padding: 50px 0 550px}
  .coconut-cover {width: 25%}
  .brand-box-img {height: auto}
}
@media (min-width: 1500px) {
  .sec-about-story {padding: 50px 0 650px}
}
@media (max-width: 414px) {
  .gallery ul>li{width:100.0%}
}
@media (min-width: 768px) {
  #contact .contact-address,#contact .contact-phone,#contact .contact-email {padding: 20px 0}
  #contact .contact-phone {border-left: 1px solid #ddd;border-right: 1px solid #ddd}
}
@media (max-width: 1375px){
  .coconut-right {right: -145px}
  .box-cover-about {padding: 0 3%}
  .intro-content {left: 5%}
  .section-our {padding: 50px 0 450px}
  .bg-about{height: 100vh}
  .box-cover-about {padding: 0 3%}
  .nav-menu li {margin-left: 10px}
}
@media (max-width: 1350px){
  .box-cover-about {padding: 0 3%}
}
@media (max-width: 1299px){
  .section-our {padding: 50px 0 320px}
}
@media (max-width: 1275px){
  .box-cover-about {padding: 0 30px}
.section-our {padding: 50px 0 320px}
  .box-coconut-cover {top: -130px}
}
@media (max-width: 1265px){
  .section-our {padding: 50px 0 400px}
}
@media (min-width: 1300px){.container {max-width: 1290px}}
@media (max-width: 1280px) {
  .set-call{padding-left: 5px}
  .box-coconut-cover {top: -180px}
  .private {padding: 200px 0 0}
  .box-coconut-cover {top: -90px}
}
@media (max-width: 1224px) {
  .ul-categories li{width: 50.0%}
  .coconut-right {right: 0}
  .box-coconut-cover{top: -150px}
  .box-cover-about {width: 45%}
  .cover-middle p {margin: 0;vertical-align: middle}
  .cover-middle .text-left{display: none}
  .cover-middle {padding-bottom: 15px}
}
@media (max-width: 1199px) {
  .social-links li:nth-child(1) {width: 50%}
  .social-links li:nth-child(2) {width: 40%}
  .social-links li:nth-child(3) {width: 40%;text-align: right}
  .txt-cart{display: none}
  .btn-shopping {padding: 7px;display: inline-block;width: 40px;height: 40px;border-radius: 50%;line-height: 30px;vertical-align: top;}
  .btn-shopping:hover{background: #2dc899}
  .shopping-cart {width: 100%}
  .custom-container{max-width: 100%}
  .certified-box{padding: 0}
  .our-brand .box {padding: 25px 15px}
  .box-about-img{height: 220px}
  .news .box-new .details {height: 100%}
  .news .box-new .detail-csr {height: 290px}
  .intro-content {width: 80%}
  .coconut-right ,.nav-menu li.float-right{display: none}
}
@media (max-width: 1024px) {
  .col-brand {-webkit-box-flex: 0;-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%}
  .brand-box-img img {width: 50%}
  .brand-box-img {text-align: center}
  .box-about-img {height: 23vh}
  .coconut-cover {width: 45%}
  .box-product {height: 37vh}
  .box-coconut-cover{top: -200px}
  .cover-middle p.text-left{display: none}
  .img-middle-product .bg-product-middle{height: 30vh}
  .cover-middle p.text-right{display: block;text-align: center !important}
  .sec-about-story {padding: 50px 0 350px}
  .world-america{left: 30%}
  .world-EU{left: 60%}
  .world-UAE{top: 53%;left: 54%}
  .world-asia{top: 43%;left: 69%}
  .world-oceania{top: 80%;left: 73%}
  .intro-content {width: 70%}
  .coconut-right {display: none}
  .text-cover p{display: none}
  .box-cover-vision{left: 30%;}
  .icon-footer {width: 15%}
  .center-mb a,.center-mb p{font-size: 12px}
  .cover-middle {padding-bottom: 0}
  .event-img-cover{margin-top: -42px}
}
@media (max-width: 992px) {
  .text-cover {padding-left: 3px;}
  .bg-company-about{height: 300px}
  .img-cover-top {display: none}
  .md-padding{padding: 20px 0}
  .sec-about {padding: 30px 0}
  .our-product {background-size: 150px;background-position: bottom left, top 10px right}
  .nav-menu > li:last-child {display: none}
  .news .box-new .details {height: 380px}
  .box-cover-about {width: 40%;padding: 0}
  .box-body {position: relative;width: 100%}
  .box-body h5 {width: 100%}
.custom-col .col{
	    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding-right: 5px;
    padding-left: 5px;
}
.our-set, .our-set-1{
    margin-top: 0;
}
.box-our {
    height: auto;
}
.section-our {
    padding: 50px 0 200px;
}
}
@media (max-width: 975px) {
  .box-icon-footer {display: block;padding-left: 0}
  .center-mb{text-align: center}
  .center-mb h6{margin-bottom: 5px}
  .icon-footer {width: 20%;margin-bottom: 15px}
  .center-mb a, .center-mb p {font-size: 14px}
  .box-cover-about {width: 58%}
}
@media (max-width: 920px) {
  .coconut-left {bottom: 0}
  .coconut-right {right: -100px}
}
@media (max-width: 768px) {
  .back-to-top {bottom: 15px}
  #header {padding: 0;height: 74px;background: #fff}
  #nav-menu-container {display: none}
  #mobile-nav-toggle {display: inline}
  #about .about-img {height: auto}
  .logo-mb{display: block}
  #about .about-img img {margin-left: 0;padding-bottom: 30px}
  .logo-banner{width: 25%}
  .box-coconut-cover{display: none}
  .gallery ul>li{width:50.0%}
  .text-deail{padding:  25px}
  .box-contact {
    padding: 20px 50px;
  }
}
@media (max-width: 767px) {
  #intro .intro-content h2 {font-size: 34px}
  .nav-menu > li {float: unset;margin-left: 0}
  .pc{display: none !important}
  .mb{display: block !important}
  .fa-globe{display: none !important}
  .line-center {width: 25%}
  .bg-about {background: url(../images/bg-abouts.png) no-repeat center center;background-size: cover;height: 80vh;background-position-y: inherit;position: relative;width: auto}
  .box-cover-about{top: 15%}
  .line-left {width: 25%;margin-left: -8px}
  .box-about-img {height: unset}
  .certified-icon {width: 30%;float: unset;padding-top: 30px;padding-bottom: 0;}
  .text-cover {float: unset;padding: 15px 0;display: block}
  .certified-box{text-align: center}
  .text-cover p{display: none}
  .footer-mgb{margin-bottom: 30px}
  .contact-icon {width: 10%;}
  .icon-footer {width: 50px;margin-bottom: 15px}
  .center-mb{text-align: center}
  .target-bottom {
    display: block;
    align-items: center;
}
  .sec-about-story {padding: 50px 0 230px}
  .box-our-story {margin-top: -170px}
  .full-max-width{max-width: 100%}
  .map-right{padding-left: 15px}
  .map-left{padding-right: 15px}
  .contact-title-p{margin-top: 1rem}
  .coconut-right,.coconut-left{display: none}
  .our-set,.our-set-1 {margin-top: 0;margin-bottom: 25px}
  .private{padding: 50px 0 0}
  .ul-categories li {width: 25.0%}
  .intro-content p,.intro-content div {display: none}
  .our-brand .box {height: auto}
  .world-america {left: 28%;top: 40%}
  .world-UAE {top: 50%;left: 53%}
  .world-EU {left: 60%}
  .world-asia {top: 43%;left: 69%}
  .world-oceania {top: 78%;left: 72%}
  .cover-body h6{margin: 25px 0}
  .news .box-new .details {height: auto}
  .event-img-cover {margin-top: -65px}
  .center-mb .col{-webkit-box-flex: 0;-ms-flex: 0 0 50.0%;flex: 0 0 50.0%;max-width: 50.0%}
  .box-body h5 {font-size: 16px;padding: 15px 0;}
  .box-sub-icon p{display: none}
  .icon-our-product{width: 70%;margin-top: 15px;}
  .box-our {height: auto}
  .box-cover-vision {left: 0}
  .box-awards .col{-webkit-box-flex: 0;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%}
  .nav-tabs.nav-tabs-dropdown,.nav-tabs-dropdown {border: 1px solid #dddddd;border-radius: 5px;overflow: hidden;position: relative}
  .nav-tabs.nav-tabs-dropdown::after,.nav-tabs-dropdown::after {content: "☰";position: absolute;top: 8px;right: 15px;z-index: 2;pointer-events: none}
  .nav-tabs.nav-tabs-dropdown.open a,.nav-tabs-dropdown.open a {position: relative;display: block}
  .nav-tabs.nav-tabs-dropdown.open > li.active > a,.nav-tabs-dropdown.open > li.active > a {background-color: #eeeeee}
  .nav-tabs.nav-tabs-dropdown li,.nav-tabs-dropdown li {display: block;padding: 0;vertical-align: bottom}
  .nav-tabs.nav-tabs-dropdown > li > a,.nav-tabs-dropdown > li > a {position: absolute;top: 0;left: 0;margin: 0;width: 100%;height: 100%;display: inline-block;border-color: transparent}
  .nav-tabs.nav-tabs-dropdown > li > a:focus,.nav-tabs-dropdown > li > a:focus,.nav-tabs.nav-tabs-dropdown > li > a:hover,.nav-tabs-dropdown > li > a:hover,.nav-tabs.nav-tabs-dropdown > li > a:active,.nav-tabs-dropdown > li > a:active {border-color: transparent}
  .nav-tabs.nav-tabs-dropdown > li.active > a,.nav-tabs-dropdown > li.active > a {display: block;border-color: transparent;position: relative;z-index: 1;background: #fff}
  .nav-tabs.nav-tabs-dropdown > li.active > a:focus,
  .nav-tabs-dropdown > li.active > a:focus,
  .nav-tabs.nav-tabs-dropdown > li.active > a:hover,
  .nav-tabs-dropdown > li.active > a:hover,
  .nav-tabs.nav-tabs-dropdown > li.active > a:active,
  .nav-tabs-dropdown > li.active > a:active {border-color: transparent}
  .nav-menu li.float-right{display: black}
}
@media (max-width: 576px) {
  .box-cover-vision {left: 0;width: 100%;text-align: center}
  .brand-box-img {height: unset}
  .box h4{margin-top: 15px}
  .box-our-about {max-width: 100%}
  .box-product {height: auto;padding-bottom: 50px;}
  .col-brand {-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%}
  #contact {background-size: 100px;background-position: top left, bottom right;}
  .box-icon-footer {display: block;padding-left: 5px}
  .box-icon-contact{display: inline-block;padding-left: 5px}
  .center-mb .col {-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;margin-bottom: 30px;}
  .w-custom {width: 100%}
  .related-h4{font-size: 19px}
  .nav-pills li, .nav-tabs li {width: 50%;padding: 0 15px}
.section-our {
    padding: 50px 0 50px;
}
}
@media (max-width: 480px) {
  #header {height: auto}
  .logo-banner {width: 35%}
  .intro-content h2 {font-size: 35px}
  .intro-content h1 {font-size: 28px}
  .bg-about {margin-left: -40px;height: 100vh;}
  .mgb-about-cover{margin-bottom: 15px}
  .line-left {width: 40%}
  .box-cover-about {top: 17%}
  .sec-about-story {padding: 50px 0 150px}
  .box-our-story {margin-top: -100px}
  .box-cover-about p.mgb-about-cover{display: none}
  .box-cover-about {padding: 0}
  .circle-world {width: 10px;height: 10px}
  .box-cover-world{display: none}
}
@media (max-width: 414px) {/* iPhone */
  .bg-about {height: 140vh}
  .our-product {background-size: 100px}
  .certified-icon {width: 50%}
  .box-contact {padding: 15px}
}
@media (max-width: 400px) {
  #product-flters {display: none}
}
@media (max-width: 380px) {
  .box-cover-product {margin: 0 15px 30px 15px}
  .certified-box {-webkit-box-flex: 0;-ms-flex: 0 0 33.333333%;flex: 0 0 50%;max-width: 50%}
  .box-icon-footer {padding-left: 0}
  .intro-content {width: 100%;left: 0}
  #mobile-nav-toggle {margin: 8px 8px 0 0}
}
@media (max-width: 375px) {
	.contact-svg {display: none}
}
/*Card Styling*/
      .card {
          border: 1px solid #dedede;
          background-color: white;
      }
      .card__wrap--inner {
          padding: 12px;
      }
      .card__item {
        padding: 1rem 15px;
      }
      .card__sub {
              padding: 0 18px;
        }
      .card {
          display: flex;
          flex-direction: column;
          width: 100%;
      }

      .card__wrap--outer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
      }
      .card__wrap--inner {
        display: flex;
        flex-direction: row;
        width: 100%;
      }
      .card__footer {
        padding: 1rem 15px;
        overflow: hidden;
    }
      @media (min-width: 480px) {
        .card__wrap--inner { 
                width: 50%
        }
      }

      @media (min-width: 1024px) {
        .card__wrap--inner { 
          width: 33.33%
        }
      }

      .flexible {
          flex-grow: 1;
          display: -webkit-box;
          overflow : hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;  
      }