@import url(asrarfonts.css);

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
img{
    max-width: 100%;
    vertical-align: top;
}

body {
    /*font-family: 'Source Sans Pro', 'Noto Kufi Arabic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-family: 'Noto Kufi Arabic';*/
    font-weight: 400;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fff;
}
.varifaction_img {
    float: left;
    margin-left: 30px;
    margin-top: -54px;
    padding: 10px;
}

header{
}

footer{
    background: #fff;
}

#site_footer {
    text-align: center;
    background-color: #fff;
    padding-bottom: 1px;
}
.contact_container {
    padding-top: 12px;
}
.contact_container h3 {
    margin-bottom: 4px;
    color: #222;
    font-weight: 900;
    font-size: 22px;
    font-family: Tajawal!important;
}
.footer_menu {
    padding-top: 12px;
    direction: ltr;
}
ol, ul {
    list-style: none;
}
#site_footer{
    font-family: Tajawal;
}
#site_footer .contact_container li {
    padding: 10px 0;
    display: inline-block;
}
.social_icons li {
    display: inline-block;
}
.social_icons li a {
    width: 35px;
    height: 35px
}
#site_footer .contact_container li a, ul#footer_menu a, ul.footer_menu a {
    font-size: 14px;
    font-weight: 100;
    color: #222;
}

#site_footer a {
    display: block;
    font-family: Tajawal!important;
    font-size: 12px;
}
.footer_menu li a {
    display: block;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 100;
    color: #222;
    text-decoration: none;
}
ul#footer_menu a, ul.footer_menu a {
    padding: 4px;
    position: relative;
}
ul#footer_menu li:first-child a:before, ul.footer_menu li:first-child a:before {
    border: 0;
}

ul#footer_menu a:before, ul.footer_menu a:before {
    content: "";
    border-right: 1px solid #222;
    padding: 5px 0;
    position: absolute;
    left: -3px;
    top: 14px;
}
[class^=icon-] {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    text-align: center;
}
.social_icons li a.icon-instagram {
    background-image: url(../images/instagram.png)
}
.social_icons li a.icon-facebook {
    background-image: url(../images/facebook.png)
}
.social_icons li a.icon-twitter {
    background-image: url(../images/twitter.png)
}
.social_icons li a.icon-youtube {
    background-image: url(../images/youtube.png)
}
.social_icons li a.icon-googlePlus {
    background-image: url(../images/google-plus.png)
}
.copyright {
    /*margin-top: 20px;*/
    font-size: 16px!important;
    font-weight: 100;
    color: #222;
    padding: 12px 0;
    direction: rtl;
    font-family: Tajawal!important;
}
h1{
    font: 40px/45px 'Arial', sans-serif;
    padding: 10px 0;
    color: #fff;
    text-align: center;
}

h1, h2, h3, h4{
    font-family: 'Arial', sans-serif;
}

h2{
    font: 35px/35px 'Arial', sans-serif;
    margin: 50px 0;
}

h3{
    font: bold 36px/45px 'Arial', sans-serif;
    text-align: center;
}

h4{
    font: 20px/30px 'Arial';
    margin: 8px 0 15px;
    padding: 0 50px;
}

p, li{
    font: 18px/32px 'Arial', sans-serif;
}
#qtys_no{display: none;margin: 0 auto 10px;width: 305px; text-align: center;font: 16px 'Tajawal','Arial', sans-serif;}
#qtys_no2{display: none;margin: 0 auto 10px;width: 305px; text-align: center;font: 16px 'Tajawal','Arial', sans-serif;}

ul{
    margin: 20px 0;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon.wh-messenger-bg-whatsapp {
    background: url(../img/instagram.png);
    background-size: contain;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon {
    float: left;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
    font-size: 28px;
    text-align: center;
    line-height: 50px;
    color: white;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list {
    margin: 10px;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    position: fixed;
    bottom: 10px;
    text-align: center;
    left: 10px;
    z-index: 99;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button.wh-widget-button-activator div.wh-widget-button-icon>div {
    height: 100%;
    width: 100%;
    -moz-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    -webkit-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon .wh-svg-close {
    display: none;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon svg {
    fill: white;
    width: 41px;
    height: 50px;
}

.photo{
    text-align: center;
}

.pad_front{
    padding-top: 25px;
    margin-bottom: 40px;
}

.photo p{
    text-align: left;
    margin: 40px 0;
    font-size: 18px;
    line-height: 25px;
}

.use p{
    font: 20px/35px 'Arial', sans-serif;
}

.use{
    margin-bottom: 50px;
}

p.sd{
    width: 74%;
    margin-left: 17%;
    margin-top: 40px;
    font-size: 22px;
    line-height: 30px;
}

.galaxy{
    text-align: center;
    background-color: #07051d;
    font-size: 0;   
    height: 469px;
    margin: 10px 0 140px;
}

header{
    margin-bottom: 40px;
}

footer{
    margin-top: 50px;
margin-top: 00px;
}

header .left_head{
    float: left;
    width: 60%;
    text-align: center;
    padding-top: 0px;
}
footer .left_head{
    float: left;
    width: 60%;
    text-align: left;
}

.left{
    float: left;
    width: 50%;
    margin-right: 50px;
}
.uses{
    padding-bottom: 25px;
}

.uses h3{
    padding-top: 25px;
}

.uses p{
    margin: 125px 0;
}


img.left{
    width: 50%;
}

h6{
    font: 24px/32px 'Arial', sans-serif;
    text-transform: uppercase;
}

.hand{
    overflow: hidden;
    background: url(../img/desc1.png) left center no-repeat;
    background-size: 41%;
    padding: 50px 0;
}

.features p{
    font: 18px/28px 'Arial', sans-serif;
    padding: 20px 0 40px;
}
.features p.center_text{
    padding-top: 90px;
}

.features img{
    margin: 0 auto;/*30px auto;*/
    display: block;
    max-width: 100%;
}

.comment{
    overflow: hidden;
    margin-bottom: 50px;
}

.comment:nth-of-type(3){
    margin-bottom: 20px;
}

.comment p{
    font-size: 16px;
    line-height: 26px;
}

.center{
    text-align: center;
}

.intro img{
    vertical-align: middle;
    max-width: 49%;
}

.center_block{
    margin: 0 auto;
    display: block;
}
.gallerry{
    text-align: center;
}
.score{
    text-align: center;
    padding: 0;
}

.score img{
    margin: 0 20px;
}

.suggest .col img{
    margin-bottom: 25px;
}

.col img{
    margin-bottom: 5px;
}
.left_head p{
    text-align: center;
    font: 26px/40px 'Arial', sans-serif;
    color: #000;
    text-transform: uppercase;
}

header .left_head img{
    width: 100%;
    margin-top: 0;
}

footer .left_head img{
    width: 94%;
    margin-top: 20px;
}

.front .col1{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.right{
    float: right;
}

.desacr{
    text-align: center;
}

.desacr img:nth-of-type(1){
    margin: 0 20px 0 10px;
}

.desacr img{
    max-width: 47%;
    vertical-align: middle;
}

.constructor{
    overflow: hidden;
}

.constructor img{
    width: auto;
}

.constructor img:nth-of-type(1), .constructor img:nth-of-type(2){
    margin: 0 38px;
}

.constructor img:nth-of-type(3){
    margin-left: 87px;
}

ul, ol{
    padding-left: 25px;
    padding-right: 10px;

}

.score img{
    max-width: 100%;
    vertical-align: middle;
}

.score p, .hand p{
    font: 20px/30px 'Arial', sans-serif;
    text-align: left;
    margin: 15px 0;
    padding-left: 40%;
}
.hand ul{
    margin: 120px 0 120px 500px;
}
.upper{
    text-transform: uppercase;
}

.head_p{
    color: #bd3457;
    font: bold 32px/40px 'Arial', sans-serif; 
    padding: 8px 0 15px;
    text-align: center;
}
.full{
    width: 100%;
}

.hand .text-left{
    text-align: left;
    margin-bottom: 50px;
}

.comment .left{
    width: 200px;
}

.text-center{
    text-align: center;
}

.descript{
    margin: 40px auto;
    
}
.descript .right{
    width: 350px;
    margin-bottom: 50px;
    margin-left: 40px;
}

.descript h5{
    font: 29px/40px 'Arial', sans-serif;
    padding-left: 10px;
    padding-top: 75px;
}

.col1{
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.col2{
    width: 35%;
    margin-right: 7%;
    display: inline-block;
}

.center_text{
    text-align: center;
}

@media (min-width: 992px){
	
}


@media (min-width: 768px) and (max-width: 991px){
	
    p.sd {
        width: 96%;
        margin-left: 3%;
    }
    header .left_head{
        padding-top: 0;
        width: 50%;
        margin: 5px auto 0;
        padding: 0;
    }
    .left_head p {
        font: 23px/35px 'Arial', sans-serif;
    }
    .galaxy{
        height: auto;
        margin-bottom: 0;
        background: none;
    }
    .galaxy img{
        max-width: 50%;
    }
    .features p{
        font: 17px/24px 'Arial', sans-serif;
        padding: 20px 0 20px;
    }
    .hand ul {
        margin: 85px 0 86px 400px;
    }
    .col3 {
        width: 245px;
    }
    li{
        font-size: 16px;
    }
    header .left_head img{
        width: 100%;
    }
    .descript h5{
        padding-top: 60px;
    }
    footer .left_head img{
        margin-top: 50px;
    }
}

@media (min-width: 768px){
    .desc_none{
        display: none;
    }
}
@media (max-width: 767px){
	
    header .left_head, footer .left_head, .left{
        float: none;
        width: 100%;
        padding-top: 0;
    }
    .right{
        float: none;
        width: 65%;
    }
    header .left_head{
        padding-top: 5px;
    }
    header .left_head img, footer .left_head img{
        width: 100%;
        display: block;
        margin: 0px auto 15px;
        max-width: 450px;
    }
    footer .left_head img{
        width: 90%;
    }
    h1 {
        font: 20px/30px 'Arial', sans-serif;
    }
    h3{
        font-size: 30px;
    }
    .col{
        display: block;
        width: 100%;
    }
    h2, h3, h4, p, h6, .features p{
        padding-left: 10px;
        padding-right: 10px;
    }
    p, li{
        font-size: 18px;
    }
    h2{
        margin: 30px 0;
    }
    
    p.sd{
        width: 100%;
        margin: 10px 0 25px;
    }
    .comment{
        margin-bottom: 20px;
    }
    .comment img{
        width: 200px;
        margin-bottom: 15px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    header{
        margin-bottom: 15px;
    }
    
    footer{
        padding-bottom: 20px;
    }
    
    .mob_none{
        display: none;
    }
    
    .constructor img:nth-of-type(1), .constructor img:nth-of-type(2), .constructor img:nth-of-type(3){
        margin: 10px 0;
    }
    .galaxy{
        margin-bottom: 0;
        height: auto;
    }
    
    .app{
        margin-bottom: 15px;
    }
    
    .galaxy{
        height: auto;
        background: none;
    }
    .left_head p:first-child {
        font-size: 20px;
        line-height: 32px;
        margin: 0 0 10px;
    }
    img.left{
        width: 100%;
        margin-bottom: 25px;
    }
    .score p, .hand p {
        font: 20px/30px 'Arial', sans-serif;
        margin: 0px 0 15px;
        text-align: center;
    }
    .hand p {
        margin: 0px 0 5px;
    }
    .score{
        padding: 10px 0;
    }
    .score img {
        max-width: 100%;
        margin: 0 auto;
        vertical-align: middle;
        display: block;
    }
    .descript{
        margin: 0;
    }
    .descript .right{
        margin-bottom: 0;
    }
    .hand{
        background: none;
        padding: 0;
    }
    .hand img{
        margin: 40px auto;
    }
    .hand p{
        padding-left: 0;
        font-size: 18px;
    }
    .hand ul{
        margin: 0 0 50px;
    }
    .score p.upper{
        margin-bottom: 35px;
    }
    .head_p{
        font-size: 22px;
        padding-bottom: 0;
        line-height: 34px;
    }
    .uses{
        padding: 0;
    }
    .uses p {
        margin: 25px 0;
    }
    footer .head_p{
        padding-top: 0;
    }
    .col1, .col2{
        display: block;
        width: 100%;
        margin: 0;
    }
    .features p.center_text{
        font-weight: bold;
        margin: 0;
        padding: 0;
    }
    .descript .right{
        width: 100%;
        margin-left: 0;
    }
}
@media (max-width: 359px){
    .form_block{
        width: 320px;
    }
    .descript .right{
        width: 100%;
        margin-left: 0;
    }
}


/* New CSS */
.bg-size-cover {
                background-size: cover;
                 
            }
            .bg-repeat-no {
              background-repeat:no-repeat;  
            }
            .bg-gray {
                background-color: #DADADA !important;
            }
            .btn-submit {
                cursor: pointer;
                outline: none;
                display: block;
                font-size: 33px;
                color: #948e8e;
                text-transform: uppercase;
                font-family: 'Tajawal','Arial', serif;
                font-weight: bold;
                text-align: center;
                border-radius: 5px;
                border: none;
                padding: 15px 0;
                background-color: #000;
                color: #FFF;
                text-shadow: -0.848px 0.53px 0px rgba(0, 0, 0, 0.44);
                box-shadow: -0.848px 0.53px 2px 0px rgba(0, 0, 0, 0.79);
                background: rgba(0, 0, 0,1);
                background: -moz-linear-gradient(top, rgba(0, 0, 0,1) 0%, rgba(16, 18, 19,1) 25%, rgba(59, 62, 64,1) 50%, rgba(24, 26, 27,1) 75%, rgba(0, 0, 0,1) 100%);
                background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0,1)), color-stop(25%, rgba(16, 18, 19,1)), color-stop(50%, rgba(59, 62, 64,1)), color-stop(75%, rgba(24, 26, 27,1)), color-stop(100%, rgba(0, 0, 0,1)));
                background: -webkit-linear-gradient(top, rgba(0, 0, 0,1) 0%, rgba(16, 18, 19,1) 25%, rgba(59, 62, 64,1) 50%, rgba(24, 26, 27,1) 75%, rgba(0, 0, 0,1) 100%);
                background: -o-linear-gradient(top, rgba(0, 0, 0,1) 0%, rgba(16, 18, 19,1) 25%, rgba(59, 62, 64,1) 50%, rgba(24, 26, 27,1) 75%, rgba(0, 0, 0,1) 100%);
                background: -ms-linear-gradient(top, rgba(0, 0, 0,1) 0%, rgba(16, 18, 19,1) 25%, rgba(59, 62, 64,1) 50%, rgba(24, 26, 27,1) 75%, rgba(0, 0, 0,1) 100%);
                background: linear-gradient(to bottom, rgba(0, 0, 0,1) 0%, rgba(16, 18, 19,1) 25%, rgba(59, 62, 64,1) 50%, rgba(24, 26, 27,1) 75%, rgba(0, 0, 0,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9c6f6', endColorstr='#6373aa', GradientType=0 );
            }
            .btn-submit:hover{
                color: #fff;
            }
            .bxslider {
                max-height: 250px;
            }
            .bx-wrapper {
                width: 100% !important;
                max-width: 100% !important;
            }
            .box-shadow {
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
                -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
                -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
            }
            .no-pad {
                padding: 0 !important;
            }
            .no-mar {
                margin: 0 !important;
            }
            .main-header {

            }
            /* overlay styles, all needed */
            .overlay {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: rgba(0,0,0,0.5);
                z-index: 10;
            }

.swiper-container {
      width: 100%;
      height: 100%;
      display: flex;
    }
    .swiper-container .swiper-wrapper .swiper-slide {
      position: relative;
      padding: 2px;
      height: auto;
      text-align: center;
      font-size: 18px;
      background: #fff;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct {
      display: block;
      text-decoration: none;
      position: relative;
      padding-bottom: 15px;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .imageContainer {
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .imageContainer .containerLoaded .mediaContainer img.productImage {
      width: 100%;
      margin-top: 15px;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer {
      margin: 10px;
      margin-top: 0;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .productTagContainer .productTag {
      background-color: #ff0505;
      position: absolute;
      display: inline-block;
      font-size: 10px;
      height: 18px;
      line-height: 18px;
      color: #ffffff;
      max-width: 100%;
      box-sizing: border-box;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0px 5px;
      border-radius: 0px 2px 2px 0px;
      overflow: hidden;
      top: 3px;
      left: 0px;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .name {
      
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .name .productTitle {
      overflow: hidden;
      color: #524c4c;
      font-style: 16px;
    }

    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price .sellingPrice span.currency {
      font-size: 70%;
      font-weight: normal;
      color: #524c4c;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price .sellingPrice span.value {
      font-size: 100%;
      font-weight: normal;
      color: #524c4c;
    }

    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price .preReductionPrice span.currency {
      font-size: 70%;
      font-weight: normal;
      color: #524c4c;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price .preReductionPrice span.value {
      font-size: 80%;
      font-weight: normal;
      color: #524c4c;
    }

    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price  span.currency {
      font-size: 70%;
      font-weight: normal;
      color: #524c4c;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price  span.value {
      font-size: 100%;
      font-weight: normal;
      color: #524c4c;
    }

    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price span.preReductionPrice {
      text-decoration: line-through;
      color: #524c4c;
    }

    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .discountFulfilmentRow .discountFulfilmentContent .fulfilmentContainer {
      display: inline-block;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .discountFulfilmentRow .discountFulfilmentContent .fulfilmentContainer .jsxContainer img.fbn {
      height: 20px;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .discountFulfilmentRow .discountFulfilmentContent span.discountTag {
      background-color: #b2f3b2;
      padding: 3px 3px;
      font-size: 60%;
      display: none;
    }
    .swiper-container .swiper-wrapper .productContainer:first-child {
      margin-left: 0px;
    }

@media (min-width: 320px){
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price .preReductionPrice span.currency {
      font-size: 50% !important;  
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price .preReductionPrice span.value {
      font-size: 60% !important;
      
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price  span.currency {
      font-size: 50% !important;
    }
    .swiper-container .swiper-wrapper .swiper-slide .wrapper a.jproduct .detailsContainer .priceRow .price  span.value {
      font-size: 80% !important;
    }
}