—

**توضیحات مربوط به فرمت و طراحی (برای ویرایشگر بلوک):**

این ساختار متنی با استفاده از تگ‌های `div` و استایل‌های `inline` CSS طراحی شده است تا پس از کپی در ویرایشگرهای بلوک (مانند گوتنبرگ وردپرس) یا ویرایشگرهای کلاسیک، به شکل صحیح و با ظاهر دلخواه نمایش داده شود.

**ویژگی‌های طراحی و فرمت:**

1. **هدینگ‌ها (H1, H2, H3):**
* **H1:** دارای `font-size: 2.8em`، `font-weight: 800` (بسیار ضخیم)، رنگ `dark blue (#1a237e)`، `text-align: center` و یک خط زیرین برای تاکید.
* **H2:** دارای `font-size: 2.2em`، `font-weight: 800`، رنگ `medium blue (#3f51b5)` و `text-align: center`.
* **H3:** دارای `font-size: 1.6em` (در بلوک‌های رنگی) یا `1.5em` (در لیست‌های بولت‌دار)، `font-weight: 700` (ضخیم)، و رنگ‌های متناسب با بلوک مربوطه (مانند `blue`, `orange`, `green`, `red`, `pink`).
* این سایزها و ضخامت‌ها به صورت خودکار توسط استایل‌های CSS درون تگ‌های HTML (که در ویرایشگر بلوک حفظ می‌شوند) اعمال می‌شوند و نیازی به تنظیم دستی بعد از کپی نخواهند داشت.

2. **رنگ‌بندی و طراحی منحصر به فرد:**
* **پس‌زمینه کلی مقاله:** `light grey (#fcfcfc)` برای ظاهری تمیز و خوانا.
* **بلوک‌های اطلاعاتی خاص:** از رنگ‌های پس‌زمینه متفاوت با `border-left` یا `border-right` رنگی برای ایجاد تمایز بصری استفاده شده است.
* بخش “پروپوزال چیست”: پس‌زمینه `light green (#e8f5e9)` با نوار `green (#4caf50)`.
* “اجزای تضمین”: پس‌زمینه `light pink (#fce4ec)` با نوار `pink (#e91e63)`.
* **بلوک‌های “عوامل مؤثر”:** چهار بلوک سفید با سایه‌های کم‌رنگ و نوارهای بالایی با رنگ‌های مختلف (`light blue`, `orange`, `light green`, `red`) برای تفکیک موضوعی و جذابیت بصری.
* **لیست “نکاتی برای انتخاب”:** هر آیتم در یک بلوک با پس‌زمینه رنگی کم‌رنگ و نوار `border-left` رنگی متفاوت، ظاهری مدرن و قابل اسکن دارد.
* **بلوک‌های “مزایا”:** چهار بلوک `light grey` با نوار `border-left` رنگی.

3. **اینفوگرافیک/جایگزین بصری:**
* به جای اینفوگرافیک تصویری، بخش **”عوامل مؤثر بر هزینه نگارش پروپوزال در نوشهر”** و **”اجزای یک تضمین واقعی”** با استفاده از بلوک‌های متنی رنگی، آیکون‌های متنی (اموجی)، هدینگ‌های داخلی و پاراگراف‌های کوتاه طراحی شده‌اند تا اطلاعات را به صورت بصری جذاب و قابل فهم ارائه دهند و حس یک اینفوگرافیک ساختاریافته را القا کنند.

4. **جدول آموزشی استاندارد:**
* جدول دارای عنوان (caption)، سرستون‌های واضح و خانه‌های مرتب است.
* استایل‌های `border-collapse`, `background-color`, `box-shadow` و `border-radius` برای زیبایی بیشتر و خوانایی در آن گنجانده شده‌اند.

5. **ریسپانسیو بودن:**
* استفاده از `flexbox` و `flex-wrap: wrap` برای چینش بلوک‌ها (مانند عوامل مؤثر و مزایا) باعث می‌شود که این بلوک‌ها در صفحات نمایش کوچک‌تر (موبایل و تبلت) به صورت خودکار زیر هم قرار گیرند و صفحه به درستی نمایش داده شود.
* عرض حداکثری `max-width: 100%` و `margin: 0 auto` برای محتوای اصلی مقاله، اطمینان می‌دهد که مقاله در هر اندازه صفحه نمایش به خوبی در مرکز قرار گرفته و خوانایی خود را حفظ می‌کند.
* پاراگراف‌های کوتاه، استفاده از لیست‌ها و ساختاردهی واضح، خواندن متن را در تمام دستگاه‌ها آسان می‌سازد.

6. **کیفیت محتوا و UX:**
* متن دارای پاراگراف‌های کوتاه، بولت پوینت‌ها و هدینگ‌های واضح است که اسکن (Scannability) محتوا را برای کاربر آسان می‌کند.
* فاصله خطوط `line-height: 1.8` و `font-family: ‘Vazirmatn’, sans-serif` (که یک فونت ایرانی استاندارد و خوانا است) به خوانایی و تجربه کاربری بهتر کمک می‌کند. (توجه: فونت Vazirmatn باید در سایت مقصد ایمپورت شده باشد یا به فونت پیش‌فرض سیستم تبدیل شود اگر موجود نباشد).

این ساختار HTML/CSS در ویرایشگر بلوک یا کلاسیک به عنوان یک بلوک سفارشی یا محتوای HTML شناسایی و نمایش داده می‌شود و تمامی استایل‌ها و طراحی‌ها را حفظ خواهد کرد.