/* =====================================================================
   site.css — Public site stylesheet (Laravel/Blade, no build step)
   ---------------------------------------------------------------------
   Single-file conversion of 16 Next.js CSS-module files:
   app/globals.css (base) + components/*.module.css (15 modules).
   Class prefixes follow the binding "CSS Class Naming Contract"
   in /home/z/my-project/worklog.md.
   Loaded by public site pages ONLY (admin pages load admin.css).
   Vendor: Font Awesome 5.15.4 + Swiper 11 (local, public/assets/vendor).
   ===================================================================== */

/* ===== @font-face (Lahzeh «لحظه» — public/fonts/) =====
   خانواده فونت Lahzeh Pro 2.0 — ۹ وزن استاندارد (بدون واریانت‌های Stretch).
   متن انگلیسی برند-تایتل هدر («GUARDIAN TO YOUR GLORY») از وزن Light (۳۰۰) استفاده می‌کند. */
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===== :root variables — FARBAN theme (سند طراحی FARBAN SITE 1.pdf) =====
   پالت رنگی بر اساس طرح گرافیکی:
   سبز تیره‌ی برند #0b392f | سبز دوم #20514b | کرم #e4ddc0 / #e3dab9
   برنز (رنگ تأکید) #b9744a | برنز روشن #d9a276 | سفید #ffffff */
:root {
  --black-color : #0b392f;
  --text-color : #0b392f;
  --red-color : #b9744a;

  --back-color-1 : #ffffff;
  --back-color-2 : #ffffff;

  --line-color : #d8d0b0;
  --description-color : #5c6660;
  --description-color-2 : #98a29b;

  --menu-color : #0b392f;

  --item-color : #e4ddc0;
  --item-color-hover : #d8d0b0;

  --item-color-2 : #e4ddc0;

  --itembox-shadow : #b9744a40;

  --tag-color : #20514b;
  --success-color : #20514b;

  --black-transparent-color : #0b392fcc;
  --white-transparent-color : #b9744a26;
}

/* ===== Global base styles (adapted from globals.css) ===== */
* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: var(--total-header-height, 120px); }
body {
  font-family: 'Lahzeh', Tahoma, sans-serif;
  background-color: var(--back-color-1);
  color: var(--text-color);

  /* گارد سرریز افقی: هرگز اجازه ندهیم محتوا از عرض صفحه بیرون بزند (نوار سفید کنار
     صفحه در حالت افقی). clip برخلاف hidden اسکرول‌کانتینر نمی‌سازد و به همین دلیل
     position:sticky هدر و قفل‌اسکرول منوی موبایل (overflow روی body از JS) سالم می‌مانند. */
  overflow-x: clip;
}

/* ===== Swiper overrides (verbatim from globals.css) ===== */
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

.swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  margin-top: 40px !important;

  direction: ltr !important;

  display: flex;
  justify-content: center;

  flex-direction: row-reverse;

  gap: 8px;
}

.swiper-pagination-bullet {
  background-color: var(--text-color) !important;
  width: 10px !important;
  height: 10px !important;
  opacity: 0.5;
  display: inline-block;
  direction: rtl !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--red-color) !important;
  opacity: 1;
}

@media (max-height: 500px) and (max-width: 900px) {
  .swiper-pagination {
    margin-top: 25px !important;
  }
}

/* ===== NProgress (verbatim from globals.css; kept per worklog contract —
       inert unless an #nprogress element exists) ===== */
#nprogress .bar {
  background: var(--red-color) !important;
  height: 3px !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--red-color), 0 0 5px var(--red-color) !important;
}

#nprogress .spinner-icon {
  border-top-color: var(--red-color) !important;
  border-left-color: var(--red-color) !important;
}

/* =====================================================================
   Section modules (converted from CSS modules, prefixed class names)
   ===================================================================== */

/* ===== GlobalStyle ===== */
/* عنوان بخش‌ها (مطابق سند طراحی و تصویر مرجع): متن برنز در مرکز و دو خط نازک
   کرم‌رنگ در دو سمتش. طول خط‌ها ثابت و کوتاه است (نه تمام‌عرض) و از سمت متن
   به سمت بیرون «روفته‌رفته» محو می‌شود (گرادیان). */
.gs-title {
  /* عنوان بخش‌ها: برنز (مطابق سند طراحی) */
  color: var(--red-color);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 24px);

  font-size: 2.5rem;
  margin-bottom: 40px;
  font-weight: bold;

  /* Title always stays on ONE line (user request): it never wraps to two lines;
     when it cannot fit, site.js (initTitleFit) shrinks its font size instead. */
  white-space: nowrap;
}

/* Decorative lines beside section titles (user: previous 8vw/110px cap was
   "too short" - now noticeably longer): 15vw with 48px floor and 220px cap.
   flex-shrink stays 0: the line length remains EXACTLY the same in every
   section at any given width; an overlong title shrinks its own font
   (initTitleFit) - the lines are never sacrificed and never cause overflow. */
.gs-title::before,
.gs-title::after {
  content: '';
  flex: 0 0 clamp(48px, 15vw, 220px);
  height: 2px;
  border-radius: 1px;
}

/* ::before در RTL سمت «راست» متن است: لبه‌ی داخلی (چپِ خط، کنار متن) پررنگ
   و به سمت بیرون (راست) محو می‌شود. */
.gs-title::before {
  background: linear-gradient(to right, var(--line-color), transparent);
}

/* ::after سمت «چپ» متن است: پررنگ کنار متن و محو به سمت چپِ بیرونی. */
.gs-title::after {
  background: linear-gradient(to left, var(--line-color), transparent);
}

@media (max-width: 768px) {
  /* موبایل: فاصله‌ی خط تا متن کمی بازتر می‌ماند (طول خط خودش با clamp کوچک می‌شود) */
  .gs-title {
    gap: 14px;
  }
}

.gs-description {
  color: var(--description-color);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

@media (max-height: 500px) and (max-width: 900px) {
  .gs-title { font-size: 1.8rem; margin-bottom: 25px; }
}

/* ===== Preloader ===== */
.pl-preloader {
  background-color: var(--back-color-1);

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  will-change: opacity;
}

.pl-preloader.pl-hidden {
  opacity: 0;
  visibility: hidden;
}

.pl-spinner {
  border: 5px solid var(--line-color);
  border-top: 5px solid var(--red-color);

  width: 50px;
  height: 50px;

  border-radius: 50%;
  margin-bottom: 1rem;
  will-change: transform;
  animation: spin 1s linear infinite;
}

.pl-text {
  color: var(--description-color);
  font-size: 1rem;
  font-weight: 500;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===== Topbar ===== */
.tb-bar {
  --topbar-height: 50px;

  background-color: var(--black-color);
  /* نوار بالای صفحه سبز تیره است؛ متن باید کرم باشد نه سبز */
  color: #e4ddc0;

  height: 50px;
  padding: 0 20px;
  font-size: 0.9rem;
  margin: 0;
}

.tb-sticky {
  position: sticky;
  top: 0;
  z-index: 999;
}

.tb-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tb-contact-info {
  display: flex;
  gap: 25px;
}

.tb-contact-item {
  color: #e4ddc0;

  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.tb-contact-item:hover {
  color: #d9a276;
}

@media (max-width: 768px) {
  .tb-bar {
    padding: 8px 15px;
    --topbar-height: calc(8px + 8px + 0.9rem * 1.2);
  }

  .tb-container {
    justify-content: center;
  }

  .tb-contact-item span:first-child {
    display: none;
  }
}

/* ===== Topbar2 (main header + nav + mobile drawer) ===== */
.hd-header {
  /* هدر سفید با متن برنز (مطابق سند طراحی) */
  background-color: #ffffff;
  color: #0b392f;
  border-bottom: 1px solid #d8d0b0;

  padding: 15px 20px;
}

.hd-sticky {
  position: sticky;
  top: var(--topbar-height, 50px);
  z-index: 1000;
}

.hd-nav {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* لوگوی برند (سمت راست هدر — مطابق سند طراحی) */
.hd-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.hd-logo img {
  display: block;
  height: 54px;
  width: auto;
}

/* گروه شروع ردیف (منتهی‌الیه راست در RTL): همبرگری + لوگو کنار هم.
   در دسکتاپ همبرگری hidden است و گروه فقط لوگو را نشان می‌دهد. */
.hd-start {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* «یکم فاصله» بین منوی همبرگری و لوگو در موبایل */
  flex-shrink: 0;
}

/* گروه سمت چپ هدر: برند-تایتل (لوگو و همبرگری در گروه «شروع» ردیف هستند) */
.hd-nav-end {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* برند-تایتل (لوگوتایپ «FARBAN / GUARDIAN TO YOUR GLORY» — سمت چپ هدر).
   SVG به‌صورت درون‌خطی (inline) در Blade رندر می‌شود تا متن انگلیسی آن بتواند از
   فونت Lahzeh (وزن Light ۳۰۰) که در همین صفحه بارگذاری شده استفاده کند. */
.hd-brand-title {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.hd-brand-title svg {
  display: block;
  height: 30px;
  width: auto;
}

.hd-desktop-nav {
  display: flex;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;

  /* ایمنی: منو هرگز از عرض ظرف خود بیرون نزند (در بدترین حالت داخل نوار قرمز می‌شکند، نه صفحه) */
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 0;
}

.hd-hamburger-btn {
  color: var(--text-color);

  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
}

.hd-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.hd-mobile-menu.hd-open {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.3s ease;
}

.hd-overlay {
  background-color: var(--black-transparent-color);

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hd-drawer {
  background-color: var(--menu-color);

  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 80%;
  height: 100%;
  padding: 20px;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;

  /* در حالت افقی گوشی ارتفاع کم است؛ لیست بلند منو باید داخل کشو اسکرول شود */
  overflow-y: auto;
}

.hd-mobile-menu.hd-open .hd-drawer {
  transform: translateX(0);
}

.hd-drawer-header {
  /* هدر کشو روی پس‌زمینه سبز تیره: متن کرم */
  color: #e4ddc0;

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2a5a50;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.hd-drawer-header span {
   font-weight: bold;
   font-size: 1.2rem;
}

.hd-drawer-header button {
  color: #e4ddc0;

  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.hd-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hd-nav-link {
  /* لینک‌های منوی دسکتاپ: برنز روی هدر سفید */
  color: #b9744a;

  display: block;
  padding: 15px 10px;
  text-decoration: none;
  font-size: 1.1rem;
  border-radius: 5px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hd-nav-link:hover {
  background-color: #f2eedf;
  color: #b4673b;
}

/* لینک‌های داخل کشوی موبایل (پس‌زمینه سبز تیره): متن کرم */
.hd-nav-list .hd-nav-link {
  color: #e4ddc0;
}

.hd-nav-list .hd-nav-link:hover {
  background-color: #b9744a;
  color: #ffffff;
}

/* نقطه عوض شدن منو: منوی دسکتاپ (۱۰ آیتم با گپ ۴۰px) به خودی خود حدود ~۱۰۰۰px
   عرض می‌خواهد و حالا لوگوی راست + برند-تایتل چپ (~۲۶۵px) هم به هدر اضافه شده‌اند؛
   بنابراین در عرض‌های کمتر از ۱۳۰۰px منوی همبرگری/کشویی نمایش داده می‌شود تا
   نه متن‌ها دوخطی شوند و نه هدر از عرض محتوا بیرون بزند (ادامه‌ی رفع مشکل ۷۷۰ تا ۱۱۰۰). */
@media (max-width: 1299.98px) {
  .hd-desktop-nav {
    display: none;
  }
  .hd-hamburger-btn {
    display: block;
  }
  /* در حالت موبایل/تبلت لوگوها کمی کوچک‌تر می‌شوند تا کنار همبرگر جا شوند */
  .hd-logo img {
    height: 44px;
  }
  .hd-brand-title svg {
    height: 24px;
  }
}

/* در بازه ۱۳۰۰ تا ۱۴۰۰ منوی دسکتاپ و لوگوها فشرده‌تر می‌شوند تا حتی با عنوان‌های
   بلندِ دلخواه (قابل ویرایش از پنل مدیریت) در یک خط جا شوند. */
@media (min-width: 1300px) and (max-width: 1400px) {
  .hd-desktop-nav {
    gap: 16px;
  }
  .hd-desktop-nav .hd-nav-link {
    font-size: 0.95rem;
    padding: 15px 6px;
  }
  .hd-logo img {
    height: 46px;
  }
  .hd-brand-title svg {
    height: 26px;
  }
}

/* در بازه ۱۴۰۰ تا ۱۵۰۰ فاصله‌ها کمی بازتر می‌شوند */
@media (min-width: 1400.02px) and (max-width: 1500px) {
  .hd-desktop-nav {
    gap: 20px;
  }
  .hd-desktop-nav .hd-nav-link {
    font-size: 1rem;
    padding: 15px 8px;
  }
  .hd-logo img {
    height: 50px;
  }
  .hd-brand-title svg {
    height: 28px;
  }
}

/* ≥۱۵۰۰: ظرف هدر کمی عریض‌تر (۱۳۲۰px) می‌شود تا لوگو + ۱۰ آیتم منو + برند-تایتل
   با فونت Lahzeh (گلیف‌های فارسی‌اش از وزیرمتن ~۱۳٪ عریض‌تر است) در یک خط جا شوند.
   محتوای بخش‌ها همان ۱۲۰۰px می‌ماند؛ هدر به‌عنوان نوار مستقل تراز بصری خود را حفظ می‌کند. */
@media (min-width: 1500.02px) {
  .hd-nav {
    max-width: 1320px;
  }
  .hd-desktop-nav {
    gap: 20px;
  }
  .hd-desktop-nav .hd-nav-link {
    font-size: 1.05rem;
    padding: 15px 8px;
  }
  .hd-logo img {
    height: 50px;
  }
  .hd-brand-title svg {
    height: 28px;
  }
}

/* گارد JS (initNavFitGuard در site.js): اگر عنوان‌های منو با وجود همه‌ی فشردگی‌ها
   در یک خط جا نشوند (عنوان‌های خیلی بلندِ دلخواه از پنل مدیریت)، هدر به حالت
   منوی همبرگری می‌رود تا منو هیچ‌وقت دوخطی نشود و از عرض محتوا بیرون نزند. */
.hd-header.hd-nav-overflow .hd-desktop-nav {
  display: none;
}
.hd-header.hd-nav-overflow .hd-hamburger-btn {
  display: block;
}

/* در گوشی‌های باریک لوگو و برند-تایتل کوچک‌تر می‌شوند تا در یک ردیف بمانند */
@media (max-width: 400px) {
  .hd-logo img {
    height: 38px;
  }
  .hd-brand-title svg {
    height: 20px;
  }
}

/* ===== HeroSection ===== */
.hero-section {
  /* بخش معرفی: کرم (مطابق سند طراحی) */
  background-color: #e3dab9;

  padding: 40px 20px;
  min-height: 40vh;
  display: flex;
  align-items: center;

  position: relative;

  /* Floating rounded card (user request): on desktop 40px inset from
     top/left/right edges and a 45px corner radius. Tablet and mobile get
     proportionate values in the media blocks below. */
  margin: 40px 40px;
  border-radius: 45px;
  /* The cover background-image and the dark ::before overlay get clipped
     exactly to the rounded corners. */
  overflow: hidden;
}

.hero-with-bg {
  background-image: var(--hero-bg-image);

  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

.hero-with-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: var(--black-transparent-color);

  z-index: 1;
}

/* وقتی تصویر پس‌زمینه دارد، بخش معرفی تیره است؛ متن‌ها باید روشن باشند */
.hero-with-bg .hero-title {
  color: #d9a276;
}

.hero-with-bg .hero-description {
  color: #c6ccc6;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;

  position: relative;
  z-index: 2;
}

.hero-text {
  flex: 1;
  max-width: 50%;
  text-align: center;
}

.hero-title {
  /* تیتر معرفی: برنز تیره روی کرم (مطابق سند طراحی) */
  color: #b4673b;

  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 20px;

  /* Hero title also always stays on ONE line (user request); when it cannot
     fit, initTitleFit (site.js) shrinks its font size instead of wrapping. */
  white-space: nowrap;
}

.hero-title::after {
  background-color: var(--red-color);

  content: '';
  position: absolute;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);

  width: 200px;
  height: 5px;
  border-radius: 3px;
}

.hero-description {
  color: var(--description-color);

  font-size: 1.2rem;
  line-height: 1.8;
  /* جاستیفای با خط آخر راست‌چین — در «هر حالت» (دسکتاپ و موبایل)، مثل توضیح بخش دانلود اپ.
     ارتفاع ثابت (۴ خط) حذف شد: متن بلند کادر را به‌طور طبیعی بزرگ می‌کند و هرگز
     زیر لبه‌ی گردِ کارت (overflow:hidden) مخفی نمی‌شود و به لبه نمی‌چسبد. */
  text-align: justify;
  text-align-last: right;
}

.hero-image-container {
  flex: 1;
  max-width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  /* box-shadow: 0 10px 30px var(--white-transparent-color); */
}

/* دسکتاپ (جدول به بالا): تصویر سمت «راست» و متن سمت «چپ» (جابه‌جایی طبق درخواست).
   row-reverse در RTL یعنی اولین آیتم (hero-text) به انتهای چپ می‌رود. */
@media (min-width: 769px) {
  .hero-container {
    flex-direction: row-reverse;
  }
}

/* Tablet (2nd of the "three modes"): proportionate inset + radius */
@media (min-width: 769px) and (max-width: 1023px) {
  .hero-section {
    margin: 24px 24px;
    border-radius: 32px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 40px 20px;
    min-height: auto;

    /* Mobile (3rd mode): smaller inset + radius keeps the useful width high */
    margin: 16px 16px;
    border-radius: 24px;
  }

  .hero-with-bg {
    background-image: none;
    background-attachment: scroll;
  }

  /* در موبایل تصویر پس‌زمینه حذف می‌شود؛ پس لایه‌ی تیره‌ی روی آن هم باید حذف شود
     تا پس‌زمینه کرم (مطابق حالت بدون عکس در دیتابیس) دیده شود. */
  .hero-with-bg::before {
    content: none;
  }

  /* بدون تصویر پس‌زمینه، متن‌ها رنگ حالت روشن (کرم) را می‌گیرند */
  .hero-with-bg .hero-title {
    color: #b4673b;
  }
  .hero-with-bg .hero-description {
    color: var(--description-color);
  }

  .hero-container {
    flex-direction: column-reverse;
    text-align: center;
    /* Hard cap: with white-space:nowrap the hero title's min-content would
       otherwise let the whole chain grow wider than the card (title clipped
       by overflow:hidden). Capping the container keeps a fixed measuring box,
       so initTitleFit correctly shrinks the title to fit one line. */
    max-width: 100%;
  }

  .hero-text,
  .hero-image-container {
    max-width: 100%;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-description {
    font-size: 1rem;
    /* توضیحات در موبایل هم راست‌چین + جاستیفای می‌ماند (حالت center حذف شد) */
  }
}

/* ===== ServicesSection ===== */
.svc-section {
  background-color: var(--back-color-2);

  width: 100%;
  padding: 20px;
  text-align: center;
}

.svc-card {
  /* background-color: var(--item-color); */
  /* border: 2px solid var(--red-color); */

  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* عنوان همیشه بالای کارت شروع می‌شود (درخواست کاربر): قبلاً وسط‌چین بود
     و با توضیحات کوتاه، عنوان وسط کادر می‌افتاد. */
  justify-content: flex-start;
  transition: background-color 0.3s ease, transform 0.3s ease;

  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.svc-card:hover {
  background-color: var(--item-color-hover);

  transform: translateY(-10px);
}

.svc-card-title {
  /* عنوان کارت خدمات: سبز تیره (مطابق سند: تیترهای تیره) */
  color: #0b392f;

  font-size: 1.6rem;
  margin-bottom: 20px;

  /* تک‌خطی (درخواست کاربر): اگر طولانی بود initTitleFit (site.js)
     فونتش را کوچک می‌کند، هرگز دوخطی نمی‌شود. max-width برای درست
     سنجیده‌شدن scrollWidth در جعبه‌ی فلکس لازم است. */
  white-space: nowrap;
  max-width: 100%;
}

.svc-card-desc {
  color: var(--description-color);

  font-size: 0.95rem;
  line-height: 1.7;
  text-align: center;
}

.svc-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.svc-grid > * {
  flex-grow: 1;
}

/* slider */
.svc-slider {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
}

.svc-swiper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px !important;
}

.svc-swiper-next,
.svc-swiper-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: var(--black-transparent-color);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.svc-swiper-next:hover,
.svc-swiper-prev:hover {
  background-color: var(--red-color);
}

.svc-swiper-prev { left: 0px; }
.svc-swiper-next { right: 0px; }
.svc-swiper-next::after,
.svc-swiper-prev::after {
  font-family: 'swiper-icons';
  font-size: 20px;
  /* آیکون داخل دایره سبز تیره: کرم */
  color: #e4ddc0;
}
.svc-swiper-prev::after { content: 'prev'; }
.svc-swiper-next::after { content: 'next'; }
.svc-swiper-prev.swiper-button-disabled,
.svc-swiper-next.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: auto !important;
  pointer-events: none !important;
}
.svc-swiper-prev.swiper-button-disabled:hover,
.svc-swiper-next.swiper-button-disabled:hover {
  background-color: var(--black-transparent-color) !important;
}

@media (max-height: 500px) and (max-width: 900px) {
  .svc-section { padding: 15px; }
  .svc-card { padding: 15px; max-width: 300px;}
  .svc-card-title { font-size: 1.5rem; }
  .svc-card-desc { font-size: 0.9rem; }

  .svc-swiper-next, .svc-swiper-prev { width: 40px; height: 40px; top: 45%; }
  .svc-slider { max-width: 100%; padding: 0 45px; }
}

/* ===== CoachesSection ===== */
/* درگ روان اسلایدر مربیان با ماوس دسکتاپ: جلوگیری از drag شدن طبیعی عکس‌ها
   (در غیر این صورت مرورگر عکس را می‌کشد و سوایپ ناتمام می‌ماند) */
.co-swiper .co-card,
.co-swiper .co-image {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.co-section {
  background-color: var(--back-color-1);

  width: 100%;
  padding: 20px;
  text-align: center;
}

.co-card {
  /* background-color: var(--item-color-2); */
  /* نام مربی: سبز تیره (مطابق سند: نام‌ها تیره) */
  color: #0b392f;

  border-radius: 15px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.co-card:hover {
  box-shadow: 0 10px 20px var(--itembox-shadow);

  transform: translateY(-10px);
}

.co-image {
  display: block;
  width: 150px;
  height: 200px;
  margin: 0 auto 20px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center top;
  /* border: 3px solid var(--red-color); */
}

.co-card-title {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.co-card-desc {
  /* تخصص مربی: نارنجی/برنز سایت (مطابق سند طراحی و درخواست کاربر) */
  color: var(--red-color);

  font-size: 1rem;
}

.co-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.co-grid > * {
  flex-basis: 280px;
  flex-grow: 0;
}

/* slider */
.co-slider {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
}

.co-swiper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px !important;
}

.co-swiper-next,
.co-swiper-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: var(--black-transparent-color);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.co-swiper-next:hover,
.co-swiper-prev:hover {
  background-color: var(--red-color);
}

.co-swiper-prev { left: 0px; }
.co-swiper-next { right: 0px; }
.co-swiper-next::after,
.co-swiper-prev::after {
  font-family: 'swiper-icons';
  font-size: 20px;
  /* آیکون داخل دایره سبز تیره: کرم */
  color: #e4ddc0;
}
.co-swiper-prev::after { content: 'prev'; }
.co-swiper-next::after { content: 'next'; }
.co-swiper-prev.swiper-button-disabled,
.co-swiper-next.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: auto !important;
  pointer-events: none !important;
}
.co-swiper-prev.swiper-button-disabled:hover,
.co-swiper-next.swiper-button-disabled:hover {
  background-color: var(--black-transparent-color) !important;
}

@media (max-height: 500px) and (max-width: 900px) {
  .co-section { padding: 15px; }
  .co-card { padding: 15px; }
  .co-image { width: 100px; height: 160px; margin-bottom: 15px; }
  .co-card-title { font-size: 1.2rem; }
  .co-card-desc { font-size: 0.9rem; }

  .co-swiper-next, .co-swiper-prev { width: 40px; height: 40px; top: 45%; }
  .co-slider { max-width: 100%; padding: 0 45px; }
}

/* حالت سه‌تایی (≥۱۰۲۴px): مربی وسطی بزرگ‌تر از کناری‌ها — مطابق پیش‌نمایش سند طراحی.
   فقط وقتی سه مربی در یک ردیف دیده می‌شوند اعمال می‌شود؛ در موبایل/تبلت
   (۱ یا ۲ کارت) همه هم‌اندازه‌ی قبلی می‌مانند (درخواست کاربر: «فقط حالت سه‌تایی»). */
@media (min-width: 1024px) {
  /* اسلایدر (بیش از ۳ مربی): کارت وسطی حدود ۱۰٪ بزرگ‌تر از حالت عادی، کارت‌های
     کناری ۸۵٪ — مطابق پیش‌نمایش سند طراحی. کلاس co-slide-middle را site.js
     به‌صورت هندسی (نزدیک‌ترین کارت به مرکز) و بلادرنگ ست می‌کند. مقیاس روی
     خود کارت اعمال می‌شود نه اسلاید تا با تبدیل‌های Swiper تداخل نکند. */
  .co-swiper .swiper-slide.co-slide-middle { z-index: 2; }
  .co-swiper .swiper-slide.co-slide-middle .co-card {
    transform: scale(1.1);
    position: relative;
  }
  .co-swiper .swiper-slide.co-slide-middle .co-card:hover {
    transform: scale(1.1) translateY(-10px);
  }
  .co-swiper .swiper-slide:not(.co-slide-middle) .co-card {
    transform: scale(0.85);
  }
  .co-swiper .swiper-slide:not(.co-slide-middle) .co-card:hover {
    transform: scale(0.85) translateY(-10px);
  }

  /* گرید (حداکثر ۳ مربی): کارت وسط پهن‌تر با عکس بزرگ‌تر و فاصله‌ی کمتر؛
     کارت‌های کناری کوتاه‌تر و وسط‌چین عمودی. انتخاب‌گر nth-child(2):nth-last-child(2)
     فقط وقتی می‌بندد که دقیقاً ۳ کارت وجود داشته باشد. */
  .co-grid:has(> .co-card:nth-child(3):last-child) { gap: 20px; }
  .co-grid > .co-card:nth-child(2):nth-last-child(2) {
    flex-basis: 380px;
    max-width: 380px;
  }
  .co-grid > .co-card:nth-child(2):nth-last-child(2) .co-image {
    width: 220px;
    height: 290px;
  }
  .co-grid:has(> .co-card:nth-child(3):last-child) > .co-card:not(:nth-child(2)) {
    height: auto;
    align-self: center;
  }
}

/* ===== PopularCourses ===== */
.crs-section {
  background-color: var(--back-color-2);

  width: 100%;
  padding: 20px;
  overflow: hidden;
}

.crs-header {
  text-align: center;
  margin-bottom: 50px;
}

.crs-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;

  /* inline-size container: lets the reorder rule below track the grid's REAL
     width, so it stays in perfect sync with the flex-wrap point (3 cards on a
     row need 3*300 + 2*30 = 960px) in every browser, regardless of scrollbar */
  container-type: inline-size;
}

.crs-card {
  background-color: var(--item-color-2);

  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-color);
  flex-basis: 300px;
  flex-grow: 1;
  max-width: 350px;
  transition: transform 0.3s ease;
}

.crs-card:hover {
  transform: translateY(-10px);
}

.crs-card-img-container {
  flex: 1;
  min-height: 200px;
  position: relative;
  width: 100%;
}

.crs-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.crs-card:hover .crs-card-img {
  transform: scale(1.1);
}

.crs-card-content {
  flex: 1;
  min-height: 200px;
  padding: 25px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.crs-card-title {
  color: var(--text-color);
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.crs-card-info {
  color: var(--description-color);
  font-size: 1rem;
  border-top: 1px solid var(--line-color);
  padding-top: 15px;
  margin-top: 15px;
}

.crs-featured {
  flex-direction: column-reverse;
}

/* 2-in-a-row + 1-on-next-row mode: the featured card moves to the next line.
   Scoped to non-mobile (>=769px, where the grid is still row-direction) AND
   grid narrower than 960px (only 2 cards fit per row -> the row wraps).
   In the 3-in-a-row mode (grid >= 960px) the natural order is kept and the
   featured card stays in the middle, exactly as before. */
@media (min-width: 769px) {
  @container (max-width: 959px) {
    .crs-featured {
      order: 3;
    }
  }
}

@media (max-width: 768px) {
  .crs-grid {
    flex-direction: column;
    align-items: center;
  }

  /* the grid is column-direction here, so flex-basis would act as the card's
     HEIGHT: reset it to auto so every card is as tall as its own content and
     the coach info line at the bottom is never clipped away */
  .crs-card {
    flex-basis: auto;
    flex-grow: 0;
  }

  .crs-featured {
    flex-direction: column;
  }
}

/* ===== AdvantagesSection ===== */
.adv-section {
  /* Advantages = the hero-style floating rounded card, this time in the
     brand DARK GREEN (user request; the design doc shows this section as a
     solid dark-green rounded card floating on the page background).
     Width stays auto (no width:100%) so the card's side margins can never
     push it wider than the page. */
  background-color: var(--black-color);

  background-image: none;

  padding: 20px;
  position: relative;
  /* The optional cover bg-image + the dark ::before overlay are clipped
     exactly to the rounded corners (same mechanism as the hero card). */
  overflow: hidden;

  margin: 40px;
  border-radius: 45px;

  background-size: cover;
  background-position: top center;
  transition: background-image 0.5s ease-in-out;
}

.adv-with-bg {
  background-image: var(--bg-image-url);
}

.adv-with-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: var(--black-transparent-color);

  z-index: 1;
}

  /* The advantages card is always dark (solid green, or bg image + dark
     overlay) - the texts stay light in both states. */
.adv-section .gs-title {
  color: #d9a276;
}

.adv-section .adv-title {
  color: #e4ddc0;
}

.adv-section .adv-desc {
  color: #c6ccc6;
}

.adv-container {
  max-width: 1100px;
  margin: 0 auto 30px auto;
  position: relative;
  z-index: 2;
}

.adv-header {
  text-align: center;
  margin-bottom: 60px;
}

.adv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 50px;
}

.adv-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.adv-icon {
  background-color: var(--item-color-2);
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--red-color);
  border-radius: 50%;
  color: var(--red-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.adv-item:hover .adv-icon {
  background-color: var(--red-color);
  color: #ffffff;
}

.adv-title {
  color: var(--text-color);
  font-size: 1.3rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.adv-desc {
  color:  var(--description-color);
  font-size: 1rem;
  line-height: 1.6;
}

/* Tablet: proportionate card inset/radius (same values as the hero card) */
@media (min-width: 769px) and (max-width: 1023px) {
  .adv-section {
    margin: 24px;
    border-radius: 32px;
  }
}

@media (max-width: 768px) {
  .adv-section {
    /* Mobile: smaller inset/radius keeps more useful width (like hero) */
    margin: 16px;
    border-radius: 24px;
  }

  .adv-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ===== DownloadAppSection ===== */
.dl-section {
  /* بخش دانلود اپ: کرم (مطابق سند طراحی) */
  /* background-color: #e4ddc0; */

  width: 100%;
  padding: 40px 20px;
  overflow: hidden;
}

.dl-header {
  text-align: center;
  margin-bottom: 50px;
}

.dl-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
}

.dl-content {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dl-desc {
  color: var(--description-color);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 500px;
  /* جاستیفای با خط آخر راست‌چین — در «هر حالت» (دسکتاپ و موبایل)، مثل توضیح بخش معرفی */
  text-align: justify;
  text-align-last: right;
  width: 100%;
}

.dl-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: transform 0.2s ease, background-color 0.3s ease;
  border: 2px solid transparent;
  width: 280px;
  max-width: 100%;
}

.dl-btn:hover {
  transform: translateY(-3px);
}

.dl-btn-primary {
  background-color: var(--red-color);
  color: #ffffff;
}

/* .dl-btn-primary:hover {
  background-color: var(--red-color);
} */

.dl-btn-secondary {
  background-color: transparent;
  color: var(--red-color);
  border-color: var(--red-color);
}

.dl-btn-secondary:hover {
  background-color: var(--red-color);
  color: #ffffff;
}

.dl-img-wrapper {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;

  /* قاب مربعی (درخواست کاربر): عکس همیشه داخل یک مربع نمایش داده می‌شود؛
     در موبایل/تبلت مربع کوچک و وسط‌چین است. */
  aspect-ratio: 1 / 1;
  width: min(80vw, 350px);
  min-height: 0;
  margin-left: auto;
  margin-right: auto;
}

.dl-mockup {
  /* «اندازه‌ی عکس مربعی می‌شود»: کل قاب مربعی را پر می‌کند و
     بخش اضافه‌ی تصویر (بالا/پایین یا چپ/راست) کراپ می‌شود. */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 992px) {
  .dl-container {
    flex-direction: column-reverse;
  }

  .dl-content {
    align-items: center;
  }

  /* متن جاستیفای می‌ماند (حالت center حذف شد — مثل بخش معرفی) */
}

/* دسکتاپ (فقط): مربعِ بزرگ «کنارِ عنوان» بالا می‌رود — بالایش تا نزدیک
   کادرِ بالایی همین بخش — و خطِ تزئینیِ عنوان از «زیرِ» عکس رد می‌شود
   (عکس روی خط می‌نشیند؛ حالت تأییدشده کاربر). عنوان دقیقاً مثل حالتِ
   اولیه می‌ماند: وسطِ بخش، با اندازه و خط‌های اصلی خودش.
   عرض مربع طوری محاسبه می‌شود که هرگز روی «متنِ» عنوان نیفتد؛
   site.js عرضِ متنِ عنوان را می‌سنجد و --dl-img-max را تنظیم می‌کند
   (مقدار جایگزین برای عنوانِ فعلی امن است). */
@media (min-width: 993px) {
  .dl-img-wrapper {
    /* مربع بزرگ دسکتاپ؛ هرگز از لبه‌ی شروعِ متنِ عنوان جلوتر نمی‌رود */
    width: min(680px, var(--dl-img-max, 50vw - 293px));
    align-self: flex-start;
    /* ردیفِ متن از 212px زیرِ کادرِ بخش شروع می‌شود؛ با 192- بالای مربع
       دقیقاً 20px زیرِ کادرِ بالایی بخش قرار می‌گیرد (کنار عنوان). */
    margin-top: -142px;
    /* چسباندن مربع به لبه‌ی چپِ بخش (وقتی کانتینر 1200 وسط‌چین است) */
    margin-left: min(100px, 720px - 50vw);
    /* خطِ تزئینی عنوان از «زیرِ» عکس رد شود */
    position: relative;
    z-index: 1;
  }
}

/* ===== TestimonialsSection ===== */
.tst-section {
  background-color: var(--back-color-1);

  width: 100%;
  padding: 20px;
  text-align: center;
}

.tst-card {
  background-color: var(--item-color-2);

  border-radius: 15px;
  padding: 30px 25px;
  height: 100%;

  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  max-height: 450px;
}

.tst-card:hover {
  box-shadow: 0 10px 20px var(--itembox-shadow);

  transform: translateY(-10px);
}

.tst-quote {
  color: var(--white-transparent-color);

  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 60px;
   z-index: 0;
}

.tst-text {
  color: var(--description-color);

  font-size: 1rem;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 25px;
  flex-grow: 1;

  position: relative;
  z-index: 1;
  /* متن نظر: همیشه دقیقاً چهار خط رزرو می‌شود (حتی برای متن‌های کوتاه‌تر) تا
     ارتفاع همه کارت‌ها یکسان بماند و عکس و نام همه نظرات هم‌تراز شوند؛
     متن جاستیفای است و دیگر هیچ نوار اسکرولی دیده نمی‌شود */
  align-self: stretch;
  height: 6.8em; /* دقیقاً چهار خط × ارتفاع خط ۱.۷ */
  text-align: justify;
  text-align-last: right;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.tst-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tst-author-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--red-color);
  object-position: center top;
}
/* متن نام نویسنده نظر روی کارت کرم خوانا باشد */
.tst-name {
  color: #0b392f;
}

.tst-img-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;

    background-color: var(--item-color);
    border: 3px solid var(--red-color);

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--description-color);
    text-align: center;
    padding: 5px;
}

.tst-name {
  color: var(--text-color);

  font-size: 1.1rem;
  font-weight: bold;
}

/* slider */
.tst-slider {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
}

.tst-swiper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px !important;
}

.tst-swiper-next,
.tst-swiper-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: var(--black-transparent-color);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.tst-swiper-next:hover,
.tst-swiper-prev:hover {
  background-color: var(--red-color);
}

.tst-swiper-prev { left: 0px; }
.tst-swiper-next { right: 0px; }
.tst-swiper-next::after,
.tst-swiper-prev::after {
  font-family: 'swiper-icons';
  font-size: 20px;
  /* آیکون داخل دایره سبز تیره: کرم */
  color: #e4ddc0;
}
.tst-swiper-prev::after { content: 'prev'; }
.tst-swiper-next::after { content: 'next'; }
.tst-swiper-prev.swiper-button-disabled,
.tst-swiper-next.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: auto !important;
  pointer-events: none !important;
}
.tst-swiper-prev.swiper-button-disabled:hover,
.tst-swiper-next.swiper-button-disabled:hover {
  background-color: var(--black-transparent-color) !important;
}

@media (max-height: 500px) and (max-width: 900px) {
  .tst-swiper-next, .tst-swiper-prev { width: 40px; height: 40px; top: 45%; }
  .tst-slider { max-width: 100%; padding: 0 45px; }
}

/* ===== PricingSection ===== */
.prc-section {
  background-color: var(--back-color-2);

  width: 100%;
  padding: 20px;
}

.prc-header {
  text-align: center;
  margin-bottom: 60px;
}

.prc-grid {
  display: grid;
  /* موبایل: تک‌ستونه؛ پلنِ ویژه (کارتِ میانی/دومی) اول بیاید: ویژه، اول، سوم */
  grid-template-columns: 1fr;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}

/* موبایل: کارتِ ویژه بالاتر از بقیه قرار بگیرد */
.prc-featured {
  order: -1;
}

/* دو ستونه: کارتِ ویژه تنها در خط اول و وسط‌چین؛ دو کارتِ دیگر در خط بعدی */
@media (min-width: 670px) {
  .prc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .prc-featured {
    order: -1;
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 15px); /* دقیقاً هم‌عرضِ ستون‌های همان بخش */
  }
}

/* سه ستونه: ترتیب طبیعی (کارتِ ویژه در وسط) */
@media (min-width: 1000px) {
  .prc-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .prc-featured {
    order: 0;
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

.prc-card {
  /* کارت‌های پلن: سبز تیره با متن روشن (مطابق سند: کارت‌های بلیط اشتراکی) */
  background-color: #0b392f;
  border: 2px solid #20514b;

  border-radius: 15px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.prc-tag {
  background-color: var(--red-color); /* نارنجی/برنزِ سایت */
  color: #ffffff;

  position: absolute;
  top: 18px;
  right: -45px;
  padding: 8px 40px;
  font-size: 0.9rem;
  font-weight: bold;
  transform: rotate(45deg);
  box-shadow: 0 4px 8px var(--black-transparent-color);
}

.prc-featured {
  border-color: var(--red-color);

  transform: scale(1.05);
}

.prc-card-header {
  text-align: center;
  border-bottom: 1px solid var(--line-color);
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.prc-plan-name {
  /* نام پلن روی کارت سبز: برنز روشن */
  color: #d9a276;

  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.prc-price-container {
  color: #ffffff;
}

.prc-price {
  font-size: 2.5rem;
  font-weight: bold;
  display: block;
}

.prc-duration {
  color: #c6ccc6;

  font-size: 1.1rem;
  margin-top: 8px;
}

.prc-features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  flex-grow: 1;
}

.prc-features li {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1rem;
  margin-bottom: 15px;
  text-align: right;
}

.prc-available {
  color: #c6ccc6;
}

/* react-icons <svg> → Font Awesome <i> */
.prc-available i {
  color: #d9a276;
}

.prc-unavailable {
  color: #9aa79f;
}

/* خطِ «در دسترس نیست» فقط روی متن؛ خودِ آیکونِ ضربدر خط نخورد */
.prc-unavailable span {
  text-decoration: line-through;
}

.prc-unavailable i {
  color: #9aa79f;
}

@media (hover: hover) and (pointer: fine) {
  .prc-card:hover {
    border-color: var(--red-color);
    transform: translateY(-10px);
  }

  .prc-card.prc-featured:hover {
    transform: scale(1.1) translateY(-10px);
  }
}

@media (max-width: 992px) {
  .prc-featured {
    transform: scale(1);
  }
}

/* ===== CertificatesSection ===== */
.cert-section {
  background-color: var(--back-color-1);

  width: 100%;
  padding: 20px;
  text-align: center;
}

.cert-header {
  margin-bottom: 50px;
}

.cert-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.cert-item {
  background-color: var(--item-color-2);
  color: var(--description-color);

  border: 2px solid var(--line-color);

  width: 100px;
  height: 100px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* React rendered icons at size={40}; Font Awesome <i> uses font-size */
.cert-item > i {
  font-size: 40px;
}

.cert-item:hover {
  color: #ffffff;
  background-color: var(--red-color);
  border-color: var(--red-color);

  transform: scale(1.1);
}

@media (max-width: 768px) {

  .cert-item {
    width: 80px;
    height: 80px;
  }

  .cert-item > i {
    font-size: 30px;
  }
}

/* حالت چندخطیِ متعادل — initCertificatesBalance در site.js ردیف‌ها را می‌سازد:
   آیتم‌ها «تقریباً برابر» بین ردیف‌ها پخش می‌شوند (۸تاییِ دوخطی = ۴+۴،
   سه‌خطی = ۳+۳+۲) و هر ردیف وسط‌چین است. */
.cert-grid.cert-balanced {
  flex-direction: column;
  align-items: center;
}

.cert-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

/* ===== ContactSection ===== */
.ctc-section {
  background-color: var(--back-color-2);

  width: 100%;
  padding: 40px 20px;
  /* overflow-x: hidden; */
}

.ctc-header {
  text-align: center;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.ctc-section {
  /* لنگر فیگورهای تزئینی دو طرف فرم (فقط دسکتاپ) */
  position: relative;
}

.ctc-form-container {
  background-color: var(--item-color);
  border: 1px solid var(--line-color);

  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 15px;
}

/* فیگورهای تزئینی (FARBAN) دو طرف کادر ارتباط با ما — فقط دسکتاپ.
   به‌طور پیش‌فرض مخفی؛ در عرض‌های کم اصلاً وجود ندارند (درخواست کاربر).
   - عرض از «ناودانِ» خالی دو طرف کادر فرم محاسبه می‌شود و حداکثر ۵۲۰px است؛
     ارتفاع خودکار از نسبت ذات تصویر (۶۲۸×۹۶۰) → هیچ کشیدگی/کراپی رخ نمی‌دهد.
   - لنگر پایین: ۵۰px زیر انتهای سکشن = ۱۰px زیر لبه‌ی بالای کارت پاورقی
     (۴۰px مارجین پاورقی + ۱۰px) → پاها چند پیکسل «پشت» کارت سبز می‌روند.
   - لنگر افقی: ۱۰px فاصله از لبه کادر فرم (کادر ۸۰۰px وسط‌چین). */
.ctc-decor {
  display: none;
}

@media (min-width: 1360px) {
  .ctc-decor {
    display: block;
    position: absolute;
    bottom: -50px;
    width: min(calc((100vw - 800px) / 2 - 30px), 520px);
    height: auto;
    pointer-events: none;
    user-select: none;
  }

  .ctc-decor-left {
    right: calc(50% + 410px);
  }

  .ctc-decor-right {
    left: calc(50% + 410px);
  }
}

.ctc-form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.ctc-form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ctc-form-group label {
  color: var(--description-color);

  /* margin-bottom: 10px; */
  font-size: 1rem;
}

.ctc-form-group input,
.ctc-form-group textarea {
  background-color: var(--back-color-2);
  color: var(--text-color);
  border: 2px solid var(--line-color);

  width: 100%;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.ctc-form-group input:focus,
.ctc-form-group textarea:focus {
  border-color: var(--red-color);

  outline: none;
}

.ctc-form-group textarea {
  resize: vertical;
}

.ctc-form-actions {
  text-align: center;
  margin-top: 30px;
}

.ctc-submit-btn {
  background-color: var(--red-color);
  color: #ffffff;

  border: none;
  padding: 15px 50px;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.ctc-submit-btn:hover {
  transform: scale(1.05);
}

.ctc-success {
  color: var(--text-color);

  text-align: center;
}

.ctc-success h3 {
  color: var(--tag-color);

  font-size: 1.8rem;
  margin-bottom: 15px;
}

.ctc-success p {
  color: var(--description-color);

  font-size: 1.1rem;
}

.ctc-error {
  color: var(--red-color);
  font-size: 0.875rem;
  margin-top: 5px;
}

@media (max-width: 768px) {
  .ctc-form-row {
    flex-direction: column;
  }
  .ctc-form-container {
    padding: 25px;
  }
}

/* ===== Footer ===== */
.ft-footer {
  /* پاورقی: کارت شناور سبز تیره — هم‌سبک کارت معرفی و برتری‌ها (درخواست کاربر).
     کادر نارنجی بالای پاورقی (border-top) حذف شد؛ عرض auto تا مارجین‌های
     کناری کارت هرگز آن را از عرض صفحه بیرون نزنند (همان مکانیزم کارت برتری‌ها). */
  background-color: #0b392f;
  color: #e4ddc0;

  width: auto;
  padding: 60px 20px 40px 20px;

  position: relative;
  overflow: hidden;
  margin: 40px;
  border-radius: 45px;
}

.ft-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 50px auto;
}

.ft-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ft-icon {
  font-size: 2.5rem;
  /* آیکون‌های پاورقی: نارنجی روشن (مطابق سند طراحی) */
  color: #fd7d3c;
}

.ft-title {
  color: #e4ddc0;

  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: 15px 0;
}

.ft-text {
  color: #c6ccc6;

  display: block;
  font-size: 1rem;
  line-height: 1.8;
  text-decoration: none;
  transition: color 0.3s ease;
}

.ft-text:hover {
  color: #d9a276;
}

.ft-divider {
  background-color: var(--line-color);

  height: 1px;
  max-width: 1200px;
  margin: 0 auto 40px auto;
}

.ft-social {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 40px;
}

.ft-social-link {
  color: #c6ccc6;

  font-size: 1.8rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.ft-social-link:hover {
  color: #d9a276;

  transform: translateY(-5px);
}

.ft-copyright {
  color: #9aa79f;

  text-align: center;
  font-size: 0.9rem;
}

/* تبلت: inset و شعاع متناسب (همان مقادیر کارت معرفی و برتری‌ها) */
@media (min-width: 769px) and (max-width: 1023px) {
  .ft-footer {
    margin: 24px;
    border-radius: 32px;
  }
}

@media (max-width: 768px) {
  .ft-info-grid {
    gap: 50px;
  }
  .ft-footer {
    padding-top: 50px;

    /* موبایل: inset و شعاع کوچک‌تر (مثل کارت معرفی و برتری‌ها) */
    margin: 16px;
    border-radius: 24px;
  }
}

/* ===== Lightbox (گواهی‌ها) ===== */
/* Replaces yet-another-react-lightbox (container bg was var(--menu-color)). */
.lbx-container {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background-color: var(--menu-color);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lbx-fade 0.2s ease-out;
}
.lbx-image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  animation: lbx-zoom 0.25s ease-out;
}
.lbx-close {
  position: absolute;
  top: 20px;
  left: 20px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 100001;
}
.lbx-close:hover { color: #d9a276; }
@keyframes lbx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbx-zoom { from { transform: scale(0.92); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
/* ============================================================
   مخفی‌سازی کامل دکمه‌های ناوبری اسلایدرها (خدمات، مربیان، نظرات):
   وقتی تعداد آیتم‌ها به اندازه‌ی اسلایدهای قابل نمایش برسد و
   اسکرولی وجود نداشته باشد، دکمه‌ها اصلاً نمایش داده نشوند.
   Swiper در این حالت (watchOverflow که پیش‌فرض فعال است) کلاس
   swiper-button-lock را روی دکمه‌ها می‌گذارد و در init و تغییر
   اندازه / بریک‌پوینت به‌روزرسانی می‌کند؛ اما قاعده‌ی display:none
   آن در swiper-bundle.min.css با display:flex همین فایل (که بعد
   از آن لود می‌شود و اختصاصِ برابر دارد) بازنویسی می‌شد. این
   قاعده با اختصاصِ دوبرابری دکمه‌ها را در حالت قفل به‌طور کامل
   مخفی می‌کند؛ در حالت عادی (بیشتر بودن آیتم‌ها از جا) کلاس
   برداشته می‌شود و دکمه‌ها مثل قبل ظاهر می‌گردند.
   ============================================================ */
.svc-swiper-prev.swiper-button-lock,
.svc-swiper-next.swiper-button-lock,
.co-swiper-prev.swiper-button-lock,
.co-swiper-next.swiper-button-lock,
.tst-swiper-prev.swiper-button-lock,
.tst-swiper-next.swiper-button-lock {
  display: none !important;
}

/* ============================================================
   گوگل reCAPTCHA v3 — نمدار (badge) گوشه پایین صفحه
   ============================================================
   گوگل نمدار را به‌صورت position:fixed تزریق می‌کند اما z-index آن
   محدود است؛ در موبایل، بخش‌هایی از صفحه (اسلایدرها، عکس‌ها و لایه‌های
   دارای stacking-context مثل transform یا z-index بالا) می‌توانند روی
   آن بیفتند یا آن را زیر خود بگیرند. این قاعده تضمین می‌کند نمدار
   همیشه «روی همه‌ی لایه‌های سایت» و در جای ثابت دیده شود.

   نکته: طبق قوانین گوگل، هنگام استفاده از reCAPTCHA v3 نمایش نمدار
   الزامی است؛ بنابراین هرگز آن را مخفی نکنید.
   ============================================================ */

.grecaptcha-badge,
.grecaptcha-badge *,
.grecaptcha-badge iframe,
body > .grecaptcha-badge,
body > div[style*="z-index: 10000000"] {
  z-index: 2147483647 !important; /* بیشینه‌ی ممکن — روی همه چیز */
}

body > .grecaptcha-badge {
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* روی موبایل ممکن است نمدار با دکمه‌های شناور/فوتر هم‌پوشانی کند؛
   کمی از پایین فاصله می‌گیرد تا روی محتوای لمسی نیفتد. */
@media (max-width: 768px) {
  body > .grecaptcha-badge {
    bottom: 4px !important;
  }
}