/* Makes the navbar background transparent and adds a blur effect */
.navbar {
  background-color: transparent !important;
  border-bottom: 2px solid grey; /* Purple line under the navbar */
  transition: box-shadow 0.3s ease, backdrop-filter 0.3s ease; /* Smooth transition for the glow effect and blur */
  backdrop-filter: blur(5px); /* Adds blur effect to the navbar background */
}

/* Adds a glowing effect on hover for navbar */
.navbar:hover {
  box-shadow: 0 0 10px 3px rgba(128, 128, 128, 0.8); /* Purple glow */
}

/* Small shadow on navbar buttons */
.navbar .nav-link, .navbar .btn-outline-primary {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Small shadow for the buttons */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for zoom and shadow */
}

/* Change text color to purple and zoom-in effect on navbar link hover */
.navbar .nav-link:hover, .navbar .btn-outline-primary:hover {
  color: grey; /* Change text color to purple */
  transform: scale(1.1); /* Zooms in the text by 10% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow on hover */
  transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for both zoom, color, and shadow */
}

/* Zoom-out effect when mouse leaves the text */
.navbar .nav-link, .navbar .btn-outline-primary {
  transition: transform 0.3s ease; /* Smooth transition for zoom out */
}

/* Always visible purple outline around products */
.card {
  outline: 3px solid grey; /* Permanent purple outline */
  transition: box-shadow 0.3s ease; /* Smooth transition for the glow effect */
}

/* Glowing effect on hover (optional) */
.card:hover {
  box-shadow: 0 0 15px 5px rgba(128, 128, 128, 0.7); /* Purple edge glow */
}

#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Full viewport height */
    z-index: -1;  /* Ensure particles stay behind your content */
}