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: cover;
       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;
   }