/*
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 * Template Name: Sasna - Multipurpose Business HTML Template   
 * Template URI: https://thememarch.com/demo/html/sasna/
 * Description: Sasna is a multipurpose business HTML template which comes with the unique and clean design. It helps you to create a beautiful multipurpose business HTML website. It has also e-commerce support. E-commerce pages are included on this template.
 * Author: Thememarch
 * Author URI: https://thememarch.com
 * Version: 2.5
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */

/* ✅ رفع باگ کنتراست: برچسب زیر عدد در بخش آمار مشتریان صفحه اصلی
   (رنگ پیش‌فرض .h5 خاکستری تیره است و روی پس‌زمینه مشکی funfact-area دیده نمی‌شود) */
.funfact-area .tm-funfact-content p.h5 {
    color: #ffffff;
}

/* =========================================================================
   ✅ ENTERPRISE DESIGN SYSTEM LAYER (فاز Enterprise Transformation)
   این فایل به‌عمد جدا از style.css/plugins.css اصلی قالب نگه داشته شده تا:
   - هیچ فایل حجیم قالب دست‌کاری نشود (ریسک شکستن استایل‌های دیگر کم شود)
   - همه Override ها یک‌جا و قابل‌ردیابی باشند
   رنگ پایه برند (#1cb9c8) مستقیماً از style.css موجود استخراج شده — هیچ رنگ
   جدید/تصادفی اضافه نشده، طبق قانون پروژه «Avoid random colors».
   ========================================================================= */

:root {
  --aria-primary: #1cb9c8;
  --aria-primary-dark: #159aa7;
  --aria-ink: #333333;
  --aria-ink-soft: #444444;
  --aria-border: #e7e9ec;
  --aria-radius: 8px;
  --aria-radius-sm: 6px;
}

/* خوانایی بهتر تایپوگرافی فارسی در همه مرورگرها */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* انتقال نرم رنگ لینک‌های منو/هدر به‌جای تغییر ناگهانی رنگ */
.tm-navigation ul li a,
.header-topinfo ul li a,
.header-topsocial ul li a,
.header-icons ul li a {
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.15s ease-in-out;
}

/* ---------------------------------------------------------------------
   CTA اصلی هدر: «خرید CRM» — قبلاً فقط یک متن ساده بدون هیچ برجستگی بصری
   بود (مثل بقیه لینک‌های منو)؛ اکنون به یک دکمه واقعی و قابل‌شناسایی
   تبدیل شده — الگوی استاندارد هدر سایت‌های نرم‌افزاری/SaaS.
   --------------------------------------------------------------------- */
.header-icons {
  display: flex;
  align-items: center;
}

.header-icons ul li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--aria-primary);
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--aria-radius-sm);
  line-height: 1.2;
}

.header-icons ul li a:hover {
  background: var(--aria-primary-dark);
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(28, 185, 200, 0.28);
  transform: translateY(-1px);
}

.header-icons ul li a i {
  font-size: 16px;
}

/* ---------------------------------------------------------------------
   CTA ثانویه: «دمو رایگان» — قبلاً دقیقاً شبیه یک آیتم عادی منو بود
   (بدون هیچ تمایز از «خانه»/«امکانات»)؛ اکنون به دکمه Outline با رنگ برند
   تبدیل شده تا در کنار CTA اصلی («خرید CRM») سلسله‌مراتب درست دیده شود.
   --------------------------------------------------------------------- */
.tm-navigation ul li.free-demo {
  margin: 0 6px;
}

.tm-navigation ul li.free-demo > a {
  padding: 9px 20px !important;
  border: 1.5px solid var(--aria-primary);
  border-radius: var(--aria-radius-sm);
  color: var(--aria-primary) !important;
  font-weight: 600;
}

.tm-navigation ul li.free-demo > a:hover {
  background: var(--aria-primary);
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------
   منوی کشویی (Dropdown) — وضوح بیشتر: سایه نرم‌تر و خط لبه با رنگ برند
   به‌جای خط خاکستری عمومی قالب، هماهنگ با هویت بصری آریا.
   --------------------------------------------------------------------- */
.tm-navigation .tm-navigation-dropdown > ul {
  border-bottom: 3px solid var(--aria-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* داخل مگامنو: فقط ستون‌بندی و جداکننده، بدون سایه/خط اضافه روی هر زیرلیست */
.tm-navigation-megamenu ul ul {
  box-shadow: none;
  border-bottom: none;
}

/* هدر: سایه بسیار ملایم زیر نوار پایین هدر برای عمق بصری بیشتر در حالت غیرچسبان هم */
.header-bottomarea {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* مگامنوی «امکانات»: عنوان هر ستون فقط برچسب گروه‌بندی است، نه لینک واقعی */
.tm-navigation-megamenu > ul > li > a {
  cursor: default;
}

/* =========================================================================
   ✅ فاز دوم Enterprise Transformation — بخش‌های اصلی صفحه اول
   ========================================================================= */

/* رفع typo قدیمی در HTML: کلاس «grey-bg» (برعکس bg-grey واقعی قالب) هرگز
   تعریف نشده بود، یعنی ۴ بخش معرفی محصول زیر هیچ‌وقت پس‌زمینه متناوب
   نگرفته بودند. اینجا دقیقاً با رنگ خاکستری رسمی قالب (bg-grey) یکسان شد. */
.grey-bg {
  background: #f5f5f5;
}

/* بخش تیتر متحرک «نرم افزار آریا یک ...» - قبلاً بدون هیچ container/فاصله‌ای
   بود (فقط br br خام)؛ اکنون یک بخش استاندارد با فاصله‌گذاری هماهنگ با بقیه
   سایت است. */
.typed-heading-area {
  padding: 50px 0 20px;
}

.typed-heading-area h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--aria-ink);
  line-height: 1.5;
}

.typed-heading-area #typed2 {
  color: var(--aria-primary);
}

/* ---------------------------------------------------------------------
   بخش‌های معرفی محصول (کارتابل، پرونده الکترونیک، پرتال مشتریان، مدیریت
   پروژه) — این ۴ بخش با کلاس‌های سفارشی (overview-section, std-box,
   font-alt, p-50px-l/r, ...) نوشته شده بودند که در style.css/plugins.css
   قالب اصلاً تعریف نشده بودند؛ یعنی این بخش‌ها با «صفر فاصله‌گذاری» و
   بدون هیچ سبک تایپوگرافی رندر می‌شدند. این بخش دقیقاً همان کلاس‌ها را
   با یک ظاهر حرفه‌ای و هماهنگ با بقیه سیستم طراحی تعریف می‌کند.
   --------------------------------------------------------------------- */
.overview-section {
  padding: 80px 0;
}

.overview-section .title-section {
  margin-bottom: 20px;
}

.overview-section .title-section h3.font-alt {
  position: relative;
  padding-right: 18px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--aria-ink);
}

.overview-section .title-section h3.font-alt::before {
  content: '';
  position: absolute;
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: var(--aria-primary);
}

.overview-section p {
  color: #5a5f66;
  font-size: 15.5px;
  line-height: 1.95;
  margin-bottom: 16px;
}

.overview-section img.img-shadow {
  max-width: 100%;
  height: auto;
  border-radius: var(--aria-radius);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.09);
}

.overview-section .tm-button {
  margin-top: 8px;
}

.overview-section .a-center {
  text-align: center;
}

.overview-section .p-50px-l {
  padding-right: 50px;
}

.overview-section .p-50px-r {
  padding-left: 50px;
}

@media only screen and (max-width: 767px) {
  .overview-section {
    padding: 45px 0;
  }
  .overview-section .p-50px-l,
  .overview-section .md-p-0px-l {
    padding-right: 0;
  }
  .overview-section .p-50px-r,
  .overview-section .md-p-0px-r {
    padding-left: 0;
  }
  .overview-section .sm-m-30px-t {
    margin-top: 25px;
  }
  .overview-section .sm-m-30px-b {
    margin-bottom: 25px;
  }
}

/* ---------------------------------------------------------------------
   فوتر: خط ظریف بالای فوتر برای جداسازی بصری از محتوای اصلی + لینک‌های
   نرم‌تر روی هاور (هماهنگ با بقیه سایت).
   --------------------------------------------------------------------- */
.footer {
  border-top: 3px solid var(--aria-primary);
}

.widget-contact ul li a,
.widget-recentpost-content a {
  transition: color 0.2s ease-in-out;
}

/* =========================================================================
   ✅ فاز سوم Enterprise Transformation — صفحات demo.php و about-us.php
   ========================================================================= */

/* لیست چک‌مارک بالای فرم دمو - کمی جمع‌وجورتر از stylish-list معمولی چون
   داخل یک تیتر متمرکز (text-center) استفاده شده */
.demo-intro-list {
  display: inline-block;
  text-align: right;
  margin-top: 10px;
}

/* جعبه اطلاعات ورود دمو پرتال مشتریان - خواناتر از متن خام قبلی */
.demo-credential {
  margin-bottom: 6px;
  font-size: 15px;
}

/* ---------------------------------------------------------------------
   کامپوننت مشترک «نکته/توجه» — قالب اصلی هیچ کامپوننت Alert/Notice
   نداشت؛ این یک کامپوننت ساده و قابل‌استفاده مجدد در کل سایت است
   (رنگ خاکستری روشن + خط برند، بدون رنگ جدید طبق قانون پروژه).
   --------------------------------------------------------------------- */
.aria-notice {
  background: #f5f5f5;
  border-right: 4px solid var(--aria-primary);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 14px 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: #4a4a4a;
}

/* =========================================================================
   ✅ فاز چهارم Enterprise Transformation — صفحه plans.php (خرید/قیمت‌گذاری)
   ========================================================================= */

/* متن معرفی قیمت‌گذاری بالای جدول پلن‌ها - عرض محدود برای خوانایی بهتر
   پاراگراف‌های بلند (قبلاً به عرض کامل کانتینر کشیده می‌شد) */
.plans-intro-text h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--aria-ink);
  margin-bottom: 14px;
}

.plans-intro-text h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--aria-ink);
  margin-top: 26px;
  margin-bottom: 12px;
}

.plans-intro-text p {
  color: #5a5f66;
  font-size: 15.5px;
  line-height: 1.95;
}

/* جدول مقایسه پلن‌ها: چون هر ۳ پلن اکنون در یک row هستند، ستون‌های
   Bootstrap به‌صورت پیش‌فرض هم‌ارتفاع می‌شوند؛ اینجا فقط فاصله‌گذاری
   عمودی بین کارت‌ها در حالت موبایل/تبلت هماهنگ‌تر می‌شود. */
.pricing-row {
  align-items: stretch;
}

.pricing-row .tm-pricebox {
  height: 100%;
}

/* دکمه «مشاهده امکانات» زیر جدول قیمت - قبلاً به‌اشتباه داخل row کارت‌های
   قیمت بود (ساختار HTML نامعتبر)؛ اکنون در ردیف/کانتینر مستقل خودش است. */
.plans-features-cta {
  margin-top: 10px;
}