/* Base styles for the desired look */
        body {
            background-color: #FFF8F2; /* Soft Cream */
            color: #333333; /* Dark Charcoal */
            font-family: 'Inter', sans-serif;
            transition: background-color 0.3s ease;
        }

        /* Utility classes for smooth transitions and hover effects */
        .transition-default {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Custom scroll animations */
        .scroll-animate {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .scroll-animate.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* For the recipe card flip */
        .recipe-card-container {
            perspective: 1000px;
        }
        .recipe-card {
            transform-style: preserve-3d;
            transition: transform 0.6s;
            position: relative;
        }
        .recipe-card.flipped {
            transform: rotateY(180deg);
        }
        .recipe-card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }
        .recipe-card-back {
            transform: rotateY(180deg);
        }

        /* Custom scrollbar for aesthetic feel */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: #FFF8F2;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #FFA451;
            border-radius: 10px;
        }
                /* Shared link styles for cleaner look */
        .nav-link {
            @apply text-charcoal font-lato hover:text-primary-orange transition-default font-medium;
        }
        .mobile-nav-link {
            @apply text-charcoal font-poppins font-semibold hover:text-primary-orange transition-default block;
        }
        @keyframes marquee {
                0%   { transform: translateX(100%); }
                100% { transform: translateX(-100%); }
            }


            #marquee-text {
                animation: marquee 18s linear infinite;
            }
            #typewriter-text::after {
                content: "|";
                margin-left: 6px;
                animation: blink 1s infinite;
            }

            @keyframes blink {
                0%, 50%, 100% { opacity: 1; }
                25%, 75% { opacity: 0; }
            }