*,
*:after,
*:before {
	box-sizing: border-box;
}


@media only screen and (max-width:992px){
html  {
font-size :15px ;
		}
}
@media only screen and (max-width:768px){
html  {
font-size :14px ;
		}
}
@media only screen and (max-width:576px){
    html  {
font-size :13px ;
		}
    .audio_cont{
        display: none;
    }      
     
}
@media only screen and (max-width:290px){
    html  {
font-size :12px ;
		}
    .audio_cont{
        display: none;
    }      
     
}
@media only screen and (max-width:245px){
html  {
font-size :11px ;
		}
     main .hidden_logo{
   display:block;
}
.product  {
visibility:hidden ;
    }
}
body{
margin :0 ;
background: rgb(255,255,255);
background: linear-gradient(93deg, rgba(255,255,255,1) 0%, rgba(241,243,240,1) 56.1%);
font-family:Koodak ;
}

main .hidden_logo{
    
   display:none;
  
}
main {
margin-top:1.1rem ;
display:flex ;
align-items:center ;
justify-content:center ;
gap:5px ;
flex-wrap:wrap ;

}

.wraper{

padding:0.5rem 0 0 0; 
}
.product {
position:relative;
border:none ;
outline:0 ;
width:22rem ;
height:13rem  ;
border-radius :5px ;
box-shadow:4px 4px 12px 0 rgb(0, 0, 0, 0.4);
padding:0;
margin:15px 15px 30px 15px;
overflow:hidden;

}
.product img {
width:100%;
height:100% ;
object-fit:cover ;
/*opacity:0.3 ;*/
transition:all 0.7s ease 100ms;
filter: grayscale(0);
}

.product:hover img{
/*opacity:1 ;*/
filter: grayscale();
transform:scale(1.1);
cursor:pointer ;
/*filter:blur(2px) ;*/

}

.overlay {
		/*font-family:Koodak ;*/
        position: absolute;
        bottom: 0;
		left:0;
        background: rgba(0, 0, 0, 0.3); /* ناحیه مشکی روی عکس */
        width: 27%;
		border-top-right-radius:10px ;
        transition: .5s ease;
        color: white;
        padding:0px;
        text-align: center;
        
    }
.overlay a {
	font-size:0.9rem ;
margin:0 ;
transition:all 1s ease 100ms;
}	
.overlay:hover a {
color:red ;
   
}
.product a{
text-decoration:none ;
color :white ;
}
.audio_cont {
   
}
.copyright{
    
}

@keyframes logoanim {
	0%  { transform:rotate(0) }
	100%{ transform:rotate(360deg) }
	}
@keyframes logoanim1 {
	0%  { opacity:0 ; }
	10%  { opacity:0.1 ; }
	20%  { opacity:0.2 ; }
	30%  { opacity:0.3 ; }
	40%  { opacity:0.5 ; }
	50%  { opacity:0.7 ; }
	60%  { opacity:0.8 ; }
	100%  { opacity:1  ; }
	
	}
/* Repeat Code */
.contact i{
    color: red ;
    }
.contact {
   background-color: none ;
    }
.info i{
    color:rgb(33,33,33);
}