@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.page-title .base { color:red; }
.breadcrumbs { display: none !important; }
.category-view {padding:10px 0 0 0 !important;}

.b-eco .top { 
    background-image: url('../images/sustainability/b-EcoProductRange.png');
    background-position: center -200px;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 15px;
    font-family: poppins;
}

.b-eco .top .logo { text-align: center; color:white; font-size: 30px; padding-top: 50px; top: 10%; position: relative; }
.b-eco .top .logo p { font-size: 22px;font-weight: bold;}

.b-eco .top .logo img.prod-range {width: 48%;}

.b-eco .top .intro {
    background-color: #fff;
    border-radius: 15px 15px 0 0;
    color: black;
    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.8;
    padding-bottom: 1rem;
    width: 100%;
}



.b-eco .top .intro p { padding: 75px 100px; }
.b-eco .beco-logo-dark {width:260px;}
.b-eco .drop-icon { height:40px; }
.b-eco .round-icon img { height:60px; }
.b-eco .concentrate-icon { padding-left:20px; }
.b-eco .product .order-code {display: block !important;}
.b-eco .product a.order-code:hover {background-color: #D75D73 !important; color: #fff !important;text-decoration: none !important;}

.b-eco .product1 {font-family: poppins;color: white;display: flex;margin:0 auto 0 auto;background: #00735C 0% 0% no-repeat padding-box;border-radius: 0px 399px 399px 0px;opacity: 1;width: 100%;}
.b-eco .product1 .product-description { font-family: Lato; font-size:16px; font-weight:bolder; border:none;width:85%; margin-bottom:0;}
.b-eco .product1 .left { width: 40%; padding: 30px 70px; }
.b-eco .product1 .left .nameicon { padding-top:13px;margin-bottom:0; }
.b-eco .product1 .left .product-name {font-weight: 700; font-size: 38px; padding-right:15px;}
.b-eco .product1 .right img {height: 560px;}
.b-eco .product1 .left .leftright {display: flex;}
.b-eco .product1 .bottom-description { font-family: poppins;font-weight: 700;font-size: 17px; }
.b-eco .product1 .left .leftright .order-code { font-family: poppins; color: #00735C; border-radius: 40px; background-color: #fff; padding:20px;font-weight: 700; margin-right:50px !important;}


.b-eco .product2 {font-family: poppins;color: #212121;display: flex;margin:0 auto 0 auto;background: #B1D8B7 0% 0% no-repeat padding-box;border-radius: 399px 0px 0px 399px;opacity: 1;width: 100%;}
.b-eco .product2 .product-description { font-family: Lato; font-size:16px; font-weight:bolder; border:none;width:85%; margin-bottom:0;}
.b-eco .product2 .left { width:44%; padding-left:80px; }
.b-eco .product2 .right { width: 47%; padding: 30px 0px; }
.b-eco .product2 .right .nameicon { padding-top:13px;margin-bottom:0; }
.b-eco .product2 .right .product-name {font-weight: 700; font-size: 38px; padding-right:15px;}
.b-eco .product2 .left img {height: 560px;}
.b-eco .product2 .right .leftright {display: flex;}
.b-eco .product2 .bottom-description { font-family: poppins;font-weight: 700;font-size: 17px; }
.b-eco .product2 .right .leftright .order-code { font-family: poppins; color: #B1D8B7; border-radius: 40px; background-color: #fff; padding:20px;font-weight: 700; margin-right:50px !important;}

.b-eco .product3 {font-family: poppins;color: white;display: flex;margin:0 auto 0 auto;background: #0097B2 0% 0% no-repeat padding-box;border-radius: 0px 399px 399px 0px;opacity: 1;width: 100%;}
.b-eco .product3 .product-description { font-family: Lato; font-size:16px; font-weight:bolder; border:none;width:85%; margin-bottom:0;}
.b-eco .product3 .left { width: 41%; padding: 30px 70px; }
.b-eco .product3 .left .nameicon { padding-top:13px;margin-bottom:0; }
.b-eco .product3 .left .product-name {font-weight: 700; font-size: 32px; padding-right:15px;}
.b-eco .product3 .right img {height: 560px;}
.b-eco .product3 .left .leftright {display: flex;}
.b-eco .product3 .bottom-description { font-family: poppins;font-weight: 700;font-size: 17px; }
.b-eco .product3 .left .leftright .order-code { font-family: poppins; color: #0097B2; border-radius: 40px; background-color: #fff; padding:20px;font-weight: 700; margin-right:50px !important;}

.b-eco .product4 {font-family: poppins;color: #212121;display: flex;margin:0 auto 0 auto;background: #81C3C9 0% 0% no-repeat padding-box;border-radius: 399px 0px 0px 399px;opacity: 1;width: 100%;}
.b-eco .product4 .product-description { font-family: Lato; font-size:16px; font-weight:bolder; border:none;width:85%; margin-bottom:0;}
.b-eco .product4 .left { width:44%; padding-left:80px; }
.b-eco .product4 .right { width: 47%; padding: 30px 0px; }
.b-eco .product4 .right .nameicon { padding-top:13px;margin-bottom:0; }
.b-eco .product4 .right .product-name {font-weight: 700; font-size: 38px; padding-right:15px;}
.b-eco .product4 .left img {height: 560px;}
.b-eco .product4 .right .leftright {display: flex;}
.b-eco .product4 .bottom-description { font-family: poppins;font-weight: 700;font-size: 17px; }
.b-eco .product4 .right .leftright .order-code { font-family: poppins; color: #81C3C9; border-radius: 40px; background-color: #fff; padding:20px;font-weight: 700; margin-right:50px !important;}

.b-eco .product5 {font-family: poppins;color: white;display: flex;margin:0 auto 0 auto;background: #FF5757 0% 0% no-repeat padding-box;border-radius: 0px 399px 399px 0px;opacity: 1;width: 100%;}
.b-eco .product5 .product-description { font-family: Lato; font-size:16px; font-weight:bolder; border:none;width:85%; margin-bottom:0;}
.b-eco .product5 .left { width: 41%; padding: 30px 70px; }
.b-eco .product5 .left .nameicon { padding-top:13px;margin-bottom:0; }
.b-eco .product5 .left .product-name {font-weight: 700; font-size: 32px; padding-right:15px;}
.b-eco .product5 .right img {height: 560px;}
.b-eco .product5 .left .leftright {display: flex;}
.b-eco .product5 .bottom-description { font-family: poppins;font-weight: 700;font-size: 17px; }
.b-eco .lr-right .round-icon img {margin-top:0px;}
.b-eco .product5 .left .leftright .order-code { font-family: poppins; color: #FF5757; border-radius: 40px; background-color: #fff; padding:10px 20px;font-weight: 700; margin-right:50px !important;margin-bottom:5px;}

.b-eco .why-b-eco { margin-top:100px; }
.b-eco .why-b-eco .heading {text-align: center;margin-bottom:35px;}
.b-eco .why-b-eco .heading img {width: 375px;}
.b-eco .why-b-eco .why-be-eco-wrapper { font-family: Lato;display: flex; width: 80%; margin: auto;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-left {color: #043233; width:40%;border-right: 1px solid #043233;padding:30px 30px 30px 90px;font-size: 16px;font-weight: 400;text-align: justify;text-justify: inter-word;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right {width:48%;font-size: 16px;font-weight: 700;padding-top: 20px;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet {float:left;}

.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right li {clear: both; list-style-type: none; padding-bottom:50px;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number {font-family: poppins; font-weight: 700;  border-radius: 50%; width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 20px; margin-right: 20px; }
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.desc { line-height: 40px;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number.one {background-color: #00735C; color: #043233;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number.two {background-color: #B1D8B7; color: #043233;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number.three {background-color: #0097B2; color: #043233;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number.four {background-color: #81C3C9; color: #043233;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number.five {background-color: #FF5757; color: #043233;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number.six {background-color: #78A831; color: #043233;}
.b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number.seven {background-color: #92C730; color: #043233;}

.b-eco .related-products { width:80%;margin:auto; background-color: #fff; border-radius: 30px;z-index:400;padding-bottom:60px;}
.b-eco .related-products h4 {font-family: Lato;font-size: 24px;color: #043233;text-align: center;margin-top: 50px;margin-bottom:60px;}
.b-eco .related-products h4 {display: grid;grid-template-columns: 1fr max-content 1fr;align-items: center;gap: 2.7rem;}
.b-eco .related-products h4:before,
.b-eco .related-products h4:after {content: '';height: 1px;background-color: #043233;}

.b-eco .related-products .home-categories__listing { width:93%;}

.b-eco .view-all { text-align: center; margin-top: 50px; }
.b-eco .view-all a { font-family: Lato; background-color: #D75D73; border-radius: 20px; color: #fff; padding:10px 40px;font-weight: 700; font-size:16px;display:block; width:200px; margin:-69px auto 0 auto;}

.catalog-category-view .banner-testimonials {margin-block-start:0px !important;z-index: -1;}

.b-eco .grey-box { height:370px;background-color: #E8E8E8; border-radius: 30px;margin-top:-250px;position:relative;z-index: -1;}

.b-eco .product img { object-fit: contain; }

.b-eco-wrapper { max-width: 137rem; margin-inline: auto;}
.b-eco-wrapper__shadow {  box-shadow: 0px 0px 12px 3px rgb(0 0 0 / 28%); }
.b-eco-wrapper__shadow--shorter {  box-shadow:-10px -10px 10px -7px rgba(0, 0, 0, 0.2), 10px -5px 10px -5px rgba(0, 0, 0, 0.2); }
.relative { position: relative; }
.roduct__top-shadow { position: relative; }

.negative-top { margin-top: -10rem ;}

.product__top-shadow::after {
    content: "";
    width: 100%;
    display: block;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.55);
    height: 0.1px;
    position: absolute;
}
/* break points */
/* Hannahs */
@media (min-width: 1200px) and (max-width: 1602px) {
    .b-eco .product .product-name { width: 87%; padding:0 30px 0 0 !important; font-size: 24px !important; padding-right:7px !important; }
    .b-eco .drop-icon {height:35px !important;}
    .b-eco .product .right .leftright .order-code,
    .b-eco .product .left .leftright .order-code {white-space: nowrap;margin-right:10px !important;}
    .b-eco .round-icon img { height:50px !important; margin-top:5px !important;}
    .b-eco .product1 .left {width:43%;padding: 30px 0px 30px 70px;}
    .b-eco .product1 .right img { height: 525px; margin-top:40px; }
    .b-eco .product3 .left {width:43%;padding: 30px 0px 30px 70px;}
    .b-eco .product3 .right img { height: 525px; margin-top:40px; }
    .b-eco .product5 .left {width:43%;padding: 30px 0px 30px 70px;}
    .b-eco .product5 .right img { height: 525px; margin-top:40px; }
    .b-eco .product5 .round-icon img { height:50px !important; margin-top:15px !important;}
}

@media (max-width: 1200px) {
    
    .b-eco .product1, .b-eco .product2, .b-eco .product3, .b-eco .product4, .b-eco .product5 {
        flex-direction: column;
        align-items: center;
    }
    .b-eco .product1 .left, .b-eco .product2 .left, .b-eco .product3 .left, .b-eco .product4 .left, .b-eco .product5 .left,
    .b-eco .product1 .right, .b-eco .product2 .right, .b-eco .product3 .right, .b-eco .product4 .right, .b-eco .product5 .right {
        width: 100%;
        padding: 20px;
    }
    .b-eco .product1 .right img, .b-eco .product2 .left img, .b-eco .product3 .right img, .b-eco .product4 .left img, .b-eco .product5 .right img {
        height: auto;
        width: 65%;
    }

    .b-eco .product {border-radius: 0px 399px 0px 0px}
    .b-eco .product .product-description { width: 87%; padding:0 30px !important; }
    .b-eco .product .product-name { width: 87%; padding:0 30px !important; font-size: 25px !important; padding-right:7px !important; }
    .b-eco .product .bottom-description { width: 87%; padding:0 30px !important; margin-top:15px;}
    .b-eco .beco-logo-dark {width: 220px;padding-left:30px;}
    .b-eco .round-icon img { height:45px !important; }
    .b-eco .product .right .leftright .order-code,
    .b-eco .product .left .leftright .order-code {white-space: nowrap; margin:0 10px 5px 10px !important;}
}

@media (max-width: 991px) {
    .negative-top { margin-top: -6rem ;}
}

@media (max-width: 768px) {
    .b-eco .top .intro {
        width: 100%;
        margin: -50px auto 0 auto;
        font-size: 18px;
    }
    .b-eco .top .intro p {
        padding: 50px 20px 0 20px;
    }
    .b-eco .why-b-eco .why-be-eco-wrapper {
        flex-direction: column;
        width: 90%;
    }
    .b-eco .why-b-eco .why-be-eco-wrapper .wbe-left, .b-eco .why-b-eco .why-be-eco-wrapper .wbe-right {
        width: 100%;
        padding: 20px;
        border-right: none;
    }
    .b-eco .related-products h4 {
        font-size: 20px;
    }

    .b-eco .product { border-radius: 0%;width:100%;}
    .b-eco .product .product-description { width: 87%; padding:0 30px !important; }
    .b-eco .product .product-name { width: 87%; padding:0 30px !important; font-size: 18px !important; padding-right:7px !important; }
    .b-eco .product .nameicon { margin-bottom:18px !important;}
    .b-eco .product .bottom-description { width: 87%; padding:0 30px !important; margin-top:15px;}
    .b-eco .top .logo img.prod-range {width: 100%;}
    .b-eco .beco-logo-dark {width: 220px;padding-left:30px;}
    .b-eco .round-icon img { height:60px !important; padding-right:0px;}
    .b-eco .product .right .leftright .order-code,
    .b-eco .product .left .leftright .order-code {white-space: nowrap; margin:0 10px 5px 10px !important; text-align: center;}

    .why-b-eco .why-be-eco-wrapper .wbe-right ul {padding:0; }
    .b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number { margin-right:5px; }
    .b-eco .why-b-eco .why-be-eco-wrapper { margin:0; }
    .why-b-eco .why-be-eco-wrapper .wbe-right ul li .mobile-hide {display:none;}    
    .b-eco .category-card__heading { font-size: 1.4rem; }
    .b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.desc { font-size: 1.2rem; line-height: 30px;}

    .b-eco .product .leftright {display:block !important;}
    .b-eco .product .lr-right {
        display: flex;
        justify-content: center;
        align-items: center;
    }/* .why-b-eco .why-be-eco-wrapper .wbe-right ul {padding:0; }
    .why-b-eco .why-be-eco-wrapper .wbe-right .bullet {float:none !important; margin-bottom:0px;}
    .why-b-eco .why-be-eco-wrapper .wbe-right li {margin:0px !important; padding:0px !important;}  */
}

@media (max-width: 480px) {
    .b-eco .top .logo {
        font-size: 24px;
        padding-top: 30px;
    }
    .b-eco .top .logo p {
        font-size: 18px;
    }
    .b-eco .product1 .left .product-name, .b-eco .product2 .right .product-name, .b-eco .product3 .left .product-name, .b-eco .product4 .right .product-name, .b-eco .product5 .left .product-name {
        font-size: 24px;
    }
    .b-eco .why-b-eco .why-be-eco-wrapper .wbe-right .bullet.number {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
    }
    .b-eco .related-products .view-all a {
        font-size: 14px;
        padding: 8px 30px;
    }

    .b-eco .product {
        border-radius: 0%;
    }
}