@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
    --green: #568629;
    --greenhover: #466d21;
}

body {
    font-family: "Open Sans", sans-serif;
}

.btn-theme1 {
    background-color: var(--green);
    padding: 0.5rem 2rem;
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
    transition: all ease 300ms;
}

.btn-theme1:hover {
    background-color: var(--greenhover);
    color: #fff;
}

header {
    background-color: var(--green);
    position: sticky;
    top: 0;


    .navbar {
        .navbar-nav {
            .nav-item {
                .nav-link {
                    color: #fff;
                    text-transform: uppercase;
                    padding-left: 1.5rem;
                    padding-right: 1.5rem;
                }

                .nav-link.active {
                    color: #000000;
                }
            }
        }
    }
}

.hero {
    .hero-bg1 {
        background-color: #ccc;
        background-image: url(img/hero-bg1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 300px;
    }

    .hero-txt-cont {
        background-color: #4F3C3C;
        padding: 5% 2rem;

        .hero-txt {
            color: #fff;

            h4 {
                font-size: 2rem;
            }

            p {
                font-size: 1.2rem;
            }
        }
    }
}

.practices {
    padding: 5% 0;
    text-align: center;

    .practice-cont {
        align-items: center;
        justify-content: center;

        h2 {
            text-transform: uppercase;
            font-weight: 700;
        }
    }
}

.products {
    padding: 1rem 0 3rem 0;
    text-align: center;

    h2 {
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .product-carousel-cont {
        justify-content: center;
        margin-bottom: 2rem;

        .products-owlcarousel {
            .item {
                text-align: center;

                a {
                    text-decoration: none;
                }

                h5 {
                    padding: 0.6rem 0.5rem;
                    color: #fff;
                    font-size: 0.9rem;
                }

                .wildcoffee {
                    background-color: #4F3C3C;
                }
            }

            .owl-nav {
                position: absolute;
                top: 25%;
                width: 100%;

                .owl-next,
                .owl-prev {
                    position: absolute;
                    color: #e0e0e0;
                    font-size: 5.5rem;
                    padding: 0;
                }

                .owl-next:hover,
                .owl-prev:hover {
                    color: #a1a1a1;
                    padding: 0;
                    background: transparent;
                }

                .owl-prev {
                    left: -4.2rem;

                    i {
                        transition: all ease 500ms;
                    }
                }

                .owl-next {
                    right: -4.2rem;

                    i {
                        transition: all ease 500ms;
                    }
                }
            }
        }
    }
}

footer {
    background-color: #ededed;
    padding: 2rem 0;
    color: #7f8084;

    a {
        color: #7f8084;
        text-decoration: none;
        transition: all ease 300ms;
    }

    a:hover {
        color: #696a6d;
    }

    h6 {
        text-transform: uppercase;
        margin-bottom: 1rem;
        font-weight: 600;
    }

    .contact-cont {
        text-align: center;
        margin-bottom: 2rem;

        .contact-itm {
            strong {
                font-weight: 500;
                text-transform: uppercase;
            }

            i {
                margin-right: 0.5rem;
            }
        }
    }

    .socialies-cont {
        text-align: center;
        margin-bottom: 2rem;

        a {
            font-size: 1.5rem;
            margin-right: 0.5rem;
        }
    }

    .sitemap-cont {
        text-align: center;
        margin-bottom: 2rem;

        .sitemap-itm {
            ul {
                margin: 0;
                padding: 0;

                li {
                    list-style: none;
                    margin-bottom: 0.3rem;
                }
            }
        }
    }

    .crr {
        text-align: center;
        font-size: 0.9rem;
    }
}

.pagebanner {
    width: 100%;
    height: 260px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;

    .title {
        h1 {
            color: #fff;
            text-transform: uppercase;
            font-weight: 600;
            text-shadow: 1px 2px 3px rgba(0, 0, 0, .6);
        }

        .breadcrumb {
            .breadcrumb-item {
                text-transform: uppercase;
                font-size: 0.8rem;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);

                a {
                    color: #dedede;
                    text-decoration: none;
                    font-weight: 600;
                }
            }

            .breadcrumb-item.active {
                color: #fff;
            }
        }

        .breadcrumb-item+.breadcrumb-item::before {
            color: #ccc;
        }
    }
}

.products-page {
    padding: 3rem 0;

    .product-itm-cont {
        margin-bottom: 1.5rem;
        text-align: center;

        a {
            text-decoration: none;
        }

        h5 {
            padding: 0.6rem 0.5rem;
            color: #fff;
            font-size: 1.1rem;
            margin-bottom: 0;
        }

        .wildcoffee {
            background-color: #4F3C3C;
        }
    }
}

.product-page {
    padding: 3rem 0;

    .product-cont {
        justify-content: center;

        .product-desc-cont {
            display: flex;
            align-items: center;
            font-weight: 600;

            .product-desc {
                h2 {
                    text-transform: uppercase;
                    color: #4E2E31;
                    font-weight: 700;
                }
            }
        }
    }
}

.our-story-page {
    padding: 3rem 0 0 0;

    h3 {
        text-transform: uppercase;
        font-weight: 700;
    }
}
.our-story-page.intro-cont{
    margin-bottom: 2rem;
}
.our-story-page.founder-cont {
    background-color: #ccc;
    padding-top:0;
    .founder-txt-cont {
        display: flex;
        align-items: center;
    }
}
.our-story-page.vision-mission-cont{
    margin-bottom: 2rem;
}
.our-story-page.labugolla-cont{
    background-image: url(img/labugolla-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5rem 0;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
.our-story-page.sustain-quality-cont{
    margin-bottom: 2rem;
}

.contact-us-page {
    padding: 3rem 0;

    h5 {
        text-transform: uppercase;
        margin-bottom: 1rem;
    }

    .contact-us-itm {
        h6 {
            margin-bottom: 0;
            font-weight: 600;
        }

        p {
            color: #7f8084;
        }

        a {
            color: #7f8084;
            text-decoration: none;
            transition: all ease 300ms;
        }

        a:hover {
            color: #000;
        }

        .socialies-cont {
            margin-bottom: 2rem;

            a {
                font-size: 1.5rem;
                margin-right: 0.5rem;
            }
        }
    }
}

@media (min-width: 992px) {
    .hero {
        .hero-bg1 {
            height: auto;
        }

        .hero-txt-cont {
            padding: 14% 4rem;
        }
    }

    footer {

        .contact-cont {
            display: flex;
            margin-bottom: 0;
            text-align: left;
        }

        .socialies-cont {
            text-align: center;
            margin-bottom: 0;
        }

        .sitemap-cont {
            display: flex;
            justify-content: center;
            margin-bottom: 0;
            text-align: left;
        }
    }
}