#demonote { display: none !important;}
img[src*="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png"] {
    display: none !important;}
*{
    box-sizing: border-box;
}
body{
  
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'El Messiri', sans-serif;
}
p{
     font-family: 'Almarai', sans-serif !important;
}
.navsection{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    transition: all 0.3s ease-in-out;
    z-index: 997;
}
.navsection .navbar{
    box-shadow: none !important;
}
.navsection .navbar ul li{
    margin: 0 10px;
    font-size: 17px;
    color: #fff;
    background: transparent;
    font-weight: 500;
    
}
.navsection .navbar ul{
    direction: rtl;
}

.navsection .navbar ul li a{
    background: transparent !important;
    font-family: 'El Messiri', sans-serif;
    color: #fff !important;
    text-shadow: 2px 2px 2px black;
}
.navsection .navbar ul li a:hover{
  transition: all  0.3s ease-in-out;
  color: #1a80b6 !important;
  
}
.navsection .navbar ul .active a{
    color: #1a80b6 !important;
}
@media (max-width: 575.98px) { 
    .navsection .navbar ul{
        background: #000;
    }
 }

.blanav{
    background: rgba(67, 59, 40, 0.7);
}
header{
    background: url(../img/bg.jpg) center;
    background-size: cover;
  background-repeat: no-repeat;
    position: relative;
    text-align: center;
    width: 100%;
    height: 100vh;
    display: table;
    background-position: center;
    background-attachment: fixed;
    }
    
    header .main{ 
        margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    
    }
    header .main .tab{
        position: relative;
    
    display: block;
    z-index: 100;
    }
    header .main .head h2{
    text-shadow: 1px 1px 6px black;
    font-weight: 700;
    }
    header .main i{
        cursor: pointer;
    }
    /*abou*/

    .about{
        padding: 50px 0;
        direction: rtl;
    }
    .about h3{
        font-size: 50px;
    }
    .about a{
        font-size: 17px;
        font-style: italic;
        font-weight:400;
        color: #333;
        padding: 15px 70px;
    }
    .about nav .active{
        border-top: 4px solid #2c2314 !important;
    }
    .about p{
        color: #6d6868;
        margin: 20px 0 20px;
        font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    letter-spacing: 0px;
    font-style: normal;
    font-size: 17px;
    line-height: 1.7;
    text-align: right;
    }
    .about .break{
        width: 5%;
    border-top: 2px solid #ddd;
    margin-top: 30px;
    margin-bottom: 50px;
    }

    .about img:hover{
        transition: all 1s ;
    }
    /*products*/
    .products .content{
        background: #2c2314;
        position: relative;
    }
    .products .content h3{
        font-size: 33px;
    line-height: 50px;
    color: #fff;
  
    }
    .owl-carousel .owl-stage {
        display: flex;
        align-items: center;
      }
    .custom-nav {
        position: absolute;
        top: 40%;
        left: 0;
        right: 0;}

        .custom-nav .owl-prev, .owl-next {
            position: absolute;
            height: 100px;
            color: #333 !important;
            background: none;
            border: none;
            z-index: 100;
            outline: none;
            border: none;
            box-shadow: none;
        }

        .custom-nav i {
                font-size: 3rem !important;
                color: #333 !important;
            }
        

            .custom-nav .owl-prev {
            left: 20px;
        }

        .custom-nav .owl-next {
            right: 20px;
        }
    /*************/
    .par{
        padding: 70px;
        direction: rtl;
    }
    .par .cont{
        padding: 10px 20px;
    }
    .par p{
        letter-spacing: 1px;
    font-style: italic;
    font-size: 21px;
    color: rgba(51, 51, 51, .9);
    
    line-height: 1.56;
    }
    @media (max-width: 575.98px) { 
        .par .cont{
            padding: 0;
        }
     }
     /*********/
     .images{
         margin-bottom: 60px;
         direction: rtl;
         color: #fff;
     }
     .images img{
        background-size: cover;
        width: 100%;
        height: 100%;
     }
     .images div{
         padding: 0;
     }
     .images .view{
        margin: 0;
        width: 100%;
        height: 100%;
     }
     .images .content{
         padding:80px 0;
     }
     .images .content p{
         padding: 0 50px;
         color: #fff;

         font-weight: 400;
    line-height: 1.56;
    letter-spacing: 1px;
    
    
     }
     .images h3{
        color: #fff;
     }
     .images .break{
        width: 5%;
        border-top: 2px solid #747474;
        margin-top: 30px;
        margin-bottom: 50px;
     }
     .images img:hover{
         transform: scale(1.1);
         transition: all 0.8s ease-out;
     }
     /*************************/
     .kinds{
        direction: rtl;
     }
     .kinds .pics{
         background: #2c2314;
         padding: 30px 0;
     }
     .kinds .pics .all{
         margin: 20px 0;
     }
     .kinds .pics .btn{
        background-color: #4ab3e8;
        padding: 15px 30px;
       
        color: #fff;
        font-size: 13px;
        font-weight: bold;
        line-height: 20px;
        text-decoration: none;
        text-shadow: -1px 0 0 rgba(0,0,0,0.2);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        transition: background .3s;
     }
     .kinds .pics h3{
        margin-bottom: 0;
        color: #fff;
        line-height: 1.76;
        letter-spacing: 1px;
        font-style: italic;
     }
     /****************/
     /*call to action*/
     .call{
         margin: 70px 0;
         background: url(../img/call-to-action.jpg) center;
        background-repeat: no-repeat;
        width: 100%;
        height: 55vh;
        color: #fff;
        display: table;
        margin-bottom: 0;
        direction: rtl;
        background-size: cover;
     }
     .call .main{
        display: table-cell;
        margin: 0 auto;
        display: table-cell;
        vertical-align: middle;
        color: #fff;
     }
     .call .main .content{
        position: relative;
        display: block;
        z-index: 100;
        padding: 200px;
        text-align: center;
        background-color: rgba(67, 59, 40, 0.7);
        background-position: left top;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        width: 100%;
        height: 100%;
     }
     @media (max-width: 575.98px) {
        .call{
           display: none;
        }
     }
/**************************/
/*form*/
.contactus{
    direction: rtl;
}
.contactus .info{
    background: #f6f6f6;
    padding: 50px 20px;
}

.contactus .info .form-group input,
.contactus .info .form-group textarea{
    outline: none;
    border-radius: 2px;
    box-shadow: none !important;
    color: #333;
    font-size: 14px;
    background: #eaeaea;
    border: 1px solid #eaeaea;
}
.contactus .info h6{
    color: #1a80b6;
    margin-bottom: 20px;
}
.contactus .btn{
    float: right;
}
@media (max-width: 575.98px) {
    .contactus .info{
       text-align: center;
    }
 }

/*form*/
/*footer*/
footer{
    background: #212121;
    padding:  50px 0;
    color: #fff;
    direction: rtl;
    text-align: right;
    
}

footer .information ul li{
    padding: 7px 0;
    font-size: 15px;
    text-align: right;
}
footer .information ul li span{
    padding: 0 7px;
}
footer .information input{
    box-shadow: none !important;
    outline: none;
}

footer .information hr{
    width:120px;
    margin-bottom: 8px;
    background: #fff;
    margin: 0;
}
@media (max-width: 575.98px) {
    footer{
       text-align: center;
    }
    
    footer .information hr{
        margin-right: 165px !important;
    }
 }
/*footer*/
.copy{
    background: #282a2b;
    color: #fff;
    font-size: 14px;
    padding: 20px 0 10px 0;
    margin: 0;

}
.modal{
    display: none;
    

}
.modal h4{
    color: #000;
    font-size: 15px;
    font-weight: 400;
    text-transform: capitalize;
}
.modal form{
    direction: rtl;
}
.modal p{
    text-align:right;
    color: #2c2314;
    font-size: 14px;
}
.modal .btn{
    background: #4ab3e8;
    color: #fff;
}
#demonote { display: none !important;}
img[src*="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png"] {
    display: none !important;}