body {
       font-family: 'Segoe UI', sans-serif;
       background-color: #f0f2f5;
       color: #333;
   }

   /* Navbar */
   .navbar {
       backdrop-filter: blur(10px);
       background: rgba(0, 0, 0, 0.7);
   }

   .navbar-brand,
   .nav-link {
       color: #fff !important;
   }

   .nav-link:hover {
       color: #ffd700 !important;
   }

   /* Hero */
   .hero {
       height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       text-align: center;
       padding: 2rem;
   }

   .hero h1 {
       font-size: 3.5rem;
       font-weight: 700;
   }

   .hero p {
       font-size: 1.25rem;
       margin-bottom: 1.5rem;
   }

   .btn-gold {
       background-color: #ffd700;
       border: none;
       color: #000;
       font-weight: 600;
   }

   /* Products */
   .product-card {
       border: none;
       background: #fff;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
       justify-content: center;
       text-align: center;
   }

   .product-card:hover {
       transform: translateY(-5px);
   }

   .product-card img {
       height: 220px;
       object-fit: cover;
       max-width: 100%;
   }

   .product-card .card-body {
       text-align: center;
   }

   /* Footer */
   .footer {
       background-color: #111;
       color: #aaa;
       padding: 20px;
       text-align: center;
   }


   nav.main-nav {
       width: 100%;
       position: fixed;
       height: 50px;
       /* background-color: ; */

       -bs-navbar-padding-x: 0;
       --bs-navbar-padding-y: 0.5rem;
       --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
       --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
       --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
       --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
       --bs-navbar-brand-padding-y: 0.3125rem;
       --bs-navbar-brand-margin-end: 1rem;
       --bs-navbar-brand-font-size: 1.25rem;
       --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
       --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
       --bs-navbar-nav-link-padding-x: 0.5rem;
       --bs-navbar-toggler-padding-y: 0.25rem;
       --bs-navbar-toggler-padding-x: 0.75rem;
       --bs-navbar-toggler-font-size: 1.25rem;
       --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
       --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
       --bs-navbar-toggler-border-radius: var(--bs-border-radius);
       --bs-navbar-toggler-focus-width: 0.25rem;
       --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;

       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
       backdrop-filter: blur(10px);
       background: rgba(0, 0, 0, 0.7);
       position: fixed;
       top: 0;
       right: 0;
       left: 0;
       z-index: 1030;

   }

   .contentPage,
   .auth-card {
       min-height: 600px;

   }


   @media (min-width: 992px) {
       .nav.main-nav {
           flex-wrap: nowrap;
           justify-content: flex-start;
       }
   }

   div#productCarousel {
       height: 370px;
       width: 360px;
   }

   .card-img-top {
       width: 100%;
       height: 220px;
       object-fit: contain;
       background: #fff;
   }

   .badge-discount {
       position: absolute;
       top: 12px;
       left: 12px;
       background: #e53935;
       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;
   }

   li.nav-item.active, a.active {
       color: #ffd700 !important;
   }