:root {
             --primary: #007bff;
             --white: #fff;
             --black: #000;
         }
         
         body {
             margin: 0;
             font-family: 'Segoe UI', sans-serif;
         }
         
         nav.navbar {
             background: var(--white);
             border-bottom: 1px solid #ddd;
         }
         /* Mobile Top Row */
         
         .nav-mobile {
             display: none;
             padding: 10px 15px;
             align-items: center;
             justify-content: space-between;
         }
         
         .nav-mobile .logo {
             font-size: 24px;
             font-weight: bold;
             text-align: center;
             color: var(--primary);
             flex-grow: 1;
         }
         
         .nav-mobile .hamburger {
             font-size: 22px;
             background: none;
             border: none;
             cursor: pointer;
             color: var(--black);
         }
         
         .mobile-right {
             display: flex;
             gap: 10px;
         }
         /* Desktop Nav */
         
         .nav-desktop {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 12px 20px;
         }
         
         .nav-desktop .logo {
             font-size: 26px;
             font-weight: bold;
             color: var(--primary);
             text-decoration: none;
         }
         
         .nav-links {
             display: flex;
             gap: 30px;
             align-items: center;
         }
         
         .nav-links a {
             color: var(--black);
             text-decoration: none;
             font-weight: 500;
         }
         
         .auth-links {
             display: flex;
             align-items: center;
             gap: 15px;
         }
         /* Login Button Dropdown */
         
         .login-btn {
             background: linear-gradient(135deg, #007bff, #0056b3);
             color: rgb(255, 255, 255);
             padding: 6px 12px;
             border: 2px solid var(--primary);
             border-radius: 4px;
             cursor: pointer;
             font-weight: 600;
             box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
         }
         
         .login-btn:hover {
             background: linear-gradient(135deg, #0056b3, #004080);
             /* darker blue on hover */
             transform: scale(1.05);
             /* slight zoom */
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
             /* subtle shadow */
         }
         
         .dropdown {
             position: relative;
         }
         
         .dropdown-content {
             display: none;
             position: absolute;
             top: 100%;
             background: white;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             min-width: 150px;
             z-index: 100;
         }
         /* Dropdown content box */
         
         .dropdown-content {
             display: none;
             position: absolute;
             right: 0;
             background-color: #fff;
             min-width: 180px;
             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
             z-index: 10;
             border-radius: 8px;
             overflow: hidden;
             animation: fadeIn 0.4s ease-in-out;
         }
         /* Show dropdown on hover */
         
         .dropdown:hover .dropdown-content {
             display: block;
         }
         /* Dropdown links */
         
         .dropdown-content a {
             color: #333;
             padding: 12px 16px;
             text-decoration: none;
             display: flex;
             align-items: center;
             transition: all 0.3s ease;
             font-weight: 500;
         }
         /* Icons inside links */
         
         .dropdown-content a i {
             margin-right: 8px;
             color: #007bff;
         }
         
         .logo img {
             height: 40px;
             /* Adjust height as needed */
             width: auto;
             /* Maintains aspect ratio */
             display: block;
             /* Removes inline spacing */
             object-fit: contain;
             /* Ensures full image is visible */
             transition: transform 0.3s ease;
         }
         /* Hover effect on each link */
         
         .dropdown-content a:hover {
             background: linear-gradient(to right, #007bff, #00c6ff);
             color: #fff;
             transform: translateX(5px);
             box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.2);
         }
         
         @keyframes fadeIn {
             from {
                 opacity: 0;
                 transform: translateY(-10px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
         
         .dropdown-content a {
             padding: 10px;
             display: block;
             color: var(--black);
             text-decoration: none;
             font-size: 14px;
             border-bottom: 1px solid #eee;
         }
         
         .dropdown:hover .dropdown-content {
             display: block;
         }
         
         .dropdown-content.right {
             right: 0;
         }
         /* Sidebar */
         
         .sidebar {
             display: none;
             position: fixed;
             background: white;
             top: 0;
             left: 0;
             width: 250px;
             height: 100%;
             padding: 20px;
             z-index: 999;
             box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
         }
         
         .sidebar a {
             display: block;
             padding: 10px 0;
             color: black;
             text-decoration: none;
         }
         /* Media Query */
         
         @media (max-width: 768px) {
             .nav-desktop {
                 display: none;
             }
             .nav-mobile {
                 display: flex;
             }
             .nav-mobile .logo {
                 display: flex;
                 justify-content: center;
             }
             .logo img {
                 height: 30px;
             }
             .mobile-dropdown-content {
                 display: none;
                 padding-left: 15px;
                 margin-top: 5px;
             }
             .mobile-dropdown-content a {
                 display: block;
                 padding: 5px 0;
                 color: black;
                 text-decoration: none;
             }
             .mobile-dropdown-content a:hover {
                 color: #007bff;
             }
             .dropdown {
                 position: relative;
                 display: inline-block;
             }
             .dropdown-content {
                 position: absolute;
                 background-color: #fff;
                 color: black;
                 min-width: 160px;
                 display: none;
                 z-index: 999;
                 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             }
             .dropdown-content a {
                 display: block;
                 padding: 10px 15px;
                 text-decoration: none;
                 color: black;
             }
             .dropdown-content a:hover {
                 background-color: #f1f1f1;
             }
             .login-btn {
                 padding: 2px 9px;
             }
         }
         
         .fa-chalkboard-teacher:before,
         .fa-chalkboard-user:before {
             font-size: 1.3rem;
             content: "\f51c";
         }
         /* Dropdown styling */