/* Custom styles for hero and footer images */
.hero {
  background-image: url("./public/banner2.png");
  height: 80vh;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  transition: transform 0.3s ease;
}

.hero:hover {
  transform: scale(1.05);
}
body {
    color: #000;
    /* Ensure text is black */
    background-color: #fff;
    /* Ensure background is white */
    font-family: Arial, sans-serif;
}
/* Responsive adjustments for hero banner */
@media (max-width: 768px) {
  .hero {
    height: 40vh; /* Adjust height for smaller screens */
    background-size: contain; /* Ensure proportions are maintained */
  }
}

@media (max-width: 480px) {
  .hero {
    height: 30vh; /* Further adjust height for very small screens */
    background-size: contain; /* Maintain proportions */
  }
}

footer {
  background-image: url("https://via.placeholder.com/1500x300");
  background-color: #4caf50;
  background-size: cover;
  text-align: center;
  padding: 20px;
  color: white;
}

/* Popup notifications */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 16px;
  display: flex;
  align-items: center;
  max-width: 300px;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s, transform 0.5s;
  z-index: 1000;
  animation: fadeIn 0.5s ease-in-out, fadeOut 0.5s ease-in-out 4.5s;
}
.notification img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 16px;
}
.notification.show {
  opacity: 1;
  transform: translateY(0);
}

/* Sales notifications */
#sales-notifications .notification {
  background-color: #fffbbd; 
  color: white;
  padding: 10px 15px;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeIn 0.5s ease-in-out, fadeOut 0.5s ease-in-out 4.5s;
}

#sales-notifications .notification img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Go to Top button */
.go-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 20%;
  padding: 10px 15px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(20px);
  z-index: 1000;
}
.go-to-top.show {
  opacity: 1;
  transform: translateY(0);
}

/* Image overlay */
.image-overlay {
  position: fixed;
  bottom: 20px;
  left: -300px; /* Start off-screen */
  width: 300px;
  height: 400px;
  background-color: none;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
  transition: left 0.5s ease, opacity 0.5s ease;
  z-index: 1000;
}
.image-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.image-overlay:hover img {
  transform: scale(1.1);
}
.image-overlay.show {
  left: 20px; /* Slide in */
}
.image-overlay.hide {
  opacity: 0; /* Hide */
}

/* Responsive styles */
@media (max-width: 768px) {
  .hero {
    height: 40vh;
  }

  .text-4xl {
    font-size: 2rem;
  }

  .text-2xl {
    font-size: 1.5rem;
  }

  .container {
    padding: 0 1rem;
  }

  .notification {
    max-width: 90%;
    right: 5%;
  }

  .go-to-top {
    bottom: 10px;
    right: 10px;
  }

  .image-overlay {
    width: 90%;
    left: 5%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.hidden {
  display: none;
}