/* Custom styles that complement Tailwind */
body {
	scroll-behavior: smooth;
	max-width: 100vw;
	overflow-x: hidden;
}
/* Full banner animation */
@keyframes bannerFadeIn {
	from { opacity: 0; transform: scale(1.1); }
	to { opacity: 1; transform: scale(1); }
}

.hero-banner img {
	animation: bannerFadeIn 1.5s ease-out forwards;
	max-width: 100%;
	height: auto;
}

/* Container max width */
.container {
	max-width: 100%;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 1280px) {
	.container {
		max-width: 1280px;
	}
}
/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #4f46e5;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #4338ca;
}

/* Animation classes */
.fade-in {
	animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Custom button hover effect */
.btn-hover-effect {
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.btn-hover-effect:after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: all 0.5s;
}

.btn-hover-effect:hover:after {
	left: 100%;
}