.navbar-custom {
      background-color: #2C3E50;
    }
    .navbar-custom .nav-link,
    .navbar-custom .navbar-brand,
    .navbar-custom .form-control {
      color: #ECF0F1;
    }
    .navbar-custom .nav-link:hover {
      color: #2ECC71;
    }
    .search-bar {
      width: 400px;
    }
    @media (max-width: 768px) {
      .search-bar {
        width: 100%;
        margin-top: 10px;
      }
    }
    .badge-cart {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 0.7rem;
      background-color: #2ECC71;
      color: white;
    }
    
    #hero-text{
        color: 	#050505;
    }

        .wishlist-card:hover {
      transform: scale(1.02);
      transition: 0.3s ease;
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }

        .order-card {
      transition: 0.3s;
    }
    .order-card:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    }
    .order-status {
      text-transform: uppercase;
      font-size: 0.85rem;
    }

        .product-card:hover { transform: translateY(-5px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: 0.3s ease; }
    .premium-badge, .discount-badge {
      position: absolute; top: 8px; padding: 3px 8px; font-size: 0.7rem; border-radius: 4px;
    }
    .premium-badge { left:8px; background: gold; color:black; font-weight:bold; }
    .discount-badge { right:8px; background:crimson; color:white; }

    #typing-active {
  color: #212529; /* Darker text (Bootstrap dark gray) */
  transition: color 0.2s ease;
}



.category-card {
  transition: all 0.3s ease-in-out;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 24px;
}

.hero-section { height: 60vh; min-height: 350px; }
.hero-bg { filter: blur(6px) brightness(0.6); height:100%; object-fit:cover; }
.carousel-caption { bottom: 30%; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.7); }
.carousel-caption h1 { font-size: 2.5rem; font-weight: bold; }

.cat-card { transition: transform 0.3s, box-shadow 0.3s; }
.cat-card:hover { transform: translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.1);}
.icon { width: 60px; height:60px; margin:auto;border-radius:50%;display:flex;align-items:center;justify-content:center;}


.hero-section {
  width: 100%;
  height: 100%;
  max-height: 900px; /* Optional: adjust for your layout */
  overflow: hidden;
}

.carousel-item {
  height: 100%;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 768px) {
  .hero-section {
    max-height: 250px;
  }
}