// Banner Section 
.banner-outer-section {
    margin-top: 158px;

    @media(max-width: 1599px) {
        margin-top: 129px;
    }

    @media(max-width: 1199px) {
        margin-top: 83px;
    }

    .banner-bg {
        background-repeat: no-repeat;
        background-position: top;
        background-size: 100% 87%;

        @media(max-width: 767px) {
            background-size: cover;
            background-image: unset !important;
            position: relative;
            z-index: 1;

            &::before {
                width: 100%;
                height: 85%;
                content: "";
                z-index: -1;
                background-image: url(../assets/images/about/about-banner.jpg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                position: absolute;
                left: 0;
                top: 0;
            }
        }

        .banner-inner-section {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            min-height: 350px;

            @media(max-width: 1199px) {
                min-height: 100%;
            }

            @media(max-width: 767px) {
                flex-direction: column;
                align-items: flex-start;
                padding-top: 50px;
            }

            .banner-content {
                padding-bottom: 4%;

                @media(max-width: 767px) {
                    padding-bottom: 50px;
                }

                h2 {
                    font-family: $font-bricolage;
                    font-size: 60px;
                    color: $white;
                    margin-bottom: 0;

                    @media(max-width: 767px) {
                        font-size: 28px !important;
                    }
                }
            }

            .banner-image {
                padding-right: 50px;
                margin-top: 50px;

                @media(max-width: 767px) {
                    text-align: center;
                    margin-top: 0;
                    padding-right: 0;
                    width: 100%;
                }

                img {
                    width: 100%;
                    max-width: 639px;
                    animation: topbottom 4s linear infinite;

                    @media(max-width: 1199px) {
                        max-width: 500px;
                    }

                    @media(max-width: 767px) {
                        max-width: 300px;
                    }
                }
            }
        }
    }

    .products-banner-bg {
        &::before {
            background-image: url(../assets/images/products/products-banner.jpg) !important;
        }
    }

    .process-banner-bg {
        &::before {
            background-image: url(../assets/images/process/our_process_hero_back.jpg) !important;
        }
    }

    .faqs-banner-bg {
        &::before {
            background-image: url(../assets/images/faqs/faq-banner.jpg) !important;
        }
    }

    .contact-banner-bg {
        &::before {
            background-image: url(../assets/images/contact/contact-banner.jpg) !important;
        }
    }
}

.banner-outer-section .process-banner-bg .banner-inner-section .banner-image img {
    @media(max-width: 767px) {
        max-width: 250px;
    }
}

.left-right-content-section {
    .left-right-inner {
        display: grid;
        grid-template-columns: 1fr 1.7fr;
        align-items: center;
        gap: 50px;
        padding: 100px 0;

        @media(max-width: 767px) {
            padding: 70px 0;
            grid-template-columns: 1fr;
        }

        .left-content {
            h2 {
                font-family: $font-bricolage;
                font-size: 45px;
                color: #2d6d3b;
                margin-bottom: 15px;
                font-weight: 400;

                @media(max-width: 767px) {
                    font-size: 28px !important;
                }

                span {
                    color: #b8cf63;
                    font-weight: 600;
                }
            }

            .content-para {
                p {
                    color: #515151;
                    font-family: $font-bricolage;
                    font-size: 35px;
                    font-style: italic;
                    line-height: 120%;
                    margin-bottom: 0;
                    padding-left: 27px;
                    position: relative;
                    z-index: 1;

                    @media(max-width: 767px) {
                        font-size: 20px !important;
                    }

                    b {
                        font-weight: 500;
                    }

                    &::before {
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        content: '';
                        width: 5px;
                        height: 100%;
                        background-color: #d4ba4c;
                    }
                }
            }
        }

        .right-content {
            p {
                font-size: 18px;
                color: #515151;
                margin-bottom: 30px;
                max-width: 97%;

                @media(max-width: 767px) {
                    max-width: 100%;
                }

                b {
                    font-weight: 600;
                }

                &:last-child {
                    margin-bottom: 0;
                }

                br {
                    @media(max-width: 767px) {
                        display: none;
                    }
                }
            }
        }
    }
}

.dried-fruits-left-right-content-section {
    .left-right-inner {
        grid-template-columns: 1fr 1fr;
        align-items: flex-end;

        @media(max-width: 767px) {
            grid-template-columns: 1fr;
        }

        .left-content {
            h2 {
                margin-bottom: 45px;

                @media(max-width: 767px) {
                    margin-bottom: 15px;
                }
            }
        }

        .right-content {
            p {
                max-width: 100%;
            }
        }
    }
}

// Green Life Section 
.green-life-section {
    .bg-wrapper {
        background-position: center right;
        background-size: cover;
        background-repeat: no-repeat;

        .green-life-inner {
            padding: 100px 0;
            max-width: 47%;
            margin-left: auto;

            @media(max-width: 767px) {
                max-width: 100%;
                padding: 70px 0;
            }

            h4 {
                font-size: 25px;
                font-family: $font-bricolage;
                color: #272727;

                @media(max-width: 767px) {
                    font-size: 15px !important;
                }
            }

            h2 {
                color: #2d6d3b;
                font-size: 45px;
                font-family: $font-bricolage;
                margin-bottom: 20px;
                font-weight: 600;

                @media(max-width: 767px) {
                    font-size: 28px;
                }
            }

            p {
                color: #515151;
                font-size: 18px;

                br {
                    @media(max-width: 767px) {
                        display: none;
                    }
                }

                b {
                    font-weight: 600;
                    // color: $black;
                }
            }

            .text-para-content {
                @media(max-width: 767px) {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    padding-top: 15px;
                }

                .box-wrapper {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 15px;

                    @media(max-width: 767px) {
                        align-items: flex-start;
                    }

                    &:last-child {
                        @media(max-width: 767px) {
                            margin-bottom: 0;
                        }
                    }

                    h3 {
                        color: $black;
                        background-color: #b8cf63;
                        font-family: $font-bricolage;
                        font-size: 25px;
                        padding: 5px;
                        width: 95px;
                        height: 95px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;

                        @media(max-width: 767px) {
                            width: 66px;
                            height: 66px;
                            font-size: 15px !important;
                        }
                    }

                    p {
                        width: calc(100% - 110px);
                        color: #515151;
                        font-size: 18px;
                        margin-bottom: 0;

                        @media(max-width: 767px) {
                            width: calc(100% - 81px);
                            padding-top: 5px;
                        }
                    }
                }
            }
        }
    }
}

// Green Life Section 

.about-purpose-vision-mission-wrapper {
    padding-top: 100px !important;

    @media(max-width: 767px) {
        padding-top: 70px !important;
    }
}

.text-bg-wrapper .about-purpose-vision-mission-wrapper .purpose-vision-mission-inner .box-wrapper .inner-wrapper .para-content p {
    max-width: 100%;
}

// Core Values Section 
.core-values-section {
    padding-bottom: 85px;

    @media(max-width: 767px) {
        padding-bottom: 70px;
    }

    .core-values-inner {
        .top-content {
            text-align: center;
            margin-bottom: 50px;

            h4 {
                font-family: $font-bricolage;
                color: #2d6d3b;
                font-size: 25px;

                @media(max-width: 767px) {
                    font-size: 15px !important;
                }
            }

            h2 {
                font-family: $font-bricolage;
                font-size: 45px;
                color: #2d6d3b;
                margin-bottom: 20px;

                @media(max-width: 767px) {
                    font-size: 28px !important;
                }

                span {
                    color: #b8cf63;
                }
            }

            .content-para {
                p {
                    color: #515151;
                    font-size: 18px;
                    margin-bottom: 0;

                    br {
                        @media(max-width: 767px) {
                            display: none;
                        }
                    }
                }
            }
        }

        .core-value-box-wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;

            @media(max-width: 1024px) {
                grid-template-columns: 1fr 1fr;
            }

            @media(max-width: 767px) {
                grid-template-columns: 1fr;
            }


            .box-wrapper {
                margin-bottom: 20px;

                &:last-child {
                    margin-bottom: 0;
                }

                .inner-wrapper {
                    display: flex;
                    flex-direction: row;
                    gap: 15px;

                    .icon-wrapper {
                        img {
                            width: 83px;

                            @media(max-width: 767px) {
                                width: 80px;
                            }
                        }
                    }

                    .right-content {
                        margin-top: 18px;

                        h3 {
                            color: $black;
                            font-size: 25px;
                            font-family: $font-bricolage;
                            margin-bottom: 20px;
                        }

                        p {
                            line-height: 150%;
                            margin-bottom: 0;
                            color: #515151;
                            max-width: 88%;
                        }
                    }
                }
            }
        }
    }
}

// Core Values Section 

// Team Section 
.team-section {
    background-color: #f9f6e0;
    padding: 100px 0;

    @media(max-width: 767px) {
        padding: 70px 0;
    }

    .team-inner {
        .top-section {
            text-align: center;
            margin-bottom: 30px;

            h2 {
                color: #2d6d3b;
                font-size: 45px;
                font-family: $font-bricolage;
                margin-bottom: 20px;

                @media(max-width: 767px) {
                    font-size: 28px !important;
                }

                span {
                    color: #b8cf63;
                }
            }

            p {
                color: #515151;
                font-size: 18px;
                margin-bottom: 0;

                br {
                    @media(max-width: 767px) {
                        display: none;
                    }
                }
            }
        }

        .team-box-wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;

            @media(max-width: 767px) {
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }

            .box-wrapper {
                .inner-wrapper {
                    text-align: center;

                    .image-wrapper {
                        border-radius: 15px;
                        overflow: hidden;


                        img {
                            width: 100%;
                            border-radius: 15px;
                            transition: 0.5s ease-in-out;
                        }

                        &:hover {
                            img {
                                transform: scale(1.1);
                            }
                        }
                    }

                    h6 {
                        margin-bottom: 0;
                        margin-top: 15px;
                        font-family: $font-bricolage;
                        font-size: 20px;
                        color: #2d6d3b;

                        @media(max-width: 767px) {
                            font-size: 15px !important;
                        }
                    }

                    p {
                        margin-bottom: 0;
                        color: #515151;
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

// Team Section 