@import url('https://fonts.googleapis.com/css2?family=Mada:wght@200..900&display=swap');





/* ScrollToTop */



.scrollToTop {

    text-decoration: none;

    cursor: pointer;

    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);

    position: fixed;

    bottom: 0px;

    right: 30px;

    width: 40px;

    height: 40px;

    border-radius: 1px;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

    z-index: 999;

    transition: 1.5s ease;

    border: 2px solid #00903c;

}



.scrollToTop.show {

    left: unset;

    bottom: 50px
}



.scrollToTop.hide {

    left: -50px;

    right: unset;

}



.scrollToTop i {

    color: #fff;

    font-size: 22px;

    padding-left: 9px;

    padding-top: 6px;

}





body {

    color: rgba(56, 56, 56, 1);

    font-family: "Mada", sans-serif;

    font-size: 18px;

}



.contact-head .icon {

    width: 56px;

    height: 56px;

    font-size: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);

    color: #fff;

    border-radius: 100%;

}



.contact-head {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

}



.contact-head .data {

    width: 80%;

}



.contact-head .data h6 {

    font-size: 18px;

}



.navbar-expand-lg .navbar-nav .nav-link {

    color: inherit;

    font-size: 18px;

    font-weight: 600;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

}



.nav-item.active a.nav-link {

    color: rgba(0, 144, 60, 1);

}



section.hero-section {

    background: url(../images/hero-bg-1.png) no-repeat right;

    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, calc(50% - 50px) calc(100% - 40px), 0 calc(100% - 40px));

    padding-top: 239px;

    padding-bottom: 150px;

    background-size: cover;

}



header {

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    z-index: 2;

}





.parallelogram {

    position: relative;

    display: inline-block;

}



.parallelogram:after {

    content: "";

    position: absolute;

    left: -1px;

    right: -1px;

    bottom: -1px;

    top: -1px;

    background: linear-gradient(90deg, #F0F0F0 0%, #1E1E1E 55.29%, #F0F0F0 100%);

    z-index: -1;

    transform: skew(-20deg);

    border-radius: 10px;

}



.parallelogram .parallelogram-inner {

    transform: skew(-20deg);

    border-radius: 10px;

    position: relative;

    z-index: 2;

    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 1;

}



.parallelogram .text {

    transform: skew(-0deg);

    padding: 10px 21px;

    font-size: 18px;

    font-weight: 600;

    display: block;

    color: #fff;

    z-index: 2;

    position: relative;

}



.hero-section h2 {

    font-size: 44px;

    font-weight: 700;

}



.hero-section p {

    max-width: 528px;

    margin-top: 30px;

    margin-bottom: 30px;

}



.carousel-indicators {

    position: relative;

}



.carousel-indicators .active {

    background-color: rgb(1 104 39);

}



.carousel-indicators li {

    position: relative;

    -ms-flex: 0 1 auto;

    flex: 0 1 auto;

    width: 10px;

    height: 10px;

    margin-right: 3px;

    margin-left: 3px;

    text-indent: -999px;

    cursor: pointer;

    background-color: rgb(1 104 39 / 40%);

    border-radius: 100%;

}



.about-img .img2 {

    position: absolute;

    top: -10%;

    left: -10%;

    max-width: 40%;

}



.about-img .img1 {

    position: absolute;

    bottom: -10%;

    left: -10%;

    max-width: 40%;

}



.about-img .mainimg {

    position: relative;

    z-index: 1;

}



.about-img {

    margin-left: 10%;

    position: relative;

}



.pd-100 {

    padding-top: 100px;

    padding-bottom: 100px;

}



h2.home-title {

    font-size: 48px;

    font-weight: 700;

    color: rgba(0, 144, 60, 1);

}



h2.home-title span:before {

    position: absolute;

    content: "";

    width: 65px;

    height: 2px;

    background: rgba(159, 159, 159, 1);

    top: 60%;

    left: 110%;

}



h2.home-title span:after {

    position: absolute;

    content: "";

    width: 98px;

    height: 2px;

    background: rgba(159, 159, 159, 1);

    top: 30%;

    left: 110%;

}



.home-title span {

    position: relative;

}



.product-categories .item {

    padding-top: 30px;

    padding-bottom: 30px;

}



.cate-box {

    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);

    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);

    color: #fff;

    border-radius: 20px;

    position: relative;

}



.cate-content {

    position: absolute;

    left: 0;

    top: 0;

    padding: 15px;

}



.cate-content h3 {

    font-size: 24px;

    font-weight: 700;

}



.cate-content a i {

    font-size: 15px;

    margin-left: 5px;

}



.cate-content a {

    font-size: 18px;

    font-weight: 400;

}



.owl-theme .owl-nav [class*=owl-]:hover {

    background: transparent;

    color: #000;

    text-decoration: none;

}



button:focus {

    outline: 0;

}



.owl-carousel .owl-item img {

    width: auto;

}



.home {

    overflow-x: hidden;

}



section.product-cat-section {
    background: url(../images/product-bg.png) no-repeat;
}


.product-content a {

    text-align: center;

    margin: auto;

    display: block;

}


.product-content h3 {
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    min-height: 57px;
}



.product-box img {

    margin: auto;

    margin-top: -104px;

}



.products .item {

    padding: 5px;

    padding-top: 20px;

    padding-bottom: 20px;

    /* padding: 5px; */

}



.product-box {
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    padding-top: 65px;
    margin-top: 60px;
    border-radius: 20px;
    min-height: 289px;
}



.product-content a {

    color: rgba(0, 144, 60, 1) !important;

}



.product-content {

    padding: 30px 15px;

}



.product-box:hover .product-content a {

    color: #fff !important;

}



.product-box:hover {

    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);

    color: #fff;

}



.owl-theme .owl-dots .owl-dot.active span,

.owl-theme .owl-dots .owl-dot:hover span {

    background: rgba(0, 144, 60, 1);

}



.get-in-touch {

    position: relative;

}



@media (min-width:992px) {

    .get-in-touch:before {

        background: url(../images/pattern-bg.png) top center;

        position: absolute;

        left: 0;

        top: 30%;

        width: 40%;

        bottom: 30%;

        content: "";

        max-width: 486px;

    }



}



footer {

    background: linear-gradient(0deg, #00903C, #00903C), linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);

    color: #fff;

}



footer a,

footer a:hover {

    color: #fff;

}



.pd-50 {

    padding-top: 50px;

    padding-bottom: 50px;

}



footer .d-flex i {

    margin-top: 4px;

}



footer .social-links {

    display: flex;

    gap: 10px;

}



footer .social-links i {

    font-size: 30px;

}



.copysection {

    text-align: center;

    font-size: 14px;

    border-top: 1px solid #fff;

    padding-top: 10px;

    padding-bottom: 10px;

}



.pattern-1 {

    position: absolute;

    right: 10%;

    top: 35%;

    animation: floatUp 5s linear infinite, sway 5s ease-in-out infinite;

}



.banner img {

    max-height: 400px;

    width: 100%;

    object-fit: cover;

    clip-path: polygon(0 0, 100% 0, 100% 100%, 23% 100%, calc(25% - 50px) calc(100% - 60px), 0 calc(100% - 60px));

}



.banner {

    position: relative;

}



.banner-content ul.list-inline {

    /* clip-path: polygon(0 0, calc(100% - 30px) 0%, 100% 120%, 0% 120%); */

    padding-right: 67px;

    /* background: #fff; */

    height: 60px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 0;

}



.banner-head {

    position: absolute;

    left: 0;

    top: 89px;

    right: 0;

    bottom: 0;

    display: flex;

    align-items: center;

}



.banner-content-area {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 2;

    color: #fff;

}



.banner-content-area a {

    color: #d2aa5e;

}



.banner-content-area i.fa-solid.fa-chevron-right {

    color: #d2aa5e;

    font-size: 13px;

}



ul.list-inline {

    font-size: 19px;

}

.banner:after {

    position: absolute;

    left: -18px;

    height: 60px;

    width: 50%;

    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);

    content: "";

    bottom: 0;

    /* clip-path: polygon(0 0, calc(100% - 30px) 0%, 100% 120%, 0% 120%); */

    transform: skew(20deg);

    border-radius: 10px;

    min-width: 301px;

}

.location-map {

    margin-bottom: -10px;

}



.form-control {

    background: #f7f7f7;

    border: none;

    color: #121212;

    margin-bottom: 30px;

    width: 100%;

    padding: 4px 11px;

    font-size: 15px;

    min-height: 50px;

}



.address {

    display: flex;

    gap: 10px;

}



.address .info {

    width: 80%;

}



.address .contact-icon {

    width: 60px;

}



.address {

    display: flex;

    gap: 20px;

    align-items: center;

    margin-bottom: 30px;

}



.address a {

    color: inherit;

    text-decoration: none;

}



.address p {

    margin-bottom: 0;

}



.address h5 {

    font-weight: bold;

}



button.g-recaptcha.btn {

    padding: 0;

    background: transparent;

}



.btn.focus,

.btn:focus {

    outline: 0;

    box-shadow: unset;

}



.address {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 50px;
}



.contact-us-page .social-links a {

    color: #00903c;

    font-size: 37px;

    margin-right: 20px;

}

.product-wrapper {
    margin-bottom: 30px;
}

.product-wrapper img {

    margin-left: auto;

    margin-right: auto;

}

.product-wrapper .product-box {

    padding-top: 0px;

    text-align: center;

    margin-top: 150px;

}

a,
a:hover {

    color: inherit;

    text-decoration: none;

}

.dropdown-item.active,
.dropdown-item:active {

    color: #006123;

    text-decoration: none;

    background-color: transparent;

}

a.dropdown-item {

    font-size: 18px;

    font-weight: 600;

}

.feat-box {
    background: #f3f3f3;
    padding: 30px;
    min-height: 355px;
    border-radius: 20px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.feat-box li:before {
    content: "";
    width: 31px;
    height: 39px;
    background: url(../images/feoso-fav.png) no-repeat;
    position: absolute;
    top: 0px;
    left: -41px;
    bottom: 0;
    z-index: 999;
    background-size: contain;
}

.feat-box li {
    position: relative;
    line-height: 2.2;
    list-style: none;
}

.feat-box h3 {
    font-weight: 700;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #fff;
    background-color: #f3f3f3;
    border-color: #dee2e6 #dee2e6 #fff;
    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);
}

@keyframes floatUp {

    0% {

        transform: translateY(100vh);

    }



    100% {

        transform: translateY(-300px);

    }

}



@keyframes sway {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(50px);

    }

}





@media (min-width: 1200px) {

    .container {

        max-width: 1300px;

    }

}

@media (max-width:1199px) {
    .banner:after {
        width: 80%;
    }

    h2.home-title {
        font-size: 38px;
    }
}


@media (max-width:991px) {



    nav.navbar.navbar-expand-lg,

    .navbar-toggler {

        padding: 0;

        float: right;

    }



    section.hero-section {

        padding-top: 139px;

        padding-bottom: 50px;

    }



    .about-section .right-content {

        margin-top: 80px;

    }



    .pd-100 {

        padding-top: 50px;

        padding-bottom: 50px;

    }



    .about-img-wrapper {
        max-width: 400px;
        margin-bottom: 0px;
        margin: auto;
        margin-bottom: 30px;
    }

    .get-in-touch img {
        margin-bottom: 20px;
    }

}


div#page {
    overflow: hidden;
}

li.mm-listitem {
    color: #FFF;
}

.mm-btn:after,
.mm-btn:before {
    border-color: rgb(253 253 253 / 100%);
}

.mm-navbar {
    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);
    color: #fff;
}

.mm-panel:not(.mm-hidden) {
    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);
}

footer .d-flex {
    gap: 10px;
}

.product-detail-slide .carousel-indicators li {
    width: 50px;
    height: 50px;
    text-indent: 1px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
}

.product-detail-slide .carousel-indicators .active {
    background: linear-gradient(270deg, #004213 0%, #00903C 49.52%, #004213 100%);
}

.product-detail .nav-tabs {
    margin-top: 50px;
}

.product-detail h2.home-title {
    font-size: 40px;
}
button.navbar-toggler, .nav-tabs .nav-link {
    color: #000;
    cursor: pointer;
}
.mm-listitem__text:has(.active) {
    background: rgba(255, 255, 255, .4);
    background: var(--mm-color-background-emphasis);
}

@media(max-width:991px){
     .feat-box ul {
    margin: 0;
}
}
@media (max-width:767px) {
    .feat-box {
    background: #f3f3f3;
    padding: 20px 10px;
    }
    .feat-box h3 {
    font-size: 17px;
    }
   
    body {
        font-size: 15px;
    }

    section.hero-section {
        padding-top: 139px;
        padding-bottom: 50px;
        clip-path: unset;
    }


    .carousel-indicators {
        position: relative;
        margin-top: 20px;
    }

    .hero-section h2 {
        font-size: 23px;
        font-weight: 700;
    }

    .hero-section p {
        max-width: 528px;
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .parallelogram .text {
        padding: 10px 17px;
        font-size: 15px;
    }

    .about-section .right-content {

        margin-top: 80px;

    }



    h2.home-title {

        font-size: 28px !important;

    }



    .pd-100 {

        padding-top: 30px;

        padding-bottom: 30px;

    }

    ul.list-inline {
        font-size: 13px;
        flex-wrap: wrap;
    }

       .banner img {
        height: 200px;
    }

    h1.ph-title {
        font-size: 25px;
    }

    .banner:after {
        width: 100%;
    }

    .address {
        margin-bottom: 20px;
    }

    .contact-us-page .social-links a {
        color: #00903c;
        font-size: 30px;
        margin-right: 20px;
        margin-bottom: 20px;
        display: inline-block;
    }

    .form-group {
        margin-bottom: 0;
    }

    .input-group {
        margin-bottom: 20px;
    }

    iframe {
        max-height: 300px;
    }

    .h4,
    h4 {
        font-size: 1.3rem;
    }

    .address .contact-icon {
        width: 40px;
    }
    h1.ph-title {
    display: none;
}
.banner-content ul.list-inline {
    /* clip-path: polygon(0 0, calc(100% - 30px) 0%, 100% 120%, 0% 120%); */
    padding-right: 0px;
    justify-content: flex-start;
}

}