@@ خط ۱: / خط ۱: @@
 <html>
-<!-- بخش Hero -->
+<!-- =========================
-<section class="sajad-hero" style="
+     بخش Hero
-  --hero-bg:#FFFFFF;
+========================= -->
-  --hero-title:#100E47;
+<section class="sajad-hero"
-  --hero-text:#3E3A36;
+    style="
-  --hero-badge-bg:#FFB6C1;
+        --hero-bg:#FFFFFF;
-  --hero-btn-bg:#100E47;
+        --hero-title:#100E47;
-">
+        --hero-text:#3E3A36;
+        --hero-badge-bg:#FFB6C1;
+        --hero-btn-bg:#100E47;
+    ">
-<div class="sajad-hero__container">
+    <div class="sajad-hero__container">
-<div class="sajad-hero__content">
+        <!-- محتوای متنی -->
+        <div class="sajad-hero__content">
-<h3 style="font-family:iransans;">
+            <h3 class="sajad-hero__intro">
-<a href="https://fa.faraghaib.ir/wiki/%D8%A7%D9%84%DA%AF%D9%88:%D9%81%D8%B1%D9%85_%D8%AB%D8%A8%D8%AA_%D9%86%D8%A7%D9%85">
+                <a href="https://fa.faraghaib.ir/wiki/%D8%A7%D9%84%DA%AF%D9%88:%D9%81%D8%B1%D9%85_%D8%AB%D8%A8%D8%AA_%D9%86%D8%A7%D9%85">
-تکمیل فرم</a>، اولین قدم برای دریافت مشاوره دقیق‌تر است.
+                    تکمیل فرم
-</h3>
+                </a>،
+                اولین قدم برای دریافت مشاوره دقیق‌تر است.
+            </h3>
-<br>
+            <span class="sajad-hero__badge">
+                همراه مطمئن درمان ناباروری
+            </span>
-<span class="sajad-hero__badge">
+            <h1 class="sajad-hero__title">
-همراه مطمئن درمان ناباروری
+                خدمات ما به شما:
-</span>
+            </h1>
-<h1 class="sajad-hero__title">
+            <ul class="sajad-hero__description">
-خدمات ما به شما:
-</h1>
-<p class="sajad-hero__description">
+                <li>
+                    <strong>اهدای تخمک:</strong>
+                    شامل شرایط سنی، پزشکی و پرداخت مبالغ متفاوت بسته به شهر.
+                </li>
-<ul style="font-family:iransans;">
+                <li>
+                    <strong>رحم جایگزین:</strong>
+                    شامل شرایط سنی، پزشکی، سابقه بارداری و هزینه‌های کلان.
+                </li>
-<li><strong>اهدای تخمک:</strong> شامل شرایط سنی، پزشکی و پرداخت مبالغ متفاوت بسته به شهر.</li>
+                <li>
+                    <strong>اهدای جنین:</strong>
+                    شرایط خاص برای زوجین اهداکننده اسپرم و تخمک.
+                </li>
-<li><strong>رحم جایگزین:</strong> شامل شرایط سنی، پزشکی، سابقه بارداری و هزینه‌های کلان.</li>
+            </ul>
-<li><strong>اهدای جنین:</strong> شرایط خاص برای زوجین اهداکننده اسپرم و تخمک.</li>
+        </div>
-</ul>
+        <!-- تصویر -->
+        <div class="sajad-hero__media">
-</p>
+            <div class="sajad-hero__img sajad-hero__img--back">
-</div>
+                <img
+                    src="https://dl.faraghaib.ir/m/109/109m020.png"
+                    alt="محصول پوشاک سجاد"
+                    loading="lazy"
+                    decoding="async"
+                >
-<div class="sajad-hero__media">
+            </div>
-<div class="sajad-hero__img sajad-hero__img--back">
+        </div>
-<img
+    </div>
-src="https://dl.faraghaib.ir/m/109/109m020.png"
-alt="محصول پوشاک سجاد">
-</div>
+</section>
-</div>
-</div>
+<style>
-</section>
+/* ==================================================
+   Base Reset
+================================================== */
+.sajad-hero,
+.sajad-hero *,
+.sajad-hero *::before,
+.sajad-hero *::after {
+    box-sizing: border-box;
+}
-<style>
-/*===============================
+/* ==================================================
-Base (Mobile First)
+   Hero - Mobile First
-================================*/
+================================================== */
-.sajad-hero{
+.sajad-hero {
-background:var(--hero-bg);
+    width: 100%;
+    max-width: 100%;
-padding:40px 15px;
+    background: var(--hero-bg);
-direction:rtl;
+    padding: 35px 15px;
-overflow:hidden;
+    direction: rtl;
-font-family:iransans;
+    overflow: hidden;
+    font-family: iransans, Tahoma, Arial, sans-serif;
 }
-.sajad-hero__container{
-max-width:1100px;
+/* ==================================================
+   Container
+================================================== */
-margin:auto;
+.sajad-hero__container {
-display:grid;
+    width: 100%;
+    max-width: 1100px;
-grid-template-columns:1fr;
+    margin: 0 auto;
-gap:35px;
+    display: grid;
-align-items:center;
+    grid-template-columns: 1fr;
+    gap: 30px;
+    align-items: center;
 }
-.sajad-hero__content{
-text-align:center;
+/* ==================================================
+   Content
+================================================== */
+.sajad-hero__content {
+    width: 100%;
+    min-width: 0;
+    text-align: center;
 }
-.sajad-hero__badge{
-display:inline-block;
+/* ==================================================
+   Intro Text
+================================================== */
-background:var(--hero-badge-bg);
+.sajad-hero__intro {
-padding:8px 16px;
+    margin: 0 0 22px;
-border-radius:8px;
+    color: var(--hero-text);
-margin-bottom:20px;
+    font-size: clamp(1rem, 3.8vw, 1.35rem);
-font-size:1rem;
+    line-height: 2;
+    font-weight: 600;
 }
-.sajad-hero__title{
+.sajad-hero__intro a {
-color:var(--hero-title);
+    color: var(--hero-title);
-font-size:2rem;
+    font-weight: 700;
-line-height:1.4;
+    text-decoration: none;
+}
-margin-bottom:20px;
+.sajad-hero__intro a:hover {
+    text-decoration: underline;
 }
-.sajad-hero__description{
-color:var(--hero-text);
+/* ==================================================
+   Badge
+================================================== */
+.sajad-hero__badge {
+    display: inline-block;
+    max-width: 100%;
+    background: var(--hero-badge-bg);
+    padding: 8px 16px;
-font-size:1rem;
+    border-radius: 8px;
-line-height:2;
+    margin-bottom: 18px;
-margin-bottom:20px;
+    font-size: clamp(.9rem, 3.5vw, 1rem);
+    line-height: 1.8;
+    white-space: normal;
 }
-.sajad-hero__button{
-background:var(--hero-btn-bg);
+/* ==================================================
+   Title
+================================================== */
-color:#fff;
+.sajad-hero__title {
-padding:14px 28px;
+    color: var(--hero-title);
-border-radius:50px;
+    font-size: clamp(1.7rem, 7vw, 3rem);
-display:inline-block;
+    line-height: 1.5;
-text-decoration:none;
+    margin: 0 0 18px;
+    font-weight: 700;
 }
-.sajad-hero__media{
-display:flex;
+/* ==================================================
+   Description / List
+================================================== */
-justify-content:center;
+.sajad-hero__description {
-align-items:center;
+    width: 100%;
-width:100%;
+    margin: 0;
-height:auto;
+    padding: 0 20px 0 0;
-overflow:visible;
+    color: var(--hero-text);
-margin:0;
+    font-size: clamp(.95rem, 3.8vw, 1.1rem);
+    line-height: 2;
+    text-align: right;
 }
-.sajad-hero__img{
+.sajad-hero__description li {
-width:100%;
+    margin-bottom: 12px;
+    padding-right: 5px;
+}
-display:flex;
+.sajad-hero__description li:last-child {
-justify-content:center;
+    margin-bottom: 0;
+}
-align-items:center;
+.sajad-hero__description strong {
-overflow:visible;
+    color: var(--hero-title);
+    font-weight: 700;
 }
-.sajad-hero__img img{
-display:block;
+/* ==================================================
+   Media
+================================================== */
+.sajad-hero__media {
+    width: 100%;
+    min-width: 0;
+    display: flex;
+    justify-content: center;
-width:100%;
+    align-items: center;
-max-width:320px;
+    overflow: visible;
-height:auto;
+    margin: 0 auto;
-object-fit:contain;
+    order: 2;
-border-radius:8px;
 }
-/*===============================
-Desktop
-================================*/
-@media(min-width:769px){
+/* ==================================================
+   Image Wrapper
+================================================== */
+.sajad-hero__img {
+    width: 100%;
+    max-width: 320px;
+    display: flex;
+    justify-content: center;
-.sajad-hero{
+    align-items: center;
-padding:80px 20px;
+    overflow: visible;
+    margin: 0 auto;
 }
-.sajad-hero__container{
-grid-template-columns:1fr 1fr;
+/* ==================================================
+   Image
+================================================== */
+.sajad-hero__img img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
-gap:40px;
+    object-fit: contain;
+    border-radius: 8px;
 }
-.sajad-hero__content{
-text-align:right;
+/* ==================================================
+   Tablet
+================================================== */
+@media (min-width: 600px) {
+    .sajad-hero {
+        padding: 50px 25px;
+    }
+    .sajad-hero__container {
+        gap: 40px;
+    }
+    .sajad-hero__img {
+        max-width: 380px;
+    }
+    .sajad-hero__description {
+        padding-right: 25px;
+    }
 }
-.sajad-hero__title{
-font-size:3rem;
+/* ==================================================
+   Desktop
+================================================== */
+@media (min-width: 769px) {
+    .sajad-hero {
+        padding: 70px 30px;
+    }
+    .sajad-hero__container {
+        grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
+        gap: 50px;
+        min-height: 500px;
+    }
+    .sajad-hero__content {
+        text-align: right;
+        order: 1;
+    }
+    .sajad-hero__media {
-}
+        order: 2;
+        height: auto;
+        min-height: 500px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .sajad-hero__img {
+        width: 350px;
+        max-width: 100%;
+        height: auto;
+        position: relative;
+        left: auto;
+        top: auto;
+    }
+    .sajad-hero__img img {
+        width: 100%;
-.sajad-hero__description{
+        max-width: 100%;
-font-size:1.1rem;
+        height: auto;
+    }
 }
-.sajad-hero__media{
-position:relative;
+/* ==================================================
+   Large Desktop
+================================================== */
-height:500px;
+@media (min-width: 1100px) {
-display:block;
+    .sajad-hero {
-}
+        padding: 80px 30px;
+    }
+    .sajad-hero__container {
-.sajad-hero__img{
+        gap: 70px;
+    }
-position:absolute;
+    .sajad-hero__img {
-overflow:hidden;
+        width: 400px;
+    }
 }
-.sajad-hero__img img{
-max-width:100%;
+/* ==================================================
+   Very Small Mobile
+================================================== */
-width:100%;
+@media (max-width: 360px) {
-}
+    .sajad-hero {
+        padding: 28px 12px;
+    }
-.sajad-hero__img--back{
+    .sajad-hero__container {
-width:350px;
+        gap: 25px;
+    }
-height:600px;
+    .sajad-hero__intro {
-left:20px;
+        line-height: 1.9;
+    }
-top:0;
+    .sajad-hero__description {
-z-index:5;
+        padding-right: 18px;
-}
+        font-size: .9rem;
-.sajad-hero__img--front{
+        line-height: 1.9;
+    }
-width:250px;
+    .sajad-hero__badge {
-height:450px;
+        padding: 7px 12px;
+    }
-left:200px;
+}
-top:150px;
-z-index:2;
+/* ==================================================
+   Prevent horizontal overflow
+================================================== */
-border:4px solid #fff;
+.sajad-hero img {
+    max-width: 100%;
 }
+.sajad-hero a {
+    overflow-wrap: anywhere;
 }

الگو:کانتینر متن و عکس/بخشنده: تفاوت میان نسخه‌ها