@@ خط ۱: / خط ۱: @@
 <html lang="fa" dir="rtl">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ خط ۸: / خط ۱۰: @@
 <meta name="description"
-content="مکانیکی، جلوبندی و هیدرولیک فرمان محمد؛ ارائه خدمات تخصصی تعمیر خودرو، تعمیر موتور، گیربکس، جلوبندی سازی و تعمیر هیدرولیک فرمان با تجربه و دقت بالا.">
+content="مکانیکی، جلوبندی و هیدرولیک فرمان محمد؛ ارائه خدمات تخصصی تعمیر خودرو، تعمیر موتور، گیربکس، جلوبندی سازی و تعمیر هیدرولیک فرمان.">
 <meta name="robots" content="index, follow">
@@ خط ۱۵: / خط ۱۷: @@
 /* =========================================================
-    پایه - MOBILE FIRST
+    RESET + VARIABLES
 ========================================================= */
@@ خط ۲۱: / خط ۲۳: @@
      font-family: IRANSans;
      src: url("https://cdn.jsdelivr.net/gh/rastikerdar/iransans-font@master/dist/IRANSans.woff2")
-         format("woff2");
+    format("woff2");
      font-display: swap;
 }
 :root {
      --primary: #e53935;
      --primary-dark: #b71c1c;
      --secondary: #ffb300;
      --dark: #151515;
      --dark-2: #222;
      --gray: #666;
      --light: #f5f5f5;
      --white: #fff;
-     --border: #e6e6e6;
+     --border: #e5e5e5;
      --shadow: 0 8px 25px rgba(0,0,0,.08);
      --radius: 16px;
      --container: 1200px;
+    /* ==============================================
+       تصویر هدر
+       فقط این آدرس را تغییر دهید
+    ============================================== */
+    --header-image:
+    url("https://dl.faraghaib.ir/m/260024-01/baner-01.png");
 }
+/* =========================================================
+   GENERAL
+========================================================= */
 * {
@@ خط ۵۱: / خط ۷۳: @@
 body {
-     font-family: IRANSans, Tahoma, Arial, sans-serif;
+     font-family:
+        IRANSans,
+        Tahoma,
+        Arial,
+        sans-serif;
      background: #fff;
      color: var(--dark);
      line-height: 1.8;
 }
 img {
+    display: block;
      max-width: 100%;
      height: auto;
-    display: block;
 }
@@ خط ۷۳: / خط ۱۰۶: @@
 .container {
      width: min(92%, var(--container));
      margin-inline: auto;
 }
@@ خط ۸۲: / خط ۱۱۷: @@
 .section-title {
      text-align: center;
      margin-bottom: 30px;
 }
 .section-title span {
      display: inline-block;
      color: var(--primary);
-     font-size: .85rem;
+     font-size: .82rem;
      font-weight: 700;
      margin-bottom: 5px;
 }
 .section-title h2 {
-     font-size: clamp(1.35rem, 5vw, 2.1rem);
+     font-size:
+        clamp(1.35rem, 5vw, 2.1rem);
      line-height: 1.5;
 }
 .section-title p {
      color: var(--gray);
-     font-size: .9rem;
+     font-size: .88rem;
      max-width: 650px;
-     margin: 8px auto 0;
+     margin:
+px auto 0;
 }
@@ خط ۱۱۲: / خط ۱۶۲: @@
 .site-header {
+    position: relative;
+    min-height: 75px;
      background: var(--dark);
      color: #fff;
-     position: sticky;
-    top: 0;
+     overflow: hidden;
      z-index: 1000;
-     box-shadow: 0 2px 15px rgba(0,0,0,.15);
+     box-shadow:
+3px 15px rgba(0,0,0,.18);
 }
+/* تصویر هدر */
+.header-bg {
+    position: absolute;
+    inset: 0;
+    background-image:
+        var(--header-image);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 0;
+}
+/* لایه تیره روی تصویر */
+.header-overlay {
+    position: absolute;
+    inset: 0;
+    background:
+        linear-gradient(
+deg,
+            rgba(0,0,0,.86),
+            rgba(0,0,0,.58)
+        );
+    z-index: 1;
+}
+/* محتوای هدر */
 .header-inner {
-     min-height: 68px;
+    position: relative;
+    z-index: 2;
+     min-height: 75px;
      display: flex;
      align-items: center;
      justify-content: space-between;
-     gap: 12px;
+     gap: 10px;
 }
+/* لوگو */
 .logo {
      display: flex;
      align-items: center;
      gap: 9px;
+    color: #fff;
      font-weight: 900;
-     font-size: .95rem;
+     font-size: .86rem;
+}
+.logo strong {
+    color: var(--secondary);
 }
+/* آیکون لوگو */
 .logo-icon {
-     width: 38px;
-     height: 38px;
+     width: 40px;
+     height: 40px;
+    flex-shrink: 0;
+    display: grid;
+    place-items: center;
      border-radius: 10px;
      background: var(--primary);
-    display: grid;
-    place-items: center;
      font-size: 1.2rem;
+    box-shadow:
+4px 12px rgba(0,0,0,.3);
 }
-.logo strong {
-    color: var(--secondary);
+/* تماس موبایل */
-}
 .mobile-call {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 40px;
+    padding:
+px 12px;
+    border-radius: 9px;
      background: var(--primary);
-     padding: 8px 13px;
-     border-radius: 9px;
+     color: #fff;
-     font-size: .78rem;
-     font-weight: bold;
+     font-size: .72rem;
+     font-weight: 700;
+    white-space: nowrap;
+    transition: .25s;
+}
+.mobile-call:hover {
+     background: var(--primary-dark);
 }
+/* منوی دسکتاپ */
 .desktop-nav {
@@ خط ۱۶۸: / خط ۳۳۴: @@
 .hero {
      min-height: 560px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background:
          linear-gradient(
              rgba(0,0,0,.78),
-             rgba(0,0,0,.65)
+             rgba(0,0,0,.62)
          ),
-         url("https://images.unsplash.com/photo-1486006920555-c77dcf18193c?auto=format&fit=crop&w=1600&q=80")
-         center/cover no-repeat;
+         url("https://dl.faraghaib.ir/m/260024-01/260024-01-10.jpg")
+         center / cover no-repeat;
      color: #fff;
 }
 .hero-content {
-     padding: 55px 0;
+     padding:
+px 0;
      max-width: 750px;
 }
 .hero-badge {
      display: inline-block;
-     background: rgba(255,179,0,.15);
-     color: var(--secondary);
+     background:
-     border: 1px solid rgba(255,179,0,.4);
+        rgba(255,179,0,.15);
-     padding: 5px 12px;
+     color:
+        var(--secondary);
+     border:
+px solid rgba(255,179,0,.4);
+     padding:
+px 12px;
      border-radius: 30px;
-     font-size: .78rem;
+     font-size: .75rem;
      margin-bottom: 15px;
 }
 .hero h1 {
-     font-size: clamp(1.8rem, 8vw, 3.3rem);
+     font-size:
+        clamp(1.8rem, 8vw, 3.3rem);
      line-height: 1.45;
      margin-bottom: 15px;
 }
@@ خط ۲۱۰: / خط ۴۰۴: @@
 .hero p {
      color: #eee;
-     font-size: .95rem;
+     font-size: .92rem;
      max-width: 620px;
      margin-bottom: 25px;
 }
 .hero-buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
 }
 .btn {
      min-height: 48px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
-     padding: 10px 20px;
+     padding:
+px 20px;
      border-radius: 10px;
-     font-size: .9rem;
+     font-size: .88rem;
      font-weight: 700;
      transition: .25s;
 }
 .btn-primary {
-     background: var(--primary);
+     background:
+        var(--primary);
      color: #fff;
 }
 .btn-secondary {
-     background: var(--secondary);
+     background:
+        var(--secondary);
      color: #111;
 }
@@ خط ۲۵۰: / خط ۴۶۷: @@
 /* =========================================================
-    خدمات سریع
+    QUICK SERVICES
 ========================================================= */
 .quick-services {
-     background: var(--light);
-     padding: 25px 0;
+     background:
+        var(--light);
+     padding:
+px 0;
 }
 .quick-grid {
      display: grid;
-     grid-template-columns: repeat(2, 1fr);
+     grid-template-columns:
+        repeat(2, 1fr);
      gap: 10px;
 }
 .quick-item {
      background: #fff;
      border-radius: 12px;
-     padding: 17px 10px;
+     padding:
+px 10px;
      text-align: center;
-     box-shadow: var(--shadow);
+     box-shadow:
+        var(--shadow);
 }
 .quick-icon {
      font-size: 1.6rem;
      margin-bottom: 5px;
 }
 .quick-item strong {
      display: block;
      font-size: .82rem;
 }
 .quick-item span {
      color: var(--gray);
      font-size: .7rem;
 }
@@ خط ۲۸۹: / خط ۵۲۷: @@
 /* =========================================================
-    خدمات اصلی
+    SERVICES
 ========================================================= */
@@ خط ۲۹۷: / خط ۵۳۵: @@
 .services-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 15px;
 }
 .service-card {
      position: relative;
      overflow: hidden;
      background: #fff;
-     border: 1px solid var(--border);
-     border-radius: var(--radius);
+     border:
-     padding: 25px 20px;
+px solid var(--border);
+     border-radius:
+        var(--radius);
+     padding:
+px 20px;
      transition: .3s;
 }
 .service-card::before {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: 4px;
      height: 100%;
-     background: var(--primary);
+     background:
+        var(--primary);
 }
 .service-icon {
      width: 55px;
      height: 55px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: #fff1f1;
      color: var(--primary);
      font-size: 1.5rem;
      margin-bottom: 15px;
 }
 .service-card h3 {
      font-size: 1.05rem;
      margin-bottom: 8px;
 }
 .service-card p {
      color: var(--gray);
      font-size: .82rem;
 }
 .service-card:hover {
-     transform: translateY(-4px);
-     box-shadow: var(--shadow);
+     transform:
+        translateY(-4px);
+     box-shadow:
+        var(--shadow);
 }
 /* =========================================================
-    معرفی
+    ABOUT
 ========================================================= */
 .about {
-     background: var(--dark);
+     background:
+        var(--dark);
      color: #fff;
 }
 .about-grid {
      display: grid;
      gap: 25px;
 }
 .about-image {
-     border-radius: var(--radius);
+     border-radius:
+        var(--radius);
      overflow: hidden;
      min-height: 260px;
      background:
-         linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),
-         url("https://dl.faraghaib.ir/m/260024-01/260024-01-16.jpg")
+         linear-gradient(
-         center/cover;
+            rgba(0,0,0,.2),
+            rgba(0,0,0,.2)
+        ),
+         url("https://dl.faraghaib.ir/m/260024-01/260024-01-10.jpg")
+         center / cover no-repeat;
 }
 .about-content span {
-     color: var(--secondary);
+     color:
+        var(--secondary);
      font-size: .85rem;
      font-weight: bold;
 }
 .about-content h2 {
-     font-size: clamp(1.4rem, 6vw, 2.2rem);
-     margin: 8px 0 15px;
+     font-size:
+        clamp(1.4rem, 6vw, 2.2rem);
+     margin:
+px 0 15px;
 }
 .about-content p {
      color: #ccc;
      font-size: .9rem;
      margin-bottom: 15px;
 }
 .about-list {
      list-style: none;
      display: grid;
      gap: 8px;
 }
 .about-list li {
      font-size: .82rem;
      color: #eee;
 }
 .about-list li::before {
      content: "✓";
-     color: var(--secondary);
+     color:
+        var(--secondary);
      font-weight: bold;
      margin-left: 8px;
 }
@@ خط ۴۱۱: / خط ۷۲۳: @@
 /* =========================================================
-    خدمات تخصصی
+    SPECIAL SERVICES
 ========================================================= */
 .special-services {
-     background: var(--light);
+     background:
+        var(--light);
 }
 .special-grid {
      display: grid;
      gap: 15px;
 }
 .special-card {
      background: #fff;
      padding: 22px;
-     border-radius: var(--radius);
-     box-shadow: var(--shadow);
+     border-radius:
+        var(--radius);
+     box-shadow:
+        var(--shadow);
 }
 .special-card h3 {
      font-size: 1rem;
      margin-bottom: 8px;
 }
 .special-card p {
      color: var(--gray);
      font-size: .8rem;
 }
@@ خط ۴۴۲: / خط ۷۶۸: @@
 /* =========================================================
-    چرا ما؟
+    FEATURES
 ========================================================= */
 .features-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
 }
 .feature {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 18px;
-     border: 1px solid var(--border);
+     border:
+px solid var(--border);
      border-radius: 13px;
 }
 .feature-icon {
-     flex: 0 0 42px;
+     flex:
+0 42px;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
-     background: #fff3d6;
-     color: #e09b00;
+     background:
+        #fff3d6;
+     color:
+        #e09b00;
      border-radius: 10px;
 }
@@ خط ۴۷۶: / خط ۸۲۳: @@
 .feature p {
      font-size: .75rem;
-     color: var(--gray);
+     color:
+        var(--gray);
 }
@@ خط ۴۹۰: / خط ۸۴۰: @@
 .cta-box {
      background:
          linear-gradient(
@@ خط ۴۹۶: / خط ۸۴۷: @@
              var(--primary-dark)
          );
      color: #fff;
      border-radius: 20px;
-     padding: 35px 20px;
+     padding:
+px 20px;
      text-align: center;
-     box-shadow: 0 12px 30px rgba(229,57,53,.25);
+     box-shadow:
+12px 30px
+        rgba(229,57,53,.25);
 }
 .cta-box h2 {
-     font-size: clamp(1.4rem, 6vw, 2rem);
+     font-size:
+        clamp(1.4rem, 6vw, 2rem);
      margin-bottom: 10px;
 }
 .cta-box p {
-     color: #ffecec;
+     color:
+        #ffecec;
      font-size: .85rem;
      margin-bottom: 20px;
 }
 .cta-buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
 }
@@ خط ۵۲۲: / خط ۸۹۱: @@
 /* =========================================================
-    مقالات
+    BLOG
 ========================================================= */
@@ خط ۵۳۰: / خط ۸۹۹: @@
 .blog-grid {
      display: grid;
      gap: 15px;
 }
 .blog-card {
-     border: 1px solid var(--border);
+     border:
+px solid var(--border);
      border-radius: 15px;
      overflow: hidden;
      background: #fff;
 }
 .blog-image {
      aspect-ratio: 16 / 9;
      background:
-         url("https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=800&q=80")
-         center/cover;
+         url("https://dl.faraghaib.ir/m/260024-01/260024-01-10.jpg")
+         center / cover no-repeat;
 }
@@ خط ۵۵۳: / خط ۹۳۲: @@
 .blog-content span {
      font-size: .7rem;
-     color: var(--primary);
+     color:
+        var(--primary);
 }
 .blog-content h3 {
      font-size: .9rem;
-     margin: 5px 0;
+     margin:
+px 0;
 }
 .blog-content p {
-     color: var(--gray);
+     color:
+        var(--gray);
      font-size: .75rem;
 }
@@ خط ۵۶۹: / خط ۹۵۷: @@
 /* =========================================================
-    تماس
+    CONTACT
 ========================================================= */
 .contact {
-     background: var(--light);
+     background:
+        var(--light);
 }
 .contact-grid {
      display: grid;
      gap: 15px;
 }
 .contact-card {
      background: #fff;
      padding: 22px;
-     border-radius: var(--radius);
-     box-shadow: var(--shadow);
+     border-radius:
+        var(--radius);
+     box-shadow:
+        var(--shadow);
 }
 .contact-card h3 {
      margin-bottom: 15px;
      font-size: 1rem;
 }
 .contact-item {
      display: flex;
      align-items: center;
      gap: 10px;
-     padding: 9px 0;
-     border-bottom: 1px solid var(--border);
+     padding:
+px 0;
+     border-bottom:
+px solid var(--border);
      font-size: .8rem;
 }
@@ خط ۶۰۷: / خط ۱٬۰۱۵: @@
 .contact-icon {
-     color: var(--primary);
+     color:
+        var(--primary);
      font-size: 1.1rem;
 }
@@ خط ۶۱۷: / خط ۱٬۰۲۸: @@
 footer {
-     background: #111;
-     color: #ddd;
+     background:
-     padding: 40px 0 85px;
+        #111;
+     color:
+        #ddd;
+     padding:
+px 0 85px;
 }
 .footer-grid {
      display: grid;
      gap: 25px;
 }
 .footer-col h3 {
      color: #fff;
      font-size: .95rem;
      margin-bottom: 12px;
 }
@@ خط ۶۳۵: / خط ۱٬۰۵۷: @@
 .footer-col p,
 .footer-col li {
      color: #aaa;
      font-size: .75rem;
 }
 .footer-col ul {
      list-style: none;
      display: grid;
      gap: 6px;
 }
 .footer-bottom {
-     border-top: 1px solid #333;
+     border-top:
+px solid #333;
      margin-top: 25px;
      padding-top: 18px;
      text-align: center;
      color: #777;
      font-size: .7rem;
 }
@@ خط ۶۵۶: / خط ۱٬۰۹۰: @@
 /* =========================================================
-    نوار پایین موبایل
+    MOBILE BOTTOM NAV
 ========================================================= */
 .mobile-bottom-nav {
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      height: 65px;
-     background: #151515;
+     background:
+        #151515;
      z-index: 2000;
      display: grid;
-     grid-template-columns: repeat(3, 1fr);
-     box-shadow: 0 -4px 18px rgba(0,0,0,.2);
+     grid-template-columns:
+        repeat(3, 1fr);
+     box-shadow:
+-4px 18px
+        rgba(0,0,0,.2);
 }
 .mobile-bottom-nav a {
      color: #ddd;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2px;
      font-size: .65rem;
 }
 .mobile-bottom-nav a:first-child {
-     color: var(--secondary);
+     color:
+        var(--secondary);
 }
-.mobile-bottom-nav .nav-icon {
+.nav-icon {
      font-size: 1.25rem;
 }
@@ خط ۶۹۸: / خط ۱٬۱۵۵: @@
      .hero-buttons {
          flex-direction: row;
      }
      .btn {
          min-width: 150px;
      }
      .services-grid {
-         grid-template-columns: repeat(2, 1fr);
+         grid-template-columns:
+            repeat(2, 1fr);
      }
      .special-grid {
-         grid-template-columns: repeat(2, 1fr);
+         grid-template-columns:
+            repeat(2, 1fr);
      }
      .features-grid {
-         grid-template-columns: repeat(2, 1fr);
+         grid-template-columns:
+            repeat(2, 1fr);
      }
      .blog-grid {
-         grid-template-columns: repeat(2, 1fr);
+         grid-template-columns:
+            repeat(2, 1fr);
      }
      .contact-grid {
-         grid-template-columns: repeat(2, 1fr);
+         grid-template-columns:
+            repeat(2, 1fr);
      }
      .footer-grid {
-         grid-template-columns: repeat(2, 1fr);
+         grid-template-columns:
+            repeat(2, 1fr);
      }
 }
@@ خط ۷۴۰: / خط ۱٬۲۱۱: @@
          padding: 80px 0;
      }
+    /* HEADER */
      .site-header {
-         position: relative;
+        min-height: 90px;
+         position:
+            relative;
      }
      .header-inner {
-         min-height: 80px;
+         min-height: 90px;
      }
@@ خط ۷۵۴: / خط ۱٬۲۳۳: @@
      .desktop-nav {
          display: flex;
          align-items: center;
          gap: 25px;
          font-size: .82rem;
      }
      .desktop-nav a {
-         color: #ddd;
-         transition: .2s;
+         color: #fff;
+         transition: .25s;
      }
      .desktop-nav a:hover {
-         color: var(--secondary);
+         color:
+            var(--secondary);
      }
+    /* HERO */
      .hero {
          min-height: 680px;
      }
      .hero-content {
-         padding: 80px 0;
+         padding:
+px 0;
      }
+    /* QUICK */
      .quick-grid {
-         grid-template-columns: repeat(4, 1fr);
+         grid-template-columns:
+            repeat(4, 1fr);
      }
+    /* SERVICES */
      .services-grid {
-         grid-template-columns: repeat(4, 1fr);
+         grid-template-columns:
+            repeat(4, 1fr);
      }
+    /* ABOUT */
      .about-grid {
-         grid-template-columns: 1fr 1fr;
+         grid-template-columns:
+fr 1fr;
          align-items: center;
      }
+    /* SPECIAL */
      .special-grid {
-         grid-template-columns: repeat(4, 1fr);
+         grid-template-columns:
+            repeat(4, 1fr);
      }
+    /* FEATURES */
      .features-grid {
-         grid-template-columns: repeat(4, 1fr);
+         grid-template-columns:
+            repeat(4, 1fr);
      }
+    /* BLOG */
      .blog-grid {
-         grid-template-columns: repeat(3, 1fr);
+         grid-template-columns:
+            repeat(3, 1fr);
      }
+    /* CONTACT */
      .contact-grid {
-         grid-template-columns: 1fr 1fr;
+         grid-template-columns:
+fr 1fr;
      }
+    /* FOOTER */
      .footer-grid {
-         grid-template-columns: 2fr 1fr 1fr 1fr;
+         grid-template-columns:
+fr 1fr 1fr 1fr;
      }
+    /* MOBILE NAV */
      .mobile-bottom-nav {
          display: none;
      }
      footer {
          padding-bottom: 40px;
      }
@@ خط ۸۲۱: / خط ۱٬۳۶۰: @@
 /* =========================================================
-    DESKTOP LARGE
+    LARGE DESKTOP
 ========================================================= */
@@ خط ۸۲۷: / خط ۱٬۳۶۶: @@
      .hero-content {
          padding-right: 30px;
      }
      .service-card {
-         padding: 30px 22px;
+         padding:
+px 22px;
      }
      .quick-item {
          padding: 22px;
      }
@@ خط ۸۴۰: / خط ۱٬۳۸۳: @@
 </style>
 </head>
@@ خط ۸۴۶: / خط ۱٬۳۹۰: @@
-<!-- ======================================================
+<!-- =====================================================
       HEADER
-====================================================== -->
+===================================================== -->
 <header class="site-header">
+    <!-- تصویر پس زمینه -->
+    <div class="header-bg"></div>
+    <!-- لایه شفاف -->
+    <div class="header-overlay"></div>
      <div class="container header-inner">
-         <a href="#" class="logo" aria-label="مکانیکی جلوبندی و هیدرولیک فرمان محمد">
+         <a
+            href="#"
+            class="logo"
+            aria-label="مکانیکی، جلوبندی و هیدرولیک فرمان محمد"
+        >
-             <span class="logo-icon">🔧</span>
+             <span class="logo-icon">
+                🔧
+            </span>
              <span>
-                 مکانیکی و <strong>هیدرولیک محمد</strong>
+                 مکانیکی و
+                <strong>هیدرولیک محمد</strong>
              </span>
          </a>
-        <nav class="desktop-nav" aria-label="منوی اصلی">
-             <a href="#services">خدمات</a>
+        <nav
-             <a href="#about">درباره ما</a>
+            class="desktop-nav"
-             <a href="#special">تخصص‌ها</a>
+            aria-label="منوی اصلی"
-             <a href="#blog">مقالات</a>
+        >
-             <a href="#contact">تماس با ما</a>
+             <a href="#services">
+                خدمات
+            </a>
+             <a href="#about">
+                درباره ما
+            </a>
+             <a href="#special">
+                تخصص‌ها
+            </a>
+             <a href="#blog">
+                مقالات
+            </a>
+             <a href="#contact">
+                تماس با ما
+            </a>
          </nav>
-         <a href="tel:09123456789" class="mobile-call">
+         <a
+            href="tel:09123456789"
+            class="mobile-call"
+        >
              تماس فوری
          </a>
@@ خط ۸۸۳: / خط ۱٬۴۶۲: @@
-<!-- ======================================================
+<!-- =====================================================
       HERO
-====================================================== -->
+===================================================== -->
 <main>
@@ خط ۹۰۰: / خط ۱٬۴۷۹: @@
              <h1>
                  مکانیکی، جلوبندی و
-                 <strong>هیدرولیک فرمان محمد</strong>
+                 <strong>
+                    هیدرولیک فرمان محمد
+                </strong>
              </h1>
              <p>
-                 ارائه خدمات تخصصی مکانیکی خودرو، تعمیر موتور،
-                 تعمیر گیربکس، جلوبندی سازی و تعمیر هیدرولیک فرمان
+                 ارائه خدمات تخصصی مکانیکی خودرو،
-                 با دقت، تجربه و استفاده از تجهیزات مناسب.
+                تعمیر موتور، تعمیر گیربکس،
+                 جلوبندی سازی و تعمیر هیدرولیک فرمان
+                 با دقت و تجربه.
              </p>
              <div class="hero-buttons">
-                 <a href="tel:09123456789"
+                 <a
-                   class="btn btn-primary">
+                    href="tel:09123456789"
+                    class="btn btn-primary"
+                >
                      📞 تماس برای تعمیر خودرو
                  </a>
-                 <a href="#services"
-                   class="btn btn-secondary">
+                 <a
+                    href="#services"
+                    class="btn btn-secondary"
+                >
                      مشاهده خدمات
                  </a>
@@ خط ۹۳۱: / خط ۱٬۵۲۴: @@
-<!-- ======================================================
+<!-- =====================================================
       QUICK SERVICES
-====================================================== -->
+===================================================== -->
+<section
+    class="quick-services"
+    aria-label="خدمات اصلی تعمیرگاه"
+>
+<div class="container">
+<div class="quick-grid">
+<div class="quick-item">
+    <div class="quick-icon">
+        🔧
+    </div>
+    <strong>
+        مکانیکی خودرو
+    </strong>
+    <span>
+        عیب‌یابی و تعمیر
+    </span>
+</div>
+<div class="quick-item">
+    <div class="quick-icon">
+        ⚙️
+    </div>
+    <strong>
+        تعمیر گیربکس
+    </strong>
-<section class="quick-services"
+    <span>
-         aria-label="خدمات اصلی تعمیرگاه">
+        بررسی تخصصی
+    </span>
-    <div class="container">
+</div>
+<div class="quick-item">
-        <div class="quick-grid">
+    <div class="quick-icon">
+        🚗
+    </div>
-            <div class="quick-item">
+    <strong>
-                <div class="quick-icon">🔧</div>
+        جلوبندی سازی
-                <strong>مکانیکی خودرو</strong>
+    </strong>
-                <span>عیب‌یابی و تعمیر</span>
-            </div>
-            <div class="quick-item">
+    <span>
-                <div class="quick-icon">⚙️</div>
+        رفع مشکلات جلوبندی
-                <strong>تعمیر گیربکس</strong>
+    </span>
-                <span>بررسی تخصصی</span>
-            </div>
-            <div class="quick-item">
+</div>
-                <div class="quick-icon">🚗</div>
-                <strong>جلوبندی سازی</strong>
-                <span>رفع مشکلات جلوبندی</span>
-            </div>
-            <div class="quick-item">
-                <div class="quick-icon">⭕</div>
-                <strong>هیدرولیک فرمان</strong>
-                <span>تعمیر سیستم فرمان</span>
-            </div>
-        </div>
+<div class="quick-item">
+    <div class="quick-icon">
+        ⭕
      </div>
+    <strong>
+        هیدرولیک فرمان
+    </strong>
+    <span>
+        تعمیر سیستم فرمان
+    </span>
+</div>
+</div>
+</div>
 </section>
-<!-- ======================================================
+<!-- =====================================================
       SERVICES
-====================================================== -->
+===================================================== -->
+<section
+    class="services"
+    id="services"
+    aria-labelledby="services-title"
+>
-<section class="services"
+<div class="container">
-         id="services"
-         aria-labelledby="services-title">
-    <div class="container">
+<div class="section-title">
-        <div class="section-title">
+<span>
+    خدمات تعمیرگاه
+</span>
-            <span>خدمات تعمیرگاه</span>
+<h2 id="services-title">
+    خدمات مکانیکی و تعمیر خودرو
+</h2>
-            <h2 id="services-title">
+<p>
-                خدمات مکانیکی و تعمیر خودرو
+    خدمات تخصصی برای عیب‌یابی،
-            </h2>
+    تعمیر و سرویس خودرو
+</p>
-            <p>
+</div>
-                مجموعه‌ای از خدمات تخصصی برای عیب‌یابی،
-                تعمیر و سرویس خودرو
-            </p>
-        </div>
+<div class="services-grid">
-        <div class="services-grid">
-            <article class="service-card">
+<article class="service-card">
-                <div class="service-icon">🔧</div>
+<div class="service-icon">
+    🔧
+</div>
-                <h3>تعمیر موتور خودرو</h3>
+<h3>
+    تعمیر موتور خودرو
+</h3>
-                <p>
+<p>
-                    عیب‌یابی و تعمیر موتور خودرو،
+    عیب‌یابی و تعمیر موتور خودرو،
-                    رفع مشکلات فنی و سرویس بخش‌های مختلف موتور.
+    رفع مشکلات فنی و سرویس بخش‌های مختلف موتور.
-                </p>
+</p>
-            </article>
+</article>
-            <article class="service-card">
+<article class="service-card">
-                <div class="service-icon">⚙️</div>
+<div class="service-icon">
+    ⚙️
+</div>
-                <h3>تعمیر گیربکس</h3>
+<h3>
+    تعمیر گیربکس
+</h3>
-                <p>
+<p>
-                    بررسی و تعمیر مشکلات گیربکس،
+    بررسی و تعمیر مشکلات گیربکس،
-                    رفع صدا، لرزش و ایرادات عملکردی خودرو.
+    رفع صدا، لرزش و ایرادات عملکردی خودرو.
-                </p>
+</p>
-            </article>
+</article>
-            <article class="service-card">
+<article class="service-card">
-                <div class="service-icon">🚘</div>
+<div class="service-icon">
+    🚘
+</div>
-                <h3>جلوبندی سازی</h3>
+<h3>
+    جلوبندی سازی
+</h3>
-                <p>
+<p>
-                    تعمیر و تعویض قطعات جلوبندی،
+    تعمیر و تعویض قطعات جلوبندی،
-                    رفع لرزش، صدا و ناهماهنگی خودرو.
+    رفع لرزش، صدا و ناهماهنگی خودرو.
-                </p>
+</p>
-            </article>
+</article>
-            <article class="service-card">
+<article class="service-card">
-                <div class="service-icon">🔩</div>
+<div class="service-icon">
+    🔩
+</div>
-                <h3>تعمیر هیدرولیک فرمان</h3>
+<h3>
+    تعمیر هیدرولیک فرمان
+</h3>
-                <p>
+<p>
-                    بررسی و تعمیر سیستم هیدرولیک فرمان،
+    بررسی و تعمیر سیستم هیدرولیک فرمان،
-                    رفع نشتی روغن و مشکلات فرمان خودرو.
+    رفع نشتی روغن و مشکلات فرمان خودرو.
-                </p>
+</p>
-            </article>
+</article>
-        </div>
-    </div>
+</div>
+</div>
 </section>
-<!-- ======================================================
+<!-- =====================================================
       ABOUT
-====================================================== -->
+===================================================== -->
+<section
+    class="about"
+    id="about"
+    aria-labelledby="about-title"
+>
+<div class="container about-grid">
+<div
+    class="about-image"
+    role="img"
+    aria-label="تعمیر خودرو و خدمات مکانیکی"
+></div>
+<div class="about-content">
+<span>
+    درباره تعمیرگاه
+</span>
+<h2 id="about-title">
+    مکانیکی، جلوبندی و
+    هیدرولیک فرمان محمد
-<section class="about"
+</h2>
-         id="about"
-         aria-labelledby="about-title">
-    <div class="container about-grid">
+<p>
-        <div class="about-image"
+    هدف ما ارائه خدمات دقیق و اصولی
-             role="img"
+    در زمینه تعمیرات مکانیکی خودرو،
-             aria-label="تعمیر خودرو و خدمات مکانیکی">
+    جلوبندی سازی و هیدرولیک فرمان است.
-        </div>
+</p>
+<p>
+    قبل از انجام تعمیرات، مشکل خودرو
+    بررسی و علت خرابی مشخص می‌شود
+    تا خدمات مورد نیاز با دقت بیشتری انجام شود.
+</p>
-        <div class="about-content">
-            <span>درباره تعمیرگاه</span>
+<ul class="about-list">
-            <h2 id="about-title">
+<li>
-                مکانیکی، جلوبندی و هیدرولیک فرمان محمد
+    عیب‌یابی و بررسی دقیق خودرو
-            </h2>
+</li>
-            <p>
+<li>
-                هدف ما ارائه خدمات دقیق و اصولی در زمینه
+    تعمیر تخصصی جلوبندی
-                تعمیرات مکانیکی خودرو، جلوبندی سازی و
+</li>
-                هیدرولیک فرمان است.
-            </p>
-            <p>
+<li>
-                قبل از انجام تعمیرات، مشکل خودرو بررسی و
+    تعمیر هیدرولیک فرمان
-                علت خرابی مشخص می‌شود تا خدمات مورد نیاز
+</li>
-                با دقت بیشتری انجام شود.
-            </p>
-            <ul class="about-list">
+<li>
+    خدمات مکانیکی خودرو
+</li>
-                <li>عیب‌یابی و بررسی دقیق خودرو</li>
+<li>
-                <li>تعمیر تخصصی جلوبندی</li>
+    ارائه مشاوره پیش از تعمیر
-                <li>تعمیر هیدرولیک فرمان</li>
+</li>
-                <li>خدمات مکانیکی خودرو</li>
-                <li>ارائه مشاوره پیش از تعمیر</li>
-            </ul>
+</ul>
-        </div>
+</div>
-    </div>
+</div>
 </section>
-<!-- ======================================================
+<!-- =====================================================
       SPECIAL SERVICES
-====================================================== -->
+===================================================== -->
-<section class="special-services"
+<section
-         id="special"
+    class="special-services"
-         aria-labelledby="special-title">
+    id="special"
+    aria-labelledby="special-title"
+>
-    <div class="container">
+<div class="container">
+<div class="section-title">
+<span>
+    تخصص‌های مجموعه
+</span>
-        <div class="section-title">
+<h2 id="special-title">
+    تعمیرات تخصصی خودرو
+</h2>
-            <span>تخصص‌های مجموعه</span>
+</div>
-            <h2 id="special-title">
-                تعمیرات تخصصی خودرو
-            </h2>
-        </div>
+<div class="special-grid">
-        <div class="special-grid">
+<article class="special-card">
-            <article class="special-card">
+<h3>
+    تعمیر پمپ هیدرولیک فرمان
+</h3>
-                <h3>
+<p>
-                    تعمیر پمپ هیدرولیک فرمان
+    بررسی نشتی، صدا و عملکرد نامناسب
-                </h3>
+    پمپ هیدرولیک فرمان خودرو.
+</p>
-                <p>
+</article>
-                    بررسی نشتی، صدا و عملکرد نامناسب
-                    پمپ هیدرولیک فرمان خودرو.
-                </p>
-            </article>
+<article class="special-card">
-            <article class="special-card">
+<h3>
+    تعمیر جلوبندی خودرو
+</h3>
-                <h3>
+<p>
-                    تعمیر جلوبندی خودرو
+    بررسی سیستم تعلیق، فرمان و قطعات
-                </h3>
+    مختلف جلوبندی خودرو.
+</p>
-                <p>
+</article>
-                    بررسی سیستم تعلیق، فرمان و قطعات
-                    مختلف جلوبندی خودرو.
-                </p>
-            </article>
+<article class="special-card">
-            <article class="special-card">
+<h3>
+    تعمیر سیستم فرمان
+</h3>
-                <h3>
+<p>
-                    تعمیر سیستم فرمان
+    عیب‌یابی مشکلات فرمان و بررسی
-                </h3>
+    عملکرد سیستم هیدرولیک.
+</p>
-                <p>
+</article>
-                    عیب‌یابی مشکلات فرمان و بررسی
-                    عملکرد سیستم هیدرولیک.
-                </p>
-            </article>
+<article class="special-card">
-            <article class="special-card">
+<h3>
+    تعمیرات مکانیکی
+</h3>
-                <h3>
+<p>
-                    تعمیرات مکانیکی
+    انجام خدمات مکانیکی و رفع ایرادات
-                </h3>
+    فنی خودرو با بررسی اصولی.
+</p>
-                <p>
+</article>
-                    انجام خدمات مکانیکی و رفع ایرادات
-                    فنی خودرو با بررسی اصولی.
-                </p>
-            </article>
-        </div>
+</div>
-    </div>
+</div>
 </section>
-<!-- ======================================================
+<!-- =====================================================
-      WHY US
+      FEATURES
-====================================================== -->
+===================================================== -->
 <section aria-labelledby="why-title">
-     <div class="container">
+<div class="container">
+<div class="section-title">
+<span>
+     انتخاب مطمئن
+</span>
+<h2 id="why-title">
+    چرا مکانیکی محمد؟
+</h2>
+</div>
+<div class="features-grid">
+<div class="feature">
+<div class="feature-icon">
+    ✓
+</div>
+<div>
+<h3>
+    عیب‌یابی دقیق
+</h3>
+<p>
+    بررسی مشکل خودرو قبل از تعمیر.
+</p>
+</div>
+</div>
-        <div class="section-title">
-            <span>انتخاب مطمئن</span>
+<div class="feature">
-            <h2 id="why-title">
+<div class="feature-icon">
-                چرا مکانیکی محمد؟
+    🔧
-            </h2>
+</div>
-        </div>
+<div>
+<h3>
+    تخصص در تعمیرات
+</h3>
-        <div class="features-grid">
+<p>
+    تمرکز بر مکانیکی،
+    جلوبندی و هیدرولیک.
+</p>
-            <div class="feature">
+</div>
-                <div class="feature-icon">✓</div>
+</div>
-                <div>
-                    <h3>عیب‌یابی دقیق</h3>
-                    <p>
-                        بررسی مشکل خودرو قبل از تعمیر.
-                    </p>
-                </div>
-            </div>
+<div class="feature">
+<div class="feature-icon">
+    ⏱
+</div>
-            <div class="feature">
+<div>
-                <div class="feature-icon">🔧</div>
+<h3>
+    صرفه‌جویی در زمان
+</h3>
-                <div>
+<p>
-                    <h3>تخصص در تعمیرات</h3>
+    بررسی سریع‌تر مشکل
-                    <p>
+    و ارائه راهکار.
-                        تمرکز بر مکانیکی، جلوبندی و هیدرولیک.
+</p>
-                    </p>
-                </div>
-            </div>
+</div>
+</div>
-            <div class="feature">
-                <div class="feature-icon">⏱</div>
+<div class="feature">
-                <div>
+<div class="feature-icon">
-                    <h3>صرفه‌جویی در زمان</h3>
+    ⭐
-                    <p>
+</div>
-                        بررسی سریع‌تر مشکل و ارائه راهکار.
-                    </p>
-                </div>
-            </div>
+<div>
+<h3>
+    خدمات مشتری‌محور
+</h3>
-            <div class="feature">
+<p>
+    توضیح مشکل و خدمات
+    مورد نیاز به مشتری.
+</p>
-                <div class="feature-icon">⭐</div>
+</div>
-                <div>
+</div>
-                    <h3>خدمات مشتری‌محور</h3>
-                    <p>
-                        توضیح مشکل و خدمات مورد نیاز به مشتری.
-                    </p>
-                </div>
-            </div>
-        </div>
+</div>
-    </div>
+</div>
 </section>
-<!-- ======================================================
+<!-- =====================================================
       CTA
-====================================================== -->
+===================================================== -->
 <section class="cta">
-    <div class="container">
+<div class="container">
+<div class="cta-box">
-        <div class="cta-box">
+<h2>
+    خودرو مشکل فنی دارد؟
+</h2>
-            <h2>
+<p>
-                خودرو مشکل فنی دارد؟
+    برای بررسی مشکل خودرو و دریافت مشاوره
-            </h2>
+    با مکانیکی، جلوبندی و هیدرولیک فرمان محمد تماس بگیرید.
+</p>
-            <p>
-                برای بررسی مشکل خودرو و دریافت مشاوره
-                با مکانیکی، جلوبندی و هیدرولیک فرمان محمد تماس بگیرید.
-            </p>
-            <div class="cta-buttons">
+<div class="cta-buttons">
-                <a href="tel:09123456789"
+<a
-                   class="btn btn-secondary">
+    href="tel:09123456789"
-                    📞 تماس مستقیم
+    class="btn btn-secondary"
-                </a>
+>
+    📞 تماس مستقیم
+</a>
-                <a href="#contact"
+<a
-                   class="btn"
+    href="#contact"
-                   style="background:#fff;color:#222;">
+    class="btn"
-                    اطلاعات تماس
+    style="background:#fff;color:#222;"
-                </a>
+>
+    اطلاعات تماس
+</a>
-            </div>
+</div>
-        </div>
+</div>
-    </div>
+</div>
 </section>
-<!-- ======================================================
+<!-- =====================================================
       BLOG
-====================================================== -->
+===================================================== -->
-<section class="blog"
+<section
-         id="blog"
+    class="blog"
-         aria-labelledby="blog-title">
+    id="blog"
+    aria-labelledby="blog-title"
+>
-    <div class="container">
+<div class="container">
+<div class="section-title">
-        <div class="section-title">
+<span>
+    راهنمای خودرو
+</span>
-            <span>راهنمای خودرو</span>
+<h2 id="blog-title">
+    مقالات و نکات فنی خودرو
+</h2>
-            <h2 id="blog-title">
+</div>
-                مقالات و نکات فنی خودرو
-            </h2>
-        </div>
+<div class="blog-grid">
-        <div class="blog-grid">
+<article class="blog-card">
-            <article class="blog-card">
+<div
+    class="blog-image"
+    role="img"
+    aria-label="جلوبندی خودرو"
+></div>
-                <div class="blog-image"
+<div class="blog-content">
-                     role="img"
-                     aria-label="جلوبندی خودرو">
-                </div>
-                <div class="blog-content">
+<span>
+    جلوبندی خودرو
+</span>
-                    <span>جلوبندی خودرو</span>
+<h3>
+    نشانه‌های خرابی جلوبندی خودرو چیست؟
+</h3>
-                    <h3>
+<p>
-                        نشانه‌های خرابی جلوبندی خودرو چیست؟
+    با مهم‌ترین علائم خرابی قطعات
-                    </h3>
+    جلوبندی خودرو آشنا شوید.
+</p>
-                    <p>
+</div>
-                        با مهم‌ترین علائم خرابی قطعات
-                        جلوبندی خودرو آشنا شوید.
-                    </p>
-                </div>
+</article>
-            </article>
+<article class="blog-card">
-            <article class="blog-card">
+<div
+    class="blog-image"
+    role="img"
+    aria-label="هیدرولیک فرمان خودرو"
+></div>
-                <div class="blog-image"
+<div class="blog-content">
-                     role="img"
-                     aria-label="هیدرولیک فرمان خودرو">
-                </div>
-                <div class="blog-content">
+<span>
+    هیدرولیک فرمان
+</span>
-                    <span>هیدرولیک فرمان</span>
+<h3>
+    علت سفت شدن فرمان هیدرولیک چیست؟
+</h3>
-                    <h3>
+<p>
-                        علت سفت شدن فرمان هیدرولیک چیست؟
+    بررسی دلایل رایج سفت شدن فرمان
-                    </h3>
+    و مشکلات سیستم هیدرولیک.
+</p>
-                    <p>
+</div>
-                        بررسی دلایل رایج سفت شدن فرمان
-                        و مشکلات سیستم هیدرولیک.
-                    </p>
-                </div>
+</article>
-            </article>
+<article class="blog-card">
-            <article class="blog-card">
+<div
+    class="blog-image"
+    role="img"
+    aria-label="تعمیر موتور خودرو"
+></div>
-                <div class="blog-image"
+<div class="blog-content">
-                     role="img"
-                     aria-label="تعمیر موتور خودرو">
-                </div>
-                <div class="blog-content">
+<span>
+    مکانیکی خودرو
+</span>
-                    <span>مکانیکی خودرو</span>
+<h3>
+    چه زمانی خودرو به تعمیر موتور نیاز دارد؟
+</h3>
-                    <h3>
+<p>
-                        چه زمانی خودرو به تعمیر موتور نیاز دارد؟
+    علائم مهمی که می‌توانند نشان‌دهنده
-                    </h3>
+    وجود مشکل در موتور خودرو باشند.
+</p>
-                    <p>
+</div>
-                        علائم مهمی که می‌توانند نشان‌دهنده
-                        وجود مشکل در موتور خودرو باشند.
-                    </p>
-                </div>
+</article>
-            </article>
-        </div>
+</div>
-    </div>
+</div>
 </section>
-<!-- ======================================================
+<!-- =====================================================
       CONTACT
-====================================================== -->
+===================================================== -->
+<section
+    class="contact"
+    id="contact"
+    aria-labelledby="contact-title"
+>
-<section class="contact"
+<div class="container">
-         id="contact"
-         aria-labelledby="contact-title">
-    <div class="container">
+<div class="section-title">
+<span>
+    ارتباط با ما
+</span>
+<h2 id="contact-title">
+    تماس با مکانیکی محمد
+</h2>
+</div>
-        <div class="section-title">
-            <span>ارتباط با ما</span>
+<div class="contact-grid">
-            <h2 id="contact-title">
-                تماس با مکانیکی محمد
-            </h2>
-        </div>
+<div class="contact-card">
+<h3>
+    اطلاعات تماس
+</h3>
-        <div class="contact-grid">
+<div class="contact-item">
-            <div class="contact-card">
+<span class="contact-icon">
+    📞
+</span>
-                <h3>
+<a href="tel:09123456789">
-                    اطلاعات تماس
+345 6789
-                </h3>
+</a>
-                <div class="contact-item">
+</div>
-                    <span class="contact-icon">📞</span>
-                    <a href="tel:09123456789">
+<div class="contact-item">
-345 6789
-                    </a>
-                </div>
+<span class="contact-icon">
+    📍
+</span>
+<span>
+    آدرس تعمیرگاه را اینجا وارد کنید
+</span>
-                <div class="contact-item">
+</div>
-                    <span class="contact-icon">📍</span>
-                    <span>
+<div class="contact-item">
-                        آدرس تعمیرگاه را اینجا وارد کنید
-                    </span>
-                </div>
+<span class="contact-icon">
+    🕐
+</span>
+<span>
+    ساعات کاری: شنبه تا پنجشنبه
+</span>
-                <div class="contact-item">
+</div>
-                    <span class="contact-icon">🕐</span>
-                    <span>
+</div>
-                        ساعات کاری: شنبه تا پنجشنبه
-                    </span>
-                </div>
-            </div>
+<div class="contact-card">
+<h3>
+    خدمات قابل ارائه
+</h3>
-            <div class="contact-card">
-                <h3>
+<div class="contact-item">
-                    خدمات قابل ارائه
+    🔧 تعمیرات مکانیکی
-                </h3>
+</div>
-                <div class="contact-item">
+<div class="contact-item">
-                    🔧 تعمیرات مکانیکی
+    🚗 جلوبندی سازی
-                </div>
+</div>
-                <div class="contact-item">
+<div class="contact-item">
-                    🚗 جلوبندی سازی
+    ⚙️ تعمیر هیدرولیک فرمان
-                </div>
+</div>
-                <div class="contact-item">
+<div class="contact-item">
-                    ⚙️ تعمیر هیدرولیک فرمان
+    🔩 تعمیر موتور و گیربکس
-                </div>
+</div>
-                <div class="contact-item">
-                    🔩 تعمیر موتور و گیربکس
-                </div>
-            </div>
+</div>
-        </div>
+</div>
-    </div>
+</div>
 </section>
 </main>
-<!-- ======================================================
+<!-- =====================================================
       FOOTER
-====================================================== -->
+===================================================== -->
 <footer>
-     <div class="container">
+<div class="container">
+<div class="footer-grid">
+<div class="footer-col">
+<h3>
+     مکانیکی، جلوبندی و هیدرولیک فرمان محمد
+</h3>
+<p>
+    ارائه خدمات تخصصی مکانیکی خودرو،
+    جلوبندی سازی و تعمیر هیدرولیک فرمان.
+</p>
+</div>
+<div class="footer-col">
+<h3>
+    خدمات
+</h3>
+<ul>
+<li>
+    <a href="#services">
+        تعمیر موتور
+    </a>
+</li>
-        <div class="footer-grid">
+<li>
+    <a href="#services">
+        تعمیر گیربکس
+    </a>
+</li>
+<li>
+    <a href="#services">
+        جلوبندی سازی
+    </a>
+</li>
-            <div class="footer-col">
+<li>
+    <a href="#special">
+        هیدرولیک فرمان
+    </a>
+</li>
-                <h3>
+</ul>
-                    مکانیکی، جلوبندی و هیدرولیک فرمان محمد
-                </h3>
-                <p>
+</div>
-                    ارائه خدمات تخصصی مکانیکی خودرو،
-                    جلوبندی سازی و تعمیر هیدرولیک فرمان.
-                </p>
-            </div>
+<div class="footer-col">
-            <div class="footer-col">
+<h3>
+    دسترسی سریع
+</h3>
-                <h3>خدمات</h3>
+<ul>
-                <ul>
+<li>
-                    <li><a href="#services">تعمیر موتور</a></li>
+    <a href="#about">
-                    <li><a href="#services">تعمیر گیربکس</a></li>
+        درباره ما
-                    <li><a href="#services">جلوبندی سازی</a></li>
+    </a>
-                    <li><a href="#special">هیدرولیک فرمان</a></li>
+</li>
-                </ul>
-            </div>
+<li>
+    <a href="#services">
+        خدمات
+    </a>
+</li>
+<li>
+    <a href="#blog">
+        مقالات
+    </a>
+</li>
+<li>
+    <a href="#contact">
+        تماس با ما
+    </a>
+</li>
+</ul>
-            <div class="footer-col">
+</div>
-                <h3>دسترسی سریع</h3>
-                <ul>
+<div class="footer-col">
-                    <li><a href="#about">درباره ما</a></li>
-                    <li><a href="#services">خدمات</a></li>
-                    <li><a href="#blog">مقالات</a></li>
-                    <li><a href="#contact">تماس با ما</a></li>
-                </ul>
-            </div>
+<h3>
+    تماس
+</h3>
+<ul>
-            <div class="footer-col">
+<li>
+    <a href="tel:09123456789">
+345 6789
+    </a>
+</li>
-                <h3>تماس</h3>
+<li>
+    آدرس تعمیرگاه
+</li>
-                <ul>
+</ul>
-                    <li>
-                        <a href="tel:09123456789">
-345 6789
-                        </a>
-                    </li>
-                    <li>
+</div>
-                        آدرس تعمیرگاه
-                    </li>
-                </ul>
-            </div>
-        </div>
+</div>
-        <div class="footer-bottom">
+<div class="footer-bottom">
-            © تمامی حقوق برای مکانیکی، جلوبندی و
+© تمامی حقوق برای مکانیکی،
-            هیدرولیک فرمان محمد محفوظ است.
+جلوبندی و هیدرولیک فرمان محمد محفوظ است.
-        </div>
+</div>
-    </div>
+</div>
 </footer>
-<!-- ======================================================
+<!-- =====================================================
       MOBILE BOTTOM NAV
-====================================================== -->
+===================================================== -->
-<nav class="mobile-bottom-nav"
+<nav
-     aria-label="دسترسی سریع موبایل">
+    class="mobile-bottom-nav"
+    aria-label="دسترسی سریع موبایل"
+>
-    <a href="tel:09123456789">
+<a href="tel:09123456789">
-        <span class="nav-icon">📞</span>
+<span class="nav-icon">
+    📞
+</span>
-        <span>تماس</span>
+<span>
+    تماس
+</span>
-    </a>
+</a>
-    <a href="#services">
+<a href="#services">
-        <span class="nav-icon">🔧</span>
+<span class="nav-icon">
+    🔧
+</span>
-        <span>خدمات</span>
+<span>
+    خدمات
+</span>
-    </a>
+</a>
-    <a href="#contact">
+<a href="#contact">
-        <span class="nav-icon">📍</span>
+<span class="nav-icon">
+    📍
+</span>
-        <span>مسیریابی</span>
+<span>
+    تماس و آدرس
+</span>
-    </a>
+</a>
 </nav>

تست: تفاوت میان نسخه‌ها