/* Additional custom styles */
            .hamburger {
                display: inline-block;
                cursor: pointer;
            }
            .hamburger span {
                display: block;
                width: 25px;
                height: 3px;
                margin: 5px;
                background: white;
            }
            .menu {
                display: none;
                flex-direction: column;
                background-color: #333;
                padding: 1em;
                position: absolute;
                top: 50px;
                right: 0;
                width: 200px;
                z-index: 1000;
            }
            .menu a,
            .menu button {
                display: block;
                width: 100%;
                color: white;
                padding: 10px;
                text-align: left;
                text-decoration: none;
            }
            .menu a:hover,
            .menu button:hover {
                background-color: #575757;
            }

            /* Dark mode toggle switch styles */
            .theme-switch {
                position: relative;
                display: inline-block;
                width: 50px;
                height: 24px;
                margin-right: 10px;
            }

            .theme-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

            .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                transition: 0.4s;
                border-radius: 24px;
            }

            .slider:before {
                position: absolute;
                content: "";
                height: 18px;
                width: 18px;
                left: 3px;
                bottom: 3px;
                background-color: white;
                transition: 0.4s;
                border-radius: 50%;
            }

            input:checked + .slider {
                background-color: #2196f3;
            }

            input:checked + .slider:before {
                transform: translateX(26px);
            }

            /* Comprehensive dark mode styles */
            .dark .bg-gray-100 {
                background-color: #1f2937 !important;
            }
            .dark .bg-white {
                background-color: #374151 !important;
            }
            .dark .bg-gray-800 {
                background-color: #111827 !important;
            }
            .dark .text-gray-700 {
                color: #d1d5db !important;
            }
            .dark .text-gray-600 {
                color: #9ca3af !important;
            }
            .dark .text-black {
                color: #f9fafb !important;
            }
            .dark .border-gray-300 {
                border-color: #4b5563 !important;
            }
            .dark .border-gray-200 {
                border-color: #374151 !important;
            }
            .dark .bg-blue-100 {
                background-color: #1e3a8a !important;
            }
            .dark .text-blue-700 {
                color: #93c5fd !important;
            }
            .dark .border-blue-400 {
                border-color: #3b82f6 !important;
            }
            .dark input[type="text"],
            .dark input[type="email"],
            .dark input[type="password"],
            .dark input[type="number"] {
                background-color: #374151 !important;
                color: #f9fafb !important;
                border-color: #4b5563 !important;
            }
            .dark input[type="text"]:focus,
            .dark input[type="email"]:focus,
            .dark input[type="password"]:focus,
            .dark input[type="number"]:focus {
                border-color: #60a5fa !important;
                box-shadow: 0 0 0 1px #60a5fa !important;
            }
            .dark .shadow-lg {
                box-shadow:
                    0 10px 15px -3px rgba(0, 0, 0, 0.3),
                    0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
            }
            .dark .bg-red-500 {
                background-color: #dc2626 !important;
            }
            .dark .bg-green-500 {
                background-color: #16a34a !important;
            }
            .dark .bg-blue-500 {
                background-color: #2563eb !important;
            }
            .dark .hover\:bg-blue-700:hover {
                background-color: #1d4ed8 !important;
            }
            .dark .hover\:bg-gray-900:hover {
                background-color: #030712 !important;
            }
            .dark .text-gray-800 {
                color: #f9fafb !important;
            }
            .dark .hover\:text-gray-800:hover {
                color: #f9fafb !important;
            }
            .disable-theme-anim .slider,
            .disable-theme-anim .slider:before {
                transition: none !important;
            }
            .hide-theme-toggle .theme-switch {
                visibility: hidden;
            }
        

            body {
                --background-color: #f4f4f4;
                --text-color: #333333;
            }

            .dark-mode {
                --background-color: #333333;
                --text-color: #f4f4f4;
            }

            body {
                background-color: var(--background-color);
                color: var(--text-color);
            }