@font-face {
    font-family: "AvertaBlack";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Averta%20Black.ttf");
}

@font-face {
    font-family: "AvertaRegularItalic";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Averta-RegularItalic.ttf");
}


@font-face {
    font-family: "AvertaExtraBold";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Averta-ExtraBold.ttf");
}

@font-face {
    font-family: "AvertaRegular";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Averta-Regular.ttf");
}

button.btn.btn-contactus {
    padding: 10px 39px;
    border: unset;
    border-radius: unset;
    background: #c7221c;
}

button.btn.btn-contactus:hover {
    background: #9e0f0a;
}


.div-container-form {
    padding: 40px;
    background: #dedede;
    margin-bottom: 100px;
    margin-top: 100px;
    border-radius: 20px;
}

.container.div-container-blog {
    position: absolute;
    bottom: 24px;
    width: 100%;
    background: #c7211b94;
    padding-top:15px ;
    padding-bottom: 15px;
}

button.btn.btn-blog-readmore:hover {
    background: #d6d6d6;
}

button.btn.btn-blog-readmore {
    border: unset;
    border-radius: unset;
    font-size: 13px;
    padding: 9px 21px;
    color: #c6231c;
}

ul#ul-navigation li:hover a {
    color:#c7211b!important;
}

.AvertaRegularItalic {
    font-family: 'AvertaRegularItalic';
}

.AvertaExtraBold {
    font-family: 'AvertaExtraBold';
}

.AvertaBlack{
    font-family: 'AvertaBlack';
}

.AvertaRegular{
    font-family: 'AvertaRegular';
}

img.img-main-logo {
    width: 30%;
}

li.nav-item {
    padding-top: 19px;
}

h1.products {
    font-size: 60px;
    color: #c7211b;
}

h1.blogs {
    font-size: 60px;
    color: #c7211b;
}

h5.faqs-Q {
    color: #c2251c;
}

h1.why-zobodrink {
    font-size: 60px;
    margin-top: 60px;
}


.div-hero-banner {
    background-image: linear-gradient(35deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 20%) 73%), url('../img/banner.webp');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    height: 700px;
    margin-top: -90px;
}


.div-hero-banner-product{
    background-image: linear-gradient(35deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 15%) 73%), url('../img/product-banner.png');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    margin-top: -90px;
}

.div-hero-banner-blog{
    background-image: linear-gradient(35deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 15%) 73%), url('../img/blog-banner.png');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    margin-top: -90px;
}

.div-hero-banner-contactus{
    background-image: linear-gradient(35deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 15%) 73%), url('../img/contactus-banner.png');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    margin-top: -90px;
}

.div-hero-banner-ourstory{
    /* background-image: linear-gradient(35deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 15%) 73%), url('../img/ourhistory-banner.png'); */
    background: #730905;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    margin-top: -90px;
}

.div-hero-banner-aboutus{
    background-image: linear-gradient(35deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 15%) 73%), url('../img/aboutus.png');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    margin-top: -90px;
}

.div-hero-banner-faqs {
    background-image: linear-gradient(35deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 15%) 73%), url('../img/banner-faqs.png');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    margin-top: -90px;
}

p.textkimzubo-abts {
    width: 60%;
    text-align: center;
}

.div-product.aboutus {
    padding-bottom: 60px;
    background: #f7f3e9;
    padding-top: 60px;
}

.div-blog-list {
    transition: transform .5s;
}

.div-blog-list:hover {
    transform: scale(1.04);
}

.div-history.ourhistory{
    margin-top: -140px;
}



.div-history-info-one {
    background: #f7f3e9;
}


h1.banner-title {
    font-size: 50px;
}

p.banner-description {
    font-size: 16px;
}

a.btn.btn-shopnow {
    border-radius: unset;
    border:unset;
    background: #c7211b;
    color: white;
    padding: 12px 33px;
}

a.btn.btn-shopnow:hover {
    background: #a00d07;
}


a.btn.btn-story {
    padding: 12px 33px;
    background:#9a988bab;
    border-radius: unset;
}

a.btn.btn-story:hover {
    color:white;
    background:#797979;
}

.row.banner-row {
    padding-top: 140px;
    padding-bottom: 135px;
}

.div-inner-story {
    background: #f7f3e9;
    padding: 0px;
}

a.btn.btn-learnmore {
    padding: 11px 30px;
    border: 1px solid #c7211b;
    color:#c7211b;
    border-radius: unset;
}

a.btn.btn-learnmore:hover {
    border: 1px solid #730905;
}


.div-info-content {
    padding: 40px 60px 40px 40px;
}


.container.div-inner-story {
    background-image: url('../img/KemOriginalZoboDrinklogostory.webp');
    background-repeat: no-repeat, no-repeat;
    background-position: right, right;
    background-size:20%;
}

img.kemsubologo_product {
    width: 100%;
}

.div-product {
    margin-top: 70px;
}

span.product-title {
    font-size: 21px;
}

p.product-price {
    font-size: 19px;
}

button.btn.btn-addtocart {
    color: white;
    background: #c7211b;
    border: unset;
    border-radius: unset;
    padding: 14px 50px;
}

button.btn.btn-addtocart:hover {
    background: #a5110b;
}

.div-history {
    margin-top: 80px;
    margin-bottom: 80px;
}

img.kemsubo_quote_gallery {
    width: 100%;
}

h3.text-subscribe {
    font-size: 35px;
}

a.btn-subscribe {
    background: #c7211b;
    border:unset;
    border-radius: unset;
    padding: 9px 40px;
}

a.btn-subscribe:hover {
    background: #9e110c;
}

.div-input {
    width:35%
}

.div-button{
    width:30%
}

.input-subscription {
    border:unset;
    border-radius: unset;
    padding: 9px 20px;
}

span#getlatestupdate {
    font-size: 21px;
}

.div-subscribe {
    padding-top: 30px;
    padding-bottom: 30px;
}

span.text-author {
    display: flex;
    justify-content: center;
}

ul#ul-footer-navigation li a {
    color: black;
    text-decoration: none;
}

ul#ul-footer-navigation {
    align-items: end;
    justify-content: end;
}

ul#ul-footer-navigation li {
    padding-left: 40px;
}

.badge {
    padding-left: 9px;
    padding-right: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

.label-warning[href],
.badge-warning[href] {
    background-color: #c67605;
}
#lblCartCount {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 3px 6px;
    vertical-align: top;
    margin-left: -13px;
    margin-top: -8px;
}

a.socialmedia {
    padding-right: 5px!important;
    padding-left: 0px!important;
}

a.login {
    padding-right: 5px!important;
    padding-left: 5px!important;
}

a.cart {
    padding-left: 5px!important;
}

button.navbar-toggler {
    background: #c7211b!important;
    margin-top: 10px;
}

@media only screen and (max-width: 991px) {
    .div-info-content {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

@media only screen and (max-width: 991px) and (min-width:768px) {
    div#div-history {
        background: #f7f3e9;
        padding-top: 50px;
        padding-bottom: 20px;
    }
}


@media only screen and (max-width: 1399px) and (min-width:1200px){
    ul#ul-navigation li a {
        padding-right:15px!important;
        padding-left:15px!important;
    }

    .div-footer-text {
        width: 70%;
    }
    
    .div-footer-img {
        width: 30%;
    }
}

@media only screen and (max-width: 1199px) and (min-width:992px){

    h1#text-vision {
        font-size: 40px!important;
    }

    h1.why-zobodrink {
        font-size: 50px!important;
    }

    h1#text-title-kemzobo {
        font-size: 50px!important;
    }

    h1#text-titlw-whyzobo {
        font-size: 40px!important;
    }

    p.textkimzubo-abts {
        width: 100%;
    }

    ul#ul-navigation li a {
        padding-right:7px!important;
        padding-left:7px!important;
    }

    img.kemsubologo {
        width: 130px;
    }

    h1#kimzubostory-text {
        font-size: 25px;
    }

    .div-info-content {
        padding: 25px 30px 16px 0px;
    }

    .div-footer-text {
        width: 70%;
    }
    
    .div-footer-img {
        width: 30%;
    }

    ul#ul-footer-navigation li {
        padding-left: 29px;
    }

    ul#ul-footer-navigation {
        padding-left: 0px!important;
    }

    .footer-icon.d-flex.justify-content-end {
        width: 34%;
    }
}

@media only screen and (max-width: 991px) and (min-width:768px){

    .div-row-mission.div-reverse {
        display: flex!important;
        flex-direction: row-reverse!important;
    }

    h1#text-titlw-whyzobo {
        font-size: 40px!important;
        text-align: center!important;
    }

    h1.why-zobodrink {
        font-size: 40px;
        text-align: center;
    }

    img.vision-image {
        width: 70%!important;
    }
    
    .div-vission-image {
        display: flex;
        justify-content: center;
    }
    .div-mission-image {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .div-mission-text {
        width: 100%;
        
    }
    .row.div-row-mission {
        display: flex;
        flex-direction: column-reverse;
    }

    h1#text-mission {
        text-align: center!important;
        font-size: 50px!important;
    }

    h1#text-vision {
        text-align: center;
        font-size: 40px!important;
    }

    p.text-description-mission {
        text-align: left!important;
    }

    h1#text-title-kemzobo {
        font-size: 50px!important;
    }

    img.mission-image {
        width: 70%!important;
    }

    .div-blog-list{
        width: 50%;
    }

    .div-vission-image {
        width: 100%;
    }
    
    .div-vission-text {
        width:100%;
    }

    p.textkimzubo-abts {
        width: 90%;
        text-align: center;
    }

    .div-story-text-a {
        width: 100%;
    }
    
    .div-story-image-a {
        width: 100%;
    }

    div#navbar {
        position: absolute;
        background: white;
        top: 65px;
        width: 100%;
        left: 0;
        padding: 15px;
        margin-top: 20px;
        z-index: 999999;
    }

    ul#ul-navigation li#nav-item-logo {
        display: none;
    }

    ul#ul-navigation {
        text-align: center;
    }

    ul#ul-navigation li.nav-item {
        justify-content: center!important;
        display: flex!important;
        padding-top: 0px!important;
    }





    .col-4.div-product-list {
        width: 50%;
        margin-top: 39px;
    }
    .col-5.div-img-story {
        width: 100%;
    }
    
    div#div-col7-story {
        width: 100%;
    }

    .div-text-quote {
        width: 100%;
    }

    .col-5.div-subs {
        width: 100%;
    }
    
    .div-subs-form {
        margin-top: 10px;
        width: 100%;
    }

    div#div-subs-form {
        justify-content: space-around!important;
    }

    .col-4.div-footer-img {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .col-8.div-footer-text {
        width: 100%;
    }
    
    img.kemsubo_footer_img {
        width: 15%!important;
    }
    ul#ul-footer-navigation {
        padding-left: 0px;
        justify-content: center;
    }

    ul#ul-footer-navigation li {
        padding-left: 35px;
    }

    a.navbar-brand {
        display: block!important;
    }
   
    
}


@media only screen and (max-width: 330px){
    p.blog-description {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1399px) and (min-width:1200px) {
    h4#ntr-dl {
        font-size: 20px;
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }
}

@media only screen and (max-width: 1199px) and (min-width:992px) {
    h4#ntr-dl {
        font-size: 18px;
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }

    p.text-desc-info {
        margin-top: 11px !important;
    }

    .div-img-story {
        width: 50%;
    }

    div#div-col7-story {
        width: 50%;
    }
}

@media only screen and (max-width: 767px){

    div#div-history {
        background: #f7f3e9;
        padding-top: 50px;
        padding-bottom: 20px;
    }

    p.banner-description {
        width: 100%!important;
        padding-left: 0px!important;
        padding-right: 0px!important;
    }

    h1#text-titlw-whyzobo {
        font-size: 30px!important;
        text-align: center!important;
    }

    h1.why-zobodrink {
        font-size: 35px;
        margin-top: 0px;
        text-align: center;
    }


    .div-row-mission.div-reverse {
        display: flex!important;
        flex-direction: row-reverse!important;
    }

    h1.blogs {
        font-size: 40px;
    }
    
    p.text-description-vision {
        text-align: justify!important;
    }

    p.text-description-mission {
        text-align: justify!important;
    }

    .row.div-row-mission {
        display: flex;
        flex-direction: column-reverse;
    }

    h1#text-vision {
        font-size: 35px!important;
        text-align: center;
    }

    .div-mission-text {
        width: 100%;
    }
    
    .div-mission-image {
        width: 100%;
    }
    
    h1#text-mission {
        font-size: 35px!important;
        text-align: center!important;
    }

    p.textkimzubo-abts {
        width: 100%;
        text-align: center;
    }

    h1#text-title-kemzobo {
        font-size: 35px!important;
    }

    .div-vission-image {
        width: 100%;
    }
    
    .div-vission-text {
        width: 100%;
    }

    .div-history-info-one {
        padding: 20px!important;
    }


    
    .div-story-text-a {
        width: 100%;
    }
    
    .div-story-image-a {
        width: 100%;
    }

    .div-contactus-wedlove h1.AvertaBlack {
        text-align:center
    }
    

    .div-container-form {
        margin-top: 20px;
    }

    .div-contactus-wedlove {
        margin-top: 50px;
        width: 100%;
    }
    
    .col-6.div-form-submit {
        width: 100%;
    }


    .div-blog-list{
        width: 100%;
    }

    h1.products {
        font-size: 40px;
    }

    ul#ul-navigation li.nav-item {
        justify-content: center!important;
        display: flex!important;
        padding-top: 0px!important;
    }

    a.navbar-brand {
        display: block!important;
    }

    
    ul#ul-navigation li#nav-item-logo {
        display: none;
    }

    div#navbar {
        position: absolute;
        background: white;
        top: 65px;
        width: 100%;
        left: 0;
        padding: 15px;
        margin-top: 20px;
        z-index: 999999;
    }

    h1.banner-title {
        font-size: 40px;
    }

    .col-4.div-product-list {
        width: 100%;
        margin-top: 30px;
    }

    .div-img-story {
        width: 100%;
    }
    
    div#div-col7-story {
        width: 100%;
    }

    .div-info-content {
        padding: 20px 20px 20px 20px;
    }

    img.kemsubo_quote_logo {
        width: 70px;
    }

    img.kemsubo_quote_logo {
        width: 70px;
    }
    
    .div-text-quote {
        width: 100%;
    }

    .div-gallery-img {
        width: 100%;
    }

    .div-footer-img {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .col-8.div-footer-text {
        width: 100%;
    }

    .col-5.div-subs {
        width: 100%;
    }

    div#div-subs-form {
        width: 100%;
    }

    h3.text-subscribe {
        font-size: 26px;
    }

    .div-form {
        width: 100%;
        margin-top: 14px;
    }

    ul#ul-footer-navigation {
        display: block!important;
        text-align: center;
    }

    ul#ul-footer-navigation li {
        padding-left: 0px;
    }

    ul#ul-footer-navigation {
        padding-left: 0px;
    }

    .div-footer-copyright {
        display: block!important;
        text-align: center;
    }
    
    .footer-icon {
        justify-content: center!important;
    }

    img.kemsubo_footer_icon {
        width: 30px!important;
    }

    .div-product {
        margin-top: 30px;
    }
}