body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .hero {
            background: url('../img/33.jpg') center/cover no-repeat;
            height: 100vh;
            display: flex;
            align-items: center;
            color: white;
            text-shadow: 1px 1px 8px rgba(0,0,0,0.7);
        }
        .hero-overlay {
            background: rgba(0,0,0,0.5);
            width: 100%;
            padding: 80px 20px;
            text-align: center;
        }
        .art-card img {
            object-fit: cover;
            height: 250px;
        }
        footer {
            background: #111;
            color: #ddd;
            padding: 30px 0;
        }

        .card-hover {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
    }
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    }


/* Apply height 80vh for screens smaller than the large (lg) breakpoint (i.e., extra small, small, and medium screens) */
@media (max-width: 991.98px) { /* 991.98px is the max width for the 'md' breakpoint */
        .hero {
            height: 60vh;
        }
    }
    
/* simple dark background helper */
.bg_dark { background-color: #121212 !important; }
/* hoverable card */
/*.product-card { transition: transform .15s ease, box-shadow .15s ease; cursor: pointer; }*/
/*.product-card:hover { transform: translateY(-3px); box-shadow: 0 0.7rem 1.5rem rgba(0,0,0,.15); }*/

/* Move to main css file */

.card.hover-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.7rem 1.5rem rgba(0,0,0,0.25);
}

    /* Nav cart counter */
    #cart-count.badge { transform: translateY(-2px); }

/* Make sure the mini-cart is always above sticky bars */
/* Mini-cart container */
.mini-cart {
  min-width: 320px;
  max-width: 360px;
  max-height: 400px;        /* limit the height */
  overflow-y: auto;         /* scroll if too tall */
  z-index: 2000 !important; /* stay above sticky bars */
  scrollbar-width: thin;    /* Firefox scrollbar */
}

/* Scrollbar styling (WebKit browsers: Chrome, Edge, Safari) */
.mini-cart::-webkit-scrollbar {
  width: 6px;
}
.mini-cart::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}
.mini-cart::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Make sure Bootstrap dropdown menus appear above sticky elements */
.mini-cart.dropdown-menu {
  z-index: 5000 !important;
}

/* ✅ Ensure filter bar sits below navbar */
.shop-filters.sticky-top {
  top: 56px; /* default Bootstrap navbar height */
  z-index: 100;
}

/* Fade-in animation */
.fade-dropdown {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.show.fade-dropdown {
  opacity: 1;
  transform: translateY(0);
}

#search {
  border-radius: 5px !important;
  font-size: 0.9rem;
}
#sort {
  border-radius: 5px !important;
  font-size: 0.9rem;
}
.input-group-text {
  border-radius: 5px 0 0 5px !important;
}



















  .hero-support {
    position: relative;
    background-image: url('https://picsum.photos/id/63/5000/2813.webp'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 60vh;
    display: flex;
    align-items: center;
  }

  /* Soft overlay for readability */
  .hero-support::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
  }

  .hero-support .container {
    position: relative;
    z-index: 1;
  }
  
  .hero-support-b {
    position: relative;
    background-image: url('https://picsum.photos/id/769/5000/2813.webp'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 60vh;
    display: flex;
    align-items: center;
  }

  /* Soft overlay for readability */
  .hero-support-b::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
  }

  .hero-support-b .container {
    position: relative;
    z-index: 1;
  }  
  
  
  
  
    .hero-support-c {
    position: relative;
    background-image: url('https://picsum.photos/id/339/5000/2813.webp'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 60vh;
    display: flex;
    align-items: center;
  }

  /* Soft overlay for readability */
  .hero-support-c::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
  }

  .hero-support-c .container {
    position: relative;
    z-index: 1;
  }