/* Harmony Healing Center — V7.9.79
   AR mobile Trusted Organizations — TITLE ROOT FIX

   Root cause:
   V7.9.78 still forced the full Arabic title into one nowrap line.
   At 490px the phrase is simply wider than the available viewport, so the
   copper phrase gets clipped on the left.

   Fix:
   - keep the proven V7.9.77 white-gap fix
   - remove the V7.9.78 nowrap layer
   - render the two existing colored title spans as two centered lines
   - no transform scaling, no clipping, no overflow tricks
   - description centered and readable
*/

@media (max-width: 760px) {
  html[lang="ar"] .home45r-head {
    position: relative !important;
    z-index: 5 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;

    direction: rtl !important;
    text-align: center !important;
    overflow: visible !important;
  }

  html[lang="ar"] .home45r-kicker {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 6px !important;
    padding: 0 !important;

    font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  html[lang="ar"] .home45r-title {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    row-gap: 1px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 7px !important;
    padding: 0 !important;

    font-family: "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif !important;
    font-size: clamp(25px, 6.2vw, 30px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;

    white-space: normal !important;
    overflow: visible !important;
    direction: rtl !important;
    text-align: center !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
  }

  html[lang="ar"] .home45r-title-teal,
  html[lang="ar"] .home45r-title-copper {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;

    white-space: nowrap !important;
    text-align: center !important;
    direction: rtl !important;
  }

  /* Phrase order for mobile:
     1) موثوق به لدى
     2) مؤسسات رائدة
     Use flex/order fallback too in case the title is not direct-span-only. */
  html[lang="ar"] .home45r-title-teal {
    grid-row: 1 !important;
    order: 1 !important;
  }

  html[lang="ar"] .home45r-title-copper {
    grid-row: 2 !important;
    order: 2 !important;
  }

  html[lang="ar"] .home45r-description {
    display: block !important;
    width: 90% !important;
    max-width: 410px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;

    white-space: normal !important;
    direction: rtl !important;
    text-align: center !important;
    overflow: visible !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
  }
}

@media (max-width: 420px) {
  html[lang="ar"] .home45r-head {
    padding-inline: 10px !important;
    margin-bottom: 10px !important;
  }

  html[lang="ar"] .home45r-title {
    font-size: clamp(23px, 6vw, 27px) !important;
  }

  html[lang="ar"] .home45r-description {
    width: 94% !important;
    font-size: 9.8px !important;
  }
}