@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@font-face {
font-family:"Tajawal", serif;
src: url('../fonts/Tajawal-Regular.ttf');}
html {
    scroll-behavior: smooth;
}
body {
  width: 100%;
  font-family:"Tajawal", serif;
  font-weight: 400;
  font-style: normal;
  direction:rtl;
  margin:0px;padding:10px;}
  
 /*******/ 
 .navbar-nav {
  width: 100%;
  text-align: center;
}
ul.navbar-nav {margin-top:10px}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
 .navbar-default .navbar-brand {
    position: absolute;
}
.navbar-brand img{height:40px}
.navbar-nav > li a{font-size:16px;font-weight:800}
.navbar-default{background-color:transparent;border:none}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{background-color:transparent;color:#FF9F24}
.navbar-nav .btn a{padding:0 10px}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{color:#FF9F24}
/*******/
.pad{padding:2% 0}
.btn{background:#FF9F24;color:#000;text-align:center;transition: 0.4s;}
.btn:hover{color:#000;background:#fff;border:1px solid #FF9F24;}
.s-title{color:#FF9F24}
h1{font-weight:bold;line-height:1.4;margin-bottom:2%}
.ico{width:20px;display:inline-block;margin-left:5px}
/******/
.wrapper{overflow:hidden;
position:relative}
.info{display: flex;
    justify-content: center;
    align-items: center;height:600px}
.hero .info{background:url(../img/bg.png)center;
background-repeat:no-repeat;background-size:65%}
.more-fatures li{font-size:16px;line-height:1.7}
.whay-us{background:#000;color:#fff;padding-top:4%;border-radius: 10px;}
.whay-us .info{height:500px}
.whay-us .btn{display:inline-block;padding: 0;margin-bottom:10px}
    background: transparent;margin-left:5px;position:relative;overflow:hidden}
.sheen:after{
  content: '';
  position: absolute;
  top: -50%;
  right: 20%;
  bottom: -50%;
  left: -10%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.sheen:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}
@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

button:active{
  box-shadow:0px 0px 0px white;
  -webkit-box-shadow: inset -2px 2px 2px #ccc;
  -moz-box-shadow:    inset -2px 2px 2px #ccc;
  box-shadow:         inset -2px 2px 2px #ccc;
  transform:translate(0, 2px);
  color:#FFC491;
  background-color:#EDE358;
}
button:focus{
  outline:0;
}	
footer .logo {width:180px}
footer h4{font-weight:bold}
footer .info{display: contents;font-size:16px;line-height:1.4}
footer .info img{width:20px;margin-left:5px;display:inline-block}
footer li{list-style:none;font-size:16px;line-height:2.5;transition: 0.4s;}
footer li :hover {color:#FF9F24;text-decoration:none}
footer li a{color:#000;}
footer .link h4{margin-bottom:20px}
.copy{margin-top:20px}
.copy img{display:inline-block;margin-bottom:20px}
/************************
****************
*******************************/	
@media(max-width: 767px){
.navbar-toggle {
float: left;}
.navbar-nav > li {
display: block;}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff}
.navbar-default .navbar-toggle {
    border-color: #ff9f24;
	background-color: #ff9f24;
	transition: 0.4s;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{background-color:#fff}
.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar{background-color:#ff9f24}
.navbar-nav .btn.pull-left{float:none!important}
ul.navbar-nav {
    margin-top: 10px;
    padding: 2%;
box-shadow: 0 0 15px rgba(69, 39, 164, 0.5);}
	.navbar-brand img {
    height: 35px;
    margin-top: -10px;

}
}
@media(max-width: 820px){
	.info{height:auto}
	.hero .info{height:300px}
}