/* =========================================
         NAVBAR BASE
         ========================================= */
         .navbar {
         position: relative;
         z-index: 999;
         }
         /* =========================================
         NAVBAR LINKS
         ========================================= */
         .navbar-nav .nav-link {
         color: #111827;
         font-size: 15px;
         padding: 28px 10px;
         transition: .3s ease;
         position: relative;
         display: flex;
         align-items: center;
         gap: 6px;
         white-space: nowrap;
         }
         .navbar-nav .nav-link:hover {
         color: #3357bb;
         }
                  .navbar {
             position: sticky;
             top: 0;
             z-index: 9999;
             transition: all 0.3s ease;
             background: #fff;
         }
         
         .navbar.shrink {
             padding: 8px 0 !important;
             box-shadow: 0 10px 30px rgba(0,0,0,0.12);
         }
         /* =========================================
         MEGA MENU BASE
         ========================================= */
         .mega-menu {
         position: absolute;
         top: 100%;
         left: 0;
         background: #fff;
         border-radius: 24px;
         padding: 30px;
         border: 1px solid #eee;
         opacity: 0;
         visibility: hidden;
         transform: translateY(15px);
         transition: all .3s ease;
         z-index: 9999;
         box-shadow: 0 10px 40px rgba(0,0,0,.08);
         }
         /* SHOW MENU */
         .mega-hover:hover .mega-menu {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
         }
         /* =========================================
         MEGA MENU SIZES
         ========================================= */
         .mega-menu-xl {
         width: 1180px;
         left: 50%;
         transform: translateX(-50%) translateY(15px);
         }
         .mega-hover:hover .mega-menu-xl {
         transform: translateX(-50%) translateY(0);
         }
         .mega-menu-md {
         width: 650px;
         min-height: 320px;
         }
         .mega-menu-sm {
         width: 320px;
         right: 0;
         left: auto;
         }
         /* =========================================
         CATEGORY CARDS
         ========================================= */
         .mega-card {
         transition: .3s ease;
         }
         .mega-card img,
         .mega-thumb {
         width: 100%;
         height: 180px;
         object-fit: cover;
         transition: .35s ease;
         border-radius: 18px;
         }
         .mega-card:hover img {
         transform: scale(1.04);
         }
         /* =========================================
         TITLES
         ========================================= */
         .mega-title {
         font-size: 16px;
         font-weight: 700;
         margin-bottom: 14px;
         color: #111827;
         }
         /* =========================================
         LINKS
         ========================================= */
         .mega-card a,
         .simple-menu-box a {
         display: block;
         text-decoration: none;
         color: #4b5563;
         padding: 7px 0;
         font-size: 14px;
         transition: .25s ease;
         }
         .mega-card a:hover,
         .simple-menu-box a:hover {
         color: #3357bb;
         padding-left: 5px;
         }
         /* =========================================
         SIMPLE MENU BOX
         ========================================= */
         .simple-menu-box {
         background: #fafafa;
         border-radius: 18px;
         padding: 25px;
         height: 100%;
         }
         /* =========================================
         PROMO SECTION
         ========================================= */
         .promo-banner,
         .promo-banner-large {
         min-height: 450px;
         height: 100%;
         }
         .promo-banner img,
         .promo-banner-large img {
         object-fit: cover;
         }
         .promo-overlay {
         position: absolute;
         inset: 0;
         background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.15));
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         padding: 35px;
         color: #fff;
         }
         .promo-overlay h4,
         .promo-overlay h3 {
         font-size: 28px;
         font-weight: 700;
         margin-bottom: 12px;
         }
         .promo-overlay p {
         font-size: 14px;
         opacity: .92;
         margin-bottom: 20px;
         }
         /* =========================================
         ABOUT BOX
         ========================================= */
         .about-box {
         padding: 10px;
         }
         /* =========================================
         NAVBAR ACTIONS
         ========================================= */
         .navbar-actions {
         display: flex;
         align-items: center;
         gap: 20px;
         }
         /* =========================================
         SEARCH
         ========================================= */
         .search-form {
         width: 320px;
         }
         .search-wrapper {
         position: relative;
         }
         .search-input {
         width: 100%;
         height: 42px;
         font-size: 14px;
         padding-left: 42px;
         border-radius: 50px;
         border: 1px solid #ddd;
         box-shadow: none !important;
         transition: .25s ease;
         }
         .search-input:focus {
         border-color: #3357bb;
         }
         .search-icon {
         position: absolute;
         left: 15px;
         top: 50%;
         transform: translateY(-50%);
         color: #6b7280;
         font-size: 14px;
         }
         /* =========================================
         ICONS
         ========================================= */
         .navbar-actions .nav-link {
         padding: 0;
         }
         /* =========================================
         CART BADGE
         ========================================= */
         .cart-badge {
         position: absolute;
         top: -15px;
         right: -16px;
         width: 22px;
         height: 22px;
         border-radius: 50%;
         background: #dc3545;
         color: #fff;
         font-size: 11px;
         font-weight: 600;
         display: flex;
         align-items: center;
         justify-content: center;
         }
         /* =========================================
         BLUE GRADIENT MEGA MENU (FIXED)
         ========================================= */
         .mega-menu-md {
         background: linear-gradient(135deg, #3d6a88, #011333);
         color: #fff;
         box-shadow: 0 15px 50px rgba(0,0,0,0.25);
         }
         .mega-menu-md .simple-menu-box {
         background: rgba(255, 255, 255, 0.08);
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255, 255, 255, 0.15);
         }
         .mega-menu-md .mega-title {
         color: #fff;
         }
         .mega-menu-md a {
         color: rgba(255, 255, 255, 0.85);
         }
         .mega-menu-md a:hover {
         color: #fff;
         padding-left: 6px;
         }
         /* =========================================
         RESPONSIVE
         ========================================= */
         @media (max-width: 1200px) {
         .mega-menu-xl {
         width: 950px;
         }
         }
         @media (max-width: 991px) {
         .navbar-nav {
         flex-direction: column !important;
         align-items: flex-start !important;
         width: 100%;
         }
         .mega-menu,
         .mega-menu-xl,
         .mega-menu-md,
         .mega-menu-sm {
         position: relative;
         width: 100%;
         left: 0;
         right: 0;
         margin-top: 15px;
         transform: none !important;
         opacity: 1;
         visibility: visible;
         display: none;
         }
         .mega-hover:hover .mega-menu {
         display: block;
         }
         .search-input {
         width: 100%;
         }
         }
         @media (max-width: 768px) {
         .navbar-actions {
         flex-wrap: wrap;
         gap: 10px;
         width: 100%;
         }
         .search-form {
         width: 100%;
         }
         .mega-menu {
         padding: 20px;
         border-radius: 18px;
         }
         .promo-banner,
         .promo-banner-large {
         min-height: 300px;
         }
         .promo-overlay {
         padding: 20px;
         }
         .promo-overlay h4,
         .promo-overlay h3 {
         font-size: 22px;
         }
         }
         /* =========================================
         TOP BAR HOVER DROPDOWN
         ========================================= */
         .hover-dropdown {
         position: relative;
         display: inline-block;
         }
         .hover-menu {
         position: absolute;
         top: 100%;
         left: 0;
         min-width: 160px;
         background: #fff;
         padding: 8px;
         border-radius: 12px;
         opacity: 0;
         visibility: hidden;
         transform: translateY(10px);
         transition: all 0.2s ease;
         z-index: 9999;
         }
         .hover-dropdown:hover .hover-menu {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
         }
         .hover-menu .dropdown-item {
         display: block;
         padding: 8px 10px;
         font-size: 14px;
         color: #111827;
         text-decoration: none;
         border-radius: 8px;
         transition: 0.2s ease;
         }
         .hover-menu .dropdown-item:hover {
         background: #3c5586;
         color: #fff;
         padding-left: 14px;
         }
                  .hover-dropdown {
             position: relative;
             z-index: 99999;
         }
         
         .hover-menu {
             position: absolute;
             top: 100%;
             left: 0;
             min-width: 220px;
             background: #fff;
             opacity: 0;
             visibility: hidden;
             transform: translateY(10px);
             transition: all 0.2s ease;
             z-index: 100000;
         }
         
         .hover-dropdown:hover .hover-menu {
             opacity: 1;
             visibility: visible;
             transform: translateY(0);
         }
         
         .top-bar,
         .navbar,
         .container {
             overflow: visible !important;
         }