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 {
    padding: 12px 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.12);
    width: auto;
    min-width: 480px;
    max-width: calc(100vw - 20px);
    max-height: 70vh;
    overflow-y: auto;
    display: none !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1000 !important;
    /* Hidden by default */
}

/* Prevent overflow on right side - adjust left position if needed */
.navbar-nav .dropdown .custom-dropdown-menu {
    transform: translateX(0);
}

/* When dropdown is near right edge, align to right */
.dropdown:last-child .custom-dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

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

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

.custom-dropdown-menu .dropdown-item {
    display: block;
    padding: 10px 8px;
    border-radius: 6px;
    background: #f8f9fa;
    color: #222;
    font-weight: 500;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    box-shadow: 0 1px 4px rgba(44,62,80,0.04);
    line-height: 1.3;
    font-size: 0.95rem;
}

.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;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 992px) {
    .custom-dropdown-menu {
        grid-template-columns: repeat(3, 1fr);
        min-width: 420px;
        max-width: calc(100vw - 30px);
    }
    
    .custom-dropdown-menu .dropdown-item {
        padding: 10px 6px;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .custom-dropdown-menu {
        grid-template-columns: repeat(2, 1fr);
        min-width: 280px;
        max-width: calc(100vw - 30px);
        padding: 10px 6px;
    }
    
    .custom-dropdown-menu .dropdown-item {
        padding: 8px 5px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .custom-dropdown-menu {
        grid-template-columns: 1fr;
        min-width: auto;
        width: calc(100vw - 30px);
        max-width: calc(100vw - 30px);
        padding: 8px 4px;
    }
    
    .custom-dropdown-menu .dropdown-item {
        padding: 10px 6px;
        font-size: 0.85rem;
    }
}