@charset "utf-8";
/* CSS Document */

title{ color:#A92234} 
@font-face {
font-family: "Droid Arabic Kufi";
src: url('../fonts/Droid.Arabic.Kufi.ttf');}
body{
 
  overflow-x:hidden;
   position: relative;
   font-family:  'Droid Arabic Kufi', serif; 
   padding:0
   
}

.pro a:hover,foucs{
   font-family: 'Droid Arabic Kufi', serif;
    text-decoration: none;
}

.pro a{
   font-family: 'Droid Arabic Kufi', serif;
}


.blue{
    color:#3498db;
    font-family: Tahoma, Geneva, sans-serif;

}
.blue-bg{background:#3498db}
.blue-bor{border:1px solid #3498db}
.gray{color:#8492a6 }
.titles:before {
    left: calc(50% + 17px);
	
}

.titles{position:relative;margin:4% 0 3%}
h3.title{line-height:0}
.title {
    position: relative;
    display: inline-block;
z-index: 2;}
.titles span {
    position: absolute;
    width: 35px;
    height: 17px;
    left: calc(50% - 17px);
}
.titles span:before, .titles span:after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 48px;
    left: 2px;
    border: 2px solid #3498db;
    border-radius: 30px 30px 30px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.titles.light span:before, .titles.light span:after { border: 2px solid #fff;}
.titles:before {
    left: calc(50% + 17px);
}

.titles:after,.titles:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    left: calc(50% - 45px);
    border-radius: 5px;
    top: 55px;
    background-color: #3498db;
}
.titles.light:after,.titles.light:before {background-color: #fff}
 .titles:before {
    left: calc(50% + 17px);
}
.titles span:after {
    left: auto;
    right: 2px;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
div:first-child p{margin:5% 0}
.navbar{border-radius:0;margin-bottom:0;z-index: 9999;position: fixed;}
.navbar-default .navbar-nav > .active > a
 {    color: #fff;
    background-color: transparent;
    border-bottom: 2px solid #fff;
}
.navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus,.navbar-default .navbar-nav > .active > a, 
 .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{color:#fff;background-color:transparent!important}
.navbar-brand > img {
    margin-top: -7%;
}
/* Nav / Navbar Styles
===================================*/
.navbar {
	background: transparent;
	border-bottom: none;
	padding: 30px 0;
	transition-duration: 0.6s;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav>li>a {
	color: #fff;
}

/* jQuery Styles
===================================*/
.navbar-scroll {
	background: -webkit-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    background: -ms-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    opacity: .9;
	padding: 0;
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.4);
	transition-duration: 0.6s;
}
.nav-dropdown-scroll {
	background: #e7eaea;
	box-shadow: 0px 10px 9px rgba(0, 0, 0, 0.4);
}
.navbar-inverse .navbar-toggle{background-color:#333}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus{background-color:#df0000}
.navbar-inverse .navbar-collapse{border-color:transparent}
.navbar-default .navbar-toggle,.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus{background-color:transparent;border-color: transparent}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
	width: 30px;
    height: 3px;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{border-color:transparent}
.navbar-left > li i{border:1px solid #fff;border-radius:50%;width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;	}
.navbar-left > li i:hover {
	
background:#3498db;color:#fff}	
.navbar-left > li > a{	padding: 10px 5px;}
.navbar-brand{
    font-family: Tahoma, Geneva, sans-serif;
    font-size:22px;
    font-weight: bold;
}
.header{
 background: -webkit-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    background: -ms-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
	margin-top: -9%;
	padding:3% 0 15%;color:#fff
}
.header img{width:150px;height:150px; border-radius:50%;
    border:5px solid #dee2e6;margin:30% auto 2%
}
.header h1{font-weight:bold; line-height:2}
.header h4{line-height:2;margin-bottom:5%}
.btn{border-radius:15px; -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}
.btn.dark{color:#fff}
.btn.dark:hover{background:transparent;color:#3498db}
.btn.light:hover{background:#3498db; color:#fff}
.btn i{margin-right:10px}
.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: -20%;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
/*products*/
.products{margin:4% 0;overflow:hidden;padding:1% 0}
.pro{
    -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) ;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) ;
	border-radius:10px;
	overflow:hidden;
	margin-bottom:10%;
	
	

}
.pro:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: 0 5px 9px rgba(60, 72, 88, 0.15);
    box-shadow: 0 5px 9px rgba(60, 72, 88, 0.15);
}
.pic{overflow:hidden;position:relative;}
.pic .top{
       padding: 20px;
    position: absolute;
    z-index: 3;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease-out;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
	background:rgba(36,105,151,.4)
}
.pic:hover .top  {
   opacity: 1;
    visibility: visible;}
.pic i{top: 40%;
right:45%s;
    position: absolute;padding: 5px;
    border-radius: 5px; -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;color:#fff}

.pro .info{border-top: 1px solid #3498db ;background-color: #f5fbff;padding:4% 0}
.pro img{max-height:240px}
/*start Our client*/
.client{background: -webkit-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    background: -ms-linear-gradient(0deg,#100727 0%,#0b5c92 100%);color:#fff;padding:0 0 3%}
.client img{width:65px;height:65px}	
.client .item{background:rgba(0,0,0,.2);overflow: hidden;
    padding: 3%;
    margin: 0 2%;
    border-radius: 10px;direction:rtl}
.client .item .comment .top{overflow:hidden;margin-bottom:4%}	
.client .item .comment .top .title{max-width:60%}
.client .item .comment h5{line-height:1.7}
.client .item .seg{margin-top:7%}
.client .item .seg span{float:right;margin-right:7px}
.review i{color:#eee}
.review i.active{color:#ede517}
.client .owl-buttons{display:none}
/*news*/
.news {padding-bottom:3%;}
.news .one-news{box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;overflow:hidden;margin-bottom:10%;border-radius:10px;
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;}


.news .one-news:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: 0 5px 9px rgba(60, 72, 88, 0.15);
    box-shadow: 0 5px 9px rgba(60, 72, 88, 0.15);
}
.news .one-news .info{padding:5% 3%;overflow:hidden}
.news .one-news .info span{line-height:2}
.news .one-news .info h4{line-height:1.7}
.news .one-news .info a{color:#333}
.news .one-news .info i{margin-left:7px}
.news .one-news .info .more i{margin-right:7px}
.news .one-news .info a:hover{color:#3498db;text-decoration:none}
.news .one-news img{max-height:240px}
/*content*/
.contact{padding-bottom:3%;background:#f9f7f799}
.contact i{margin-bottom:4%}
.contact h4{font-weight:500}
.contact a{font-size:18px}
.contact .con{margin-bottom:10%;padding:10px 0;border-radius:10px;
-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}
.contact .con:hover {
    background: #fcfcfc;
    -webkit-box-shadow: 2px -3px 26px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px -3px 26px -5px rgba(0,0,0,0.75);
    box-shadow: 2px -3px 26px -5px rgba(209, 209, 209, 0.75);
}
.contact .con:hover i{color:#c6c6c6}
/*start footer*/
footer{background-color: #161c2d ;padding:1% 0  ;color:#fff }
footer .sochal i{
    color: #adb5bd;
    border:1px solid #adb5bd;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    
}
footer .sochal i:hover {
	
	background:#3498db;color:#fff
}

footer p{margin:2% 0!important}
footer .coppy{margin-top:4%;border-top: 1px solid #3d4349;}
footer .coppy p{line-height:2}
footer .coppy i{color:#dc3545 }
#elevator_item
{
	width:60px;
	height:100px;
	position:fixed;
	right:15px;
	bottom:10px;
	-webkit-transition:opacity .4s ease-in-out;
	-moz-transition:opacity .4s ease-in-out;
	-o-transition:opacity .4s ease-in-out;
	opacity:1;
	z-index:100020;
	display:none;
	text-align:center;
	color:#fff
}

#elevator_item.off {opacity:0;visibility:hidden}

#elevator
{
	display:block;
	width:30px;
	height:30px;
	
	background-color:rgba(11,92,146,.6);
	border-radius:2px;
	box-shadow:0 1px 3px rgba(0,0,0,.2);
	cursor:pointer;
	margin-bottom:10px;color:#fff
	
}
.modal{z-index: 9999;}
.modal-lg img{margin:8% auto 3%;width:70%}
.modal-header {border-bottom:none}
.modal-header .close{float:left;opacity: 1;
    font-size: 30px;
    font-weight: bold;
}
.modal-content{padding-bottom:3%}
/* End Scroller */
@media (min-width: 240px)and (max-width: 319px){
.header img {margin-top:35%}
.header {
 
padding-bottom: 30%;}
.scroll-down {
bottom: -12%;}
.navbar{padding:0}
.navbar-nav {margin: 0 -15px;background: -webkit-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    background: -ms-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    box-shadow: 0 1px 20px 0px rgba(0,0,0,.8);
    opacity: .9;
    padding: 0;
    box-shadow:none;
    transition-duration: 0.6s;}
.navbar-left {box-shadow: none;text-align:center}

.navbar-left > li{display:inline-block}
.container > .navbar-header{background: background: -webkit-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    background: -ms-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    box-shadow: 0 1px 20px 0px rgba(0,0,0,.8);}
.nav > li{text-align:center;padding: 5px 0;}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #700404;
}
.latst-pro .col-xs-6,.news .col-xs-6,.contact .col-xs-6{width:100%}
div:first-child p {
    margin: 15% 0 7%;
}
.modal-lg img {
margin: 15% auto 3%;}

}
@media (min-width: 320px)and (max-width: 480px)	{
.navbar-left {box-shadow: none;text-align:center}
.navbar-left > li{display:inline-block}
.navbar{padding:0;}

.header {
 
padding-bottom: 30%;
}
.scroll-down {
bottom: -12%;}
.navbar-nav {margin: 0 -15px;background: -webkit-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    background: -ms-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    box-shadow: 0 1px 20px 0px rgba(0,0,0,.8);
    opacity: .9;
    padding: 0;
    box-shadow:none;
    transition-duration: 0.6s;}
.navbar-inverse{margin-top:0;padding-top:0}
.container > .navbar-header{background: background: -webkit-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    background: -ms-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    box-shadow: 0 1px 20px 0px rgba(0,0,0,.8);}
.nav > li{text-align:center;padding: 5px 0;}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #700404;
}
div:first-child p {
    margin: 15% 0 7%;
}
.latst-pro .col-xs-6,.news .col-xs-6,.contact .col-xs-6{width:100%}
.modal-lg img {
margin: 15% auto 3%;}
}

@media (min-width: 481px)and (max-width:767px)	{
.navbar-left {box-shadow: none;text-align:center}
.navbar-left > li{display:inline-block!important;}
.navbar{padding:0;}
.navbar-nav {margin: 0 -15px; background: -webkit-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    background: -ms-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    box-shadow: 0 1px 20px 0px rgba(0,0,0,.8);
    opacity: .9;
    padding: 0;
    box-shadow:none;
    transition-duration: 0.6s;
   }
.navbar-inverse{margin-top:0;padding-top:0}
.container > .navbar-header{background: background: -webkit-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    background: -ms-linear-gradient(0deg,#100727 0%,#0b5c92 100%);
    box-shadow: 0 1px 20px 0px rgba(0,0,0,.8);}
.nav > li{text-align:center;padding: 5px 0;}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #700404;
}
div:first-child p {
    margin: 8% 0 ;
}
.scroll-down {
bottom: -13%}
}
@media (min-width: 768px)and (max-width: 990px){


}
@media (max-width: 990px){

}
@media (min-width: 991px)and (max-width: 1024px){
.navbar-brand > img {
margin-top: -7%;}

}

/*
edit
 */

.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a:hover {
    color: #fff;
}

.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a {
    color: #fff;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #fff;
    background-color: transparent;
}