@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	/* Responsive Base Styles */
	html {
		overflow-x: hidden;
		max-width: 100vw;
	}

	body {
		overflow-x: hidden;
		max-width: 100vw;
	}

	* {
		max-width: 100%;
	}

	/* Prevent horizontal scrolling on mobile */
	@media (max-width: 768px) {
		body, html {
			overflow-x: hidden !important;
		}

		/* Ensure all containers respect viewport width */
		.container, main, section, div {
			max-width: 100vw;
		}
	}
}

@layer utilities {
	/* Custom Scrollbar */
	.custom-scrollbar::-webkit-scrollbar {
		width: 6px;
	}
	.custom-scrollbar::-webkit-scrollbar-track {
		background: transparent;
	}
	.custom-scrollbar::-webkit-scrollbar-thumb {
		background: rgb(203 213 225);
		border-radius: 3px;
	}
	.custom-scrollbar::-webkit-scrollbar-thumb:hover {
		background: rgb(148 163 184);
	}
}