@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
html { scroll-behavior: smooth; }
html, body { height: 100%; width: 100%;  margin: 0; padding: 0; font-size:15px; line-height: normal; font-family: "Raleway", sans-serif; font-optical-sizing: auto; font-weight:400; font-style: normal; }
body { min-height: 100%; }
a { text-decoration: none!important; outline: 0; border: none; }
.wrapper{position: relative;  min-height: 100%;}
.color1{color:#849e86;}
.color2{color:#265b53;}
.color1bg{background:#849e86;}


.social{display: inline-block; width: 32px; height: 38px; color:#000; line-height: 38px; text-align:center;}
.social .fa-facebook-f, .social .fa-x-twitter{font-size:18px; }
.LangContainer{text-align: right;}
.btn:focus,input:focus,.btn:active {
    outline: none!important;
    box-shadow: none!important;
    border:none!important;
  }
  .size1{font-size:40px!important;}
  .searchInput{border:none!important; border-bottom:1px solid #ced4da!important; border-radius: 0% !important;}
  .nav-link{color:#000!important;}
  .nav-bar{padding:0!important;}
  .navbar-brand img { max-height: 60px;}
  .searchInput { max-width:140px;}
  .headerTop{background: #ccd3c9;}
  .headerBottom {padding:20px 0;}
  .dropdown-toggle{position: relative;}
  .dropdown-menu{display: block; position: absolute!important;  margin: auto !important; background:#ccd3c9!important; border-radius:0!important; }
  .dropdown-item:hover{background: #eee!important; color:#000!important;}
  .nav-item{margin:0 20px;}
  .sectionSlider{position: relative;}
  .sloganContainer{position:absolute; left:10%; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); z-index:10; font-size:80px; color:#fff; line-height: normal;}
  .sloganContainer h1{font-size:80px;}
  .linkBtn{display: inline-block; position: relative; top: -30px; color:#fff; font-size:24px; letter-spacing: 5px; font-weight: 100; border-bottom:2px solid #fff; padding-bottom: 10px;}
  .linkBtn svg{margin-left:10px;}
  .ourBrands{padding:90px 0;}
  .titleMain{font-size:45px; font-weight: 700; letter-spacing: 2px;}
  .detail-title{font-size:30px; letter-spacing:0;}
  .brandImg{display: block; width: 100%; margin:auto; position: relative;}
.brandImg img{display: block; width: 100%; }
.brandLogo{display: block; position: absolute; left:0; bottom:0; right:0; padding:10px 0; background:rgb(255, 255, 255,0.7); z-index: 1;}
.brandLogo:after{content:""; position: absolute; top:-10px; left:0; right:0; height:10px; background: #fff;}
.brandLogo img{display: block; width:auto; height:48px; margin:auto;}
.seperator,.seperator img{display: block; width: 100%;}
section.blog{background: url(../img/blogBg.jpg) no-repeat top; background-size: cover; padding:90px 0;}
section.blog2{background: url(../img/blog2Bg.jpg) no-repeat top; background-size: cover; padding:90px 0;}
.blogSubTitle{font-size:50px;}
.boxBottom,.blogBrandIcon{display: block; background:#fff;}
.blogImg{display: block; margin:auto;}
.blogImg img{display: block; width: 100%;}
.blogTitle{font-size:20px;}
.buttonMain{display: block; width:200px; background: #849e86; color:#fff; text-align: center; font-size:20px; margin:60px auto; line-height: 60px; padding:0 40px;}
  .sMedia{padding:70px 0;}
  .smImg{position: relative; display: block; width: 100%; margin:auto;}
  .smImg img{display: block; width: 100%;}
  .smIcon{display: block; width: 40px; height: 40px; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}
  .smIcon img{display: block; width: 100%;}
.blogDesc{padding:0 10px;}

  .footerTop{background: url(../img/footerBg.jpg) no-repeat top; background-size: cover; padding:90px 0;}
  .footerSlogan{font-size:40px; color:#fff; font-weight: 500; letter-spacing:2px; line-height: normal;}
  .footerSlogan2{font-size:16px; color:#fff; font-weight:400;}
  .menuFooter ul{list-style: none; padding: 0;}
  .menuFooter ul li{display: inline-block;vertical-align: middle;}
  .menuFooter ul li .footerMenu{color:#fff; font-size:20px;}
  .menuFooter .seperate{display: inline-block; vertical-align: middle; height: 20px; width: 1px; background: #fff; margin:0 10px;}
  .footerBottom{background: #ccd3c9; text-align:center; line-height: 35px;}
  
  .proImg{display: block; width:180px; margin:auto;}
  .proImg img{display: block; width:180px; margin:auto;}
  .proImg .img2{display: block; width:120px!important; margin:auto;}
  .proTitle{display: block; color:#849e86; font-size:20px; text-align:center; margin-top:20px;}
  .owl-carousel{position: relative;}
  .owl-nav{ position: absolute; left:0; right:0; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
  .owl-dots{display: none;}
  .owl-nav button{width:60px; height:60px;  background: none;  border: none; position: absolute;}
  .owl-nav button span{font-size:60px; line-height:60px; color:#849e86;}
.owl-nav button.owl-prev { left: -30px; }
.owl-nav button.owl-next {right: -30px;}
.categoryTitle{display: block; font-size:30px; font-weight: 700; text-align: center; margin-top:20px;}
.aCategory img{display: block; width: 100%;}

.banner{display: block; width: 100%; position: relative; }
.bannerMin{display: block; width: 100%; height: 400px; }
.bannerBlog{background: url(../img/blogBanner.jpg) no-repeat center; background-size:cover ;}
.bannerCatalog{background: url(../img/bannerCatalog.jpg) no-repeat center; background-size:cover ;}
.bannerContact{background: url(../img/contactBanner.jpg) no-repeat center; background-size:cover ;}
.banner img{display: block; width: 100%; }
.h1Title{font-size:45px; color:#849e86; font-weight: 700;}
.nav-link.active{background: #859E86!important; color:#fff!important;}
.sectionBg:nth-child(2n+2){background: #DEE2DC;}
.sectionBg{ padding:50px 0;}
.product{border:1px solid #859E86; display: block; text-align: center; padding:15px;}
.figProduct{display: block; margin:auto; }
.figProduct img{display: block; height:300px; margin:auto;}

.titleProduct{color:#849e86; font-size:20px; font-weight: 700; margin-top:10px;}
.secDetails{padding-top:70px;}
#detailsSlider .carousel-inner .carousel-item {cursor: pointer;}
#detailsSlider .carousel-inner .carousel-item img { width: 100%; object-fit: cover; margin: auto;}
#detailsSlider .carousel-inner {border:1px solid #859E86; padding:10px;}
#detailsSlider .carousel-indicators button{display: block; width:40px; height:40px; padding:5px; background: #fff; border:1px solid #859E86;}
#detailsSlider .carousel-indicators button img{display: block; height: 100%; margin:auto;}
#detailsSlider .carousel-indicators{left:unset; right:-85px;}
.proInfo{padding-left:20px;}

.contactInfoContainer{position: relative; height: 100%; display: block; background: url(../img/infoContainer.jpg) no-repeat center; background-size:cover ; z-index: 1; padding:20px;}
.contactInfoContainer:before{content:""; position: absolute; inset:0; z-index: -1; background: #265b53; mix-blend-mode: multiply;}
.btnContainer{text-align: right;}
.buttonSubmit{background: #849e86!important; color:#fff!important; line-height: 40px!important; padding:0 20px!important;}
.contactForm{background: #f1f1f1; padding:20px;}
.blogMainImg{display: block; width: 100%; margin:auto;}
.blogMainImg img{display: block; width: 100%; }
.blogDetails .titleMain{font-size:35px;}
.blogContent ul li{list-style-type:none;}
.aCatalog{border:1px solid #f1f1f1;  position: relative; overflow: hidden;}
.aCatalog:hover img{transform: scale(1.1);}
.aCatalog,.aCatalog img{display: block; width: 100%;transition: all ease 300ms;}
.btnOpen{display:none!important; margin:auto 0 auto auto; background: #849e86!important; border: none !important;}
.menuMobile{display: block; color:#849e86; font-weight: bold; line-height: 32px; border-bottom:1px solid #859E86;}
section.categories {padding: 0 0 30px 0;}
.navbar-left{justify-content: end!important;}
 .video-container {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
      height: 0;
      overflow: hidden;
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .blogContent ul li{list-style:disc; line-height: 1.7;}
    .hairBg{display: block; position: relative; height: 400px; background: url(../img/hairCareBg.jpg) no-repeat center; background-size: cover;}
    .hairBg .sloganContainer{ text-align: center;left:0; right:0; width: 100%;}
    .hairBg .sloganContainer .slogan1{font-size:70px;}
@media screen and (max-width: 1440px) {
  .sloganContainer, .sloganContainer h1, .slogan1, .slogan2 {font-size: 60px;}
  .footerSlogan{font-size:30px;}
  .blogSubTitle{font-size:40px; line-height: normal;}
#detailsSlider .carousel-indicators{right:10px; bottom:10px; margin:auto;}
.titleProduct{font-size:16px; }

}

@media screen and (max-width: 1366px) {
  .nav-item{margin:0 10px;}
  .searchInput{max-width:110px;}
  .slogan1,h1.slogan2 {font-size:40px;}
  .titleMain{font-size:35px;}
}
@media screen and (max-width: 1200px) {
  .navbar-right, .navbar-left{display: none!important;}
.btnOpen{display: block!important;}
.mobileNone{display: none!important;}
.mobileLeft.text-center{text-align:left!important;}
.footerTop{text-align:center;}
.footerSlogan2 {margin-bottom:15px;}
.menuFooter{text-align:center;}
.ourBrands, section.blog{padding:35px 0;}
.h1Title,.titleMain{font-size:26px;}
.sMedia{padding:20px 0;}
.categoryTitle {font-size:20px; margin:10px auto;}
}
@media screen and (max-width: 768px) {
  .sloganContainer{display: none;}
  .blogSubTitle {font-size:30px;}
.menuFooter ul li .footerMenu{font-size:14px;}
.buttonMain{margin:30px auto;}
#detailsSlider .carousel-inner .carousel-item img{height: auto; width: 100%;}
}