/* style.css */
body {
	font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', serif;
}

/* Slider Styles */
.hero-slider-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 75%; /* Default mobile aspect ratio */
	overflow: hidden;
}

.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.hero-slide img {
	width: 100%;
	/* 	height: 80%;
    object-fit: cover;
 */
}

.active-slide {
	opacity: 1;
	transform: translateX(0);
}

.next-slide {
	opacity: 0;
	transform: translateX(100%);
}

.prev-slide {
	opacity: 0;
	transform: translateX(-100%);
}

/* Desktop Styles */
@media ( min-width : 768px) {
	.hero-slider-container {
		padding-bottom: 50%; /* Desktop aspect ratio */
		max-height: 90vh;
	}
}

.dish-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px
		rgba(0, 0, 0, 0.04);
}

.testimonial-card:hover {
	transform: scale(1.03);
}

.parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Mobile Responsive Styles */
@media ( max-width : 767px) {
	.text-4xl {
		font-size: 2rem !important;
	}
	.text-3xl {
		font-size: 1.75rem !important;
	}
	.text-2xl {
		font-size: 1.5rem !important;
	}
	.px-4 {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	.py-10 {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}
}

@media ( max-width : 640px) {
	.grid.md\:grid-cols-2.lg\:grid-cols-3 {
		grid-template-columns: 1fr !important;
	}
	.grid.md\:grid-cols-2 {
		grid-template-columns: 1fr !important;
	}
	.dish-card {
		margin-bottom: 1rem;
	}
	.animate-slide-up {
		margin-bottom: 2rem;
	}
	iframe {
		height: 300px !important;
	}
	.flex-col.space-y-4 {
		flex-direction: column !important;
	}
	.space-y-4>* {
		margin-bottom: 1rem !important;
	}
	.text-center.mb-16 {
		margin-bottom: 2rem !important;
	}
	.text-lg {
		font-size: 1rem !important;
	}
}
