/*
 * Custom Styles
 *
 * TailwindCSS is loaded via CDN in index.html.
 * Use this file for any custom CSS that can't be achieved with Tailwind classes.
 *
 * Pro tip: You can configure Tailwind in the HTML by adding a <script> tag:
 * <script>
 *   tailwind.config = {
 *     theme: {
 *       extend: {
 *         colors: {
 *           brand: '#your-color'
 *         }
 *       }
 *     }
 *   }
 * </script>
 */

/* Custom CSS Variables for theming */
:root {
	--color-primary: #dc2626;
	--color-primary-hover: #b91c1c;
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Custom button styles (if needed beyond Tailwind) */
.btn-custom {
	transition: all 0.2s ease-in-out;
}

/* Marquee animation */
@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

.marquee {
	animation: marquee 30s linear infinite;
	display: flex;
	width: fit-content;
}

.marquee span {
	flex-shrink: 0;
}