body {
         background-color: #0A0A0A;
     }

     .title-font {
         font-family: 'Cinzel', serif;
     }

     .news-gradient {
         background: linear-gradient(to right, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.7));
     }

     .nav-clip {
         clip-path: polygon(0 0, 100% 0, 100% 85%, 97% 100%, 3% 100%, 0 85%);
     }

     .nav-item-clip {
         clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
     }

     .nav-item-active::before {
         content: "";
         position: absolute;
         bottom: -2px;
         left: 0;
         width: 100%;
         height: 2px;
         background: linear-gradient(90deg, transparent, #E6B91E, transparent);
     }

     .shimmer-effect {
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
         background-size: 200% 100%;
         animation: shimmer 2s linear infinite;
     }

     .diagonal-separator {
         position: relative;
     }

     .diagonal-separator::after {
         content: "";
         position: absolute;
         top: 50%;
         right: 0;
         height: 20px;
         width: 1px;
         background: linear-gradient(to bottom, transparent, #E6B91E, transparent);
         transform: translateY(-50%) rotate(15deg);
     }

     .menu-triangle::after {
         content: "";
         position: absolute;
         bottom: -8px;
         left: 50%;
         transform: translateX(-50%);
         width: 0;
         height: 0;
         border-left: 8px solid transparent;
         border-right: 8px solid transparent;
         border-top: 8px solid #E6B91E;
     }

     .dragon-glow {
         box-shadow: 0 0 20px rgba(230, 185, 30, 0.2);
     }


     /* Add mobile menu styling */
     .mobile-menu-overlay {
         height: 100vh;
         overflow-y: auto;
         backdrop-filter: blur(4px);
     }

     .mobile-menu-overlay.active {
         transform: translateX(0);
     }

     .mobile-nav-item {
         display: block;
         padding: 1rem 0;
         font-size: 1.25rem;
         font-weight: 600;
         color: white;
         border-bottom: 1px solid rgba(255,255,255,0.1);
         position: relative;
     }

     .mobile-nav-item.active {
         color: var(--carousel-primary);
     }

     .mobile-nav-item.active .nav-indicator {
         position: absolute;
         left: -1rem;
         top: 50%;
         transform: translateY(-50%);
         width: 0.5rem;
         height: 0.5rem;
         background-color: var(--carousel-primary);
         border-radius: 50%;
     }

     .mobile-nav-section {
         margin: 1rem 0;
         padding-left: 1rem;
     }

     .mobile-nav-header {
         font-weight: 600;
         color: #888;
         font-size: 0.875rem;
         letter-spacing: 0.05em;
         margin-bottom: 0.5rem;
     }

     .mobile-nav-subitem {
         display: block;
         padding: 0.5rem 0;
         color: #aaa;
     }

     /* Add this to your CSS */
     .nav-dropdown-wrapper {
       position: relative;
     }

     .nav-dropdown {
       position: absolute;
       top: 100%;
       left: 0;
       width: 200px;
       /* Add a small invisible gap-filler to prevent the hover state from disappearing */
       padding-top: 10px;
       margin-top: -10px;
       z-index: 10;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s, visibility 0.3s;
     }

     .nav-dropdown-wrapper:hover .nav-dropdown {
       opacity: 1;
       visibility: visible;
     }

     /* This handles the actual visible dropdown box */
     .nav-dropdown-content {
       background-color: rgba(20, 20, 20, 0.95);
       border: 1px solid #333;
       border-radius: 4px;
       overflow: hidden;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
       backdrop-filter: blur(10px);
     }

     /* Add this to your CSS */
     .nav-item-group {
       position: relative;
       /* Make sure this has enough z-index to appear above other elements */
       z-index: 50;
     }

     /* This fixes the gap issue */
     .nav-item-group::after {
       content: '';
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       height: 15px; /* This creates an invisible bridge to the dropdown */
       z-index: 49;
     }

     .nav-dropdown {
       position: absolute;
       top: calc(100% + 2px); /* Position just below the nav item */
       left: 50%;
       transform: translateX(-50%);
       min-width: 200px;
       z-index: 49; /* Lower than parent but higher than main content */
       opacity: 0;
       visibility: hidden;
       transition: all 0.2s ease-out;
       pointer-events: none; /* Important! */
     }

     .nav-item-group:hover .nav-dropdown {
       opacity: 1;
       visibility: visible;
       pointer-events: auto; /* Re-enable pointer events */
     }


     /* Add this to your CSS */
     .nav-item-group {
       position: relative;
       /* Make sure this has enough z-index to appear above other elements */
       z-index: 50;
     }

     /* This fixes the gap issue */
     .nav-item-group::after {
       content: '';
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       height: 15px; /* This creates an invisible bridge to the dropdown */
       z-index: 49;
     }

     .nav-dropdown {
       position: absolute;
       top: calc(100% + 2px); /* Position just below the nav item */
       left: 50%;
       transform: translateX(-50%);
       min-width: 200px;
       z-index: 49; /* Lower than parent but higher than main content */
       opacity: 0;
       visibility: hidden;
       transition: all 0.2s ease-out;
       pointer-events: none; /* Important! */
     }

     .nav-item-group:hover .nav-dropdown {
       opacity: 1;
       visibility: visible;
       pointer-events: auto; /* Re-enable pointer events */
     }


     .nav-with-fade-border {
       position: relative;
       border-bottom: none !important; /* Remove the standard border-bottom */
     }

     /* The fading border effect at the bottom */
     .nav-with-fade-border::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 2px; /* Slightly thicker than a standard border for better glow effect */
       background: linear-gradient(to right,
         transparent 0%,
         rgba(230, 185, 30, 0.1) 15%,
         rgba(230, 185, 30, 0.3) 50%,
         rgba(230, 185, 30, 0.1) 85%,
         transparent 100%
       );
       box-shadow:
         0 0 8px rgba(230, 185, 30, 0.3),
         0 0 4px rgba(230, 185, 30, 0.2);
       opacity: 0.8;
       z-index: 1;
       animation: border-fade 4s infinite alternate ease-in-out;
     }

     /* Enhance with an animated lower glow */
     .nav-with-fade-border::before {
       content: '';
       position: absolute;
       bottom: -3px;
       left: 0;
       width: 100%;
       height: 4px;
       background: linear-gradient(to right,
         transparent 0%,
         rgba(230, 185, 30, 0.05) 20%,
         rgba(230, 185, 30, 0.1) 50%,
         rgba(230, 185, 30, 0.05) 80%,
         transparent 100%
       );
       filter: blur(2px);
       opacity: 0.6;
       z-index: 0;
       animation: border-glow 4s infinite alternate-reverse ease-in-out 1s;
     }

     /* Animations for the border fade effects */
     @keyframes border-fade {
       0% {
         opacity: 0.7;
         background-position: 0% 50%;
       }
       50% {
         opacity: 1;
       }
       100% {
         opacity: 0.7;
         background-position: 100% 50%;
       }
     }

     @keyframes border-glow {
       0% {
         opacity: 0.4;
         filter: blur(2px);
         height: 4px;
       }
       50% {
         opacity: 0.7;
         filter: blur(3px);
         height: 5px;
       }
       100% {
         opacity: 0.4;
         filter: blur(2px);
         height: 4px;
       }
     }

     /* Add a subtle interactive effect when hovering over the nav */
     .nav-with-fade-border:hover::after {
       background: linear-gradient(to right,
         transparent 0%,
         rgba(230, 185, 30, 0.15) 15%,
         rgba(230, 185, 30, 0.4) 50%,
         rgba(230, 185, 30, 0.15) 85%,
         transparent 100%
       );
       box-shadow:
         0 0 10px rgba(230, 185, 30, 0.4),
         0 0 6px rgba(230, 185, 30, 0.3);
       animation-duration: 3s;
     }

     .nav-with-fade-border:hover::before {
       opacity: 0.8;
       height: 6px;
       filter: blur(3px);
       animation-duration: 3s;
     }

     .nav-with-fade-border::after {
       /* Keep existing styles and add: */
       background: linear-gradient(to right,
         transparent 0%,
         rgba(230, 185, 30, 0.1) 15%,
         rgba(230, 185, 30, 0.3) 50%,
         rgba(230, 185, 30, 0.1) 85%,
         transparent 100%
       ), linear-gradient(90deg,
         transparent,
         rgba(230, 185, 30, 0.4),
         transparent
       );
       background-size: 100% 100%, 200% 100%;
       animation:
         border-fade 4s infinite alternate ease-in-out,
         border-flow 8s infinite linear;
     }

     @keyframes border-flow {
       0% {
         background-position: 0% 0%, -200% 0%;
       }
       100% {
         background-position: 0% 0%, 200% 0%;
       }
     }


     /* 3D Text Effect */
     .nav-text-3d {
       position: relative;
       display: inline-block;
       text-shadow: 0 1px 1px rgba(0,0,0,0.6);
       transform: translateZ(0);
     }

     /* 3D Button Effect */
     .nav-3d-button {
       position: relative;
       transform: translateZ(0);
       box-shadow: 0 1px 1px rgba(0,0,0,0.3);
     }

     .nav-3d-button:hover {
       box-shadow: 0 2px 3px rgba(0,0,0,0.4);
     }

     /* 3D Separator */
     .separator-3d {
       position: relative;
       background: linear-gradient(to bottom, transparent, rgba(230,185,30,0.3), transparent);
       box-shadow:
         0 0 4px rgba(230,185,30,0.3),
         1px 0 1px rgba(0,0,0,0.5);
       transform: translateZ(0);
     }

     .separator-3d::before {
       content: "";
       position: absolute;
       left: -1px;
       top: 0;
       height: 100%;
       width: 1px;
       background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.05), transparent);
     }