@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

			.hamburger-line {
				width: 20px;
				height: 2px;
				background-color: currentColor;
				transition: all 0.3s ease;
				transform-origin: center;
			}

			.hamburger-open .line1 {
				transform: translateY(7px) rotate(45deg);
			}

			.hamburger-open .line2 {
				opacity: 0;
			}

			.hamburger-open .line3 {
				transform: translateY(-7px) rotate(-45deg);
			}

			.card-hover {
				transition: all 0.3s ease;
			}

			.card-hover:hover {
				transform: translateY(-5px);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
			}

			.gradient-border {
				background: linear-gradient(145deg, #3b82f6, #8b5cf6);
				padding: 1px;
				border-radius: 0.75rem;
			}

			.gradient-content {
				background: #1f2937;
				border-radius: 0.75rem;
				height: 100%;
			}

			::-webkit-scrollbar {
				width: 6px;
			}

			::-webkit-scrollbar-track {
				background: #1f2937;
			}

			::-webkit-scrollbar-thumb {
				background: #3b82f6;
				border-radius: 3px;
			}

			::-webkit-scrollbar-thumb:hover {
				background: #2563eb;
			}

			.usage-item {
				transition: all 0.3s ease;
			}

			.usage-item:hover {
				background: rgba(59, 130, 246, 0.1);
			}

			.top-request-item {
				transition: all 0.5s ease;
			}

			.top-request-item:hover {
				background: rgba(59, 130, 246, 0.1);
			}

			.progress-bar {
				position: relative;
				overflow: hidden;
			}

			.progress-bar::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 30px;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
				animation: shimmer 2s infinite linear;
			}

			@keyframes shimmer {
				0% {
					transform: translateX(-100%);
				}

				100% {
					transform: translateX(400%);
				}
			}

			.slide-out {
				animation: slideOut 0.5s forwards;
			}

			@keyframes slideOut {
				to {
					opacity: 0;
					transform: translateX(100%);
				}
			}

			.slide-in {
				animation: slideIn 0.5s forwards;
			}

			@keyframes slideIn {
				from {
					opacity: 0;
					transform: translateX(-100%);
				}

				to {
					opacity: 1;
					transform: translateX(0);
				}
			}

			/* Mobile responsive styles */
			@media (max-width: 1023px) {
				.mobile-menu-button {
					display: block;
				}

				.sidebar-overlay {
					background-color: rgba(0, 0, 0, 0.5);
					opacity: 0;
					visibility: hidden;
					transition: all 0.3s ease;
				}

				.sidebar-overlay.active {
					opacity: 1;
					visibility: visible;
				}

				.sidebar-mobile {
					width: 85%;
					max-width: 320px;
				}

				#sidebarClose {
					display: block;
				}
			}

			@media (min-width: 1024px) {
				.mobile-menu-button {
					display: none;
				}

				#sidebarClose {
					display: none;
				}
			}

			::-webkit-scrollbar {
				width: 6px;
			}

			::-webkit-scrollbar-track {
				background: #1f2937;
			}

			::-webkit-scrollbar-thumb {
				background: #3b82f6;
				border-radius: 3px;
			}

			::-webkit-scrollbar-thumb:hover {
				background: #2563eb;
			}

			.container {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 16px;
			}

			.container .glass {
				position: relative;
				width: 180px;
				height: 200px;
				background: linear-gradient(#fff2, transparent);
				border: 1px solid rgba(255, 255, 255, 0.1);
				box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
				display: flex;
				justify-content: center;
				align-items: center;
				transition: 0.5s;
				border-radius: 10px;
				margin: 0 -45px;
				backdrop-filter: blur(10px);
				transform: rotate(calc(var(--r) * 1deg));
			}

			.container:hover .glass {
				transform: rotate(0deg);
				margin: 0 10px;
			}

			.container .glass::before {
				content: attr(data-text);
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 40px;
				background: rgba(255, 255, 255, 0.05);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
			}

			.container .glass svg {
				font-size: 2.5em;
				fill: #fff;
			}

			@media (max-width: 768px) {
				.container .glass {
					width: 160px;
					height: 180px;
				}
			}

			@media (max-width: 480px) {
				.container {
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 20px;
				}

				.container .glass {
					width: 140px;
					height: 160px;
					margin: 0;
				}

				.container .glass svg {
					font-size: 2em;
				}

				.container .glass::before {
					font-size: 12px;
				}
			}