@media only screen and (max-width: 600px) {
		/* 1. Ensure Hamburger stays ON TOP of the blue bar and the sidebar */
		.hamburger-menu {
			display: block;
			position: fixed;
			left: 15px;
			top: 15px;
			z-index: 4000; /* Higher than everything else */
			color: white !important;
		}

		/* The background bar for the icon */
		body::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 60px;
			background-color: #007bff;
			z-index: 3000; /* Under the hamburger icon */
			box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		}

		/* 2. Sidebar Transformation */
		#mobileMenuWrapper .menu-container {
			display: none; 
			position: fixed;
			top: 0;
			left: 0;
			width: 280px; /* Slightly narrower for better UX */
			height: 100vh; /* Fill screen height */
			background-color: rgba(21, 88, 199, 0.98); /* Less transparent for readability */
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			z-index: 3500; /* Between the blue bar and the icon */
			padding-top: 70px; /* Space so menu items don't hide under the blue bar */
			overflow-y: auto; /* ALLOW SCROLLING */
			box-shadow: 5px 0 15px rgba(0,0,0,0.3);
		}

		/* Show the sidebar when active */
		#mobileMenuWrapper .menu-container.active {
			display: block !important;
		}

		/* 3. Make Menu Stack Vertically */
		#mobileMenuWrapper .menu {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 0;
		}

		/* Dropdown Items in Sidebar */
		#mobileMenuWrapper .dropdown {
			width: 100%;
			display: block;
			margin: 0;
			border-bottom: 1px solid rgba(255,255,255,0.1);
		}

		#mobileMenuWrapper .dropdown-content {
			position: static;
			display: none; /* CHANGED: Starts hidden */
			background: rgba(255, 255, 255, 0.05) !important;
			box-shadow: none;
		}

		/* NEW: This class will be added by JavaScript when you click */
		#mobileMenuWrapper .dropdown.open .dropdown-content {
			display: block !important;
		}

		/* Force mobile link colors */
		#mobileMenuWrapper .dropdown-text a, 
		#mobileMenuWrapper .dropdown-content a {
			color: #ffffff !important;
			padding: 15px 25px;
		}

		/* Fix login/profile buttons for mobile */
		.login-button, .profile-button {
			position: fixed !important;
			top: 12px;
			right: 15px;
			z-index: 3001; /* Next to hamburger */
			padding: 8px 15px;
			font-size: 14px;
		}
					
			/* 4. Fix the Footer stacking */
			.footer-sections {
				flex-direction: column !important;
				width: 100%;
				gap: 0;
			}

			.footer-section {
				border-bottom: 1px solid rgba(255,255,255,0.1);
				padding: 20px 0;
				text-align: center;
			}

			.footer-section ul li {
				margin-bottom: 15px; /* Better for touch/mobile taps */
			}

			.footer-bottom {
				background-color: #000333;
				padding: 20px 0;
				margin-top: 0;
			}
			
			.rectangle {
				background-color: white;
				padding: 20px;
				text-align: center;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			}
		}