@font-face{
	font-family:font;
	src: url(../font/Vazirmatn-Regular.woff2);
}

@font-face{
	font-family:font;
	src: url(../font/Vazirmatn-Bold.woff2);
	font-weight: bold;
}



:root{
	--lavender:#e6e6fa;
	--Rose:#FABEC0;
	--Red:#F85C70;
	/*	ghermez kam rang*/
	--Coral:#F37970;
	--Cinnabar:#E43D40;
/*	kerem*/
	--Champagne:#FFF5D7;
	--redd:red;
	--redu:#ff3334;
/*	abi kamrang firozeh*/
	--TiffanyBlue:#C8F4F9;
	--blue:#118bee;
	--black:black;
	--tosi:rgb(0, 0, 0, 0.1);
/*	dark*/
	--NavyBlue:#000C66;
	--NeonGreen:#1DC690;
}






*{box-sizing: border-box;}
#logo{

}

a{
	color: dodgerblue;
	text-decoration: none;
}
a:hover{
	color: red;
}



html{


}

body{
	font-family:font;
	background:var(--lavender) ;

} 


html,body{
	scroll-behavior: smooth ;
}


	main{
		display: grid;
		grid-template-columns: 200px auto;
		grid-template-rows: auto auto auto;
		grid-template-areas: 

		'header header'
		'aside article'
		'footer footer'
		;
		gap: 10px;
		padding: 10px;
		border: 1px solid white;
		width: 950px;
		margin:0px auto;
		border-radius: 5px;
	}


header{
	grid-area: header;
	min-height: 150px;
	border-radius: 10px;
background-color: white;
border-radius: 20px;
font-size: 13px;

}

aside{
	grid-area: aside;
	border-radius: 25px;
	background-color: white;

}
 article{
 	grid-area: article;
 	border-radius: 20px;
 	background-color: white;
 	line-height:2em;
/* 		fotn ha beh moshkel khordeh bodan*/
 	font-size: 14px;
 	min-height: 700px;
 }
 article h2{
 	font-size: 25px;
 }
 	
footer{
	grid-area: footer;
	min-height: 100px;
border-radius:30px;
background-color: white;

}



#img{
	margin:5px 10px 5px 0px  ;
	border-radius: 50%;
	border:2px solid black;
}

#img:hover{
	transition: 0.8s;
transform:scale(0.9) ;
box-shadow:2px 2px rgba(0, 0, 0, 1.0);
border-color: silver;

}

#img-hered{
margin: 0px 20px 2px 0px;
	width:150px;
	height: 100px;
	background-image:url(../image/red_cereskent.jpg);
	border-radius: 60%;
}
@keyframes logo-play{
	from{opacity: 0;
		transform: translate(-300px) scale(0.3) rotate(50deg);

	}
	 to{
	 	opacity: 1;
	 	transform: translate(0px) scale(1.0) rotate(0deg);
	 }
}

#img-hered{
	animation: logo-play 3.5s;
}
#img-hered:hover {
 transition: 1.8s;
  transform:rotatey(360deg) ; 
  
}
#img-hered{
	margin-top: 55px;
}
/*////////////////////////////////	asli //////////////////////////////*/

#range:hover{
	transition: 0.6s;
	transform: scale(1.1);
}

/*///////////////////////////////// end asli ///////////////////////////////*/



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

#hr-text{
	margin right:20px;
}

/* ////////////////////////////////////////end footer/////////////////////////////////////// */



/*	///////////////////////////// gallery///////////////////*/		

#gallery img{
	width:150px ;
	aspect-ratio: 1;
	object-fit: cover;
	transition: 0.3s;
	border-bottom-right-radius: 50%;
	border-bottom-left-radius: 50%;
	margin: 10px;
	border: 3px solid red; 
	box-shadow:8px 2px rgba(0, 0, 0, 0.2);
}
#gallery a{
	color: rgb(255, 0, 0,0.1);
}
#gallery img:hover{
	transform:skew(1.5deg) scale(1.1);
	border: 0px;
}

@keyframes play{
	from{opacity: 0;
		transform: scale(0.3) skew(10deg);
	}
	to{
		opacity: 1;
		transform: scale(1.0) skew(0deg) ;
	}
}
#gallery{
	animation: play 3s;
}

.card-text7{
	height: 320px;
	overflow-y: scroll;
}
/*////////////////////////end gallery/////////////////*/

/*														fehrest */

#menu{
	list-style:none; !important;
}

.menuu{
	list-style: persian;
}
.menuu li{

	padding: 4px;
	margin-bottom : 8px;
	background-color: var(--tosi);
	border-radius: 5px;
	box-shadow: 3px 5px 1px var(--redd);
}

.menuu li a{
	display: block;
	height: 100%;
	width: 100%;
	border-right: 5px solid var(--redd);
	border-radius: 4px;
	color: var(--black);
}
.menuu li a:hover{
color: var(--blue);

	
}
.menuu li a:hover{
	border-right-color:black;
}
/*														end fehrest*/

/*															menu fehrest mataleb                            */	


.menu-details li{

	padding: 4px;
	margin: 1px;
	border-radius: 5px;
	background-color:var(--tosi);
	box-shadow: 2px 5px 1px var(--redd);
	
}
.menu-details li a{
	display: block;
	height: 100%;
	width: 100%;
	color:var(--black) ;
	border-right: 5px solid var(--redd);;
	border-radius: 4px;
	}
.menu-details li a:hover{
	color:var(--blue);
	border-right-color: var(--black);
	
}



/*														end menu fehrest mataleb*/



/*														barae fehrest heder	*/
nav{
	position: fixed;	
	width: 100%;
	left: 0px;
	top: 0px;
	z-index: 1;
	border-radius: 0px !important;
}
nav ul{
/*	display: block;*/
	padding:0px;
	margin: 0px;
	list-style-type: none;
	
}

nav ul li{
	display: inline-block;
	padding:3px 4px 3px 4px;
	margin: 2px;
	background-color: var(--tosi);
	border-radius: 5px;
	border-bottom:4px solid var(--redd);
}

nav ul li a{
/*	display: block;*/
	height: 100%;
	width: 100%;
	color:var(--black);
}

nav li a:hover{
	color: var(--blue);
}
nav ul li:hover{
	border-bottom-color: var(--black);
}

/*	end barae fehrest heder*/


/*	baraee shekle bala raftan bakhshe hr*/

#upp{
	width: 50px ;
	height:50px ;
	margin:0 auto;
	background-image: url(../image/upp.jpg);
}
#upp:hover{
	background-position:bottom left;
}
/*barae balaraftan samt chap*/
#up-left{
	width: 50px;
	height: 54px;
	background-image:url(../image/up-arrow.jpg);
	display: inline-block;

}
#up-left:hover{
	background-position: bottom;
	
}
#up-left{
	position: fixed;
	right:5px;
	bottom: 100px;
}

#up-left-small{
	width: 25px;
	height:26px ;
	background-image: url(../image/up-arrow-small.jpg);
	display: inline-block;
}
#up-left-small:hover{
	background-position: bottom;
}
#up-left-small{
	position: fixed;
right: 2px;
bottom: 50px;
}



/*////////////////*/
/*pak nashavad347*/
#footer-multimedia{
	background-color: white;
}

#data{
	padding:20px;
}
/*#clock{
	padding :20px;

}*/
				
	/*   be ellat in ke html rot site font bozorg bod man majbor shodam in karo konam*/
#body-asli{
	font-size: 14px;
}

footer a{
	font-size:20px;
}

			

												/*		barae website*/



.articles-website ul li a{
	display: block;
	color: black;
	margin-bottom:5px ;
}

.articles-website ul li a:hover{
color:white;
}
.articles-website ul li:hover{
	background-color:rgba( 200,200,200, 1.0);
}
.articles-website img:{
display: block;
}

.articles-website img:hover{
	transition: 0.4s;
	transform: scale(1.1);
}




									/*menu fehrest mataleb*/

#menu-articles a{
	color: black;
	display: block;
}
#menu-articles a:hover{
	color:var(--NeonGreen) ;
}



.menuu{
	display: none;
}


						/*				site map 			*/
#sitmap ul li a {
	color: black;
}
#sitmap  details ol li a {
	color: black;
}
#sitmap ul li a:hover{
	color:red;
}
#sitmap  details ol li a:hover{
	color: red;
}
						/*				about*/


	@keyframes play-about {
		from{
			opacity: 0;
			transform: scale(0.3);
		}
		to{
			opacity: 1;
			transform: scale(1.0);
		}
	}

	#filmabout{
		animation:play-about 3s ;
	}

@keyframes play-fotooo{
	from{
		opacity: 0;
		transform: all ease-in-out 0.0s;
	}
	to{
		opacity: 1;
		transition: all ease-in-out 5.0s
	}
}
#container{
	animation: play-fotooo 3s ;
}

/*							end about*/


		/*baraye text maghaleh shmareh yek*/
#text {
	margin: 20px;

}


/* img aboute*/
	
#container{
	margin: 10px;
	width: 70%;
	height: 200px;
	display: flex;
	justify-self: center;
	gap: 8px;
}

#container img{
width: 10%;
height:100%;
object-fit: cover;
border-radius: 10px;
border: 2px solid rgba(0, 0, 0, 0.32);
transition: all ease-in-out 0.5s;
}
#container img:hover{
	width: 35%;

}
/*end img abutr*/


/*///////////////////////////////////////////////////////////////*/
@media screen and (min-width:1025px)
{
	#menun{
		display: block!important;
	}
	#audio audio{
		width: 50%;
	}
	#up-left-small{
			display: none !important;
		}

}



/*						responsive desigh*/
/*tablet*/
@media screen and (max-width: 1024px)
	{
		main{
		width: 100%;
 	}

	nav{
		display: none ;
	}
		

	.menuu{
		display:block ;
	}
	
		#data{
			display: block;
		}
		#clock{
			display: block;
		}
		#big-data{
			display: block;
		}
		#audio audio{
			width: 80%;
		}
		#up-left-small{
			display: none !important;
		}

	}
 	 
/* 	 rispansive fone*/
@media screen and (max-width: 500px)
{
	main{
		grid-template-columns: auto;
		grid-template-areas: 
		'header'
		'aside'
		'article'
		'footer'
		;
	}

	#audio audio{
		width: 80%;
	}


	#data{
			display: block;
		}
		#clock{
			display: block;
		}
		#big-data{
			display: block;
		}
		#up-left{
			display: none;
		}
		#up-left-small{
			display: block !important;
		}

}

/*/////////////////////////////////////////	*/
.px-7 {
    padding-left: 4.1rem !important;
    padding-right: 4.1rem !important;
}
.px-6 {
    padding-left: 3.3rem !important;
    padding-right: 3.3rem !important;
}

 h1 {
    font-size: calc(0.8rem + 1.5vw);
}


.px-6 {
    padding-left: 3.3rem !important;
    padding-right: 3.3rem !important;
}
.my-01 {
    margin-top: .10rem !important;
    margin-bottom: .10rem !important;
}
.px-8 {
    padding-left: 4.3rem !important;
    padding-right: 4.3rem !important;
}
.gy-0 {
    --bs-gutter-y: 0.1rem;
}
.mx-6{
    margin-left: 4rem !important;
    margin-right: 4rem !important;
}
.mx-7{
    margin-left: 5rem !important;
    margin-right: 5rem !important;
}
.mx-8{
    margin-left: 6rem !important;
    margin-right: 6rem !important;
}
.mx-9{
    margin-left: 7rem !important;
    margin-right: 7rem !important;
}
.mx-10{
    margin-left: 8rem !important;
    margin-right: 8rem !important;
}
.mx-16{
    margin-left: 10rem !important;
    margin-right: 10rem !important;
}
.mx-18{
    margin-left: 12rem !important;
    margin-right: 12rem !important;
}
.mx-19{
    margin-left: 13rem !important;
    margin-right: 13rem !important;
}
.mx-20{
    margin-left: 14rem !important;
    margin-right: 14rem !important;
}
.mx-20-5{
    margin-left: 14.5rem !important;
    margin-right: 14.5rem !important;
}
.mx-21{
    margin-left: 15rem !important;
    margin-right: 15rem !important;
}
.mx-22{
    margin-left: 16rem !important;
    margin-right: 16rem !important;
}
.mx-23{
    margin-left: 17rem !important;
    margin-right: 17rem !important;
}

.ms-10 {
    margin-right: 8rem !important;
}
.ms-6 {
    margin-right: 4rem !important;
}
.ms-7 {
    margin-right: 5rem !important;
}
.ms-8 {
    margin-right: 6rem !important;
}
.ms-9 {
    margin-right: 7rem !important;
}
.ms-10 {
    margin-right: 8rem !important;
}
.ms-10-5 {
    margin-right: 8.5rem !important;
}

.ms-11 {
    margin-right: 12rem !important;
}
.ms-12 {
    margin-right: 13rem !important;
}
.ms-12-5 {
    margin-right: 13.5rem !important;
}
.ms-13 {
    margin-right: 14rem !important;
}
.ms-13-5 {
    margin-right: 14.5rem !important;
}

.ms-15 {
    margin-right: 15rem !important;
}
.ms-15-5 {
    margin-right: 15.5rem !important;
}