/* ==========================================================================
   کنترل دستی موقعیت شعار هیرو (موبایل و دسکتاپ)
   فقط اعداد را تغییر دهید — واحد پیکسل است.
   ========================================================================== */

:root {
  /* --- موبایل (عرض کمتر از 768px) --- */
  --slogan-mobile-x: -20px;   /* منفی = به چپ | مثبت = به راست */
  --slogan-mobile-y: 16px;    /* مثبت = پایین‌تر از لوگو (فاصله بیشتر) | منفی = بالاتر */
  --slogan-mobile-mt: 12px;   /* فاصلهٔ اضافه از بالا */

  /* --- تبلت و بالاتر --- */
  --slogan-desktop-x: 0px;
  --slogan-desktop-y: 0px;
  --slogan-desktop-mt: 0px;
}

/* اعمال روی رَپِر و خود تصویر شعار */
#hero-slogan-wrap,
#hero-slogan-nuri {
  transition: transform 0.25s ease, margin-top 0.25s ease;
}

/* موبایل */
@media (max-width: 767px) {
  #hero-slogan-wrap {
    margin-top: var(--slogan-mobile-mt) !important;
    transform: translate(var(--slogan-mobile-x), var(--slogan-mobile-y));
  }
  #hero-slogan-nuri {
    transform: none; /* فقط روی wrap اعمال می‌شود تا دوبل نشود */
  }
}

/* تبلت و دسکتاپ */
@media (min-width: 768px) {
  #hero-slogan-wrap {
    margin-top: var(--slogan-desktop-mt) !important;
    transform: translate(var(--slogan-desktop-x), var(--slogan-desktop-y));
  }
  #hero-slogan-nuri {
    transform: none;
  }
}