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

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

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

.main-container {
    width: 1920px;
    height: 3850px; /* ارتفاع برای جا شدن دکمه آخر */
    position: relative;
    margin: 0 auto;
    background-image: url('catalog-assets/shared/background.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* ۳. استایل منوی بالا با افکت حرکتی */
.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;
    z-index: 100;
}

.nav-link:hover {
    color: #444;
    transform: translateY(-6px) scale(1.1);
    text-shadow: 0px 5px 15px rgba(0,0,0,0.2);
}

/* مختصات منو بر اساس درصد شما */
.a69 { left: 86.7%; top: 2.0%; width: 8.2%; height: 1.4%; }
.a70 { left: 76.3%; top: 2.0%; width: 6.3%; height: 1.4%; }
.a71 { left: 67.2%; top: 2.0%; width: 5.5%; height: 1.4%; }
.a72 { left: 56.7%; top: 2.1%; width: 6.1%; height: 1.4%; }
.a73 { left: 46.9%; top: 2.1%; width: 5.9%; height: 1.4%; }
.a74 { left: 34.8%; top: 2.0%; width: 8.1%; height: 1.4%; }

/* ۴. استایل دکمه‌های آیکون‌دار A1 و A2 */
.btn-category, .btn-consultation {
    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: 90;
}

.btn-category { 
    background-image: url('catalog-assets/icons/1.svg'); 
    width: 146px; 
    height: 40px; 
}

.btn-consultation { 
    background-image: url('catalog-assets/icons/a2.svg'); 
    left: 230px; 
    top: 3392px; 
    width: 319px; 
    height: 86px; 
}

/* مختصات دقیق دکمه‌های A1 */
.cat-drinking { left: 1183px; top: 806px; }
.cat-planters { left: 676px;  top: 780px; }
.cat-tables   { left: 434px;  top: 1130px; }
.cat-benches  { left: 1673px; top: 1261px; }
.cat-urban    { left: 932px;  top: 1453px; }
.cat-trash    { left: 1498px; top: 1702px; }
.cat-fire     { left: 927px;  top: 1959px; }
.cat-bollards { left: 1620px; top: 2139px; }
.cat-gaming   { left: 402px;  top: 2427px; }
.cat-barbecues { left: 1118px; top: 2500px; }

/* افکت هاور دکمه‌ها */
.btn-category:hover, .btn-consultation:hover {
    transform: scale(1.25);
    filter: brightness(1.1) drop-shadow(0px 10px 20px rgba(0,0,0,0.3));
}

.btn-category:active, .btn-consultation:active {
    transform: scale(0.9);
}

/* نمایشگرهای کوچک */
@media screen and (max-width: 1920px) {
    body {
        transform: scale(calc(window.innerWidth / 1920));
        transform-origin: top center;
    }
}