/* ۱. تعریف فونت‌ها از پوشه fonts */
@font-face {
    font-family: 'Lyon Arabic';
    src: url('fonts/[@phonoshop]Lyon Arabic Display Black.ttf') format('truetype');
    font-weight: 900;
}

@font-face {
    font-family: 'Lyon Arabic';
    src: url('fonts/[@phonoshop]Lyon Arabic Display Regular.ttf') format('truetype');
    font-weight: 400;
}

/* ۲. تنظیمات پایه صفحه */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #2d4538; /* رنگ سبز هماهنگ با تم این بخش */
}

.main-container {
    width: 1920px;
    height: 3500px;
    position: relative;
    margin: 0 auto;
    background-image: url('shared/background.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* ۳. استایل منوی متنی A1 تا A6 با افکت حرکتی */
.nav-link {
    position: absolute;
    color: black;
    text-decoration: none;
    font-family: 'Lyon Arabic', sans-serif;
    font-weight: 900;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 100;
}

.nav-link:hover {
    color: #444;
    transform: translateY(-5px) scale(1.1); /* موشن پریدن به بالا */
    text-shadow: 0px 5px 12px rgba(0,0,0,0.2);
}

.nav-link:active {
    transform: translateY(0) scale(0.95);
}

/* مختصات منو بر اساس درصد */
.a1 { left: 86.7%; top: 2.0%; width: 8.2%; height: 1.4%; }
.a2 { left: 76.3%; top: 2.0%; width: 6.3%; height: 1.4%; }
.a3 { left: 67.2%; top: 2.0%; width: 5.5%; height: 1.4%; }
.a4 { left: 56.7%; top: 2.1%; width: 6.1%; height: 1.4%; }
.a5 { left: 46.9%; top: 2.1%; width: 5.9%; height: 1.4%; }
.a6 { left: 34.8%; top: 2.0%; width: 8.1%; height: 1.4%; }

/* ۴. استایل دکمه‌های A7 و A8 با افکت فنری جذاب */
.btn-a7, .btn-a8 {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 50;
}

/* آیکون‌ها */
.btn-a7 { background-image: url('icons/a7.svg'); }
.btn-a8 { background-image: url('icons/a8.svg'); }

/* مختصات دقیق دکمه‌های صندلی و میز (A7) */
.p22 { left: 1346px; top: 666px;  width: 285px; height: 78px; }
.p23 { left: 509px;  top: 763px;  width: 285px; height: 78px; }
.p30 { left: 486px;  top: 1296px; width: 285px; height: 78px; }
.p24 { left: 1378px; top: 1407px; width: 285px; height: 78px; }
.p28 { left: 1539px; top: 1801px; width: 285px; height: 78px; }
.p25 { left: 795px;  top: 2051px; width: 285px; height: 78px; }
.p27 { left: 209px;  top: 1893px; width: 285px; height: 78px; }

/* مختصات دکمه مشاوره (A8) */
.btn-a8 { left: 244px; top: 3071px; width: 319px; height: 86px; }

/* ۵. افکت هاور دکمه‌های آیکون‌دار */
.btn-a7:hover, .btn-a8:hover {
    transform: scale(1.15); /* بزرگ شدن دکمه */
    filter: brightness(1.1) drop-shadow(0px 15px 25px rgba(0,0,0,0.4));
}

.btn-a7:active, .btn-a8:active {
    transform: scale(0.92); /* حس فشرده شدن */
}

/* ۶. تنظیم خودکار برای مانیتورهای مختلف */
@media screen and (max-width: 1920px) {
    body {
        transform: scale(calc(window.innerWidth / 1920));
        transform-origin: top center;
    }
}