.navbar-dark {
            background-color: #222222; /* Dark grey background */
        }

        .navbar-brand, .nav-link {
            color: #FFFFFF !important; /* White text */
        }

        .navbar-toggler {
            border-color: #FFFFFF;
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* White hamburger icon */
        }

        .offcanvas-dark {
            background-color: #222222; /* Dark grey offcanvas background */
            color: #FFFFFF; /* White text in offcanvas */
        }

        .offcanvas-title {
            color: #FFFFFF !important; /* White offcanvas title */
        }

        .btn-close-white {
            filter: invert(1) grayscale(100%) brightness(200%); /* White close button */
        }

        .nav-link.active {
            color: #00B248 !important; /* Vibrant green for active link */
        }

        .nav-link i {
            margin-right: 0.5rem;
            color: #FFFFFF; /* White icons */
        }

        .nav-link.active i {
            color: #00B248; /* Vibrant green for active icon */
        }

        .card-bg-dark {
            background-color: #222222 !important; /* Dark grey card background */
            border-color: #444444 !important; /* Slightly lighter dark grey for card border */
            color: #FFFFFF !important; /* White text in card */
        }

        .text-secondary {
            color: #cccccc !important; /* Lighter grey for secondary text */
        }

        .navbar-buttons {
            margin-left: auto; /* Push buttons to the right */
        }

        .navbar-buttons .btn {
            margin-left: 0.5rem; /* Space between the buttons */
        }

        .navbar-brand {
            margin-left: 0.5rem; /* Space between hamburger and logo */
        }