@font-face {
    font-family: 'blackflowerregular';
    src: url('fonts/blackflower-webfont.eot');
    src: url('fonts/blackflower-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/blackflower-webfont.woff2') format('woff2'),
         url('fonts/blackflower-webfont.woff') format('woff'),
         url('fonts/blackflower-webfont.ttf') format('truetype'),
         url('fonts/blackflower-webfont.svg#blackflowerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@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 {background: #fff;color: #444;font-size: 14px;font-weight: 400}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 600}
.font-flower{font-family: 'blackflowerregular';font-weight: 500}
img {vertical-align: baseline;width: 100%;height: auto}
a {color: #5178ec}
a:visited {color: #c591c5}
a:hover, a:focus, a:active {color: midnightblue}
a:focus {outline: none}
a:hover, a:active {outline: 0;list-style: none}
.flex {display: flex !important;}
.logo{width: unset}
.site-branding {padding: 40px 0}
.hamburger-menu {position: relative;width: 100%;max-width: 24px;height: 22px;margin: 0 auto;transition: .5s ease-in-out;cursor: pointer;}
.hamburger-menu span {display: block;position: absolute;height: 3px;width: 100%;background: #181818;border-radius: 10px;opacity: 1;left: 0;transition: .25s ease-in-out}
.hamburger-menu span:nth-child(1) {top: 2px}
.hamburger-menu span:nth-child(2),.hamburger-menu span:nth-child(3) {top: 10px}
.hamburger-menu span:nth-child(4) {top: 18px}
.hamburger-menu.open span:nth-child(1) {top: 18px;width: 0;left: 50%}
.hamburger-menu.open span:nth-child(2) {transform: rotate(45deg)}
.hamburger-menu.open span:nth-child(3) {transform: rotate(-45deg)}
.hamburger-menu.open span:nth-child(4) {top: 18px;width: 0;left: 50%}
.site-navigation {position: absolute;left: 0;z-index: 9999;width: 100%;height: 100%;overflow: hidden;list-style: none;transition: all .35s}
.site-navigation.show {height: 100%;background: #fff;position: relative}
.site-navigation ul {padding: 0;margin: 0}
.site-navigation ul li {display: block;padding: 10px 0;font-size: 12px;text-align: center;letter-spacing: 0.08rem;text-transform: uppercase;position: relative}
.site-navigation ul li a {display: block;font-size: 16px;padding: 4px 0;font-weight: 600;border-bottom: 2px solid transparent;color: #2f2f2f;transition: all 0.6s;text-decoration: none}
.site-navigation ul li.menu-item a.nav-active::after,.site-navigation ul li.menu-item:hover a::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: block;width: 25px;height: 25px;background: #66c9d8;border-radius: 50%;z-index: -1;transition: all 0.85s}
.site-navigation.show ul li.current-menu-item a {border-color: #2f2f2f}
.site-header{position: relative;background-image: url(../images/leaf-coconut-left.png), url(../images/leaf-coconut-right.png),url(../images/bg-gray.png);background-size: 230px,230px,100%;background-position: bottom left, top 240px right,center bottom;background-repeat: no-repeat}
.coconut-top{padding: 60px 15px}
.box-top-text{position: relative;display: inline-block;margin-bottom: 30px}
.box-top-text h3{font-size: 52px;margin: 0}
.box-top-text h3::before{content: '';position: absolute;top: 50%;left: -25px;transform: translate(-50%, -50%);display: block;width: 25px;height: 25px;background: #66c9d8;border-radius: 50%}
.box-top-text h3::after{content: '';position: absolute;top: 50%;right: -45px;transform: translate(-50%, -50%);display: block;width: 25px;height: 25px;background: #66c9d8;border-radius: 50%}
section{position: relative;padding: 50px 0}
.box-inline{display: inline-block}
.cus-h3{margin: 30px 0}
.national{background: #f7f5f1;margin-bottom: -41px}
.fresh{padding: 150px 0 50px;background: url(../images/bg-freshs.png) no-repeat top;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover}
.last{padding: 50px 0 180px 0;background: url(../images/bg-gray.png) no-repeat bottom;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover}
section h3{margin-bottom: 50px}
.box-inline span{font-size: 30px;vertical-align: bottom;padding-right: 6px}
.img-menu{width: 80%;vertical-align: middle}
.box-cover-bottom{position: absolute;right: 0;bottom: -70px}
.footer-copyright{padding: 30px 0}
.national h5{margin-bottom: 30px}
.hover-effect {position: relative}
.hover-effect:hover::before {height: 100%;opacity: 0;width: 100%}
.hover-effect::before {content: "";background: #fff;height: 0;width: 0;z-index: 1;position: absolute;-webkit-transition-duration: 1.9s;-o-transition-duration: 1.6s;transition-duration: 1.6s}
.hover-effect::before {content: "";background: #fff;height: 0;width: 0;z-index: 1;position: absolute;-webkit-transition-duration: 1.6s;-o-transition-duration: 1.6s;transition-duration: 1.6s}
.hover-effect::before {right: 0;opacity: 1;top: 0}
.a-text {color: white;padding: 16px;border: none}
.a-text:after {content: "\f107";position: absolute;right: 8px;font-family: "Font Awesome 5 Free";font-weight: 900}
.dropdown {position: relative;display: inline-block}
.dropdown-content {display: none;position: absolute;background-color: #f1f1f1;min-width: 100px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1}
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
@media screen and (min-width: 992px) {
    .flex-lg {display: flex !important}
    .site-navigation ul li {padding: 0 20px;}
}
@media screen and (min-width: 576px){
    .site-title {font-size: 112px}
}
@media screen and (min-width: 1440px) {
    .national{margin-bottom: -46px}
}
@media screen and (max-width: 1430px) {
    .national{margin-bottom: -46px}
}
@media screen and (max-width: 1300px) {
    .site-header {background-size: 180px,180px,auto;}
}
@media screen and (max-width: 992px) {
    .site-header {background-size: 180px,180px,auto}
    .site-navigation {height: 26px}
    .dropdown-content {left: 0;right: 0;width: 20%;text-align: center;margin: auto}
}
@media screen and (max-width: 575px) {
    .fresh {padding: 100px 0 50px}
    .box-cover-bottom {bottom: -70px;width: 50%}
    .last .m-auto{margin-top: 100px !important}
    .last {padding: 50px 0 80px 0}
}