@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/loader-128x/Preloader_8.gif) center no-repeat #fff;
}
body{
font-family: 'Droid Arabic Kufi', serif;
overflow: hidden;
padding: 0;
margin: 0;
}
body{
  padding-right: 0 !important;
}
html{
  -webkit-font-smoothing: antialiased;
  padding-right: 0 !important;
}
::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #03A5D4;
}

::selection{
  background-color:#03A5D4;
  color:#fff;
}


-webkit-::selection{
    background-color:#03A5D4;
    color:#fff;
}

html{

    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
ul>li>a{
  text-decoration: none;
}
.clear{
  clear: both;
}
.wow {
   visibility: hidden;
}

.header{
  width: 100%;
  margin: 0;
  background-color: white;
}
.header>.container{
  margin: 0;
  padding: 0;
  width: 100%;
}
.top-menu{
  width: 100%;
  height: 45px;
  background-color: #2e373b;
  border-bottom: 5px solid #097882;
}
.social-icons{
  padding: 0;
}
.social-icons>ul{
  padding: 0;
  font-family: -webkit-body;
}
.social-icons>ul>li{
  list-style: none;
  display: inline-block;
  margin-top: 10px;
}
.social-icons>ul>li>a{
  background-color: #242b2e;
  color: white;
  padding: 5px;
  text-align: center;
  border-radius: 3px;
}
.social-icons>ul>li>a>i{
  width: 15px;
  height: 10px;
}

/* Search Button*/
.search{
  float: right;
}
.form-control{
  background-color: #363f43;
  border: none;
  height: 25px;
  color: #DED4D4;
}
.input-group-btn>button{
  background-color: #222b2c;
  color: white;
  border: none;
  height: 25px;
  width: 40px;
  padding: 5px;
}
.input-group-btn>button>.glyphicon{
  top: 0 !important;
}
.navbar-form{
  border: none;
  box-shadow: none;
  padding: 0;
  margin-left: -55px;
}
.navbar-toggle{
  background-color: #2E373B;
  margin-right: 40px;
  float: none;
}
.navbar-default{
  background: transparent;
  border: none;
  z-index: 1003;

}
.navbar-collapse{
  background-color: white;
}
.navbar-default .navbar-nav>li>a{
  color: black;
}

/* Main Menu*/

.menu>ul>li>a.active{
  color:#097882;
  border-bottom: 4px solid #097882;
}
.main-menu{
  width: 100%;
  height: 120px;
  padding: 0;
}
.main-menu>.logo{
  float: right;
  margin-top: 10px;
  margin-right: 65px;
  position: relative;
}
.main-menu>.logo>a>img{
  width: 120px;
  height: 100px;
  margin: 0px 100px 10px 15px;
}

.menu{
  float: right;
  font-size: 12px;
  margin-right: 40px !important;
}
.menu>ul{
  text-align: center;
  margin-top: 5%;
}
.menu>ul>li{
  float: right;
  margin-left: 5px;
  display: inline-block;
  list-style: none;
}
.menu>ul>li>a{
  color: #2e373b;
  font-weight: bold;
  text-decoration: none;
  display: block;
  height: 50px;
  min-width: 65px;
  line-height: 25px;
  transition: 0.1s ease-in-out;
}

.menu>ul>li>a:hover{
  color:#097882;
  border-bottom: 4px solid #097882;
  transition: 0.1s ease-in-out;
}



/**************** END HEADER *******************/


/*Slider*/
.slider{
  margin:0;
  padding: 0;
}

.slider>.container{
  width: 100%;
  margin: 0;
  padding: 0;
}
.slider-inner{
  position: absolute;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.45);
}
.slider-inner>.slide-in-head{
  padding: 14px;
  position: relative;
  top: 25%;;
  height: 100px;
  color: white;
}
.slider-inner>.slide-in-content{
  padding: 14px;
  position: relative;
  top: 27%;
  height: 100px;
  color: white;
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

.btn-min-block
{
    min-width: 170px;
    line-height: 26px;
}
.btn-clear
{
    color: #FFF;
    background-color: transparent;
    border-color: #FFF;
    margin-right: 15px;
}
.btn-clear:hover
{
    color: #000;
    background-color: #FFF;
}
/**************** END SLIDER *******************/


/* More About Us*/

.more-about{

}
.about-head{
  margin-top: 5%;
  text-align: center;
}
.about-inner>.right-img{
  float: right;
  margin-top: 5%;
  margin-right: 3%;
}
.about-inner>.right-img>img{
  width: 100%;
}
.about-content{
  width: 598px;
  margin-top: 5%;

  border-radius: 5px;
  background-color: rgba(238, 238, 238, 0.49);
  text-align: center;
  margin-left: 93px;
  padding: 20px;
}
.about-content>.content-head{
  text-align: right;
  margin:0 5px 20px 0;
  color: #097882;
}
/*About links*/

.about-links{
  text-align: right;
  margin-left: 105px;
  padding: 0;
}
.about-links>ul{
  margin-top: 5%;
}
.about-links>ul>li{
  list-style: none;
  margin-bottom: 0.5%;
}
.about-links>ul>li{
  background-color:  rgba(238, 238, 238, 0.49);
  margin-right: 0.3%;
  padding: 3px 4px 3px 0;
  border-radius: 5px;
  color: #2e373b;
  text-decoration: none;
}
.about-links>ul>li>.fa-bolt{
  background-color: #097882;
  padding: 8px 12px 8px 12px;
  text-align: center;
  border-radius: 5px;
  font-size: 1.2em;
  color: white;
  margin-left: 5px;
}
#about-anch:hover {
  background-color: #153E42;
  color: white;
}
#about-anch:hover + .fa-bolt{
  background-color: #2e373b;
  color: white;
}

.about-links>ul>li>:hover {
  fa-bolt: color: black;
}

/* about footer*/

.abt-foot-in{
  height: 290px;
  width: 26%;
  float: right;
  margin-top: 5%;
  margin-bottom: 5%;
  margin-right: 5%;
  border-radius: 4px;
}
.box1{
  background-color: #097882;
  padding: 0;
}
.box1>img{
  border-radius: 200px;
  margin-left: 34%;
  margin-top: 7%;
  width: 100px;
  height: 100px;
}
.box1>h4{
  color: white;
  padding: 5px 50px 5px 50px;
  text-align: center;
  background-color: #258f98;
}
.box1>p{
  color: white;
  text-align: right;
  margin:20px 5px 5px 5px;
}
.box{
  padding: 0;
  border: 1px solid #eee;
}
.box>img{
  width: 100%;
  height: 40%;
}
.box>h4{
  text-align: right;
  background-color: rgba(238, 238, 238, 0.49);
  margin: 0;
  color: #097882;
  padding: 8px 10px 8px 0;
}
.box>p{
  text-align: right;
  margin:20px 5px 5px 5px;
}
.box>a{
  padding-top: 5%;
  margin-left: 5%;
}
.fa-long-arrow-left{
  margin-right: 5px;
}
/**************** END About *******************/

/*  SERVICES  */
.services{
  background-image: url(../img/ourservice.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  width: 100%;
  height: 800px;
}
.serv-head{
  text-align: center;
  margin-top: 5%;
}
.left-side{
  float: left;
  text-align: right;
  margin-top: 3%;
}
.right-side{
  float: right;
  text-align: left;
  margin-top: 3%;
}
.serv-mid{
  padding: 0;
  margin-top: 4%;
}
.serv-inner{
  width: 100%;
}
.serv-inner ul li {
  color: white;
}
.serv-inner ul li{
  list-style: none;
  margin-bottom: 4%;
}
.serv-inner ul li i{
  margin: 5px;
  border: 1px solid white;
  background-color: transparent;
  border-radius: 200px;
  padding: 10px;
  width: 35px;
  height: 35px;
  text-align: center;
}
.serv-inner ul li i:hover{
  background-color: white;
  color: #097882;
}
.serv-inner img{
  width: 100%;
}
.li-inner{
  opacity: 0;
  color: #FBFBFB;
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  height: 0;
  -webkit-transition: all .3s ease .15s;
  -moz-transition: all .3s ease .15s;
  -o-transition: all .3s ease .15s;
  -ms-transition: all .3s ease .15s;
  transition: all .3s ease .15s;
}
.serv-inner ul li:hover .li-inner{
  opacity: 1;
  height: 50px;
  background-color: cadetblue;
  margin-right: 10px;
  padding: 5px 10px 5px 5px;
}
.right-side ul li .li-inner{
  text-align: right;
}
/**************** END Services *******************/

/* PROJECTS*/

.projects{
  background-image: url(../img/projects-bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  width: 100%;
  margin-top: -168px;
  text-align: center;
}
.projects>.container{
  width: 100%;
  margin: 0;
  padding: 0;
}
.proj-head{
  text-align: center;
  margin-top: 17%;
}
.proj-inner{
  padding: 0;
  width: 100%;
}
.pro-box{
  width: 47%;
  margin: 20px;
  height: 400px;
  float: right;
  margin-top: 2%;
  overflow: hidden;
  padding: 0;
}
.pro-box-hover{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 0 7px #097882;
  opacity: 0;
}
.pro-box-hover>.icons {
  position: absolute;
  bottom: 75px;
  transition: 0.8s ease;
  opacity: 0;
}
.pro-box h4{
	font-weight: bolder;
}
.pro-box:hover .pro-box-hover{
  opacity: 1;
  transition: all 0.3s ease;
}
.pro-box:hover .icons{
  opacity: 1;
  transition: 0.8s ease;
}
.pro-box>img{
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out;

}
.pro-box-inner{
  position: absolute;
  top: 220px;
  right: 30px;
  z-index: 1000;
  margin: 0 auto;
  width: 50%
}
.pro-box-inner>h4{
  margin-top: 65px;
  position: absolute;
  background-color: white;
  width: 100%;
  text-align: center;
  padding: 10px 0 10px 0;
  color: #097882;
  transition: all 0.5s ease-in-out;

}
.pro-box:hover img{
  opacity: 0.5;
  transition: all 0.5s ease-in-out;
  -webkit-transform:scale(1.3);
transform:scale(1.3);

}
.pro-box:hover h4{
  margin-top: 0px;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
.pro-box:hover p{
  opacity: 1;
  transition: all 1s ease-in-out;
  position: relative;
}
.pro-box-inner>p{
  background-color: white;
  float: right;
  text-align: right;
  position: absolute;
  top: 50px;
  width: 100%;
  padding: 10px;
  color: #555;
  height: 80px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}


.pro-box-hover>.icons>ul>li{
  margin-right: 20px;
  position: relative;
  z-index: 1001;
  border-radius: 200px;
  background: #097882;
  display: inline-block;
  list-style: none;
  transition: 0.8s ease;
}
.pro-box-hover>.icons ul li a{
  display: block;
  text-decoration: none;
  transition: 0.8s ease;
  padding: 15px;
	color: white;
}
.pro-box-hover>.icons ul li a i{
  color: white;
  z-index: 1004;
  transition: 0.8s ease;
  display: block;
}
.pro-box-hover>.icons ul li a i:hover{
   color: black;
}
.pro-button{
  margin-top: 5%;
  margin-bottom: 5%;
}
a.pro-link{
  background-color: #097882;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
}
a.pro-link:hover{
  border-radius: 150px;
  transition: all 0.7s ease-in-out;
}

/**************** END Services *******************/

/* Media*/
.media{
  background-image: url(../img/media-bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  width: 100%;
  min-height: 800px;
  margin-top: 0;
  text-align: center;
  padding: 0;
}
.media-head{
  text-align: center;
  margin-top: 5%;
}
.media .right-side{
  width: 50%;
  text-align: right;
  margin-top: 35px;
  float: right;
  min-height: 400px;
}
.carousel-inner{
  width: 93% !important;
}
.carousel-control{
  top:30px;
}
.vedio{
  width: 400px;
  height: 400px;
  float: right;
}

/* carousel */
.media-carousel{
  padding: 20px 0px 30px 40px;
  width: 550px;
}
/* Previous button  */
.media-carousel .carousel-control.left
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Next button  */
.media-carousel .carousel-control.right
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active
{
  background: #333333;
}
.media-carousel img
{
  width: 250px;
  height: 100px
}
.media-slider{
  width: 600px;
  height: 500px
}
.media-slide{
  width: 100% !important;
  height: 100%;
}
.media-slide>.item{
  width: 100%;
  height: 100%;
}
.media-slide>.item>img{
  height: 100%;
}
.carousel-control.left{
  background: transparent !important;
}
.carousel-control.right{
  background: transparent !important;
}
.carousel-caption{
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  width: 100%;
  left: 0 !important;
}
.carousel-indicators{
  bottom: 5px !important;
}
/* End carousel */


.media-footer{
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 160px;
}
.media1{
  text-align: right;
  float: right;
  margin: 10px 40px 10px 45px;
}
.media1>h4{
  color: white;
  margin-bottom: 20px;
}
.media1>p{
  color: white;
  font-size: 12px;
  width: 150px;
  float: right;
  margin: 0;
}
.media1>img{
  width: 150px;
  height: 100px;
  float: left;
  position: relative;
  top: -45px;
  right: 60px;
}
/**************** END Media *******************/


/* Partners */
.partners{
  width: 100%;
  height: 450px;
}
.part-head{
  text-align: center;
  margin-top: 5%;
  margin-bottom: 5%;
}
.part-inner{
  margin: 0 auto;
  text-align: center;
}
.part-inner>img{
  width: 150px;
  height: 100px;
  margin: 17px;
}
/**************** END partners *******************/
/* Manager */

.manager{
  width: 100%;
  margin: 0;
  padding: 0;
  max-height: 300px;
}
.manager img{
  width: 100%;
  position: relative;
}
.manager>.container{
  width: 100%;
}
.manager-inner{
  position: absolute;;
  top: 150px;
  text-align: center;
  width: 50%;
  left: 25%;
}
.manager-inner>p,h2 {
  color: white;
  margin-bottom: 20px;;
}

/**************** END Manager *******************/

/* footer */

.footer{
  width: 100%;
  height: 400px;
  padding: 50px;
  background-color: #181f20;
}
.sections{

}
.sec{
  float: right;
  color: #bababa;
  height: 300px;
  width: 23%;
  margin-left: 21px;
  text-align: right;
}
.sec>h3{
  margin-bottom: 35px;
  border-bottom: 1px solid #097882;
  padding-bottom: 15px;
  width: 100%;
  color: #097882;

}
.sec p{
  text-align: right;
  margin-right: 15px;
  margin-bottom: 15px;

}
.sec1 .fa{
  position: absolute;
    background-color: #101415;
    color: #bababa;
    padding: 11px;
    border-radius: 5px;
    width: 35px;
    text-align: center;
}
.location{
  width: 205px;
  height: 130px;
}
.con-det{
  width: 205px;
  height: 130px;
  font-family: 'Open Sans Condensed', sans-serif;
}
.con-det p{
  padding-top: 10px;
}
.social .fa{
  position: relative;
}

.sec2 li{
  list-style: none;
  color:  #bababa;
  margin: 10px;
}
.sec2 .fa{
  margin-left: 10px;
}
.sec2 a{
  text-decoration: none;
  color: #bababa;
}
.sec2 a:hover{
  color: white;
}
a:hover + .fa-caret-left{
  color: white;
}


.sec3 p{
  width: 100%;
  background-color: #101415;
  margin-left: -10px;
  font-size: 11px;
  padding: 10px;
  border-radius: 3px;
}
.sec3 .fa{
  position: absolute;
  color: #45C1DD;
  margin-top: 8px;
}
.sec4 img{
  width: 70px;
  height: 50px;
  float: right;
}
.sec4 h5{
  position: relative;
  float: right;
  margin-right: 8px;
  top: -8px;
}
.sec4 p{
  position: absolute;
  top: 120px;
  left: 120px;
  background-color: #eceef5;
  color: #92a1d1;
  padding: 3px 5px 3px 5px ;
  border-radius: 3px;
}
.facebook{
  border-bottom: 1px solid #097882;
  min-height: 80px;
}
.copyrights{
  position: relative;
  bottom: 0;
  width: 100%;
  max-height: 55px;
  padding: 20px;
  background-color: #101415;
  color: rgba(186, 186, 186, 0.55);
  font-family: 'Open Sans Condensed', sans-serif;
}
.copyrights p{
 display: inline;
}
/**************** END footer *******************/