/* Base Styles */
                            .bottom-nav {
                                position: relative;
                                background-color: var(--color-muted);
                                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                            }

                            .navbar {
                                max-width: 1680px;
                                margin: 0 auto;
                                display: flex;
                                align-items: center;
                                padding: 0 16px;
                                position: relative;
                            }

                            /* Dropdown Styles */
                            .dropdown {
                                position: relative;
                                z-index: 10;
                            }

                            .dropdown-toggle {
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                padding: 8px 16px;
                                background: none;
                                border: none;
                                cursor: pointer;
                                font-size: 16px;
                                color: inherit;
                            }

                            .icon {
                                width: 20px;
                                height: 20px;
                                fill: currentColor;
                            }

                            .dots {
                                color: #34d399;
                            }

                            .dropdown-menu {
                                position: absolute;
                                right: 0;
                                top: 100%;
                                width: 220px;
                                background-color: var(--color-muted);
                                border-radius: 0 0 8px 8px;
                                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                                opacity: 0;
                                visibility: hidden;
                                transition: all 0.3s ease;
                            }

                            .dropdown:hover .dropdown-menu {
                                opacity: 1;
                                visibility: visible;
                            }

                            .dropdown-menu ul {
                                padding: 8px;
                                list-style: none;
                            }

                            /* Nested Dropdown Styles */
                            .nested-dropdown {
                                position: relative;
                            }

                            .nested-dropdown>a {
                                display: flex;
                                padding: 12px 16px;
                                border-radius: 8px;
                                color: inherit;
                                text-decoration: none;
                                transition: color 0.2s;
                            }

                            .nested-dropdown>a:hover {
                                color: #34d399;
                            }

                            .nested-menu {
                                position: absolute;
                                right: 100%;
                                top: 0;
                                width: 200px;
                                background-color: var(--color-muted);
                                border-radius: 8px;
                                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                                opacity: 0;
                                visibility: hidden;
                                transition: all 0.3s ease;
                                padding: 8px;
                                display: flex;
                                flex-direction: column;
                                gap: 4px;
                            }

                            .nested-dropdown:hover .nested-menu {
                                opacity: 1;
                                visibility: visible;
                            }

                            .nested-menu a {
                                padding: 8px 12px;
                                border-radius: 6px;
                                color: inherit;
                                text-decoration: none;
                                transition: all 0.2s;
                            }

                            .nested-menu a:hover {
                                background-color: var(--color-muted);
                                color: #34d399;
                            }

                            .title-h1 {
                                text-align: center;
                                font-size: 30px;
                                margin-bottom: 30px;

                            }




                            .gardone .ui-wheel-of-fortune {
                                all: unset;
                                aspect-ratio: 1 / 1;
                                container-type: inline-size;
                                direction: ltr;
                                display: grid;
                                position: absolute;
                                /* تغییر به absolute */
                                top: 50%;
                                /* وسط صفحه عمودی */
                                left: 50%;
                                /* وسط صفحه افقی */
                                transform: translate(-50%, -50%);
                                /* جابجایی برای دقیقاً وسط قرار گرفتن */
                                width: 20%;
                                border: 10px solid red;
                                /* نوار قرمز دور گردونه */
                                border-radius: 50%;
                                /* گرد کردن گوشه‌ها */
                            }

                            @media only screen and (max-width: 600px) {
                                .gardone .ui-wheel-of-fortune {
                                    width: 60%;
                                }
                            }

                            .gardone .ui-wheel-of-fortune::after {
                                aspect-ratio: 1/cos(30deg);
                                content: "";
                                height: 10cqi;
                                position: absolute;
                                place-self: center start;
                                scale: 1.4;
                                rotate: -90deg;
                                background-image: url('../images/spins.png');
                                /* جایگزینی تصویر */
                                background-size: cover;
                                /* برای پوشاندن کامل مثلث */
                                width: 10cqi;
                                /* تنظیم اندازه تصویر */
                                margin-left: -35px;
                            }


                            .gardone .ui-wheel-of-fortune>* {
                                position: absolute;
                            }

                            .gardone .ui-wheel-of-fortune button {
                                aspect-ratio: 1 / 1;
                                background: #570000;
                                border: 0;
                                border-radius: 50%;
                                cursor: pointer;
                                font-size: 5cqi;
                                place-self: center;
                                width: 20cqi;
                            }

                            .gardone .ui-wheel-of-fortune ul {
                                all: unset;
                                clip-path: inset(0 0 0 0 round 50%);
                                display: grid;
                                inset: 0;
                                place-content: center start;
                            }

                            .gardone .ui-wheel-of-fortune li {
                                align-content: center;
                                aspect-ratio: 1 / calc(2 * tan(180deg / var(--_items, 12)));
                                clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
                                display: grid;
                                font-size: 5cqi;
                                grid-area: 1 / -1;
                                padding-left: 1ch;
                                rotate: calc(360deg / var(--_items, 12) * (var(--_idx) - 1));
                                transform-origin: center right;
                                user-select: none;
                                width: 50cqi;
                            }

                            /* رنگ قرمز برای خونه‌های فرد */
                            .gardone .ui-wheel-of-fortune li:nth-child(odd) {
                                background: #cd0f00;
                            }

                            /* رنگ زرد برای خونه‌های زوج */
                            .gardone .ui-wheel-of-fortune li:nth-child(even) {
                                background: #ffee9a;
                                color: black;
                            }


                            .gardone .ui-wheel-of-fortune * {
                                box-sizing: border-box;
                            }

                            .gardone {
                                margin-top: 180px;
                                margin-bottom: 180px;
                            }