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


@font-face{
   font-family:"PT";
src:url(fonts/ae-almothnna-bold.ttf); 
}

@font-face{
   font-family:"heading";
src:url(fonts/1heading.ttf); 
}

@font-face{
   font-family:"lucida";
src:url(fonts/lucida.ttf); 
}

@font-face{
   font-family:"simpo";
src:url(fonts/simpo.ttf); 
}

@font-face{
   font-family:"hacen";
src:url(fonts/hacen-sahafa.ttf); 
}


.class1 {
	text-align:center;
	font-family:"PT";
	font-weight: bold;
	font-size: 18px;
}

.class2 {
	text-align: center;
	font-family:"PT1";
	font-weight: bold;
	font-size: 18px;
}




body
{
font-famlilt:arial, sans-serif;
/*background-color:#F7F7F7;*/
background-color:#FFF8DC;
height:auto;
position:relative;
 -webkit-user-select: none; /* Chrome, Opera, Safari */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
	padding:0px;
}



#nav{
	
	width:91%;
	height:auto;
	background:#003333;
	margin-top:153px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	text-align: center;
	border:0px solid #003333;
      overflow: hidden;
      z-index: 4;
      position:relative;
	-webkit-box-shadow: 2px 1px 7px -1px rgba(0,0,0,1);
-moz-box-shadow: 2px 1px 7px -1px rgba(0,0,0,1);
box-shadow: 2px 1px 7px -1px rgba(0,0,0,1);
Copy Text
}
#nav_wrapper
{
	height:150px;
	width:90%;
	top:0px;
	background:#fff;
	border-color:#003333;
	border-width:2px;
	border-bottom-style:solid;
	border-radius:0px 0px 10px 10px;
	position:fixed;
	opacity:0.9;
	background-image:url(imges/navbackground5.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-origin:content-box;
filter:alpha (opacity=30);/*IE8 earlier*/
-webkit-box-shadow: 0px -1px 14px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -1px 14px -1px rgba(0,0,0,0.75);
box-shadow: 0px -1px 14px -1px rgba(0,0,0,0.75);
z-index:999;

}



.marquee{
	width:99.9%;
	margin:0 auto;
	text-align:center;
	font-family:"PT";
	font-size: 14px; 
	color:#003333;
	overflow: hidden;
	background-color:#66cccc;
	border-radius:18px;
	
	
	

    }


.slider1
{
width:100%;
height:21%;
background-color:#003333;
border:0px;
margin: 0 auto;
padding:0px;
z-index:0;
overflow:hidden;
position: absolute;
overflow:hidden;
display:auto;


}
.slider2
{
width:90%;
height:440px;

margin:0 auto;
padding: 1px;
top:10px;
position:relative;
overflow:hidden;
display:auto;


}
	
	#img
	{

		width:99px;
		height:99px;
		border-color:#FFF;
		margin:3px 5px 5px 5px;
		border-radius:15px 15px 15px 15px;
		float:left;
	}
	#img2
	{

		width:110px;
		height:110px;
		border-color:#FFF;
		margin:10px 5px 5px 5px;
		border-radius:53px 53px 53px 53px;
		float:right;
	}
	
	
	#img3
	{

		width:600px;
		margin:0 auto;
		z-index:999;
		height:80px;
		border-color:#FFF;
		margin:18px 5px 5px 5px;
		border-radius:15px 15px 15px 15px;
		
	}
	
	
		
		  .content{
			width:99.5%;
			border-width:2px;
			border-color:#003333;
			border-style:solid;
			padding:43% 2px 30px 0px;
			background-color:#003333;
			margin-top: 2px;
			height:auto;
			margin-bottom:0px;
			
			border-left-color:#003333;
			border-right-color:#003333;
			
		}
		
		.box
		{
			
			border:solid 1px #003333;
			margin:0 auto;
			width:100%;
            padding-top: 8px;
			height: auto;
            display: flex;
			text-align:center;
			text-align:justify;
			background-color:#003333;
			
		}
		
		
		.label1{
			
		     margin: 0 auto;
			height:400px;
            width:30%;
			overflow:hidden;
			text-align: center;
			padding:14px 0px 0px 0px;
			border-color:#66CCCC;
			border-width:2px;
			border-style:solid;
			z-index:888;
			background-color:#66CCCC;
			border-radius:5px 5px 5px 5px;
			-webkit-box-shadow: -4px 4px 5px 0px rgba(255,255,255,1);
-moz-box-shadow: -4px 4px 5px 0px rgba(255,255,255,1);
box-shadow: -4px 4px 5px 0px rgba(255,255,255,1);
Copy Text		}
		


       .box-pic
		{
		
            
			height:245px;
            width:90%;
			margin: 0 auto;
            z-index:4;
            overflow: hidden;
            box-shadow: 0px 0px 15px grey;
			border-color:#fff;

		}

		
        .label1 img
		{
		 
               overflow:hidden;
               padding:2px;
             border:6px solid #fff;
			width:95%; 
			height:228px;
		   transition:transform 600ms;
		 margin:0 auto;
		 box-shadow: 0px 0px 25px black;

		}
		
	
		 
		 .matter
		 {
           
           width:100%;
           height:245px;
           margin: 0 auto;
           background-color:#000000;
           transition: transform 600ms;
	  position: relative;
	  text-align:center;
          opacity:0.7;
          z-index: 5;
		 }

        .textarea{

             padding-top:10px;
             position: absolute;
        	color: #000; width:100%;
			font-family:'DroidArabicNaskhRegular';
        	font:bold; 
			font-size:13px;
        	 height: 40px;
			 text-decoration:none;
        	 background-color:#fff;
        	 margin-top:145px;
        	 cursor: pointer;
        	 display: none;
        }


		 .label1:hover .matter
		 {
		 	transform:translateY(-244px);	
		 	display: block;
		 }	

         
          .label1:hover .textarea{
          	display: block;
          }


		.label1:hover img
		{ transform: scale(2,2);
		
		}  
		





		.content12{
			margin-top:10px;
			width:100%;
			height:auto;
			text-align:center;
			font-size:18px;
			padding:3px 10px 0px 8px;
			border:3px solid #337F7F;
			overflow:inherit;
			font-family:PT;
			color:#fff;
			background-color:#337F7F;
			font-weight:bolder;
			
		}
		p.ex{
			direction:rtl;
			width:90%;
			height:70px;
			font-family:'DroidArabicNaskhRegular';
			LINE-HEIGHT:21px;
			color:#000;
			font-size:13px;
			padding:3px 10px 1px 10px;
			text-align:justify;
			margin-top:-20px;
			
			
		}
		
		.map
		{width:100%;
         height: 450px;
         overflow: hidden;
		}
		

		.Featured
		{

             width:100%;
           height:420px;
           border: solid 1px;
           background-color:#006400;
		   background-image:url(imges/natrulgas2.png);
		   background-repeat:no-repeat;
		   background-origin:border-box;
		   background-size:cover;
           display: flex;
           transition:transform 600ms;
           overflow: hidden;
           border-left-color:#000000;
           border-right-color:#000000;
		   margin-top:0px;

		}


          .featured-img{

          	width: 100%;
          	height: 420px;
          	overflow: hidden;
          	 transition:transform 600ms;
          	 padding-right:5px;

          }

          .imgbox{
          	width: 50%;
          	height: 420px;
          	overflow: hidden;
           border-right-color:#E1E3E3;
          }

          .Featured .featured-img:hover{
          	transform: scale(1.1,1.1);
          	overflow: hidden;
          }

         .featured-label{
         	width: 50%;
         	height:200px;
         	
			
         }


          .parg{

          	color: white;
          	font-size: 30px;
          	margin-top:70px;
          	text-align: center;
          }


          .parg1{

          	color: white;
          	font-size: 18px;
          	text-align: center;
          }

          .butoon
          {
            width:80%;
            color: #fff;
            background-color:#000000;
			opacity: 0.6;
            font-size: 16px;
            height: 50px;
            text-align: center;
            border:1px solid #fff; 
            font-weight:bolder;
            margin: 0 auto;
            padding-top:20px;overflow:hidden;
			transition:all 2s;
          }

          .butoon:hover
          {
			   width:97%;
          	background-color:#000000;
			opacity: 0.8;
          	color:white; 
			height:200px;
			 font-size: 18px;
			  transition:all 0.8s;
			  overflow:hidden;
          }


		.footer
		{
           width:97%;
           height: auto;
           margin:0 auto;
           background-color:#002B2B;
           border: solid 3px #002B2B;
           z-index:6;
           padding: 10px 0px 0px 0px;
           overflow: hidden;
		}
		
         .footer-main-box{
         	margin:0 auto;
         	height:auto;
         	width:100%;
         	display: flex;
         	border:1px solid #002B2B;
         	padding-bottom: 0px; 
         }

		.visitor{
             text-align: center;
             color: white;
            border: 2px solid ;
            border-right-color:#002B2B; 
            border-top-color:#002B2B;
            border-left-color:#002B2B;
            border-bottom-color:#002B2B; 
			width:35%;
			line-height: 50px;
			overflow: hidden;
			
			height: 100%;
			margin-right: 10px;
			margin-left:14px;
			font-family:"PT";

		}
		
		.footerbox1{
			direction: rtl;
			margin-right: 10px;
			color: white;
			border:1px solid;
			border-left-color: #002B2B;
            border-top-color:#002B2B;
            border-right-color:#002B2B;
            border-bottom-color:#002B2B; 
			width: 35%;
			overflow: hidden;
			padding:5px 0px 0px 5px;
			height: 70%;
			text-align: right;
			font-family:"PT";
			vertical-align: text-top;
		}

		.ul-box{
			border:2px solid #fff;
			border-left-color:#fff; 
            border-top-color:#002B2B;
            border-right-color:#002B2B;
            border-bottom-color:#002B2B; 
            width: 99%;
            height: 100%;

		}


		.footerbox1 ul li a{
			direction: rtl;
			text-decoration: none;
			color: white;
			font-size: 14px;
			font-family:"PT";
		}

		.footerbox1 ul li a:hover{
			text-decoration: underline;
			color:#66cccc;
			font-size: 14px;
		}

		.copyright{
	
			width:100%;
			height:30px;
			color: white;
			direction:ltr;
			background-color:#003333;
			font-size: 14px;
			text-align:left;
			font-family:"2";

			
		}
		
		
		
		.organization_charts{
			width:100%;
			height:600px;
			padding-top:10px;	
			
		}
		
		
		.traning{
			width:100%;
			height:650px;
			padding-top:10px;	
			
		}
		
		.vision{
			width:800px;
			height:100%;
			padding:0px;
			margin:10px auto;
			
			border:10px solid; border-color:#66cccc;
				
			
		}
		
		.vision_text{
			
			
			width:90%;
			
			padding-top:5px;
			
			direction:rtl;
			text-align:justify;
        	color:#fff;
			font-family:'DroidArabicNaskhRegular';
        	font:bold; 
			font-size:15px;
			 
			}
		
		
		.text_policies{
			width:98%;
			direction:rtl;
			text-align:center;
			padding-top:3px;
			text-align:right;
			padding-bottom:10px;
        	color: #000;
			font-family:'DroidArabicNaskhRegular'; 
            font-weight:bold; 
            font-style: normal;  
			font-size:18px;
		
        	 
			}


		.text_policies1{
			width:90%;
			
			padding-top:5px;
			padding-bottom:15px;
			direction:rtl;
			text-align:justify;
        	color: #fff;
			font-family:'DroidArabicNaskhRegular'; 
            font-weight:normal; 
            font-style: normal; 
			font-size:17px;
			 
			}
			
			.Policies{
				width:90%;
			text-align:justify;
			padding-top:-20px;
			top:0px;
			margin:0 auto;
			padding-bottom:15px;
        	color: #000;
			font-family:PT;
        	font:bold; 
			font-size:15px;
				
			}
		.ahref3{
font-size:18px;
color:#fff;
text-decoration:none;
transition:all 0.7s;
}

.ahref3:hover{
	transition:all 0.7s;
	color:#CF3;
text-decoration:underline;
font-size:15px;

}


/* media queries       */

@media screen and (max-width:1275px){
	
	#img
	{

		width:10%;
		height:10%;
	}
	#img2
	{
        width:10%;
		height:13%;
	}
	
	#nav_wrapper
     {
		 height:auto;
      }
	  
	  
	  #img3
	{

		width:20%;
		height:5%;
	}
	#nav{
	margin-top:80px;
	}
	

	
}







@media screen and (max-width:500px){
	
	
	.label1{
			
		     margin: 0 auto;
			height:230px;
            width:30%;
			text-align: center;
			padding:14px 0px 0px 0px;
			border-color:#E1E3E3;
			border-width:2px;
			border-style:solid;
		}
		
		
		
		
	 .matter
		 {
           
           width: 100%;
           height:140px;
           margin: 0 auto;
           background-color:#006400;
           transition: transform 600ms;
	  position: relative;
	  text-align:center;
          opacity: 0.5;
          z-index: 5;
		 }
		 .box-pic
		{
		
            
			height:140px;
            width:90%;
			margin: 0 auto;
            z-index:4;
            overflow: hidden;
            box-shadow: 0px 0px 15px grey;

		}
		
		
		.label1 img
		{
		 
               overflow:hidden;
               padding: 2px;
             border: 6px solid #fff;
			width:88%; 
			height:130px;
		   transition:transform 600ms;
		 margin:0 auto;
		 box-shadow: 0px 0px 25px black;

		}
		
		
		.content12{
			
			width:80%;
			height:auto;
			font-size:6px;
			padding:3px 10px 10px 10px;
			text-align:center;
			padding-bottom:3px;
			font-family:PT;
			color:#666;
			text-align:justify;
			text-align:center;
			
		}
		
		
		
		
		
		
		.textarea{

             padding-top: 5px;
             position: absolute;
        	color: #000; width:100%;
			font-family:PT;
        	font:bold; 
			font-size:8px;
        	 height: 25px;
			 text-decoration:none;
        	 background-color:#fff;
        	 margin-top:145px;
        	 cursor: pointer;
        	 display: none;
        }


		 .label1:hover .matter
		 {
		 	transform:translateY(-244px);	
		 	display: block;
		 }	

         
          .label1:hover .textarea{
          	display: block;
          }
	
	
	
}