:root {
            --sage-green: #9BBF81;
            --warm-beige: #F5EBDC;
            --terracotta: #C76D43;
            --charcoal: #2F2F2F;
            --off-white: #FAFAFA;
        }
        
        /* Typography */
        body {
            font-family: 'Inter', sans-serif;
            color: var(--charcoal);
            background-color: var(--off-white);
        }
        
        h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
        }

        /* Custom Button Style */
        .btn {
            @apply uppercase tracking-widest font-bold px-8 py-3 rounded-full transition-all duration-300 ease-in-out;
        }
        .btn-primary {
            @apply bg-terracotta text-off-white hover:bg-opacity-90 hover:shadow-lg hover:shadow-terracotta/30 transform hover:-translate-y-0.5;
        }
        .btn-secondary {
            @apply bg-transparent border-2 border-sage-green text-sage-green hover:bg-sage-green hover:text-off-white hover:shadow-lg hover:shadow-sage-green/30 transform hover:-translate-y-0.5;
        }

       /* --- HERO BASE --- */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  animation: fadeKenburns 32s infinite ease-in-out;
  z-index: 1;
}

/* Multiple Background Images */
.hero-bg.bg1 { background-image: url('image/img1'); animation-delay: 0s; }
.hero-bg.bg2 { background-image: url('image/8Qce_Zso.jpg'); animation-delay: 8s; }
.hero-bg.bg3 { background-image: url('image/Aesthetics\ of\ food\,\ romantic\ dinner.jpg'); animation-delay: 16s; }
.hero-bg.bg4 { background-image: url('image/jpg\(1\)'); animation-delay: 24s; }

/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
  z-index: 5;
}

/* Floating Elements */
.floating-leaf {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 9s infinite ease-in-out;
}
@keyframes float {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-25px); opacity: 1; }
}

/* Ken Burns Effect */
@keyframes fadeKenburns {
  0% { opacity: 0; transform: scale(1.1); }
  10% { opacity: 1; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.05); }
  40% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* Text Reveal Animation */
.text-reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: textFadeIn 1.2s forwards ease-out;
}
@keyframes textFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Buttons */
.btn {
  padding: 0.8rem 1.6rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-primary {
  background-color: #4ade80;
  color: #1f2937;
}
.btn-primary:hover {
  background-color: #22c55e;
}
.btn-secondary {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.btn-secondary:hover {
  background-color: #fff;
  color: #111;
}
        .hero-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(245, 235, 220, 0.5); /* warm-beige with opacity */
            z-index: 2;
        }
        @keyframes kenburns {
            0%, 100% { transform: scale(1) translate(0, 0); }
            50% { transform: scale(1.1) translate(-5px, 5px); }
        }

        /* Floating Leaves Animation */
        .floating-leaf {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: var(--sage-green);
            opacity: 0.15;
            border-radius: 10% 50%;
            animation: float 20s infinite ease-in-out;
            z-index: 3;
        }
        .floating-leaf:nth-child(2) { animation-duration: 25s; left: 20%; animation-delay: 2s; }
        .floating-leaf:nth-child(3) { animation-duration: 15s; left: 70%; animation-delay: 5s; }
        .floating-leaf:nth-child(4) { animation-duration: 30s; left: 90%; animation-delay: 8s; }
        .floating-leaf:nth-child(5) { animation-duration: 18s; left: 40%; animation-delay: 1s; }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-80vh) rotate(180deg); }
            100% { transform: translateY(0) rotate(360deg); }
        }

        /* Text Reveal Animation */
        .text-reveal span {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px);
            animation: reveal 0.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* Scroll-triggered Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Navbar underline effect */
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 50%;
            background-color: var(--terracotta);
            transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
            left: 0;
        }

        /* Page transitions */
        .page {
            display: none;
            animation: fadeInPage 0.7s ease-in-out;
        }
        .page.active {
            display: block;
        }
        @keyframes fadeInPage {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Custom form input focus */
        .form-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(155, 191, 129, 0.4);
            border-color: var(--sage-green);
        }

        /* Cart Sidebar */
        #cart-sidebar {
            transition: transform 0.3s ease-in-out;
            transform: translateX(100%);
        }
        #cart-sidebar.open {
            transform: translateX(0);
        }
        .cart-item-quantity input {
            width: 50px;
            text-align: center;
        }

        /* Make hero title bigger */
h1.text-reveal {
  font-size: clamp(4rem, 10vw, 9rem); /* scales responsively */
  line-height: 1.1;
}

/* Make rotating text bigger */
.typewriter {
  font-size: clamp(1.8rem, 4vw, 3.5rem); /* scales with screen */
  font-weight: 1000;
}
    /* Make all product cards same height */
.product-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    padding: 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    height: 100%; /* stretch to fill grid row */
}

/* Card hover effect */
.product-item:hover {
    transform: translateY(-5px);
}

/* Make images uniform */
.product-item img {
    width: 100%;
    height: 200px; /* fixed height for all images */
    object-fit: cover; /* scales image without stretching */
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

/* Make title and price spacing consistent */
.product-item h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.product-item p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* Ensure Add to Cart button sticks to bottom if needed */
.product-item .add-to-cart-btn {
    margin-top: auto;
}