@import url(httpS://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

h1, h2, h3,
h4, h5, h6, a, p ,ol ,li,span,label,legend  {
  font-family: 'Droid Arabic Kufi', serif;
  
   
	
}
p{
	font-size: 18px;
    direction: rtl;
    text-align: justify;
}

.s{
	
	text-align: center;
}
video.responsive-video {
    max-width: 100%;
    height: 100%;
}
nav ul .activv a {
    color: #fff;
    background-color: #114380;
    border-radius: 10px;
   
    
}
.navbar-fixed {
    height: 0px;
    z-index: 99999;
}
nav ul a{
   
    font-size: 1rem;
color:#114380;
    
    display: block;
    padding: 0 27px;
    cursor: pointer;
      font-family: 'Droid Arabic Kufi', serif;
    font-size: 18px;
    margin-top: 20px;
    line-height: 40px;
    margin-right: 4px;
    border-radius: 10px;
   -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
    
}
.active-menu{
    color: #fff;
    
    border-radius: 10px;
     background-color: #114380;
     margin-right: 5px;
    border-radius: 10px;
     -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
    
}

nav ul a:hover{
     
    color: #fff;
    
    border-radius: 10px;
     background-color: #114380;
     margin-right: 5px;
    border-radius: 10px;
     -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
#navigation i{
font-size: 18px;
}
#navigation{
    
    box-shadow: 10 2px 8px #000;
    background-color: rgba(255,255,255,0.83);
    height: 70px;
}
nav{
    
    background-color:transparent;
}
#navigation,
.navbar-brand,
.navbar-toggle,
.navbar-nav > li > a,
.search-form > #search-sub {
  -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}

.slider .slides li img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    margin-top: 71px;
}
nav .brand-logo{
    
    position: absolute;

    display: inline-block;
    font-size: 2.1rem;
    padding: 0;
    white-space: nowrap;
    padding-left: 60px;
    margin-top: 5px;
}
.navbar{
    
    background-color:#424242;
    color: #000;
}



#navigation {
    
    padding-right: 60px;
}


 .slider #name{
    height: 505px;
}
.mm{
    width: 200px;
}
.maqal p{
    
    overflow: inherit;
    max-height: inherit
    
}
#sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
     z-index: 0;
    
}

.mody {
   color: rgba(0, 0, 0, .70);
    height: 80px;
    width: 100%;
    margin-bottom: 250px;
    
    
}

.mody .parallax-container {
    position: relative;
    overflow: hidden;
    height: 300px;
}
.modyy{
    
    height: 630px;

}


.slider h3{
    
    font-size: 70px;
    margin-top: 100px;
    font-weight: bold;
}
.slider h1{
    
    font-size: 100px;
    margin-top: 100px;
    font-weight: bold;
}
.slider h6{
    
    font-size: 70px;
    
}



.slider{
    height: 600px;
   
    
}
.slides{
   height: 600px; 
    
}
.center{
position: absolute;
	left: 50%;
	top: 60%;
	z-index: 99;
	transform: translate(-50%,-50%);
}
.down{
position: relative;
	width: 50px;
	height: 80px;
	border-radius: 25px;
	background-color: transparent;
	border: 4px solid #b33939;
	overflow: hidden;
	
}
.down:before{
content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50px;
	background: #b33939;
	left:50%;
	top:10%;
	transform: translate(-50%,0);
	animation: animate 1s linear infinite;
}
 
.down:after{
content: '';
	position: absolute;
	width: 6px;
	height: 15px;
	border-radius: 50px;
	background: #b33939;
	left:50%;
	top:5%;
	transform: translate(-50%,0);
	border-radius: 3px;
}
@keyframes animate
{
	0%{
	transform: translate(-50%,20px);
	
	}
	80%{
	transform: translate(-50%,60px);
	
	}
	100%{
	transform: translate(-50%,100px);
	
	}
	
}

.dor img{
    
    width: 100%;
    
  
}
.dor .parallax-container {
    position: relative;
    overflow: hidden;
    height: 300px;
}
.dor h4{
    
    color: #fff;
    margin-top: 150px;
    font-weight: bold;
    font-size: 50px;
    
}

 /********** header *************************************************
***********************************************************
*****************************************************/














/********** footer *************************************************
***********************************************************
*****************************************************/


.space-map iframe{
    
    margin-top: 0px;
}
.space-map .im{
    
    position: absolute;
    z-index: 99;
    width: 99%;
}

.spaspace-map #buttons {
	float: left;
	position:absolute;
	left: 0%;
	text-align: center;
    margin-top: 240px;
   
	
}

.space-map #buttons ul {
	list-style: none;
	position: relative;
	
}

.space-map #buttons li {
	
	position: relative;
}


/* ie needs position:relative here*/

.space-map #buttons a {
    text-decoration: none;
    margin: 20px;
    background-color: transparent;
    float: left;
    width: 54px;
    border: 1px dashed #b33939;
    border-radius: 10%;
    color: #000;
    padding: 16px 15px;
    text-align: center;
    white-space: nowrap;
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.space-map #buttons i {
	font-size: 30px;
}



.space-map h2 {
	color: #fff;
	font-size: 30px;
}

.space-map #buttons .a a {
	-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);
	background-color: #4267b2;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.space-map #buttons .b a {
	-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);
	background-color: #0077B5;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.space-map #buttons .c a {
	-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);
	background-color: #00aced;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.space-map #buttons .d a {
	-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);
	background-color: #27ae60;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.space-map #buttons .e a {
	-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);
	background-color: #00bbb9;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.space-map #buttons .f a {
	-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);
	background-color: #c0392b;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}
.slide{
    
    height: 750px;
}
    
.controler{
    
    position: relative;
    z-index: 9999;
}
.controler i{
    
    color: #fff;
    font-size: 50px;
    background-color: #114380;
    padding: 5px 13px;
    border-radius: 5px;
}

.controler .prev {
    
   left: 10px;
    cursor: pointer;
    position: absolute;
   bottom: 400px;
    color: #000;
}
.controler .next {
    
    right:10px;
    cursor: pointer;
    position: absolute;
     bottom: 400px;
    color: #000;
}



.two .row {
    
    width: 90%;
    
}

.two .sool i{
    
    font-size: 70px;
    margin-top: 10px;
    color: #7f8c8d;
} 
.two  .sool{
    
    padding: 20px;
    height: 270px;
     -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.two  .sool:hover{
    background-color: #ecf0f1;
     -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
    
}

.two .coom h3{
    
    font-size: 22px;
    direction: rtl;
    line-height: 33px;
    color: #b33939;
}

.two a{
    
    background-color: #fff;
    color: #b33939;
    border:1px solid #000;
    border-radius: 5px;
    
}

.two a:hover{
     background-color: #b33939;
    color: #fff;
      border:1px solid #000;
    
}

.two .modal-content h3{
    
    direction: rtl;
    
    color: #b33939;
    font-size: 22px;
    
}


.two .modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    max-height: 76%;
    width: 85%;
    margin: auto;
    overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
    top:20%;
}

.two .modal-content h5{
    
    font-size: 18px;
    color: #999;
    direction: rtl;
    
}

.two .modal-content ul{
    
    direction: rtl;
}







.three{
    
    background-color:#dfe6e9;
    margin-top: 50px;
    padding: 50px;
    
}



.three .msqimg{
    
    margin-top: 150px;
    
}

.three .moq{
    
    width: 50px;
    margin: auto;
    width: 15%;
}
.three .msq {
    
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    height: 290px;
    
}
.three .msq a{
    
    background-color:#b33939 ;
    color: #fff;
}
.three .msq h3{
    
    direction: rtl;
    font-size: 27px;
    color: #b33939;
    
}

.three .modal-content ul{
    
    direction: rtl;
}





.four .aboot{
    
    background-color: #b33939;
    width: 100%;
    height: 350px;
   border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
     padding: 20px;
     margin-top: 10px;
}
.four .aboot h3{
    
    color: #fff;
    direction: rtl;
  
    font-size: 30px;
}
.four .aboot p{
    
    width: 90%;
    direction: rtl;
    margin: auto;
    color: #fff;
}

.qu{
    
    margin-top: 0px;
    
}
.qu .row{
    
    width: 80%;
}


.qus h3{
	background-color:#114380;
    color: #fff;
    padding: 20px;
   
    margin: auto;
   
    font-size: 25px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    
	
}
.collapsible.popout > li{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    
}
.qus .row {
	width: 100%;
}
.qus {
    
    
    margin-top: 50px;
    
}

ul:not(.browser-default) li {
    list-style-type: none;
    direction: rtl;
}

.qus .collapsible-header {
	 
	border-radius: 5px;
    color: #fff;
    margin-top: 10px;
    font-size: 18px;
    padding: 0px;
   
}
.collapsible.popout > li.active{
    
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    
}
.collapsible-body {
    display: none;
    border-bottom: 0px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2rem;
}
.qus .collapsible-header h2 {
	color: #fff;
	font-size: 18px;
	padding-top: 17px;
}

.qus .collapsible-header i {
	width: 2rem;
	font-size: 1.6rem;
	line-height: 3rem;
	display: block;
	float: left;
	text-align: center;
	margin-right: 1rem;
}

.qus .collapsible-body p {
	direction: rtl;
}
.qus .collapsible-body ul {
	direction: rtl;
}
.qus p{
    
    direction: rtl;
}

.qus ul{
    
    direction: rtl;
}




.maqalat .row {
    
    width: 90%;
    
}

.maqalat .sool img{
    
  width: 80px;
} 
.maqalat  .sool{
    margin-top: 50px;
    padding: 20px;
    height: 270px;
     -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.maqalat  .sool:hover{
    background-color: #ecf0f1;
     -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
    
}

.maqalat .coom h3{
    
    font-size: 22px;
    direction: rtl;
    line-height: 33px;
    color: #b33939;
}

.maqalat a{
    
    background-color: #fff;
    color: #b33939;
    border:1px solid #000;
    border-radius: 5px;
    
}

.maqalat a:hover{
     background-color: #b33939;
    color: #fff;
      border:1px solid #000;
    
}

.maqalat .modal-content h3{
    
    direction: rtl;
    
    color: #b33939;
    font-size: 22px;
    
}
.maqalat .modal-content h2{
    
    direction: rtl;
    font-weight: bold;
    font-size: 20px;
    
}

.maqalat .modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    max-height: 76%;
    width: 85%;
    margin: auto;
    overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
    top:20%;
}

.maqalat .modal-content h5{
    
    font-size: 18px;
    color: #999;
    direction: rtl;
    
}

.maqalat .modal-content ul{
    
    direction: rtl;
}

.his .row{
    
    width: 80%;
}
.his .dor legend{
    
   text-align: right;
    font-size: 20px;
    color: #b33939;
    
}
.his .dor fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px solid #7f8c8d;
    border-radius: 20px;
    margin-top: 20px;
    padding: 20px;
    
}
.his .dor h3{
    direction: rtl;
    color: #7f8c8d;
    font-size: 24px
}
.contract .row{
    
    width: 90%;
}
.soom legend{
    
    text-align: center;
}


.contract .soom fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px solid #b33939;
    border-radius: 20px;
    margin-top: 20px;
    padding: 20px;
    
}

.soom h4{
    
    text-align: center;
    line-height: 60px;
}
.information .row{
    
    width: 100%;
}

.information .boom{
    
    padding: 20px;
    border:1px solid #b33939;
    margin-top: 20px;
    margin: auto;
    width: 90%;
     margin-top: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 8px #b33939;
    
    
}

.information .moor{
    
    margin-top: 20px;
    
}
.information .moor h3{
    
    margin: auto;
    font-size: 25px;
    background-color: #b33939;
    padding: 15px;
    width: 100%;
    color: #fff;
    text-align: right;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    
}
.information img{
    
    margin-top: 20px;
    
}

.information ul:not(.browser-default) li {
    list-style-type: none;
    direction: rtl;
    text-align: right;
    line-height: 33px;
    font-size: 18px;
}
.information .door{
    
    border: 1px solid #b33939;
    width: 90%;
    margin: auto;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 8px #b33939;
    margin-bottom: 20px;
    
    
}




.image .btn-type div{
    width: 100%;
    margin-bottom: 5px;
    background-color:#424242;
     font-family: 'Droid Arabic Kufi', serif;
    
}
.image .items .item {
    width: 25%;
    float: left;
    margin-right: 0px;
}
.image .items .video{
    
    height: 257px;
}


.maqalat .btn-type div{
    width: 100%;
    margin-bottom: 5px;
    background-color:#424242;
     font-family: 'Droid Arabic Kufi', serif;
    
}
.maqalat .items .item {
    width: 23%;
    float: left;
    margin-right: -20px;
	margin-left: 34px;
	margin-top: 20px;
	
}

.maqalat .items .item img{
border-radius: 5px;
	height: 205px;
}

.service .moon{
    
    background-color: #b33939;
    padding: 25px;
    margin-top: 20px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    
}
.moon h3{
direction: rtl;
        font-size: 25px;
    line-height: 40px;
    font-weight: bold;
    color: #b33939;
   
    background-color: #fff;
    padding: 10px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    
    
    
}
.moon p{
    
    color: #fff;
}


.service .sun{
    
    background-color: #b33939;
    padding: 25px;
    margin-top: 20px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    
}
.sun h3{
direction: rtl;
        font-size: 25px;
    line-height: 40px;
    font-weight: bold;
   color: #b33939;
   
    background-color: #fff;
    padding: 10px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    
    
}
.sun p{
    
    color: #fff;
}

.about .row{
    
    width: 90%;
}

.about .noor {
    
    background-color: #b33939;
    padding: 5px;
    border-radius: 10px;
    color: #fff;
    margin: auto;
    width: 80%;
    
    border: 2px solid #b33939;
 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.about .noor:hover {
    
    background-color: #fff;
    border: 2px solid #b33939;
    padding: 5px;
    border-radius: 10px;
    color: #b33939;
    margin: auto;
    width: 80%;
 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.about .noor h3{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    
}

.about .dom{
    
    height: 500px;
}
.about .noor p{
    text-align: center;
    font-size: 18px;
    
}

.about .good .row{
    
    width: 100%;
}
.about .good{
    
    background-image: url(../image/physicians.jpg);
       background-repeat: no-repeat;
   
      background-attachment: fixed;
    padding: 10px;
    height: 500px;
    
}
.about .good {
    
    display: inherit;
}
.about .good2 {
    
    display: none;
}
.about .good2 .row{
    
    width: 100%;
}
.about .good2{
    
  
    
    padding: 10px;
    height: 500px;
    
}



.doo .doc{
    
    background-image: url(../image/im/Path%204.png) ;
    background-size: 100% 100%;
    height: auto;
    width: 100%;
    margin-top: 0px;
    
}


.doc .row{
    
    width: 90%;
}


.doc img{
    
    margin-top: 50px;
 border-radius: 50%;
        
}


.doo .doc h2{
color: #fff;
    font-size: 30px;
      margin-top: 100px;
}

.doo .doc p{
    
    color: #fff;
}

.doo .doc .non{
    background-image: url(../image/im/5.png)  ;
    background-size: 100% 100%;
    height: 50%;
    width: 100%;
    margin-bottom: -5px
    
}









.game{
    
    height: 600px;
  
}


.game .kaf{
    
     width: 130px;
    height: 130px;
    position: relative;
    background-color:  #114380;
    left: 30%;
margin-top: -71px;
    padding: 22px;
    margin-bottom: 20px;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    	 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
    
}

.game .kaf img{
    
    color: #fff;
    margin-top: 5px;
    margin-left: -12px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-radius: 0px;
    
}
.game .ser{
    
    border:1px solid  #114380;
    margin-top: 100px;
    padding: 5px;
    height: 380px;
    border-radius: 20px;
    background-color: #fff;
    	 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}

.game .ser h3{
    
    font-size: 22px;
    margin-top: 50px;
}

.game .ser p{
    
    direction: rtl;
    text-align: justify;
    margin: 10px;
    height: 150px;
    color:  #114380;
}
.game .ser:hover> p{
    
    color: #fff;
}
.game .ser:hover> .kaf{
    
    background-color: #fff;
    	 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.game .ser:hover{
    
    background-color:  #114380;
    color: #fff;
    	 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}




.non .game{
    
    display: inherit;
    
}
.non .game2{
    
    display: none;
    
}




.maq .moqa{
    
    display: inherit;
    
}
.maq .moqa2{
    
    display: none;
    
}


.game2{
    
    height: 600px;
  
}


.game2 .kaf{
    
     width: 130px;
    height: 130px;
    position: relative;
    background-color:  #114380;
    left: 30%;
margin-top: -71px;
    padding: 22px;
    margin-bottom: 20px;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    	 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
    
}

.game2 .kaf img{
    
    color: #fff;
    margin-top: 5px;
    margin-left: -12px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    
}
.game2 .ser{
    
    border:1px solid  #114380;
    margin-top: 100px;
    padding: 5px;
    height: 500px;
    border-radius: 20px;
    background-color: #fff;
    	 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}

.game2 .ser h3{
    
    font-size: 22px;
    margin-top: 50px;
}

.game2 .ser p{
    
    direction: rtl;
    text-align: justify;
    margin: 10px;
    height: 240px;
    color:  #114380;
}
.game2 .ser:hover> p{
    
    color: #fff;
}
.game2 .ser:hover> .kaf{
    
    background-color: #fff;
    	 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.game2 .ser:hover{
    
    background-color:  #114380;
    color: #fff;
    	 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}


































.four .game{
    
   background: rgba(0,0,0,0.7);
    height: 500px;
    width: 100%;
    display: inherit;
}



.four .game2{
    
   background: rgba(0,0,0,0.7);
    height: 500px;
    width: 100%;
    display: none;
}













.game2 .kaf{
    
     width: 130px;
    height: 130px;
    position: relative;
    background-color: #2e819e;
    left: 30%;
margin-top: -71px;
    padding: 22px;
    margin-bottom: 20px;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    	 -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
    
}

.game2 .kaf img{
    
    color: #fff;
    
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    
}

    .maq {
    background-image: url(../image/im/3.png);
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    margin-top: 300px;
    margin-bottom: 0px;
}
    



.maq .row{
    
    width: 90%;
    
    
}

.maq .maqal{
    
    background-color:#fff;
   
    
    padding: 10px;
    border-radius: 20px;
      
}

.maq .maqal h2{
    
    font-size: 20px;
    color: #114380;
    text-align:right;
}
.maqal a{
    
    background-color: #114380;
    
}
.maq img{
    
    
margin-top: 50px;
   
}

.dor img{
    
    width: 100%;
    
  
}
.dor h4{
    
    color: #fff;
    margin-top: 150px;
    font-weight: bold;
    font-size: 50px;
    
}


.who{
    background-image: url(../image/im/77.png)  ; 
      background-size: 100% 100%;
    height: 50%;
    width: 100%;
}


.who img{
    
    border-radius: 50%;
    width: 350px;
    height: 350px;
    margin-top: 10px;
}


.who h3{
    
    color: #fff;
    margin-top: 70px;
    font-size: 40px;
    margin-bottom: 30px
    
}
.who .row{
    
    width: 90%;
}

.who h5{
    
    color: #bdc3c7;
    font-size: 25px;
    line-height: 40px;
    margin-right: 40px;
    
}
.work .row{
    
    width: 90%;
}
.work h3 {
    
    direction: rtl;
  color: #114380;
    font-size: 30px;
}

.work ul:not(.browser-default) {
    padding-left: 0;
    list-style-type: none;
    direction: rtl;
     color: #114380;
    font-size: 20px;
    line-height: 40px;
}
.serv .row{
    
    width: 90%;
    margin-top: 20px;
    
    
}
.serv fieldset img{
    
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.soom legend{
    
    text-align: center;
}


.serv .soom fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 1px solid #114380;
    background-color: #ecf0f1;
    border-radius: 20px;
    margin-top: 20px;
    padding: 20px;
    
}

.serv .soom h5{
    
    color: #114380;
    text-align: center;
}

.serv .soom .modal-content img{
    
    
    height: auto;
    width: auto;
    border-radius: 10%;
}
.maqalat .modal-content img{
 
    margin-top: 20px
    
}

.maqalat .modal-content .row{
    
    width: 90%;
}
.serv ul:not(.browser-default) {
    padding-left: 0;
    list-style-type: none;
    direction: rtl;
     color: #114380;
    font-size: 20px;
    line-height: 40px;
}

 .moc{
    
    background-color:#ecf0f1;
    border-radius: 20px;
   margin-top: 50px;
     padding: 5px;
     height: 470px;
     
     
    
        
}

.moc .row{
    
    width: 100%
}

.moc  img{
    
    margin-top: 30px;

    
}

.moc h2{
    
font-size: 25px;
    color: #114380;
    text-align: right;
    font-weight: bold;
    line-height: 38px;
    
}




.maqalat .row {
    
    width: 90%;
    
}

.maqalat .sool img{
    
  width: 80px;
} 
.maqalat  .sool{
    margin-top: 50px;
    padding: 20px;
    height: 270px;
     -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.maqalat  .sool:hover{
    background-color: #ecf0f1;
     -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
          transition: all 0.6s ease;
    
}

.maqalat .coom h3{
    
    font-size: 22px;
    direction: rtl;
    line-height: 33px;
    color: #b33939;
}

.maqalat a{
    
    background-color: #fff;
    color: #114380;
    border:1px solid #000;
    border-radius: 5px;
    
}

.maqalat p{
    
 
    color:#114380;
    
    
}

.maqalat a:hover{
     background-color:#114380;
    color: #fff;
      border:1px solid #000;
    
}

.maqalat .modal-content h3{
    
    direction: rtl;
    
    color: #114380;
    font-size: 22px;
    
}
.maqalat .modal-content h2{
    
    direction: rtl;
    font-weight: bold;
    font-size: 20px;
    
}

.maqalat .modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    max-height: 76%;
    width: 85%;
    margin: auto;
    overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
    top:20%;
}

.maqalat .modal-content span{
    
  font-size: 26px;
    color: #02013d;
    direction: rtl;
    font-weight: bold;
    
}

.maqalat .modal-content ul{
    
    direction: rtl;
}


.maqalat ul:not(.browser-default) {
    padding-left: 0;
    list-style-type: none;
    direction: rtl;
     color: #114380;
    font-size: 18px;
    line-height: 40px;
}

.contactus .row{
    
    width: 80%;
}

.contactus .con img{
    
    width: 35px;
        
}

.contactus .con{
    
    margin-top: 150px;
}
.contactus li{
    
    font-size: 18px;
    line-height: 60px;
  
    
    
}



.contract .row{
    
    width: 90%;
}
.soom legend{
    
    text-align: center;
}


.contract .soom fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px solid #114380;
    border-radius: 20px;
    margin-top: 20px;
    padding: 20px;
    
}

.soom h4{
    
    text-align: center;
    line-height: 60px;
}


.footer {
	
	height:50px;
	background: #fff;
}
.footer hr{
    
    width: 90%;
}
.footer #buttons {
	float: right;
	position: relative;
	left: -50%;
	text-align: center;
	
}

.footer #buttons ul {
	list-style: none;
	position: relative;
	left: 50%;
}

.footer #buttons li {
	float: left;
	position: relative;
}


/* ie needs position:relative here*/

.footer #buttons a {
	text-decoration: none;
	margin: 20px;
	background-color: transparent;
	float: left;
	width: 55px;
	border: 1px solid #000;
	border-radius: 10%;
	color: #000;
	padding: 10px 10px;
	text-align: center;
	white-space: nowrap;
	-webkit-transition-duration: 0.7s;
	-moz-transition-duration: 0.7s;
	-o-transition-duration: 0.7s;
	transition-duration: 0.7s;
   
}

.footer #buttons i {
	font-size: 30px;
}



.footer h2 {
	color: #fff;
	font-size: 30px;
}

.footer #buttons .a a:hover {
	-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);
	background-color: #4267b2;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.footer #buttons .b a:hover {
	-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);
	background-color: #0077B5;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.footer #buttons .c a:hover {
	-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);
	background-color: #00aced;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.footer #buttons .d a:hover {
	-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);
	background-color: #b828a5;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.footer #buttons .e a:hover {
	-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);
	background-color: #00bbb9;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.footer #buttons .f a:hover {
	-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);
	background-color: #c0392b;
	border: 1px solid #fff;
	color: #000;
	text-shadow: 0px 0px 8px #fff;
}

.footer-copyright a{
	
	font-size: 20px;
	margin: auto;
    color: #000;
}
.footer-copyright{
	
	height: 60px;
        margin-top: 54px;
    text-align: center;
}