body{
    font-family: "Noto Kufi Arabic", sans-serif;
}
/* ---------start header------- */


.head-mobile .mobile-item{
   padding: 0;
   margin: 0;
   position: fixed;
   bottom: 0;
   height:60px;
   align-items: center;
   list-style: none;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   width: 100%;
   background-color: #fff;
   overflow: hidden;
   z-index: 1002;
 
  
}

.head-mobile .mobile-item .mobile-list a{
   display: flex;
   flex-direction: column;
   text-decoration: none;
   color: #444444;
   text-align: center;
   justify-self:center;

}
header{
   height: 60px;
   background-color: #2386c8;
   width: 100%;
   
}

.navbar{
    background-color:#2386c8;
    position: fixed;
    top:0;
    margin: 0;
    padding: 0;
    width:100%;
   z-index: 1002;
   height: 60px;

  
}

.navbar-toggler{
    border: none;
    width:5%;



    }
    .navbar-toggler:hover{
      background-color: #519fd3;
    }


    .navbar-toggler i{
        color: #fff;
        height:10px;
        font-size: 30px;
    }
    .offcanvas{
        margin-top:52px;
       max-width: 22%;
       
    }
    .offcanvas .input-search{
        width: 100%;
        border: 0;
        font-size:16px;
        padding: 4px 6px;
        height: 35px;
        background-color: #fff;

    }
    .offcanvas .navbar-aside{
      list-style: none;
      margin-bottom: 20px;
    }
    .navbar-aside .navbar-aside-list{
      padding-bottom: 20px;
   
    }
    .navbar-aside .navbar-aside-list a{
      text-decoration: none;
      color: #444444;
      font-size: 14px;
      font-weight: 400;
    }
    .navbar-aside .navbar-aside-list :hover{
      color: #2386c8;

    }
    .navbar-aside .navbar-aside-list ul{
      list-style: none;
    }
    .navbar-aside .navbar-aside-list ul li a{
      padding-top:10px;
      width: 100%;
      font-size: 14px;
    }
      
    
    
    .container-navbar{
      padding-left: 20px;
      padding-right: 20px;
      display: flex;
      width: 100%;
      justify-content: space-between;
    }
    .header-fig{
      display: flex;
      align-items: center;
      width: 60%;
      
     
      
    }
    .header-fig .header-logo{
        width: 110px;
       
       
    }
    
     .header-menu{
        display: flex;
        list-style:none;
        
        
     }
     .header-menu .header-menu-list{
        padding-top:10px;
       padding-right: 20px;
       max-width: 100%;
       
     }
     
     .header-menu .header-menu-link{
        text-decoration: none;
        color: #fff;
     }
     .header-menu .header-menu-list .header-menu-link i{
        font-size: 14px;
        padding-left: 3px;
     }
     .header-menu .header-menu-list .header-menu-link span{
        font-weight: 300;
        font-size: 15px;
     }
    
     
     .header-menu .header-menu-list .login{
        border: 0.1px solid #f7eded;
        text-align: center;
       padding-top:3px;
       padding-left: 10px;
       padding-right: 10px;
       padding-bottom: 3px;
     }
     @media(min-width:992px){
      .head-mobile{
         display: none;
         width: 100%;
      }
        
      }
   
  
  @media (max-width:991px) {
   .header{
      display: none;
      width: 100%;
   }
   
   
  }
  @media (max-width:1200px) {
   .header{
      width: 100%;
   }
   .header-menu{
      margin-left: 0;
      margin-right: 0;
   }
}


/* --------end header------- */
/* ----------start main----------- */
 .main-home{
   background: url(../img/header-bg-0.jpg);
   background-size: auto;
   width: 100%;
   height: 600px;
   background-size: cover;
   
}

.main-card .text{
   color:#fff;
   text-align: center;
   padding-top:180px;
  
  
}
.main-card .text h1{
   font-size: 35px;
   padding-bottom:20px;
  
  
}
.main-card .text h5{
   margin-top: 30px;
   font-size: 17px;
}



.main-card  .divbtn  button{
   
   border-radius:  none;
   border: none;
   height:50px;
   width:auto;
   margin-top:20px;
   
 }
 .divbtn{
   display: flex;
   flex-direction: column;
   align-items: center;
  
 }
 .main-card .link{
   margin-top: 40px;
 }
.main-card .link-main{
   text-decoration: none;
   padding:5px;
   border:1px solid #fff;
   color:#fff;
   background-color: transparent;
  
   
} 
.main-card .main-read{
  
   margin-top: 30px;
   color:#fff;
}
.main-card .main-read img{
   margin-right: 40px;  
   
}

@media(min-width:575px){
   .all-btn{
      display: flex;
      flex-direction: column;
   }
   .main-card .divbtn  {
     width: auto;
      
   }
}
 @media(max-width:575px){
   .main-card .divbtn  {
     width: auto;

   }
}

 @media(max-width:576px){
   .main-card .divbtn {
      width: auto;
      
   }
}
   



 
/* ----------end main----------- */
/* -----------start main-section-one---------- */

.container-section-one{
   padding-left: 40px; 
   padding-right: 40px;
}
.section-one-text{
   text-align: center;
   padding-top:100px;
   color:#2386c8;
   font-size: 30px;
   padding-bottom: 30px;
}
.container-section-one .col-section-one ul{
   list-style: none;
}
.container-section-one .col-section-one ul li i{
   color: #2386C8;
   font-size:20px;
   padding-bottom: 20px;
}
.container-section-one .col-section-one ul li span{
   
   font-size:18px;

}
.container-section-one .col-section-one ul li p{
   color: #444444;
   font-size:13px;
}
@media(max-width:768px){
   .container-section-one .row{
      display: flex;
      flex-direction: column;
   }
}
/* -----------end main-section-one---------- */
/* -----------end section-two-main---------- */

.container-section-two , .container-section-three ,.container-section-four{
   padding-left: 40px; 
   padding-right: 40px;

}
.section-two-text , .section-three-text{
   text-align: center;
   padding-top:100px;
   color:#2386c8;
   font-size: 30px;
   padding-bottom: 30px;
}

.container-section-two .row .section-two-fig{
   padding-right: 40%;
   padding-bottom: 20px;

}
.container-section-two .row .section-two-fig img{
   width: 90px;
}
.container-section-two .row .contant{
   text-align: center;
   padding-top: 30px;
}
.container-section-two .contant h4,.container-section-three .contant h4{
   font-size:25px;
   color: #444444;
   padding-bottom: 20px;
}
.container-section-two .contant p,.container-section-three .contant p{
   font-size:14px;
   color: #444444;
}
/* -----------end section-two-main---------- */
/* -----------start section-three-main---------- */
/* -----------end section-three-main---------- */
/* -----------startsection-four-main---------- */
 .section-four-text .text1{
   text-align: center;
   padding-top:100px;
   color:#2386c8;
   font-size: 30px;
   padding-bottom: 30px;
}
 .section-four-text .text2{
   text-align: center;
   color: 0;
   font-size: 18px;
   padding-bottom: 50px;
}
.container-section-four a{
   text-decoration: none;
   color:#000;
   text-align: center;
}
.container-section-four a .section-four-fig img{
   width:90px;
   padding-bottom: 30px;
}
.container-section-four .contant{
 color:#444444;

}
.container-section-four .contant :hover{
   color:#2386C8;
   
  }


.col{
   margin-bottom: 50px;
}


/* -----------end section-four-main---------- */
/* ssssssssss about_us------------- */
.about_us{
   background-color: #Fff;
}
 

.about_us .container-about_us{
   padding-left:40px;
   padding-right:40px;
}
.container-about_us .head{
   padding-top: 40px;
   margin-bottom: 40px;
  

}
.container-about_us .head h1{
   text-align:center;
   font-size: 35px;
   font-weight: 600;
   color:#2386c8;
   
   
}
/* .artical .col-lg-6{
   width:50%;
   display: flex;
   justify-content:space-evenly;
} */
.artical .card{
  
   border-radius: 20px;
   margin-bottom: 70px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border:0;
   transition: 0.3s ease;
   min-height:250px;

}
.artical .card:hover{
   transform: scale(1.02);
   box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24), 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
   background-color: #2386C8;
   color: #fff;
   
}
.artical .card:hover.card .top .head h3{
   
      color: #fff;
   

}

   
.card .top{
   display: flex;
   
   
}
.card .top .head h3{
   display: flex;
   margin-top: -20px;
   color:#2386c8;
   font-size:25px;
}
.card .top .head h5{
   
   font-size:18px;
   color:#777
}
.artical .card img{
   width: 90px;
   height: 90px;
   border-radius:50%;
   margin: 20px;
   border:5px solid #fff;
   
  
}
.artical .card p{
   padding-left: 20px;
   padding-right: 20px;
   font-size: 16px;
}



/* -----------end section-five-main---------- */
.section-five-main{
   background-color:#2386C8 ;
   margin-top: 100px;
   
}
.container-section{
   padding-left: 20px;
   padding-right: 20px;
}
.section-five-main-fig{
   margin-top:100px;
   margin-bottom: 150px;

}
.section-five-main-fig img{
   width: 100%;
}
.section-five-main .contant{
   margin-top: 130px;
   color: #fff;
}
.section-five-main ul li{
   color:#fff;
   padding-bottom:15px;
}
.section-five-main .btn-link{
   margin-bottom:100px;
   text-decoration:none;
}
.section-five-main .btn-link .section-five-link{
    color: #2386C8;
    padding: 7px;
    background-color: #fff;
    text-decoration:none;
    
}
@media(max-width:768px){
   .section-five-main .row{
      display: flex;
      flex-direction:column-reverse
   }
   .section-five-main .section-five-link{
      margin-right: 25%;
   }
   .section-five-main .btn-link{
      margin-bottom:20px;
   }
} 

/* Media Queries */









/* -----------end section-five-main---------- */
/* -----------start-ask-main---------- */
.container-ask-me{
   padding-left: 20px;
   padding-right: 20px;
}
.ask-me-text{
   text-align: center;
   padding-top:100px;
   color:#2386c8;
   font-size: 30px;
   padding-bottom: 30px;
}
.container-ask-me .head{
   display: flex;

}
.container-ask-me .head img{
   width: 100px;
   border-radius: 50%;
}
.container-ask-me .head .contant{
   margin-right:20px;
   margin-top:15px;
}
.container-ask-me .head .contant h5{
   font-size: 18px;
}
.container-ask-me .head .contant p{
   font-size: 15px;
}
.container-ask-me .text{
   padding-top:20px;
   font-size:14px;
   line-height: 1.8;
   font-weight: 300;
}
.container-ask-me a{
   padding-top:20px;
   font-size:14px;
   color: #888484;
   padding-bottom: 30px;
}





/* -----------end ask-me-main---------- */

/* -----------start question-main---------- */
.qus-text{
   text-align: center;
   padding-top:100px;
   color:#2386c8;
   font-size: 30px;
   padding-bottom: 30px;
}
.accord{
   margin-bottom:50px;
}
.accordion-item{
   border-left:0;
   border-right:0;
}
.accordion-item:first-of-type{
   border-top: 0;
}
.accordion-btn-icon{
   margin-right:40px;
}

/* -----------end question-main---------- */

/* -----------start section10-main---------- */
.register{
   background-color: #2386C8;
   height:300px
}
.register .co-ta p{
   text-align: center;
   padding-top:100px;
   color:#fff;
   font-size: 30px;
   padding-bottom: 30px;
}
.register .co-ta a{
   background-color: #fff;
   color: #2386C8;
   padding: 10px;
   text-align: center;
   margin-right:45%;
   text-decoration: none;
   border:1px solid #fff;
}
.register .co-ta a:hover{
   background-color: #2386C8;
   color: #fff;
}

/* -----------end section10-main---------- */
/* -----------start footer-main---------- */
.container-footer{
   padding-left: 20px;
   padding-right: 20px;
   box-sizing: border-box;
}
.container-footer .row .link{
   margin-top: 40px;
}

.container-footer .row h5{
   padding-right: 35px;
   padding-bottom: 5px;
   font-size: 20px;
   padding-top: 40px;
}
.container-footer .row a{
   text-decoration: none;
   color: #000;
   font-size: 20px;
   padding-top: 40px;
}
.container-footer .row ul{
   list-style: none;
}
.container-footer .row ul a{
 font-size: 14px;
 text-decoration: none;
 color:#444444
}
.container-footer .row ul a i{

   font-size:35px;
   padding-left: 20px;
}
.container-footer .row ul a .fa-square-facebook {
   color: #2386c8;
}
.container-footer .row ul a .fa-square-x-twitter {
   color: #000;
}
.col-left{
   display: flex;
   
}
.footer-botom{
   background: #F0F0F0;
  padding: 20px;
}
.footer-botom .row{
   display: flex;
   font-size: small;
  
}
.footer-botom .col-botom{
   direction: ltr;
}
@media(max-width:992px){
   .footer{
      display:none ;
      padding-top: 0;
   }
}



/* -----------end footer-main---------- */
/* -----------start hasabay---------- */
.container-hasabay{
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
}
.container-hasabay h3{
   padding-right: 35px;
   padding-bottom: 20px;
   font-size:22px;
}
.container-hasabay ul{
   list-style: none;
}

/* -----------start hasabay---------- */