/*
    Nanopsco — لایهٔ پل قالب.

    این فایل دیگر «شیت قالب» نیست. ظاهر مرجع عیناً از `css/nanops/style.css` می‌آید — همان شیت
    خودِ سایت مبدأ که با `eng/import-nanops-reference-css.ps1` وارد شده. کار این فایل فقط سه چیز
    است و بس:

    ۱) تعریف توکن‌هایی که شیت واردشده با `var(--nps-*, <مقدار اصلی>)` می‌خواند، تا انتخاب رنگ و
       فونت مدیر در «تنظیمات سایت» واقعاً اثر کند و پیش‌فرض دقیقاً همان پیکسل مرجع بماند.
    ۲) پل‌زدن مارک‌آپ ویجت‌های هسته (`poshesh-*`) به همان قاعده‌های مرجع. مارک‌آپ هسته fork
       نمی‌شود؛ این فایل با یک درجه specificity بیشتر رویش می‌نشیند، نه با ترتیب بارگذاری و نه
       با `!important`.
    ۳) اسلایدر بالای صفحه، که تنها بخشی است که از شیت مرجع درنمی‌آید: اسلایدر مبدأ لایه‌ها را با
       استایل inline از سمت جاوااسکریپت جا می‌گذارد، پس `revolution/settings.css` به‌تنهایی هیچ
       چیدمانی نمی‌سازد. این بخش بومی نوشته شده و عددهایش روی خود مرجع اندازه‌گیری شده است.
*/

/* -------------------------------------------------------------------- توکن ---- */
/*
    هر توکن دو لایه دارد: انتخاب مدیر (`--pbx-*` از تنظیمات سایت)، و اگر نبود، مقدار اصلی مرجع.
*/
:root {
    --nps-primary: var(--pbx-primary, #5192e1);
    --nps-secondary: var(--pbx-secondary, #24cdd5);
    --nps-dark: var(--pbx-dark, #26313c);
    --nps-heading: var(--pbx-heading, #384141);
    --nps-heading-muted: #696969;
    --nps-text: var(--pbx-text, #565656);
    --nps-muted: #a5a5a5;
    --nps-surface: var(--pbx-surface, #f6f7f8);
    --nps-shadow: #d1d1d1;
    --nps-on-dark: var(--pbx-on-dark, #ffffff);
    --nps-font: var(--pbx-font, "Open Sans", sans-serif);
    --nps-font-heading: var(--pbx-font-heading, "Montserrat", sans-serif);

    /*
        عرض کانتینر مرجع. بوت‌استرپ هسته روی نمایشگر پهن ۱۳۲۰ می‌دهد، مرجع ۱۱۴۰ — و همین عدد
        لنگرِ افقی هر چیزی روی صفحه است، از لبهٔ متن اسلاید تا نوار سفید هدر.
    */
    --nps-container: 1140px;
    /* رنگ تأکید متنی مرجع (ابتدای خط‌های مأموریت/چشم‌انداز)؛ پلتفرم توکنی برایش ندارد. */
    --nps-emphasis: #ff0066;
}

/* The source scales rem units at these exact widths. Site token CSS is loaded
   later, so scope the root rule to this theme to retain that responsive scale. */
html:has(> .nps-body) { font-size: 16px; }
@media (max-width: 1400px) { html:has(> .nps-body) { font-size: 15px; } }
@media (max-width: 1266px) { html:has(> .nps-body) { font-size: 14px; } }
@media (max-width: 576px) { html:has(> .nps-body) { font-size: 13px; } }

/*
    عرض کانتینر با یک درجه specificity بیشتر از `.container` بوت‌استرپ نوشته شده تا برد از
    ترتیب بارگذاری نیاید — و چون media query ندارد، همهٔ پله‌های بوت‌استرپ را می‌پوشاند.
*/
.nps-body .container,
.nps-body .poshesh-builder-page .container {
    max-width: var(--nps-container);
}

/* Keep the source Bootstrap container steps, including the tablet header. */
@media (max-width: 1199.98px) {
    .nps-body { --nps-container: 960px; }
}
@media (max-width: 991.98px) {
    .nps-body { --nps-container: 720px; }
}
@media (max-width: 767.98px) {
    .nps-body { --nps-container: 540px; }
}
@media (max-width: 575.98px) {
    .nps-body { --nps-container: 100%; }
}

.nps-body {
    font-size: var(--pbx-font-size, 15px);
    line-height: var(--pbx-line-height, 1.5);
}

/*
    مرجع `a{color:inherit}` سراسری دارد. شیت توکن هسته بعد از شیت واردشده لود می‌شود و لینک‌ها
    را آبی می‌کند؛ این قاعده همان قرارداد مرجع را با یک درجه specificity بیشتر برمی‌گرداند.
    لینک داخل محتوای غنی پایین‌تر جداگانه رنگ می‌گیرد.
*/
.nps-body a,
.nps-body a:hover,
.nps-body a:focus {
    color: inherit;
    text-decoration: none;
}

/* تأکید متنی مرجع: `<font color="#ff0066">` — در ویرایشگر هسته به <mark> ذخیره شده است. */
.nps-body .poshesh-widget-text mark {
    padding: 0;
    background: transparent;
    color: var(--nps-emphasis);
}

/* دکمه‌های مرجع کنار هم می‌نشینند (`<a class="button">` inline)؛ ویجت دکمهٔ هسته هرکدام را بلاک می‌کند. */
.nps-body .poshesh-btn-wrap {
    display: inline-block;
    margin-inline-end: .25rem;
    margin-block-end: .5rem;
}

/* --------------------------------------------------------------- Preloader ---- */
/*
    پردهٔ سفید مرجع. خطر واقعی‌اش این است که اگر جاوااسکریپت اجرا نشود، صفحه برای همیشه پشت آن
    بماند — پس پنهان‌شدن پیش‌فرض است و theme.js فقط «نمایش تا لحظهٔ load» را مدیریت می‌کند.
*/
.loader {
    display: none;
}

.loader.is-visible {
    display: block;
}

.loader.is-done {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease-in-out;
}

/* --------------------------------------------------------------------- هدر ---- */
/*
    مارک‌آپ هدر همان مارک‌آپ مرجع است، پس تقریباً همه‌چیزش از شیت واردشده می‌آید. تنها استثنا
    فهرست منوست: آن را ViewComponent هستهٔ «Menu» رندر می‌کند و کلاس‌هایش `poshesh-nav*` است.
    این بلاک همان قاعده‌های `.navbar-nav / .nav-item / .nav-link` مرجع را روی آن می‌نشاند.
*/
.nps-body .nps-primary-nav .poshesh-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nps-body .nps-primary-nav .poshesh-nav__item {
    position: relative;
}

.nps-body .nps-primary-nav .poshesh-nav__link {
    position: relative;
    display: inline-block;
    margin: 16px 1.25rem;
    padding: 8px 0;
    border-radius: 0;
    background: transparent;
    color: var(--nps-dark, #26313c);
    font-family: var(--nps-font, "Open Sans", sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.nps-body .nps-primary-nav .poshesh-nav__item:last-child .poshesh-nav__link {
    margin-inline-end: 0;
}

/* خط زیر آیتم که از مرکز باز می‌شود — همان `.static-nav .navbar-nav .nav-link:before` مرجع. */
.nps-body .nps-primary-nav .poshesh-nav__link::before {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    width: 0;
    height: 2px;
    margin: auto;
    background: var(--nps-secondary, #24cdd5);
    content: "";
    transition: .4s all;
}

.nps-body .nps-primary-nav .poshesh-nav__link:hover,
.nps-body .nps-primary-nav .poshesh-nav__item.is-active > .poshesh-nav__link {
    background: transparent;
    color: var(--nps-secondary, #24cdd5);
}

.nps-body .nps-primary-nav .poshesh-nav__link:hover::before,
.nps-body .nps-primary-nav .poshesh-nav__item.is-active > .poshesh-nav__link::before {
    width: 100%;
}

/*
    جفت‌پرچم زبان. مرجع همین را با style درون‌خطی می‌سازد؛ اینجا همان اعداد به کلاس منتقل شده‌اند
    تا سیاست CSP سایت لازم نباشد برای `style-src` باز شود.
*/
.nps-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 120px;
    flex: 0 0 auto;
    margin-inline-start: 10px;
}

.nps-lang a {
    display: block;
    width: 29px;
    flex: 0 0 29px;
}

.nps-lang img {
    display: block;
    width: 100%;
    height: auto;
}

.nps-lang__fa { inset-inline-start: 0; }
.nps-lang__en { inset-inline-start: 37px; }

/* ------------------------------------------------------------ کشوی کناری ---- */
/*
    کشو و دکمه‌اش مارک‌آپ مرجع دارند، پس حرکت و رنگشان از شیت واردشده می‌آید. اینجا فقط سه چیز
    اضافه می‌شود: دکمه به‌جای `<a href="javascript:void(0)">` مرجع یک `<button>` واقعی است و
    باید ظاهر دکمه را از خودش پاک کند؛ پردهٔ پشت کشو باید با کلاس باز/بسته شود نه با jQuery؛ و
    فهرست داخل کشو باز هم مارک‌آپ هسته است و پل می‌خواهد.
*/
.nps-body .sidemenu_btn {
    position: absolute;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#close_side_menu {
    position: fixed;
    z-index: 1031;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #000;
    cursor: pointer;
    inset: 0;
    opacity: .5;
}

#close_side_menu.is-open {
    display: block;
}

.nps-body .side-nav .poshesh-nav {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
    آیتم‌های کشو یکی‌یکی و با تأخیر پلکانی بالا می‌آیند — همان `transition: all .8s ease 500ms`
    مرجع با تأخیر ‎.1s تا ‎.9s برای فرزند اول تا نهم.
*/
.nps-body .side-nav .poshesh-nav__item {
    display: block;
    margin: 8px 0;
    padding: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all .8s ease 500ms;
}

.nps-body .side-nav .poshesh-nav__item:first-child { transition-delay: .1s; margin-top: 0; }
.nps-body .side-nav .poshesh-nav__item:nth-child(2) { transition-delay: .2s; }
.nps-body .side-nav .poshesh-nav__item:nth-child(3) { transition-delay: .3s; }
.nps-body .side-nav .poshesh-nav__item:nth-child(4) { transition-delay: .4s; }
.nps-body .side-nav .poshesh-nav__item:nth-child(5) { transition-delay: .5s; }
.nps-body .side-nav .poshesh-nav__item:nth-child(6) { transition-delay: .6s; }
.nps-body .side-nav .poshesh-nav__item:nth-child(7) { transition-delay: .7s; }
.nps-body .side-nav .poshesh-nav__item:nth-child(8) { transition-delay: .8s; }
.nps-body .side-nav .poshesh-nav__item:nth-child(9) { transition-delay: .9s; }
.nps-body .side-nav .poshesh-nav__item:last-child { margin-bottom: 0; }

.nps-body .side-menu.side-menu-active .side-nav .poshesh-nav__item {
    opacity: 1;
    transform: translateY(0);
}

.nps-body .side-nav .poshesh-nav__link {
    position: relative;
    display: inline-table;
    margin: 0;
    padding: 5px 0;
    background: transparent;
    color: #fff;
    font-family: var(--nps-font, "Open Sans", sans-serif);
    font-size: 1.5rem;
    font-weight: 300;
}

.nps-body .side-nav .poshesh-nav__link::before {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 0;
    height: 3px;
    background: #fff;
    content: "";
    overflow: hidden;
    transition: all .5s cubic-bezier(0, 0, .2, 1);
}

.nps-body .side-nav .poshesh-nav__link:hover::before {
    width: 100%;
}

/* دکمهٔ بستن مرجع یک `<span>` است؛ اینجا `<button>` واقعی است و ظاهر پیش‌فرضش پاک می‌شود. */
.nps-body .side-menu .btn-close {
    padding: 0;
    border: 0;
    background: none;
    opacity: 1;
}

/* --------------------------------------------------------------- اسلایدر ---- */
/*
    بازتولید اسلایدر مرجع (Slider Revolution 5.4.1 با پیکربندی `#vertical-bullets`).
    هر عدد اینجا از اندازه‌گیری روی خود مرجع آمده، نه از تخمین:

    · `sliderLayout: "fullscreen"` یعنی ارتفاع = ارتفاع پنجره (اندازه‌گیری: ۹۰۰px در پنجرهٔ ۹۰۰).
    · گذار بین اسلایدها `fade` با `fsmasterspeed: 1500`.
    · هر لایه مرکزش روی «۵۰٪ + فاصلهٔ لایه» می‌نشیند و لبهٔ افقی‌اش به کانتینر ۱۱۴۰ چفت است.
    · ورود هر لایه: از `y:[100%]` با ماسک و `opacity:0`؛ `Power4.easeInOut` ≡ easeInOutQuart.
      خروج: بازگشت به `y:[100%]` با `1000ms` و `Power2.easeInOut` ≡ easeInOutQuad.
    · زیر `gridwidth`، Revolution کل لایه‌ها را پیوسته کوچک می‌کند. همان رفتار اینجا با یک
      پایهٔ `font-size` روی `stage` و اندازه‌های `em` بازتولید می‌شود — نه با اندازهٔ ثابت در
      چند media query که پله‌ای می‌پرد.
*/
.nps-hero {
    position: relative;
    display: grid;
    overflow: hidden;
    background: var(--nps-dark);
}

/* مرجع fullscreen است؛ svh به‌جای vh تا نوار آدرس موبایل ارتفاع را وسط اسکرول تکان ندهد. */
.nps-hero--tall {
    min-height: 100vh;
    min-height: 100svh;
}

.nps-hero--medium {
    min-height: min(80vh, 620px);
}

.nps-hero--short {
    min-height: min(60vh, 460px);
}

.nps-hero__track {
    display: grid;
    /* بدون این، ارتفاع track به اندازهٔ متن جمع می‌شود و min-height خود اسلایدر بی‌اثر می‌ماند. */
    min-height: inherit;
}

/*
    همهٔ اسلایدها روی یک سلول grid می‌نشینند تا ارتفاع اسلایدر برابر بلندترین اسلاید باشد و
    جابه‌جایی، چیدمان صفحه را تکان ندهد.
*/
.nps-hero__slide {
    position: relative;
    min-height: inherit;
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    /* `fsmasterspeed: 1500` مرجع. */
    transition: opacity 1.5s ease-in-out;
    visibility: hidden;
}

.nps-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.nps-hero__image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
}

.nps-hero__veil {
    position: absolute;
    background: #000;
    inset: 0;
}

/* پله‌های مجاز تیرگی — تنظیمات ویجت به همین‌ها گرد می‌شود. */
.nps-hero__veil--0 { opacity: 0; }
.nps-hero__veil--10 { opacity: .1; }
.nps-hero__veil--20 { opacity: .2; }
.nps-hero__veil--30 { opacity: .3; }
.nps-hero__veil--40 { opacity: .4; }
.nps-hero__veil--50 { opacity: .5; }
.nps-hero__veil--60 { opacity: .6; }
.nps-hero__veil--70 { opacity: .7; }
.nps-hero__veil--80 { opacity: .8; }
.nps-hero__veil--90 { opacity: .9; }

/* ---------------------------------------------------- جعبهٔ لایه‌ها ---- */
/*
    `stage` هم‌عرض کانتینر مرجع است و `position:relative` دارد تا لایه‌ها نسبت به آن لنگر شوند.
    `font-size` این عنصر همان «مقیاس» اسلایدر است: همهٔ اندازه‌ها و فاصله‌های لایه‌ها `em`اند،
    پس تغییر همین یک عدد، کل کپشن را مثل مرجع کوچک می‌کند.
*/
.nps-hero__stage {
    position: absolute;
    z-index: 1;
    width: min(100%, var(--nps-container));
    height: 100%;
    /*
        مقیاس شبکهٔ مرجع: min(1, عرض پنجره / gridwidth) با gridwidth [1140, 1024, 750, 480].
        `tan(atan2(100vw, 1140px))` همان نسبتِ بی‌واحد است — CSS تقسیم دو طول را مستقیم نمی‌پذیرد.

        دو چیز با این نسبت کوچک می‌شوند، ولی از دو پایهٔ متفاوت — هر دو روی مرجع در ۱۲ عرض
        اندازه‌گیری شده:
        · فاصله‌های عمودی لایه‌ها: پیکسل × نسبت (مستقل از اندازهٔ ریشه؛ ۱۳۰۰px → ‎−۳۰). این عنصر
          همین را به‌صورت font-size حمل می‌کند و لایه‌ها با em می‌خوانند.
        · اندازهٔ متن: rem × نسبت. ریشه در شیت واردشده پله‌ای است (۱۶/۱۵/۱۴/۱۳px)، پس عنوان
          ۳rem خودبه‌خود ۴۸/۴۵/۴۲/۳۹ می‌شود — همان پایه‌هایی که روی مرجع دیده شد.
    */
    --nps-grid: min(1, tan(atan2(100vw, 1140px)));
    --nps-hero-fs: calc(3rem * var(--nps-grid));
    font-size: calc(16px * var(--nps-grid));
    inset-block: 0;
    inset-inline: 0;
    margin-inline: auto;
}

@media (max-width: 1199.98px) {
    .nps-hero__stage {
        --nps-grid: min(1, tan(atan2(100vw, 1024px)));
        width: min(100%, 1024px);
    }
}

@media (max-width: 777.98px) {
    .nps-hero__stage {
        --nps-grid: min(1, tan(atan2(100vw, 750px)));
        width: min(100%, 750px);
    }
}

/* Revolution uses the full viewport for its smallest 480px layout grid. */
@media (max-width: 479.98px) {
    .nps-hero__stage {
        --nps-grid: min(1, tan(atan2(100vw, 480px)));
        width: min(100%, 480px);
    }
}

/*
    هر لایه: جعبه‌ای که به اندازهٔ متنش جمع می‌شود، مرکزش روی «وسط + فاصله»، و لبه‌اش چفت
    ابتدا/انتها/وسطِ stage — همان `data-x` مرجع.

    نکتهٔ ظریف: `em` در `top` نسبت به font-size خودِ همین عنصر حساب می‌شود. پس این عنصر
    font-size نمی‌گیرد و پایهٔ ۱۶px را از stage به ارث می‌برد؛ اندازهٔ متن روی ماسک نشسته است.
    اگر font-size اینجا بیاید، فاصلهٔ ‎−۳۰px برای عنوان ۴۸px به ‎−۹۰px تبدیل می‌شود.
*/
/*
    `white-space: nowrap` عمداً مثل مرجع است: Revolution لایه‌ها را نمی‌شکند و روی موبایل متن
    از لبه بیرون می‌زند (اسلایدر `overflow:hidden` دارد). اگر بشکند، خط دوم روی لایهٔ بعدی
    می‌افتد چون فاصله‌ها برای تک‌خط اندازه‌گیری شده‌اند. متن کوتاه‌تر برای موبایل، کار محتواست.
*/
.nps-hero__layer {
    position: absolute;
    top: calc(50% + var(--nps-hero-y, 0em));
    width: fit-content;
    transform: translateY(-50%);
    white-space: nowrap;
}

.nps-hero__stage--start .nps-hero__layer {
    inset-inline-start: 0;
    text-align: start;
}

.nps-hero__stage--end .nps-hero__layer {
    inset-inline-end: 0;
    text-align: end;
}

/*
    وسط‌چین: `fit-content` عرض معین نمی‌سازد و margin:auto وسط نمی‌برد؛ پس با transform وسط
    می‌رود. عرض باید `max-content` باشد، وگرنه با `left:50%` فقط نصف stage برای متن می‌ماند و
    خط می‌شکند.
*/
.nps-hero__stage--center .nps-hero__layer {
    left: 50%;
    width: max-content;
    text-align: center;
    transform: translate(-50%, -50%);
}

/* ماسک: متن از پایین همین جعبه بالا می‌آید، دقیقاً مثل `mask: y:[100%]` مرجع. */
.nps-hero__mask {
    display: block;
    overflow: hidden;
}

.nps-hero__reveal {
    display: block;
}

/*
    حالت پنهان فقط وقتی فعال است که theme.js کلاسش را گذاشته باشد؛ بدون JS متن از همان اول
    دیده می‌شود و اسلایدر «خالی» رندر نمی‌شود.
*/
.nps-hero--animated .nps-hero__reveal {
    opacity: 0;
    /* خروج مرجع: 1000ms با Power2.easeInOut ≡ easeInOutQuad. */
    transform: translateY(100%);
    transition:
        transform 1s cubic-bezier(.45, 0, .55, 1),
        opacity 1s cubic-bezier(.45, 0, .55, 1);
}

.nps-hero--animated.is-ready .nps-hero__slide.is-active .nps-hero__reveal {
    opacity: 1;
    /* ورود مرجع: speed و start هر لایه، با Power4.easeInOut ≡ easeInOutQuart. */
    transform: translateY(0);
    transition:
        transform var(--nps-hero-speed, 2s) cubic-bezier(.76, 0, .24, 1) var(--nps-hero-start, 1s),
        opacity var(--nps-hero-speed, 2s) cubic-bezier(.76, 0, .24, 1) var(--nps-hero-start, 1s);
}

/* ------------------------------------------------- متن لایه‌ها ---- */
/*
    وزن‌ها: مرجع برای «نازک» کلاس `font-xlight` (وزن ۱۰۰) می‌نویسد، ولی @import گوگل در آن سایت
    فقط وزن‌های ۲۰۰ تا ۸۰۰ Montserrat را می‌آورد — یعنی مرورگر ۱۰۰ را روی نزدیک‌ترین face یعنی
    ۲۰۰ رندر می‌کند. فونت این قالب variable است و وزن ۱۰۰ واقعی دارد، پس اگر ۱۰۰ بنویسیم از
    مرجع نازک‌تر درمی‌آید. برای همین اینجا ۲۰۰ نوشته شده: همان پیکسلی که مرجع نشان می‌دهد.
*/
/*
    لایه حالا ممکن است <h1>/<h2> باشد. اندازهٔ متن روی ماسک است، ولی اگر خود لایه font-size
    عنوان را بگیرد، `top: calc(50% + <em>)` نسبت به همان حساب می‌شود و لایه جابه‌جا می‌شود
    (‎+۳۰ به ‎+۹۰ می‌پرد). پس جعبهٔ لایه همیشه پایهٔ مقیاس stage را نگه می‌دارد.
*/
.nps-body .nps-hero__layer {
    margin: 0;
    color: var(--nps-on-dark);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.nps-body .nps-hero__layer--eyebrow .nps-hero__mask,
.nps-body .nps-hero__layer--heading .nps-hero__mask {
    font-family: var(--nps-font-heading);
    /* ۴۸px با line-height ۵۷px در مرجع؛ زیر دسکتاپ با مقیاس فونت اندازه‌گیری‌شده کوچک می‌شود. */
    font-size: var(--nps-hero-fs, 3rem);
    line-height: 1.1875;
    text-transform: capitalize;
}

.nps-body .nps-hero__stage--light-bold .nps-hero__layer--eyebrow .nps-hero__mask { font-weight: 200; }
.nps-body .nps-hero__stage--light-bold .nps-hero__layer--heading .nps-hero__mask { font-weight: 700; }
.nps-body .nps-hero__stage--bold-medium .nps-hero__layer--eyebrow .nps-hero__mask { font-weight: 700; }
.nps-body .nps-hero__stage--bold-medium .nps-hero__layer--heading .nps-hero__mask { font-weight: 500; }

/* زیرعنوان مرجع: ۱۸px، وزن ۶۰۰، line-height ۲۸px — و بدون capitalize. */
.nps-body .nps-hero__layer--subheading .nps-hero__mask {
    font-family: var(--nps-font-heading);
    /* ۱۸px مرجع = ۰٫۳۷۵ × ۴۸؛ با همان مقیاس فونت کوچک می‌شود. */
    font-size: calc(1.125rem * var(--nps-grid, 1));
    font-weight: 600;
    line-height: 1.5556;
}

/*
    فراخوان مرجع لینک متنی ساده است، نه دکمه: ۱۸px، وزن ۱۰۰ (که مثل بالا روی ۲۰۰ رندر می‌شود)،
    بدون حاشیه و بدون padding. صفت‌های `data-border`/`data-text` در مارک‌آپ مبدأ هستند ولی
    نسخهٔ ۵٫۴٫۱ آن‌ها را نمی‌خواند، پس هیچ‌وقت دکمه‌ای رندر نشده است.

    `text-transform` نمی‌گیرد: در مرجع «Product specifications» با s کوچک رندر می‌شود، یعنی
    متن همان‌طور که نوشته شده می‌آید. capitalize فقط روی دو خط عنوان است.
*/
.nps-body .nps-hero__layer--button .nps-hero__mask {
    font-family: var(--nps-font-heading);
    font-size: calc(1.125rem * var(--nps-grid, 1));
    font-weight: 200;
    line-height: 1.1667;
}

.nps-body .nps-hero__link {
    color: var(--nps-on-dark);
    transition: color .3s ease-in-out;
}

.nps-body .nps-hero__link:hover,
.nps-body .nps-hero__link:focus {
    color: var(--nps-secondary);
}

/* ------------------------------------------------------- کنترل‌ها ---- */
.nps-hero__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / .5);
    border-radius: 50%;
    background: rgb(38 49 60 / .35);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .3s ease;
}

.nps-hero__arrow:hover {
    background: var(--nps-secondary);
}

.nps-hero__arrow--prev {
    inset-inline-start: 1.5rem;
}

.nps-hero__arrow--next {
    inset-inline-end: 1.5rem;
}

/*
    بولت عمودی مرجع: `h_align: left`، `h_offset: 30`، وسط عمودی، `space: 5`.
    اندازه‌ها از `#vertical-bullets.vertical-tpb`: حلقهٔ ۱۸px با حاشیهٔ ۴px سفید (جعبهٔ ۲۶px)،
    `scale(.6)` تا وقتی انتخاب نشده، و خط رابط ۳×۲۰ با `scaleY(1.4)`.
    ارتفاع کل برای سه اسلاید: ۲۶+۲۰+۲۶+۲۰+۲۶ = ۱۱۸px — همان عددی که روی مرجع اندازه‌گیری شد.
*/
.nps-hero__dots {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    inset-inline-start: 30px;
    transform: translateY(-50%);
}

.nps-hero__dot {
    position: relative;
    display: flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nps-hero__dot-ring {
    display: block;
    width: 18px;
    height: 18px;
    border: 4px solid #fff;
    border-radius: 50%;
    box-sizing: content-box;
    transform: scale(.6);
    transition: transform .5s ease-in-out;
}

.nps-hero__dot.is-active .nps-hero__dot-ring {
    transform: scale(1);
}

/* نقطهٔ توپر وسط، فقط روی بولت فعال — ۶۰٪ قطر داخلی حلقه. */
.nps-hero__dot-ring::before {
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
    background: #fff;
    content: "";
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.nps-hero__dot.is-active .nps-hero__dot-ring::before {
    opacity: 1;
}

.nps-hero__dot:not(:last-child) {
    margin-block-end: 20px;
}

.nps-hero__dot:not(:last-child)::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 3px;
    height: 20px;
    background: #fff;
    content: "";
    transform: scaleY(1.4);
    translate: -50% 0;
}

/*
    ریل شبکه‌های اجتماعی مرجع (`.revicon`): چسبیده به لبهٔ راست با فاصلهٔ ۴۰px، وسط عمودی.
    مرجع سه آیکون دارد ولی دوتایشان به `javascript:void(0)` می‌روند — یعنی مقصدی ندارند؛
    اینجا فقط لینک واقعی رندر می‌شود، نه آیکون ظاهراً فعال.
*/
.nps-hero__social {
    position: absolute;
    z-index: 11;
    top: 50%;
    margin: 0;
    padding: 0;
    inset-inline-end: 40px;
    list-style: none;
    transform: translateY(-50%);
}

.nps-body .nps-hero__social a {
    display: block;
    width: 30px;
    height: 40px;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    transition: color .3s ease-in-out;
}

.nps-body .nps-hero__social a:hover,
.nps-body .nps-hero__social a:focus {
    color: var(--nps-secondary);
}

/* مرجع هر دو را زیر ۷۶۷px پنهان می‌کند (`hide_under: 767` و `.revicon` در media query). */
@media (max-width: 767.98px) {
    .nps-hero__arrow,
    .nps-hero__dots,
    .nps-hero__social {
        display: none;
    }
}

/* کاربری که حرکت کمتر خواسته، نه چرخش خودکار می‌گیرد و نه لایهٔ متحرک. */
@media (prefers-reduced-motion: reduce) {
    .nps-hero__slide,
    .nps-hero--animated .nps-hero__reveal,
    .nps-hero--animated.is-ready .nps-hero__slide.is-active .nps-hero__reveal {
        transition: none;
    }

    .nps-hero--animated .nps-hero__reveal {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------- کانتینر و عنوان‌های پایه ---- */
/*
    کانتینر سکشن‌های صفحه‌ساز (`.poshesh-container`) ۲۴px بیشتر از `.container` بوت‌استرپ
    padding دارد؛ مرجع ۱۲px است و لبهٔ محتوا روی `x=162` می‌نشیند. همان عدد برمی‌گردد.
*/
.nps-body .poshesh-section > .poshesh-container {
    padding-inline: .75rem;
}

.nps-body .poshesh-section > .container > .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
}

/* Widget spacing comes from the reference component, rather than the core's
   blanket margin between every pair of column children. */
.nps-body .poshesh-column > * + * { margin-top: 0; }

.nps-body :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 500;
    line-height: 1.2;
}

/*
    شیت توکن هسته بعد از شیت واردشده لود می‌شود و اندازهٔ عنوان‌ها را از توکن‌های خودش می‌گیرد
    (مثلاً h3 → ۲۱٫۷۵px). مرجع `h1,h2:3rem  h3:1.5rem  h4:1.125rem  h5:1rem  h6:.875rem` است؛
    با یک درجه specificity بیشتر همان مقیاس برمی‌گردد. عنوان‌های ویجت هسته پایین‌تر جدا تنظیم می‌شوند.
*/
.nps-body h1 { font-size: 3rem; }
.nps-body h2 { font-size: 3rem; }
.nps-body h3 { font-size: 1.5rem; }
.nps-body h4 { font-size: 1.125rem; }
.nps-body h5 { font-size: 1rem; }
.nps-body h6 { font-size: .875rem; }

/* ------------------------------------------------- سکشن‌های صفحه‌ساز ---- */
/*
    از اینجا به بعد، کار «پل» است: ویجت‌های هسته مارک‌آپ خودشان را دارند و fork نمی‌شوند، پس
    قاعده‌های معادلِ مرجع با یک درجه specificity بیشتر رویشان می‌نشیند.
*/

/* ریتم عمودی مرجع: `.padding` یعنی ۷٫۵rem بالا و پایین. */
.nps-body .poshesh-section-xl {
    padding-block: 7.5rem;
}

/* `.bglight` مرجع. */
.nps-body .poshesh-section-muted {
    background: var(--nps-surface, #f6f7f8);
}

/*
    مقیاس عنوان‌ها.

    فایل توکن هسته آخر از همه لود می‌شود و در آن
    `.poshesh-heading-text{font-size:var(--pbx-fs-primary,inherit)}` نوشته شده؛ تا وقتی مدیر
    برای نقش تایپوگرافی اندازه‌ای ست نکرده، این یعنی «هم‌اندازهٔ متن» و کلاس اندازهٔ خود ویجت را
    می‌بازد. قالب صاحب ظاهر است، پس مقیاس مرجع را با specificity بیشتر برمی‌گرداند.
*/
.nps-body .poshesh-heading .poshesh-heading-display { font-size: 3.5rem; }
.nps-body .poshesh-heading .poshesh-heading-xl { font-size: 3rem; }
.nps-body .poshesh-heading .poshesh-heading-lg { font-size: 1.9rem; }
.nps-body .poshesh-heading .poshesh-heading-md { font-size: 1.5rem; }
.nps-body .poshesh-heading .poshesh-heading-sm { font-size: 1.125rem; }

/*
    دو گونهٔ عنوان در مرجع:
    · `h2.heading.font-light2` + جداکننده (`divider-left/center`): ۴۸px، رنگ #696969 —
      عنوان سکشن محصولات، عنوان محصول، و هر عنوانی که خط زیرش دارد.
    · `.heading-title h2.darkcolor.font-normal` بدون جداکننده: وزن ۴۰۰، رنگ #384141 —
      «We Invent the Method» در خانه.
    وجود جداکننده همان چیزی است که در سند صفحه‌ساز ذخیره می‌شود (`decoration`)، پس همان کلید
    گونه را تعیین می‌کند.
*/
.nps-body .poshesh-heading .poshesh-heading-text {
    color: var(--nps-heading, #384141);
    font-weight: 400;
    line-height: 1;
}

.nps-body .poshesh-heading {
    display: block;
}

.nps-body .poshesh-heading:has(> .poshesh-heading-deco-bar-center),
.nps-body .poshesh-heading:has(> .poshesh-heading-deco-bar-start) {
    margin-bottom: 30px;
}

.nps-body .poshesh-heading .poshesh-heading-text.poshesh-heading-deco-bar-center,
.nps-body .poshesh-heading .poshesh-heading-text.poshesh-heading-deco-bar-start {
    color: var(--nps-heading-muted, #696969);
    font-weight: 200;
    line-height: 1.2;
}

/* در مرجع، بخش تأکیدشدهٔ عنوان وزن معمولی می‌گیرد، نه رنگ دیگر. */
.nps-body .poshesh-heading .poshesh-heading-mark-color {
    color: inherit;
    font-weight: 400;
}

/* جداکنندهٔ زیر عنوان: `.heading .divider-center` مرجع — ۷۰×۴ با گرادیان. */
.nps-body .poshesh-heading-deco-bar-center::after,
.nps-body .poshesh-heading-deco-bar-start::after {
    width: 70px;
    height: 4px;
    border-radius: 0;
    background-image: linear-gradient(to right,
        var(--nps-primary, #5192e1) 0%,
        var(--nps-secondary, #23ced5) 51%,
        var(--nps-primary, #5192e1) 100%);
}

.nps-body .poshesh-heading-deco-bar-center::after {
    margin: 10px auto 0;
}

.nps-body .poshesh-heading-deco-bar-start::after {
    margin: 10px 0 0;
}

/* ------------------------------------------------------- دکمهٔ گرادیانی ---- */
/*
    دکمهٔ مرجع `.button.btnsecondary.gradient-btn` است: گرادیان دوبرابرعرض که با hover به راست
    سُر می‌خورد. ویجت دکمهٔ هسته کلاس خودش را دارد، پس همان رفتار اینجا سوار می‌شود.
*/
.nps-body .poshesh-btn.poshesh-btn-primary {
    position: relative;
    z-index: 1;
    padding: .8rem 2.25rem;
    border: 1px solid transparent;
    border-radius: 30px;
    background-color: transparent;
    background-image: linear-gradient(to right,
        var(--nps-primary, #5192e1) 0%,
        var(--nps-secondary, #23ced5) 51%,
        var(--nps-primary, #5192e1) 100%);
    background-size: 200% auto;
    color: #fff;
    font-family: var(--nps-font-heading, "Montserrat", sans-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    min-height: 0;
    text-align: center;
    text-transform: capitalize;
    transition: all .3s ease-in-out;
}

.nps-body .poshesh-btn.poshesh-btn-primary:hover,
.nps-body .poshesh-btn.poshesh-btn-primary:focus {
    background-position: right center;
    color: #fff;
}

/* ------------------------------------------------------- کارت محصول ---- */
/*
    کارت مرجع `.shopping-box` است: سایهٔ نرم بدون قاب، بزرگ‌نمایی تصویر، پوشش گرادیانی که
    محو ظاهر می‌شود، و عنوانی که رنگ می‌گیرد. ویجت کارت هسته پوششِ گرادیانی و دکمهٔ گرد ندارد،
    پس همان دو جزء اینجا از روی مارک‌آپ خودش ساخته می‌شوند.
*/
.nps-body .poshesh-card.poshesh-card-elevated {
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 10px var(--nps-shadow, #d1d1d1);
    overflow: hidden;
}

.nps-body .poshesh-card .poshesh-card-media {
    position: relative;
    overflow: hidden;
}

.nps-body .poshesh-card .poshesh-card-media img {
    transition: all .3s ease-in-out;
}

.nps-body .poshesh-card:is(:hover, :focus-within) .poshesh-card-media img {
    transform: scale(1.05);
}

/* پوشش گرادیانی `.overlay` مرجع، روی مارک‌آپ کارت هسته. */
.nps-body .poshesh-card .poshesh-card-media::after {
    position: absolute;
    z-index: 1;
    background-image: linear-gradient(to right, #23ced5aa 0%, #5192e1aa 100%);
    background-size: 100% 100%;
    content: "";
    inset: 0;
    opacity: 0;
    transition: all .3s ease-in-out;
    visibility: hidden;
    pointer-events: none;
}

.nps-body .poshesh-card:is(:hover, :focus-within) .poshesh-card-media::after {
    opacity: 1;
    visibility: visible;
}

/* The core stretched title link remains the click target above this decoration. */
.nps-body .poshesh-card-clickable .poshesh-card-media::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff url("../img/search.svg") center / 30px 30px no-repeat;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

.nps-body .poshesh-card-clickable:is(:hover, :focus-within) .poshesh-card-media::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .nps-body .poshesh-card .poshesh-card-media img,
    .nps-body .poshesh-card .poshesh-card-media::before,
    .nps-body .poshesh-card .poshesh-card-media::after {
        transition: none;
    }
}

.nps-body .poshesh-card .poshesh-card-body {
    padding: 20px 15px;
    gap: 0;
}

.nps-body .poshesh-card .poshesh-card-title {
    color: var(--nps-heading, #384141);
    font-family: var(--nps-font-heading, "Montserrat", sans-serif);
    font-size: 1.125rem;
    width: 100%;
    font-weight: 500;
    line-height: 1.2;
}

.nps-body .poshesh-card:is(:hover, :focus-within) .poshesh-card-title,
.nps-body .poshesh-card:is(:hover, :focus-within) .poshesh-card-title a {
    color: var(--nps-secondary, #24cdd5);
}

/* --------------------------------------------------- لینک‌های فوتر ---- */
/*
    ردیف تماس فوتر. مرجع این را با `d-table`/`d-table-cell` می‌سازد؛ اینجا flex است تا ایمیل
    بلند بشکند و از ستون بیرون نزند. فاصلهٔ ثابت از چسبیدن آیکون پاکت به برچسب ایمیل جلوگیری می‌کند.
*/
.nps-footer-contact {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nps-footer-contact > span {
    flex: 0 0 30px;
    text-align: center;
    line-height: 1;
}

.nps-footer-contact > p {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

@media (max-width: 576px) {
    .nps-body .title-wrap h1 {
        float: none !important; /* Bootstrap's float-start is an important utility. */
        text-align: center;
    }
    .nps-body .page-header .breadcrumb {
        float: none !important;
        justify-content: center;
        flex-wrap: wrap;
    }
}
/*
    ستون‌های لینک فوتر در مرجع `ul.links`اند و هر آیتم یک فلش Font Awesome پیش از متن دارد که
    با hover جلو می‌آید. مارک‌آپ اینجا مال منوی هسته است، پس همان قاعده‌ها پل می‌خورند.
*/
.nps-body .nps-footer-links .poshesh-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nps-body .nps-footer-links .poshesh-nav__item {
    margin: 0;
}

/* عین `ul.links li a` مرجع: inline-block، سفید، ۱۴px، ۱۰px فاصلهٔ زیر. */
.nps-body .nps-footer-links .poshesh-nav__link {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: 0;
    line-height: 0;
    white-space: normal;
    transition: all .3s ease-in-out;
}

.nps-body .nps-footer-links .poshesh-nav__link > span { font-size: 14px; line-height: 21px; }

/* `\f0da` (caret-right) با رنگ #475869 — همان `ul.links li a::before` مرجع. */
.nps-body .nps-footer-links .poshesh-nav__link::before {
    display: inline-block;
    margin-right: 5px;
    color: #475869;
    content: "\f0da";
    font-family: "Font Awesome 5 Free", serif;
    font-weight: 900;
    font-size: 14px;
    line-height: 21px;
    vertical-align: baseline;
    transition: all .3s ease-in-out;
}

.nps-body .nps-footer-links .poshesh-nav__link:hover,
.nps-body .nps-footer-links .poshesh-nav__link:focus {
    color: var(--nps-secondary, #24cdd5);
}

.nps-body .nps-footer-links .poshesh-nav__link:hover::before {
    padding-right: 5px;
}

/* مرجع: `<p>` با margin پیش‌فرض خودش (۰ بالا، ۱rem پایین)؛ فاصلهٔ بالا را `padding_bottom_half` ستون‌ها می‌دهد. */
.nps-footer-copyright {
    margin: 0 0 1rem;
    color: #dadada;
    font-size: 13px;
}

/* --------------------------------------------------- محتوای غنی ---- */
/*
    لینک داخل متن محتوایی باید دیده شود.

    مرجع `a{color:inherit}` سراسری دارد و لینک‌های متن هم‌رنگ متن‌اند؛ اما همان‌جا لینک «دانلود
    کاتالوگ» را با کلاس دکمه رنگی می‌کند و sanitizer هسته کلاس را حذف می‌کند. بدون این قاعده،
    لینک دانلود کاتالوگ ۱۴ محصول نامرئی می‌شود. پس فقط داخل محتوای غنی لینک رنگ می‌گیرد؛
    ناوبری، کارت و فوتر دست‌نخورده می‌مانند.
*/
.nps-body .poshesh-widget-text a,
.nps-body .poshesh-tabs-panel a {
    color: var(--nps-secondary, #24cdd5);
}

.nps-body .poshesh-widget-text a:hover,
.nps-body .poshesh-tabs-panel a:hover {
    text-decoration: underline;
}

/* هسته برای جدول داخل محتوای غنی قاعده‌ای ندارد؛ جدول فنی محصول بدون این، بی‌قاب می‌ماند. */
.nps-body .poshesh-widget-text table,
.nps-body .poshesh-tabs-panel table {
    width: 100%;
    margin-block: 1rem;
    border-collapse: collapse;
}

.nps-body .poshesh-widget-text :is(th, td),
.nps-body .poshesh-tabs-panel :is(th, td) {
    padding: .5rem .75rem;
    border: 1px solid var(--nps-shadow, #d1d1d1);
    color: var(--nps-text, #565656);
    text-align: start;
    vertical-align: middle;
}

.nps-body .poshesh-widget-text th,
.nps-body .poshesh-tabs-panel th {
    background: var(--nps-surface, #f6f7f8);
    font-weight: 600;
}

/* جدول پهن‌تر از ستون نباید صفحه را افقی اسکرول کند. */
.nps-body .poshesh-widget-text :has(> table),
.nps-body .poshesh-tabs-panel :has(> table) {
    overflow-x: auto;
}

/* ------------------------------------------------- انیمیشن اسکرول ---- */
/*
    مرجع تأخیر هر عنصر را با `data-wow-delay` می‌نویسد. سند صفحه‌ساز روی گره‌ها فقط کلاس
    می‌پذیرد، نه صفت دلخواه؛ پس تأخیر به کلاس تبدیل می‌شود. wow.js فقط وقتی `data-wow-delay`
    باشد `animation-delay` را inline می‌نویسد، پس این قاعده‌ها دقیقاً همان اثر را می‌گذارند.
    فقط تأخیرهایی که واقعاً در مرجع هستند اعلام شده‌اند (۲۰، ۳۰۰، ۳۵۰، ۴۰۰، ۴۵۰ میلی‌ثانیه).
*/
.nps-body .nps-wow-20 { animation-delay: 20ms; }
.nps-body .nps-wow-300 { animation-delay: 300ms; }
.nps-body .nps-wow-350 { animation-delay: 350ms; }
.nps-body .nps-wow-400 { animation-delay: 400ms; }
.nps-body .nps-wow-450 { animation-delay: 450ms; }

/* گالری و اطلاعات محصول در مرجع `data-wow-duration="1100ms"` دارند. */
.nps-body .nps-wow-d1100 { animation-duration: 1100ms; }

/*
    بنر ساخته‌شده با CallToAction هسته (پیش از مهاجرت به ویجت بنر قالب): همان هندسهٔ
    `.page-header .page-titles` مرجع — ۱۶۰px بالا، ۶۰px پایین — تا متن پشت نوار سفید هدر نیفتد.
*/
.nps-body .nps-bleed .poshesh-cta-banner {
    padding-block: 160px 60px;
    border-radius: 0;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

.nps-body .nps-bleed .poshesh-cta-banner .poshesh-cta-title {
    font-family: var(--nps-font, "Open Sans", sans-serif);
    font-size: 29px;
    font-weight: 400;
    line-height: 47px;
}

/* ---------------------------------------------------- بنر صفحهٔ داخلی ---- */
.nps-body .nps-page-banner {
    background-attachment: scroll;
    background-position: center top;
    background-size: 100% 100%;
}
/*
    مارک‌آپ بنر همان مارک‌آپ مرجع است و چیدمانش از شیت واردشده می‌آید. اینجا فقط شدت پوشش
    تیره (که مرجع با کلاس `opacity-5` می‌نویسد) از تنظیمات ویجت به پله‌های موجود نگاشت می‌شود.
*/
.nps-page-banner--0 .overlay-dark { opacity: 0; }
.nps-page-banner--10 .overlay-dark { opacity: .1; }
.nps-page-banner--20 .overlay-dark { opacity: .2; }
.nps-page-banner--30 .overlay-dark { opacity: .3; }
.nps-page-banner--40 .overlay-dark { opacity: .4; }
.nps-page-banner--50 .overlay-dark { opacity: .5; }
.nps-page-banner--60 .overlay-dark { opacity: .6; }
.nps-page-banner--70 .overlay-dark { opacity: .7; }
.nps-page-banner--80 .overlay-dark { opacity: .8; }
.nps-page-banner--90 .overlay-dark { opacity: .9; }

/* Solutions uses the source's full-frame banner and flat service cards.
   Scope these rules to this page so product cards and other banners keep their settings. */
.nps-solutions .nps-page-banner {
    background-size: 100% 100%;
    background-position: center top;
}

.nps-solutions .nps-page-banner--50 .overlay-dark { opacity: .2; }

/* Reference rounded-list bullets; do not depend on an icon font for these dots. */
.nps-body.nps-solutions .nps-main .poshesh-icon-list-item {
    align-items: flex-start;
    gap: 10px;
    padding: 0;
}

.nps-body.nps-solutions .nps-main .poshesh-icon-list-item + .poshesh-icon-list-item {
    margin-top: 20px;
}

.nps-body.nps-solutions .nps-main .poshesh-icon-list-item > i {
    display: block;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: .5em;
    border-radius: 50%;
    background: var(--nps-secondary, #24cdd5);
}

.nps-body.nps-solutions .nps-main .poshesh-icon-list-item > i::before {
    content: none;
}

.nps-solutions .poshesh-section:has(.poshesh-card) > .poshesh-container > .row {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
    align-items: start;
}

.nps-body.nps-solutions .poshesh-card {
    margin-inline: 10px;
    border: 0;
    box-shadow: none;
}

.nps-body.nps-solutions .poshesh-card .poshesh-card-body {
    /* Source has an empty image (10px gap) and a -30px content overlap. */
    padding: max(0px, calc(2rem - 20px)) 1rem 2rem;
    text-align: center;
}

.nps-solutions .poshesh-card .poshesh-card-title {
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.nps-solutions .poshesh-card .poshesh-card-text {
    font-size: 14px;
    line-height: 1.7;
}

.nps-solutions .poshesh-card .poshesh-card-text p {
    margin-bottom: 15px;
}
.nps-solutions .poshesh-card .poshesh-card-text { width: 100%; }
.nps-solutions .poshesh-card .poshesh-card-text font { font-family: Calibri, sans-serif; font-size: 13px; }

.nps-solutions .poshesh-card .poshesh-card-text > a {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22.5px;
}

.nps-solutions .poshesh-card .poshesh-card-text h3:last-child { margin-bottom: 10px; }

.nps-projects-layout { position: relative; display: block; }
.nps-projects-layout > .poshesh-column:has(> .poshesh-card) { position: absolute; margin-top: 0; }
.nps-body .nps-projects-layout .poshesh-heading { margin-bottom: 3.75rem; }
.nps-body .nps-projects-layout .poshesh-heading-text { margin-bottom: 30px; }
.nps-body .nps-projects-layout .poshesh-heading-subtitle {
    max-width: none;
    font: 400 14px / 1.7 var(--nps-font);
    text-align: center;
    margin-bottom: 0;
}

/* Source services-main hover: a clipped gradient, with a hand cursor only on links. */
.nps-body.nps-solutions .poshesh-card:is(:hover, :focus-within) .poshesh-card-title {
    background-image: linear-gradient(to right, var(--nps-primary, #5192e1), var(--nps-secondary, #23ced5) 51%, var(--nps-primary, #5192e1));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nps-body.nps-solutions .poshesh-card .poshesh-card-title a {
    color: inherit;
    cursor: pointer;
}

.nps-body.nps-solutions .poshesh-card .button-readmore {
    color: var(--nps-heading, #384141);
    font-size: 16px;
}

/* CubePortfolio's initial displayType is fadeIn at 400ms, not per-card WOW. */
.nps-projects-enter {
    animation: nps-projects-reveal .4s ease-in both;
}

@keyframes nps-projects-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .nps-projects-enter { animation: none; }
}

.nps-solutions .poshesh-heading .poshesh-heading-text {
    font-weight: 200;
    line-height: 1.2;
}

/*
    عنوان نوار گرادیانی در مرجع <h3> است و اینجا <h1>؛ اندازه و فاصله عیناً همان می‌ماند
    (`h3: 1.5rem` و `.title-wrap h3 { margin-top: 3px }` مرجع) تا تغییر تگ یک پیکسل هم جابه‌جا نکند.
*/
.nps-body .title-wrap h1 {
    color: #fff;
    margin-top: 3px;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
}

/* جملهٔ راهنما در ویرایشگر داخل <p> ذخیره می‌شود؛ مرجع متن خام است با ۲۹px/۴۷px خود بنر. */
.nps-body .page-header .page-titles p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

/* مسیر راهنما در مرجع <ul> است و اینجا <ol> معنایی؛ ظاهر یکی می‌ماند. */
.nps-body .page-header .breadcrumb {
    /* `top10 bottom10` مرجع؛ فقط padding و نشانگر فهرست از <ol> پاک می‌شود. */
    margin: 10px 0;
    padding: 0;
    list-style: none;
}

/*
    نوار عنوان نیمه‌اش روی محتوا می‌افتد (`translateY(50%)` مرجع)؛ سکشن بعدی باید به همان اندازه
    جا باز کند. مرجع این را با `.padding` (۷٫۵rem) خود سکشن بعدی می‌گیرد و ما هم همان را داریم.
*/

/* ------------------------------------------------------- گالری محصول ---- */
/*
    نام کلاس‌ها همان کلاس‌های `.carousel-shop-detail` مرجع‌اند و حرکت دکمه‌ها، شفافیت و قاب
    بندانگشتی از شیت واردشده می‌آید. اینجا فقط چیزی نوشته می‌شود که owl.carousel با جاوااسکریپت
    می‌ساخت: کدام تصویر دیده شود، و چیدمان نوار بندانگشتی.
*/
.nps-gallery__main {
    position: relative;
}

.nps-gallery__item {
    display: none;
}

.nps-gallery__item.is-active {
    display: block;
}

.nps-gallery__zoom {
    display: block;
    overflow: hidden;
}

.nps-gallery__zoom img {
    display: block;
    width: 100%;
    height: auto;
}

/* دکمه‌های قبلی/بعدی مرجع: وسط عمودی، بیرون قاب تا وقتی ماوس نیامده. */
.nps-body .carousel-shop-detail .owl-nav {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-50%);
}

.nps-body .carousel-shop-detail .owl-nav button {
    border: 0;
    margin: 0 15px;
    cursor: pointer;
    pointer-events: auto;
}

.nps-body .carousel-shop-detail .owl-nav .owl-prev { transform: translateX(-45px); }
.nps-body .carousel-shop-detail .owl-nav .owl-next { transform: translateX(45px); }
.nps-body .carousel-shop-detail:hover .owl-nav button { transform: translateX(0); }

/* نوار بندانگشتی: چهار تصویر در یک ردیف، مثل `items: 4` مرجع. */
.nps-gallery__thumbs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.nps-gallery__thumbs::-webkit-scrollbar { display: none; }

.nps-gallery__thumb {
    flex: 0 0 25%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nps-gallery__thumb.synced {
    cursor: default;
}

.nps-gallery__thumb .item {
    display: block;
}

.nps-gallery__thumb img {
    display: block;
    width: 100%;
    height: auto;
}

/* نمای تمام‌صفحه (جای fancybox مرجع). */
.nps-lightbox {
    max-width: min(92vw, 1400px);
    max-height: 92vh;
    padding: 0;
    border: 0;
    background: transparent;
}

.nps-lightbox::backdrop {
    background: rgb(30 30 30 / .9);
}

.nps-lightbox__image {
    display: block;
    max-width: 92vw;
    max-height: 92vh;
    width: auto;
    height: auto;
}

.nps-lightbox__close {
    position: fixed;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--nps-dark, #26313c);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* ------------------------------------------------- سکشن‌های صفحهٔ محصول ---- */
/*
    در مرجع گالری/اطلاعات و تب‌ها یک سکشن `#shop.padding`اند و ردیف تب‌ها فقط `.top40` است.
    صفحه‌ساز دو سکشن جدا می‌سازد؛ این دو کلاس (که مهاجرت محتوا روی سکشن‌ها می‌گذارد) همان
    ریتم را برمی‌گردانند: بی‌فاصله بین دو سکشن، و ۴۰px بالای تب‌ها.
*/
.nps-body .poshesh-section.nps-shop-info {
    padding-block-end: 0;
}

.nps-body .poshesh-section.nps-shop-tabs {
    padding-block-start: 40px;
}

.nps-body .nps-shop-info .poshesh-heading { margin-bottom: 15px; }
.nps-body .nps-shop-info .poshesh-btn-wrap { margin-block: .25rem 1.5rem; }
.nps-body .nps-shop-info .poshesh-btn.poshesh-btn-primary {
    font-family: var(--nps-font);
    line-height: 1.5;
    gap: .25rem;
}
.nps-body .nps-shop-info .poshesh-btn i { font-size: inherit; }

/* `.tab-to-accordion.heading_space` مرجع: ۳٫۷۵rem زیر تب‌ها پیش از فوتر. */
.nps-body .nps-shop-tabs .poshesh-tabs {
    margin-block-end: 3.75rem;
}

/* ----------------------------------------------------- تب‌های محصول ---- */
/*
    تب‌های مرجع `.tabset-list` + `.tab-container`اند: سرتب‌ها قرصی با گوشهٔ پایین صاف، فعال
    فیروزه‌ای و بقیه خاکستری، و پنل با قاب ۱px. ویجت تب هسته مارک‌آپ خودش را دارد؛ همان اعداد پل
    می‌خورند.
*/
/* ویجت تب هسته flex با `gap` است؛ در مرجع پنل بی‌فاصله زیر سرتب‌ها می‌چسبد. */
.nps-body .poshesh-tabs {
    gap: 0;
}

.nps-body .poshesh-tabs.poshesh-tabs-horizontal .poshesh-tabs-list {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* پنل مرجع بی‌فاصله زیر سرتب‌ها می‌چسبد. */
.nps-body .poshesh-tabs .poshesh-tabs-panels {
    margin-top: 0;
}

.nps-body .poshesh-tabs .poshesh-tabs-tab {
    margin: 0;
    padding: 12px 1.75rem;
    border: 0;
    border-radius: 23px 23px 0 0;
    background: var(--nps-shadow, #d1d1d1);
    color: #fff;
    font-family: var(--nps-font, "Open Sans", sans-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
}

.nps-body .poshesh-tabs .poshesh-tabs-tab::after {
    display: none;
}

.nps-body .poshesh-tabs .poshesh-tabs-tab.is-active {
    background: var(--nps-secondary, #24cdd5);
    color: #fff;
    cursor: default;
}

.nps-body .poshesh-tabs .poshesh-tabs-panels {
    /* `.tab-container` مرجع: بدون padding پایین؛ آخرین پاراگراف هم margin ندارد. */
    padding: 2.5rem 1rem 0;
    border: 1px solid var(--nps-shadow, #d1d1d1);
    border-radius: 0 0 5px 5px;
    background: #fff;
}

.nps-body .poshesh-tabs .poshesh-tabs-panel {
    padding: 0;
}

.nps-body .poshesh-tabs .poshesh-tabs-panel p:last-child {
    margin-bottom: 0;
}

/*
    لینک کاتالوگ در مرجع دکمهٔ گرادیانی کوچک با آیکون دانلود است (`.btn-common.gradient-btn`).
    sanitizer هسته کلاس را از لینک داخل تب می‌گیرد، پس دکمه از روی خود لینک — که به PDF می‌رود —
    ساخته می‌شود. این قاعده فقط داخل پنل تب و فقط برای فایل PDF است.
*/
.nps-body .poshesh-tabs-panel a[href$=".pdf"] {
    /* The source link is inline: its padding paints outside the paragraph line box. */
    display: inline;
    padding: 10px 1.25rem;
    border: 1px solid transparent;
    border-radius: 30px;
    line-height: 1.7;
    background-image: linear-gradient(to right,
        var(--nps-primary, #5192e1) 0%,
        var(--nps-secondary, #23ced5) 51%,
        var(--nps-primary, #5192e1) 100%);
    background-size: 200% auto;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

.nps-body .poshesh-tabs-panel a[href$=".pdf"]::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    background: url("../img/download.svg") center / contain no-repeat;
}

.nps-body .poshesh-tabs .poshesh-tabs-panel > p:has(> a[href$=".pdf"]) {
    margin-bottom: 1rem;
}

.nps-body .poshesh-tabs-panel a[href$=".pdf"]:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

/* Current reference specification tables; data stays in the native Tabs widget. */
.nps-body .nps-specifications-current .poshesh-tabs-panel > div:has(> table) {
    width: 100%; overflow-x: auto; margin: 25px 0; direction: ltr;
}
.nps-body .nps-specifications-current .poshesh-tabs-panel table {
    width: 100%; border-collapse: collapse; background: #fff;
    font: 400 15px / 1.5 Arial, Tahoma, sans-serif; color: #000;
    border: 1px solid #dfe3e6; box-shadow: 0 4px 15px rgba(36,45,79,.08); direction: ltr;
}
.nps-body .nps-specifications-current .poshesh-tabs-panel :is(th, td) {
    padding: 12px 10px; border: 1px solid #dfe3e6; text-align: center;
    font: inherit; color: #000; background: transparent;
}
.nps-body .nps-specifications-current .poshesh-tabs-panel th {
    padding: 13px 10px; border-color: #3b4565; border-bottom: 3px solid #987c4a;
    background: #242d4f; color: #fff; font-weight: 600;
}
.nps-body .nps-specifications-current .poshesh-tabs-panel th[colspan] {
    padding: 16px 18px; background: #f7f7f6; color: #000;
    border: 1px solid #dfe3e6; font-size: 18px; font-weight: 600; text-align: left;
}
.nps-body .nps-specifications-current .poshesh-tabs-panel td:first-child { font-weight: 600; }
.nps-body .nps-specifications-current .poshesh-tabs-panel tr:nth-child(even) { background: #fafafa; }
.nps-body .nps-specifications-isopars .poshesh-tabs-panel tr:nth-child(even) { background: #fff; }
.nps-body .nps-specifications-isopars .poshesh-tabs-panel tr:nth-child(odd) { background: #fafafa; }
.nps-body .nps-specifications-nickel .poshesh-tabs-panel table { font-family: var(--nps-font); }
.nps-body .nps-specifications-nickel .poshesh-tabs-panel th { border-bottom-width: 1px; }
.nps-body .nps-specifications-nickel .poshesh-tabs-panel th[colspan] { color: #242d4f; border-bottom: 3px solid #987c4a; }
.nps-body .nps-specifications-current .poshesh-tabs-panel > p:has(> strong) { text-align: center; }

/*
    آیکون دکمه: ویجت دکمهٔ هسته نام آیکون را همان‌طور که ذخیره شده به `<i class>` می‌دهد (قرارداد
    Remix Icon). برای آیکون Font Awesome مرجع (`fa-fax`)، فونت و وزن glyph از اینجا می‌آید.
*/
.nps-body .poshesh-btn i[class*="fa-"] {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
}

/* دکمهٔ کوچک مرجع (`.quote .btn-common`): ۱۱px با padding ۱۰px ۱٫۲۵rem. */
.nps-body .poshesh-btn.poshesh-btn-primary.poshesh-btn-sm {
    padding: 10px 1.25rem;
    font-size: 11px;
    font-weight: 400;
}

/* ------------------------------------------------------- بازگشت به بالا ---- */
/* مارک‌آپ و ظاهر از مرجع؛ نمایش با کلاس `back-top-visible` که theme.js بعد از ۷۰۰px می‌گذارد. */
.nps-body .back-top {
    border: 0;
    padding: 0;
}

/* ------------------------------------------------- سکشن تمام‌عرض ---- */
/*
    صفحه‌ساز برای هر سکشن یک `.container` می‌سازد و راهی برای خاموش‌کردنش ندارد؛ این کلاس —
    که در سند صفحه روی خود سکشن نوشته می‌شود — قاب را باز می‌کند تا اسلایدر و بنر صفحات داخلی
    مثل مرجع تمام‌عرض شوند. کلاس قراردادی خود قالب است، پس پیشوند nps- دارد.
*/
.nps-body .nps-bleed > .container {
    max-width: none;
    padding-inline: 0;
}

.nps-body .nps-bleed > .container > .row {
    margin-inline: 0;
    --bs-gutter-x: 0;
}

.nps-body .nps-bleed > .container > .row > .poshesh-column {
    padding-inline: 0;
}

/*
    هدر روی اولین سکشن شناور است، پس صفحه‌ای که با سکشن تمام‌عرض شروع نمی‌شود باید خودش جای
    هدر را باز کند. `:has` اینجا درست‌ترین ابزار است: بدون JS و بدون کلاس اضافه روی body، و
    نتیجه از همان اولین رندر درست است، نه بعد از اجرای اسکریپت.
*/
.nps-main {
    min-height: 40vh;
    padding-block-start: 9rem;
}

.nps-main:has(> .poshesh-builder-page > .poshesh-section:first-child.nps-bleed) {
    padding-block-start: 0;
}

/* Patents page: match the original html1/html2/html3 and team-box presentation. */
.nps-body .poshesh-section.nps-patents-intro {
    padding-block: 7.5rem 0;
}

.nps-body .nps-patents-intro .poshesh-widget-text {
    text-align: justify;
}

.nps-body .poshesh-section.nps-patents-collection {
    padding-block: 7.5rem 0;
    background: #fff;
}

.nps-body .poshesh-section.nps-patents-awards {
    padding-bottom: 7.5rem;
}

.nps-body .nps-patents-collection .poshesh-heading .poshesh-heading-text {
    font-size: 3rem;
    font-weight: 200;
    line-height: 1.2;
    color: var(--nps-heading-muted, #696969);
    margin: 0;
}

.nps-body .nps-patents-collection .poshesh-heading {
    margin: 0 0 calc(30px + 3.75rem);
    text-align: center;
}

.nps-body .nps-patents-collection .poshesh-gallery {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0px;
}

.nps-body .nps-patents-collection .poshesh-gallery > .col {
    padding-bottom: 1.5rem;
}

.nps-body .nps-patents-collection .poshesh-gallery figure {
    padding: 0;
    border: 0;
    background: #fff;
}

.nps-body .nps-patents-collection .poshesh-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0 !important; /* The reference has square document corners. */
}

.nps-body .nps-patents-collection .team-content {
    height: 116px;
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%);
}

.nps-body .nps-patents-collection .team-content h4 {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2;
}

.nps-body .nps-patents-collection .team-content .button-readmore {
    padding-top: 3px;
    color: inherit;
}

.nps-body .nps-patents-collection .team-box:hover .team-content .button-readmore {
    color: #fff;
}

.nps-certificate-viewer {
    width: min(1000px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    background: #f6f7f8;
    color: #26313c;
}

.nps-certificate-viewer::backdrop {
    background: #101c2de0;
}

.nps-certificate-toolbar,
.nps-certificate-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: #fff;
}

.nps-certificate-viewer button,
.nps-body .nps-certificate-viewer a {
    padding: 8px 12px;
    min-height: 44px;
    border: 1px solid #d4dce3;
    background: #fff;
    color: #26313c;
    font-size: 14px;
}

.nps-certificate-viewer img {
    display: block;
    width: 100%;
    height: calc(100dvh - 180px);
    object-fit: contain;
    padding: 16px;
}

.nps-certificate-viewer button:focus-visible,
.nps-certificate-link:focus-visible,
.nps-certificate-viewer a:focus-visible {
    outline: 3px solid var(--nps-primary, #5192e1);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .nps-body .poshesh-section.nps-patents-intro,
    .nps-body .poshesh-section.nps-patents-collection { padding-top: 6rem; }
    .nps-body .poshesh-section.nps-patents-awards { padding-bottom: 6rem; }
}

@media (max-width: 991.98px) {
    .nps-body .nps-patents-collection .poshesh-gallery > .col { width: 33.333333%; }
}

@media (max-width: 767.98px) {
    .nps-body .nps-patents-collection .poshesh-gallery > .col { width: 50%; }
    .nps-body .nps-patents-collection .poshesh-heading { margin-bottom: calc(30px + 2rem); }
    .nps-certificate-toolbar { flex-wrap: wrap; padding: 10px; }
}

@media (max-width: 575.98px) {
    .nps-body .nps-patents-collection .poshesh-gallery > .col { width: 100%; }
}

/* Information pages: bridge native builder widgets to the reference layout. */
.nps-body .nps-about-intro > .container > .row { align-items: center; }
.nps-body .nps-about-intro > .container > .row,
.nps-body .nps-company-profile > .container > .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; }
.nps-body .nps-about-intro .poshesh-heading { margin-bottom: 30px; }
.nps-body .nps-about-intro .poshesh-heading .poshesh-heading-mark-color { color: var(--nps-secondary); }
.nps-body .nps-about-intro .poshesh-heading-text,
.nps-body .nps-company-profile .poshesh-heading-text,
.nps-body .nps-clients-intro .poshesh-heading-text {
    font-size: 3rem;
    line-height: 1;
    font-weight: 400;
}
.nps-body .nps-about-copy > .poshesh-widget-text,
.nps-body .nps-about-copy > .nps-about-vision { margin-inline-start: 30px; }
.nps-body .nps-about-copy .poshesh-widget-text a { color: blue; font-weight: 700; }
.nps-body .nps-about-copy .poshesh-widget-text p:last-child { margin-bottom: 20px; }
.nps-body .nps-about-copy .nps-about-vision { margin-block: 0 20px; }
.nps-body .nps-about-vision .poshesh-heading { margin: 0; }
.nps-body .nps-about-copy .poshesh-btn-wrap { margin: 0; }
.nps-body .nps-about-copy .poshesh-btn {
    min-height: 0; padding: 12px 33.75px; border: 1px solid transparent; line-height: 15px;
}
.nps-body .nps-about-copy .nps-about-vision .poshesh-heading-text {
    color: var(--nps-text);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
}
.nps-body .nps-about-picture img,
.nps-body .nps-company-profile img { display: block; width: 100%; height: auto; }
.nps-body .poshesh-section.nps-company-profile { padding-block: 100px 0; }
.nps-body .nps-about-picture p { margin: 0; }
.nps-body .nps-company-profile .poshesh-heading { margin-bottom: 30px; }
.nps-body .nps-company-profile p { margin: 0; }
.nps-body .nps-clients-intro .poshesh-heading { margin-bottom: 1.5rem; }
.nps-body .nps-clients-intro .poshesh-heading-subtitle {
    margin-top: 30px;
    font-family: var(--nps-font-heading);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    max-width: none;
    color: var(--nps-heading);
}
.nps-body .nps-clients-intro .poshesh-widget-text p:last-child { margin-bottom: 20px; }
.nps-body .poshesh-section.nps-clients-logos {
    padding-block: 7.5rem;
    background: var(--nps-surface);
}
.nps-body .nps-clients-logos .poshesh-carousel-slide {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.nps-body .nps-clients-logos .poshesh-carousel-media {
    display: flex; align-items: center; justify-content: center;
    height: 100px; padding: 0; background: transparent;
}
.nps-body .nps-clients-logos .poshesh-carousel-media img {
    width: 160px; max-width: 100%; height: 100%; object-fit: contain;
}
.nps-body .nps-clients-logos .poshesh-carousel-caption { padding: 12px 0 0; text-align: center; }
.nps-body .nps-clients-logos .poshesh-carousel-title {
    margin: 0; font-family: var(--nps-font); font-size: 10px; font-weight: 400; line-height: 1.5;
}
.nps-body .nps-clients-carousel-loop .poshesh-carousel-track {
    scroll-behavior: auto;
    scroll-snap-type: none;
    overflow-anchor: none;
    cursor: grab;
    user-select: none;
    height: 145.5px;
}
.nps-body .nps-clients-carousel-loop .poshesh-carousel-track a { cursor: inherit; }
.nps-body .nps-clients-carousel-loop .poshesh-carousel-track.nps-is-dragging { cursor: grabbing; }
/* Match the original partner carousel's 1/2/3/4/5 visible-logo breakpoints. */
.nps-body .nps-clients-logos .poshesh-carousel-slide { flex: 0 0 calc((100% - 120px) / 5); }
@media (max-width: 1199.98px) {
    .nps-body .nps-clients-logos .poshesh-carousel-slide { flex-basis: calc((100% - 90px) / 4); }
}
@media (max-width: 990.98px) {
    .nps-body .nps-clients-logos .poshesh-carousel-slide { flex-basis: calc((100% - 60px) / 3); }
}
@media (max-width: 766.98px) {
    .nps-body .nps-clients-logos .poshesh-carousel-slide { flex-basis: calc((100% - 30px) / 2); }
}
@media (max-width: 479.98px) {
    .nps-body .nps-clients-logos .poshesh-carousel-slide { flex-basis: 100%; }
}
.nps-body .poshesh-section.nps-contact-panel {
    padding-block: 7.5rem;
    background: var(--nps-surface);
}
.nps-body .nps-contact-panel > .container { padding: 3rem calc(30px + .75rem); background: var(--pbx-background, #fff); }
.nps-body .nps-contact-panel > .container > .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; }
.nps-body .nps-contact-panel :is(.nps-contact-form, .nps-contact-info) { padding-inline: 1.25rem; }
.nps-body .nps-contact-heading { text-align: center; padding-inline: .75rem; padding-bottom: 35px; }
@media (min-width: 1400px) and (max-width: 1600px) {
    .nps-body .nps-contact-heading { padding-bottom: 40px; }
}
.nps-body .nps-contact-heading .poshesh-heading { margin-bottom: 30px; }
.nps-body .nps-contact-heading .poshesh-heading-text { font-size: 3rem; font-weight: 300; }
.nps-body .nps-contact-heading .poshesh-heading-text { padding-top: .25rem; }
.nps-body .nps-contact-heading p { margin-bottom: 0; }
.nps-body .nps-contact-info .nps-contact-name .poshesh-widget-text p {
    color: var(--nps-secondary); font-size: 1.125rem; line-height: 1.5; margin-bottom: 1rem;
}
.nps-body .nps-contact-details p { margin-bottom: 10px; }
.nps-body .nps-contact-info .poshesh-widget-text a { color: inherit; }
.nps-body .nps-contact-info .poshesh-social { margin-top: 24px; gap: 4px; }
.nps-body .nps-contact-info .poshesh-social-link { width: 30px; height: 30px; font-size: 14px; border: 1px solid #808080; }
.nps-body .nps-contact-form .form-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nps-body .nps-contact-form .form-control {
    height: 41px; padding: 6px 12px; border: 1px solid #e4e4e4; border-radius: 4px;
    background: var(--pbx-background, #fff); color: var(--nps-text); font: 400 14px / 1.5 var(--nps-font); box-shadow: none;
}
.nps-body .nps-contact-form .form-control::placeholder { color: var(--nps-text); opacity: 1; }
.nps-body .nps-contact-form textarea.form-control { height: 160px; resize: vertical; }
.nps-body .nps-contact-form .form-control:focus { border-color: var(--nps-secondary); outline: 2px solid var(--nps-primary); outline-offset: 2px; }
.nps-body .nps-contact-form button[type="submit"] {
    display: block; width: 100%; padding: .8rem 2.25rem; border: 1px solid transparent; border-radius: 30px;
    background: linear-gradient(90deg, var(--nps-primary), var(--nps-secondary));
    color: var(--nps-on-dark); font-size: 15px; font-weight: 500; line-height: 15px;
}
@media (min-width: 992px) {
    .nps-body .nps-about-picture { margin-inline-start: 8.333333%; }
}
@media (max-width: 767.98px) {
    .nps-body .nps-about-intro .poshesh-heading-text,
    .nps-body .nps-company-profile .poshesh-heading-text,
    .nps-body .nps-clients-intro .poshesh-heading-text,
    .nps-body .nps-contact-heading .poshesh-heading-text { font-size: 2.5rem; }
    .nps-body .nps-about-copy > .poshesh-widget-text,
    .nps-body .nps-about-copy > .nps-about-vision { margin-inline-start: 0; }
    .nps-body .nps-about-picture { margin-top: 30px; }
    .nps-body .nps-about-picture img { max-width: 450px; margin-inline: auto; }
    .nps-body .nps-contact-info { text-align: center; }
    .nps-body .poshesh-section.nps-company-profile { padding-top: 100px; }
    .nps-body .poshesh-section.nps-clients-logos,
    .nps-body .poshesh-section.nps-contact-panel { padding-block: 6rem; }
}
@media (max-width: 575.98px) {
    .nps-body .nps-contact-form { order: 2; }
    .nps-body .nps-contact-info { order: 1; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .nps-body .nps-contact-form { width: 50%; order: 1; }
    .nps-body .nps-contact-info { width: 50%; order: 2; }
}

/* Use the reference's sliding gradient for every gradient-button renderer, including
   the native form. Explicit endpoints prevent core hover shorthands from resetting it. */
.nps-body :is(.poshesh-btn.poshesh-btn-primary, .poshesh-tabs-panel a[href$=".pdf"], .nps-contact-form button[type="submit"], .button.gradient-btn) {
    background-image: linear-gradient(to right,
        var(--nps-primary, #5192e1) 0%,
        var(--nps-secondary, #23ced5) 51%,
        var(--nps-primary, #5192e1) 100%);
    background-size: 200% auto;
    background-position: left center;
    transition: background-position .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;
}

.nps-body :is(.poshesh-btn.poshesh-btn-primary, .poshesh-tabs-panel a[href$=".pdf"], .nps-contact-form button[type="submit"], .button.gradient-btn):is(:hover, :focus-visible) {
    background-position: right center;
    color: var(--nps-on-dark, #fff);
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .nps-body :is(.poshesh-btn.poshesh-btn-primary, .poshesh-tabs-panel a[href$=".pdf"], .nps-contact-form button[type="submit"], .button.gradient-btn) {
        transition: none;
    }
}

/* ------------------------------------------------------------------ موبایل ---- */
/* Current reference content (2026-10-21). These classes belong to editable
   page-builder sections; no page text or media identity is embedded here. */
.nps-body .nps-product-listing .nps-listing-heading { margin-block: 3rem; }
.nps-body .nps-product-listing .poshesh-card { margin-bottom: 30px; }
.nps-body .nps-product-listing .poshesh-card .poshesh-card-media { aspect-ratio: auto; height: 237px; }
.nps-body .nps-product-listing .poshesh-card .poshesh-card-media img { height: 237px; object-fit: cover; }
.nps-body .nps-product-listing .nps-category-card .poshesh-card-media { aspect-ratio: 3 / 2; height: auto; }
.nps-body .nps-product-listing .nps-category-card .poshesh-card-media img { height: 100%; object-fit: contain; }
.nps-body .nps-catalyst-categories .poshesh-card .poshesh-card-media { aspect-ratio: 3 / 2; height: auto; }
.nps-body .nps-catalyst-categories .poshesh-card .poshesh-card-media img { height: 100%; object-fit: contain; }
.nps-body .nps-catalyst-categories::after { content: ""; display: block; height: 1.5em; }
.nps-body .nps-home-products .poshesh-card { margin-bottom: 30px; }
.nps-body .nps-home-products .poshesh-card .poshesh-card-media { aspect-ratio: auto; height: 362px; }
.nps-body .nps-home-products .poshesh-card .poshesh-card-media img { height: 362px; object-fit: fill; }
.nps-body .nps-home-products .poshesh-card .poshesh-card-text { margin-top: 0; }
.nps-body .nps-home-products .poshesh-card .poshesh-card-text p { margin: 0 0 1rem; }
.nps-body .nps-home-method .poshesh-heading { margin-bottom: 30px; }
.nps-body .nps-home-method .poshesh-heading-text { font-weight: 400; }
.nps-body .nps-home-method > .container > .row { align-items: center; }
.nps-body .nps-home-method .poshesh-widget-text { margin-bottom: 0; }
.nps-body .nps-home-method .poshesh-widget-text p { margin-bottom: 1rem; }
.nps-body .nps-home-method .poshesh-widget-text p.bottom20 { margin-bottom: 20px; }
.nps-body .nps-home-method .poshesh-widget-text p:last-child { margin-bottom: 20px; }
.nps-body .nps-home-method .poshesh-widget-text :is(span, mark) { font-size: 16px; line-height: inherit; }
.nps-body .nps-method-picture figcaption,
.nps-body .nps-about-picture figcaption { display: none; }
.nps-body .nps-home-method .poshesh-btn-wrap,
.nps-body .nps-about-current .poshesh-btn-wrap { margin-block-end: 0; }
.nps-body .nps-home-method .poshesh-btn-wrap { margin-inline-end: 0; }
.nps-body .nps-about-current-copy > .poshesh-widget-text { margin-bottom: max(1.5rem, 20px); }
.nps-body .nps-about-current-copy .poshesh-widget-text p { margin-bottom: 1rem; }
.nps-body .nps-about-current-copy .poshesh-widget-text p { margin-right: 30px; }
.nps-body .nps-about-current .poshesh-image { margin: 0; }
.nps-body .poshesh-section.nps-home-video {
    padding-block: calc(7.5rem + 45px);
    background: var(--nps-surface);
    font-family: Arial, Tahoma, sans-serif;
    text-align: center;
}
.nps-body .nps-home-video > .container { max-width: 1180px; padding-inline: 15px; }
.nps-body .nps-home-video > .container > .row { --bs-gutter-x: 0; }
.nps-body .nps-home-video .nps-video-eyebrow p {
    margin: 0 0 10px; color: var(--pbx-video-accent, #987c4a);
    font: 600 12px / 18px Arial, Tahoma, sans-serif; letter-spacing: 2px;
}
.nps-body .nps-home-video .poshesh-heading { margin: 0 0 12px; }
.nps-body .nps-home-video .poshesh-heading .poshesh-heading-text {
    margin: 0; color: var(--pbx-video-heading, #242d4f); font-size: 28px; font-weight: 600; line-height: 1.5;
}
.nps-body .nps-home-video .nps-video-description p {
    max-width: 720px; margin: 0 auto 25px; color: var(--pbx-video-text, #555);
    font: 400 14px / 1.9 Arial, Tahoma, sans-serif;
}
.nps-video-frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--pbx-video-background, #171b26); border-radius: 8px;
    border: 1px solid var(--pbx-border, #dfe3e6); box-shadow: 0 8px 28px rgba(36,45,79,.12);
}
.nps-video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--pbx-video-background, #171b26); }
.nps-body .poshesh-section.nps-solutions-current { padding-block: calc(7.5rem + 100px) 100px; }
.nps-body .nps-solutions-current > .container { max-width: 1200px; width: calc(100% - 48px); padding: 0; }
.nps-body .nps-solutions-current > .container > .row { margin: 0; --bs-gutter-x: 0; }
.nps-body .nps-solution-header { margin-bottom: 60px; text-align: center; }
.nps-body .nps-solution-label p {
    margin: 0 0 18px; font-size: 12px; font-weight: 600; line-height: 1.5;
    letter-spacing: 2.5px; color: var(--pbx-solutions-label, #777);
}
.nps-body .nps-solution-title h2 {
    max-width: 850px; margin: 0 auto 24px; font-size: clamp(36px,5vw,58px);
    font-weight: 500; line-height: 1.08; letter-spacing: -1.5px; color: var(--pbx-solutions-heading, #171717);
}
.nps-body .nps-solution-intro p {
    max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.8; color: var(--pbx-solutions-intro, #666);
}
.nps-body .nps-solution-card {
    min-height: 260px; padding: 38px 40px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;
    background: var(--pbx-background, #fff); transition: background-color .3s ease;
}
.nps-body .nps-solution-card:nth-child(2),
.nps-body .nps-solution-card:nth-child(3) { border-top: 1px solid #ddd; min-height: 261px; }
.nps-body .nps-solution-card:nth-child(2n) { border-left: 1px solid #ddd; }
.nps-body .nps-solution-card:hover { background: var(--pbx-solutions-hover, #f7f7f5); }
.nps-body .nps-solution-number p {
    margin: 0 0 55px; font-size: 12px; font-weight: 600; line-height: 1.5;
    letter-spacing: 1.5px; color: var(--pbx-solutions-number, #999);
}
.nps-body .nps-solution-card h3 {
    margin: 0 0 14px; font-size: 23px; font-weight: 500; line-height: 1.3; color: var(--pbx-solutions-title, #202020);
}
.nps-body .nps-solution-card > .poshesh-widget-text p {
    max-width: 460px; margin: 0; font-size: 15px; line-height: 1.75; color: var(--pbx-solutions-text, #707070);
}
.nps-body .nps-solution-footer { padding-top: 50px; text-align: right; }
.nps-body .nps-solution-footer p { margin: 0; font-size: inherit; line-height: inherit; }
@media (min-width: 992px) {
    .nps-body .nps-method-picture { margin-inline-start: 8.333333%; }
}
@media (max-width: 768px) {
    .nps-body .poshesh-section.nps-solutions-current { padding-block: calc(7.5rem + 75px) 75px; }
    .nps-body .nps-solutions-current > .container { width: calc(100% - 40px); }
    .nps-body .nps-solution-header { margin-bottom: 45px; }
    .nps-body .nps-solution-title h2 { font-size: 40px; }
    .nps-body .nps-solution-intro p { font-size: 16px; }
    .nps-body .nps-solution-card { min-height: 240px; padding: 30px; }
    .nps-body .nps-solution-number p { margin-bottom: 40px; }
}
@media (max-width: 767.98px) {
    .nps-body .poshesh-section.nps-home-video { padding-block: calc(6rem + 30px); }
    .nps-body .nps-home-video > .container { max-width: 100%; padding-inline: 12px; }
    .nps-body .nps-home-video .poshesh-heading .poshesh-heading-text { font-size: 22px; }
    .nps-body .nps-home-video .nps-video-description p { font-size: 13px; }
    .nps-video-frame { border-radius: 5px; }
}
@media (max-width: 600px) {
    .nps-body .poshesh-section.nps-solutions-current { padding-block: calc(6rem + 60px) 60px; }
    .nps-body .nps-solutions-current > .container { width: calc(100% - 36px); }
    .nps-body .nps-solution-title h2 { font-size: 34px; letter-spacing: -.8px; }
    .nps-body .nps-solution-intro p { font-size: 15px; line-height: 1.7; }
    .nps-body .nps-solution-card { width: 100%; min-height: auto; padding: 28px 24px 32px; border-left: 1px solid #ddd; }
    .nps-body .nps-solution-card:nth-child(2),
    .nps-body .nps-solution-card:nth-child(3) { min-height: auto; }
    .nps-body .nps-solution-card:nth-child(3) { border-top: 0; }
    .nps-body .nps-solution-number p { margin-bottom: 35px; }
    .nps-body .nps-solution-card h3 { font-size: 21px; }
    .nps-body .nps-solution-card > .poshesh-widget-text p { font-size: 14px; }
    .nps-body .nps-solution-footer { padding-top: 35px; text-align: left; }
}

@media (max-width: 767.98px) {
    .nps-body .nps-about-current .nps-about-picture { margin-top: 0; }
}
@media (max-width: 575.98px) {
    .nps-body .nps-about-current .nps-about-picture { margin-top: 1.5rem; }
    .nps-body .nps-about-current-copy { text-align: center; }
    .nps-body .nps-about-current-copy .poshesh-widget-text { text-align: start; }
    .nps-body .nps-home-method .poshesh-btn-wrap { margin-bottom: 1.5rem; }
    /* The source video section spans the viewport, outside Bootstrap's 98% container. */
    .nps-body .nps-home-video > .container { max-width: 100% !important; }
}
@media (max-width: 767.98px) {
    .nps-body .nps-shop-tabs .poshesh-tabs { margin-bottom: 2rem; }
    .nps-body .nps-projects-layout .poshesh-heading { margin-bottom: 2rem; }
}

@media (max-width: 1024px) {
    .nps-body h2,
    .nps-body .poshesh-heading .poshesh-heading-xl { font-size: 2.75rem; }
    .nps-body .nps-patents-collection .poshesh-heading .poshesh-heading-text { font-size: 2.75rem; }
    .nps-body .title-wrap h1,
    .nps-solutions .poshesh-card .poshesh-card-title { font-size: 1.375rem; }
    .nps-solutions .poshesh-card .poshesh-card-text h3 { font-size: 1.375rem; }
}
@media (max-width: 992px) {
    .nps-body h2,
    .nps-body .poshesh-heading .poshesh-heading-xl { font-size: 2.5rem; }
    .nps-body .nps-patents-collection .poshesh-heading .poshesh-heading-text { font-size: 2.5rem; }
    .nps-body .nps-projects-layout .poshesh-heading-subtitle { font-size: 13px; }
}
@media (min-width: 768px) {
    .nps-solutions .poshesh-card .poshesh-card-body { text-align: start; }
}
@media (max-width: 767.98px) {
    .nps-body .poshesh-section-xl {
        padding-block: 6rem;
    }
}