@charset "utf-8";
/* CSS Document */
/*CSS Import*/
/*@import url("fonts.css");
@import url("back-to-top.css");
@import url("helper-class.css");*/
html {font-size: 16px;}   
body {font-family: "Prompt", sans-serif; font-weight: 400; font-style: normal; color: #888888; overflow-x: hidden;} 
.loader {position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('../images/dual-ball.gif') 50% 50% no-repeat rgb(249,249,249);}
p {line-height: 1.2;}

.prompt-light {font-family: "Prompt", serif; font-weight: 300; font-style: normal;}
.prompt-regular {font-family: "Prompt", serif; font-weight: 400; font-style: normal;}
.prompt-medium {font-family: "Prompt", serif; font-weight: 500; font-style: normal;}
.prompt-semibold {font-family: "Prompt", serif; font-weight: 600; font-style: normal;}
.prompt-bold {font-family: "Prompt", serif; font-weight: 700; font-style: normal;}

/* ////////// Main Class ////////// */
/* change transition duration to control the speed of fade effect */
.carousel-item {transition: transform 0.8s ease-in-out;}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {transition: opacity 0s 0.8s;}

.sec-content {padding-top: 50px; padding-bottom: 50px;} 
.sec-content.no-top {padding-top: 0;}
.sec-content.no-bottom {padding-bottom: 0;}
.sec-separate-bg {position: relative;}
.sec-separate-bg .container {position: relative; z-index: 1;}
.sec-separate-bg.bg-left:before {position: absolute; top: 0px; left: 0; bottom: 0; content: ""; width: 50%; height: 100%; background: #F4D8D8;}
.sec-separate-bg.bg-right:after {position: absolute; top: 0px; right: 0; bottom: 0; content: ""; width: 50%; height: 100%; background: #F4D8D8;}
.sec-bg-attachment {position: relative; background-size: cover; background-position: center; background-attachment: fixed;}
.sec-bg-attachment:before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.7);}
.sec-bg-attachment > .container {position: relative; z-index: 1;}

.sec-color {background: #eeeeee;}
.sec-title h1 {font-size: 2.625rem; /*font-size: 42px;*/ background: -webkit-gradient(linear, left top, right top, from(#559f00), to(#06954b)); background: linear-gradient(to right, #559f00 0%, #06954b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}
.sec-title h1:after {content: ""; display: block; width: 75px; height: 18px; background-image: url('../images/title-b-line.svg'); margin: 10px auto 30px; opacity: 0.6;}
.sec-title span {}

.sec-sub-title {}
.sec-sub-title h2 {font-size: 1.625rem; font-size: 26px; background: -webkit-gradient(linear, left top, right top, from(#559f00), to(#06954b)); background: linear-gradient(to right, #559f00 0%, #06954b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}

/*#home_banner {background: #d01f26; min-height: 560px;}
#home_banner .title h1 {font-weight: 700; font-size: 3.4375rem;}
#home_banner .title h1 + p {font-size: 1.875rem;}*/

#home_carousel .carousel-indicators [data-bs-target] {width: 15px; height: 15px; margin-right: 5px; margin-left: 5px; border-radius: 50%;}
#home_carousel .carousel-indicators .active {background-color: #ffa101;}

.lb-data .lb-caption {font-size: 1.125rem; font-weight: 400; display: block; margin: 5px 0 10px; color: #ffffff;}

.wrap-product {}
.wrap-product .item {position: relative; text-align: center; margin-bottom: 30px;}
.wrap-product .item:not(.more) .layout {position: relative;}
.wrap-product .item:not(.more) .layout:before {opacity: 0; position: absolute; color: #ffffff; z-index: 1; width: 26px; height: 26px; top: 50%; left: 50%; margin-left: -13px; margin-top: -13px; content: "\f00e"; display: inline-block; font: normal normal normal 14px / 1 FontAwesome; font-size: 1.625rem; text-rendering: auto; -webkit-font-smoothing: antialiased; transition: opacity 0.3s ease;}
.wrap-product .item:not(.more) .layout:after {content: ""; position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.0); transition: background-color 0.3s ease;}
.wrap-product .item:not(.more):hover .layout:before {opacity: 1}
.wrap-product .item:not(.more):hover .layout:after {background-color: rgba(0,0,0,0.3)}
.wrap-product .item a {position: absolute; z-index: 3; display: block; top: 0; bottom: 0; left: 0; right: 0;}
.wrap-product .item a + .layout {overflow: hidden; margin-bottom: 10px;}
.wrap-product .item a + .layout img {opacity: 1; will-change: transform; transition: opacity 0.35s, transform 0.35s; transform: scale(1.05) translateZ(0);}
.wrap-product .item:hover a + .layout img { opacity: 1; transform: scale(1) translateZ(0);}
.wrap-product .item a + .layout + .product-title {color: #333333; font-size: 1.125rem; font-size: 18px; font-weight: 500; transition: color 0.2s ease;} 
.wrap-product .item:hover a + .layout + .product-title {color: #000000;}
.wrap-product .item.more  a + .layout:before {content: ""; display: block; position: absolute; z-index: 1; background: #559f00; opacity: 0.8; top: 0; bottom: 0; left: 0; right: 0;}
.wrap-product .item.more:before,
.wrap-product .item.more:after {position: absolute; z-index: 2; top: 30px; right: 30px; bottom: 30px; left: 30px; content: '';opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
.wrap-product .item.more:before {/* border-top: 1px solid #fff; border-bottom: 1px solid #fff;*/ inset: 30px; pointer-events: none; background: url(../images/b-line-x.svg) no-repeat top center, url(../images/b-line-x.svg) no-repeat bottom center; background-size: auto 17px, auto 17px; /*-webkit-transform: scale(0, 1); transform: scale(0, 1);*/}
.wrap-product .item.more:after {/*border-right: 1px solid #fff; border-left: 1px solid #fff;*/ inset: 50px 29px; pointer-events: none; background: url(../images/b-line-y.svg) no-repeat left center, url(../images/b-line-y.svg) no-repeat right center; background-size: 17px auto, 17px auto; /*-webkit-transform: scale(1, 0); transform: scale(1, 0);*/}
.wrap-product .item.more:hover:before,
.wrap-product .item.more:hover:after {opacity: 0.65; -webkit-transform: scale(1); transform: scale(1);}
.wrap-product .item.more a {display: flex; justify-content: center; align-items: center; text-decoration: none;}
.wrap-product .item.more a span {position: relative; color: #ffffff; min-width: 130px;}
.wrap-product .item.more a span:before,
.wrap-product .item.more a span:after {content: ""; display: block;}
.wrap-product .item.more a span:before,
.wrap-product .item.more a span:after {background-image: url(../images/btn-more-b.png); background-repeat: no-repeat; position: absolute; top: -10px; left: 0; width: 20px; height: 20px;}
.wrap-product .item.more a span:after {top: auto; bottom: -10px; left: auto; right: 0; width: 20px; height: 20px; transform: rotate(180deg); transform-origin: center;}

.wrap-shortcut {}
.wrap-shortcut .item {}
.wrap-shortcut .item .layout {position: relative; overflow: hidden; margin-bottom: 10px;}
.wrap-shortcut .item .layout:after {content: ""; display: block; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background: #000000; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 10%, rgba(181, 181, 181, 0) 80%, rgba(255, 255, 255, 0) 100%);}
.wrap-shortcut .item .layout img {opacity: 1; will-change: transform; transition: opacity 0.35s, transform 0.35s; transform: scale(1.05) translateZ(0);}
.wrap-shortcut .item .layout h1 {display: flex; justify-content: space-between; align-items: center; position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; margin-left: 50px; margin-right: 50px; margin-bottom: 50px; padding-bottom: 15px; color: #ffffff; border-bottom: 3px solid #ffffff;}
.wrap-shortcut .item .layout h1 > a {font-size: initial; color: inherit; display: inline-block; text-decoration: none; border: 1px solid rgba(238, 238, 238, 1.0); padding: 10px 15px; border-radius: 50px; transition: all 0.2s;}
.wrap-shortcut .item:hover .layout h1 > a {border: 1px solid rgb(238 238 238); background: #ffffff; color: #000000;}
.wrap-shortcut .item:hover .layout h1 > a:hover {background: #559f00; color: #ffffff; border: 1px solid rgb(238 238 238 / 0%); transition: all 0.2s;}
.wrap-shortcut .item:hover .layout img { opacity: 1; transform: scale(1) translateZ(0);}

.wrap-review {}
.wrap-review .item {position: relative; padding-left: 40px; padding-top: 40px;}
.wrap-review .item .layout:before {opacity: 0; position: absolute; color: #ffffff; z-index: 1; width: 26px; height: 26px; top: 50%; left: 50%; margin-left: -10px; margin-top: -13px; content: "\f00e"; display: inline-block; font: normal normal normal 14px / 1 FontAwesome; font-size: 1.625rem; text-rendering: auto; -webkit-font-smoothing: antialiased; transition: opacity 0.3s ease;}
.wrap-review .item .layout:after {content: ""; position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.0); transition: background-color 0.3s ease;}
.wrap-review .item:hover .layout:before {opacity: 1}
.wrap-review .item:hover .layout:after {background-color: rgba(0,0,0,0.3)}
.wrap-review .item a {position: absolute; z-index: 1; display: block; top: 0; bottom: 0; left: 0; right: 0;}
.wrap-review .item .avatar {position: absolute; top: 15px; left: 15px; z-index: 1; display: flex; width: 59px; height: 59px; background-color: #ffa101; background-image: url(../images/avatar.webp); background-repeat: no-repeat; background-size: 45px; background-position: center center; border-radius: 50%;}
.wrap-review .item .layout {position: relative; height: 400px; overflow: hidden; margin-bottom: 10px; border: 1px solid #d1d1d1; border-radius: 4px;}
.wrap-review .item .layout img {opacity: 1; will-change: transform; transition: opacity 0.35s, transform 0.35s; transform: scale(1.05) translateZ(0);}
.wrap-review .item:hover .layout img {opacity: 1; transform: scale(1) translateZ(0);}

.wrap-review.inpage {}
.wrap-review.inpage .item {padding-left: 30px; padding-top: 30px;}
.wrap-review.inpage .item:before {margin-left: 4px;}
.wrap-review.inpage .item:after {margin-top: 30px; margin-left: 30px;}
.wrap-review.inpage .item .avatar {width: 31px; height: 31px; background-size: 25px;}

.custom-btn {display: inline-block; padding: 15px 10px; border-radius: 50px; min-width: 170px; text-align: center; text-decoration: none; transition: all 0.2s;}
.btn-more {background: #283d04; color: #ffffff;}
.btn-more:hover {background: #1A2A00;}

.title-box {position: relative; z-index: 1; padding: 50px; min-height: 350px; margin-top: 80px;}
.title-box.mh400 {min-height: 400px}
.title-box::before {content: ""; position: absolute; top: 0; bottom: 0; left: -9999px; right: 0; z-index: -1; background: #559F00; background: linear-gradient(90deg, rgba(85, 159, 0, 1) 90%, rgba(6, 149, 75, 1) 100%); border-top-right-radius: 180px;}
.title-text {color: #ffffff;}
.title-text ul {line-height: 26px;}
.title-text h1 {font-size: 2.625rem; /*font-size: 42px;*/ margin-bottom: 20px;}
.title-text p {font-size: 1.25rem; /*font-size: 20px;*/ line-height: 30px;}


/*Page*/
.sec-page-header {position: relative; min-height: 300px; background-size: cover; background-position: center; /*background-position: center; background-attachment: fixed;*/}
/*.sec-page-header .img-bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -1;}*/
.sec-page-header:before {content: ""; display: block; position: absolute; background: rgba(0, 0, 0, 0.5); top: 0; bottom: 0; left: 0; right: 0;}
.sec-page-header .inner {position: relative; z-index: 1;}
.sec-page-header .inner h1 {color: #ffffff;}
.menu-list {list-style-type: none; line-height: 35px; margin-bottom: 0;}
.menu-list li {position: relative;}
.menu-list li a {color: #415733; font-size: 1.125rem; text-decoration: none;}
.menu-list li a:hover {color: #559f00; text-decoration: underline;}
.menu-list li a:before {content: ""; position: absolute; top: 50%; left: -25px; margin-top: -7.5px; display: block; width: 15px; height: 15px; background-image: url(../images/footer-bullet.svg); background-repeat: no-repeat;}

/*btn-more-b.png*/

/*//////////////////Media Query//////////////////*/
/* .col- ***** [xs] < 576px */
@media (max-width: 575px) {
    	    
}

/* .col-sm- *** [sm] 576px - 767px */
@media (min-width: 576px) {
    .sec-content.top-sm {padding-top: 50px;}
    .sec-content.bottom-sm {padding-bottom: 50px;}
    .sec-content.no-top-sm {padding-top: 0;}
    .sec-content.no-bottom-sm {padding-bottom: 0;}   
}
@media (max-width: 767px) {
    .wrap-shortcut .item .layout {    height: 320px;}
    .wrap-shortcut .item .layout img {    width: 100%;
    height: 100%;
    object-fit: cover;}
    .wrap-shortcut .item .layout h1 {margin-left: 25px; margin-right: 25px; margin-bottom: 25px;}	    
}

/* .col-md- *** [md] 768px - 991px */
@media (min-width: 768px) {
    .sec-content.top-md {padding-top: 50px;}
    .sec-content.bottom-md {padding-bottom: 50px;}
    .sec-content.no-top-md {padding-top: 0;}
    .sec-content.no-bottom-md {padding-bottom: 0;}	  
}
@media (max-width: 991px) {
    .title-box {min-height: 250px; margin-top: 0; margin-bottom: 50px;}
    .title-box.mh400 {min-height: 250px;}
    .title-box::before {border-top-right-radius: 0; border-bottom-right-radius: 120px;}	  
    
}

/* .col-lg- *** [lg] 992px - 1199px */
@media (min-width: 992px) {
	.sec-content {padding-top: 80px; padding-bottom: 80px;}	 
    .sec-content.top-lg {padding-top: 80px;}
    .sec-content.bottom-lg {padding-bottom: 80px;}
    .sec-content.no-top-lg {padding-top: 0;}
    .sec-content.no-bottom-lg {padding-bottom: 0;}
}
@media (max-width: 1199px) {
	    
}

/* .col-xl- *** [xl] 1200px - 1399px */
@media (min-width: 1200px) {
    .sec-content {padding-top: 80px; padding-bottom: 80px;}	 
    .sec-content.top-xl {padding-top: 80px;}
    .sec-content.bottom-xl {padding-bottom: 80px;}
    .sec-content.no-top-xl {padding-top: 0;}
    .sec-content.no-bottom-xl {padding-bottom: 0;}    
}
@media (max-width: 1399px) {
	    
}

/* .col-xxl- ** [xxl] 1400px++ */
@media (min-width: 1400px) {
    
}


/* ////////////// for Screen Size 18.5 ////////////*/
@media (max-height: 767px) {

}
/*for Screen Size 18.5 (xs)*/
@media (min-height: 768px) { 
  
}