body{ margin: 0px 0px; padding: 0px 0px; font-family: "Manrope", sans-serif;}
html{ overflow-x: hidden; scroll-behavior: smooth;}
p{font-size: 16px;color: #444;line-height: 1.6;}
a{ text-decoration: none; outline: none;}
:root {
  --blue:#0066B4;
  --white:#ffffff;
  --green:#209300;
}
.head-ttl{ font-size: 16px; color: #444; font-weight: 500; text-transform: uppercase; margin: 0px 0px 20px 0px; padding: 0px 0px 10px 0px; position: relative;}
.head-ttl::before{ content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: #209300;}
.blue-text{font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);color: #006FC0;font-weight: 600;white-space: pre-line;line-height: 1.3;}
.large-text{font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);color:var(--white) !important;font-weight: 600;white-space: pre-line;line-height: 1.3;}

.discover-btn{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: relative;}
.discover-btn a{ display: inline-block; padding: 10px 25px; color: #444; border: 1px solid #006FC0; position: relative; overflow: hidden; z-index: 1; transition: all ease 0.5s;}
.discover-btn a:before, .discover-btn a:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: all ease 0.5s; z-index: -1;} 
.discover-btn a:before { right: -50px; border-right: 50px solid transparent; border-bottom: 80px solid #050d54; transform: translateX(-100%);}
.discover-btn a:after { left: -50px; border-left: 50px solid transparent; border-top: 80px solid #050d54; transform: translateX(100%);}
.discover-btn a:hover:before {transform: translateX(-49%);}
.discover-btn a:hover:after {transform: translateX(49%);}
.discover-btn a:hover{ color: #fff;}

#header-section{position: fixed;top: 0;width: 100%;z-index: 12;display: flex;justify-content: space-between;transition: all ease 0.5s;}
#header-section .navbar-brand{ max-width: 200px; margin: 0px 45px 0px 0px;}
.logo-part{margin: 0px 0px 0px 0px;padding: 35px 35px;position: relative; transition: all ease 0.5s;}
.logo-part::before{content: '';display: block;position: absolute;top: 0;left: 0;background: url(../img/logo-shape.svg) no-repeat;background-size: cover;width: 340px;height: 340px;z-index: -1;}
.header-menu .navbar{padding: 12px 50px;position: relative;border-radius: 0px 0px 58px 58px;background: #fff;transition: all ease 0.5s;}
.header-menu .navbar::before{content: '';display: block;position: absolute;top: -1px;left: -45px;background: url(../img/nav-shape.svg) no-repeat;width: 46px;height: 33px;background-size: contain;}
.header-menu .navbar::after{content: '';display: block;position: absolute;top: -1px;right: -45px;background: url(../img/nav-shape.svg) no-repeat;width: 46px;height: 33px;background-size: contain;transform: rotateY(180deg);}
.header-menu .nav-link{font-size: 16px;color: #444;font-weight: 600;padding: 15px 18px !important;display: block; background-image: linear-gradient(to right, #209300, #209300 50%, #444444 50%); background-size: 200% 100%; background-position: -100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all ease 0.5s;}
.header-menu .navbar-nav .nav-link.active, .header-menu .navbar-nav .nav-link.show {
    background-position: 0;
}
.header-menu .nav-link:hover{ background-position: 0;}
.call-top{margin: 0px 0px 0px 0px;padding: 8px 20px 8px 0px;position: relative;}
.call-us{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; display: flex; transition: all ease 0.5s;}
.call-us li{list-style: none;margin: 0px 10px;padding: 8px 30px 8px 8px;background: #fff;border-radius: 50px;}
.call-us li a{ text-decoration: none;}
.call-us li span{width: 43px;height: 43px;background: #209300;border-radius: 50px;display: inline-block;line-height: 43px;text-align: center;margin: 0px 0px 0px 0px;}
.call-us li small{font-size: 16px;color: #444;font-weight: 600;text-decoration: none;margin: 0px 0px 0px 15px;}
.call-us li:last-child{background: transparent;padding: 0px 0px;margin-left: 0;}
.call-us li:last-child a{width: 59px;height: 59px;background: #209300;border-radius: 50px;display: inline-block;line-height: 59px;text-align: center; text-decoration: none;}
#header-section.sticky{ transition: all ease 0.5s; background: #fff; box-shadow:0px 5px 20px 0px rgb(0 0 0 / 12%); align-items: center;}
#header-section.sticky .logo-part{ display: none !important;}
#header-section.sticky .navbar-brand{ display: block !important;}


#main-slider{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: relative;}
#main-slider .carousel-item:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 2;}
#main-slider .carousel-indicators{ margin-bottom: 2.5rem;}
#main-slider .carousel-indicators [data-bs-target] { position: relative; width: 20%; height: 6px; border: none;}
#main-slider .carousel-indicators [data-bs-target] span { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background:#209300; border-radius: inherit;}
#main-slider .carousel-caption{ position: absolute; bottom: 50px; z-index: 3; text-align: left; max-width: 650px;}
#main-slider .carousel-shape { position: absolute; right: 10%; top: 20%; max-width: 35%; bottom: 0; margin: auto; z-index: 2; transform: translate(0, 0%); -webkit-animation-name:bounceIn; animation-name:bounceIn; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
#main-slider .carousel-caption h5{ font-size: 50px; color: #fff; font-weight: 600; -webkit-animation-name:fadeInUp; animation-name:fadeInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
#main-slider .carousel-caption p{ font-size: 22px; color: #fff; font-weight: 400; -webkit-animation-name:fadeInUp; animation-name:fadeInUp; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
/* @keyframes floating1 {
    0%,100% {transform: translateX(0)translateY(0)translateZ(0)rotate(0)scale(1)}
    25% {transform: translateX(0)translateY(10px)translateZ(-10px)rotate(15deg)scale(.95)}
    75% {transform: translateX(0)translateY(-10px)translateZ(10px)rotate(-5deg)scale(1)}
} */

#welcome-section{ margin: 0px 0px; padding: 60px 0px; position: relative; background: #F7F1E5;}
#welcome-section::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/welcome-bg.jpg) no-repeat; background-size: cover; opacity: .17;}
.welcome-img {margin: 0px 0px 0px 0px;padding: 0px 100px 100px 0px;position: relative;}
.welcome-img img{ width: 100%; object-fit: cover;}
.welcome-img .welcome01{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: relative;}
.welcome-img .welcome02{ position: absolute; bottom: 0; right: 0; max-width: 60%;}
.welcome-img .welcome02 img{ border: 10px solid #fff; border-radius: 10px;}
.welcome-info{ margin: 0px 0px; padding: 50px 50px; position: relative;}

#our-products{ padding: 60px 0px; margin: 0px 0px;}
.product-details{ padding: 0px 35px 35px 35px; margin: 0px 0px 0px 0px; position: relative;}
.product-slider{ margin: 0px 0px 0px 0px; padding: 0px 0px; position: relative;}
.product-slider .item{ margin: 0px 0px; padding: 0px 0px; position: relative; overflow: hidden;}
.product-slider .item::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); transition: all ease 0.5s; z-index: 1;}
.product-slider .item a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5;}
.product-img{ margin: 0px 0px 0px 0px; padding: 0px 0px; position: relative; overflow: hidden;}
.product-img h3{position: absolute;top: 30px;left: 30px;z-index: 1;color: #fff;font-size: 19px;}
.product-img img{ transition: all ease 1s; max-height:400px; object-fit:cover; width:100%;}
.product-slider .item:hover .product-img img{ transform: scale(1.1);}

#our-presence-part{ margin: 0px 0px 0px 0px; padding: 75px 0px 75px 0px; background: var(--blue); position: relative;}
.performance-left{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: sticky; top: 100px;}
.performance-ttl{ margin: 0px 0px 0px 0px; padding: 0px 0px 20px 40px; position: relative;}
.performance-left h2{ color: var(--white);}
.performance-right{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: relative;}
.performance-right::before{ content: ''; display: block; position: absolute; left: 0; right: 0; margin: auto; width: 1px; height: 100%; background:#ffffff30;}
.performance-right::after{ content: ''; display: block; position: absolute; top: 0; bottom: 40px; margin: auto; width: 100%; height: 1px; background:#ffffff30;}
.performance-info{ padding: 30px 25px; margin: 0px 0px; position: relative; height: 100%;}
.performance-info span{ display: block; margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px;}
.performance-info h3{ font-size: 35px; color: var(--white); font-weight: 600; margin: 0px 0px 0px 0px;}
.performance-info small{ color: var(--white); font-size: 15px; font-weight: 600; display: block; padding: 0px 0px 15px 0px; margin: 0px 0px 20px 0px; border-bottom: 1px solid #ffffff30;}
.performance-info p{ color: var(--white); font-size: 16px; font-weight: 500;}


#tab-section{ padding: 75px 0px; margin: 0px 0px 0px 0px; position: relative; overflow: hidden;}
#tab-section ul#pills-tab {margin: 0px 0px;padding: 0px 20px;position: relative;}
#tab-section .nav-pills .nav-link{font-size: 17px;color: #aaa;font-weight: 500;text-transform: uppercase;padding: 0px 15px; transition: all ease 0.5s;}
#tab-section .nav-pills .nav-link.active{ background: transparent; color: #0066B4; text-decoration: underline;}
.tab-data{ padding: 35px 35px 35px 35px; margin: 30px 0px 30px 0px; position: relative; z-index: 1; transform: translateY(50px); transition: transform .6s ease, opacity .6s ease;}
.tab-data::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 105%; height: 100%; z-index: -1; background: var(--white); border-radius: 5px; box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 15%);}
#tab-section .tab-content>.tab-pane.show .tab-data, #tab-section .tab-content>.tab-pane.show .tab-images{ transform: translateY(0);}
.tab-images{ margin:-55px 0px 0px 0px; padding: 0px 0px; position: relative; transform: translateY(-50px); transition: transform .6s ease, opacity .6s ease;}
.tab-points{ margin: 0px 0px 30px 0px; padding: 0px 0px; position: relative;} 
.tab-points li{ padding: 8px 20px; margin: 0px 0px 5px 0px; font-size: 16px; color: #444; position: relative; background: #F2ECE0; list-style: none;}
.tab-points li::before{ content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 3px; height: 20px; background: var(--blue);}

#achievement-section{ padding: 75px 75px; margin: 0px 0px; position: relative; text-align: center;}
#achievement-section .head-ttl::before { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 40px; height: 2px; background: #209300;}
.achievement-slider{ margin: 0px 0px; padding: 0px 0px; position: relative;}
.achievement-slider .item a{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 11;}
.achievement-slider .item{margin: 0px 0px;padding: 0px 0px;position: relative;text-align: center;display: flex;flex-direction: column;justify-content: center;flex-wrap: wrap;align-items: center;}
.achievement-slider .item h3{ font-size: 16px; color: #444; white-space: pre-line;}
.achievement-slider .achivement-img{margin: 0px 0px 0px 0px;padding: 0px 0px;position: relative;height: 140px;display: flex;}
.achievement-slider .achivement-img img{ width: auto; object-fit: contain;}

#sustainability-section{padding: 75px 0px;margin: 0px 0px;position: relative;background: url(../img/forest.jpg) fixed no-repeat;background-size: cover;background-position: center;z-index: 1;}
#sustainability-section::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1C4600; opacity: .37; z-index: -1;}
.sustainable-data{ margin: 0px 0px; padding: 0px 0px; position: relative; text-align: center;}
.sustainable-info{ max-width: 1100px; margin: 0px auto;}
.sustainable-data .head-ttl{ color: var(--white);}
.sustainable-data .head-ttl::before { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 40px; height: 2px; background: #209300;}
.sustainable-data p{ color: var(--white);}
.sustainable-data .discover-btn a{ border-color: var(--white); color: var(--white);}

.sustainable-data .top-shapes{position: absolute;top: -75%;right: -25%;max-width: 790px;}
.sustainable-data .bottom-shapes{position: absolute;bottom: -55%;left: -20%;max-width: 700px;}

#export-section{ padding: 75px 0px; margin: 0px 0px 0px 0px; position: relative;}
.export-info{ margin: 0px 0px; padding: 50px 50px;}
.green-packaging{margin: 0px 0px 0px 0px;padding: 75px 0px;position: relative;background: #209300;text-align: center;z-index: 1;}
.green-packaging::before{content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/welcome-bg.jpg) no-repeat;z-index: -1;opacity: .17;}
.packaging-data{ margin: 0px 0px 0px 0px; padding: 0px 0px; position: relative;}
.packaging-data::before{content: '';display: block;position: absolute;top: -20%;left: 5%;background: url(../img/bottle.svg) no-repeat;width: 112px;height: 118px;}
.packaging-data::after{content: '';display: block;position: absolute;bottom: -15%;right: 5%;background: url(../img/bottle.svg) no-repeat;width: 112px;height: 118px;}
.green-packaging p{ white-space: pre-line; color: #fff; margin: 0px 0px 15px 0px;}
.green-packaging .discover-btn a{ display: inline-block; padding: 10px 25px; color: var(--white); border: 1px solid var(--white);}

#footer-section{padding: 150px 0px 0px 0px;margin: -150px 0px 0px 0px;position: relative;background: #F7F1E5;}
#footer-section.sub-footer{ padding: 0px 0px; margin: 0px 0px;}

#footer-section::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/welcome-bg.jpg) no-repeat; background-size: cover; opacity: .17;}
.footer-step01 { padding: 30px 35px; display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center; border-bottom: 1px solid #ccc;}
.connectivity{ margin: 0px 0px 0px 0px; padding: 0px 0px; position: relative;}
.contact{ margin: 0px 0px 0px 0px; padding: 0px 0px; position: relative;}
.contact li{display: inline-block;padding: 0px 15px 0px 15px;margin: 0px 0px;}
.contact li span{ display: block; font-size: 15px; margin: 0px 0px 5px 0px;}
.contact li a{color: #444;font-size: 20px;font-weight: 600; transition: all ease 0.5s;}
.contact li a:hover{ color: #209300;}

.footer-step02{ margin: 0px 0px 0px 0px; padding: 30px 35px; position: relative;}
.footer-step02 h2{ font-size: 17px; color: #444; font-weight: 600; margin: 0px 0px 10px 0px;}
.footer-nav{ margin: 0px 0px 25px 0px; padding: 0px 0px 0px 0px; position: relative;}
.footer-nav li{ list-style: none;}
.footer-nav li a{text-decoration: none;color: #444;padding: 3px 0px;display: inline-block;font-size: 16px; position: relative; overflow: hidden;}
.footer-nav li a::before{ content: ''; display: block; position: absolute; left: 0; bottom: 1px; width: 0; height: 1px; background: #444; transition: all ease 0.5s;}
.footer-nav li a:hover::before{ width: 100%; left: 100%;}

#copyrights-footer{ padding: 5px 0px; margin: 0px 0px 0px 0px; position: relative; background: #fff;}
.copyrights{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0px 35px;}
.copyright-list{ margin: 0px 0px; padding: 10px 0px; position: relative;}
.copyright-list li{list-style: none;display: inline-block;font-size: 15px;color: #444444f2;font-weight: 500;padding: 0px 10px; border-right: 1px solid #ccc;}
.copyright-list li:last-child{ border: none;}
.copyright-list li img{ filter: grayscale(1); transition: all ease 0.5s;}
.copyright-list li:hover img{ filter: grayscale(0);}

.policy-links{ position: relative; margin: 0px 0px; padding: 10px 0px;}
.policy-links li{ list-style: none; display: inline-block; padding: 0px 10px; border-right: 1px solid #ccc;}
.policy-links li:last-child{ border: none;}
.policy-links li a{font-size: 15px;color: #444444f2;font-weight: 500;}

#get-started-form{margin: 0px 0px 0px 0px; position: relative;}
#get-started-form .offcanvas{ width: 500px;}
#get-started-form .offcanvas .btn-close{ outline: none; box-shadow: none;}
.get-started{ padding: 50px 20px; position: relative;}
.get-started h2{font-size: 30px; color: var(--green); margin: 0px 0px 10px 0px;}
.get-started p{ font-size: 17px; margin: 0px 0px 30px 0px;}

.get-started .form-group{ margin: 0px 0px 15px 0px; padding: 0px 0px; position: relative;}
.get-started .form-group input{ width: 100%; padding: 10px 15px; border: 1px solid #bdbdbd;}
.get-started .form-group textarea{ width: 100%; height: 125px; padding: 10px 15px; border: 1px solid #bdbdbd; resize: none;}
.get-started .form-group .submit{text-align: center; width: 100%; font-size: 16px; padding: 15px 25px; display: block; color: #fff; background: var(--blue); border: none; position: relative;}
.get-started .form-checkbox { margin: 0px 0px; padding: 0px 30px 0px 0px; position: relative; display: block;}
.get-started .form-checkbox li{ list-style: none; font-size: 14px; color: #444; padding: 0px 0px 0px 25px; position: relative;}
.get-started .form-checkbox li input{ position: absolute; left: 0; top: 3px; width: 15px; height: 15px;}
.get-started .form-checkbox .form-group input{ width:15px; height: 15px; max-width: 15px; position: relative; top: 24px;}
.get-started .form-checkbox .form-group label{ position: relative; top: 0; left: 30px;}


#thanks-details{ padding: 150px 0px;}
.thanks-message{max-width: 800px;margin: 0px auto;padding: 70px 50px;background: #fff;text-align: center;border: 2px solid #45a735;border-radius: 50px;}
.thanks-message img{ margin: 0px 0px 30px 0px;}
.thanks-message h2{font-size: 30px;color: #3c992d;margin: 0px 0px 20px 0px;font-weight: 600;}
.thanks-message p{ font-size: 17px; margin: 0px 0px 20px 0px;}