:root {
			--neon: #b600ff;
		}

		html {
			scroll-behavior: smooth;
		}

		.neon-text {
			color: var(--neon);
			text-shadow: 0 0 1px var(--neon), 0 0 10px var(--neon), 0 0 20px var(--neon);
		}

		.neon-box {
			border: 1px solid var(--neon);
			box-shadow: 0 0 10px var(--neon), 0 0 20px var(--neon);
		}

		.neon-button {
			background: transparent;
			border: 2px solid var(--neon);
			color: var(--neon);
			padding: 0.5rem 1.5rem;
			text-shadow: 0 0 5px var(--neon);
			box-shadow: 0 0 10px var(--neon);
			transition: all 0.3s ease;
		}

		.neon-button:hover {
			background: var(--neon);
			color: black;
			box-shadow: 0 0 20px var(--neon), 0 0 30px var(--neon);
		}

		.glass-card-1 {
			background: rgba(255, 255, 255, 0.05);
			/* transparent glassy white */
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			/* for Safari */
			box-shadow: 0 4px 30px rgba(182, 0, 255, 0.3);
			border-radius: 1rem;
		}

		.glass-card-2 {
			background: rgba(255, 255, 255, 0.05);
			/* transparent glassy white */
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			/* for Safari */
			box-shadow: 0 4px 30px rgba(183, 0, 255, 0.47);
			border-radius: 3rem;
		}

		#backToTop {
			text-shadow: 0 0 5px #b600ff, 0 0 15px #b600ff;
			box-shadow: 0 0 10px #b600ff;
		}

		#backToTop:hover {
			box-shadow: 0 0 15px #b600ff, 0 0 30px #b600ff;
		}

				/* Button alignment fixes */
		.neon-button {
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(182, 0, 255, 0.15);
			border: 1px solid #b600ff;
			color: #e5b8ff;
			border-radius: 6px;
			transition: all 0.3s ease;
			padding: 10px 15px;
			text-decoration: none;
			font-weight: 500;
			height: auto;
			min-height: 44px;
		}
		
		.neon-button:hover {
			background: rgba(182, 0, 255, 0.3);
			box-shadow: 0 0 10px #b600ff;
			color: white;
		}
		
		/* Ensure all cards have consistent button placement */
		.glass-card-1 {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
		
		.glass-card-1 > :last-child {
			margin-top: auto;
		}
		
		/* Grid button alignment */
		.grid.grid-cols-1.sm\\:grid-cols-2 .neon-button {
			height: 100%;
			min-height: 44px;
		}

		.about {
			background-color: rgb(13, 2, 19);
		}

		.portfolio {
			background-color: rgb(13, 2, 19);	
		}

		.contact {
			background-color: rgb(13, 2, 19);	
		}

		.glow-card {
  			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}

		.glow-card:hover {
		transform: scale(1.04);
		box-shadow:
			0 0 4px #b600ff,
			0 0 8px #b600ff,
			0 0 12px #b600ff;
		}

		/* Hide scrollbar (optional) */
		#cardTrack::-webkit-scrollbar {
			display: none;
		}

		#cardTrack {
			scrollbar-width: none;
		}

		.marquee {
		animation: scroll-x 20s linear infinite;
		}

		.marquee:hover {
		animation-play-state: paused;
		}

		@keyframes scroll-x {
		0% {
			transform: translateX(0%);
		}
		100% {
			transform: translateX(-50%);
		}
		}
		@keyframes zoom-in {
			from {
				opacity: 0;
				transform: scale(0.9);
			}

			to {
				opacity: 1;
				transform: scale(1);
			}
		}

		.zoom-trigger {
			opacity: 0;
			transform: scale(0.8);
		}
		.animate-zoom-in {
			opacity: 0;
			transform: scale(0.8);
			animation: zoom-in 0.6s ease-out forwards;
		}

		@keyframes zoom-in {
		to {
			opacity: 1;
			transform: scale(1);
		}
		}

		@keyframes float-fast {

			0%,
			100% {
				transform: translateY(0px);
			}

			50% {
				transform: translateY(-15px);
			}
		}

		.animate-float-slow {
			animation: float-slow 4s ease-in-out infinite;
		}

		.animate-float-fast {
			animation: float-fast 2.5s ease-in-out infinite;
		}

		@keyframes swipe-down {
			0% {
				opacity: 0;
				transform: translateY(-50px);
			}

			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.animate-swipe-down {
			animation: swipe-down 0.8s ease-out both;
		}

		@keyframes swipe-up {
			0% {
				opacity: 0;
				transform: translateY(50px);
			}

			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.animate-swipe-up {
			animation: swipe-up 0.8s ease-out both;
		}
		
		.skill-segment {
			height: 12px;
			flex: 1;
			border-radius: 4px;
			background: #222;
			border: 1px solid #333;
		}

			.skill-segment.active {
			background-color: #b600ff;
			box-shadow: 0 0 5px #b600ff, 0 0 15px #b600ff;
			animation: glowIn 0.5s ease forwards;
		}

			@keyframes glowIn {
			0% {
				opacity: 0;
				transform: scaleX(0.5);
			}
			100% {
				opacity: 1;
				transform: scaleX(1);
			}
		}
		.glow-bar {
			box-shadow: 0 0 6px #b600ff, 0 0 12px #b600ff;
			transition: width 1s ease-in-out;
		}
		.glass-card-3 {
			background: rgba(20, 20, 20, 0.5);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			box-shadow: 0 0 20px #b600ff30;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}

		@keyframes swipe-up {
		0% {
			transform: translateY(50px);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
		}
		.animate-swipe-up {
		animation: swipe-up 0.8s ease-out both;
		}
		  .popup-hover {
			@apply absolute bottom-10 left-1/2 -translate-x-1/2 bg-black bg-opacity-90 border border-[#b600ff] p-2 rounded-xl z-10 w-44 text-center text-xs text-white;
			animation: fadeScale 0.3s ease-in-out forwards;
		}

		@keyframes fadeScale {
			0% {
			opacity: 0;
			transform: translateY(10px) scale(0.9);
			}
			100% {
			opacity: 1;
			transform: translateY(0) scale(1);
			}
		}
		.toast {
			position: fixed;
			top: 20px;
			right: 20px;
			min-width: 250px;
			padding: 15px 20px;
			border-radius: 8px;
			background: #14141a;
			color: #fff;
			font-size: 14px;
			border: 1px solid rgba(182,0,255,0.3);
			box-shadow: 0 4px 12px rgba(0,0,0,0.4);
			z-index: 9999;
			opacity: 0;
			transform: translateY(-20px);
			transition: all 0.4s ease;
				}
			.toast.show {
			opacity: 1;
			transform: translateY(0);
				}
			.toast.success { border-left: 5px solid #01ae06; }
			.toast.error { border-left: 5px solid #ff0000; }