/*

blue:#2ac2e0
light:#f7f7f7 
dark2:#3a3d44

--------------

font-family : cairo / lemonada / Lato

*/


a:hover{
   text-decoration:none 
}

.main-container{
    display: none;
}

/*-- loading --*/


.loading{
    width:100%;
    height:100%;
    background-color:#3a3d44;
    position:absolute;
    z-index:99 ;
    
   
}

.loading .box{
   width:10%;
   position:relative;
   left: 44%;
   top: 300px;
 
    
    
}

.loading .box span{
    display:block;
    position:absolute;
    width:20px;
    height:20px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
    border-radius:50%;
    box-shadow:0 3px 30px white;
    background-color:#2ac2e0;
    opacity:0.7; 
    -webkit-animation:snake 1.5s ease-in-out infinite;
    -moz-animation:snake 1.5s ease-in-out infinite;  
    -o-animation:snake 1.5s ease-in-out infinite;  
    animation:snake 1.5s ease-in-out infinite;  
        
}

.loading .box span:nth-of-type(2){
    left:25px;
    -webkit-animation-delay:.2s;
    -moz-animation-delay:.2s;
    -o-animation-delay:.2s;
    animation-delay:.2s;
}

.loading .box span:nth-of-type(3){
    left:50px;
    -webkit-animation-delay:.4s;
    -moz-animation-delay:.4s;
    -o-animation-delay:.4s;
    animation-delay:.4s;
}

.loading .box span:nth-of-type(4){
    left:75px;
    -webkit-animation-delay:.6s;
    -moz-animation-delay:.6s;
    -o-animation-delay:.6s;
    animation-delay:.6s;
}

.loading .box span:nth-of-type(5){
    left:100px;
    -webkit-animation-delay:.8s;
    -moz-animation-delay:.8s;
    -o-animation-delay:.8s;
    animation-delay:.8s;
}


@keyframes snake{
    
    0%{
        opacity:.9; 
         transform:translate(0,0) 
    }
    
    50%{
        opacity:.2; 
       transform:translate(0,-20) 
    }
    
   100%{
        opacity:.9; 
        transform:translate(0,0) 
    }
}

-webkit-@keyframes snake{
    
    0%{
        opacity:.9; 
         transform:translate(0,0) 
    }
    
    50%{
        opacity:.2; 
       transform:translate(0,-20) 
    }
    
   100%{
        opacity:.9; 
        transform:translate(0,0) 
    }
}




/*-- media --*/

@media(max-width:800px){
    
    
    
    .loading .box{
         position:relative;
        left:42%;
    }
}

@media(max-width:600px){
    
    
    
    .loading .box{
        position:relative;
        left:37%;
         top:300px;
    }
}

@media(max-width:360px){
   
    
    .loading .box{
        position:relative;
        left:33%;
        top:280px;
    }
}

@media(max-width:320px){
    
   
    
    .loading .box{
        position:relative;
        left:32%;
        top:250px;
    }
}


/*-- End loading --*/
/*-- start upper-bar --*/


.upper-bar{
    width:100%;
    padding:10px 0;
    background-color:#3a3d44;
    color:#e0e0e1;
    
    font-family:Lato 
        
    
}

.upper-bar i{
    color:#2ac2e0;
    margin-left:10%
}

.upper-bar .col-lg-12{
    padding-left:13%
}


/*-- responsive --*/


@media(max-width:991px){
    
    .upper-bar .col-lg-12{
        padding-left:0
    }
    
    
}

@media(max-width:767px){
    
    .upper-bar .col-lg-12{
        padding-left:0
    }
    
    .upper-bar i{
        margin-left:5%
    }
    
}

@media(max-width:600px){
    
    .upper-bar .col-lg-12 .loc{
        display:none 
    }
    
    .upper-bar .col-lg-12{
        padding-left:8%
    }
    
    .upper-bar i{
        margin-left:13%
    }
    
    
}

@media(max-width:468px){
    
    .upper-bar .col-lg-12{
        padding-left:0;
        
    }
    
    .upper-bar i{
        margin-left:5%
    }
}

@media(max-width:357px){

    .upper-bar i{
        margin-left:25%
    }
    
    .upper-bar .fa-phone{
        margin-left:33%
    }
}


/*----------------------------------------------- End upper-bar ----------------------------------------------*/
/*----------------------------------------------- Strat navbar ----------------------------------------------*/


.navbar{
    width:100%;
    height:90px;
    position:fixed;
    z-index:5;
    background-color: white;
   
   
}

.navbar .navbar-brand img{
   width:180px;
    height:70px;
    margin-right:8%;
    margin-top:-3px;
}

.navbar ul{
    
    margin-left:20%;
   
}

.navbar .fa-shopping-cart{
    color:#2ac2e0;
    position:absolute;
    right:10%;
        top:30px
}

.navbar .count{
    width:20px;
    text-align:center; 
    font-size:12px; 
    background-color:#ec1c23;
    border-radius:50%;
    color:white;
    position:absolute;
    right:9%;
    top:22px;
    padding:1px 0 ;
}

.navbar-light .navbar-nav .nav-link{
    font-family:Raleway;
    color:#3a3d44;
    margin-right:20px;
    font-size:17px 
}

.navbar-light .navbar-nav .active .nav-link{
    color: #2ac2e0
}

.navbar-light .navbar-nav .nav-link:hover{
     color: #2ac2e0
}


/*-- responsive --*/


@media(max-width:1225px){
    .navbar ul{
        margin-left:5%;
    }
}

@media(max-width:1131px){
    
    
    .navbar ul{
        margin-left:16%;
    }
    
    .navbar .navbar-brand img{
       width:150px;
        height:60px;
        margin-right:8%;
        margin-top:-3px;
}
}

@media(max-width:991px){
    
    .navbar .navbar-collapse{
        margin-top:16px;
        width:100%;
        margin-left:-25%
    }
    
    
    .navbar ul{
       background-color:white;
        text-align:left;
        padding:0;
        width:117%
        
    }
    
    .navbar .bag{
        position: absolute;
        left:56%;
        top:3px;
    }
    
    .navbar-light .navbar-nav .nav-link{
   
        color:#3a3d44;
        padding-left:20px;
         margin-right:0;
        font-size:18px;
         border-bottom:solid thin #ddd;
      
    
    }   


    
   
}

@media(max-width:500px){
     .navbar .navbar-brand img{
        width:120px; 
        margin-left:-12%;
        margin-top:-3px;
    }
    
      .navbar ul{
        width:120%
        
    }
    
    .navbar-light .navbar-nav .nav-link{
   
        color:#3a3d44;
         margin-right:0;
        font-size:18px;
         border-bottom:solid thin #ddd;
      
    
    }   
}



/*----------------------------------------------- End navbar ----------------------------------------------*/
/*----------------------------------------------- Start header ----------------------------------------------*/


.slide{
    margin-top:80px;
     
}

.carousel-inner{
    position:relative
}

.carousel-inner img{
    height:600px;
     
}

.carousel-inner .carousel-item .news{
     width:70%;
     height:100%;
     position:absolute;
     top:0;
     right:40%;
     background-color:#ec1c23;/*#262e70*/
     -weblit-opacity:0.8;
     -moz-opacity:0.8;
     -o-opacity:0.8;
     -webkit-transform:skewX(20deg);
     -moz-transform:skewX(20deg);
     -o-transform:skewX(20deg);
     transform:skewX(20deg);
     opacity:0.8;
     z-index:2 
   
}

.carousel-inner .carousel-item  p{
    position:absolute;
    top:150px;
    right:43%;
    width:48%;
    height:185px;
    text-align:left;
    font-family:Raleway;
    font-size:25px;
    color:white;
    z-index:3;
    overflow: hidden;
    
   
}

.carousel-inner .carousel-item .more-news{
    position:absolute;
    top:350px;
    right:78%;
    padding:10px 70px 0 0;
    text-align:right;
    background-color: white;
    border:solid  thin white ;
    color:#ec1c23;
    width:14%;
    height:50px;
    font-family:comfortaa;
    font-size:20px;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
    z-index:3;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    -o-border-radius:50px;
    border-radius:50px 
        
    
    
}

.more-news i{
    position:absolute;
    top:8px;
    right:20%;
    padding-top:5px;
    -webkit-animation:move1 2s ease-in-out infinite;
    -moz-animation:move1 2s ease-in-out infinite;
    -o-animation:move1 2s ease-in-out infinite;
    animation:move1 1s ease-in-out infinite;
    
}

@keyframes move1{
    0%{
         right:20%;
    }
    
    50%{
        right:10%
    }
    
    100%{
        right:20%;
    }
}

-webkit-@keyframes move1{
    0%{
         right:60%;
    }
    
    50%{
        right:80%
    }
    
    100%{
        right:60%;
    }
}



/*-- responsive --*/

@media(max-width:1281px){
    
    
    .carousel-inner .carousel-item .more-news{
        position:absolute;
       
        right:70%;
        padding:8px 100px 8px 0;
        width:19%

    }
}

@media(max-width:1090px){
    
    
    .carousel-inner .carousel-item .more-news{
        position:absolute;
       
        right:70%;
        padding:8px 60px 8px 0;
        width:19%

    }
}

@media(max-width:860px){
    
    .carousel-inner img{
    height:300px;
       
    }
    
    .carousel-inner .carousel-item  p{
    position:absolute;
    top:60px;
    right:40%;
    width:50%;
        height:95px;
    font-size:20px;
   
   
    }

    .carousel-inner .carousel-item .more-news{
        position:absolute;
        top:190px;
        right:65%;
        padding-top:10px;
        width:25%

    }
}

@media(max-width:700px){
    
    .carousel-inner .carousel-item  p{
        position:absolute;
        top:50px;
        right:43%;
        height:105px;
        width:47%;
        font-size:18px;
        
   
   
    }

    .carousel-inner .carousel-item .more-news{
        position:absolute;
        top:190px;
        right:63%;
        padding:10px 60px 0 0;
        width:28%

    }
}

@media(max-width:500px){
    
    
    
   .carousel-inner .carousel-item  p{
        position:absolute;
        top:50px;
        right:45%;
        height:105px;
        width:45%;
        font-size:14px;
        
   
   
    }

    .carousel-inner .carousel-item .more-news{
        position:absolute;
        top:190px;
        right:60%;
         padding:13px 60px 0 0;
        width:30%;
        font-size:15px 

    }
}

@media(max-width:400px){
    
    .carousel-inner img{
    height:200px;
       
    }
    
    .carousel-inner .carousel-item .news{
        width:75%;
        right:35%
        
    }
   .carousel-inner .carousel-item  p{
        position:absolute;
        top:30px;
        right:40%;
        height:77px;
        width:50%;
        font-size:13px;
      
        
   
   
    }

    .carousel-inner .carousel-item .more-news{
        position:absolute;
        top:120px;
        right:58%;
        padding:9px 40px 0 0;
        width:34%;
        height:40px;
        font-size:15px 

    }
}

@media(max-width:350px){
    
    
    
    .carousel-inner .carousel-item  p{
        position:absolute;
        top:30px;
        right:40%;
        height:77px;
        width:50%;
        
        font-size:13px;
      
        
   
   
    }

    .carousel-inner .carousel-item .more-news{
        position:absolute;
        top:120px;
        right:50%;
        padding:10px 40px 0 0;
        width:40%;
        height:40px;
        font-size:15px 

    }
}






/*----------------------------------------------- End header ----------------------------------------------*/
/*----------------------------------------------- Start about ----------------------------------------------*/


.about{
    padding:100px 0 ;
    direction:rtl 
    
}

.about .about-img .contain{
   background-image: url('../images/about1.jpg');
   background-size:cover;
   height:430px; 
   position:relative;
    margin-bottom:15px; 
  
   
}

.about .about-img .opacity{
    width:100%;
    height:100%;
    background-color: black;
    opacity:.7;
    position:absolute;
    left:0;
    top:0;
    
}

.about .about-img p{
    
    width:80%;
    color:white;
    font-family:Raleway;
    font-size:40px; 
    position:absolute;
    top:160px;
    left:10%;
    border-top:solid thin #2ac2e0;
    border-bottom:solid thin #2ac2e0;
   text-align: center;
    padding:20px 0;
    z-index:2 ;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
}

.about .about-img p span{
    color:#2ac2e0
}

.about .para{
    font-family:Raleway;
    text-align:left; 
    margin-top:5px;
    font-size:15px;
    color:#2d2d2d;
    line-height:30px;
   
   

    
}




/*-- responsive --*/


@media(max-width:500px){
   
    .about .about-img p{
       font-size:35px; 
    }
   
}

@media(max-width:400px){
    
    .about .about-img p{
       font-size:30px; 
        top:100px;
    }
    
    .about .about-img .contain{
        height:300px
    }
}

@media(max-width:350px){
   
    .about .about-img p{
       font-size:27px; 
    }
   
}




/*----------------------------------------------- End header ----------------------------------------------*/
/*--------------------------------------------- Start products ----------------------------------------------*/


.products{
    width:100%;
    padding:50px 0 50px 0;
    direction:rtl;
    background-color:#3a3d44 ;
    
    
}

.products .part-name{
    width:300px;
    margin-right:37%;
    padding:5px 0; 
    display:block; 
    color:white;
    font-family:comfortaa;
    font-size:40px;
    text-align:center; 
    border-bottom:solid thin #2ac2e0;
     border-top:solid thin #2ac2e0;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
    
}

.products .col-lg-4 .card{
   margin-bottom:10px;
    margin-top:80px;
    -weblit-transition:all .5s ease-in-out ;
    -moz-transition:all .5s ease-in-out ;
    -o-transition:all .5s ease-in-out ;
    transition:all .5s ease-in-out ;

}

.products .col-lg-4 .card-img-top{
    height:250px;
    -webkit-transform:scale(.9);
    -moz-transform:scale(.9);
    -o-transform:scale(.9);
    transform:scale(.9);
    -webkit-transition:all .5s ease-in-out ;
    -moz-transition:all .5s ease-in-out ;
    -o-transition:all .5s ease-in-out ;
    transition:all .5s ease-in-out ;
}

.products .col-lg-4 .card-title{
    font-family:comfortaa;
    text-align:center;
    border-bottom:solid thin #007bff;
    padding-bottom:15px; 
     color:#2d2d2d
}

.products .col-lg-4 .card-text{
     font-family: Raleway;
    text-align: center;
    color:#2d2d2d
}

.products .col-lg-4 .btn-primary{
    width:30%;
    font-size:15px;
    font-family:comfortaa
}

.products .col-lg-4 .btn{
    width:30%;
    margin-top:20px
}

.products .col-lg-4 .price{
    font-size:20px;
    font-family:cairo; 
    color:#ec1c23;
    position:relative;
    left:30%;
    top:10px
}

.products .more{
    color:white;
    font-family:comfortaa;
    font-size:20px;
    text-align:center;
    margin-top:20px;
   
    
}

.products .more i{
    color:white;
    margin-top:5px;
    padding-right:15px ;
    position:absolute;
    -webkit-animation:move2 1s infinite ;
       -moz-animation:move2 1s infinite ;
         -o-animation:move2 1s infinite ;
            animation:move2 1s infinite ;
   
   
}

-webkit-@keyframes move2{
    0%{
        right:53%
    }
    
    50%{
        right:55%
    }
    
    100%{
        right:53%
    }
}

@keyframes move2{
    0%{
        right:45%
    }
    
    50%{
        right:41%
    }
    
    100%{
        right:45%
    }
}


.products .col-lg-4 .card:hover{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    box-shadow:0 0 20px white
}


/*-- responsives --*/


@media(max-width:800px){
    
    .products .part-name{
        margin-right:30%;
    }
    
    @keyframes move2{
    0%{
        right:41%
    }
    
    50%{
        right:35%
    }
    
    100%{
        right:41%
    }
}
    
}

@media(max-width:600px){
    
    .products .part-name{
        margin-right:22%;
    }
    
    @keyframes move2{
    0%{
        right:38%
    }
    
    50%{
        right:32%
    }
    
    100%{
        right:38%
    }
    }
}
    
@media(max-width:500px){
    
    .products .part-name{
        margin-right:18%;
    }
    
    @keyframes move2{
    0%{
        right:36%
    }
    
    50%{
        right:31%
    }
    
    100%{
        right:36%
    }
    }
}    

@media(max-width:400px){
    
    .products .part-name{
        margin-right:5%;
    }
    
    @keyframes move2{
    0%{
        right:31%
    }
    
    50%{
        right:26%
    }
    
    100%{
        right:31%
    }
    }
}
    
@media(max-width:350px){
    
    .products .part-name{
        margin-right:5%;
        font-size:35px;
        width:260px;
    }
    
    @keyframes move2{
    0%{
        right:31%
    }
    
    50%{
        right:26%
    }
    
    100%{
        right:31%
    }
      }
}  


/*----------------------------------------------- End products ----------------------------------------------*/
/*-------------------------------------------- Start contact us --------------------------------------------*/


.contact-us{
    padding-top:100px; 
    
}

.contact-us .col-lg-6{
    margin-bottom:20px;
}

.contact-us .col-lg-6 input , textarea{
    width:100%;
    border:none;
    border-bottom:solid thin #dddddd;
    padding:15px;
    text-align: left;
    font-family:Raleway;
    margin-bottom:15px;
    outline:none; 
    
}

.contact-us .col-lg-6 ul{
    margin-top:10px
}

.contact-us .col-lg-6 ul li{
    width:100%;
    padding:15px;
    background-color:#f7f7f7;
    color:#3a3d44;
    margin-bottom:18px ;
    font-family:lato
}

.contact-us .col-lg-6 ul .address{
   
    font-size:15px; 
}

.contact-us .col-lg-6 ul li:nth-child(3) span{
    margin-left:10%;
    
}

.contact-us .col-lg-6 ul li i{
    color:#2ac2e0;
    padding-right:10px
    
}

.contact-us .s-c{
   margin-right:25px
}

.contact-us button{
    width:130px;
    height:45px;
    background-color:#2ac2e0;
    border:solid thin #2ac2e0;
    color:white;
    font-family:Raleway;
    font-size:18px ;
    text-align:center;
    margin-top:10px;
    padding-right:5px
}

.contact-us #map{
    width:100%;
    height:300px
}

.contact-us button i{
   margin:0 5px ;

}


/*-- End contact us --*/
/*-- Strart copyright --*/


.copyright{
    width:100%;
    height:50px;
    margin-top:50px;
    text-align:center;
    font-family:comfortaa;
    color:white;
    background-color:#3a3d44;
    padding:15px 0 10px 0;
    font-size:15px 
    
}

.copyright a{
    color:#2ac2e0
}


/*-- responsive --*/


@media(max-width:500px){
    .copyright{
        font-size:12px 
    }
    
    .contact-us #map{
        width:90%;
        height:200px;
        margin-left:5%
    }
    
    
}

@media(max-width:400px){
    .copyright{
        font-size:10px 
    }
    
    .contact-us .col-lg-6 ul li:nth-child(3) span{
        margin-left:0;
        display:block

    }
    
    
}


/*----------------------------------------------- team-page ------------------------------------------------*/


.header-team{
    width:100%;
    height:300px;
    background-color:#3a3d44; 
    position:relative;
     display: flex;
    align-items:center;
    justify-content:center;
}

.header-team  p{
    font-size:40px;
    font-family:comfortaa;
    color:white;
    position:relative;
    top:50px;
    
    width:250px;
    padding:10px 0;
    text-align:center; 
    border-top:solid thin #2ac2e0;
    border-bottom:solid thin #2ac2e0;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
    z-index:2 
}




/*-- End header --*/
/*-- Start team --*/


.team{
    padding:100px 0;
    
}

.team .col-lg-4{
    position:relative ;
    margin-bottom:30px 
}

.team .col-lg-4:hover img{
    transform:scale(1.1)
}

.team img{
    width:100%;
    height:400px;
    transition:all 1s ease-in-out 
    
}

.team .frame{
    width:80%;
    height:95%;
    border:solid thin white;
    position:absolute;
    top:10px;
    left:10%;
    z-index:1 

    
}

.team .info{
    width:92%;
    height:100px;
    background-color:black;
    -weblit-opacity:0.6;
    -moz-opacity:0.6;
    -o-opacity:0.6;
    opacity:0.6;
    text-align:center;
    position:absolute;
    top:300px;
    
}

.team p{
    width:100%;
    color:white;
    font-size:20px;
    font-family:Raleway;
    position:absolute;
    top:310px;
    left:5px;
    text-align:center; 
}

.team p span{
    color:#2ac2e0;
    font-size: 15px
}



/*----------------------------------------------- news-page ------------------------------------------------*/


.news{
    padding:100px 0;
}

.news img{
    margin-left:20%;
    width:60%;
    height:400px;
    
}

.news p{
    margin-top:20px;
    font-family:Raleway;
    font-size:18px; 
    text-align:left;
    line-height:30px 
}


/*----------------------------------------------- products-page -----------------------------------------------*/


.products-page{
    background-color:white;
    padding:0 0 100px 0; 
}

.products-page .col-lg-4 .card:hover{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.05);
    box-shadow:0 0 20px black
}

.pagination{
     display: flex;
    align-items:center;
    justify-content:center;
    border:none; 
    color:#2ac2e0;
    
    
}

.pagination th{
    border:solid thin #ddd;
    padding:10px 15px;
    font-family:cairo
}

.pagination th:hover{
    background-color:#f7f7f7
}

/*----------------------------------------------- order-page -----------------------------------------------*/


.order-header{
    width:100%;
    height:300px;
    background-color:#3a3d44;
    text-align:center 
}

.order-header span{
    font-family:Raleway; 
    font-size:30px; 
    color:white;
    position:relative;
    top:170px;
   
    
}

.table{
    margin:100px 0 100px 5%;
    text-align:center; 
    width:90%;
    font-family:Raleway
}

.table th{
    font-size:20px;
    font-weight:normal 
}

.table .num{
    font-family:cairo 
}

.table input{
    width:10%;
   
}

.table .fa-times{
    cursor:pointer
}

.table .total{
    background-color:#2ac2e0;
    color:white
}


.information{
   padding-bottom:100px 
}

.information p{
    font-family:Raleway;
    font-size:20px;
    text-align:left; 
    margin-bottom:30px 
}

.information .row{
    text-align:left; 
}

.information .col-lg-4 input{
    width:90%;
    border:none;
    border-bottom:solid thin #dddddd;
    padding:15px;
    text-align: left;
    font-family:Raleway;
    margin-bottom:15px;
    outline:none; 
}

.information button{
    width:150px;
    height:45px;
    background-color:#2ac2e0;
    border:solid thin #2ac2e0;
    color:white;
    font-family:Raleway;
    font-size:18px ;
    text-align:center;
    margin-top:30px;
    margin-left:45%;
    padding-right:5px;
    cursor:pointer
}

.information button i{
   margin-left:10px;

}


/*-- responsive --*/


@media(max-width:400px){
    
    .table{
        margin-left:-1%;
        font-size:13px 
        
    }
    
    .table th{
        font-size:13.5px 
    }
    
    .table input{
        width:60%;
        
    }
}

@media(max-width:350px){
    
    .order-header span{
        font-size:25px 
    }
    
    .table{
        margin-left:-1%;
        font-size:11px;
       
    }
    
    .table th{
        font-size:11px 
    }
    
    .table input{
        width:70%;
       
    }
}



/*------------------------------------------------- responsive ----------------------------------------------*/



@media(max-width:800px){
    
   
    
    .news img{
        margin-left:0;
        width:100%;
        height:400px;

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

@media(max-width:600px){
    
    
    .header-team , .header-news{
        height:300px
    }
}

@media(max-width:400px){
    
   
    
    .header-team ,.header-news{
        height:250px
    }
    
    .news img{
        margin-left:0;
        width:100%;
        height:300px;

    }
    
    .news p{
        font-size:15px 
    }
}