html, body {
  font-family: "Poppins", sans-serif;
}

  .brand{
  max-height: 40px !important;
}

.small-icon .mud-nav-link-icon {
  font-size: 1.2rem; /* Change this to your desired size */
}

/* HOVER EXPAND */
.expand-hover {
  transition: all .3s ease-in-out;
}
  .expand-hover:hover {
    transform: scale(1.05);
  }
/* ************ */


/* OBSERVE */
.observed-item {
  opacity: 0; /* Initially hidden */
  transform: translateY(20px); /* Start slightly below its final position */
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

  .observed-item.in-view {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to its original position */
  }

/* Define a base style for dimming */
.lowqty {
  position: relative;
  filter: brightness(0.6); /* Dim the image */
}

  .lowqty::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 223, 0, 0.2); /* Dim yellow overlay */
    z-index: 1;
    pointer-events: none; /* Allows clicks to pass through the overlay */
  }

/* Add hover effect */
.btn-hover:hover {
  background-color: var(--mud-palette-primary);
  color: white;
  border-color: var(--mud-palette-primary);
}

.blurred-background-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

  .blurred-background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    z-index: 1;
    background-image: inherit;
  }

  .blurred-background-image img {
    width: 50%;
    max-height: 200px;
    border-radius: 4px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 10; /* Above the blurred background */
  }