@media (min-width: 768px) {
    .headbar-main{padding: .75rem 0;}
    .navbar-expand-md .navbar-collapse{
        width: 100%;
        justify-content: flex-end;
    }
    .navbar-expand-md .navbar-nav{width:100%; align-items: center;margin-top: 1rem;}
    .navbar-collapse ul{list-style: none;}
    .navbar-collapse ul li {
        width: auto;
        margin:0 auto;
        text-align: center;
        position: relative;
        border: none;
    }
    .navbar-collapse ul li a{
        padding: 0;
        position: relative;
        transition: all 0.5s;
        text-align: center;
    }  
    
    .footer{padding: 5% 0;}
    .copyright-box{padding: 15px 0;margin-bottom: 0;}
    .navbar-brand {text-align: center;}
    .navbar-brand img{max-width: 100%;width: auto;}
    
    .content-boxOne{padding: 3% 0;}    
    .content-boxTwo{padding: 10% 0;background-position: left center;background-size: 100%;}
    .content-boxThree{padding: 2% 0;}
    .content-otherpage{padding: 5% 0;}
    .content-otherpage.aboutuspage-c2{padding: 5% 0;}
    .content-otherpage.aboutuspage-c2 .row{align-items: center;}
    .banner-aboutus{
        padding: 3% 0 5%;
        background: url("../aboutus/images/bg-banner-ab.png") left center no-repeat #f7f8fb;
        background-size: cover !important;
    }
    
    .content-otherpage.nutritionpage{padding: 0% 0 5%;}
    .content-otherpage.productpage{padding: 2% 0;}
    .title-products h1{font-size: 33px;}
    
    
}
@media (min-width: 812px){
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 992px){ 
    .social-footer{margin: 0;}
    .contact-footer{padding-left: 1rem;}
    .content-boxTwo{padding: 13% 0;}
    
    .content-boxOne{
        padding: 12% 0;
        background: url("../images/bg-1.png") right center no-repeat;
        background-size: cover;
    }
    .content-boxThree{
        padding: 10% 0;
        background: url("../images/bg-3.png") right center no-repeat;
        background-size: cover;
    }
    .content-boxTwo{background-size: 100%;}
    
    .banner-aboutus{padding: 7% 0 10%;}
    .banner-aboutus .menu-historypage {
        margin-bottom: 12%;
        margin-top: -6%;
    }
    .content-otherpage.aboutuspage-c2 {padding: 0;}
}
/*//./////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1200px) {
    html{font-size: 20px;}
    .copyright-box{padding: 15px 0;}
    .contact-footer{padding-left: 2rem;}
    .banner-aboutus { padding: 10% 0;}
    .banner-aboutus .menu-historypage {
        margin-bottom: 17%;
        margin-top: -10%;
    }
    .banner-aboutus .detail-text{
        margin-top: -13%;
        margin-bottom: 12%;
    }
    
    .title-otherpage{font-size: 27px;}
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1440px) {
    html{font-size:22px;}  
    .container{ max-width: 1366px; } 
    .owl-carousel .owl-nav button.owl-prev{border-radius: 0 30px 30px 0;}
    .owl-carousel .owl-nav button.owl-next{border-radius: 30px 0 0 30px;}
    .detail-text h1 {font-size: 27px;}
    
    .banner-aboutus .menu-historypage {
        margin-bottom: 16%;
        margin-top: -9%;
    }
    .content-otherpage.aboutuspage-c2 {
        padding: 2% 0;
    }
	.vdo-present{
        height: 480px;
    }
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1600px){
    .container{ max-width: 1440px; }  
    .detail-text h1, .detail-text2 h1{
        font-size: 28px;
        text-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    }
    .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next{ font-size:70px;}
    .content-boxThree{
        padding: 11% 0 10%;
    }
    .social-footer a{
        display: inline-block;
        margin-top: 10px;
    }
    .content-otherpage.aboutuspage-c2 .detail-text{padding:0 2rem 0 3rem;}
    .title-otherpage{font-size: 28px;}
	.vdo-present{
        height:515px;
    } 
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1800px) {
    html{font-size:22px;}  
    .container{ max-width: 1600px; }
    .content-boxThree{
        padding: 9% 0 12%;
    }
    .content-otherpage.aboutuspage-c2 .detail-text{padding:0 4rem 0 2rem;}
    .banner-aboutus .menu-historypage {
        margin-bottom: 18%;
        margin-top: -11%;
    }
}