@font-face {
    font-family: 'myf29-bold';
    src: url('fonts/29ltbukrabold.ttf') format('truetype');
}
@font-face {
    font-family: 'myf29-light';
    src: url('fonts/29ltbukralight.ttf') format('truetype');
}
@font-face {
    font-family: 'myf29-regular';
    src: url('fonts/29ltbukraregular.ttf') format('truetype');
}
@font-face {
    font-family: 'myfb';
    src: url('fonts/thesans-bold.otf') format('truetype');
}
@font-face {
    font-family: 'myfp';
    src: url('fonts/thesans-plain.otf') format('truetype');
}




/*color: orange  #fec700; mof #01984f;*/

html,body{
  font-family: 'myfp';
  font-size: 16px;
  background-color: #f5f5f5;
}

/*start of top bar style */
.barqah-top-bar{
  font-family: sans-serif;
  position: fixed;
  top: 0px;
  z-index: 9999;
  height: 35px;
  width: 100%;
  background: #f3f3f3;
  padding-top:5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
}


.barqah-top-bar .right-side a{
  margin: 2px;
}

.barqah-top-bar .left-side a{
  margin: 2px;
}

.barqah-top-bar .top-menu{
  padding:4px 6px 4px 6px;
  color:#515151;
  text-decoration: none;
}

.barqah-top-bar .top-menu:hover{
  color:#01984f;
  background-color:  #e0e0e0;
  border-radius: 2px 10px 2px ;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}

.barqah-top-bar .lang-url{
  border: solid 1px #01984f;
  padding:3px 6px 3px 6px;
  color: #01984f;
  text-decoration: none;
}

.barqah-top-bar .lang-url:hover{
  color: #fff;
  background-color:  #01984f;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}

.barqah-top-bar .facebook-url{
  border: solid 1px #3b5998;
  border-radius: 50%;
  border-radius: 2px 10px 2px ;
  padding: 3px 6px 3px 6px;
  color: #3b5998;
  font-size: 18px;
  text-decoration: none;
}

.barqah-top-bar .facebook-url:hover{
  color: #fff;
  background-color:  #3b5998;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}

.barqah-top-bar .youtube-url{
  border: solid 1px #ce2023;
  border-radius: 2px 10px 2px ;
  padding:3px 6px 3px 6px;

  color: #ce2023;
  font-size: 18px;
  text-decoration: none;
}

.barqah-top-bar .youtube-url:hover{
  color: #fff;
  background-color:  #ce2023;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}


.barqah-top-bar .location-url{
  border: solid 1px #fec700;
  border-radius: 2px 10px 2px ;
  padding:3px 6px 3px 6px;
  color: #fec700;
  font-size: 18px;
  text-decoration: none;
}
.barqah-top-bar .location-url:hover{
  color: #fff;
  background-color:  #fec700;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}
 /*end of top bar style */


.global-nav {
   position: fixed;
   top: 35px;
   z-index: 9999;
   height: 130px;
   width: 100%;
   /*background: rgba(255, 255, 255, 0.1);*/
   background:   linear-gradient( rgba(255,255, 255, 200), rgba(255,255, 255, 0.4) ), url('../../imgs/city.jpg') ;
   background-repeat: no-repeat;
   background-size: cover;
   line-height: 100px;
   -webkit-transition: height .5s, line-height .5s; /* Safari */
   transition: height .5s, line-height .5s;
}

.site-logo {
 display: inline-block;
 width: 140px;
 padding-top: -5px;
 -webkit-transition: all 0.5s ease;
 transition: all .5s ease;
}


.nav-list {
  list-style: none;
}

.nav-list li {
  list-style: none;
  display: inline-block;
  padding-left: 10px;
  color: #000 !important;
}

.nav-list li a{
  color: #474747; !important;
  text-decoration: none;
}
.nav-list li a:hover , .nav-list li .active{
  /* /padding: 10px; */
  border: solid 1px  #fec700;
  color: #fec700; !important;
  border-radius: 2px 20px 2px ;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;

}
.nav-list li .active{
  border: solid 1px  #01984f;
  color: #01984f; !important;
}



.scrolled-nav {
  top: 0 !important;
  height: 80px !important;
  line-height: 80px !important;
  background: #fff !important;
  color: #324c5f !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);

}

.scrolled-nav .site-logo  {
 width: 100px;
 margin-top: -7px;
}

.scrolled-nav .nav-list li {
    height: 80px !important;
}


.u-nav-link{
  display:inline !important;
  padding-right:  7px !important;
  padding-left: 7px !important;
}


.barqah-slider{
  position: relative;
  top: 165px;
  height: 472px;
  width: 100%;
  /*box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);*/
   /*box-shadow: 1px -2px 10px  #000;*/
}

.barqah-slider .carousel{
  height: 472px;
  position: relative;
}



.carousel-item img {
  width: 100%;
  height: 472px;
}


ol.carousel-indicators {
  position: relative;
  top: 0px;
  bottom: 5px;
  margin: 0;
  left: 0;
  right: 0;
  width: auto;
}

.carousel-control-prev,.carousel-control-next{
  /*position: relative;*/
  bottom: 360px;
  top: 5px;
}



ol.carousel-indicators li,
ol.carousel-indicators li.active {
  max-width: 100%;
  float: left;
  height: 7px;
  margin: 0;
  border-radius: 0;
  border: 0;
  background: #fff;
  border-left: solid 3px #a1a1a1;
}

ol.carousel-indicators li.active {
  background:  #fec700;
}



/*about section style*/
.about{
  position:relative;
  top: 165px;
  padding-bottom: 45px;
  /* height: 582px; */
  height: 100%;
  background-color: orange;
  background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8) ),  url('../../imgs/about.jpg') ;*/
  background-repeat: no-repeat;
  background-size: cover;
  padding-top:65px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 12px 0 rgba(0, 0, 0, 0.19);
}


.about-text{
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  direction: rtl;
  justify-content:center;
  padding: 20px;
  border: none;
  border-radius: 0px 40px 0px ;
  text-align: justify;
  text-justify: inter-word;
}

.about-text h2{
  color: #fec700 !important;
  padding-bottom: 14px;

}






.about-menu .nav-item .nav-link{
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  margin: 10px;
  font-size: 18px;
  direction: rtl;
  justify-content:center;
  padding: 20px;
  border: none;
  border-radius: 40px 0px 40px ;
  text-align: justify;
   text-justify: inter-word;
   border: solid 1px #fec700;
   color: #fec700;
}
.about-menu .nav-item .active{
  background: rgba(255, 255, 255, 0.3);
  border: solid 1px #fff;
  color: #fff;
}
.about-menu .nav-item .nav-link:active,.about-menu .nav-item .nav-link:hover{
  border: solid 1px #fff;
  color: #fff;
}


.about-text h2{
  color: #fff;
  text-align: center;
  /*text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 black, 0 -1px #fff;*/

}
/*about section style*/

/*activeties section style*/
.activeties{
  position:relative;
  top: 165px;
  height: 582px;
  /*background-color: yellow;*/
  padding-top:65px;

}

.activeties-title{
  margin-top:-65px;
  padding-top:35px;
  margin-bottom: 40px;
  color: #2f2f2f;
  background: #fff;
  border-bottom: 3px solid #fec700;
  position: relative;
}
.activeties-title h2{
  margin: 20px;
  color: #2f2f2f;
  padding-bottom:5px;

}

.title-animate{
  -webkit-animation-name: tit-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: tit-anim;
  animation-duration: 2s;
}


@keyframes tit-anim {
  from   {
    background-color: #e1e1e1;
      border-bottom: 3px solid gray;
  }
  to  {
    background-color: #fff;
    border-bottom: 3px solid #fec700;
     }
}

.about-animate{
  position: relative;
  -webkit-animation-name: anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: about-anim;
  animation-duration: 1s;
}


@keyframes about-anim {
  from   {
    right: -100%;
  }
  to  {
    right: 0%;
     }

}
.about-animate-text{
  position: relative;
  -webkit-animation-name: anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: about-anim-t;
  animation-duration: 1s;
}


@keyframes about-anim-t {
  from   {
    left: -100%;
  }
  to  {
    left: 0%;
     }

}



.anim{
  position: relative;
  -webkit-animation-name: anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: anim;
  animation-duration: 1s;
}



@keyframes anim {
  from   {
    top: 50px;
  }
  to  {
    top: 0px;
     }

}




.activeties-title .down-b {
    width: 100%;
    height: 5px;
    background-color: #fec700;
    position: relative;
}

/* Standard syntax */
@keyframes downanim {
    from   {
      top:-20px;
    }
    to  {

      top:165px;
       }

}


.activeties-content{
  padding:35px;
}
.activety{
  padding: 15px;
}
.activety-item{
  display: block;
  padding: 15px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1), 0 3px 20px 0 rgba(0, 0, 0, 0.19);
  align-items: center;
  transition: 0.3s ease;
}

.activety-item img{
  width: 100%;
  padding-bottom: 10px;
}
.activety-item h5{
  line-height: normal;
}

.activety-item:hover{
transform: scale(1.1, 1.1);
}
/*.activety-item:hover{
  box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.2), 0 12px 30px 0 rgba(0, 0, 0, 0.19);
}*/

.activety-item-back{
  display: block;
  padding: 15px;
  width: 250px;
  height: 300px;
  background-color: #01984f;;
  box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.2), 0 12px 30px 0 rgba(0, 0, 0, 0.19);
  align-items: center;
  color: #fff
}
.activety-item-back .txt{
  padding: 10px;
  border: solid 2px #fff;
  font-size: 14px;
}

/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}


/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}


/*activeties section style*/

/*companies section style*/
.companies{
  position:relative;
  top: 165px;
  height: 100%;
  padding-top:65px;
  padding-bottom:65px;
  background-color:#fff;
}

.companies-title{
  position: relative;
  margin-top:-65px;
  padding-top:35px;
  margin-bottom: 40px;
  color: #747474;
  background: #fff;
}



.companies-title h2{
  margin: 20px;
  color: #2f2f2f;
  padding-bottom:5px;
}

.c-title-animate{
  -webkit-animation-name: c-tit-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: c-tit-anim;
  animation-duration: 1s;
}


@keyframes c-tit-anim {
  from   {
    top:-35px;
  }
  to  {
    top:0;
     }

}

.companies .container .c-item{
  width: 150px;
  height: 150px;
  line-height: 150px;
  padding: 5px;
}

.sh-img{
  background-color:#dd4142;
}

.sh-animat{
  -webkit-animation-name: sh-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: sh-anim;
  animation-duration: 2s;
}


@keyframes sh-anim{
  from   {
    background-color:#f4f4f4;

  }
  to  {
    background-color:#dd4142;
     }
}

.aam-img{
  background-color:#00acee;
}
.aam-animat{
  -webkit-animation-name: aam-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2.2s; /* Safari 4.0 - 8.0 */
  animation-name: aam-anim;
  animation-duration: 2.2s;
}


@keyframes aam-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#00acee;
     }
}
.dae-img{
  background-color:#f6ec2f;
}

.dae-animat{
  -webkit-animation-name: dae-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2.4s; /* Safari 4.0 - 8.0 */
  animation-name: dae-anim;
  animation-duration: 2.4s;
}


@keyframes dae-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#f6ec2f;
     }
}

.dat-img{
  background-color:#fcb134;
}

.dat-animat{
  -webkit-animation-name: dat-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2.6s; /* Safari 4.0 - 8.0 */
  animation-name: dat-anim;
  animation-duration: 2.6s;
}


@keyframes dat-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#fcb134;
     }
}


.fwf-img{
  background-color:#9e8658;
}

.fwf-animat{
  -webkit-animation-name: fwf-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2.8s; /* Safari 4.0 - 8.0 */
  animation-name: fwf-anim;
  animation-duration: 2.8s;
}


@keyframes fwf-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#9e8658;
     }
}


.datr-img{
  background-color:#5561ab;
}

.datr-animat{
  -webkit-animation-name: datr-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
  animation-name: datr-anim;
  animation-duration: 3s;
}

@keyframes datr-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#5561ab;
     }
}


.fwc-img{
  background-color:#d8d8d8;
}

.fwc-animat{
  -webkit-animation-name: fwc-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 3.2s; /* Safari 4.0 - 8.0 */
  animation-name: fwc-anim;
  animation-duration: 3.2s;
}

@keyframes fwc-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#d8d8d8;
     }
}

.aas-img{
  background-color:#d1c6b0;
}

.aas-animat{
  -webkit-animation-name: aas-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 3.4s; /* Safari 4.0 - 8.0 */
  animation-name: aas-anim;
  animation-duration: 3.4s;
}

@keyframes aas-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#d1c6b0;
     }
}

.gof-img{
  background-color:#edc961;
}

.gof-animat{
  -webkit-animation-name: gof-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 3.6s; /* Safari 4.0 - 8.0 */
  animation-name: gof-anim;
  animation-duration: 3.6s;
}

@keyframes gof-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#edc961;
     }
}

.dac-img{
  background-color:#25b89a;
}
.dac-animat{
  -webkit-animation-name: dac-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 3.8s; /* Safari 4.0 - 8.0 */
  animation-name: dac-anim;
  animation-duration: 3.8s;
}

@keyframes dac-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#25b89a;
     }
}

.das-img{
  background-color:#9e4068;
}

.das-animat{
  -webkit-animation-name: das-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: das-anim;
  animation-duration: 4s;
}

@keyframes das-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#9e4068;
     }
}
.goc-img{
  background-color:#56bbe7;
}

.goc-animat{
  -webkit-animation-name: goc-anim; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4.2s; /* Safari 4.0 - 8.0 */
  animation-name: goc-anim;
  animation-duration: 4.2s;
}

@keyframes goc-anim{
  from   {
    background-color:#f4f4f4;
  }
  to  {
    background-color:#56bbe7;
     }
}



.companies img{
  width: 135px;
  margin-bottom: 15px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.19);
  background-color: #fff;
  transition: 0.3s ease;
}

.companies img:hover , .companies .c-active{
  transform: scale(1.2, 1.2);
  border: none;
  box-shadow: 0 10px 24px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.12);
}

.companies .about-company{
  position:relative;
  width: auto;
  margin-top: 20px;
  height: 360px;
  background-color:#fff;
}

.companies .about-company .c-img{
  align-content: left-side;
  position: relative;
  left: -30px;
}

.companies .about-company .c-text{
  border-left: solid 3px #dbdada;
}

.companies .about-company img{
  align:left-side;
  width: 300px;
  margin-bottom: 0px;
  box-shadow: none;
  background-color: #fff;
}
.companies .about-company img:hover{
  border: none;
  box-shadow: none;
  background-color: none;
}

.companies .about-company p{
  font-size: 15px;
  direction: rtl;
  justify-content:center;
  padding: 20px;
  text-align: justify;
   text-justify: inter-word;
}
/*companies section style*/

/*news section style*/
.news{
  position:relative;
  top: 165px;
  height: 100%;
  padding-top:65px;
  padding-bottom:65px;
  background-color:gray ;
  background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6) ),  url('../../imgs/news-bg1.jpg') ;*/
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0px -1px 3px 0px hsla(0, 0%, 0%, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
  /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19); */
}
/* carousel-control-prev
carousel-control-next */

.news-slid .carousel-control-prev{
  position:absolute;
  top:-36%;
  left: 33%;
}

.cc-prev-animate{
  -webkit-animation: prevmove 1s infinite; /* Safari 4.0 - 8.0 */
   animation: prevmove 1s ;
  animation-iteration-count: 5;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes prevmove {
  from {left: 33%;}
  to {left: 33.3%;}
}

@keyframes prevmove {
  from {left: 33%;}
  to {left: 33.3%;}
}

.news-slid .carousel-control-next{
  position:absolute;
  top:-36%;
  right: 33%;

}
.cc-next-animate{
  -webkit-animation: nextmove 1s infinite; /* Safari 4.0 - 8.0 */
   animation: nextmove 1s ;
  animation-iteration-count: 5;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes nextmove {
    from {right: 33%;}
    to {right: 33.3%;}
}

@keyframes nextmove {
  from {right: 33%;}
  to {right: 33.3%;}
}




.news-title{
  position: relative;
  margin-top:-65px;
  padding-top:35px;
  margin-bottom: 40px;
  color: #fff;
}

.news-title h2{
  margin: 20px;
  color: #fff;
  padding-bottom:5px;
}


.news-slid .carousel-inner a{
  height: 340px;
  width:300px;
  margin: 35px;
  margin-top: 0px;
  border: solid 1px  #fff;
  color: #fff; !important;
  border-radius: 0px 40px 0px ;
  text-decoration: none;
    /* transition: 0.3s ease; */
}







.news-slid .news-text .ndate{
  padding: 8px;
  font-size: 12px;
  margin-bottom:35px;
}


.news-slid .news-text{
  padding: 10px;

}
.news-slid .news-text p{
width: 100%;
font-size: 14px;
padding: 15px;
}


.news-slid .news-img{
  width: 100%;
  height: 100%;
  padding: 20px;
  padding-top: 0px !important;
}
.news-slid .news-img img{
  background-color: #f1f1f1;
  transition: 0.5s ease;
  margin: 0px;
  height: 175px;
  border-radius: 0px 40px 0px ;
}




.news-slid .carousel-inner  a:hover ,.news-slid .carousel-inner  a:active ,.news-slid .carousel-inner a:focus{
  background-color: #fff;
  border: solid 0px  #fff;
  color: #000; !important;
  border-radius: 0px 40px 0px ;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-decoration: none;
    outline: 0 !important;

  /* transform: scale(1.01, 1.01); */

}


.news-slid .carousel-inner  img:hover  ,.news-slid .carousel-inner  img:active  {
    text-decoration:none;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.news .modal{
  top:15%;
}
.news .modal-content{
  border-radius: 0px 0px 0px  0px !important;
}
.news .modal-body p{
  color: #000;
  font-size: 14px;
  direction: rtl;
  justify-content:center;
  padding: 15px;
  border: none;
  text-align: justify;
  text-justify: inter-word;
}
.news .modal-body span{
  color: gray;
  font-size: 12px;

}

.news .modal-header .close{
font-size: 32px;
color: #01984f;
}
.news .modal-body img{
  margin: 10px 0px 10px 0px;
  border: none;
  padding: 10px 15px 10px 15px;
  width: 100%;
  max-width: 500px;

}

.news .modal-news-title{
  font-size: 18px;
}




/*


/*cobtact section style*/





.contact{
  position:relative;
  top: 165px;
  height: 100%;
  background-color: #f3f3f3;
  padding-top:45px;
  padding-bottom:45px;
}

.contact-icon {
  width: 65px;
  position: relative;
  padding-bottom:10px;
  transition: 0.3s ease;
}
.contact-icons p {
  font-size: 14px;
  padding-bottom: 10px;
}


.contact-icon:hover {
  transform: scale(1.2, 1.2);
}

.contact-title{
  height: 100px;
  margin-top:-65px;
  padding-top:45px;
  color: #fff;
}
.contact  .cont-title h2{
 font-size: 28px;
 padding-top:18px;
}
.contact  .cont-title p{
 font-size: 14px;
 color:gray;
}


#map {
        width: 100%;
        height: 350px;
        padding: 35px;
        background-color: grey;
      }




.contact-details{
  height: 50px;
  background-color: #bc2480;
}
/*companies section style*/


.barqah-footer{
  position:relative;
  top: 165px;
  padding-top:25px;
  padding-bottom: 25px !important;
  height: 100%;
  background-color: #595959;
  color: #fff;
}


.barqah-footer .icon{
  padding-right: 10px;
  padding-left: 10px;

  color: #b2b2b2;
  font-size: 24px;
  text-decoration: none;
  position: relative;
  transition: 0.3s ease;
}

.barqah-footer .icon:hover{
  color: #fff;
  font-size: 26px;
  transform: scale(1.5, 1.5);
}

.barqah-footer .fmenu{
  padding: 10px;
  color: #b2b2b2;
  font-size: 14px;
  text-decoration: none;
  position: relative;
  transition: 0.3s ease;
}

.barqah-footer .fmenu:hover{
  color: #fff;
  transform: scale(1.5, 1.5);
}


.barqah-footer p{
  color: #b2b2b2;
  font-size: 14px;
}
.copyright{
  text-align: right;
  float: right;
}
.sochial{
  text-align: left;
  float: left;
}




/*topBtn style*/

#topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 50px;
    z-index: 99;
    border: none;
    border-radius: 2px 10px 2px ;
    background-color: #7f7f7f;
    opacity: 0.3;
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 5px; /* Some padding */
    color:#fff;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

#topBtn:hover {
  background-color: #fec700;
  opacity:inherit;

}



/*h2 {
animation: move 3s;
-webkit-animation: move 3s;
}

@keyframes move {
from {
  margin-left: 100%;
  width: 300%;
}

to {
  margin-left: 0%;
  width: 100%;
}
}

@-webkit-keyframes move {
from {
  margin-left: 100%;
  width: 300%;
}

to {
  margin-left: 0%;
  width: 100%;
}
}*/


.mob-nav{
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
  border-radius: 0px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.10);
}
  .mob-nav .navbar-toggler {
    padding-top: 10px !important;
    border: none !important;
    margin-right: 0px !important;
    padding-right: 0px !important;
  }

  .mob-nav .navbar-toggler > i{
    color: #aa9f9e;
  }
  .mob-nav .logo-o{
    width: 160px;
    margin-top: -6px !important;
  }

  .mob-nav .navbar-collapse{
    border-top: solid 1px #e5e5e5;
    margin-top: 5px;
  }

    .mob-nav .navbar-collapse li a{
      font-size: 14px;

      padding-right:15px;
      margin: 0px;
      color: #636262 !important;
      text-decoration: none;
    /* background:  !important; */
    }
    .mob-nav .navbar-collapse li:hover , .mob-nav .navbar-collapse li.active{
    padding:5px;
    color:  #bc2420 ; !important;
    background-color: #f4f4f4;
    border-left: solid 2px #01984f;
    -webkit-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    transition: background-color .2s linear;
    }

    .last-item-m{
    margin-top: 3px;
    border-top: solid 1px #f1f1f1;
    }



@media only screen and (max-width: 992px) {
  .barqah-slider{
    position: relative;
    top: 0px;
    height: 572px !important;
    max-height: 600px !important;
    width: 100%;
    padding: 0px;
    margin: 0px;
    /*box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);*/
     /*box-shadow: 1px -2px 10px  #000;*/
  }



.barqah-slider  .carousel-inner .carousel-item{
  margin-top: 15px;
  height: 572px !important;
  }

  ol.carousel-indicators {
    position: relative;
    top: 522px;
    margin: 0;
    left: 0;
    right: 0;
    width: auto;
  }

  .carousel-control-prev,.carousel-control-next{
    /*position: relative;*/
    bottom: 260px;
    top: 5px;
    font-size: 11px;
  }

  ol.carousel-indicators li,
  ol.carousel-indicators li.active {
    max-width: 100%;
    float: left;
    height: 38px;
    margin: 0px;
    border-radius: 0;
    border: 0;
    background: #fff;
    border-left: solid 1px #a1a1a1;
  }


  ol.carousel-indicators li.active {
    background:  #fec700;
  }

  .carousel-caption {
      top:20px;
  }
  .carousel-caption h1,.carousel-caption h2,.carousel-caption h3,.carousel-caption h4 {
      font-size:22px;
  }
  .carousel-caption p {
      font-size:14px;
      margin-top: 0px;

  }



  /* .caption-container{
    padding: 5px;
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8) )
  } */


  .about{
    margin-top: -12px;
    position:relative;
    top: 0px;
    height: 100%;
    background-color: #000;
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8) ),  url('../../imgs/about.jpg') ;*/
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:35px;
  }

  .about-text h2{
    font-size: 18px;
    padding-bottom: 12px;
    color: #fec700;
  }
  .about-text p ,.about-text ul{
    font-size: 13px;
  }

  .about-li a{
    font-size: 14px !important;
  }

  .activeties{
    position:relative;
    top: 0px;
    height: 100%;
    /*background-color: yellow;*/
    padding-top:0px !important

  }
  .activeties-content{
    padding-top:0px !important;
    /* margin-bottom: 15px !important; */
  }
  .activeties-title {
    margin-top:-65px;
    padding-top:10px;
    margin-bottom: 20px;
    color: #2f2f2f;
    background: #fff;
    border-bottom: 2px solid #fec700;
  }
  .activeties-title h2  {
    font-size: 22px;
  }

  .activety-item{
    background: none !important;
    box-shadow: none;
    align-items: center;
    transition: 0.3s ease;
  }

  .activety-item img{
    width: 100%;
    padding-bottom: 10px;
  }
  .activety-item h5{
    font-size: 12px;
  }



  .companies{
    position:relative;
    top: 0px;
    height: 100%;
    /*background-color: yellow;*/
    padding-top:0px;

  }
  .companies-title {
    margin-top:0px;
    padding-top:10px;
    margin-bottom: 20px;
    color: #fff;
    height: 100%;
    background: #0f9e59;
    /* background: linear-gradient(#fec700, #57bb8b); */
    border-bottom: 2px solid #f3f3f3f3;
  }
  .companies-title h2  {
    font-size: 22px;
      color: #fff;
  }

  .companies .container .c-item{
    width: 50%;
    height: 100%;
    line-height: 100%;
    padding: 15px;
  }
  .companies img{
    width: 100%;
    margin: 0px;

  }

  .companies img:hover , .companies .c-active{
    transform: scale(1.2, 1.2);

  }



  /* /// news in mobile  */
  .news{
    position:relative;
    top: 25px;
    height: 100%;
    /*background-color: yellow;*/
    padding-top:0px;

  }

  .news-title{
    position: relative;
    margin-top:-65px;
    padding-top:15px;
    margin-bottom: 40px;
    color: #fff;
  }

  .news-title h2{
    font-size: 22px;
    margin: 20px;
    color: #fff;
    padding-bottom:5px;
  }


  .news-slid .carousel-control-prev{
    position:absolute;
    top:-58%;
    left: 16%;

  }



  .cc-prev-animate{
    -webkit-animation: prevmove 1s infinite; /* Safari 4.0 - 8.0 */
     animation: prevmove 1s ;
    animation-iteration-count: 5;
  }

  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes prevmove {
    from {left: 16%;}
    to {left: 16.6%;}
  }

  @keyframes prevmove {
    from {left: 16%;}
    to {left: 16.6%;}
  }

  .news-slid .carousel-control-next{
    position:absolute;
    top:-58%;
    right: 16%;

  }
  .cc-next-animate{
    -webkit-animation: nextmove 1s infinite; /* Safari 4.0 - 8.0 */
     animation: nextmove 1s ;
    animation-iteration-count: 5;
  }
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes nextmove {
      from {right: 16%;}
      to {right: 16.6%;}
  }

  @keyframes nextmove {
    from {right: 16%;}
    to {right: 16.6%;}
  }

  .news-slid .carousel-inner a{
    height: 340px;
    width:100%;
    margin: 10px;

  }


  .news-slid .news-img{
    padding: 10px;
  }




  .contact{
    top: 0px;
    padding-top:15px;
    padding-bottom:45px;
  }

.contact  .cont-title h2{
 font-size: 22px;
 padding-top:18px;
}
.contact  .cont-title p{
 font-size: 14px;
 color:gray;
}
  .contact-icon {
    width: 65px;
    position: relative;
    padding-bottom:10px;
    transition: 0.3s ease;
  }
  .contact-icons p {
    font-size: 14px;
    padding-bottom: 10px;
  }


  .contact-icon:hover {
    transform: scale(1.2, 1.2);
  }

  .contact-title{
    height: 100px;
    margin-top:-65px;
    padding-top:45px;
    background-color:#fec700;
    color: #fff;
  }



  .barqah-footer{
    top:0px;
    padding-top:25px;
  }

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

  }



}




.loader {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}