body {
margin: 0;
padding: 0;
height: 100%;
	
}

a.ruwad {
	color: white;
}

p {
	color: #546e7a;
	font-size: 20px;
	text-align: justify;
	direction: rtl;
    }
 p.begin {
 	text-indent: 50px;
 }
.featuresin {
	width: 960px; 
	margin: 0 auto;
	background-color: white;
	padding-top: 15px;
}
/* BG Color #e8eef2;*/
.servicesin{
	width: 960px; 
	margin: 0 auto;
	background-color:  #f7f7f7;
}
.projectin {
	width: 960px; 
	margin: 0 auto;
}
.footerin{
	 width: 90%;
	margin: 0 auto;
	background-color: #245c7f;
}
header {	
}
.headerdiv  {
	width: 100%;
	height: 62px;
	border-bottom: 5px solid #FB9E27;
}
	#logo {width: 288px;
	 height: 60px; 
	 margin: 0 auto ;
	  float: left;
	}
	.topnav{
	width: 600px;
	height: 60px; 
	margin: 0 15px 0 auto; 
	float: right; 
	text-align: right;
	}
/* nav */

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
  }
  li {
    float: right;
  }
   li a {
    display: block;
    color: black;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
  }
  li a:hover:not(.active) {
  	color: white;
    background-color: #FB9E27;
  }

 .active {
 	color: gray;
    background-color: #4CAF50;
  }
/* photo section and text */	
.mphoto {
	float:left;
	width: 100%;
	position: relative;
}
img  {
	width: 100%;
	height: auto;
	max-height: 600px; 
	/*margin: 0 0 30px 0;*/
}
/*#visiontext {
	width: 248px; 
	height: 320px; 
	margin: 0 0 30px 0; 
	padding: 20px; 
	float: left; 
	border-bottom: 1px solid #7d7d7d;
	color: white;
	background-color: #525D65;
}*/
.line{
	width: 60%;
	margin: 0 auto;
	border-bottom: 3px solid #FB9E27;
}
/* Features Section */
#features {
 clear: both;
 background-color: white;
 width: 100%;
 height: 550px; 
 margin-top: 50px;
}
.featurer {
 width: 290px;
 margin: 0 30px 30px 0; 
 float: right;
 text-align: center;
}
/* icon size*/
.featuresimgc {
 width: 110px;
 height: 110px;
 margin: 0 auto;
-webkit-transition: width .5s, height .5s; /* For Safari 3.1 to 6.0 */
    transition: width .5s, height .5s;
}
.featuresimgc:hover {
    width: 130px;
    height: 130px;
}
.featuresimga {
 width: 110px;
 height: 110px;
 margin: 0 auto;
-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}
.featuresimga:hover {
    width: 130px;
    height: 130px;
    -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
.featuresimgb {
 width: 110px;
 height: 110px;
 margin: 0 auto;
 -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}
/*
 * Animation for webkit
*/
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
} 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
} 
/*
 * Adding the animation to our element
*/
.bounce:hover {
    width: 130px;
    height: 130px;
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

.featurestext { 
	margin: 0; 
	padding: 15px ;
	color: #546e7a;
	text-align: ;
	direction: rtl;
}

/* Services Section */
#services { 
	
	 height: 550px;
	  background-color: #f7f7f7;
	  /*#F9F8F6;*/
	  margin-top: 50px;
	  padding-top: 50px;

	    
	}
.servicer { 
	width: 420px; 
	margin: 0 30px 30px 30px;
	float: right; 
	text-align: right
}
.servicel { 
	width: 420px; 
	margin: 0 30px 45px 30px;
	 float: right; 
	 text-align: right
	}
div .serimg {
	width: 110px; 
	float: right; 
	margin: 5px 0 5px 0;
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.serimg:hover {
  
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
div .servicetext {
	width: 300px; 
	float: left; 
	margin: 5px 0 5px 0;
	text-align: right; 
    padding: 15px 0 10px 0;
    color: #546e7a;
}
/* button read more */
.buttonsec {
	text-align: center;

}
.button2 {
	margin:auto;
    display:block;
	background-color: transparent; 
    color: #245c7f; 
    border: 2px solid #245c7f;
    width: 200px;
    height: 40px;
    border-radius: 5px;
    font-size: 14px;

}
.button2:hover {
    background-color: #245c7f;
    color: white;
    margin: 0 auto;
}
.button2 a {
	color: #245c7f;
	text-decoration: none;
}
.button2:hover a {
	color: white;
}

/* Project Section */
#project{
height: 500px;
padding-top: 50px;
}
div .projecttext{
 width: 300px;
 float: right;
 margin: 0; 
 text-align: right; 
padding: 0 10px 0 0;
color: #546e7a;
}
.proimg {
	width: 110px; 
	float: right; 
	margin: 5px 0 5px 0;
	}

/* Content style */
#fullcontent {
	width: 960px; 
	margin: 30px; 
	padding: 0; 
	text-align: right;
}
#towcontent {
 width: 700px; 
 margin: 30px 30px 30px 0;
  float: left;
}
#sidebar {
	width: 230px; 
	margin: 40px 0 30px 0;
	 float: left;
	}

/*Our Client*/
#client { 
	
	 height: 380px;
	  background-color: #f7f7f7;
	  /*#F9F8F6;*/
	  margin-top: 50px;
	  padding-top: 50px;

	    
	}
.clientin {
	margin: 0 auto;
	width: 960px;
}
.clientdiv { 
	width: 110px; 
	margin: 0 50px 30px 30px;
	float: right; 
	text-align: center;
}
.clientimg {
	width: 100px; 
	float: right; 
	margin: 5px 0 5px 0;
	 -webkit-transition: all 1s ease;
     	-moz-transition: all 1s ease;
     	  -o-transition: all 1s ease;
      	-ms-transition: all 1s ease;
        	  transition: all 1s ease;
}
.clientimg img:hover {
	width: 110px;
  	
}

.clienttext {
	clear: both;
	text-align: center;
}



/* Design H1 H2 H3... text*/
h1, h2, h3, h4 {
	font-family: 'Open Sans', sans-serif;
	color: #245C7F;
	direction: rtl;
}
h2{
	
	font-size: 28px;
	
}
h3 {
	font-size: 22px;
	padding-top: 0;
}
h4  {
	margin: 10px 0 0 0;
	color: #525D65;
}
.titlecenter {
	clear: both;	
	text-align: center;
    color: #245C7F ;
    padding: 15px 0 0 15px;

}
.white { color: white;}

.para {
color:  red;
}

/*link color */
.contactlist a:link {
    text-decoration: none;
color: white;
}

.contactlist a:visited {
    text-decoration: none;
}

.contactlist a:hover {
    text-decoration: underline;
}

.contactlist a:active {
    text-decoration: underline;
}
/*about css
*/
#container {
	margin: 0 auto;
	width: 100%;
	height: auto;

}
.mainbar {
	width: 100%;
	height: 80px;	
}
.aboutart{
	width: 70%;
	margin: 0 auto;
	padding: 40px 15px;
	text-align: center;
}
.vision {
	margin: 0 auto;
	width: 60%;
	background-color: #f7f7f7;
	border-top: 3px solid #FB9E27;
	padding: 10px 20px 30px;
	box-shadow: 2px 2px 5px #888888;

}
/*contact us*/
/* ----------------------------------------------- */
/* FORM */
/* ----------------------------------------------- */

.contact-form {

    width: 50%;
    margin: 100px auto;
    direction: rtl;
    margin: 40px auto 100px;
        color: #7d7d7d;

}

.maintext {
	width: 50%;
	margin: 70px auto 30px;
	border-bottom: 3px solid #FB9E27;
}

input[type=text],
input[type=email],
select,
textarea {
    width: 100%;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

textarea {
    height: 100px;
}

input[type=checkbox] {
    margin: 10px 5px 10px 0;
}

*:focus {outline: none;}

.message-form {
	width:50%;
	margin: 0 auto;
	padding: 10px;
	border-radius: 3px;
	margin-bottom: 20px;
	color: white;
}
.success {
	background-color: green;
}
.error {
	background-color: red;
}
#contactcontainer {
	margin: 0 auto;
	width: 100%;
	height: 1200px;
}
.contactsec{
	width: 60%;
	margin: 0 auto;
	margin-bottom: 30px;
}
.contactinfo {
	margin: 45px 20px; 
	width: 30%;
	direction: rtl;
	float: right;
	    color: #546e7a;	
}
#map {
	width: 60%;
	float: left;
	height: 270px;
	margin-top: 60px;
	border-bottom: 3px solid #FB9E27;
}
.contactus {
	clear: both;
	width: 75%;	
	text-align: right;
    	color: #245C7F ;
	padding-top: 85px;
}
/*------------------------------------
	Photo Page 
------------------------------------*/
#photocontainer{
	width: 80%;
	margin: 0 auto;
}

/*Project Page*/

.projlist {
	width: 40%;
	padding: 15px;
	border-top: 3px solid #FB9E27;
	float: right;
	margin: 30px 10px;
	background-color: #f7f7f7;
   	box-shadow: 2px 2px 5px #888888;
}

/*Services Page*/
.hright {
	text-align: right;
}

/* Footer Section */
#footer { 
	min-height: 100px;
	clear: both;  
	margin: 0; 
	padding-top: 15px;
	border-top: 1px solid gray; 
	text-align: center;
	color: #F5F2EC;
    	background-color: #245c7f;
}
.footcont {
	float: left;
	text-align: left;
	width: 40%;
	margin: 25px;
}
.contactlist{
	float: left;
	padding-left: 18px;

}
.fnavlist{
	float: right;
	padding-right: 18px;
}
.footnav {
	float: right;
	text-align: left;
	width: 40%;
	margin: 25px;
}
#butnav {
	color: white;
}

.copyright {
	clear: both;
	padding-bottom: 30px;
	font-size: 14px;
	/*width: 90%;*/
}
.footmap {
	height: 368px;
}
.fnavlist a {
	color: white;
	text-decoration: none;
	}
.fnavlist a:hover {
	text-decoration: underline;
	color: #F5F2EC;
  	
}