@font-face{font-family:'SDF';src:url('../fonts/Yekan.woff') format('woff'),url('../fonts/Yekan.ttf') format('truetype')}
body {
	font-family: 'SDF',tahoma !important;
}
a,legend,p,label,select {

}
h1,h2,h3,h4,h5,h6 {
  font-family:'SDF';
}
@viewport{  
    zoom: 1.0;  
    width: extend-to-zoom;  
} 
@-ms-viewport{  
    width: extend-to-zoom;  
    zoom: 1.0;  
}

body{
	padding:0;
	margin:0;
	background-color:rgb(0,46,110);
}

.item{
	width:50px;
	margin:10px;
}

.item .img {
	margin:10px;
}

.baner{
	width:100%;
	height:;
	position:relative;
}
.menu{
	height:50px;
	line-height:50px;
	background-color:rgb(0,135,113);
	text-align:center;
	transform:rotate(-40deg);
	position:absolute;
	margin:0;
	padding:0;
	font-size:1em;
} 
.menu a{
	text-decoration:none;
}
.menu a:hover{
	color:black;
}
.serv{
	top:150px; 
	width:375px;
	left: -105px;
	transition: width 0.5s;font-weight:bold;
}
.serv:hover{
	width:395px;
	
}
.mat{
	top:210px; 
	width:420px; 
	left: -105px;
	transition: width 0.5s;font-weight:bold;
}
.mat:hover{
	width:440px;
	
}
.eq{
	top:270px; 
	width:465px; 
	left: -105px;
	transition: width 0.5s;font-weight:bold;
}
.eq:hover{
	width:485px;
	
}
.about{
	top:330px; 
	width:508px;
	left: -105px;
	transition: width 0.5s;font-weight:bold;
}
.about:hover{
	width:528px;
	
}
.count{
	top:390px;
	width:550px;
	left: -105px;
	transition: width 0.5s;
	font-weight:bold;
}
.count:hover{
	width:568px;
}
.logo{
	
	width:400px;
	height:400px;
	margin-top:10%;
	margin-bottom:80px;
	margin-left:55% !important;
	margin-bottom:10%;
}

@media (min-width:658px) and (max-width:900px){
	.menu{
	height:40px !important;
	transform:rotate(-35deg);
	line-height:40px;
	}
	.logo{
		width:250px !important;
		height:250px !important;
		margin-bottom:15% !important;
	}
	.serv{
		top:92px !important; 
		width:293px !important;
		left: -80px !important;
		transition: width 0.5s;font-weight:bold;
	}
	.serv:hover{
		width:313px !important;
		
	}
	.mat{
		top:141px !important; 
		width:331px !important; 
		left: -85px;
		transition: width 0.5s;font-weight:bold;
	}
	.mat:hover{
		width:351px!important;
		
	}
	.eq{
		top:197px !important; 
		width:386px !important; 
		left: -105px;
		transition: width 0.5s;font-weight:bold;
	}
	.eq:hover{
		width:406px !important;
		
	}
	.about{
		top:247px !important; 
		width:417px !important;
		left: -105px;
		transition: width 0.5s;font-weight:bold;
	}
	.about:hover{
		width:437px !important;
		
	}
	.count{
		top:295px !important;
		width:450px !important;
		left: -105px;
		transition: width 0.5s;
		font-weight:bold;
	}
	.count:hover{
		width:470px !important;
	}	
}
@media (min-width:563px) and (max-width:658px){
	.menu{
	height:30px !important;
	transform:rotate(-35deg);
	line-height:30px;
	}
	.logo{
		width:200px !important;
		height:200px !important;
		margin-bottom:20% !important;
	}


	.serv{
		top:105px !important; 
		width:300px !important;
		left: -80px !important;
		transition: width 0.5s;font-weight:bold;
	}
	.serv:hover{
		width:320px !important;
		
	}
	.mat{
		top:145px !important; 
		width:330px !important; 
		left: -85px;
		transition: width 0.5s;font-weight:bold;
	}
	.mat:hover{
		width:350px !important;
		
	}
	.eq{
		top:190px !important; 
		width:377px !important; 
		left: -105px;
		transition: width 0.5s;font-weight:bold;
	}
	.eq:hover{
		width:397px !important;
		
	}
	.about{
		top:230px !important; 
		width:400px !important;
		left: -105px;
		transition: width 0.5s;font-weight:bold;
	}
	.about:hover{
		width:420px !important;
		
	}
	.count{
		top:269px !important;
		width:425px !important;
		left: -105px;
		transition: width 0.5s;
		font-weight:bold;
	}
	.count:hover{
		width:445px !important;
	}	
}



@media (min-width:474px) and (max-width:563px){
	.menu{
	height:30px !important;
	transform:rotate(-35deg);
	line-height:30px;
	}
	.logo{
		width:180px !important;
		height:180px !important;
		margin-bottom:25% !important;
		margin-top:15% !important;
		margin-left:63% !important;
	}


	.serv{
		top:105px !important; 
		width:300px !important;
		left: -80px !important;
		transition: width 0.5s;font-weight:bold;
	}
	.serv:hover{
		width:320px !important;
		
	}
	.mat{
		top:145px !important; 
		width:330px !important; 
		left: -85px;
		transition: width 0.5s;font-weight:bold;
	}
	.mat:hover{
		width:350px !important;
		
	}
	.eq{
		top:190px !important; 
		width:377px !important; 
		left: -105px;
		transition: width 0.5s;font-weight:bold;
	}
	.eq:hover{
		width:397px !important;
		
	}
	.about{
		top:230px !important; 
		width:400px !important;
		left: -105px;
		transition: width 0.5s;font-weight:bold;
	}
	.about:hover{
		width:420px !important;
		
	}
	.count{
		top:269px !important;
		width:425px !important;
		left: -105px;
		transition: width 0.5s;
		font-weight:bold;
	}
	.count:hover{
		width:445px !important;
	}	
}

@media (min-width:400px) and (max-width:474px){
	.menu{
	height:30px !important;
	transform:rotate(-35deg);
	line-height:30px;
	}
	.logo{
		width:150px !important;
		height:150px !important;
		margin-bottom:27% !important;
		margin-top:18% !important;
		margin-left:60% !important;
	}


	.serv{
		top:90px !important; 
		width:250px !important;
		left: -80px !important;
		transition: width 0.5s;font-weight:bold;
	}
	.serv:hover{
		width:260px !important;
		
	}
	.mat{
		top:107px !important; 
		width:212px !important; 
		left: -25px;
		transition: width 0.5s;font-weight:bold;
	}
	.mat:hover{
		width:222px !important;
		
	}
	.eq{
		top:150px !important; 
		width:262px !important; 
		left: -50px;
		transition: width 0.5s;font-weight:bold;
	}
	.eq:hover{
		width:272px !important;
		
	}
	.about{
		top:186px !important; 
		width:290px !important;
		left: -55px;
		transition: width 0.5s;font-weight:bold;
	}
	.about:hover{
		width:300px !important;
		
	}
	.count{
		top:220px !important;
		width:307px !important;
		left: -50px;
		transition: width 0.5s;
		font-weight:bold;
	}
	.count:hover{
		width:317px !important;
	}	
}


@media (min-width:359px) and (max-width:376px){
	.menu{
	height:25px !important;
	transform:rotate(-35deg);
	line-height:25px;
	}
	.logo{
		width:100px !important;
		height:100px !important;
		margin-bottom:30% !important;
		margin-top:20% !important;
		margin-left:63% !important;
	}


	.serv{
		top:65px !important; 
		width:200px !important;
		left: -50px !important;
		transition: width 0.5s;font-weight:bold;
	}
	.serv:hover{
		width:395px;
		
	}
	.mat{
		top:90px !important; 
		width:193px !important; 
		left: -25px;
		transition: width 0.5s;font-weight:bold;
	}
	.mat:hover{
		width:440px; 
		
	}
	.eq{
		top:130px !important; 
		width:240px !important; 
		left: -50px;
		transition: width 0.5s;font-weight:bold;
	}
	.eq:hover{
		width:485px;
		
	}
	.about{
		top:165px !important; 
		width:265px !important;
		left: -55px;
		transition: width 0.5s;font-weight:bold;
	}
	.about:hover{
		width:528px;
		
	}
	.count{
		top:195px !important;
		width:279px !important;
		left: -50px;
		transition: width 0.5s;
		font-weight:bold;
	}
	.count:hover{
		width:568px;
	}	
}






@media (min-width:319px) and (max-width:325px){
	.menu{
	height:20px !important;
	transform:rotate(-35deg);
	line-height:20px;
	}
	.logo{
		width:90px !important;
		height:90px !important;
		margin-bottom:29% !important;
		margin-top:18% !important;
		margin-left:70% !important;
	}


	.serv{
		top:65px !important; 
		width:200px !important;
		left: -50px !important;
		transition: width 0.5s;font-weight:bold;
	}
	.serv:hover{
		width:395px;
		
	}
	.mat{
		top:80px !important; 
		width:183px !important; 
		left: -20px;
		transition: width 0.5s;font-weight:bold;
	}
	.mat:hover{
		width:440px;
		
	}
	.eq{
		top:115px !important; 
		width:232px !important; 
		left: -50px;
		transition: width 0.5s;font-weight:bold;
	}
	.eq:hover{
		width:485px;
		
	}
	.about{
		top:142px !important; 
		width:253px !important;
		left: -55px;
		transition: width 0.5s;font-weight:bold;
	}
	.about:hover{
		width:528px;
		
	}
	.count{
		top:165px !important;
		width:262px !important;
		left: -50px;
		transition: width 0.5s;
		font-weight:bold;
	}
	.count:hover{
		width:568px;
	}	
}











.foot {
  background-color:rgb(0,46,110);
  color:white;
  margin-top:5%;
  min-height:40px;
  line-height:40px;
  width: 100%;
  
}
@media (min-width:901px){
	.foot{
	line-height:100px !important;
	min-height: 100px !important;	
	}
}
@media (max-width: 767px)
{

	
}




.foot div{
	text-align:center; 
	color:white;
}
a{
	text-decoration:none;
	color:black;
}
.nav li a{
	color: white !important;
}
p{
	text-align:justify;
}