body {
       font-family: 'Playfair Display', serif;
       background-color: #f8f8f8;
   }

   .navbar {
       background: black;
   }

   .navbar-dark .navbar-brand {
       font-weight: 700;
       font-size: 1.8rem;
       color: gold !important;
   }

   .hero {
       background: url('/storage/app/images/bg.jpg') no-repeat center/cover;
       height: 90vh;
       color: white;
       position: relative;
   }

   .hero-overlay {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.5);
   }

   .hero-content {
       position: relative;
       z-index: 2;
       top: 20%;
       transform: translateY(-50%);
       text-align: center;
   }

   .hero h1 {
       font-size: 3.5rem;
       font-weight: bold;
       color: gold;
   }

   .category-card,
   .product-card {
       transition: all .3s ease;
   }

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

   .product-card:hover {
       transform: scale(1.05);
   }

   .footer {
       background: black;
       color: white;
       padding: 2rem 0;
   }

   .footer a {
       color: gold;
       text-decoration: none;
   }

   .btn-gold {
       background: gold;
       color: black;
       border-radius: 50px;
       padding: 10px 30px;
       font-weight: bold;
   }

   .btn-gold:hover {
       background: #d4af37;
       color: white;
   }



   .card-img-top {
       height: 260px;
       object-fit: contain;
       transition: transform .3s;
   }


   /* Rectangular design Adjustments */

   /* Common Style */
   .category-box {
       position: relative;
       overflow: hidden;
       cursor: pointer;
       width: 100%;
       aspect-ratio: 1/1;
       /* keeps square for diamond & ellipse */
   }

   .category-box img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }

   .category-box:hover img {
       transform: scale(1.2);
   }

   /* Overlay */
   .category-box .overlay {
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.65);
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: opacity 0.4s ease, transform 0.4s ease;
       transform: translateY(20px);
   }

   .category-box:hover .overlay {
       opacity: 1;
       transform: translateY(0);
   }

   .category-box .overlay h4 {
       font-size: 1.2rem;
       font-weight: bold;
       margin: 0;
   }

   /* Shapes */
   .category-box.diamond {
       clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
   }

   .category-box.ellipse {
       clip-path: ellipse(50% 40% at 50% 50%);
   }

   .category-box.rectangle {
       border-radius: 20px;
       aspect-ratio: 16/9;
   }

   .carousel {

       top: -1px;
   }

                          .card-img-top {
                              width: 100%;
                              height: 220px;
                              object-fit: contain;
                              background: #fff;
                          }
            
                          .badge-discount {
                              position: absolute;
                              top: 12px;
                              left: 12px;
                              background: #1b1717;
                              color: #fff;
                              font-weight: bold;
                              font-size: 1rem;
                              padding: 6px 14px;
                              border-radius: 8px;
                              z-index: 10;
                              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                              pointer-events: none;
                          }
/* Attractive multi-column dropdown for header menu */
.custom-dropdown-menu {
    min-width: 340px;
    padding: 12px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.12);
    gap: 8px 0;
    /* Hide by default, Bootstrap toggles .show */
}

/* When open, use flex for multi-column layout */
.custom-dropdown-menu.show {
    display: flex !important;
    flex-wrap: wrap;
}

.custom-dropdown-menu li {
    width: 33.3333%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-dropdown-menu .dropdown-item {
    display: block;
    padding: 10px 12px;
    margin: 2px 6px;
    border-radius: 6px;
    background: #f8f9fa;
    color: #222;
    font-weight: 500;
    text-align: center;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    box-shadow: 0 1px 4px rgba(44,62,80,0.04);
}

.custom-dropdown-menu .dropdown-item:hover,
.custom-dropdown-menu .dropdown-item:focus {
    background: #ffe082;
    color: #b8860b;
    box-shadow: 0 2px 8px rgba(44,62,80,0.12);
    text-decoration: none;
}

.navbar .dropdown-menu.custom-dropdown-menu {
    border: none;
    margin-top: 0.5rem;
}