body {
  margin: 0;
  padding: 0;
  background: linear-gradient(0deg, rgba(115, 228, 50, 0.662), rgba(74, 218, 55, 0.767));
  background-repeat: no-repeat;
 background-size: cover;
 color: auto;
 font-family: Arial, sans-serif;
 text-align: center;
  }
.overlay {
 background-color: rgba(255, 255, 255, 0.5);
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}

.product-grid {
 background-color: transparent;
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 grid-gap: 10px;
 padding: 5px;
 justify-items: center;
}
.product {
 border-radius: 5px;
 background-color: rgb(200, 255, 252);
 padding: 5px;
 max-width: 200px;
 overflow: hidden;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.29);
  background-color: #fff;
}
.product h2 {
  font-size: 1rem;
 font-weight: bold;
 margin-bottom: 10px;
}
.product-price {
 font-size: 14px;
 color: #333;
 margin-bottom: 20px;
}
.product-image {
 border-radius: 2px;
 max-width: 20px;
 max-height: 20px;
 object-fit: cover;
 margin-bottom: 10px;
}
.product li {
  text-align: justify;
  font-size: smaller;

}
.buy-now-btn {
  display: inline-block;
  background-color: #014704;
  color: #fff;
  padding: 3px 10px;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
  cursor: pointer;
  margin: 2px;
}
.buy-now-btn:hover {
  background-color: #066aff;
}

header {
 background-color: #000000;
 color: white;
 padding: flex;
 text-align: center;

}
.li {
  text-align: center;
  max-width: 100dvw;

}
.li a{
text-align: center;
float: center;
order:1;
flex-grow:1;
font-size: auto;
}
.ul1{ width: 100%;
border: 1px solid #c2c2c2;
display:table;
white-space:nowrap;
text-align:center;}


.logo {
display: flex;
align-items: center;
}
.logo img {
height: 50px;
margin-right: 10px;
}
nav li {
margin: 0 10px;
}
.li a{
text-align: center;
float: center;
order:1;
flex-grow:1;
font-size: auto;
}
.user {
display: flex;
align-items: center;
font-size: 1vw;
}

.user span {
margin-right: 10px;
}

.user a {
margin-left: 10px;
}
.header-left {
display: grid;
flex-direction: column;
align-items: center;
justify-content: center;
width: fill;
height: auto;
text-align: center;

}

.header-right {
display: grid;
flex-direction: column;
}


.headnav {
background-color: lightskyblue;
color: auto;
padding: 3px 5px;
border-radius: 5px;
text-decoration: none;
margin: 5px;
display: inline-block;
color: auto;
font-weight: bold;
}

.headnav2 {
background-color: lightseagreen;
color: auto;
padding: 4px 12px;
border-radius: 5px;
text-decoration: none;
margin: 5px;
display: inline-block;
font-weight: bold;
}
.copyright {
 margin: 5px;
 font-size: 8px;
}

footer {
  background-color: #000000;
  color: #f3eeee;
  text-align: center;
  padding: 20px 0;
}

footer p {
  margin: 0;
  font-size: 14px;
}
footer img{
  max-width: 30px;
  max-height: 30px;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
}
footer img:hover {
  transform: scale(1.05);
}