/*  پایه (تنظیمات اولیه برای همه المنت‌ها) */
*,
*::before,
*::after {
  box-sizing: border-box; /* محاسبه سایز شامل padding و border */
  font-family: font1; /* فونت پیش‌فرض */
}
/*
.head1=font-size: clamp(1.5rem, 2vw + 1.5rem, 3rem);
card-text=font-size: clamp(1rem, 2vw + 1rem, 1.4rem);
p=font-size: clamp(0.8rem, 2vw + 0.8rem, 1.3rem);
.text1=font-size: clamp(0.4rem, 2vw + 0.4rem, 0.8rem);
.text2=font-size: clamp(0.6rem, 2vw + 0.6rem, 1rem);
16px=1rem
15px=0.9375rem
14px=0.875rem
18px=1.125rem;
*/
html,
body {
  margin: 0; /* حذف حاشیه پیش‌فرض مرورگر */
  padding: 0; /* حذف فاصله داخلی پیش‌فرض */
  height: auto; /* پر کردن کل ارتفاع صفحه */
  overflow-x: hidden; /* جلوگیری از اسکرول افقی */
  direction: rtl; /* متن و چیدمان راست‌به‌چپ */
}
:root {
  --font1: 1rem; /*16px*/
  --font2: 0.875rem; /*14px*/
  --font3: 1.5rem; /*24px*/
  --font4: 3rem; /*48px*/
  --font5:0.75rem; /*12px*/
  --font6: 0.938rem;    /*15px*/
  --font7:2rem;     /*32px*/
  --font8: 2.5rem;    /*40px*/
  --font9:1.75rem; /*28px*/
  --max-w: 100%;
  --base-w: 1240;
  --base-h: 514;
  --bg: #f8f8f8;
  --accent: #5dd6f1;
  --blur-size: 66px;
  --size: 200px; /* اندازه هر لوزی */
  --gap: 10px; /* فاصله بین لوزی‌ها */
  --diag: calc(var(--size) * 1.4142); /* قطر لوزی (√2*اندازه) */
  --button-color: var(--color5); /* رنگ دکمه */
  --side-gap: 50px; /* فاصله از دیواره‌های صفحه */
  --box-width: 700px; /* عرض باکس‌ها */
  --box-height: 400px; /* ارتفاع باکس‌ها */
  --sjk-gap: 40px;
  --sjk-radius: 12px;
  --sjk-muted: #222;
  --sjk-accent: #0f62fe;
  --sjk-max-width: 1240px;
  --color1: #151515;
  --color2: #ffffff;
  --color3: #696969;
  --color4: #333;
  --color5: #12c1d9;
  --color6: rgba(18, 193, 217, 1);
  --color7: #555;
  --color8:#FBFBFB;
  --color9: #353535;
  --color10: #5c5c5e;
  --color11: #9095aa;
  --color12: rgba(14, 29, 64, 1);
  --color13: #0d8191;
  --color14: rgba(18, 193, 217, 0.15);
  --color15: #ccc;
  --color16: #e7f9fc;
  --color17: #f6f6f6;
  --color18: #eee;
  --color19: #bfe8ef;
  --color20: #f4f4f4;
  --color21: rgba(0, 0, 0, 0.1);
  --color22: #f7f7f7;
  --color23: rgba(18, 193, 217, 1);
  --color24: rgba(200, 200, 200, 0.25);
  --color25: rgba(0, 0, 0, 0.15);
  --color26: #e6f0ff;
  --color27: #888888;
  --color28: #00cccc;
  --color29: #f0fbfd;
  --color30: #b3f4ff;
  --color31: #d6e4f5;
  --color32: rgba(20, 30, 80, 0.12);
  --color33: rgba(239, 239, 239, 0.08);
  --color34: rgba(229, 229, 229, 0.6);
  --color35: rgba(12, 18, 24, 0.08);
  --color36: rgba(0, 0, 0, 0.02);
  --color37: #13c5dd;
  --color38: #0a6a77;
  --color39: rgba(185, 217, 235, 0.48);
  --color40: rgba(0, 0, 0, 0.04);
  --color41: #fdfdfd;
  --color42: #0e1d40;
  --color43: #00311c;
  --color44: #444;
  --color45:rgba(0,0,0,0.3);
  --color46:#000;
  --color47:rgba(69, 69, 69, 0.20);
  --color48:#3C3C3C;
  --color49:rgba(19, 197, 221, 0.10);
  --color50:#BDEFF6;
  --color51:#E0E0E0;
  --color52:#EF5357;
  --color53:#C0C2C5;
}
/* تعریف فونت font1 */
@font-face {
  font-family: font1; /* نامی که در CSS استفاده می‌شود */
  src: url(fonts/YekanBakhFaNum-Regular.ttf) format("truetype"),
    url(fonts/YekanBakhFaNum-Regular.woff2) format("woff2"),
    url(fonts/YekanBakhFaNum-Regular.woff) format("woff"),
    url(fonts/YekanBakhFaNum-Regular.otf) format("oft");
  font-weight: normal; /* ضخامت فونت */
  font-style: normal; /* حالت فونت (عادی) */
}

/* تعریف فونت font2 */
@font-face {
  font-family: font2;
  src: url(fonts/YekanBakhFaNum-Bold.ttf) format("truetype"),
    url(fonts/YekanBakhFaNum-Bold.woff2) format("woff2"),
    url(fonts/YekanBakhFaNum-Bold.woff) format("woff"),
    url(fonts/YekanBakhFaNum-Bold.otf) format("oft");
}
.head1 {
  font-size: clamp(1.5rem, 2vw + 1.5rem, 3rem);
  color: var(--color1);
}
p {
  color: var(--color1);
  font-size: clamp(0.8rem, 2vw + 0.8rem, 1.3rem);
  line-height: 38px;
}
.whitecolor {
  color: var(--color2);
}
.text1 {
  color: var(--color3);
  font-size: clamp(0.8rem, 2vw + 0.8rem, 1rem);
}
.text2 {
  font-size: clamp(0.6rem, 2vw + 0.6rem, 1.2rem);
  width: 400px; /* عرض مشخص */
  white-space: nowrap; /* نرفتن به خط بعد */
  overflow: hidden; /* بریدن متن اضافی */
  text-overflow: ellipsis; /* سه نقطه در انتها */
}
.line-height-p {
  line-height: 25px;
  margin-bottom: 0px;
  color: #5B6176;
}
/* ---------- start menu ---------- */

/* استایل نوار ناوبری بالا */
nav {
  position: fixed; /* همیشه بالای صفحه ثابت می‌ماند */
  top: 0; /* چسبیده به بالای صفحه */
  right: 0; /* شروع از سمت راست */
  width: 100%; /* کل عرض صفحه */
  height: 50px; /* ارتفاع ثابت */
  background: var(--color2); /* پس‌زمینه سفید */
  display: flex; /* استفاده از فلکس برای چیدمان داخلی */
  align-items: center; /* آیتم‌ها عمودی وسط‌چین شوند */
  justify-content: space-between; /* فاصله بین آیتم‌ها */
  box-shadow: 0 2px 5px var(--color21); /* سایه‌ی ملایم */
  z-index: 1000; /* بالاتر از بقیه المنت‌ها */
}

/* لوگو */
.logo {
  margin-right: 50px; /* فاصله از سمت راست */
  height: 50px; /* ارتفاع ثابت */
}
.logo-pic {
  height: inherit; /* ارتفاع مساوی با والد (50px) */
}

/* منو (حذف بولت و فاصلهٔ پیش‌فرض لیست) */
.menu,
.mobile-menu {
  list-style: none; /* حذف بولت */
  padding: 0; /* حذف فاصله داخلی */
  margin: 0; /* حذف فاصله خارجی */
}

.menu {
  display: flex; /* نمایش افقی آیتم‌ها */
  gap: 30px; /* فاصله بین آیتم‌ها */
}

/* لینک‌های منو */
.menu li a {
  text-decoration: none; /* حذف خط زیر متن */
  color: var(--color4); /* رنگ متن خاکستری تیره */
  font-size: 1rem; /* سایز متن */
  transition: color 0.3s; /* انیمیشن تغییر رنگ */
}

/* حالت hover روی لینک منو */
.menu li a:hover {
  color: var(--color5); /* تغییر رنگ به آبی */
}

/* آیتم فعال در دسکتاپ */
.menu li a.active {
  color: var(--color5); /* رنگ آبی */
  border-bottom: 2px solid var(--color5); /* خط زیر آیتم فعال */
}

/* بخش شماره تلفن */
.phone {
  display: flex; /* آیکن و متن کنار هم */
  align-items: center; /* وسط‌چین عمودی */
  margin-left: 50px; /* فاصله از سمت چپ */
  font-size: 1rem; /* سایز متن */
  color: var(--color4); /* رنگ متن */
}

/* آیکن تلفن */
.phone svg {
  width: 28px;
  height: 28px;
  margin-right: 6px; /* چون RTL است، آیکن بعد از متن قرار می‌گیرد */
}

/* منوی همبرگری (فقط در موبایل نمایش داده می‌شود) */
.hamburger {
  display: none; /* پیش‌فرض مخفی */
  flex-direction: column; /* سه خط زیر هم */
  gap: 4px; /* فاصله بین خطوط */
  cursor: pointer; /* نشانگر ماوس به حالت کلیک */
  margin-left: 15px; /* فاصله از سمت چپ */
}

.hamburger span {
  display: block;
  width: 25px; /* طول خط */
  height: 3px; /* ضخامت خط */
  background: var(--color4); /* رنگ خط */
}

/* منوی موبایل */
.mobile-menu {
  display: none; /* پیش‌فرض بسته است (با JS باز می‌شود) */
  flex-direction: column; /* آیتم‌ها زیر هم */
  background: var(--color2); /* پس‌زمینه سفید */
  position: fixed; /* ثابت بعد از باز شدن */
  top: 50px; /* زیر nav */
  right: 0; /* سمت راست */
  width: 100%; /* کل عرض */
  box-shadow: 0 4px 8px var(--color21); /* سایه */
  z-index: 999; /* زیر nav */
}

/* آیتم‌های منوی موبایل */
.mobile-menu li {
  border-bottom: 1px solid var(--color18); /* خط جداکننده */
  list-style: none; /* حذف بولت */
}

/* لینک‌های منوی موبایل */
.mobile-menu li a {
  display: block; /* پر کردن کل عرض آیتم */
  padding: 12px; /* فاصله داخلی */
  text-decoration: none;
  color: var(--color4);
}

/* حالت hover در موبایل */
.mobile-menu li a:hover {
  background: var(--color22); /* پس‌زمینه خاکستری روشن */
}

/* بخش شماره تلفن در موبایل */
.mobile-menu .phone {
  padding: 12px; /* فاصله داخلی */
}

/* ---------- End menu ---------- */
/* ---------- ساختار اصلی ---------- */
.main-container {
  display: flex; /* نمایش به صورت فلکس */
  width: 100%; /* عرض کامل */
  height: 100vh; /* ارتفاع کل صفحه */
}

/* بخش اطلاعات متنی سمت راست */
.info-panel {
  flex: 1; /* گرفتن یک سهم از فلکس */
  background-color: var(--color12); /* رنگ پس‌زمینه */
  color: var(--color2); /* رنگ متن سفید */
  display: flex; /* استفاده از فلکس برای چینش داخلی */
  flex-direction: column; /* چیدمان عمودی */
  justify-content: top; /* وسط‌چین عمودی */
  align-items: flex-start; /* چیدمان افقی به سمت راست */
  background-image: url(image/bg-fish-header.svg);
  background-repeat: no-repeat;
  background-position: top 50px right 0px;
  height: inherit;
  animation: move 3s infinite 1s alternate;
  animation-timing-function: ease-out;
}
@keyframes move {
  0% {
    background-position: top 50px right 0px;
  }
  90% {
    background-position: top 100px right 0px;
  }
  95% {
    background-position: top 98px right 0px;
  }
  100% {
    background-position: top 100px right 0px;
  }
}

.info-panel h1 {
  margin-bottom: 2rem; /* فاصله پایین تیتر */
  font-family: font2; /* فونت تیتر */
  width: 100%; /* عرض کامل */
  margin-right: 3rem; /* فاصله از سمت راست */
  font-size: clamp(1.5rem, 2vw + 1.5rem, 3rem); /* فونت ریسپانسیو */
  padding: 5rem 2rem 1rem 2rem; /* فاصله داخلی */
}

.info-panel p {
  margin-bottom: 3rem; /* فاصله پایین پاراگراف */
  line-height: 1.7; /* ارتفاع خط برای خوانایی */
  text-align: justify; /* تراز متن */
  width: 80%; /* عرض پاراگراف */
  margin-right: 5rem; /* فاصله از سمت راست */
  font-size: clamp(1rem, 2vw + 1rem, 1.5rem); /* فونت ریسپانسیو */
}

.login-btn {
  display: inline-block; /* لینک به شکل دکمه */
  background: var(--color23); /* رنگ پس‌زمینه دکمه */
  color: var(--color2); /* رنگ متن */
  text-decoration: none; /* حذف خط زیر لینک */
  border-radius: 4px; /* گوشه گرد */
  font-weight: 700; /* ضخیم کردن متن */
  width: 243px;
  height: 60px;
  padding: 20px 10px;
  text-align: center;
  font-size: 1.125rem;
}
.login-btn:hover {
  background-color: var(--color13); /* تغییر رنگ هنگام هاور */
}
.mr-0 {
  margin-right: 5rem; /* فاصله سمت راست */
}

/* بخش تصویری سمت چپ */
.visual-panel {
  flex: 1; /* گرفتن یک سهم از فلکس */
  position: relative; /* برای موقعیت‌دهی داخلی */
  overflow: hidden; /* جلوگیری از بیرون‌زدگی */
  height: inherit;
}

/* ---------- اسلایدشو پس‌زمینه ---------- */
.slideshow {
  position: absolute; /* جایگذاری مطلق */
  inset: 0; /* پر کردن کل فضای والد */
  background-size: cover; /* پوشش کامل */
  background-position: center; /* مرکز تصویر */
  transition: background-image 1s ease-in-out;
  z-index: -1; /* پشت سایر عناصر قرار گیرد */
}

/* نوار عمودی تزئینی سمت راست */
.overlay {
  position: absolute; /* موقعیت مطلق */
  top: 0; /* از بالا صفر */
  bottom: 0; /* از پایین صفر */
  right: 0; /* چسبیده به راست */
  width: 100px; /* عرض ثابت */
  background-image: url("image/rec.svg"); /* تصویر پس‌زمینه */
  background-size: cover; /* پوشش کامل */
  background-position: right; /* تراز به سمت راست */
}


.pool {
  width: 92%; /* عرض ۹۲٪ صفحه */
  height: 400px; /* ارتفاع ثابت */
  background-image: url(image/pool01.svg); /* تصویر اول */
  background-repeat: no-repeat; /* تکرار نشود */
  background-size: cover; /* پوشش کامل */
  margin: 0 auto; /* وسط‌چین افقی */
  transform: translateY(-200px); /* بالا بردن ۲۰۰px */
  position: relative; /* برای pseudo-element لازم است */

  /* سایه ملایم سه جهته */
  box-shadow: 15px 30px 50px -30px var(--color24),
    -15px 30px 50px -30px var(--color24), 0 30px 50px -30px var(--color24);
}

/* تصویر دوم پشت بک‌گراند اصلی */
.pool::before {
  content: ""; /* ایجاد المنت مجازی */
  position: absolute; /* موقعیت‌دهی مطلق */
  top: -30px;
  left: 50px;
  right: 50px;
  bottom: 0;
  background-image: url(image/pool02.svg); /* تصویر دوم */
  background-repeat: no-repeat; /* بدون تکرار */
  background-size: cover; /* پوشش کامل */
  z-index: -1; /* پشت تصویر اول قرار بگیرد */
}

/* ---------- استایل کانتینر المان‌ها ---------- */
.pool-items-container {
  display: flex; /* کنار هم قرار گرفتن المان‌ها */
  justify-content: space-between; /* فاصله مساوی بین المان‌ها */
  align-items: flex-start; /* تراز بالای المان‌ها */
  padding: 8rem 2rem 0rem 2rem; /* فاصله داخلی کانتینر */
}

/* ---------- هر المان ---------- */
.pool-item {
  flex: 1;
  text-align: center;
  padding: 1rem;
  position: relative;
  overflow: visible;
}

/* دایره پشت عکس */
.pool-item::before {
  content: "";
  position: absolute;
  top: calc(1rem + 40px); /* وسط تصویر (80px height / 2) + padding */
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 120px;
  height: 120px;
  background-color: var(--color14);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.3s ease;
}

/* نمایش دایره هنگام هاور */
.pool-item:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

/* عکس */
.pool-item img {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.pool-item:hover img {
  transform: scale(1.05);
}

/* متن‌ها */
.pool-item h3 {
  transition: color 0.3s ease;
}

.pool-item:hover h3 {
  color: var(--color6);
}

/* ---------- خط تزئینی ---------- */
.divider {
  width: 1px; /* عرض خط عمودی */
  background-color: var(--color15); /* رنگ طوسی روشن */
  margin: 50px 1rem; /* فاصله از دو طرف */

  height: 150px;
}

/* ---------- بخش هدر ---------- */
.header-section {
  width: 100%; /* عرض کامل صفحه */
  min-height: 350px; /* حداقل ارتفاع هدر */
  background-color: var(--color16); /* رنگ پس‌زمینه هدر */
  display: flex; /* استفاده از فلکس برای چینش المان‌ها */
  justify-content: center; /* وسط‌چین افقی */
  align-items: center; /* وسط‌چین عمودی */
  padding: 0; /* فاصله بالا و پایین */
  border-radius: 100px 0px; /* گوشه‌های گرد: بالا-چپ 100px، پایین-چپ 0px */
  margin-bottom: 200px; /*فاصله از پایین*/
}

/* ---------- کانتینر کارت‌ها ---------- */
.cards-wrapper {
  display: grid; /* استفاده از گرید برای چینش کارت‌ها */
  grid-template-columns: repeat(3, 1fr); /* همیشه سه ستون مساوی */
  gap: 150px; /* فاصله بین ستون‌ها و ردیف‌ها */
  width: 90%; /* عرض کانتینر ۹۰٪ صفحه */
}

/* ---------- هر جعبه کارت ---------- */
.card-box {
  display: flex; /* فلکس برای چینش عمودی محتوا */
  flex-direction: column; /* چینش عمودی عکس و متن */
  align-items: center; /* مرکز چینش افقی */
}

/* ---------- بدنه کارت ---------- */
.card-item {
  background-color: var(--color5); /* رنگ پس‌زمینه کارت */
  height: 110px; /* ارتفاع ثابت کارت */
  width: 100%; /* عرض کارت پر کردن والد */
  border-radius: 12px; /* گوشه‌های گرد */
  position: relative; /* برای موقعیت‌دهی تصویر داخل کارت */
  overflow: visible; /* اجازه بیرون زدگی تصویر */
}

/* ---------- تصویر داخل کارت ---------- */
.card-item img {
  position: absolute; /* موقعیت مطلق نسبت به والد */
  bottom: 0; /* چسبیده به پایین کارت */
  left: 50%; /* وسط کارت */
  transform: translateX(-50%); /* تصحیح مرکزیت تصویر */
  max-width: calc(100% - 60px); /* حداکثر عرض تصویر با فاصله ۳۰px از هر طرف */
  height: auto; /* ارتفاع خودکار برای حفظ نسبت تصویر */
  max-height: 180px; /* حداکثر ارتفاع تصویر */
}

/* ---------- متن زیر کارت ---------- */
.card-text {
  text-align: center; /* متن مرکز چین */
  margin-top: 40px; /* فاصله از کارت */

  font-weight: 600; /* ضخیم بودن متن */
  color: var(--color4); /* رنگ متن */
  font-size: clamp(1rem, 2vw + 1rem, 1.4rem);
}
.row {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden; /* مهم */
}

.box {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%; /* ثابت بماند */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;

  transition: transform 1.2s cubic-bezier(.77,0,.18,1);
  will-change: transform;
}

.box-left {
  left: 0;
  background-image: url(image/left.png);
  background-size: cover;
  transform: translateX(0);
}

.box-right {
  right: 0;
  background-image: url(image/right.png);
  background-size: cover;
  transform: translateX(0);
}

/* 🔥 باز شدن نرم بدون تغییر width */
.row.open .box-left {
  transform: translateX(-38%);
}

.row.open .box-right {
  transform: translateX(38%);
}

.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--color2);
  padding: 40px 50px;
  border-radius: 10px;
  box-shadow: 0 6px 15px var(--color25);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  min-width: 500px;
  max-width: 700px;
  z-index: 10;

  transition: opacity 0.6s ease, transform 0.6s ease;
}

.row.open .center-content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.hero-section {
  display: flex; /* استفاده از فلکس باکس */
  justify-content: center; /* ترازبندی افقی مرکز */
  align-items: center; /* ترازبندی عمودی مرکز */
  min-height: 100vh; /* حداقل ارتفاع برابر با کل صفحه */
  background: url("image/bg-samaneh.svg") no-repeat; /* تصویر پس‌زمینه بدون تکرار */
  background-size:50%; /* ارتفاع تصویر بیشتر از 100% برای پوشش بخش */
  background-position: right 0px top -60px; /* موقعیت تصویر */
  gap: 10px; /* فاصله بین المان‌های داخلی */
  padding: 150px 20px 50px 20px; /* فاصله داخلی بالا و پایین و چپ و راست */
  box-sizing: border-box; /* شامل شدن padding و border در عرض و ارتفاع */
}

.hero-left {
  width: 30%; /* عرض بخش چپ */
  margin-right: 10%; /* فاصله داخلی چپ و راست */
}

.hero-right {
  width: 40%; /* عرض بخش راست */
  margin-left: 10%; /*فاصله از سمت راست*/
}

.hero-left h2 {
  margin-top: 0; /* حذف فاصله بالای پیش‌فرض */
}

.hero-left p {
  color: var(--color4); /* رنگ متن پاراگراف */
  line-height: 2; /* ارتفاع خط */
  margin-top: 20px; /* فاصله از بالا */
  font-size: 1.5rem; /* اندازه فونت تیتر */
}

.hero-right img {
  width: 80%; /* عرض تصویر برابر با بخش والد */
  height: auto; /* ارتفاع خودکار */
  border-radius: 10px; /* گوشه‌های گرد تصویر */
  margin-right: 20%;
}
/* === کانتینر اصلی === */
.fish-farming {
  width: 100%; /* عرض کامل صفحه */
  min-height: 100vh; /* حداقل ارتفاع کل صفحه */
  background-color: var(--color17); /* رنگ پس‌زمینه خاکستری روشن */
  display: flex; /* استفاده از فلکس باکس */
  flex-direction: column; /* چیدمان عمودی محتوا */
  align-items: center; /* ترازبندی افقی وسط */
  padding-top: 40px; /* فاصله از بالای صفحه */
}

/* === تب‌ها === */
.tab-container {
  display: flex; /* نمایش تب‌ها در یک ردیف */
  justify-content: center; /* مرکز کردن تب‌ها */
  border-radius: 8px; /* گوشه‌های گرد */
  overflow: hidden; /* برای چسبیدن کامل دو تب */
}
.tab {
  width: 200px; /* عرض هر تب */
  padding: 10px 0; /* فاصله داخلی بالا و پایین */
  background-color: var(--color18); /* رنگ پس‌زمینه تب */
  cursor: pointer; /* تغییر نشانگر ماوس به دست */
  transition: background-color 0.3s; /* انیمیشن تغییر رنگ */
  text-align: center; /* متن وسط چین */
}
.tab:first-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
} /* گرد کردن گوشه‌های تب اول از راست */
.tab:last-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
} /* گرد کردن گوشه‌های تب آخر از چپ */
.tab.selected-tab {
  background-color: var(--color5); /* رنگ پس‌زمینه تب انتخاب شده */
  color: var(--color2); /* رنگ متن تب انتخاب شده */
}

/* === محتوای تب: دو ستون کناری === */
.tab-content {
  margin-top: 10px; /* فاصله از تب‌ها */
  padding: 15px; /* فاصله داخلی */
  width: 90%; /* 90 درصد عرض والد */
  display: flex; /* نمایش دو ستون کنار هم */
  gap: 10px; /* فاصله بین ستون‌ها */
  text-align: right; /* ترازبندی متن راست */
}
.tab-content > div {
  flex: 1; /* دو ستون هم‌عرض */
  padding: 10px; /* فاصله داخلی ستون‌ها */
  border-radius: 5px; /* گوشه‌های گرد ستون‌ها */
  position: relative; /* برای موقعیت‌دهی داخلی آیتم‌ها */
  overflow: hidden; /* جلوگیری از بیرون‌زدن محتوا */
  text-align: center; /* متن وسط چین */
}

/* === ستون چپ: نقشه + گرادینت دایره‌ای بیرون‌زن === */
.content-left {
  display: flex;
  justify-content: center;
  align-items: center; /* مرکز کردن محتوا داخل ستون */
  transition: background 0.5s; /* انیمیشن تغییر پس‌زمینه */
  height: 800px; /* ارتفاع ستون برای دیدن کامل گرادینت */
  border-radius: 10px; /* گوشه‌های گرد ستون */
}
.content-left img {
  max-width: 100%; /* عرض حداکثر تصویر برابر با ستون */
  height: auto; /* ارتفاع خودکار */
  position: relative; /* موقعیت نسبی */
  z-index: 1; /* بالاتر از پس‌زمینه */
}

/* === ستون راست: عنوان + توضیح + صحنه دایره‌ای === */
.content-right {
  display: flex;
  flex-direction: column; /* چیدمان عمودی محتوا */
  align-items: center; /* ترازبندی وسط */
  padding: 20px; /* فاصله داخلی */
}
.content-right h2 {
  margin-bottom: 10px; /* فاصله پایین تیتر */
}
.content-right p {
  margin-bottom: 20px; /* فاصله پایین پاراگراف */
  color: var(--color7); /* رنگ متن */
  text-align: right;
}

/* === صحنه دایره‌ای (دایره‌ها + فلش‌ها) === */
.stage {
  width: 100%; /* عرض کامل والد */
  max-width: 650px; /* حداکثر عرض */
  aspect-ratio: 1/1; /* نسبت 1 به 1 برای مربع */
  position: relative; /* برای قرارگیری آیتم‌ها داخل آن */
  margin-top: 10px; /* فاصله از بالای ستون */
}

/* خود آیتم‌های دایره‌ای */
.node {
  width: 100px;
  height: 100px; /* اندازه دایره */
  position: absolute; /* موقعیت مطلق داخل stage */
  border-radius: 50%; /* گرد کردن دایره */
  background: linear-gradient(
    135deg,
    var(--color2),
    var(--color26)
  ); /* گرادینت دایره */
  box-shadow: 0 6px 18px var(--color32); /* سایه */
  display: flex;
  align-items: center;
  justify-content: center; /* مرکز کردن محتوا داخل دایره */
  transform-style: preserve-3d;
  perspective: 1000px; /* برای جلوه سه‌بعدی طبیعی */
}
.node:hover .badge{
  background-color:#0E1D40 !important;
}

/* قاب آیکون برای هاور فلیپ (برگشت آینه‌ای) */
.svg-wrap {
  width: 60%;
  height: 60%; /* اندازه آیکون داخل دایره */
  position: relative;
  transform-style: preserve-3d; /* نگه داشتن عمق سه‌بعدی */
  transition: transform 0.6s ease; /* انیمیشن تغییر حالت */
}
.svg-front,
.svg-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* ترازبندی محتوا وسط */
  backface-visibility: hidden; /* مخفی شدن پشت آیکون هنگام چرخش */
}
/* با خواسته تو: هاور به صورت آینه‌ای (نه rotateY) */
.node:hover .svg-wrap {
  transform: scaleX(-1); /* بازتاب آینه‌ای افقی هنگام هاور */
}

/* شماره badge هر مرحله */
.badge {
  position: absolute; /* موقعیت مطلق */
  width: 24px;
  height: 24px; /* اندازه دایره badge */
  border-radius: 50%; /* گرد کردن دایره */
  color: var(--color2); /* رنگ متن */
  display: flex;
  align-items: center;
  justify-content: center; /* مرکز کردن عدد داخل badge */
  font-size: 12px;
  font-weight: 700; /* ضخامت متن */
  right: 6px;
  top: 6px; /* قرارگیری در گوشه بالای راست دایره */
  z-index: 1; /* بالاتر از پس‌زمینه */
  box-shadow: 0 0 40px 5px var(--color25); /* سایه برای برجسته شدن */
  transition: background 0.3s ease; /* انیمیشن تغییر رنگ پس‌زمینه */
}

/* عنوان کوچک زیر هر دایره */
.caption {
  position: absolute; /* موقعیت مطلق */
  top: 100%; /* درست پایین دایره */
  left: 50%; /* وسط افقی */
  transform: translateX(-50%); /* تنظیم مرکزیت دقیق */

  font-size: var(--font2); /* اندازه متن */
  font-weight: bold; /* ضخامت متن */
  color: var(--color7); /* رنگ متن */
  margin-top: 12px; /* فاصله از دایره */
  text-align: center; /* ترازبندی وسط */
   display: inline-block; /* یا block */
width: 150px;
}

/* فلش به صورت تصویر (arrow.svg) */
.arrow-img {
  position: absolute; /* موقعیت مطلق */
  width: 50px;
  height: 50px; /* اندازه فلش */
  pointer-events: none; /* عدم تاثیر روی کلیک */
  z-index: 0; /* زیر دایره‌ها قرار می‌گیرد */
}
/* کانتینر اصلی ردیف‌ها */
.code-row-container {
  display: flex; /* نمایش به صورت فلکس */
  flex-wrap: wrap; /* اجازه شکست ردیف‌ها در موبایل */
  justify-content: space-between; /* فاصله مساوی بین کارت‌ها */
  padding: 50px 100px; /* فاصله داخلی بالا/پایین و چپ/راست */
  gap: 50px; /* فاصله بین کارت‌ها */
}

/* کارت پایه */
.code-card1 {
  position: relative; /* برای موقعیت‌دهی عناصر داخلی */
  background: var(--color2); /* رنگ پس‌زمینه سفید */
  border-radius: 10px; /* گوشه‌های گرد */
  padding: 30px; /* فاصله داخلی کارت */
  flex: 1 1 300px; /* انعطاف فلکس و حداقل اندازه */
  min-width: 300px; /* حداقل عرض کارت */
}

/* کارت ویدئو */
.code-video-card {
  display: flex; /* فلکس برای وسط چین کردن محتوا */
  justify-content: center; /* مرکز افقی */
  align-items: center; /* مرکز عمودی */
}

/* ویدئو داخل کارت */
.video-container {
  /* عرض ویدئو 90 درصد کارت */
  border-radius: 10px; /* گوشه‌های گرد */
  /* ارتفاع ثابت */
  z-index: 5; /* قرار گرفتن روی عناصر دیگر */

  width: 100%;
  aspect-ratio: 16 / 9; /* نسبت تصویر */
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* تصویر روی ویدئو */
.code-video-card img {
  position: absolute; /* موقعیت مطلق نسبت به والد */
  top: -50px; /* جابجایی به بالا */
  right: -30px; /* جابجایی به راست خارج از کارت */
  width: 150px; /* عرض تصویر */
  height: 150px; /* ارتفاع تصویر */
}

/* کارت کاروسل */
.code-slider {
  position: relative; /* برای موقعیت‌دهی مطلق اسلایدها */
  width: 100%; /* عرض کامل کارت */
  min-height: 300px; /* حداقل ارتفاع */
  overflow: hidden; /* مخفی کردن اسلایدهای خارج از محدوده */
}

/* هر اسلاید داخل کاروسل */
.code-slide {
  position: absolute; /* روی هم قرار گرفتن اسلایدها */
  top: 0; /* بالای کارت */
  left: 0; /* چپ کارت */
  width: 100%; /* عرض کامل */
  box-sizing: border-box; /* محاسبه padding در عرض */
  padding: 20px; /* فاصله داخلی اسلاید */
  opacity: 0; /* مخفی شدن پیش‌فرض */
  transition: opacity 0.5s ease-in-out; /* انیمیشن محو شدن */
}

/* اسلاید فعال */
.code-slide.active {
  opacity: 1; /* نمایش اسلاید فعال */
}

/* تیتر هر اسلاید */
.code-slide h2 {
  margin-top: 20px; /* فاصله بالای تیتر */
}

/* متن هر اسلاید */
.code-slide p {
  line-height: 1.5; /* ارتفاع خط */
  margin: 5px 0; /* فاصله عمودی بین پاراگراف‌ها */
}

/* کانتینر نشانگرها */
.code-slider-indicators {
  position: absolute; /* قرارگیری مطلق نسبت به کارت */
  bottom: 20px; /* فاصله از پایین کارت */
  left: 50px; /* فاصله از چپ کارت */
  display: flex; /* نمایش افقی نشانگرها */
  gap: 5px; /* فاصله بین نشانگرها */
  align-items: center; /* تراز عمودی مرکز */
}

/* هر نشانگر */
.code-slider-indicators div {
  width: 20px; /* عرض مربع نشانگر */
  height: 20px; /* ارتفاع مربع نشانگر */
  background-color: var(--color19); /* رنگ پس‌زمینه */
  border-radius: 3px; /* گوشه‌های کمی گرد */
  flex-shrink: 0; /* جلوگیری از کوچک شدن */
  background-size: contain; /* اندازه تصویر درون نشانگر */
  background-position: center; /* مرکز تصویر درون نشانگر */
  background-repeat: no-repeat; /* عدم تکرار تصویر */
  transition: all 0.3s ease; /* انیمیشن تغییرات */
}

/* نشانگر فعال */
.code-slider-indicators div.active {
  width: 30px; /* بزرگتر شدن عرض */
  height: 30px; /* بزرگتر شدن ارتفاع */
  background-image: url("image/fish-carousel.svg"); /* تصویر نشانگر فعال */
  background-color: transparent; /* حذف رنگ پس‌زمینه */
}
/* ظرف کلی برای وسط‌چین کردن محتوا */
.report-wrapper {
  display: flex; /* فعال‌سازی فلکس */
  justify-content: center; /* وسط‌چین افقی */
  align-items: center; /* وسط‌چین عمودی */
  height: auto; /* پر کردن کل ارتفاع صفحه */
}

/* ظرف گزارش */
.report-container {
  width: 90%; /* عرض ۹۰٪ صفحه */
  max-width: 800px; /* حداکثر عرض ۸۰۰ پیکسل */
  height: auto; /* ارتفاع خودکار */
  margin: 0 auto; /* وسط‌چین کردن ظرف */
  background-image: url(image/bg-report.svg);
  background-repeat: no-repeat;
  background-position: center top 150px;
}

/* متن بالای کروسل */
.report-text {
  text-align: center; /* وسط‌چین کردن متن */
}
.report-text h2 {
  padding: 30px 0px;
}
.report-text p {
  padding-bottom: 30px;
}
/* ظرف کروسل */
.report-carousel {
  position: relative; /* موقعیت نسبی برای کنترل عناصر داخلی */
  width: 100%; /* عرض کامل ظرف */
  height: 500px; /* ارتفاع ثابت ۵۰۰ پیکسل */
  overflow: visible; /* نمایش عناصر بیرون زده از ظرف */
  display: flex; /* فلکس‌باکس */
  justify-content: center; /* قرار دادن محتوا در مرکز افقی */
  align-items: center; /* قرار دادن محتوا در مرکز عمودی */
}

/* اسلایدها */
.report-slide {
  position: absolute; /* موقعیت مطلق نسبت به ظرف والد */
  top: 0; /* از بالا ۰ پیکسل فاصله */
  left: 50%; /* وسط افقی ظرف */
  transform: translateX(-50%); /* انتقال به مرکز واقعی */
  width: 100%; /* عرض ۸۰٪ ظرف والد */
  height: 100%; /* ارتفاع کامل ظرف والد */
  background: var(--color2); /* پس‌زمینه سفید */
  border-radius: 10px; /* گوشه‌های گرد */
  box-shadow: 0 4px 10px var(--color21); /* سایه ملایم */
  opacity: 0.3; /* شفافیت کم در حالت عادی */
  filter: blur(2px); /* تار شدن تصویر */
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease; /* انیمیشن نرم */
  display: flex; /* فلکس‌باکس */
  flex-direction: column; /* چینش عمودی */
  justify-content: center; /* وسط‌چین عمودی محتوا */
  align-items: center; /* وسط‌چین افقی محتوا */
  text-align: center; /* متن وسط‌چین */
  padding: 30px; /* فاصله داخلی ۳۰ پیکسل */
}

/* تصویر داخل اسلاید */
.report-slide img {
  max-width: 100%; /* تصویر بیشتر از ظرف نشود */
  max-height: 200px; /* حداکثر ارتفاع ۲۰۰ پیکسل */
  border-radius: 10px; /* گوشه‌های گرد برای تصویر */
}

/* متن داخل اسلاید */
.report-slide p {
  margin-top: 10px; /* فاصله از بالا */
  font-size: var(--font1); /* اندازه فونت ۱۶ پیکسل */
  padding: 0 10px; /* فاصله داخلی افقی ۱۰ پیکسل */
}

/* اسلاید فعال */
.report-active {
  opacity: 1; /* کاملاً شفاف */
  filter: blur(0); /* حذف تاری */
  z-index: 3; /* قرار گرفتن در بالاترین لایه */
  transform: translateX(-50%) scale(1); /* مرکز و بزرگنمایی طبیعی */
}

/* اسلاید سمت چپ */
.report-left-slide {
  transform: translateX(-85%) scale(0.85); /* حرکت به چپ و کوچک‌تر شدن */
  z-index: 2; /* لایه دوم */
}

/* اسلاید سمت راست */
.report-right-slide {
  transform: translateX(-15%) scale(0.85); /* حرکت به راست و کوچک‌تر شدن */
  z-index: 2; /* لایه دوم */
}

/* دکمه‌های جابجایی */
.report-btn {
  position: absolute; /* موقعیت مطلق */
  top: 50%; /* وسط عمودی ظرف */
  transform: translateY(-50%); /* انتقال برای مرکز دقیق */
  width: 30px; /* عرض دکمه */
  height: 30px; /* ارتفاع دکمه */
  border-radius: 50%; /* دایره‌ای شدن دکمه */
  background: var(--color30); /* رنگ پس‌زمینه آبی روشن */
  border: none; /* بدون حاشیه */
  display: flex; /* فلکس‌باکس */
  justify-content: center; /* وسط‌چین افقی آیکن */
  align-items: center; /* وسط‌چین عمودی آیکن */
  cursor: pointer; /* تغییر نشانگر موس به دست */
  font-size: 18px; /* اندازه فونت */
  font-weight: bold; /* ضخیم شدن فونت */
  z-index: 5; /* لایه بالاتر از اسلایدها */
  color: var(--color37); /* رنگ آیکن */
}

.report-btn.report-prev {
  left: -180px;
} /* دکمه قبلی با فاصله از سمت چپ */
.report-btn.report-next {
  right: -180px;
} /* دکمه بعدی با فاصله از سمت راست */
.report-btn-place {
  text-align: center;
  padding: 105px 0px 0px 0px;
}
/* بخش توضیحات پایین هر اسلاید */
.report-text-carousel {
  text-align: right; /* راست‌چین کردن متن */
  background-color: var(--color20); /* پس‌زمینه خاکستری روشن */
  padding: 10px; /* فاصله داخلی ۱۰ پیکسل */
  width: inherit; /* برابر با عرض والد */
  margin-top: 20px; /* فاصله از بالا */
  height: 200px; /* ارتفاع ثابت ۲۰۰ پیکسل */
}

/* تیتر توضیحات */
.report-text-carousel h3 {
  color: var(--color9); /* رنگ تیتر */
}

/* پاراگراف توضیحات */
.report-text-carousel .param {
  color: var(--color10); /* رنگ متن خاکستری تیره */
  padding: 0px; /* بدون فاصله داخلی */
  text-align: justify; /* متن تراز شده */
}
/* استایل اصلی wrapper کل صفحه */
.main-wrapper {
  position: relative; /* برای موقعیت‌دهی داخلی */
  width: 100%; /* عرض کل صفحه */
  height: 600px; /* ارتفاع مشخص برای پس‌زمینه و دایره‌ها */
  overflow: hidden; /* جلوگیری از خارج شدن عناصر */
  display: flex; /* استفاده از Flexbox برای چینش */
  justify-content: center; /* چینش عمودی عناصر به پایین */
  align-items: center; /* وسط چین شدن عناصر در راستای عرض */
  flex-direction: column; /* چینش عناصر به صورت ستونی */
  padding-top: 200px;
}

/* استایل wrapper دایره‌ها */
.circle-wrapper {
  position: relative; /* برای لایه‌بندی روی svg */
  z-index: 2; /* قرار گرفتن بالای svg */
  display: flex; /* Flexbox برای چینش دایره‌ها */
  justify-content: center; /* وسط چین کردن افقی دایره‌ها */
  flex-wrap: wrap; /* اجازه خط جدید در صورت کم بودن عرض */
  flex-direction: row-reverse; /* معکوس کردن ترتیب دایره‌ها */
  gap: 200px; /* فاصله بین دایره‌ها */
  margin-bottom: 50px; /* فاصله پایین از انتهای wrapper */
}

/* هر جعبه دایره و متن */
.circle-box {
  display: flex; /* Flexbox برای چینش عمودی دایره و متن */
  flex-direction: column; /* چینش عمودی */
  align-items: center; /* وسط چین کردن افقی محتوا */
  gap: 30px; /* فاصله بین دایره و متن */
}

/* استایل خود دایره‌ها */
.circle {
  width: 150px; /* عرض دایره */
  height: 150px; /* ارتفاع دایره */
  border-radius: 50%; /* دایره کامل */
  background: linear-gradient(
    to left,
    var(--color33),
    var(--color34)
  ); /* گرادیانت سبک دایره */
  border: 2px solid var(--color2); /* حاشیه سفید */
  display: flex; /* Flexbox برای وسط چین کردن متن */
  justify-content: center; /* وسط چین افقی متن */
  align-items: center; /* وسط چین عمودی متن */
  font-size: 3rem; /* سایز فونت متن داخل دایره */
  font-weight: bold; /* ضخیم بودن متن */
  color: var(--color2); /* رنگ متن */
  transition: transform 0.3s ease; /* انیمیشن کوچک و بزرگ شدن */
}

/* متن زیر دایره‌ها */
.label {
  font-size: 2.5rem; /* اندازه فونت */
  text-align: center; /* وسط چین کردن متن */
  color: var(--color2); /* رنگ متن */
}

.bg-nahang {
  background-image: url(image/nahang.svg); /* تصویر پس‌زمینه */
  background-repeat: no-repeat; /* عدم تکرار تصویر */
  background-position: center center; /* مرکز چین کردن تصویر */
  width: 100%; /* پهنای کل صفحه */
  height: 100vh; /* ارتفاع کل صفحه */
  background-size: cover; /* پر کردن کل صفحه */
  display: flex; /* فعال‌سازی فلکس */
  justify-content: center; /* وسط چین افقی محتوا */
  align-items: center; /* وسط چین عمودی محتوا */
  margin: 60px 0; /*فاصله از بالا*/
}

/* ========================== */
/* کانتینر اصلی دو بخش */
/* ========================== */
.main-container2 {
  display: flex; /* فعال‌سازی فلکس */
  flex-direction: row-reverse; /* راست به چپ */
  justify-content: center; /* وسط چین افقی */
  align-items: flex-start; /* وسط چین عمودی */
  gap: 50px; /* فاصله بین دو باکس */
}

/* ========================== */
/* باکس متن سمت راست */
/* ========================== */
.right-section {
  width: var(--box-width); /* عرض باکس */
  height: var(--box-height); /* ارتفاع باکس */
  display: flex; /* فعال‌سازی فلکس */
  flex-direction: column; /* چینش عمودی */
  justify-content: center; /* وسط چین عمودی محتوا */
  align-items: flex-start; /* متن از سمت چپ شروع شود */
  text-align: right; /* متن راست چین */
  padding: 0 20px 20px 20px; /* فاصله داخلی */
  box-sizing: border-box; /* شامل padding در اندازه */
}

/* عنوان داخل باکس متن */
.right-section h2 {
  margin: 0 0 20px 0; /* فاصله پایین عنوان */
  color: #151515;
}

/* پاراگراف توضیح */
.right-section p {
  margin: 0 0 30px 0; /* فاصله پایین پاراگراف */
   color: #151515;
}

/* ========================== */
/* باکس لوزی‌ها سمت چپ */
/* ========================== */
.diamond-section {
  width: var(--box-width); /* عرض باکس لوزی‌ها */
  height: var(--box-height); /* ارتفاع باکس لوزی‌ها */
  display: flex; /* فعال‌سازی فلکس */
  justify-content: center; /* وسط چین افقی */
  align-items: center; /* وسط چین عمودی */
  position: relative; /* موقعیت نسبی برای لوزی‌ها */
  box-sizing: border-box; /* شامل padding و border در اندازه */
}

/* کانتینر لوزی‌ها */
.diamond-container {
  position: relative; /* موقعیت نسبی برای لوزی‌ها */
  width: calc(var(--diag) * 3 / 2 + var(--gap) * 2); /* عرض کانتینر */
  height: calc(var(--diag) * 3 / 2 + var(--gap) * 2); /* ارتفاع کانتینر */
}

/* هر لوزی */
.diamond {
  position: absolute; /* موقعیت مطلق در کانتینر */
  width: var(--size); /* عرض لوزی */
  height: var(--size); /* ارتفاع لوزی */
  background: linear-gradient(
    135deg,
    var(--color17) 0%,
    var(--color31) 100%
  ); /* گرادینت پس‌زمینه */
  transform: rotate(45deg); /* چرخش لوزی */

  transition: filter 0.3s ease; /* افکت هنگام هاور */
  display: flex; /* فلکس برای وسط چین تصویر */
  justify-content: center; /* وسط چین افقی تصویر */
  align-items: center; /* وسط چین عمودی تصویر */
  overflow: hidden; /* جلوگیری از بیرون زدن تصویر */
}

/* تصویر داخل لوزی */
.diamond img {
  width: 60%; /* اندازه تصویر داخل لوزی */
  height: auto;
  transform: rotate(-45deg); /* عکس را معکوس بچرخانیم تا افقی باشد */
  filter: grayscale(100%); /* خاکستری کردن تصویر پیش‌فرض */
}
.diamond:hover img {
  filter: grayscale(0%); /* رنگی شدن هنگام هاور */
}
/* موقعیت لوزی‌ها */
.d1 {
  top: 0;
  left: 0;
}
.d2 {
  top: 0;
  left: calc(var(--diag) + var(--gap));
}
.d3 {
  top: calc(var(--diag) / 2 + var(--gap) / 2);
  left: calc(var(--diag) / 2 + var(--gap) / 2);
}
.d4 {
  top: calc(var(--diag) + var(--gap));
  left: 0;
}
.d5 {
  top: calc(var(--diag) + var(--gap));
  left: calc(var(--diag) + var(--gap));
}
.news-container {
  width: 70%; /* عرض اصلی محتوا */

  margin: 20px auto 0px auto; /* مرکز چین کردن محتوا */
}

.news-heading {
  text-align: center; /* وسط چین کردن تیتر */
  margin: 50px 0; /* فاصله بالا و پایین */
}

/* ==========================================
   ردیف باکس‌ها
========================================== */
.news-row {
  display: flex; /* استفاده از فلکس باکس */
  flex-wrap: wrap; /* اجازه شکست ردیف‌ها */
  gap: 40px; /* فاصله بین باکس‌ها */
  margin-bottom: 40px; /* فاصله پایین ردیف */
}

/* ==========================================
   باکس خبر
   - کادر 1px طوسی
   - هاور: آبی
========================================== */
.news-box {
  flex: 1 1 calc(50% - 20px); /* دو باکس در یک ردیف */
  background: var(--color2); /* پس‌زمینه سفید */
  border: 1px solid var(--color15); /* کادر طوسی */
  border-radius: 24px; /* گردی گوشه‌ها */
  overflow: hidden; /* جلوگیری از بیرون زدن محتوا */
  display: flex; /* فلکس باکس برای محتوا */
  transition: border-color 0.3s ease; /* انیمیشن تغییر رنگ کادر */
  height: 200px;
}

.news-box:hover {
  border-color: var(--color5); /* تغییر رنگ کادر هنگام هاور */
}

/* ==========================================
   بخش تصویر
   - شامل تصویر و خط محدب سمت چپ
========================================== */
.img-wrap {
  position: relative; /* برای قرار دادن خط محدب */
  width: 200px; /* عرض تصویر */

  overflow: hidden; /* جلوگیری از بیرون زدن تصویر */
}

/* خط تزیینی خمیده سمت چپ */
.img-border {
  position: absolute; /* قرار گرفتن دقیق روی تصویر */
  top: 0; /* بالا تراز شدن */
  left: -10px; /* فاصله از چپ */
  height: 100%; /* ارتفاع کل تصویر */
  width: 50px; /* پهنای SVG خط */
}

.news-box .img-border path {
  stroke-width: 4; /* ضخامت خط */
  transition: all 0.3s ease; /* انیمیشن تغییرات */
  z-index: 2; /* قرار گرفتن روی تصویر */
}

/* افزایش پهنا روی هاور */
.news-box:hover .img-border path {
  stroke-width: 20; /* ضخامت خط بیشتر هنگام هاور */
}

/* تصویر */
.img-wrap img {
  width: 100%; /* پر کردن کل باکس تصویر */
  height: 100%; /* پر کردن ارتفاع */
  object-fit: cover; /* برش مناسب تصویر */
  display: block; /* بلاک برای حذف فاصله */
  clip-path: ellipse(92% 100% at 100% 50%); /* محدب سمت راست تصویر */
}

/* ==========================================
   محتوای سمت چپ تصویر
========================================== */
.news-content {
  padding: 15px; /* فاصله داخلی محتوا */
  display: flex; /* فلکس باکس */
  flex-direction: column; /* چیدمان عمودی */
  justify-content: space-between; /* فاصله بین عناصر */
  flex: 1; /* پر کردن فضای باقیمانده */
}

.news-content h4 {
  margin: 0 0 10px; /* فاصله پایین تیتر */
  color: var(--color4); /* رنگ تیتر */
}

.news-content p {
  flex: 1; /* اشغال فضای موجود */
  margin: 0 0 10px; /* فاصله پایین متن */
  color: var(--color7); /* رنگ متن */
  font-size: 0.95rem; /* اندازه فونت */
}

/* ==========================================
   فوتر باکس: تاریخ و دکمه ادامه مطلب
========================================== */
.footer-box {
  display: flex; /* فلکس باکس */
  justify-content: space-between; /* فاصله بین عناصر */
  align-items: center; /* تراز عمودی */
}

.date {
  display: flex; /* فلکس باکس */
  align-items: center; /* تراز عمودی */
  font-size: 0.85rem; /* اندازه فونت */
  color: var(--color11); /* رنگ متن */
}

.date::before {
  content: ""; /* افزودن آیکون قبل متن */
  margin-left: 5px; /* فاصله از متن */
}
.date svg{
  margin-left: 5px;
}

.read-more {
  display: inline-flex; /* فلکس برای متن و آیکون */
  align-items: center; /* تراز عمودی */
  padding: 10px; /* فاصله داخلی */
  background: transparent; /* بدون پس‌زمینه */
  color: var(--color5); /* رنگ متن */
  text-decoration: none; /* حذف خط زیر متن */
  font-size: 0.8rem; /* اندازه فونت */
  transition: all 0.3s ease; /* انیمیشن تغییرات */
}

.read-more:hover {
  background: var(--color5); /* پس‌زمینه آبی هنگام هاور */
  color: var(--color2); /* رنگ متن سفید */
  border-radius: 12px; /* گردی گوشه‌ها */
}
.read-more:hover svg path {
  fill: var(--color2);
}
.caret {
  margin-right: 4px; /* فاصله آیکون از متن */
}
.footer {
  color: var(--color2);
  padding: 0rem 100px;
  width: 100%;
/* برای سازگاری بهتر */
  border-radius: 0 0 20px 20px;
    position: relative;
  z-index: 1; /* روی SVG قرار بگیرد */
}
.footer-wrapper {
  position: relative;
  overflow: hidden; /* برای جلوگیری از فضای اضافه */
}

.footer-bg {
  position: absolute;
  bottom: 0; /* یا top: 0 بسته به طراحی */
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* ---------- ردیف اول ---------- */
.row-footer1 {
  display: flex; /* چینش افقی ستون‌ها */
  gap: 20px; /* فاصله بین ستون‌ها */
  margin-bottom: 1.5rem; /* فاصله پایین ردیف */
  padding-top: 250px;
}

.col-footer {
  flex: 1; /* ستون‌ها با اندازه برابر */
  padding: 1rem; /* فاصله داخلی ستون */
  border-radius: 8px; /* گوشه‌های گرد */
}

/* عنوان در اولین ستون */
.quick-access-title {
  font-size: 1.2rem; /* اندازه فونت عنوان */
  font-weight: bold; /* ضخامت فونت */
  margin-bottom: 3rem; /* فاصله پایین عنوان */
}

.quick-access-title .white {
  color: var(--color2); /* رنگ سفید */
}

.quick-access-title .aqua {
  color: var(--color5); /* رنگ آبی آکوا */
}

/* لیست دسترسی سریع */
.quick-access-list {
  list-style: none;

  padding-right: 0px;
}

.quick-access-list li {
  margin-bottom: 1.5rem; /* فاصله بین آیتم‌ها */
  color: var(--color2); /* رنگ متن */
  display: flex;
  align-items: center; /* تراز عمودی */
  gap: 10px; /* فاصله بین بولت و متن */
}
.quick-access-list li::before {
  content: "•"; /* یا هر کاراکتر دلخواه */
  font-size: var(--font3);
  color: var(--color5);
}
.quick-access-list li::marker {
  color: var(--color5); /* رنگ بولت */
  font-size: 32px;
  vertical-align: middle;
}

.quick-access-list a {
  color: var(--color2); /* رنگ لینک */
  text-decoration: none; /* بدون زیرخط */
  font-size: clamp(0.8rem, 2vw + 0.8rem, 1.3rem);
}

.quick-access-list a:hover {
  color: var(--color5); /* تغییر رنگ لینک هنگام هاور */
}

/* بخش خبرنامه */
.newsletter {
  height: auto; /* ارتفاع خودکار */
  width: 100%; /* عرض کامل */
  margin-top: 0px;
  margin-bottom: 0px;
}

.subscribe-box {
  display: flex; /* چینش افقی ورودی و دکمه */
  align-items: top; /* تراز عمودی */
  justify-content: space-between; /* فاصله بین ورودی و دکمه */
  background: var(--color2); /* پس‌زمینه سفید */
  border-radius: 50px; /* گوشه‌های کپسولی */
  padding: 5px; /* فاصله داخلی */
  max-width: 400px; /* حداکثر عرض */
  margin: 20px auto 30px auto; /* فاصله بالا و پایین و وسط چین */
  box-shadow: 0 2px 8px var(--color21); /* سایه */
}

.subscribe-box input {
  flex: 1; /* عرض کامل به جز دکمه */
  border: none; /* بدون حاشیه */
  outline: none; /* بدون خط دور فوکوس */
  font-size: var(--font2); /* اندازه فونت */
  padding: 10px 15px; /* فاصله داخلی */
  border-radius: 50px; /* گوشه‌های کپسولی */
}

.subscribe-box button {
  display: flex; /* چینش داخلی دکمه */
  align-items: center; /* تراز عمودی متن و آیکن */
  gap: 5px; /* فاصله بین متن و آیکن */
  background: var(--color5); /* پس‌زمینه دکمه */
  border: none; /* بدون حاشیه */
  padding: 10px 20px; /* فاصله داخلی */
  border-radius: 50px; /* گوشه‌های کپسولی */
  color: var(--color2); /* رنگ متن سفید */
  font-weight: bold; /* ضخامت فونت */
  cursor: pointer; /* نشانگر دست */
  transition: background 0.3s ease; /* تغییر نرم رنگ هنگام هاور */
}

.subscribe-box button:hover {
  background: var(--color28); /* رنگ آبی آکوا تیره‌تر هنگام هاور */
}

.subscribe-box svg {
  width: 16px; /* اندازه آیکن */
  height: 16px;
  fill: var(--color2); /* رنگ سفید */
}

/* ---------- ردیف دوم ---------- */
.row-footer2 {
  display: flex; /* چینش افقی ستون‌ها */
  gap: 20px; /* فاصله بین ستون‌ها */
  justify-content: space-between; /* فاصله بین ستون‌ها */
  align-items: flex-start; /* تراز بالای ستون‌ها */
}

/* ستون راست */
.col-footer-right {
  flex: 3; /* ستون سه برابر ستون چپ */
  text-align: right; /* متن راست‌چین */
  padding: 1rem; /* فاصله داخلی */
  border-radius: 8px; /* گوشه‌های گرد */
  display: flex; /* چینش افقی تصویر و متن */
  align-items: center; /* تراز عمودی */
  gap: 15px; /* فاصله بین تصویر و متن */
  max-width: 70%; /* حداکثر عرض ستون */
  transform: translateY(-50px); /* جابجایی بالاتر */
}

/* ستون چپ */
.col-footer-left {
  flex: 1; /* اندازه ستون */
  text-align: left; /* متن چپ‌چین */
  padding: 1rem; /* فاصله داخلی */
  border-radius: 8px; /* گوشه‌های گرد */
  display: flex; /* چینش افقی تصاویر */
  align-items: flex-start; /* تراز بالای تصویرها */
  gap: 10px; /* فاصله بین تصاویر */
  justify-content: flex-end; /* چپ چین در راست چین */
}

/* تصویر ستون راست */
.footer-img {
  width: 200px;
  height: 200px;
}

/* متن ستون راست */
.footer-text {
  margin: 0;
  line-height: 50px;
  font-size: clamp(1rem, 2vw + 1rem, 1.4rem);
  text-align: justify;
}

/* تصاویر ستون چپ */
.namad-img-footer {
  width: 80px;
  height: 80px;
  background: var(--color2); /* پس‌زمینه سفید */
  padding: 5px; /* فاصله داخلی */
  border-radius: 12px; /* گوشه‌های گرد */
}

/* ---------- ردیف سوم ---------- */
.row-footer3 {
  text-align: center; /* متن وسط چین */
  font-size: 0.9rem; /* اندازه فونت */
  color: var(--color2); /* رنگ متن سفید */
  padding: 20px 0px;
  margin: 0px;
}

/* نقشه */
.map {
  width: 100%; /* عرض کامل */
  height: 200px; /* ارتفاع */
  margin: 20px 0px; /* فاصله بالا و پایین */
  border-width: 0px; /* بدون حاشیه */
  border-radius: 10px; /* گوشه‌های گرد */
}
.contact-align {
  display: flex;
  align-items: center; /* تراز عمودی وسط */
  gap: 8px; /* فاصله بین آیکون و متن */
  color: var(--color2); /* رنگ متن (در صورت نیاز) */
}
/* ریسپانسیو برای موبایل و تبلت */
@media (max-width: 992px) {
  .mobile-menu li a.active {
    border-bottom: none !important; /* حذف خط زیر آیتم */
    background: var(--color29); /* پس‌زمینه روشن */
    color: var(--color5); /* رنگ آبی */
  }
.quick-access-title{
  margin-top: 0px;
  margin-bottom: 0px;
}
.title1{
  margin-top: 150px;
}
.col-footer {

  padding:0px 1rem; /* فاصله داخلی ستون */

}
.row-footer1 {
margin-bottom: 0;
}
  .menu,
  .phone {
    display: none; /* در موبایل منوی اصلی و تلفن مخفی می‌شود */
  }

  .hamburger {
    display: flex; /* آیکن همبرگر نمایش داده می‌شود */
  }
  .main-container {
    flex-direction: column; /* ستون‌ها زیر هم */
    height: auto; /* ارتفاع کل صفحه */
  }
  .info-panel {
    flex: 1 1 100%; /* عرض کامل */
    text-align: center; /* متن وسط‌چین */
    padding: 1rem 0;
  }
  .info-panel h1 {
    margin-right: 0;
    margin-top: 80px;

  }
  .info-panel p {
    margin-right: 0;
    width: 98%;
    margin: 0 1%;
    margin-bottom: 50px;
  }
  .mr-0 {
    margin-right: 0.5rem;
  }
  .visual-panel {
    display: none; /* پنهان کردن ستون تصویری */
  }
  .overlay {
    width: 60px; /* نوار باریک‌تر */
  }
  .pool {
    background-image: none; /* حذف تصویر اصلی pool در موبایل */
    box-shadow: none;
  }
  .pool::before {
    background-image: none; /* حذف تصویر دوم */
  }
  .pool-items-container {
    flex-direction: column; /* زیر هم قرار گرفتن المان‌ها */
    align-items: center; /* مرکز چینش */
  }
  .divider {
    width: 50px; /* کوتاه شدن خط */
    height: 2px; /* ضخامت خط افقی */
    margin: 1rem 0; /* فاصله بالا و پایین */
  }
  .cards-wrapper {
    grid-template-columns: 1fr; /* کارت‌ها زیر هم قرار بگیرند */
    row-gap: 50px; /* فاصله بیشتر بین کارت‌ها */
  }
  .card-text {
    margin-top: 30px; /* کاهش فاصله متن از کارت */
    font-size: var(--font2); /* کاهش اندازه فونت */
  }

  .box-left,
  .box-right {
    display: none;
  } /* باکس سمت چپ، نصف عرض */
  .row {
    height: 300px;
  }
  .header-section {
    margin-top: 700px;
  }
  .hero-section {
    flex-direction: column; /* تغییر جهت فلکس به ستونی */
    padding: 30px 20px; /* کاهش padding */
    gap: 20px; /* افزایش فاصله بین المان‌ها */
    min-height: auto; /* ارتفاع خودکار */
    background-size: cover; /* تصویر پس‌زمینه کل بخش را بپوشاند */
    background-position: top center; /* موقعیت تصویر در بالا و مرکز */
  }

  .hero-left,
  .hero-right {
    width: 100%; /* عرض کامل در موبایل */
    text-align: center; /* متن‌ها وسط چین شوند */
  }

  .hero-right img {
    max-width: 80%; /* حداکثر عرض تصویر کمتر از کل صفحه */
    margin: 0 auto; /* مرکز کردن تصویر */
  }
  .tab-container {
    flex-direction: column; /* نمایش تب‌ها ستونی */
    align-items: center; /* ترازبندی وسط */
  }
  .tab {
    width: 100%; /* تب‌ها عرض کامل */
    border-radius: 8px !important; /* حفظ گوشه‌ها */
    padding:20px;
  }
  .tab-content {
    flex-direction: column;
  } /* ستون‌ها ستونی شوند */
  .tab-content > div {
    width: 100%;
  } /* هر ستون عرض کامل */
  .node {
    width: 80px;
    height: 80px;
  } /* کوچک شدن دایره‌ها */
  .badge {
    width: 22px;
    height: 22px;
    font-size: 11px;
  } /* کوچک شدن badge */
  .caption {
    font-size: 12px;
  } /* کوچک شدن متن زیر دایره */
  .arrow-img {
    width: 36px;
    height: 36px;
  } /* کوچک شدن فلش‌ها */

  .code-row-container {
    flex-direction: column; /* چیدمان عمودی کارت‌ها */
  }

  .code-card1 {
    flex: 1 1 100%; /* کارت‌ها عرض کامل داشته باشند */
  }
  .slider-indicators {
    bottom: 0px;
  }
  .slide p {
    font-size: 0.9rem;
  }
  .report-carousel {
    height: 400px;
    overflow: hidden; /* جلوگیری از بیرون زدگی */
  }

  .report-slide {
    width: 80%; /* کمتر از container */
    padding: 20px;
    position: absolute; /* برای حفظ عملکرد کروسل */
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(1);
  }

  .report-left-slide,
  .report-right-slide {
    transform: translateX(-50%) scale(0.8); /* کوچک و کنار اسلاید وسط */
    opacity: 0.5;
    z-index: 1;
  }

  .report-active {
    transform: translateX(-50%) scale(1); /* اسلاید وسط */
    opacity: 1;
    z-index: 2;
  }

  /* دکمه‌ها نزدیک اسلایدها */
  .report-btn.report-prev {
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
  }
  .report-btn.report-next {
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
  }

  .report-slide img {
    max-height: 150px;
  }

  .report-text-carousel {
    height: auto;
    margin-top: 10px;
  }
  .circle-wrapper {
    flex-direction: column-reverse; /* چینش عمودی و معکوس */
    gap: 30px; /* فاصله بین دایره‌ها کمتر شود */
    margin-bottom: 20px; /* فاصله پایین کمتر */
  }
  .main-wrapper {
    margin-top: 100px;
    background-color: var(--color15);
    height: auto;
  }
  .background-svg {
    display: none;
  }
  .main-container2 {
    flex-direction: column; /* چینش عمودی */
    gap: 30px; /* فاصله بین بخش‌ها */
  }

  .right-section,
  .diamond-section {
    width: 100%; /* عرض کامل صفحه */
    height: auto; /* ارتفاع خودکار */
  }

  .diamond-container {
    display: flex; /* نمایش فلکس */
    flex-direction: column; /* چینش عمودی لوزی‌ها */
    align-items: center; /* وسط چین افقی لوزی‌ها */
    gap: 80px; /* فاصله بین لوزی‌ها */
    margin: 0 auto; /* وسط چین کانتینر */
    height: auto;
    width: auto;
  }

  .diamond {
    position: static; /* موقعیت استاتیک برای چینش عمودی */
    width: var(--size); /* اندازه لوزی */
    height: var(--size);
    transform: rotate(45deg); /* چرخش لوزی */
  }

  /* برای دیده شدن کامل اولین و آخرین لوزی */
  .diamond:first-child {
    margin-top: 1000px; /* جایگزین مقدار قبلی */
  }

  .diamond:last-child {
    margin-bottom: calc(var(--size) / 2);
  }
  .bg-nahang {
    margin-top: 50px; /*فاصله از بالا*/
  }
  .news-box {
    flex: 1 1 100%; /* تک ستونه کردن باکس‌ها */
  }

  .img-wrap {
    width: 120px; /* تغییر عرض تصویر */
    min-width: 120px; /* حداقل عرض */
  }
  .news-container {
    margin-top: 1000px;
  }
  .img-border {
    left: -13px; /* فاصله از چپ */
  }
  .footer {
    padding: 2rem 20px; /* کاهش padding چپ و راست */
  }
  .row-footer1,
  .row-footer2 {
    flex-direction: column;
  }
  .col-footer-right,
  .col-footer-left,
  .col-footer {
    flex: 1;
    text-align: center; /* در موبایل وسط چین */
  }
  .col-footer-left {
    text-align: center; /* موبایل وسط چین */
  }
  .col-footer-right {
    max-width: 100%;
    transform: translateY(0); /* بالا بردن حذف می‌شود تا طبیعی باشد */
  }
  .footer-img {
    display: none; /* مخفی کردن تصویر */
  }
  .footer-text {
    width: 100%;
    font-size: var(--font1); /* اگر بخواهید می‌توانید اندازه متن را کمی کوچک‌تر کنید */
  }
  .quick-access-list li {
    list-style-type: none;
  }
  .sjk-about {
    padding: 18px;
  }
  .sjk-row {
    flex-direction: column;
    gap: 16px;
  }
  .sjk-col {
    flex-basis: 100%;
    width: 100%;
  }

  /* در موبایل می‌خواهیم تصویر اول و سپس متن (اختیاری) —
         اگر مایلید متن بالای تصویر باشد، این دو order را معکوس کنید */
  .sjk-image {
    order: 1;
  }
  .sjk-content {
    order: 2;
  }

  .sjk-image__media {
    max-height: 280px;
  }

  .sjk-title {
    font-size: 1.4rem;
  }
  .info-box {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    min-height: auto;
    padding-top: 0;
  }
  /* حذف تصاویر در موبایل */
  .info-box .info-image {
    display: none;
  }
  .info-content {
    width: 100%;
  }

  .info-box.right .info-body {
    padding: 10px;
    margin-top: 0px;
  }
  .info-box.left .info-body {
    padding: 10px;
    margin-top: 0px;
  }
  .about-container {
    height: 600px;
  }
  .sjk-board-card {
    width: 100%; /* تک ستونه در موبایل */
  }
 .why-sajaak {
  
  flex-direction: column !important;
 width: 80% !important;
 margin:0 auto;
}
.why-right{

  width:100% !important;
}
  
.aboutus-section{
  display: none !important;
}
  .iran-share-title {
    margin-top: 200px;
    font-size:  var(--font7);
  }
  .iran-share-text {
    font-size:  var(--font6);
    max-width: 100%;
  }
      .options {
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
    }
      .form-row {
    flex-direction: column;
  }
  .form-group {
    width: 100%;
  }
}

/* ریسپانسیو برای دسکتاپ */
@media (min-width: 992px) {
  .mobile-menu {
    display: none !important; /* در دسکتاپ منوی موبایل قطعاً مخفی است */
  }
}

/*About us*/
.sjk-about-wrap {
  display: flex;
  justify-content: center;
  padding: 48px 0px;
  margin: 64px 0px;
}

.sjk-about {
  width: 100%;
  max-width: var(--sjk-max-width);
  background: var(--color2);

  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ردیف اصلی با دو بچ (تصویر و محتوا) — هر کدام نصف */
.sjk-row {
  display: flex;
  gap: var(--sjk-gap);
  align-items: center;
  flex-wrap: nowrap;
}

.sjk-col {
  flex: 1 1 50%;
  min-width: 0; /* برای جلوگیری از overflow متن */
}

/* ستون تصویر — محتوای تصویری */
.sjk-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sjk-image__media {
  width: 100%;
  height: 100%;
  max-height: 420px;
  border-radius: var(--sjk-radius);
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 24px var(--color35);
}

/* ستون محتوا */
.sjk-content {
  padding: 6px 6px 6px 6px;
  box-sizing: border-box;
}

.sjk-title {
  font-size: 1.9rem;
  margin: 6px 0 14px 0;
  line-height: 1.15;
}

.sjk-text {
  color: var(--sjk-muted);
  font-size: 1rem;
  margin: 0 0 16px 0;
}

/* *مهم* ترتیب در دسکتاپ: محتوای سمت راست، عکس سمت چپ */
/* ساختار HTML: قرار دادن محتوا اول و تصویر دوم؛ با استفاده از order نمایش می‌دهیم */
.sjk-content {
  order: 1;
}
.sjk-image {
  order: 2;
}
/* حالت چاپ کوچک و دسترس‌پذیری */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

.about-container {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  max-width: var(--max-w);
  background: var(--bg);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--base-h) / var(--base-w) * 100%);
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--color36);
  background-image: url("image/top-left-about.svg"),
    url("image/bottom-right-about.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;
  background-size: 300px auto, 800px auto; /* اندازه دلخواه */
}
.row-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 20px;
  box-sizing: border-box;
}
.decor-shape {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(var(--blur-size));
  transform: translateZ(0);
  opacity: 0.2;
  pointer-events: none;
}

.decor-shape.right-top {
  top: 0;
  right: 0;
}
.decor-shape.left-bottom {
  bottom: 0;
  left: 0;
}

.inner-card {
  width: 100%;
  max-width: 1100px;
  height: auto;
  background: transparent;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  pointer-events: auto;
}

.info-box {
  width: 386px;
  min-height: 286px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  background: transparent;
  border-radius: 24px;
  box-sizing: border-box;
  padding-top: 0;
}

.info-image {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.info-box.right .info-image {
  right: -187.5px;
}

.info-box.left .info-image {
  left: -187.5px;
}

.info-content {
  width: 100%;
  height: 100%;
  background: var(--color2);
  border-radius: 24px;
  box-shadow: 0 2px 6px var(--color21);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
  position: relative;
  box-sizing: border-box;
  padding-top: 0;
  text-align: justify;
}

.info-header {
  height: 64px;
  color: var(--color2);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  border-radius: 24px 24px 0 0;
  flex-shrink: 0;
}

.info-box.right .info-header {
  background: linear-gradient(90deg, var(--color37), var(--color38));
}

.info-box.left .info-header {
  background: linear-gradient(90deg, var(--color38), var(--color37));
}
.info-body {
  flex: 1;
  font-size: var(--font2);
  color: var(--color4);
  overflow: auto;
  margin: 20px 0px 0px 0px;
}
.info-box.right .info-body {
  padding: 0px 80px 0px 20px;
}

.info-box.left .info-body {
  padding: 0px 20px 0px 80px;
}

/*  هیئت مدیره ، کانتینر اصلی */
.sjk-board-section {
  max-width: 1400px; /* برای اینکه 3 باکس کنار هم جا بشه */
  margin: 0 auto;
  padding: 64px 16px;
  text-align: center;
}

/* تیتر بالا */
.sjk-board-title {
  font-size: 1.8rem;
  margin-bottom: 64px;
  margin-top: 0px;
}

/* ردیف باکس‌ها */
.sjk-board-row {
  display: flex;
  flex-wrap: wrap; /* اجازه بده در صفحه کوچک‌تر بیفتن زیر هم */
  gap: 20px; /* فاصله بین باکس‌ها */
  justify-content: center;
  margin-bottom: 28px;
}

/* باکس فردی */
.sjk-board-card {
  width: 400px;
  height: 180px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--color39);
  border-radius: 12px;
  box-shadow: 0 2px 2px 1px var(--color40);
  background: var(--color41);
  box-sizing: border-box;
}

/* تصویر سمت راست */
.sjk-board-card img {
  width: 200px;
  height: 180px;
  border-radius: 0px 12px 12px 0px; /* گوشه گرد ملایم */
  object-fit: cover; /* برای جلوگیری از کشیده شدن تصویر */
  flex-shrink: 0;
}

/* بخش متن */
.sjk-board-info {
  text-align: right;
}

.sjk-board-name {
  font-weight: bold;
  margin: 0 0 6px 0;
  font-size: 1rem;
  color: var(--color42); /* رنگ عنوان */
}

.sjk-board-role {
  margin: 0;
  font-size: var(--font2);
  color: var(--color27); /* رنگ زیرعنوان */
}
/*why sajaak -about page*/

/* سکشن اصلی با بک‌گراند */
.why-section {
  width: 100%;
  height: 551px;
  background: url("image/bg-about-aqua.svg") no-repeat right/1614px 551px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* کانتینر وسط */
.why-sajaak {
  width: 1240px;
  height: 439px;
  display: flex;
  flex-direction: row;
  gap: 52px;
  justify-content: space-between;
}

/* ستون راست (متن) */
.why-right {
  width: 719px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
}

.why-right h2 {
  font-size: 28px;
  color: var(--color42);
  margin-bottom: 16px;
}

.why-right p {
  font-size: var(--font1);
  line-height: 1.8;
  color: var(--color44);
  margin: 0;
}

/* ستون چپ (سه باکس) */
.why-left {
  width: 469px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding-top: 36px;
}

.why-box {
  width: 469px;
  height: 109px;
  padding: 12px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--color43);
  border-radius: 12px;
  background: var(--color2);
  color: var(--sjk-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 16px;
}

/* شماره */
.why-box .number {
  color: var(--color42);
  font-weight: 700;
  font-size: var(--font4);
  min-width: 62px;
  letter-spacing: 0.15px;
}

/* آیکن و متن زیرش */
.icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}
.icon-wrap .icon {
  font-size: 22px;
  color: var(--color42);
}
.icon-wrap .icon-label {
  font-size: var(--font1);
  color: var(--color42);
  margin-top: 20px;
  font-weight: 600;
  text-align: center;
}

/* مقدار سمت چپ */
.why-box .value {
  font-size: var(--font3);
  font-weight: 700;
  color: var(--sjk-muted);
  margin-right: auto; /* در حالت RTL میره انتها */
  margin-top: 60px;
}

/*همکاران*/
/* سکشن اصلی */
.aboutus-section {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color:var(--color2);
  background-image: url("image/ABOUT US-BG2.svg"), url("image/ABOUT US-BG.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top 50px left, bottom right;
  background-size: 600px auto, 454px auto;
  padding: 128px 24px;
  box-sizing: border-box;

}

/* کانتینر */
.aboutus-container {
  width: 1240px;
  max-width: 100%;
  min-height: 187px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap; /* جلوگیری از افتادن خط بعد */
 
}

/* آیتم */
.aboutus-item {
  flex: 1 1 auto;
  text-align: center;

  margin: 0px;
}

/* تصویر با سایز ثابت */
.aboutus-item img {
  width: 128px;
  height: 128px;
  object-fit: contain; /* تناسب حفظ بشه */
  margin: 0 auto;
  display: block;
}

.aboutus-item figcaption {
  margin-top: 16px;
  font-size: var(--font5);
  color: var(--color42);
  font-weight: 600;
}

.iran-share-section {
  width: 100%;
  padding: 64px 24px;
  box-sizing: border-box;

  text-align: center; /* متن مرکز چین */
  background-color: var(--color2);
}

.iran-share-container {
  max-width: 1240px;
  margin: 0 auto;
}

.iran-share-title {
  font-size: var(--font8);
  font-weight: 700;
  color: var(--sjk-muted);
  margin-bottom: 32px;
}

.iran-share-text {
  font-size:  var(--font1);
  font-weight: 400;
  color: var(--sjk-muted);
  line-height: 1.8;
  margin: 0 auto 32px auto;
  max-width: 800px; /* برای خوانایی متن */
}

.iran-share-map {
  width: 100%;
  height: auto;
  display: block;
}
  .map-container {
    position: relative;
    width: 100%;
    height: 764px;   /* تغییر داده شد */
  }

  .map-frame {
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* کارت بالای پین */
  .pin-box {
    position: absolute;
    top: 330px; /* موقعیت تقریبی بالای پین */
    left: 50%;
    transform: translate(-50%, -100%);
    background: var(--color2);
    padding:5px;
    height:50px;
    border-radius: 8px;
    box-shadow: 0 2px 6px var(--color45);
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
  }

  .pin-box img {
    height: 50px;
    width: auto;
  }

  /* ردیف باکس‌ها */
  .options {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: -150px;  /* تغییر داده شد */
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
 
  min-height: 350px;
  }

  .option {
    background:var(--color2);
    border: 1px solid var(--color18);
    border-radius: 16px;
    padding: 24px 16px;
    width: 388px;
    height: 317px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
  }

  .option.active {
    border: 2px solid var(--color5);
    box-shadow: 4px 12px 40px 0 var(--color47);
    height: 340px;
    margin-top: -12px;
  }
  .option h3{
    margin: 0px;
  }
.option button {
  display: flex;
  flex-direction: row;   /* متن راست، آیکن چپ */
  justify-content: flex-start;   /* محتوا به سمت راست */
  align-items: center;           /* وسط‌چین عمودی */
  gap: 8px;                      /* فاصله بین متن و svg */
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--color18);
  background: var(--color2);
  width: 100%;
  height: 40px;
  color: var(--color46);
}
.option button svg{
  margin-right: auto;
}
/* حالت فعال */
.option.active button {
  border: 1px solid var(--color50);
  background: var(--color49);
  color: var(--color37);
}
.map-text{
  width:100%;
  margin: 20px 0px;
  height: 162px;
 text-align: right;


}
.map-text p{

  margin: 10px;
   display: flex;
  align-items: flex-start; /* تراز بالا */
  gap: 8px;                /* فاصله بین آیکن و متن */

}
.map-text p span{
  color: var(--color48);
  font-style: normal;
   line-height: 1.4; 
   letter-spacing: 0.25px;
    font-size: 16px;
}
.map-text p svg{
    flex-shrink: 0;  
    vertical-align: text-top;
}

/*form*/
.contact-form {
  max-width: 1176px;
  margin: 60px auto;
  padding: 40px 32px 64px 32px;
  background: var(--color8);
  border: 1px solid var(--color51);
  border-radius: 24px;
  direction: rtl; /* راست به چپ */
  box-sizing: border-box;
  font-family: font1;
}

.contact-form h2 {
  text-align: right;
  color:var(--color42);
  margin-bottom: 32px;
  font-size: var(--font9);
  margin-top: 0px;
}

/* ردیف‌ها */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* گروه فرم */
.form-group {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  flex: 100%;
}

/* لیبل‌ها */
label {
  margin-bottom: 8px;
  font-weight: 500;
  color:var(--color42);
}

label span {
  color: var(--color52);
  margin-left: 4px;
}

/* اینپوت‌ها */
input, select, textarea {
  border: 1px solid var(--color53);
  background:var(--color2);
  border-radius: 12px;
  height: 66px;
  padding: 0 16px;
  box-sizing: border-box;
  font-size: var(--font1);
  color:var(--color42);
}

select {
  appearance: none; /* حذف فلش پیشفرض مرورگر */
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><polygon points="0,0 14,0 7,7" fill="%230E1D40"/></svg>');
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size:var(--font5);
}

/* تکست اریا */
textarea {
  min-height: 150px;
  padding-top: 16px;
  padding-bottom: 16px;
  resize: vertical;
  resize: none;
}