body {
            font-family: 'Cairo', sans-serif;
            background: #262525;
            background: radial-gradient(circle, rgba(38, 37, 37, 1) 0%, rgba(6, 6, 6, 1) 82%);
            color: #fff;
            /* display: flex; */
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            margin: 0;
            /* padding: 20px; */
            box-sizing: border-box;
            overflow-x: hidden;
        }

        .container {
            width: 100%;
            max-width: 400px; /* Adjust based on typical mobile screen width */
            /* background-color: #000; */
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            padding-bottom: 20px;
            margin: auto;
        }

        /* Top and Bottom Decorative Borders */
        .border-top, .border-bottom {
            position: absolute;
            width: 100%;
            height: 50px; /* Adjust height as needed */
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 50"><defs><linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,223,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,200,0);stop-opacity:1" /></linearGradient></defs><path d="M0,50 Q175,0 350,50 L350,0 Q175,50 0,0 Z" fill="url(#goldGradient)"/></svg>'); /* Placeholder SVG, replace with actual image if available */
            opacity: 0.5; /* Adjust opacity for decorative effect */
        }

        .border-top {
            top: 0;
            transform: scaleY(-1);
        }

        .border-bottom {
            bottom: 0;
            transform: scaleY(1);
        }

        /* Header Section */
        .header {
            text-align: center;
            padding: 20px 0;
            position: relative;
            z-index: 1;
        }

        .header p {
            color: #ccc;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .header h1 {
            font-size: 28px;
            color: #FFD700; /* Gold color */
            margin: 0;
            position: relative;
            /* display: inline-block; */
        }

        .typewriter {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            animation: typing 1.5s steps(20, end);
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }



        .header .section-title {
            color: #FFD700;
            padding: 8px 20px;
            border-radius: 20px;
            margin-top: 20px;
            font-size: 16px;
            display: inline-block;
            border: 1px solid #FFD700;
        }

        /* Navigation Buttons */
        .navigation {
            display: flex;
            justify-content: flex-start;
            padding: 20px 10px;
            gap: 10px;
            flex-wrap: nowrap;
            overflow: overlay;
        }

        .nav-button {
            background-color: #22222200;
            color: #fff;
            padding: 8px 15px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 14px;
            border: 1px solid #555;
            transition: all 0.3s ease;
            border: 1px solid #FFD700;
        }

        .nav-button.active {
            background-color: #FFD700;
            color: #000;
            border-color: #FFD700;
        }

        /* Menu Table */
        .menu-table-container {
              border-radius: 10px;
              /* margin: 0 15px; */
              /* padding: 10px; */
              box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
              border: solid yellow;
        }

        .menu-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }

        .menu-table th,
        .menu-table td {
            padding: 6px 4px;
            border: 1px solid #444;
            color: #fff;
            border-left: solid yellow;
        }

        .menu-table th {
            /* background-color: #3a3a3a; */
            color: #FFD700;
            font-weight: bold;
        }

        .menu-table tr:nth-child(even) {
            /* background-color: #333; */
            border: solid yellow;
        }

        .menu-table tr:nth-child(odd) {
            /* background-color: #2a2a2a; */
            border: solid yellow;
        }

        .menu-table td:first-child {
            color: #FFD700; /* Highlight the item name */
            text-align: right;
            /* padding-right: 15px; */
        }

        .menu-table td:nth-child(2),
        .menu-table td:nth-child(3),
        .menu-table td:nth-child(4) {
            color: #fff;
        }