/* فونت‌ها و رنگ‌های اصلی */
         
         @font-face {
            font-family: 'lalezar';
            src: url('../font/Lalezar-Regular.otf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'sans';
            src: url('../font/iraniansans.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'shabnam';
            src: url('../font/Shabnam.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: '1';
            src: url('../font/AFarzian2.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        html {
    scroll-behavior: smooth; /* اسکرول نرم رو فعال می‌کنه */
}
        body { 
            font-family: '1', sans-serif; 
            margin: 0; /* حذف مارجین پیش‌فرض */
            padding: 20px; 
            background-color:#f5d299; /* رنگ پس‌زمینه کمی روشن‌تر */
            /* background-image: url(./img/IMG_20260421_145122.jpg); */
            /* background-size: cover; */
            /* background-repeat: no-repeat; */
            /* background-position: center center; */
            /* background-attachment: fixed; */
            direction: rtl; /* راست به چپ */
            color: #1F1F1F;
        }
        h1 { 
            text-align: center; 
            color: #1F1F1F; /* رنگ کمی تیره‌تر */
            margin-bottom: 10px; /* فاصله بیشتر */
            font-size: 4.5em; /* فونت بزرگتر برای عنوان اصلی */
        }
        .logo h3{
            font-family: shabnam;
        }
        p{
            font-family: shabnam;
        }

        /* استایل کانتینر اصلی برای ایجاد فاصله از کناره‌ها */
        .container {
            max-width: 1200px; /* حداکثر عرض صفحه */
            margin: 0 auto; /* وسط‌چین کردن کانتینر */
            padding: 0 15px; /* کمی فاصله از کناره‌ها در موبایل */
        }

        /* استایل هر دسته بندی */
        .category { 
            text-align: center;
            margin-bottom: 50px; /* فاصله بیشتر بین دسته‌ها */
            padding: 25px; 
            border: 1px solid #3a2323; /* خط دور کمی تیره‌تر */
            border-radius: 10px; /* گوشه‌های گردتر */
            background-color: #3E2723; 
            box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* سایه قوی‌تر */
            scroll-margin-top: 70px;
        }
        .category h2 { 
            color: #ffffff; /* رنگ بنفش جذاب برای عنوان دسته */
            border-bottom: 3px solid #fff; /* خط زیر عنوان دسته */
            padding-bottom: 15px; 
            margin-bottom: 25px; 
            font-size: 2.8em;
            
        }

        /* استایل آیتم‌های منو - استفاده از Flexbox برای چیدمان */
        .menu-items-wrapper {
            display: grid; /* استفاده از Grid برای چیدمان آیتم‌ها */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* ستون‌های خودکار، حداقل 280 پیکسل */
            gap: 30px; /* فاصله بین آیتم‌ها */
        }
        .menu-item { 
            display: flex; 
            flex-direction: column; /* چیدمان عمودی برای موبایل */
            align-items: center; /* وسط‌چین کردن محتوا */
            text-align: center; /* وسط‌چین کردن متن */
            background-color: #8D6E63;
            border: 1px solid #f0f0f0;
            border-radius: 15px;
            padding: 15px;
            transition: transform 0.2s ease, box-shadow 0.2s ease; /* افکت نرم هنگام هاور */
        }
        .menu-item:hover {
            transform: translateY(-5px); /* کمی بالا رفتن آیتم */
            box-shadow: 0 6px 12px rgba(0,0,0,0.1); /* سایه بیشتر */
        }

        .item-image { 
            width: 100%; /* عرض کامل در حالت عمودی */
            max-width: 200px; /* حداکثر عرض عکس */
            height: 200px; /* ارتفاع ثابت */
            object-fit: cover; /* حفظ نسبت ابعاد و برش اضافه */
            border-radius: 5px; 
            margin-bottom: 15px; /* فاصله زیر عکس */
            border: 1px solid #eee; /* خط دور نازک */
        }

        .item-details { 
            width: 100%; /* عرض کامل برای جزئیات */
            height: 90%;
            display: flex;
            flex-direction: column;
            background-color:#C9A66B;
            border-radius: 10px;
            padding:10px;
        }
        .item-details h3 { 
            margin: 0 0 10px 0; 
            color: #000000ff; 
            font-size: 2.3em; /* فونت بزرگتر برای اسم غذا */
        }
        .item-description { 
            font-size: 0.95em; 
            color: #ff0000; 
            margin-bottom: 15px; 
            line-height: 1.6; /* فاصله بین خطوط توضیحات */
            flex-grow: 1; /* اجازه می‌دهد توضیحات فضا را پر کند */
        }
        .item-price { 
            font-weight: bold; 
            color: #1900ff; /* رنگ نارنجی تیره برای قیمت */
            font-size: 1.8em; 
            margin-top: auto; /* قیمت را به پایین‌ترین قسمت آیتم می‌برد */
        }

        /* پیام برای زمانی که دسته‌ای یا غذایی نیست */
        .no-items-message {
            text-align: center; 
            color: #888; 
            font-size: 1.2em;
            padding: 40px 0;
        }

        /* مدیای کوئری برای ریسپانسیو شدن */
        @media (min-width: 768px) {
            
            .category {
                padding: 30px 40px; /* فاصله بیشتر در صفحه‌های بزرگتر */
            }
            .menu-items-wrapper {
                grid-template-columns: repeat(2, 1fr); /* دو ستون در صفحه‌های متوسط */
                gap: 40px;
            }
            .menu-item {
                flex-direction: row; /* چیدمان افقی در صفحه‌های بزرگتر */
                text-align: right; /* متن‌ها به راست */
                align-items: flex-start; /* هم‌ترازی آیتم‌ها از بالا */
            }
            .item-image {
                margin-left: 20px; /* فاصله از سمت چپ عکس */
                margin-right: 0; /* حذف مارجین راست */
                margin-bottom: 0; /* حذف مارجین زیر عکس */
                width: 150px; /* کمی بزرگتر کردن عکس */
                height: 150px;
                border-radius: 20px;
            }
            .item-details {
                text-align: right; /* متن‌ها به راست */
            }
            
            
            .menu-items-wrapper{
                grid-template-columns: repeat(1, minmax(280px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .item-image {
                border-radius: 10px;
            }
           
            
            
            

        }

        
        @media (min-width: 1024px) {
            .menu-items-wrapper {
                grid-template-columns: repeat(3, 1fr); /* سه ستون در صفحه‌های بزرگتر */
            }
        }



        .logo{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
.logo img{
    width: 300px;
    border-radius: 20px;
}
.iframe{
     overflow: hidden;
    background-color: #333;
    color: #333;
    border: 2px solid rgb(0, 0, 0);
}

/* منو بالا */
.container {
    width: 100%;
    position: sticky;
    align-items: end;
    top: 0;
    z-index: 1000; /* یا هر عدد بزرگی که اطمینان حاصل کنی روی بقیه عناصر میاد */
  
    padding: 10px 20px; /* کمی فاصله از بالا و پایین */
 
    border-radius: 0 0 20px 20px;
     
}
.popmenu {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: nowrap; /* اگر می‌خوای همه در یک خط باشن */
    overflow-x: auto;  /* اگر تعداد زیاد بود اسکرول افقی میده */
    padding: 10px 0;
    
}

.headmenu {
    
    min-width: 200px;
    background: #8D6E63;
    padding: 10px 15px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
}

.headmenu h3 {
    color: #fff;
    font-size: 40px;
    text-align: center;
    margin: 0;
}
.popmenu {
    width: 100%;
    box-sizing: border-box;
}