@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body { background: #fff; margin: 0; font-family: "Noto Sans", sans-serif; line-height: 1.6; overflow-x: hidden;}
a { text-decoration: none; transition: ease-in-out all 0.2s;}
p { font-size: 15px; letter-spacing: .5px; margin: 0 0 10px 0; line-height: 1.7;}
.heading h4 { color: #006e2f; font-size: 24px; font-family: "PT Serif", serif; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px 0;}
.heading h2 { font-size: 46px; color: #121212; margin: 0 0 30px 0; font-family: "PT Serif", serif; font-weight: 700;}
.sub-heading { font-size: 34px; color: #121212; margin: 0 0 30px 0; font-family: "PT Serif", serif; font-weight: 700;}
.custom-btn { display: inline-block; background: #fdcc0d; color: #111111; padding: 12px 30px; border-radius: 10px; font-size: 14px; font-weight: 500;}
.custom-btn:hover { color: #fff; background: #006e2f;}
/*===================Navigation Menu================*/ 
.navbar { background: #fff; margin: 2% 7%; padding: 0; width: 86%; border-radius: 50px; padding: 0 0 0 30px;}
.navbar .navbar-brand img { width: 90px;}
.navbar .nav-item .nav-link {color: #282828; font-size: 15px; font-weight: 600; padding: 10px 30px; font-family: "PT Serif", serif;}
.navbar .nav-item:last-child { background: #fdcc0d; border-radius: 30px; margin: 0 15px 0 0;}
.navbar .nav-item .nav-link:hover { color: #006e2f;}    
.navbar.scrolled { transition: all 400ms; box-shadow: 0px 12px 32px 0px rgba(140, 140, 140, .1); width: 100%; margin: 0; background: #fff; border-radius: 0;}
.navbar.scrolled .navbar-brand img { transition: all 400ms; width: 80px;}

/*======================== Navigation Menu (Animated X) ====================*/
.navbar-toggler.x { border: none; padding: 0 0 0 15px;}
.navbar-toggler.x:focus { outline: none !important; box-shadow: none !important;}
.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 10% 10%; -ms-transform-origin: 10% 10%; transform-origin: 10% 10%;}
.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(2) { opacity: 0; filter: alpha(opacity=0);}
.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 10% 90%; -ms-transform-origin: 10% 90%; transform-origin: 10% 90%;}
.navbar-toggler.x .icon-bar { width: 22px; display: block; height: 2px; background-color: #00001c; -webkit-transition: all 0.2s; transition: all 0.2s;}
.navbar-toggler.x .icon-bar + .icon-bar {margin-top: 4px;}
.navbar-toggler.x .icon-bar:nth-of-type(1) {-webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0);}
.navbar-toggler.x .icon-bar:nth-of-type(2) { opacity: 1; filter: alpha(opacity=100);}
.navbar-toggler.x .icon-bar:nth-of-type(3) { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0);}
.navbar-toggler { padding: 0;}

/*===================Banner Section================*/ 
.banner-section { position: relative; margin-top: -150px;}
.banner-section .carousel .carousel-caption::after { position: absolute; content: ''; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(255, 255, 255, .0)); top: 0; left: 0; z-index: 2;}
.banner-section .carousel .carousel-caption { text-align: left; top: 0; left: 0; padding: 3;}
.banner-section .carousel .carousel-caption .text { margin-top: 22%; margin-left: 12%; width: 50%; position: relative; z-index: 4; }
.banner-section .carousel .carousel-caption h1 {font-size: 60px; font-weight: 900; margin: 0; line-height: 1.2; letter-spacing: .7px;  font-family: "PT Serif", serif; margin: 0 0 20px 0; opacity: 0; animation: fadeInLeft 0.8s ease forwards}
.banner-section .carousel .carousel-caption p {font-size: 20px; font-weight: 500; margin: 0 0 30px 0; opacity: 0; animation: fadeInRight 0.8s ease forwards;}
.banner-section .carousel-control-next-icon img, .banner-section .carousel-control-prev-icon img { background: #fff; width: 50px; height: 50px; border-radius: 50%; padding: 5px}
.banner-section .carousel-control-next, .banner-section .carousel-control-prev { opacity: 1 ; width: 140px; top: 5%;}
.banner-section .carousel-control-next { width: 170px;}
.banner-section .carousel-control-next:hover, .banner-section .carousel-control-prev:hover { position: 1;}
.banner-section .carousel-control-next-icon img:hover, .banner-section .carousel-control-prev-icon img:hover { background: #fdcc0d;}

.about-section { padding: 10% 0 5% 0 ;}
.about-section .about-pic{ position: relative; }
.about-section .about-pic::after { content: ''; position: absolute; width: 95%; height: 95%; border: 8px solid #fdcc0d; top: -25px; left: -25px; border-radius: 20px;}
.about-section .about-pic img { position: relative; z-index: 3; border-radius: 20px;}

.product-section { padding: 7% 0; background: radial-gradient(closest-side, rgba(0, 110, 47, .12), #fff);}
.product-section .product-card { padding: 15px 10px 10px 10px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; text-align: center; border-radius: 10px; margin: 10px 0; background: #fff; min-height: 135px;}
.product-section .product-card img { width: 50px;}
.product-section .product-card .icon1 { display: none;}
.product-section .product-card p { margin: 10px 0 0 0; font-weight: 500; line-height: 1.3; font-size: 13px;}

.why-choose-us { padding: 7% 0; background: radial-gradient(closest-side, rgba(0, 110, 47, .18), rgba(0, 110, 47, .04));}
.why-choose-us .choose-card { margin: 30px 0; position: relative;}
.why-choose-us .choose-card .icon img{ width: 54px;}
.why-choose-us .choose-card .text h5 {font-family: "PT Serif", serif; font-size: 18px; font-weight: 600;}

.contact-section { padding: 7% 0; background: linear-gradient(90deg,#006e2f 33%,#ffffff 33%);}
.contact-section .contact-bx { background: #fff; padding: 60px; border-radius: 15px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.contact-section .contact-bx .contact-info .icon i{ background: #006e2f; color: #fff; font-size: 17px; text-align: center; line-height: 3; display: inline-block; width: 50px; height: 50px; border-radius: 50%; margin: 0 15px 0 0;}
.contact-section .contact-bx .contact-info { margin: 30px 0;}
.contact-section .contact-bx .contact-info h5 {font-family: "PT Serif", serif; font-size: 18px; font-weight: 600; margin: 0 0 5px 0; }
.contact-section .contact-bx .contact-info p, .contact-section .contact-bx .contact-info p a { color: #212121;}
.contact-section .contact-bx .form-control { margin: 0 0 15px 0; background: #ededed; border: 0; padding: 16px;}
.contact-section .contact-bx .btn { display: inline-block; background: #fdcc0d; color: #111111; padding: 12px 30px; border-radius: 10px; font-size: 14px; font-weight: 500;}

footer { padding: 5% 0 0 0; background: #283734;}
footer .logo a{ font-size: 32px; font-weight: 700; letter-spacing: 1px; color: #d62828; text-transform: uppercase; font-family: 'Noto Serif', serif;}
footer h4 { font-size: 18px; font-weight: 500; margin: 0 0 30px 0; color: #f7f7f7; text-transform: uppercase; letter-spacing: 1px; position: relative;}
footer h4::after { content: ""; position: absolute; width: 40px; height: 3px; background: #006e2f; left: 0; top: 30px;}
footer p { font-size: 14px;}
footer p, footer p a {letter-spacing: .3px; font-size: 14px; color: #dfdfdf;}
footer p a:hover { color: #fdcc0d;}
.footer-bottom { padding: 12px 0; margin: 5% 0 0 0; background: #1d2b28;}
.footer-bottom p, .footer-bottom p a { margin: 0; letter-spacing: .3px; font-size: 14px; color: #dfdfdf;}
.footer-bottom p a:hover { margin: 0;}
footer .social-icon a { display: inline-block; background-color: rgba(255, 255, 1255, .2); font-size: 15px; color: #fff; margin: 0 4px; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 2.8;}
footer .social-icon a:hover { background: #fdcc0d;}

.inner-banner-section { background-image: url(../image/inner-banner.jpg); padding:16% 0 7% 0; background-size: cover; margin-top: -150px;}
.inner-banner-section h2 { color: #fff; font-size: 52px; font-weight: 700; text-transform: uppercase;}
.inner-banner-section p, .inner-banner-section a { color: #fff; font-weight: 600; font-size: 16px;}

.contact-page { background-image: linear-gradient(#fff 50%, #006e2f 50%); padding: 5% 0 7% 0;}
.contact-page .contact-bx { background: #fff; padding: 50px 50px 70px 50px; border-radius: 15px;}
.contact-page .contact-bx .icon { color: #006e2f; display: inline-block; width: 55px; height: 55px; font-size: 21px; text-align: center; line-height: 2.5; background: #e9e9e9; border-radius: 10px;}

.contact-page .contact-bx h5, .contact-page .contact-bx h5 a { color: #141414; font-size: 18px; margin: 0; text-align: left;}
.contact-page .contact-form .form-control {margin: 0 0 15px 0; background: #ededed; border: 0; padding: 16px;}
.contact-page .contact-form .form-control::placeholder { color: #222222;}
.contact-page .contact-form input[type="button"] {display: inline-block; background: #fdcc0d; color: #111111; padding: 12px 30px; border-radius: 10px; font-size: 14px; font-weight: 500; border: 0;}
.contact-page .contact-form input[type="button"]:hover { background: #141414; color: #fff;}

.product-page .product-card{ background: linear-gradient(45deg, #006e2f, #039f46); text-align: center; margin: 10px 0; border-radius: 10px; padding: 20px;}
.product-page .product-card img { margin: 0 0 15px 0; width: 56px;}
.product-page .product-card p { color: #f5f5f5; margin: 0;}
.product-page ul li, .product-page ul {list-style-type: none; margin: 0 0 5px 0; padding: 0; font-size: 15px;}
.product-page ul li i { color: #006e2f; margin: 0 5px 0 0;}

@keyframes fadeInLeft { 
    0%{ opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform:  translateX(0px);}
} 
@keyframes fadeInRight { 
    0%{opacity: 0; transform: translateX(50px); }
    100% { opacity: 1; transform:  translateX(0px);}
} 

@media (min-width: 320px) and ( max-width: 767px) {
    p { font-size: 14px;}
    .heading h4 {font-size: 18px; margin: 0 0 8px 0;}
    .heading h2 { font-size: 30px; margin: 0 0 20px 0;}
    .sub-heading { font-size: 27px; margin: 30px 0 15px 0;}
    .custom-btn { padding: 10px 24px;}
 
    .navbar {  margin: 0; padding: 0; width: 100%; border-radius: 0px; padding: 0;}
    .navbar .navbar-brand img { width: 60px;}
    
    .banner-section { margin-top: 0px;}
    .banner-section .carousel .carousel-caption .text { margin-top: 10%; margin-left: 15%; text-align: center; width: 85%; }
    .banner-section .carousel .carousel-caption h1 {font-size: 21px; margin: 0 0 10px 0;}
    .banner-section .carousel .carousel-caption p {font-size: 15px; font-weight: 500; margin: 0 0 30px 0; }
    .banner-section .carousel-control-next-icon img, .banner-section .carousel-control-prev-icon img { width: 30px; height: 30px;}
    .banner-section .carousel-control-next, .banner-section .carousel-control-prev { opacity: 1 ; width: 50px; top: 5%;}
    .banner-section .carousel-control-next { width: 50px;}

    .about-section { padding: 10% 0 5% 0 ;}
    .about-section .about-pic::after { border: 2px solid #fdcc0d; top: -5px; left: -5px; border-radius: 10px;}
    .about-section .about-pic img { border-radius: 10px; margin: 0 0 20px 0;}

    .product-section { padding: 7% 0; background: radial-gradient(closest-side, rgba(0, 110, 47, .12), #fff);}
    .product-section .product-card {margin: 10px 0 0 0;}
    .product-section .product-img img { margin: 20px 0 0 0;}

    .contact-section .contact-bx { padding: 30px;}
    .contact-section .contact-bx .contact-info .icon i{ font-size: 13px; line-height: 3;width: 40px; height: 40px; margin: 0 10px 0 0;}
    .contact-section .contact-bx .contact-info { margin: 15px 0;}
    .contact-section .contact-bx .form-control { margin: 0 0 10px 0; padding: 12px; font-size: 14px;}

    footer .links a {font-size: 14px; margin: 0 10px;}
    footer h4 { margin: 25px 0 18px 0;}

    .inner-banner-section { padding: 12% 0; margin-top: 0px;}
    .inner-banner-section h2 {font-size: 32px;}
    .inner-banner-section p, .inner-banner-section a { font-size: 14px;}

    .contact-page { padding: 0 0 7% 0;}
    .contact-page .contact-bx { padding: 25px;}
    .contact-page .contact-bx h5, .contact-page .contact-bx h5 a { font-size: 16px;}
}

@media ( min-width: 768px) and (max-width: 1200px) {
    p { font-size: 14px; letter-spacing: .3px; margin: 0 0 10px 0; line-height: 1.6;}
    .heading h4 { font-size: 18px; margin: 0 0 5px 0;}
    .heading h2 { font-size: 27px; margin: 0 0 15px 0;}
    .custom-btn { padding: 10px 24px;}

    /*===================Navigation Menu================*/ 
    .navbar {position: absolute; padding: 0 30px;}

    /*===================Banner Section================*/ 
    .banner-section { margin-top: 0px;}
    .banner-section .carousel .carousel-caption { text-align: left; top: 0; left: 0; padding: 3;}
    .banner-section .carousel .carousel-caption .text { width: 60%;}
    .banner-section .carousel .carousel-caption h1 {font-size: 42px;}
    .banner-section .carousel .carousel-caption p {font-size: 18px; }
    .banner-section .carousel-control-next-icon img, .banner-section .carousel-control-prev-icon img { width: 35px; height: 35px;}
    .banner-section .carousel-control-next, .banner-section .carousel-control-prev { width: 80px;}
    .banner-section .carousel-control-next { width: 80px;}

    .about-section .about-pic::after { width: 95%; height: 95%; border: 4px solid #fdcc0d; top: -25px; left: -25px; border-radius: 20px;}
    .about-section .about-pic img { position: relative; z-index: 3; height: 300px;}

    .product-section { padding: 7% 0;}
    .product-section .product-card { padding: 8px 4px; min-height: 110px;}
    .product-section .product-card img { width: 40px;}
    .product-section .product-card p { margin: 10px 0 0 0; font-weight: 500; line-height: 1.3; font-size: 11px;}

    .why-choose-us .choose-card { margin: 15px 0;}
    .why-choose-us .choose-card .icon img{ width: 35px;}
    .why-choose-us .choose-card .text h5 {font-size: 15px;}

    .contact-section .contact-bx { padding: 40px; border-radius: 15px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
    .contact-section .contact-bx .contact-info .icon i{ background: #006e2f; color: #fff; font-size: 17px; text-align: center; line-height: 3; display: inline-block; width: 50px; height: 50px; border-radius: 50%; margin: 0 15px 0 0;}
    .contact-section .contact-bx .contact-info { margin: 30px 0;}
    .contact-section .contact-bx .contact-info h5 { font-size: 15px; font-weight: 600; margin: 0 0 5px 0;}
    .contact-section .contact-bx .form-control { margin: 0 0 10px 0; padding: 12px; font-size: 14px;}
    .contact-section .contact-bx .btn { display: inline-block; background: #fdcc0d; color: #111111; padding: 12px 30px; border-radius: 10px; font-size: 14px; font-weight: 500;}

    footer .links a {font-size: 14px; margin: 0 10px;}
    footer h4 { margin: 25px 0 18px 0;}

    .inner-banner-section { padding: 23% 0 10% 0; margin-top: 0;}
    .inner-banner-section h2 {font-size: 32px;}
    .inner-banner-section p, .inner-banner-section a { font-size: 14px;}

    .contact-page { padding: 0 0 7% 0;}
    .contact-page .contact-bx { padding: 25px;}
    .contact-page .contact-bx h5, .contact-page .contact-bx h5 a { font-size: 16px;}
}