.search-bar {
  height: 30px;
  width: auto;
  display: flex;
  background-color: White;
  border: 1px solid black;
  align-items: center;
  border-radius: 16px;
}
.search-bar input {
  height: 25px;
  width: 300px;
  outline: none;
  border: none;
  font-size: 16px;
  margin: 0px 20px;
}
.search-bar i {
  font-size: 20px;
  cursor: pointer;
  margin: 0px 5px;
}

.products {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(247, 241, 241, 0.924);
  justify-content: space-evenly;
}
.products h1 {
  color: rgb(252, 74, 4);
}
.products {
  padding: 20px 100px;
  display: flex;
  flex-direction: row;
  min-height: 65vh;
  flex-wrap: wrap;
  row-gap: 2em;
  column-gap: 1em;
}
.products button {
  height: 50px;
  width: 150px;
  margin: 20px;
  border: none;
  outline: none;
  background-color: none;
  color: white;
  background-color: orangered;
  cursor: pointer;
}
.products button:hover {
  background-color: rgb(218, 62, 5);
}
.products .card {
  height: 320px;
  border: 1px solid black;
  width: 240px;
  cursor: pointer;
  background-color: white;
}
.products .card:hover {
  opacity: 0.8;
  box-shadow: 0px 0px 7px black;
  transition: 0.3s;
}
.products .card .image img {
  height: 200px;
  width: 240px;
}
.products .card .details span {
  margin: 10px;
}
.products .card .details .name {
  color: black;
  font-size: 20px;
}
.products .card .details .rating {
  color: rgba(255, 68, 0, 0.561);
  font-size: 16px;
}
.products .card .details .price {
  color: orangered;
  font-size: 18px;
}

footer {
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.909);
  width: 100%;
  position: sticky;
  /* bottom: 0 ; */
}

footer .credit {
  font-size: 20px;
  color: black;
  cursor: pointer;
}