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

   
}
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
}
.navbar{border-radius:0;margin-bottom:0;z-index: 9999;}

.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:#666;background-color:transparent!important}

/* Nav / Navbar Styles
===================================*/
.navbar {
	background: transparent;
	border-bottom: none;
	padding: 30px 0;
	transition-duration: 0.6s;
}



.navbar-default .navbar-toggle,.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus{background-color:transparent;border-color: transparent}
.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:#998056!important
  }

.navbar-default .navbar-nav > li > a {
    color: #998056;
	font-weight:600
}
.navbar-nav > li > .dropdown-menu{background: #101010;
box-shadow: 0 1px 20px 0px rgba(0,0,0,.8);}
.navbar-nav .dropdown-menu > li > a{line-height:2;-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;color:#fff}
.navbar-nav .dropdown-menu > li > a:hover,.navbar-nav .dropdown-menu > li > a:focus{color:#ccc;background:transparent;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{background-color:transparent;color:#998056 !important}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus{background-color:transparent}
.navbar-default .navbar-toggle,.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus{background-color:transparent;border-color: #998056;}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
	width: 30px;
    height: 3px;
}
	header {
		padding: 0;
		transition: 0.5s;
	}
.navbar-brand > img{height: 60px; width: auto;margin-top: -30px; }
.navbar-default .navbar-toggle .icon-bar {
    background-color: #998056;
}
.navbar-default .navbar-nav .open .dropdown-menu > li.active > a {
    color: #998056;
}
.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:#333}

/* Sticky */

	header.sticky {
		position: fixed;
		left: 0; right: 0;
		height: 60px;
		padding: 20px 0 10px 0;
		z-index:9999
	}
.sticky .navbar{padding:5px 0;background:#fff;-webkit-box-shadow: -2px 6px 23px -10px rgb(199,193,193);
    -moz-box-shadow: -2px 6px 23px -10px rgba(199,193,193,1);
    box-shadow: -2px 6px 23px -10px rgb(199,193,193);
}
.sticky .navbar-brand img{height: 55px; width: auto;margin-top: -20px; }
.sticky .navbar-default .navbar-nav > li > a:hover, .sticky .navbar-default .navbar-nav > li > a:focus, .sticky .navbar-default .navbar-nav > .active > a, .sticky .navbar-default .navbar-nav > .sticky .active > a:hover, .sticky .navbar-default .navbar-nav > .active > a:focus	{color: #333;}
.sticky .navbar-default .navbar-nav > li > a{color:#333}
.sticky .navbar-default .navbar-toggle .icon-bar {
background-color: #998056!important;}
.sticky .navbar-default .navbar-toggle, .sticky .navbar-default .navbar-toggle:hover, .sticky .navbar-default .navbar-toggle:focus {
    background-color: transparent;
    border-color: #998056!important;
}
/******/
.bold{font-weight:bold}
.btn.bg-gold{border:2px solid #998056 ;color:#fff;transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;padding:10px 40px;border-radius:30px;margin-top:3%;background:#998056 !important}	
.btn.bg-gold:hover{background:transparent!important;color:#998056 ;}
.dark.more{background:#998056 ;color:#fff;border:2px solid #998056 }
.dark.more:hover{background:transparent;color:#998056 }
.padding-div{padding:6% 0;}
.gold{color:#998056 }
p{font-size:16px;line-height:1.7}
.green{color:#3ba94b;}
.bg-gold{background-color:#998056!important;}
.pad{padding:5% 0}
/***start home***/

.top-banar {
    background:url(../img/banar.jpg)no-repeat ;
	background-attachment: fixed;
	color:#fff;
	height:100vh;
	background-size:100% 100%;
    position: relative;
	
}

.top-banar .top-banar-text{ position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}
.top-banar .top-banar-text .gold{font-weight:bold;margin-bottom:10vh}
.title{margin-bottom:50px}
.title h2,.title h4{font-weight:bold;}
.title h4{color:#998056}
/****about*******/
.about{position:relative}

.about li{font-size:16px;line-height:1.7}
.vision{border:3px solid #998056;padding:20px ;margin-bottom:5%;overflow:hidden;
-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;}
.vis-icon{width:100px;position:absolute}
.vis-icon i{position:absolute;font-size: 45px;top: 50%;
  left: 50%;transform: translate(-50%, -50%)}
.vis-text{padding-right:150px;}
.vision:hover{background:#242323;border:3px solid #242323}
.vision:hover .vis-text{color:#fff}
/***services****/
.ser{padding:45px 15px;color:#fff;position:relative;overflow:hidden;margin-bottom:30px;
background:url(../img/7.png)#1d1c1c no-repeat;background-position:right bottom;
-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;}
.ser h4{margin:20px 0}
.ser .ser-icon{    position: relative;
    z-index: 1;
    margin-top: 25px;margin-bottom:50px}
.ser .ser-icon i{color:#998056;font-size:30px}
.ser-icon:after {
    position: absolute;
    content: "";
    width: 55px;
    height: 55px;
    left: 0;
    top: -15px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(45deg);
    z-index: -2;
    transition: 0.5s all ease;
    background-color: #2d2c2c;
}
.ser:hover{background:url(../img/7.png)#998056 no-repeat;background-position:right bottom;}
.ser:hover i{color:#fff}
.ser:hover .ser-icon:after {
    background-color: #86714d;
    transform: rotate(-45deg);
}
/***state****/
.stats {
    background:url(../img/cta.jpg)no-repeat ;
	background-attachment: fixed;
	color:#fff;
	background-size:100% 100%;
position: relative;height:auto}
.stats .stat{position:relative;overflow:hidden;margin-bottom:20px}
.stats .stat .icon{position:absolute;top:10px;width:80px}
.stats .stat .left{padding-right:100px;display:inline-block}
/******team*****/
.team-item {
  position: relative;
  font-size: 14px;
  line-height:1.7;
  height:640px;
 margin-bottom:70px
 
}
.team-item h4{margin-bottom:20px}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  backface-visibility: hidden;
  -webkit-box-shadow: -2px 6px 23px -10px rgb(199, 193, 193);
  -moz-box-shadow: -2px 6px 23px -10px rgba(199, 193, 193, 1);
  box-shadow: -2px 6px 23px -10px rgb(199, 193, 193);
  border:4px solid #998056;
  box-shadow: 0px 0px 15px 0px #ddd;
  background:url(../img/1.jpg)no-repeat ;
	color:#fff;
	background-size:100% 100%;
   
}
.face-front{display:flex;justify-content:center;align-items:center}
.face img{width:340px;height:340px;border:3px solid #998056;
-webkit-box-shadow: -2px 6px 23px -10px rgb(199, 193, 193);
  -moz-box-shadow: -2px 6px 23px -10px rgba(199, 193, 193, 1);
  box-shadow: -2px 6px 23px -10px rgb(199, 193, 193);
  border:8px solid #998056;
  box-shadow: 0px 0px 15px 0px #ddd;}
.face-back {
  transform: rotateY(180deg);
  padding:30px 20px;
  display:flex;
  justify-content: center;
  align-items: center;
  padding-bottom:85px
}

.face-back ol{padding-right:20px}
.team-item:hover .face-front {
  transform: rotateY(-180deg);
}
.team-item:hover .face-back {
  transform: rotateY(0deg);
}
.team-item .team-inner {
    background-color: #fff ;
    text-align: center;
    box-shadow: 0px 0px 15px 0px #ddd;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    transition: 0.5s all ease;
	 position:absolute;
	top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
	padding:20px 0;
	color:#fff
}
.team-item .team-inner h4{color:#333;font-weight:bold}
.team-item:hover .team-inner {
    background-color: #b69d74;
    width: 100%;
}
.team-item:hover .team-inner h5{color:#fff!important}
.team-inner .gold{margin-bottom:20px}
/***contact*****/
.contact{position:relative}
.contact .title{margin-bottom:15%}
.contact iframe{width:100%}
.contact .info{position:relative;}
.contact .contact-info{background:#998056 ;overflow: hidden;color: #fff;
padding: 70px 40px;position: absolute;top: -100px;}
.contact .contact-info h4{font-weight:bold}
.contact .contact-info h5{font-size:19}
.contact .contact-info .place{font-size:17px}
.contact .info .icon{width:90px;position:absolute}
.contact .info .icon i{position:absolute;font-size: 30px;top: 45%;
left: 55%;transform: translate(-50%, -50%);}
.contact .info .left{padding-right:100px;display:inline-block}
/****WhatsApp*****/
.WhatsAppContainer {
    position: fixed;
    right: 15px;
    bottom: 60px;
    transform: rotate(90deg) scaleX(-1);
    z-index: 100;
} 
.pulse{
    width: 70px;
    height: 70px;
    background: #4bb04f;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    animation: animate-pulse 3s linear infinite;
    cursor: pointer;
	display: flex;
    justify-content: center;
    align-items: center;
}
.pulse a{ color: #FFF;}
@keyframes animate-pulse{
    0% {
        box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4);
    }
    
    70% {
        box-shadow: 0 0 0 50px rgba(168, 63, 57, 0);
    }
    100% {
        box-shadow: 0 0 0 100px rgba(168, 63, 57, 0);
    }
}

/**footer**/

footer{background:#1d1c1c ;color:#fff;padding-bottom:3%;z-index:5;padding:5% 0 2%}
	
footer .logo{width:80px}
footer h4{font-weight:bold;color:#998056 ;line-height:3}
footer li{padding-right:20px;position:relative}
footer li i{position:absolute;right:0;font-size: 16px;top: 5px;color:#998056}
footer li a{color:#fff}
footer li a:hover{color:#ddd}
.footer-logo img{width:60%;margin:5% 0;overflow:hidden}
footer li{line-height:2}
footer li b{font-size:16px;letter-spacing:1}
footer .list-unstyled li a:hover{color:#998056 }
a:hover{text-decoration:none}
.copy{margin-top:5%;border-top:2px solid #2e2b2b;padding-top:2%;}
/* Start Scroller */

#elevator_item
{
	width:60px;
	height:100px;
	position:fixed;
	left: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;
	
}

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

#elevator
{
	display:block;
	width:50px;
	height:50px;
	background:#998056;
	color:#1d1c1c;
	border-radius:50%!important;
	border-radius:2px;
	box-shadow:0 1px 3px rgba(0,0,0,.2);
	cursor:pointer;
	margin-bottom:10px;
	display: flex;
    justify-content: center;
    align-items: center;
	
}
/* End Scroller */
 
@media (min-width: 240px)and (max-width: 319px){

.navbar{padding:0}
.navbar-nav {margin: 0 -15px;background: #101010;}
.navbar-inverse{margin-top:0;padding-top:0}
.navbar-brand{margin-top: 6%;}	

.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;
}
.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, .navbar-default .navbar-nav > li > a{

    color: #fff;}


.sticky .navbar-default .navbar-nav > li > a {
    color: #fff;
}
.navbar-fixed-top .navbar-collapse {
    max-height: 1000px;
}
.sticky .navbar{padding:0}

.team .col-xs-6,.services .col-xs-6,.stats .col-xs-6{width:100%}
.team-item{margin-bottom:90px}
.contact .contact-info {position:relative;}
.vis-text {
    padding-right: 0;
    margin-top: 130px;
}
.contact .info .left {
    padding-right: 0;
    margin-top: 80px;
}
.contact .contact-info {
    
    top: -65px;
}
}
@media (min-width: 320px)and (max-width: 500px)	{

.navbar{padding:0}
.navbar-nav {margin: 0 -15px;background: #101010}
.navbar-inverse{margin-top:0;padding-top:0}
.navbar-brand{margin-top:5%}	

.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;
}
.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, .navbar-default .navbar-nav > li > a{

    color: #fff;}

.sticky .navbar-default .navbar-nav > li > a {
    color: #fff;
}
.navbar-fixed-top .navbar-collapse {
    max-height: 1000px;
}
.sticky .navbar{padding:0}
.team .col-xs-6,.services .col-xs-6,.stats .col-xs-6{width:100%}
.team-item{margin-bottom:90px}
.contact .contact-info {position:relative;}
.contact .contact-info .info{margin-bottom:20px}
.contact .contact-info {
    top: -50px;
}
.vis-text {
    padding-right: 0;
    margin-top: 130px;
}
.contact .info .left {
    padding-right: 0;
    margin-top: 80px;
}
}


@media (min-width: 481px)and (max-width:767px)	{

.navbar{padding:0}
.navbar-nav {margin: 0 -15px;background: #101010}
.navbar-inverse{margin-top:0;padding-top:0}
.navbar-brand > .color img,.navbar-brand > .white img {margin-top:-20%}	

.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;
}
.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, .navbar-default .navbar-nav > li > a{color: #fff;}
.sticky .navbar-default .navbar-nav > li > a {
    color: #fff;
}
.navbar-fixed-top .navbar-collapse {
    max-height: 1000px;
}
.sticky .navbar{padding:0}
.navbar-brand > img {
   
    margin-top: -10px;
}
.contact .contact-info {width:100%;position:relative;left:0}
.contact .contact-info .info{margin-bottom:30px}
.contact .title {
    margin-bottom: 25%;
}
.team .col-xs-6{width:100%}
}
@media (min-width: 768px)and (max-width: 990px){
.navbar-right {
    margin-right: 2px!important;
}
.nav > li > a {
padding: 10px 5px;}
.navbar-default .navbar-nav > li > a{font-size:12px}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-right: -80px;
}
.contact .contact-info {position:relative;}
.contact .contact-info .info{margin-bottom:20px}
}


@media (min-width: 991px)and (max-width: 1024px){
.navbar-right{margin-right: 0!important;}
.nav > li > a {
padding: 10px 10px;}
	.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-right: -63px;
}

}
@media (min-width: 1025px)and (max-width: 1200px){

.navbar-right{margin-right: 55px!important;}	
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-right: -63px;
}
.navbar-right {
    margin-right: -25px!important;
}
.nav > li > a {
   
padding: 10px}

}