*{ box-sizing: border-box;}
   .clearfix{clear: both;}
    ul{padding: 0px; list-style: none;}



body{
   font-size: 100%;
	line-height: 160%;
   margin: 0px;
   padding: 0px;
   background: #F0F4F9;
 font-family: arial, vaderna,san-serif;
  }
	       
	
	   
	#container{
width: 100%;
max-width: 10366px;
margin-left: auto;
margin-right: auto;
}

#wrapper{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #fff;
}

 #slogan{
   width: 100%;
    max-width: 700px;
  margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
   }

                      /* index Properties Begins */
 
  #slogan{
   width: 100%;
    max-width: 700px;
  margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
    font: normal 17px georgia;
    text-align: center;
	color: #666;
   }
  
       #category{
   width: 100%;
    max-width: 1200px;
   margin-left:  auto;
    margin-right:  auto;
	margin-bottom: -15px;
	padding:  20px;
	font: bold 14px tahoma;
  }  
    #category-wrap{
  width: 100%;
   max-width: 1200px;
    margin-left: auto;
   margin-right: auto; 
   background: #ffccff;
   }    
     .flexWrap{
  width: 100%;
  margin-top: 0px;
  display: flex;
  flex-wrap: wrap;
   gap: 20px;
   justify-content: space-between;
    padding: 10px;
  }
  
   .flexWrap li {
  width: 23%;
 }
  .flexWrap li:hover {
filter: invert(10%);
}
  .flexWrap-handle {
  width: 100%;
  background-image: linear-gradient(to right, #0099f7, #f11712);
 }
   .flexWrap-cover {
  width: 100%;
  padding: 10px;
box-shadow: inset 0 0 4px #000;
}

 .flexWrap a,a:visited{
text-decoration: none;
font: bold 14px arial;
text-align: center;
color: #fff;
}


 .niche{
font:  bold 16px  tahoma;
text-align: center;
color: #fff;
}
  .imgDiv{
   width:  100%;
   height: 200px;
  padding: 10px;
  box-shadow: inset 0 0 1px #000;
 }
   
 .imgDiv-img{
width: 100%;
height: 200px;
 object-fit: cover;
} 
.overlay{
width: 100%;
margin-top:  20px;
margin-left:  auto;
margin-right:  auto;
 margin-bottom: 10px;
padding: 10px;
font: bold 18px arial;
text-align: center;
color: #fff;
border-radius: 10px;
background: #666;
}
   
   
    .categoryImg{
   width: 100%;
   height: auto;
   border: solid 1px #666;
    border-radius: 30px;
	opacity: 3;
	}
 

 #featured{
 width: 100%;
 max-width: 1200px;
 margin: 20px auto;
 }
   
 
 .imgWrap{
  width: 100%;
 position: relative;
  }
	 .pefName{
  position: absolute;
font:  bold 14px  tahoma;
top: 5px;
left: 20%;
color: #666;

} 
 
                   /* Product properties Begins */
			   
.prodImg {
  display: block;
  width: 100%;
   height: auto;
  border-radius: 25px;
 }
 
.name{
 font: bold 14px  tahoma ;
  padding: 5px;
  text-align: center;
  color: #666;
 }
  .slogan{
  font:  bold 14px  tahoma ;
  padding: 5px;
  text-align: center;
  color: #666;
  }
 
  
.price{
   font: bold 14px  tahoma;
 text-align: center;
  color: red;
 padding: 5px;
}

#btn{
 width: 100%;
padding: 5px;
font: bold 14px  tahoma;
color: #fff;
background-color: #4FA0D8;
}

                     /* Details properrties Begins */

#main-wrap{
     width: 100%;
	max-width: 1024px;
	margin-top: 25px;
	margin-left:  auto;
	margin-right:  auto;
	background: #fff;
	}


#detail-wrap {
width: 95%;
 margin: 10px auto;
box-shadow: inset 0 0 5px #000;
}
  
  #detail-left {
  width: 30%;
  padding:5px;
  float: left;
  }
  
  #detail-right {
  width: 60%;
  text-align: center;
  float: left;
  font: normal 14px arial;
  }
   
  
   .description{
   padding: 15px;
  font:  18px normal arial;
   text-align: left;
   color: #333;
  }
   .bold{
   font:  18px bold arial;
   color: #000;
  }
  
  .cartAdd{
   width:  200px;
 margin-left:  auto;
 margin-right:  auto;
  padding: 2px;
 text-align: center;
  box-shadow: inset 0 0 6px #000;
   
  }
   .cartAdd > div{
    display: inline-block;
	font:  bold 18px arial;
	 text-align: center;
	 color: #fff;
   }
    #qty{
   width: 60px;
   padding: 10px;
   font:  bold 18px arial;
    }
    
	#detail-price{
	 width: 130px;
     font: bold 16px tahoma;
	 color: red;
	 }
   
   #add-btn{
   width: 100%;
  font:  bold 18px arial;
   text-align: center;
   padding: 10px;
	border: none;
   color: #fff;
   background: #4CAF50;
	 }
  
  #related{
width: 98%;
 margin: 10px auto;
}

#related-tag{
padding: 10px;
font: bold 16px arial;
}

	 

	                 /* Cart properrties Begins */
	 #cart-top{
   width: 100%;
    max-width: 600px;
   padding: 10px;
   margin: 20px auto;
    background: #f1f1f1;
	 box-shadow: inset 0 0 4px #000;
	 }
	 
	  #cartTop-handle{
      width: 300px;
	 margin: 0px auto;
	 display: flex;
      }
	   #myCart{
	  width: 120px;
	font:  bold 18px arial;
   text-align: center;
   padding: 10px;
	border: none;
   color: #fff;
   background: #4CAF50;
	 }
	 
	 #cart-disabled,
   button[disabled]{
   font:  bold 18px arial;
   text-align: center;
   padding: 10px;
	border: none;
	color: #666;
   background: #cccccc;
    }
	
	 #blink{
	       width: 180px;
		   display: block;
           font: bold  18px  tahoma;
            color: #fff;
            text-align: center;
			 padding: 10px;
			 background: red;
            animation: animate 
             3.5s linear infinite;
			 }
             @keyframes animate {
            0% {opacity: 0;}
            50% {opacity: 0.7;}
            100% {opacity: 0;}
			}
			
			  #bmImg,ckImg{
               width: 100%;
			   object-fit: cover;
               }
	 
	 
	  #cart-wrap{
   width: 100%;
   max-width: 600px;
  margin: 20px auto;
   display: none;
   box-shadow: inset 0 0 10px #000;
	 }
	 
	  #cart-cover{
	   width: 100%;
	   display: flex;
    background: #ddd;
	box-shadow: inset 0 0 10px #000
	   }
	
	  #cart-cover > div{ 
     width: 33%;
	 padding: 10px;
	text-align: center;
	margin-bottom: 10px;
	color: #fff;
	font:  bold 14px arial;
	 }
	 
	 
	  .cart-handle{
	   width: 100%;
	   display: flex;
   flex-wrap: wrap;
    }
	 
	 .cart-handle > div{
     width: 33%;
	 padding: 10px;
	text-align: center;
	margin-bottom: 10px;
	font: normal 14px arial;
	border-bottom: 1px dotted #666;
	}
	  .cartImg{
     width: 60px;
	 height: 60px;
	}
	
	#show-cart{
    width: 300px;
	 margin-left: auto;
    margin-right: auto;
    text-align: center;
	 color: #fff;
	 }
	
	#checkout{
	width: 100%;
	display: flex;
	background: #ddd;
	box-shadow: inset 0 0 10px #000
	justify-content: space-between;
  }
  	 
	 #checkout > div{
	  width: 33%;
	  padding: 10px;
	  text-align: center;
	 box-shadow: inset 0 0 10px #000
	 }
	  #checkout2{
	width: 100%;
	padding: 10px;
    text-align: center;
	 background: #ddd;
	box-shadow: inset 0 0 10px #000
  }
	 
	  #checkout-wrap{
   width: 100%;
   max-width: 600px;
  margin: 20px auto;
  box-shadow: inset 0 0 10px #000;
	 }
	 
	  #checkout a,a:visited{
	font: bold 18px arial;
	text-decoration: none;
	color: teal;
	}
	 
	  #scroll{
	width: 100%;
	max-width: 700px;
	height: 600px;
	padding: 10px;
	margin: 0px auto;
	overflow: auto;
	box-shadow: inset 0 0 1px #000;
	box-sizing: border-box;
	background: #FFF;
	}
	
	                /* Account Admin Properties Begins */
					
 #admin-wrap{
 	width: 100%;
	text-align: center;
	background: #f8f8f8;
	}
	 #admin-top{
 	width: 100%;
    padding: 20px;
	font: bold 20px arial;
	color: #666;
 background-color: #d3d3d3;
  background-image: linear-gradient(15deg, transparent 28%, rgba(255, 255, 255, 0.5) 28%);
  background-size: 50px;
	box-shadow: inset 0 0 3px #000;
	}
	  #show-cart{
   width: 100%;
   max-width: 600px;
  margin: 20px auto;
  box-shadow: inset 0 0 10px #000;
	 }
	
	
	#first-Char{
	width: 50px;
    padding-left: 5px;
	margin-right: 10px;
	text-align: center;
	font: bold 20px arial;
	color: #fff;
	border-radius: 30%;
	background: #0288d1;
	}
	#admin-nav{
 	 width: 300px;
	 margin-left:  auto;
	  margin-right:  auto;
	 display: flex;
    }
	
	#admin-nav > div{
 	 width: 100px;
	}
	
	#jq-result,#profile-update{
 	 width: 100%;
	 max-width: 900px;
	margin-left:  auto;
	margin-right:  auto;
	 padding: 20px;
	background: #fff;
    }
	
	#no-order{
 	 width: 100%;
	 font: bold 18px tahoma;
	 padding:  80px;
	 color: #999;
	}
	
	#ordFrm-top{
 	 padding: 20px;
     }
	 
	 .myOrder-cover{
      width: 100%;	   
     max-width: 600px;
	 margin-left:  auto;
	  margin-right: auto;
	  padding: 20px;
	  margin-bottom: 20px;
	 box-shadow: inset 0 0 1px #000;
	  background: #f8f8ff;
	 display: flex;
    }
	 .myOrder-image{
 	 width: 20%;
	}
	 .OrderImg{
 	 width: 100px;
	 height: 75px;
	}
	 .myOrder-info{
 	 width: 80%;
	 text-align: center;
	 background: #fff;
	 }
	  .spanPrice{
	  font: bold 14 px arial;
 	color: red;
	 }
	  #gatewayFrm{
	   width: 100%;	   
     max-width: 600px;
	  margin: 40px auto 40px auto;
	 padding: 0px 4px 4px 4px;
	 box-shadow: inset 0 0 10px #000;
	 }
	  #gatewayFrm-top{
	  padding: 20px;
	 }
	  #edit-cover{
	  padding: 5px;
	  background: #f4a460;
	 }
	  #edit-handle{
	  width: 220px;
	  margin-left:  auto;
	   margin-right:  auto;
	  display: flex;
	 }       
	               /* Admin Page Properties Begins */
	 	#admin-cap{
  width: 100%;
  max-width: 600px;
  padding: 30px;
  margin: 40px auto;
  background-color: #F2F2F2;
  border-radius: 10px;
 box-shadow: inset 0 0 10px #000;
}
	 
	 #cap {
	 width: 100%;
   max-width: 500px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 15px;
	text-align: center;
	background: #fff;
    box-shadow: inset 0 0 10px #000000;
	border-radius: 40px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	}

    .capHolder {
     width: 280px;
	 margin: 10px auto;
	 padding: 10px;
	box-shadow: inset 0 0 10px #000000;
	}
	   
	 .capHolder a,a:visited {
     text-decoration: none;
	 font: bold 18px tahoma;
	 color: #333;
	}
	 #admin-logout{
     width: 200px;
	 margin: 0px auto;
	 display: flex;
	 gap: 20px;
	}
	 #admin-logout a,a:visited{
	  text-decoration: none;
	 font: bold 18px tahoma;
	 color: #333;
	}
	

               /* Pagination Properties Begins */
.pagination{
width: 100%;
padding: 10px;
margin-top: 10px;
margin-bottom: 20px;
background: #4E79A4;
color: #fff;
font: bold 1em arial;
 box-sizing: border-box;
 box-shadow: inset 0 0 10px #000;
}
.pagina{
width: 280px;
padding: 0px;
display: flex;
gap: 10px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.pagina li{
list-style: none;
text-align: center;
width: 100%;
padding:10px;
 background: #666;
 border-radius:50%;
 box-sizing: border-box;
 color: #fff;
}
.pagina li a,a:visited{
color: #fff;
text-decoration: none;
font: bold 0.875em arial;
 box-sizing: border-box;
}
.disabled {/*Disable navigation link*/
pointer-events:none; 
 opacity:0.6;       
}

                        /* Footer Properties Begins */
footer {
width: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
}
#ft{
max-width: 500px;
margin:  0px auto;
text-align: center;
color: #ddd;
}
#ft a, a:visited{
font: bold 14px arial;
text-decoration:  none;
text-align: center;
color: #ddd;
}