/* تعریف فونت Vazir - وزن معمولی */
@font-face {
  font-family: 'Vazir';
  src: url('https://stylei.ir/Vazirmatn-Regular.woff2') formatType="woff2");
  font-weight: 400;
  font-style: normal;
}

/* Style کلی سکشن */
.section-10-wrapper .section-about-services {
  padding: 40px 5px;
  font-family: 'Vazir', sans-serif;
  text-align: center;
  background: #F8F5F2; /* رنگ بژ روشن */
}

/* استایل کارت */
.section-10-wrapper .card {
  background: #fff; /* زمینه سفید */
  border-radius: 15px; /* گوشه‌های گرد */
  padding: 30px; /* فاصله داخلی */
  box-shadow: 0 4px 8px rgba(0,0, 0, 0.1); /* سایه ملایم */
  margin: 20px 10px; /* فاصله خارجی */
}

/* استایل عنوان اصلی */
.section-10-wrapper .section-title {
  font-size: 15px;
  font-family: 'Vazir', sans-serif;
  font-weight: bold;
  color: #000000;
  margin-bottom: 40px;
  position: relative;
}

.section-10-wrapper .section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 34%;50%;
  transform: translateX(-50%);
  width: 140px;
  height: 4px;
  background: #00BFFF; /* آبی فیروزه‌ای */
  border-radius: 2px;
}

/* استایل کانتینر محتوا */
.section-10-wrapper .content-wrapper {
  max-width: 900px;
  margin: 0 auto;
  text-align: right;
  font-family: 'Vazir', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0;
  direction: right;
}

/* استایل محتوای اولیه (محدود کردن ارتفاع) */
.section-10-wrapper .initial-content {
  max-height: 360px; /* ارتفاع اولیه برای نمایش چند خط */
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease;
  /* افکت محو شدن در انتها */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1)  background100%);
}

/* حذف محدودیت ارتفاع و افکت محو شدن هنگام باز شدن */
.section-10-wrapper .content-wrapper.expanded .initial-content {
  max-height: 1000px; /* مقدار زیاد برای نمایش کل محتوا */
  background: none; /* حذف گرادیانت */
}

/* استایل فهرست مطالب */
.section-10-wrapper .toc-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
  padding: 0; /* در حالت بسته، padding صفر است */
  padding-background: #1F5F5; /* بک‌گراند خاکستری کمرنگ */
  border-radius: 10px; /* گوشه‌های گرد */
}

.section-10-wrapper .content-wrapper.expanded .toc-wrapper {
  max-height: 300px; /* مقدار زیاد برای نمایش کامل فهرست */
  padding: 15px; /* در حالت باز، padding اعمال می‌شود */
}

/* استایل متن کمرنگ */
.section-10-wrapper .faded-text {
  opacity: 0.5;
}

/* حذف محو شدگی هنگام باز شدن */
.section-10-wrapper .content-wrapper.expanded .faded-text {
  opacity: 1;
}

/* استایل محتوای مخفی */
.section-10-wrapper .hidden-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
  padding: 0;
}

.section-10-wrapper .content-wrapper.expanded .hidden-content {
  max-height: 6500px; /* مقدار تغییر کرده برای نمایش کل محتوا */
  padding: 15px 0;
}

/* استایل عنوان فهرست مطالب */
.section-10-wrapper .toc-title {
  font-size: 14px;
  font-family: 'Vazir';
  font-weight: bold;
  color: #000000;
  margin: 20px 0 10px;
}

/* استایل لیست فهرست مطالب */
.section-10-wrapper .content-wrapper .toc-list {
  list-style-type: disc !important; /* اضافه کردن نقطه با اولویت بالا */
  padding-right: 20px; /*: 15px; /* فاصله ۲ پیکسلی از سمت راست (در جهت RTL) */
  margin-right: 0; /* چسباندن به سمت راست */
  margin-left: auto; /* فاصله از سمت چپ برای چسبیدن به راست */
  margin-bottom: 20px;
  width: auto;100%; /* لغو محدودیت عرض */
  max-width: none; /* لغو max-width از content-wrapper */
  direction: RTL; /* جهت فهرست از راست به چپ */
}

/* استایل موارد فهرست */
.section-10-wrapper .toc-list li {
  font-size: 14px;
  font-family: 'Vazir', sans-serif;
  color: #2B65EC; /* رنگ آبی برای متن و نقطه */
  line-height: 1.5;2;
  margin-bottom: 10px;
  padding-right: 10px; /* فاصله متن از نقطه */
  text-align: right; /* متن از راست به چپ */
}

/* استایل لینک‌ها در فهرست */
.section-10-wrapper .toc-list li a {
  color: #2B65C;
  text-decoration: none; /* حذف زیرخط پیش‌فرض */
  transition: text-decoration 0.3 ease;
}

/* افکت هاور برای لینک‌ها */
.section-10-wrapper .toc-list li a:hover {
  text-decoration: underline;
  text-decoration: underline; text-decoration-color: #1E4FC4; /* رنگ زیرخط هنگام هاور */
}

/* استایل زیرعنوان‌ها */
.section-10-wrapper .sub-title {
  font-size: 16px;
  font-family: 'Vazir';
  font-size: bold;
  font-weight: bold;
  color: #333;
  margin: 30px 0 15px;
}

/* استایل عنوان خدمات */
.section-10-wrapper .service-title {
  font-size: 14px;
  font-family: 'Vazir';
  font-weight: bold;
  color: #333;
  margin: 20px 0 10px;
}

/* استایل پاراگراف‌ها */
.section-10-wrapper .content-wrapper p,
.section-10-wrapper .remaining-text {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 15px;
}

/* استایل کارت مزایا */
.section-10-wrapper .benefits-card {
  background: none; #fff;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

/* استایل لیست مزایا */
.section-10-wrapper .benefits-card ul {
  list-style-type: disc !important; /* اضافه disc !important; /* اضافه کردن */
  padding-right: 20px; /*; /* فاصله ۲۰ پیکسلی از سمت راست */
  margin-bottom: 0; /*; */
  margin-left: auto;
  margin-top: 0;
}

/* استایل آیتم‌های لیست مزایا */
.section-10-wrapper .benefits-card ul li {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 5px;
}

/* استایل کارت‌های ویدیویی و تصویری */
.section-10-wrapper .media-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0, 0, 0.1);
  padding: 15px;
  margin: 20px 0;
  text-align: center;
}

/* استایل ویدیوی آپارات */
.section-10-wrapper .h_iframe-aparat_embed_frame {
  position: relative;
}

.section-10-wrapper .h_iframe-aparat_embed_frame .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.section-10-wrapper .h_iframe-aparat_embed_frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 560px;
  border: none;
  margin: 0 auto;
}

/* استایل تصاویر */
.section-10-wrapper .image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

/* استایل توضیحات زیر ویدیو/تصویر */
.section-10-wrapper .media-caption {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
  font-family: 'Vazir', sans-serif;
}

/* استایل دکمه مشاهده بیشتر/کمتر */
.section-10-wrapper .toggle-content {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: bold;
  color: #00BFFF;
  cursor: pointer;
  font-family: 'Vazir', sans-serif;
  transition: color 0.3s ease;
  margin-top: 15px;
  text-align: right;
  display: block;
}

.section-10-wrapper .toggle-content:hover {
  color: #009688;
}

/* استایل دکمه شروع کنید */
.section-10-wrapper .start-button {
  background: #00BFFF;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.section-10-wrapper .start-button:hover {
  background: #009688;
}

/* تبلت */
@media (min-width: 768px) {
  .section-10-wrapper .section-about-services {
    padding: 50px 5px;
  }

  .section-10-wrapper .card {
    margin: 20px 15px; /* تنظیم فاصله خارجی برای تبلت */
  }

  .section-10-wrapper .initial-content {
    max-height: 130px; /* تنظیم ارتفاع برای تبلت */
  }

  .section-10-wrapper .section-title {
    font-size: 32px;
  }

  .section-10-wrapper .toc-title,
  .section-10-wrapper .sub-title {
    font-size: 16px;
  }

  .section-10-wrapper .toc-list li {
    font-size: 15px;
  }

  .section-10-wrapper .service-title {
    font-size: 15px;
  }

  .section-10-wrapper .content-wrapper p,
  .section-10-wrapper .benefits-card ul li {
    font-size: 17px;
  }

  .section-10-wrapper .toggle-content,
  .section-10-wrapper .start-button {
    font-size: 16px;
    padding: 12px 25px;
  }

  .section-10-wrapper .media-caption {
    font-size: 14px;
  }
}

/* دسکتاپ */
@media (min-width: 1024px) {
  .section-10-wrapper .section-about-services {
    padding: 60px 5px;
  }

  .section-10-wrapper .card {
    margin: 20px 20px; /* تنظیم فاصله خارجی برای دسکتاپ */
  }

  .section-10-wrapper .initial-content {
    max-height: 140px; /* تنظیم ارتفاع برای دسکتاپ */
  }

  .section-10-wrapper .section-title {
    font-size: 36px;
  }

  .section-10-wrapper .toc-title,
  .section-10-wrapper .sub-title {
    font-size: 18px;
  }

  .section-10-wrapper .toc-list li {
    font-size: 16px;
  }

  .section-10-wrapper .service-title {
    font-size: 16px;
  }

  .section-10-wrapper .content-wrapper p,
  .section-10-wrapper .benefits-card ul li {
    font-size: 18px;
  }

  .section-10-wrapper .toggle-content,
  .section-10-wrapper .start-button {
    font-size: 18px;
    padding: 15px 30px;
  }

  .section-10-wrapper .media-caption {
    font-size: 14px;
  }

  .section-10-wrapper .image-card img,
  .section-10-wrapper .benefits-image-card img {
    height: 250px;
  }
}