*{
   margin:0; padding:0;  
}
body{
    background:#fff;
}
footer{
    display:block;
}
main{
 display:flex;
 flex-flow:wrap;
 justify-content:center;
        background-color:#fff; 
    position:relative;
    top:1px;
    margin:0; padding:0;
}
#paginate{
text-align:center;
width:70%;
position:relative;
left:15%;
 display:flex;
 justify-content:start;
}
#paginate ul li a{
    border-radius:50%;
    margin:2px;
}
 main #all { 
     position:relative;
 top:0;
     background-color:#fff; 
    width:70%;
    height:auto;
     display:flex;
     flex-wrap:wrap;
     justify-content:center;
     padding:0;
}

main #all #m{
    display:block;
      width:48%;
  height:auto;
  margin:35px 1%;
  background:#fff;
  color: #0F2851;
font-size: 20px;
font-style: normal;
font-weight: 600;
  text-align:center;
  overflow:hidden;
}


main #all #m img{
    position:relative;
     top:0px;
     width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    border-radius: 16px;

margin: 0 0 10px 0;
} 
  main #all #m  #name{
      position:relative;
   top:0px;
   padding:0px;
   text-align:center;
  color: #0F2851;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 38px;
        overflow:hidden;
    
   }  
main #all a {  margin:0; padding:0;
     text-decoration:none;
 
}
main #praducts_cotegories{
     position:relative;
     width:72%;
     display:flex;
     flex-wrap:wrap;
     justify-content:center;
     margin:30px 0 0 0 ;
 }
main #praducts_cotegories a{
   border-radius: 49px;
background: rgba(212, 220, 255, 0.50); 
  color: #0F2851;
font-size: 16px;
font-style: normal;
font-weight: 500;
padding: 14px 24px;
text-decoration:none;
text-align:center;
margin:1%;
 }
 main #praducts_cotegories a:hover{
     text-decoration:underline;
      color: #0F2851;
 }
main #praducts_cotegories [data="cotegory_active"]{
    background:#1081E8;
    color:#fff;
}
main #praducts_cotegories [data="cotegory_active"]:hover{
    color:#fff;
}
@media only screen and (max-width: 1340px) {
 main #all #m{
    display:block;
      width:48%;
  height:auto;
  margin:30px 1%;
  background:#fff;
  color: #0F2851;
font-size: 20px;
font-style: normal;
font-weight: 600;
  text-align:center;
  overflow:hidden;
}
 main #all #m img{
    position:relative;
     top:0px;
     width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    border-radius: 10px;

margin: 0 0 10px 0;
}   

}
@media only screen and (max-width: 1250px) {
  main #praducts_cotegories{
     position:relative;
     width:82%;
     display:flex;
     flex-wrap:wrap;
      margin:25px 0 0 0 ;
     justify-content:center;
    
 }
main #all #m img{
    border-radius: 10px;
} 
  main  #all {  
 width:80%;
 height:auto;
     display:flex;
     flex-wrap:wrap;
     padding:0;
}  
 main #all #m{
    display:block;
      width:48%;
  height:auto;
  margin:25px 1%;
  background:#fff;
  color: #0F2851;
font-size: 20px;
font-style: normal;
font-weight: 600;
  text-align:center;
  overflow:hidden;
}
  #paginate{
text-align:center;
width:80%;
position:relative;
left:15%;
 display:flex;
 justify-content:start;
}
#paginate ul li a{
    border-radius:50%;
    margin:2px;
}
}
@media only screen and (max-width: 1150px) {
      main #praducts_cotegories{
     position:relative;
     width:92%;
     display:flex;
     flex-wrap:wrap;
      margin:20px 0 0 0 ;
     justify-content:center;
  
 }
 
  main  #all {  
 width:90%;
 height:auto;
     display:flex;
     flex-wrap:wrap;
     padding:0;
}
 main #all #m{
    display:block;
      width:48%;
  height:auto;
  margin:20px 1%;
  background:#fff;
  color: #0F2851;
font-size: 20px;
font-style: normal;
font-weight: 600;
  text-align:center;
  overflow:hidden;
}
main #all #m img{
    border-radius: 5px;
} 

   #paginate{
text-align:center;
width:80%;
position:relative;
left:15%;
 display:flex;
 justify-content:start;
}
#paginate ul li a{
    border-radius:50%;
    margin:2px;
}

}
@media only screen and (max-width: 991px) {
 main #praducts_cotegories{
     position:relative;
     width:95%;
     display:flex;
     flex-wrap:wrap;
     justify-content:center;
    margin:10px 0 0 0 ;
 }
  
   #all {
    width:95%;
    height:auto;
    display:flex;
     flex-wrap: wrap;
       margin:0; padding-left:2px;  
}

#all #m{
    width:49%;
    height:auto;
 margin:3px 0 3px 1px;
  overflow:hidden;
}
  main #all #m  #name{
      position:relative;
   top:0px;
   line-height:30px;
    
   }  
main #all #m img{
    border-radius: 5px;
} 
}

@media only screen and (max-width: 600px) {

body{
    background:#fff;
    /*background:#DDEBF7;*/
}
  main #all { 
       /*background:#DDEBF7;*/
       background:#fff;
    width:100%;
    height:auto;
    display:flex;
     flex-wrap: wrap;
     margin:0; padding:0;  
}

main #all #m{ 
    width:100%;
    height:auto;
  margin:20px 0; padding:0;
  overflow:hidden;
}

main #all #m img{
    border-radius: 10px;
} 
  main #all #m  #name{
      position:relative;
   top:0px;
   padding:20px;
   text-align:center;
   line-height:22px;
  color: #0F2851;
        overflow:hidden;
    
   }  

}

@media only screen and (max-width: 400px) {
  main #all { 
       background:#fff;
    width:100%;
    height:auto;
    display:flex;
     flex-wrap: wrap;
     margin:0; padding:0;  
}
main #all #m{ 
    width:100%;
    height:auto;
  margin:20px 0; padding:0;
  overflow:hidden;
}

main #all #m img{
    border-radius: 10px;
} 
  main #all #m  #name{
      position:relative;
   top:0px;
   padding:auto 20px;
   text-align:center;
  color: #0F2851;
        overflow:hidden;
    
   } 



}