:root {
            --brand: #b22222;
            --primary: #b22222;
            --bg: #ffffff;
            --text: #1a1a1a;
            --card: #f5f5f5;
        }

        body.dark {
            --bg: #121212;
            --text: #f5f5f5;
            --card: #1e1e1e;
        }

        body {
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
        }

        footer a>i,
        footer small {
            color: #000;
            line-height: 1.6;
        }

        .bg-brand {
            background: var(--brand);
        }

        .text-brand {
            color: var(--brand);
        }

        .hero {
            height: clamp(65vh, 75vh, 85vh);
            background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .65)),
                url('../images/bg.jpg') center/cover no-repeat;
        }

        .floating-btn {
            position: fixed;
            right: 1.25rem;
            bottom: 5rem;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            z-index: 999;
            animation: beat 1s infinite ease-in-out;
        }

        .hero h1 {
            font-size: clamp(2rem, 2.2rem, 3rem);
            animation: fadeUp .8s ease forwards;
        }

        .hero p {
            margin-top: .8rem;
            animation: fadeUp 1s ease forwards;
        }

        .card-body h5 {
            white-space: nowrap;
            /* 3. Hides content that exceeds the element's box */
            overflow: hidden;
            /* 4. Displays an ellipsis (...) at the end of the clipped text */
            text-overflow: ellipsis;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        @keyframes rise {
            from {
                opacity: 0;
                scale: .2;
                transform: translateY(100px);
            }

            to {
                opacity: 1;
                scale: 1;
                transform: translateY(0px);
            }
        }

        @keyframes beat {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.2);
                opacity: 0.7;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }



        .nav-actions {
            display: flex;
            align-items: center;
            color: #000;
            gap: .7rem;
        }

        .lang-switch {
            cursor: pointer;
            font-size: .85rem;
        }

        .lang-switch {
            margin-left: .7rem;
            cursor: pointer;
            font-size: .9rem;
        }

        /* 3D Carousel */
        .carousel-3d {
            perspective: 1400px;
        }

        .carousel-item {
            transition: transform 0.7s ease, opacity 0.7s ease;
        }

        .carousel-item-next,
        .carousel-item-prev,
        .carousel-item.active {
            display: flex;
            justify-content: center;
        }

        /* 3D positions */
        .carousel-item-next {
            transform: rotateY(-28deg) scale(0.85);
            opacity: 0.4;
        }

        .carousel-item-prev {
            transform: rotateY(28deg) scale(0.85);
            opacity: 0.4;
        }

        .carousel-item.active {
            transform: rotateY(0deg) scale(1.05);
            opacity: 1;
        }

        /* Dish card */
        .dish-card {
            color: #fff;
            
            border-radius: 18px;
            text-align: center;
            min-width: 26rem;
            position: relative;

        }

        .dish-img {
            width: 100%;
            border-radius: 14px;
            margin-bottom: 1rem;
            transition: transform 0.5s ease;
        }

        /* Zoom image on active */
        .carousel-item.active .dish-img {
            transform: scale(1);
        }

        /* Steam animation */
        .steam::before,
        .steam::after {
            content: "";
            position: absolute;
            top: -20px;
            left: 50%;
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent 40%);
            filter: blur(12px);
            animation: steam 4s infinite ease-in-out;
            opacity: 0.6;
        }

        .steam::after {
            animation-delay: 2s;
            left: 40%;
        }

        @keyframes steam {
            0% {
                transform: translate(-50%, 20px) scale(0.8);
                opacity: 0;
            }

            50% {
                opacity: 0.9;
            }

            100% {
                transform: translate(-50%, -60px) scale(1.2);
                opacity: 0;
            }
        }

        /* Mobile tweaks */
        @media (max-width: 576px) {
            .dish-card {
                min-width: 13vw;
            }

            .carousel-item-next,
            .carousel-item-prev {
                transform: scale(0.9);
                opacity: 0.2;
            }
        }