/*my style */
@font-face {
    font-family: 'myFont';
    src: url(../fonts/Almarai-Light.ttf);
}
body{

	padding-top: 90px;
	font-family: myFont;
	direction:rtl ! important;
 	background:#f2f2f238;
}

h1,h2,h3,h4,h5,h6 lead {

	font-family: myFont;
}

h4, .h4 {
    font-size: 14px;
    line-height: 30px;
}

.navbar-brand{
	font-family: myFont;

}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus

{
	font-family: myFont;

}

.navbar-inverse .navbar-nav > li > a{
    font-family: myFont;
    color: #fcfcff;
    font-weight: bold;

}

.logo-area{

	padding-top: 10px;
}


/* carousel-caption */
.carousel-caption{
	
	bottom:80px;
	background:rgba(3,3,3,0.3);
	padding-left:20px;
	padding-right:20px;
}

.carousel-indicators li{

height:15px;
width:15px;

}

.carousel-indicators .active{

height:18px;
width:18px;
background:#337ab7;
}

/*END  carousel-caption */
/* SECTION about */

.about{

padding-top:50px ;
padding-bottom: 50px;


}
.about .lead{

color: #888;
font-size: 20px;
margin-top: 15px;
}

.about h1{
	font-weight: bold;
}
.about h1 span{

	color: #337ab7;
	
}

/* ending -about  */


/*  start section features */

.features {
    background: #eee;
    padding-bottom: 50px;
    padding-top: 50px;
    width: 100%;
    
}
.features h1{
	margin-bottom: 50px;
	font-weight: bold;
}


.features .feat {
	margin-bottom: 30px;
}
.features .feat h4 {

	background: #888;
	height:50px;
	padding:15px;
	font-weight: bold;
	color: #fff;

}
.features .feat h4:hover {

	background: #fff;
	color:#888;
	border:2px solid #888;
	-webkit-transition:  0.5s ease-in-out ;
	-moz-transition:  0.5s ease-in-out;
	-o-transition:  0.5s ease-in-out;
	transition:  0.5s ease-in-out; 

}
.features .feat p{
	line-height: 2em;
}


.features .feat span.glyphicon{
	font-size: 20px;
	margin-bottom: 10px;
	color: #246;
}

.link-table a{

	    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
    margin: 5px 7px 10px;
    border-radius: 15px;
    font-weight: bold;
}
/* ending -features  */

/* start -testimonils  */
.testimonils{

	padding-top: 0px;
	padding-bottom: 50px;
}


.testimonils h1{

	font-weight: bold;
	padding-bottom: 0px;
}

.testimonils .lead{

	line-height: 2em;
	margin-bottom: 10px;
}

.testimonils span{

	font-size: 18px;
	font-weight: bold;
	padding-bottom: 25px;
	color: #337ab7;
}

.testimonils .carousel-inner{
	min-height: 160px;
}
.testimonils .carousel-indicators {

	width: 100%;
	position:static;
	margin-left:auto; ;
	padding-top:20px ;

}

.testimonils .carousel-indicators li{

	text-indent: 0;
	width: 20px;
	height: 20px;
	opacity: 0.4;
	border: 1px solid #fff;
	border-radius: 50%;
	overflow: hidden;
	background: #ddd;
	margin:5px;
	-webkit-transition:  0.5s ease;
	-moz-transition:  0.5s ease;
	-o-transition:  0.5s ease;
	transition:  0.5s ease;
}
.testimonils .carousel-indicators li.active {

	width: 30px;
	height: 30px;
	opacity: 1;

	border: 2px solid #337ab7;
	background:#337ab7;
}
.testimonils .carousel-indicators li img{

	max-width: 100%;
	
}
.navbar-inverse {
   background: #061e36e8;
    border-color: rgba(0, 0, 0, .0001);
}

/* ending -testimonils  */

/* start  -tableprice  */

	.price-table{

		background: #eee;
		padding-top: 50px;
		padding-bottom: 50px


	}
	.price-table h1{

		margin-bottom: 40px;
		font-weight: bold;

	}
	 .price-table .price-box{
		background: #fff;
		padding: 10px;
		border: 2px solid #ddd;
		margin-bottom: 15px;
	}

	.price-table .price-box h2{

		margin:5px 0 15px;
		font-weight: bold;
	}

	.price-table .price-box p{

		font-size: 35px;
		font-weight:bold;
		color: #984;
		height: 100px;
		width: 100px;
		background:rgba(216, 212, 212, 0.15);
		border: #fff;
		border-radius: 50%;
		line-height:100px;

	   -webkit-transition-duration:  0.7s;
       -moz-transition-duration :0.7s;
	   -o-transition-duration: 0.7s;
	   transition-duration:  0.7s;

	}
	
	.price-table .price-box:hover p{

	    -webkit-transform:scale(1.1,1.1) rotate(360deg);
       -moz-transform:scale(1.1,1.1)rotate(360deg);
	   -o-transform:scale(1.1,1.1)rotate(360deg);
	  -transform:scale(1.1,1.1)rotate(360deg);
	  border: 2px solid #DFDFDF;

	}
	.price-box ul{

		line-height: 250%;
		font-size: 18px;

}
.price-box a{

	margin-bottom: 5px;


	}

/* ending -tableprice  */
.our_team h1{

	font-weight: bold;
	margin-bottom: 60px;
	margin-top: 60px;
}

.our_team{

	background: #f6f6f6c7;
	min-height:600px;
	-webkit-background-size:cover ;
	-moz-background-size:cover ;
	-o-background-size:cover ;
	-background-size:cover ;


}

.our_team img{

height: 150px;
	}   
.our_team .person{

	margin-bottom: 40px;
}

.our_team .team{

	background: rgba(2,2,2,0.4);
	color: #fff;
	min-height: 600px;

}
.our_team span{

 color: #984;
}
  
  .our_team .person .fa{

  	color: #fff;
  }

/* ending -our team  */

/* start subscribe  */

.subscribe{
	padding-top: 40px;
	padding-bottom: 40px;
	background: #eee;
}

.subscribe h1{

	font-weight: bold;
	padding-bottom:20px;
	color: #888;
	letter-spacing:2px;


}
.subscribe p{
	margin-bottom: 30px;
}


.subscribe .form-control{
	 border-radius: 0;
	 margin-right: 5px;
	 width: 300px;
}

.subscribe button{
	border-radius: 0;

}


/* ending -subscribe  */


/* start  -statistics  */

.statistics{
	
	background: #f6f6f6c7;
	min-height: 300px;
	-webkit-background-size:cover ;
	-moz-background-size:cover ;
	-o-background-size:cover ;
	-background-size:cover ;

}

.statistics h1{

	color: #fff;
	font-weight: bold;

}

.statistics .data{

	background: rgba(2,2,2,0.4);
	color: #fff;
	min-height: 300px;
	padding-top:40px;
	padding-bottom:40px;

}

.statistics .stats{

	-webkit-transition:  0.5s ease-in-out ;
	-moz-transition:  0.5s ease-in-out;
	-o-transition:  0.5s ease-in-out;
	transition:  0.5s ease-in-out; 
   margin-bottom: 30px;

	
}

.statistics .stats:hover{

	color: #245;
}
.statistics p{
	font-size: 40px;
	font-weight: 700px;

}
.statistics span{

	font-size: 18px;
}


/* ending  -statistics  */

/* start  -ourskills  */
.our-skills{

	padding-top: 40px;
	padding-bottom: 70px;
}

.our-skills h2{

	font-weight: bold;
	padding-bottom:20px;
	font-size:25px;
}
.skills-info .lead{

	text-align: justify;

}
.our-skills h3{

font-weight: bold;
margin-top: 0px;


}


.our-skills .progress {
    height: 40px;

}

.our-skills .progress-bar { line-height: 36px;font-size: 16px;font-weight: bold;text-align: left;text-indent: 10px }



/* ending  -ourskills  */


/*start section conatct us */

.contact-us{

		background: url(../img/cellphone-device-electronics-870903.jpg) no-repeat center center fixed;
	min-height: 450px;
	margin-top: 50px;
	-webkit-background-size:cover ;
	-moz-background-size:cover ;
	-o-background-size:cover ;
	-background-size:cover ;


}




.contact-us .fields{

	background: rgba(9,9,9,0.5);
	min-height: 450px;
	color: #ddd;
	padding-top:40px;
	margin-bottom:40px;

}

.contact-us h1{

font-weight: bold;
color: #fff;

}


.contact-us p{
	margin-bottom: 40px;

}

.contact-us input[type="text"],
.contact-us textarea{

	
	color: #000;

}
/* ending  -section conatct us  */

/* start  -section clients   */

.clients{


	background: #eee;
	padding-top: 20px;
	margin-bottom: 20px

}

.clients h1{

	font-weight: bold;


}

.clients img{

	opacity:0.4;
	filter: alpha(opacity=40);
	margin-top: 20px;
	margin-bottom: 20px;
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	-transition:all 0.4s ease-in-out; 

}


.clients img:hover{
  
opacity: 1;

}	

.map {

	padding: 10px;

}


/* ending  -section clients   */

/* start  -section footer   */

.footer{

	background: #31708f ;
	color: #fff;
	padding-top:30px

}


.footer .social-list{


	margin-left: 30px;
}
.footer a{ color: #aaa;  }

.footer h3{ 

	color: #dddddd;
	letter-spacing: 1px;
	margin:30px;
	font-weight: bold;

  }

.footer .three-columns{

	overflow: hidden;
}

.footer .three-columns li{

	width: 33.333%;
	float: left;
	padding:5px 0;
	font-weight: bold;

}
.footer .social-list li {
    overflow: hidden;
    margin: 5px 5px;
}

.footer .social-list li {
    float: left;

    filter: alpha(opacity=70);
    text-align: right;
    float: right;
}

.footer .social-list li:hover{
	opacity: 1;
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	-transition:all 0.4s ease-in-out; 

	}
.footer .social-list li img{
 
  max-height:30px;
  
} 

.footer .media-object{
	height: 50px;
}
.footer a:hover{ color: #fff;  }

.footer .copyright{

	background: #333;
	color: #aaa;
	padding:15px 0;
	margin-top:30px;
	font-weight: bold;
	font-size: 18px;


}
.footer .copyright span{

color: #337ab7;

	}
.footer .img-thumbnail{

background: rgba(0,0,0,0.2);
border: 1px solid #444;
margin-bottom: 5px;
max-height:60px;


}

.media .fa{

	color: #fff;
}

.media{

	padding-right:30px;
}

/* ending  -section footer   */
.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus
{

background: #337ab7;

}

.navbar-inverse .navbar-brand{
	color: #bbb;
	margin-top: 15px;
}

.navbar{

	    min-height: 70px;
}

.navbar-brand {
    margin-right: -15px;
    margin-left: auto;
    font-size: 55px;
    font-weight: bold;
    color: #fff !important;
    margin-top: -5px;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 18px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid #fff;
    border-radius: 4px;
  }

.navbar-nav > li > a{

		padding-top: 25px;
		padding-bottom: 25px;
		font-size: 16px;
		}
}
.navbar-nav .dropdown-menu{
	left: 0;
	right:  auto;

}

.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    left: 0;
    right: auto;
}

.dropdown-menu {
	background: #000;
	border-top: 3px solid #E41817;
	min-width: 200px;

}


.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {

	background:#E41817;
	color: #fff;
	padding-left: 25px;
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #fff;
	-webkit-transition: padding 0.5s ease;
	-moz-transition: padding 0.5s ease;
	-o-transition: padding 0.5s ease;
	transition: padding 0.5s ease;
    white-space: nowrap;
}
.navbar-brand span{

	color: #fff;
	font-size:18px;
}

.carousel-inner > .item > img{


      width: 100%;
    max-height:600px;

}

/*   ending navber  */

/*   start option-box */

.option-box{

	position: fixed;
	top: 100px;
	left: 0;
	z-index: 9999;

}
.option-box .color-option {

	float: left;
	background: #333;
	color: #fff;
     padding:10px;
     width: 200px;
     border:3px solid #337ab7;
	 display: none; 
}

.option-box .color-option ul li {

	width: 20px;
	height: 20px;
	background:#337ab7;
	display: inline-block;
	margin-right: 3px;


	}


	.option-box .gear-check{

		padding:5px;
		background:#337ab7;
		color: #fff;
		cursor: pointer;
	}

	/*   ending  option-box   */

/*   start loding */


.loading-overlay{

	background: #222;
	color: #fff;
	
}

/*   loading spiner */

.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* loading screen **/

/*  start scroll-top */

#scroll-top{

	width: 50px;
	height: 40px;
	padding:5px 5px;
	color: #fff;
	background: #31708f;
	text-align: center;
	position:fixed;
	right: 15px;
	bottom: 5px;
	z-index: 9999;
	display: none;
	cursor: pointer;

}

#scroll-top:hover{

background: #444;

	}

	/** breadcrumb-holder**/

	.breadcrumb-holder{

		background: #f5f5f5;


	}
	.breadcrumb{

		padding:10px 0;
		margin:0;




	}

	.about-us{

		padding:70px 0;
	}

	.about-us h1{
		font-weight: bold;

	}

	.about-features{

		padding: 20px 0 70px;
	}

	.about-features h3{

		font-weight: bold;
		letter-spacing: 2px;
		color: #666;

	}

	.about-features .fa{

		background: #fff;
		height: 100px;
		width: 100px;
		padding:25px;
		border-radius: 50%;
		border: 2px solid #ddd;
		color: #666;
	}

	.about-features .fa:hover{

		background: #ddd;
		color:#fff;
		-webkit-transition:  0.5s ease-in-out ;
		-moz-transition:  0.5s ease-in-out;
		-o-transition:  0.5s ease-in-out;
		transition:  0.5s ease-in-out; 
	}

	.about-ceo{


		background: #eee;
		padding:40px;
	}

	.about-ceo h2{

		font-weight:bold;
	}

.navbar-nav > li > a {
 padding-top: 25px;
    padding-bottom: 25px;
    font-size: 14px;
}



.logo{
    display: block;
    max-width: 100%;
    height: 180px;
       width: 350px;
    
}

@media (min-width: 769px){

.logo{
    display: block;
    max-width: 100%;
    height: 150px;
       width: 350px;
    margin-top: -20px;
}
}

@media (max-width: 769px){


.carousel-inner > .item > img {
    width: 100%;
    max-height: 603px;
    height: 350px;
	
}

h1{
	font-size:18px;
}
p{
	font-size:12px;
	
}
}
@media (min-width: 991px)
{
	.logo-area .btn{
margin-top: 30px;

}
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
    text-align: center !important;
}

.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > a:hover, 
.navbar-inverse .navbar-nav >   a:focus

{


	background: #7caad29e;
}

.price-table .table thead  {

	background: #337ab7;
    color: #fff;
}


.login{

	padding-top: 80px;

}


.login img{

	height: 90px;

}


.login h2{

	font-weight: bold;
	text-align: center;
	margin:25px ;
	font-size: 45px;
		

}

.login p{

	font-weight: bold;
	
	font-size: 20px;

	
}

.login .login-box{

	
}


.login-box input{


	border:1px solid #6f99a5;
	width: 400px;
	
	padding:10px;
}

.login-footer a{


 text-decoration: none;
}


.login-box button{

width: 400px;

border-radius: 20px;
margin:15px;
}

.login-box button img{

	height: 30px;
	display:inline-block;
	float: left;
	margin:0;
	padding:0;

	}

.login-footer{


	padding-top:30px;
	font-size: 18px;
	font-weight: bold;
}

@media (max-width: 767px)
{

.login-box input{
 width:300px;
 margin-left: 15px;
}
.login-box button{
 width:300px;
 margin-left: 15px;
}	
.login{

	padding-top: 45px;

}
}


@media(min-width: 992px) {

	.login .login-box {
  border: 1px solid #ddd;
  background: #eeeeee0d;

}
.login h2 {
    font-weight: bold;
    text-align: center;
    margin: 15px;
    font-size: 45px;
    
}
}

.login-box1{
	
	margin:50px 100px;
	
}


@media (max-width: 767px)
{
.login-box1{

	
	margin:10px 10px;

	

}
.login-reg{
	background: url(../img/3.jpg) no-repeat center center ;
	min-height:100%;
	height:200px;
	width: 100%;
	
	
}



@media (max-width: 768px){
	.logo-area .logo img {
    height: 120px;
 
    margin: 30px 0 10px;
}


.navbar-toggle{
	 color: #333;
}
.navbar-inverse{
	    background: #f9f9f9 !important;
		padding-top:5px;
}

.navbar-right {
    float: right !important;
    margin-right: -40px;
}

.navbar-inverse .navbar-nav > li > a {
  font-family: myFont;
    color: #44738b;
  right: 35px;
  margin: 0;
    padding: 10px;
	

}
.navbar-inverse .navbar-toggle {
    border-color: #e1dfdf;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #44738b;
}

.btn-success {
  
    margin: 5px ! important;
}

.btn {

	margin: 5px ! important;
}


 .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border: 1px solid #735e5e;
    text-align: right;
    }
    tr {
        background: #4b9ced29;
}
    


.price-table{

font-family:myfont;

}

.carousel-inner > .item > img {
    width: 100%;
    max-height: 600px;
    height: 600px;
}



.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 30px;
    height: 4px;
    border-radius: 1px;
}

.testimonils .carousel-inner {
    min-height: 160px;
    max-height: 350px;
    height: 350px;
}


.table > tbody > tr > td {
    line-height: 1.42857143;
    vertical-align: top;
    border: 1px solid #b4b4b4;
    text-align: right;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border: 1px solid #b4b4b4;
    text-align: right;
}

.table > thead > tr {
   
background: -webkit-linear-gradient(50deg,#0597c3,#035d78) !important;
}

.btn-primary {
    color: #fff;
   
background: -webkit-linear-gradient(50deg,#0597c3,#035d78) !important;
    border-color: #2e6da4;
}

.table > tbody > tr > td {
    line-height: 1.42857143;
    vertical-align: top;
    border: 1px solid #735e5e;
    text-align: center !important;
}

.pagination {
    display: inline-block;
    text-align:center;
    margin: 20px 0;
    border-radius: 4px;
}