.footer-buttons {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between buttons */
}

.button {
  background: #fafaff; /* Background color of the button */
  color: white;
  border-radius: 50%; /* Makes the button circular */
  width: 120px; /* Diameter of the button */
  height: 120px; /* Diameter of the button */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  position: relative; /* For absolute positioning of the icon */
  overflow: hidden; /* Prevents overflow of the background image */
  margin: 10px; /* Creates space between buttons */

  /* Border around the button */
  border: 3px solid #ffffff; /* White border */
}

.button:hover {
  background: #ffffff; /* Lighter color on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
}

.button span {
  font-size: 16px; /* Size of the text */
  position: absolute;
  bottom: 10px; /* Positioning the text below the icon */
  text-transform: uppercase; /* Capitalize the text */
}

/* Icon styles */
.icon-shop, .icon-about, .icon-cart {
  background-size: cover; /* Ensures the icon covers the area */
  background-position: center; /* Center the icon */
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the icon */
  width: 100%; /* Full width of the button */
  height: 100%; /* Full height of the button */
}
.icon-shop {
  background-image: url(" ../shop.png");
}
.icon-cart {
  background-image: url('../cart.png');
}
.icon-about {
  background-image: url('../aboutus.png');
}