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

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

/* ۲. تنظیمات پایه صفحه */
* {
    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(-4px) scale(1.08); /* پریدن به سمت بالا و بزرگ شدن */
    text-shadow: 0px 5px 10px rgba(0,0,0,0.15); /* سایه زیر متن */
}

.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) */
.p34 { left: 1248px; top: 607px;  width: 261px; height: 71px; }
.p38 { left: 1508px; top: 805px;  width: 261px; height: 71px; }
.p14 { left: 547px;  top: 796px;  width: 260px; height: 71px; }
.p37 { left: 610px;  top: 1320px; width: 261px; height: 71px; }
.p2  { left: 981px;  top: 1452px; width: 261px; height: 71px; }
.p3  { left: 311px;  top: 1692px; width: 261px; height: 71px; }
.p1  { left: 1486px; top: 1743px; width: 261px; height: 71px; }
.p36 { left: 705px;  top: 1973px; width: 261px; height: 70px; }
.p49 { left: 1357px; top: 2297px; width: 260px; height: 71px; }

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

/* ۵. افکت‌های هاور برای دکمه‌های آیکون دار */
.btn-a7:hover, .btn-a8:hover {
    transform: scale(1.12); /* بزرگ شدن آیکون */
    filter: brightness(1.15) 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;
    }
}