.header {
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        backdrop-filter: blur(5px); /* Optional: Adds a glass effect */
        z-index: 1000; /* Ensures navbar stays above other content */
      }

      .navbar-nav .nav-link {
        color: #333; /* Dark text for better contrast */
        font-weight: 500; /* Slightly bolder font */
        transition: color 0.3s ease; /* Smooth hover effect */
      }

      .navbar-nav .nav-link:hover {
        color: #007bff; /* Change color on hover */
      }

      .navbar-toggler {
        border: none; /* Removes default button border */
      }

      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(51,51,51,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        /* Custom dark icon for the toggler */
      }

      @media (max-width: 991.98px) { /* Bootstrap lg breakpoint */
        .navbar-nav {
          background-color: rgba(255, 255, 255, 0.95); /* Solid background for mobile dropdown */
          border-radius: 0.5rem; /* Rounded corners */
          padding: 1rem; /* Adds space inside the dropdown */
        }
      }