/* vietnamese */
@font-face {
    font-family: 'Muli';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/muli/v22/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk40eiNxw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Muli';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/muli/v22/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk50eiNxw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Muli';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/muli/v22/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk30eg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
body{
    font-family: 'Muli';
    overflow-x: hidden !important;
}
.section-head h1{
    font-family: 'Playfair Display', serif;
}
.section-head h1{
    font-size: 60px;
    font-weight: bolder;
}
.head-red{
    color: #9d2019;
}
body.offcanvas-active{
    overflow:hidden;
}
.muse-logo{
    height: 21px !important;
}

.offcanvas-header{ display:none; }

.screen-darken{
    height: 100%;
    width:0%;
    z-index: 30;
    position: fixed;
    top: 0;
    right: 0;
    opacity:0;
    visibility:hidden;
    background-color: rgba(34, 34, 34, 0.6);
    transition:opacity .2s linear, visibility 0.2s, width 2s ease-in;
}

.screen-darken.active{
    z-index:10; 
    transition:opacity .3s ease, width 0s;
    opacity:1;
    width:100%;
    visibility:visible;
}
.btn-close-nav{
    opacity: 0.7 !important;
}
.main-banner {
position: relative;
max-height: 100%;
overflow: hidden;
margin-bottom: -7px;
}

.bg-video {
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;

z-index: -1;
}
.bg-video-bottom{
    min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
height: auto;
object-fit: cover;
z-index: -1;
}
.bg-video::-webkit-media-controls {
display: none !important;
}

.video-overlay {
position: absolute;
background-color: rgba(0, 0, 0, 0.55);
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
}

.main-banner .caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.main-banner .caption h6 {
margin-top: 0px;
font-size: 15px;
text-transform: uppercase;
font-weight: 600;
color: #fff;
letter-spacing: 1px;
}

.main-banner .caption h2 {
margin-top: 20px;
margin-bottom: 20px;
font-size: 36px;
text-transform: uppercase;
font-weight: 800;
color: #fff;
letter-spacing: 1px;
}

.main-banner .caption h2 em {
font-style: normal;
color: #f5a425;
font-weight: 900;
}

.main-banner .caption p {
color: #fff;
font-size: 14px;
max-width: 570px;
}

.main-banner .caption .main-button-red {
margin-top: 30px;
}
.bg-section-brand{
background-color: #333;
}

.product-section .slick-slide{
margin:15px;
margin-top: 35px;
margin-bottom: 35px;
}
.product-section .slick-list
{
    padding:0 22% 0 0 !important;
}



    .product-slide .slick-prev{
    z-index: 100;
    left: 50px;
    top: 50%;
    }
    .product-slide .slick-next{
    right: 50px !important;
    top: 50%;
    }
    
    .product-slide .slick-slider button{
    top: 50%;
    padding: auto;
    width: 45px ;
    height: 45px ;
    z-index: 100;
    transition: 0.3s;
    }
    .product-slide .slick-prev:before {
        content: "\276E";
        color: #fff;
        align-items: center !important;
        font-size: 30px;
        opacity: 0.9 !important;
        transition: 0.2s;
    }
    .product-slide .slick-prev:hover::before {
        color:#9d2019;
        opacity: 0.9 !important;
    }
    
    .product-slide .slick-next:before {
        content:  "\276f";
        color: #fff;
        align-items: center !important;
        font-size: 30px;
        opacity: 0.9 !important;
        transition: 0.2s;
    }
    .product-slide .slick-next:hover::before {
        color:#9d2019;
        opacity: 0.9 !important;
    }
    





.brand-product-section .slick-slide{
margin:40px;
margin-top: 35px;
margin-bottom: 35px;
}
.brands-slide .slick-prev{
z-index: 100;
left: 15px;
top: 45%;
}
.brands-slide .slick-next{
right: 15px !important;
top: 45%;
}

.brands-slide .slick-slider button{
top: 50%;
padding: auto;
width: 45px ;
height: 45px ;
z-index: 100;



transition: 0.3s;
}
.brands-slide .slick-slider button:hover{

}
.brands-slide .slick-slider button:focus{

}
.brands-slide .slick-prev:before {
content: "\276E";
color: #fff;
align-items: center !important;
font-size: 25px;

}
.brands-slide .slick-prev:hover::before {
    color:#9d2019;
    opacity: 0.9 !important;
}
.brands-slide .slick-next:before {
content:  "\276f";
color: #fff;
align-items: center !important;
font-size: 25px;
}
.brands-slide .slick-next:hover::before {
    color:#9d2019;
    opacity: 0.9 !important;
}
.brand-product-slide .slick-prev{
z-index: 100;
left: 0px;
top: 45%;
}
.brand-product-slide .slick-next{
right: 0px !important;
top: 45%;
}

.brand-product-slide .slick-slider button{
top: 40% !important;
padding: auto;
width: 45px ;
height: 45px ;
z-index: 100;



transition: 0.3s;
}
.brand-product-slide .slick-slider button:hover{

}
.brand-product-slide .slick-slider button:focus{

}
.brand-product-slide .slick-prev:before {
content: "\276E";
color: #000;
align-items: center !important;
font-size: 25px;

}
.brand-product-slide .slick-prev:hover::before {
    color:#9d2019;
    opacity: 0.9 !important;
}
.brand-product-slide .slick-next:before {
content:  "\276f";
color: #000;
align-items: center !important;
font-size: 25px;
}
.brand-product-slide .slick-next:hover::before {
    color:#9d2019;
    opacity: 0.9 !important;
}
.right-red-lines{
right: 0;
height: 150px;
}
.left-red-lines{
    left: 0;
    height: 150px;
    }

.red-line-bottom-left{
z-index: -1;
}
.red-line-bottom-right{
right: 0;
z-index: -1;
margin-top: -270px !important;

}
.max-width-img{
max-width: 320px;
}
.collect-point-box{
width: 100%;
height: auto;

}
.navbar-light .navbar-nav .nav-link.active{
color: #9d2019 !important;
}
.navbar-light .navbar-nav .nav-link:hover{
    color: #9d2019 !important;
    }
.navbar-light .navbar-nav .nav-link {
color: #000 !important;

} 
.arabic-text{
    font-family: 'Tajawal', sans-serif !important;
    direction: rtl;
    letter-spacing: 0px !important;
}
button:focus{
    box-shadow: none !important;
    outline: none !important;
}
.letter-spacing-text{
  letter-spacing: 10px;  
  font-weight: 600;
}
footer h1{
    letter-spacing: 10px;
    font-weight: 1000;
}
footer p{
    letter-spacing: 0px;
    font-size: 24px;
}
footer h2{
    font-size: 30px;
    letter-spacing: 5px;
    font-weight: 800;
}
footer h3{
    font-size: 30px;
    letter-spacing: 5px;
    font-weight: 600;
}

.navbar-nav .nav-link{
    font-size: 16px;
    letter-spacing: 0px;
}
.ar-en-link{
    font-size: 15px;
}
.red-line-left{
    z-index:-1;
    height: 800px;
    margin-top: -80px;
}
.red-line-right{
    right: 0;
    z-index:-1;
    height: 800px;
    margin-top: -80px;
}
footer{
    margin-top: auto;
}
.collect-point-box-ar{
    background-image: url('http://stagingserver.pw/muse/assets/images/Artboard20.png') ;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    height: auto;
    background-position: center;
}
.exp-muse-txt{
    font-size: 22px;
}
.date-letter-spacing{
    letter-spacing: 7px;
}
.mobile-collect-box{
    background-image: url('http://stagingserver.pw/muse/assets/images/Artboard20.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}


@media (min-width: 1700px) {
    .product-section .slick-list
    {
        padding:0 0% 0 0 !important;
    }
    .w-n100-xll-div{
        text-align: right !important;
    }
    .w-n100-xll{
        width: auto !important;
    }
    .w-n100-xll-left{
        margin-left: auto;
    }
    .red-line-bottom-right{
        margin-top: -450px !important;
    }
    .p-r-xll-div{
        padding-right: 13rem !important;
    }
    .p-l-xll-div{
        padding-left: 13rem !important;
    }
}

@media (min-width: 1250px) {
    .pl-more{
        padding-left: 6rem !important;
    }
    .pr-more{
        padding-right: 5rem !important;
    }
    .pr-more-ar{
        padding-right: 6rem !important;
    }
    .pl-more-ar{
        padding-left: 5rem !important;
    }
}
@media (min-width: 991px) {
    .brands-section .slick-slide{
        margin:70px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .bts-video-inner{
        height: 700px;

    }
    .collect-point-box{
        object-fit: contain;
        height: 170px !important;
        width: 100% !important;
    }
    .navbar-brand{
        margin-left: 300px !important;
    }
    .navbar-brand-ar{
        margin-right: 300px !important;
    }
    .navbar-light .navbar-nav .nav-link.active{
        box-shadow: inset 0px -5px 0px #9d2019;
    }
    .text-t-c{
        font-size: 15px;
    }
    .shop-brand-en{
        letter-spacing: 3px;
    }
    
    .brand-text{
        font-size: 18px !important;
    }
    .box-inner-content-en h1{
        font-size: 1.6rem !important;
    }
    .box-inner-content-en h3{
        font-size: 1.5rem;
    }
    .box-inner-content-en h2{
        /* margin-top: 20px !important; */
        font-size: 1.5rem;
    }
    .box-inner-content h1{
        font-size: 1.6rem ;
    }
    .box-inner-content h3{
        font-size: 1.5rem;
    }
    .box-inner-content h2{
        /* margin-top: 20px !important; */
        font-size: 1.5rem;
    }
    .enjpy-upt-txt{
        font-size: 1.6rem !important;
    }
    .date-letter-spacing {
        font-size: 1.6rem !important;
    }
    .date-arabic-txt{
        font-size: 1.6rem !important;
    }
    
}
@media (max-width: 1425px) {
    .collect-point-box-en{
        /* margin-bottom: 15px !important; */
    }
    .box-inner-content h1{
        font-size: 24px !important;
    }
    .box-inner-content h3{
        font-size: 21px;
    }
    .box-inner-content h2{
        /* margin-top: 25px !important; */
        font-size: 21px;
    }

}
@media (max-width: 1300px) {
    .navbar-brand{
        margin-left: 80px !important;
    }
    .navbar-brand-ar{
        margin-right: 80px !important;
    }
    
    
    .left-red-lines{
        left: 0;
        height: 100px;
    }
    .collect-point-box-en{
        /* margin-bottom: 0px !important; */
    }
}

@media (max-width: 1111px) {
    .collect-point-box{
        height: auto !important;
    }
    .box-inner-content h1{
        font-size: 20px !important;
    }
    .box-inner-content h3{
        font-size: 18px;
    }
    .box-inner-content h2{
        font-size: 18px;
    }
    .box-inner-content h2{
        /* margin-top: 5px !important; */
        font-size: 21px;
    }
    .head-sub-m{
        font-size: 20px !important;
    }
    .date-letter-spacing{
        font-size: 20px;
        letter-spacing: 4px;
    }
    .collect-point-box-en{
        margin-bottom: 15px !important;
    }
}

@media (max-width: 991px) {
    .offcanvas-header{ display:block; }
    .mobile-offcanvas{
        visibility: hidden;
        transform:translateX(-100%);
        border-radius:0; 
        display:block;
        position: fixed;
        top: 0; left:0;
        height: 100%;
        z-index: 1200;
        width:80%;
        overflow-y: scroll;
        overflow-x: hidden;
        transition: visibility .3s ease-in-out, transform .3s ease-in-out;
        background-color: #fff !important;
    }

    .mobile-offcanvas.show{
        visibility: visible;
        transform: translateX(0);
    }
    .mobile-offcanvas .container, .mobile-offcanvas .container-fluid{
        display: block;
    }
    .brands-section .slick-slide{
        margin:25px;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    .brands-slide .slick-prev{
        z-index: 100;
        left: 0px;
        top:49% !important;
    }
    .brands-slide .slick-next{
        right: 0px !important;
        top:49% !important;
    }
    .brands-slide .slick-prev:before {
        font-size: 19px;
        
    }
    .brands-slide .slick-next:before {
        font-size: 19px;
    }
    .product-section .slick-list
    {
        padding:0 20% 0 0 !important;
    }
    .section-head h1{
    font-size: 38px;
    text-align: left ;
    }
    .text-align-left{
        text-align: left;
        font-size: 18px !important;
    }
    .text-align-m-center{
        text-align: center !important;
    }
    footer h1{
        font-size: 19px !important;
        letter-spacing: 4px;
    }
    footer p{
        font-size: 15px ;
        letter-spacing: 0px;
    }
    footer h2{
        font-size: 16px;
        letter-spacing: 2px;
    }
    footer h3{
        font-size: 16px;
        letter-spacing: 6px;
    }
    .box-inner-content h1{
        font-size: 20px !important;
    }
    .box-inner-content h3{
        font-size: 18px;
    }
    .box-inner-content h2{
        font-size: 18px;
    }
    .head-text-arabic{
        text-align: right !important;
    }
    .letter-spacing-text{
        letter-spacing: 3px;  
    }
    .navbar-brand{
        margin-left: 0px !important;
    }
    .navbar-brand-ar{
        margin-right: 0px !important;
    }
    
    .box-inner-content h2{
        /* margin-top: 5px !important; */
        font-size: 21px;
    }
    .exp-muse-txt{
        font-size: 17px;
    }
    .brand-text{
        font-size: 15px !important;
    }
    .brand-shop-now{
        font-size: 18px !important;
    }
    .red-line-bottom-left{
        width: 200% !important;
    }
    .head-sub-m{
        font-size: 18px !important;
    }
    /* .muse-logo-m{
        filter: invert() !important;
    } */
    .navbar-light .navbar-nav .nav-link.active{
        color: #9d2019 !important;
        
    }
    .navbar-light .navbar-nav .nav-link:hover{
        color: #9d2019 !important;
    }
    .navbar-light .navbar-nav .nav-link {
        color: #000 !important;
    } 
    .date-letter-spacing{
        font-size: 18px;
        letter-spacing: 4px;
    }
    .left-red-lines{
        left: 0;
        height: 65px;
    }
    .text-t-c{
        font-size: 12px;
    }
    .bg-video-bottom{
        height: auto;
    }
    .collect-box-fst-txt{
        font-size:1rem !important;
   }
   .collect-box-pnts-txt{
       font-size: 1.2rem !important;
   }
   .collect-box-inner{
    padding-top: 18px;
    padding-bottom: 18px;
    }
    .mobile-collect-box {
        margin-bottom: 15px;
    }
    .padding-collect-box{
        padding-left: 150px;
        padding-right: 150px;
    }
    .date-arabic-txt{
        font-size: 17px !important;
    }
    .brand-product-section .slick-slide{
        margin:40px;
        margin-top: 35px;
        margin-bottom: 5px;
    }
    .product-slide .slick-prev{
        z-index: 100;
        left: 25px;
        top: 50%;
    }
        .product-slide .slick-next{
        right: 25px !important;
        top: 50%;
    }
    .product-slide .slick-prev:before {
        content: "\276E";
        color: #fff;
        align-items: center !important;
        font-size: 25px;
        opacity: 1 !important;
    }
        .product-slide .slick-next:before {
        content:  "\276f";
        color: #fff;
        align-items: center !important;
        font-size: 25px;
        opacity: 1 !important;
    }
}
@media (max-width: 780px) {
    .red-line-bottom-right{
        margin-top: -160px !important;
        width: 120% !important;
    }
    .right-white-lines{
        height: 80px;
    }
    .collect-box-fst-txt{
        font-size: 0.9rem !important;
   }
   .collect-box-pnts-txt{
       font-size: 1rem !important;
   }
   .collect-box-inner{
    padding-top: 8px;
    padding-bottom: 8px;
    }
    .mobile-collect-box {
        margin-bottom: 20px;
    }
    .padding-collect-box{
        padding-left: 70px;
        padding-right: 70px;
    }
}

@media (max-width: 768px) {
    .collect-point-box-en{
        margin-bottom: 20px !important;
    }
    .collect-box-inner{
        padding-top: 8px;
        padding-bottom: 8px;
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }
}
@media (max-width: 670px) {
    .mobile-collect-box {
        margin-bottom: 5px;
    }
    .collect-box-inner{
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .padding-collect-box{
        padding-left: 40px;
        padding-right: 40px;
    }
    .mobile-collect-box {
        margin-bottom: 15px;
    }
}
@media (max-width: 540px) {
    .mobile-collect-box {
        margin-bottom: 10px;
    }
}
@media (max-width: 500px) {
    .red-line-bottom-right{
        margin-top: -160px !important;
        width: 200% !important;
    }
    
    .brands-slide .slick-prev{
        z-index: 100;
        left: 0px;
        top:46% !important;
    }
    .brands-slide .slick-next{
        right: 0px !important;
        top:46% !important;
    }
    .collect-box-fst-txt{
        font-size: 0.8rem !important;
   }
   .collect-box-pnts-txt{
       font-size: 0.9rem !important;
       margin-top: 3px !important;
       margin-bottom: 3px !important;
   }
   .collect-box-inner{
    padding-top: 5px;
    padding-bottom: 5px;
    }
    .padding-collect-box{
        padding-left: 20px;
        padding-right: 20px;
    }
    
}
@media (max-width: 420px) {
    .left-red-lines{
        left: 0;
        height: 50px;
    }
    .collect-point-box-en{
        margin-bottom: 0px !important;
    }
}
@media (max-width: 400px) {
    .collect-box-fst-txt{
        font-size: 0.7rem !important;
   }
   .collect-box-pnts-txt{
       font-size: 0.8rem !important;
       margin-top: 3px !important;
       margin-bottom: 3px !important;
   }
   .collect-box-inner{
    padding-top: 4px;
    padding-bottom: 4px;
    }
}
@media (max-width: 376px) {
    .right-white-lines{
        height: 100px;
    }
    .box-inner-content h1{
        font-size: 18px !important;
    }
    .box-inner-content h3{
        font-size: 15px;
    }
    .box-inner-content h2{
        font-size: 15px;
        /* margin-top: 5px !important; */
    }
    .head-sub-m{
        font-size: 17px !important;
    }
    .brand-shop-now {
        font-size: 17px !important;
    }
    .date-letter-spacing {
        font-size: 17px !important;
    }
    
    
}
@media (max-width: 350px) {
    .padding-lr-m{
        padding-left:25px !important;
        padding-right: 25px !important;
    }
    .left-red-lines{
        left: 0;
        height: 60px;
    }
    .collect-box-fst-txt{
        font-size: 0.5rem !important;
   }
   .collect-box-pnts-txt{
       font-size: 0.6rem !important;
   }
   .collect-box-inner{
       padding-top: 1px;
       padding-bottom: 1px;
   }
   .red-line-bottom-right{
    margin-top: -120px !important;
    width: 200% !important;
    }
}