/* ==========================================================================
   MSA V136 — SAFE responsive corrections
   Desktop design is intentionally preserved.
   ========================================================================== */

/* Harmless global guards only — no desktop sizing/layout overrides. */
html, body { max-width: 100%; overflow-x: hidden !important; }
.lang { white-space: nowrap !important; word-break: keep-all !important; }
img, video, svg, canvas, iframe { max-width: 100%; }
body:not(.msa-admin-v37) * { box-sizing: border-box; }

/* Do not let the optional social-side state physically shift the page. */
body.msa-social-side-reserved:not(.msa-admin-v37) main,
body.msa-social-side-reserved:not(.msa-admin-v37) footer,
body.msa-social-side-reserved:not(.msa-admin-v37) .footer {
  margin-inline: 0 !important;
  transform: none !important;
}

/* Tablet/mobile only. Desktop (>1050px) remains the original site. */
@media (max-width: 1050px) {
  body:not(.msa-admin-v37) .nav {
    max-height: calc(100dvh - 105px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body:not(.msa-admin-v37) :where(
    .home70-hero-grid, .about-grid, .contact-grid, .service-detail,
    .career-layout-v28, .contact-v30-grid
  ) {
    min-width: 0;
  }
}

/* Phones */
@media (max-width: 760px) {
  html, body,
  body:not(.msa-admin-v37) main,
  body:not(.msa-admin-v37) section,
  body:not(.msa-admin-v37) footer {
    width: 100%;
    max-width: 100%;
  }

  /* Consistent safe page gutter without changing desktop containers. */
  body:not(.msa-admin-v37) .container,
  body.project-v62 .v62-shell {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* Header: keep logo + essential actions in one row. */
  body:not(.msa-admin-v37) .nav-wrap {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin-inline: auto !important;
    gap: 7px !important;
  }

  body:not(.msa-admin-v37) .brand {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  body:not(.msa-admin-v37) .brand img {
    width: 108px !important;
    max-width: 108px !important;
    height: auto !important;
  }

  body:not(.msa-admin-v37) .nav-actions {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  body:not(.msa-admin-v37) :is(.mode-toggle,.lang,.menu) {
    min-width: 36px !important;
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
  }

  body:not(.msa-admin-v37) .menu {
    width: 38px !important;
    min-width: 38px !important;
    padding: 6px !important;
  }

  /* Menu remains inside viewport. */
  body:not(.msa-admin-v37) .nav {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Home hero: center geometry only; keep original visual language. */
  body.home70 .home70-hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.home70 .home70-hero .container {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-inline: auto !important;
  }

  body.home70 .home70-hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  body.home70 .home70-copy,
  body.home70 .home70-actions,
  body.home70 .home70-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  body.home70 .home70-copy {
    text-align: center !important;
  }

  body.home70 .home70-eyebrow {
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  body.home70 .home70-title {
    max-width: 390px !important;
    margin-inline: auto !important;
    font-size: clamp(38px, 10.4vw, 48px) !important;
    line-height: 1.16 !important;
  }

  body.home70 .home70-copy > p {
    max-width: 420px !important;
    margin-inline: auto !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  body.home70 .home70-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 420px !important;
  }

  body.home70 .home70-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The collage must never be wider than the phone. */
  body.home70 .home70-visual.home71-collage {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Shared page heroes: safe text width, no edge hugging. */
  body.about-page :is(.about-banner-content,.about-showcase-content),
  body.services-page-v116 .svc109-hero-inner,
  body.contact-page-v30 .contact-hero-content,
  body.careers-page-v28 .career-hero-content,
  body.project-v62 .v62-hero-copy,
  body.news-page-v57 .news-head-v57 {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* Responsive grids/forms without affecting desktop. */
  body:not(.msa-admin-v37) :where(
    .project-grid,.project-grid.big,.service-grid,.news-grid,.feature-grid,
    .home70-services,.home70-news,.home70-values-grid,.home70-benefit-grid,
    .contact-grid,.contact-v30-grid,.career-layout-v28,.footer-grid,.msa-footer-grid
  ) {
    min-width: 0 !important;
  }

  body:not(.msa-admin-v37) :where(input,select,textarea,button) {
    max-width: 100% !important;
  }

  /* Filters may scroll inside themselves, not the document. */
  body.project-v62 .v62-filters,
  body.news-page-v57 .news-filter-v57,
  body:not(.msa-admin-v37) .filters {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  body.project-v62 .v62-filters::-webkit-scrollbar,
  body.news-page-v57 .news-filter-v57::-webkit-scrollbar,
  body:not(.msa-admin-v37) .filters::-webkit-scrollbar { display:none; }

  /* Floating UI cannot enlarge the document. */
  .msa-social-rail-v125,
  .msa-faq-enterprise-v49,
  .msa-faq-bot,
  .msa-faq-window-v49 {
    max-width: calc(100vw - 20px) !important;
  }
}

/* Compact phones: CTA in header is the first thing to yield. */
@media (max-width: 430px) {
  body:not(.msa-admin-v37) .nav-actions .small {
    display: none !important;
  }

  body:not(.msa-admin-v37) .container,
  body.project-v62 .v62-shell,
  body.home70 .home70-hero .container {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
  }

  body.home70 .home70-title {
    max-width: 340px !important;
    font-size: clamp(36px, 10.2vw, 43px) !important;
  }
}

/* 320px-class devices */
@media (max-width: 350px) {
  body:not(.msa-admin-v37) .nav-wrap {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
  }

  body:not(.msa-admin-v37) .brand img {
    width: 92px !important;
    max-width: 92px !important;
  }

  body.home70 .home70-title {
    font-size: 34px !important;
  }
}


/* ==========================================================================
   V137 — verified geometry corrections
   ========================================================================== */
@media (max-width:1050px){
  body.home70 .home70-hero > .container.home70-hero-grid{
    flex:0 0 calc(100% - 32px)!important;
    width:calc(100% - 32px)!important;
    max-width:calc(100% - 32px)!important;
    margin-inline:auto!important;
  }
}
@media (max-width:760px){
  body.home70 .home70-title{
    max-width:410px!important;
    font-size:clamp(36px,9.2vw,42px)!important;
    line-height:1.18!important;
    text-wrap:balance;
  }
  body.home70 .home70-copy>p{
    max-width:430px!important;
  }

  body.about-page :is(.about-banner-content,.about-showcase-content),
  body.services-page-v116 .svc109-hero-inner,
  body.contact-page-v30 .contact-hero-content,
  body.careers-page-v28 .career-hero-content{
    flex:0 0 calc(100% - 32px)!important;
    width:calc(100% - 32px)!important;
    max-width:calc(100% - 32px)!important;
    margin-inline:auto!important;
  }

  .msa-social-rail-v125[data-placement="bottom"]{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    max-width:calc(100vw - 20px)!important;
  }
}
@media (max-width:430px){
  body.home70 .home70-hero > .container.home70-hero-grid,
  body.about-page :is(.about-banner-content,.about-showcase-content),
  body.services-page-v116 .svc109-hero-inner,
  body.contact-page-v30 .contact-hero-content,
  body.careers-page-v28 .career-hero-content{
    flex-basis:calc(100% - 28px)!important;
    width:calc(100% - 28px)!important;
    max-width:calc(100% - 28px)!important;
  }
  body.home70 .home70-title{
    max-width:370px!important;
    font-size:clamp(34px,9.5vw,39px)!important;
  }
}


@media (max-width:1050px){
  body.home70 .home70-hero{
    justify-content:center!important;
  }
  body.home70 .home70-hero > .container.home70-hero-grid{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
@media (min-width:761px) and (max-width:1050px){
  body.home70 .home70-title{
    font-size:clamp(44px,6.8vw,54px)!important;
    line-height:1.16!important;
    max-width:680px!important;
  }
}

@media (max-width:1050px){
  /* Decorative orbs were accidentally becoming flex items through a broad
     legacy selector. Keep them out of layout geometry. */
  body.home70 .home70-hero > .home70-orb{
    position:absolute!important;
    flex:none!important;
    pointer-events:none!important;
  }
}

/* Restore original hero decoration semantics on every viewport. */
body.home70 .home70-hero > .home70-orb{position:absolute!important;flex:none!important;pointer-events:none!important;}


/* ==========================================================================
   V138 — Mobile header optical centering only
   No hero/content/desktop layout changes.
   ========================================================================== */
@media (max-width: 760px) {
  body:not(.msa-admin-v37) .nav-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-inline: auto !important;
    gap: 10px !important;
  }

  body:not(.msa-admin-v37) .brand {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  body:not(.msa-admin-v37) .brand img {
    display: block !important;
    width: 104px !important;
    max-width: 104px !important;
  }

  body:not(.msa-admin-v37) .nav-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  body:not(.msa-admin-v37) .nav-actions .small {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body:not(.msa-admin-v37) .lang {
    min-width: 42px !important;
    text-align: center !important;
  }
}

/* Keep "طلب خدمة" on normal phones like the supplied iPhone screenshot.
   Only remove it when the physical CSS width is genuinely too tight. */
@media (min-width: 351px) and (max-width: 430px) {
  body:not(.msa-admin-v37) .nav-actions .small {
    display: inline-flex !important;
  }
}

@media (max-width: 390px) {
  body:not(.msa-admin-v37) .nav-wrap {
    gap: 7px !important;
  }

  body:not(.msa-admin-v37) .brand img {
    width: 96px !important;
    max-width: 96px !important;
  }

  body:not(.msa-admin-v37) .nav-actions {
    gap: 4px !important;
  }

  body:not(.msa-admin-v37) :is(.mode-toggle,.lang,.menu) {
    padding-inline: 8px !important;
  }

  body:not(.msa-admin-v37) .nav-actions .small {
    padding-inline: 11px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 350px) {
  body:not(.msa-admin-v37) .nav-actions .small {
    display: none !important;
  }

  body:not(.msa-admin-v37) .brand img {
    width: 92px !important;
    max-width: 92px !important;
  }
}


/* ==========================================================================
   V139 — Raise vertical social rail only
   Horizontal/bottom rail remains exactly as in V138.
   ========================================================================== */

/* Phones: vertical social rail sits higher to avoid covering content/buttons. */
@media (max-width: 760px) {
  .msa-social-rail-v125[data-placement="side"] {
    top: 38% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* Compact phones: lift it slightly more. */
@media (max-width: 430px) {
  .msa-social-rail-v125[data-placement="side"] {
    top: 34% !important;
  }
}

/* Very small screens: keep it clear of lower hero imagery. */
@media (max-width: 350px) {
  .msa-social-rail-v125[data-placement="side"] {
    top: 31% !important;
  }
}

/* Explicitly preserve bottom/horizontal placement from V138. */
@media (max-width: 760px) {
  .msa-social-rail-v125[data-placement="bottom"] {
    top: auto !important;
  }
}

/* V140: mobile header — logo right, controls left; V139 otherwise unchanged */
@media (max-width:760px){
 body:not(.msa-admin-v37) .nav-wrap{
  width:calc(100% - 28px)!important;max-width:calc(100% - 28px)!important;
  margin-inline:auto!important;display:flex!important;flex-direction:row!important;
  align-items:center!important;justify-content:space-between!important;gap:10px!important;
 }
 body:not(.msa-admin-v37) .brand{flex:0 0 auto!important;margin:0!important;order:0!important}
 body:not(.msa-admin-v37) .brand img{display:block!important;width:104px!important;max-width:104px!important;height:auto!important}
 body:not(.msa-admin-v37) .nav-actions{
  flex:0 0 auto!important;margin:0!important;order:1!important;display:flex!important;
  align-items:center!important;justify-content:flex-start!important;flex-wrap:nowrap!important;gap:6px!important;
 }
 body:not(.msa-admin-v37) .lang,body:not(.msa-admin-v37) .nav-actions .small{white-space:nowrap!important}
}
@media (max-width:390px){
 body:not(.msa-admin-v37) .nav-wrap{width:calc(100% - 22px)!important;max-width:calc(100% - 22px)!important;gap:7px!important}
 body:not(.msa-admin-v37) .brand img{width:96px!important;max-width:96px!important}
 body:not(.msa-admin-v37) .nav-actions{gap:4px!important}
}
@media (max-width:350px){
 body:not(.msa-admin-v37) .brand img{width:90px!important;max-width:90px!important}
}


/* ==========================================================================
   V141 — Exact physical mobile header sides + vertical social rail above bot
   ========================================================================== */

/* Mobile header: physical positioning, independent of RTL direction.
   Logo = RIGHT, controls = LEFT. */
@media (max-width: 760px) {
  body:not(.msa-admin-v37) .nav-wrap {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin-inline: auto !important;
    gap: 10px !important;
    direction: ltr !important;
  }

  body:not(.msa-admin-v37) .brand {
    grid-column: 3 !important;
    justify-self: end !important;
    order: unset !important;
    margin: 0 !important;
    direction: rtl !important;
  }

  body:not(.msa-admin-v37) .nav-actions {
    grid-column: 1 !important;
    justify-self: start !important;
    order: unset !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    direction: rtl !important;
  }

  /* Off-canvas nav must not occupy the center grid column. */
  body:not(.msa-admin-v37) .nav {
    position: absolute !important;
  }

  /* Vertical social rail: anchor by BOTTOM so it is always above the FAQ bot. */
  .msa-social-rail-v125[data-placement="side"] {
    top: auto !important;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  body:not(.msa-admin-v37) .nav-wrap {
    width: calc(100% - 22px) !important;
    max-width: calc(100% - 22px) !important;
    gap: 7px !important;
  }

  .msa-social-rail-v125[data-placement="side"] {
    bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 350px) {
  .msa-social-rail-v125[data-placement="side"] {
    bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Horizontal/bottom mode stays exactly where it was. */
@media (max-width: 760px) {
  .msa-social-rail-v125[data-placement="bottom"] {
    top: auto !important;
    transform: translateX(-50%) !important;
  }
}


/* ==========================================================================
   V142 — Language-aware mobile header + higher vertical social rail
   Arabic:  logo RIGHT / controls LEFT
   English: logo LEFT  / controls RIGHT
   ========================================================================== */

@media (max-width: 760px) {
  /* Keep a physical 3-column grid so RTL/LTR cannot unexpectedly swap sides. */
  body:not(.msa-admin-v37) .nav-wrap {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin-inline: auto !important;
    gap: 10px !important;
    direction: ltr !important;
  }

  /* Arabic/default: logo right, controls left */
  html:not([lang^="en"]) body:not(.msa-admin-v37) .brand,
  html[lang^="ar"] body:not(.msa-admin-v37) .brand {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  html:not([lang^="en"]) body:not(.msa-admin-v37) .nav-actions,
  html[lang^="ar"] body:not(.msa-admin-v37) .nav-actions {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  /* English: mirror the header */
  html[lang^="en"] body:not(.msa-admin-v37) .brand {
    grid-column: 1 !important;
    justify-self: start !important;
    direction: ltr !important;
  }

  html[lang^="en"] body:not(.msa-admin-v37) .nav-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    direction: ltr !important;
  }

  /* Raise vertical social rail clearly above the FAQ bot. */
  .msa-social-rail-v125[data-placement="side"] {
    top: 24% !important;
    bottom: auto !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .msa-social-rail-v125[data-placement="side"] {
    top: 21% !important;
  }
}

@media (max-width: 350px) {
  .msa-social-rail-v125[data-placement="side"] {
    top: 19% !important;
  }
}

/* Horizontal/bottom mode remains untouched. */
@media (max-width: 760px) {
  .msa-social-rail-v125[data-placement="bottom"] {
    top: auto !important;
  }
}



/* ==========================================================================
   MSA V145 — Isolated Premium Glass Mobile Drawer
   Does NOT restyle the original .nav component.
   ========================================================================== */

@media (max-width:768px){
  /* Original mobile nav is never rendered; custom drawer replaces it. */
  #nav.nav{
    display:none!important;
  }

  body.msa-pmenu-open{
    overflow:hidden!important;
    touch-action:none;
  }

  .msa-pmenu-overlay{
    position:fixed;
    inset:0;
    z-index:2147483600;
    display:block;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:
      radial-gradient(circle at 82% 12%,rgba(90,200,90,.12),transparent 34%),
      linear-gradient(180deg,rgba(3,22,38,.22),rgba(3,22,38,.50));
    backdrop-filter:blur(10px) saturate(120%);
    -webkit-backdrop-filter:blur(10px) saturate(120%);
    transition:opacity .3s ease,visibility .3s ease;
  }

  .msa-pmenu-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .msa-pmenu{
    --pmenu-edge:12px;
    position:absolute;
    top:calc(12px + env(safe-area-inset-top,0px));
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    width:min(88vw,360px);
    max-width:360px;
    padding:20px 16px 16px;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    border:1px solid rgba(255,255,255,.68);
    border-radius:30px;
    background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(245,251,249,.78));
    box-shadow:
      0 30px 90px rgba(2,25,45,.30),
      0 8px 28px rgba(2,25,45,.13),
      inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    transition:transform .46s cubic-bezier(.16,1,.3,1);
    direction:rtl;
  }
  .msa-pmenu::-webkit-scrollbar{display:none}

  html[lang^="ar"] .msa-pmenu,
  html:not([lang^="en"]) .msa-pmenu{
    right:var(--pmenu-edge);
    left:auto;
    transform:translateX(112%);
  }
  html[lang^="en"] .msa-pmenu{
    left:var(--pmenu-edge);
    right:auto;
    transform:translateX(-112%);
    direction:ltr;
  }

  .msa-pmenu-overlay.is-open .msa-pmenu{
    transform:translateX(0)!important;
  }

  .msa-pmenu-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:4px 5px 13px;
    border-bottom:1px solid rgba(8,58,91,.10);
  }
  .msa-pmenu-copy{
    min-width:0;
  }
  .msa-pmenu-copy strong{
    display:block;
    margin:0 0 3px;
    color:#073e63;
    font-size:24px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.02em;
  }
  .msa-pmenu-copy span{
    display:block;
    color:#708694;
    font-size:12.5px;
    line-height:1.5;
    font-weight:700;
  }

  .msa-pmenu-close{
    flex:0 0 42px;
    width:42px;
    height:42px;
    border:1px solid rgba(8,58,91,.10);
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.68);
    color:#0b466a;
    box-shadow:0 8px 20px rgba(4,32,54,.07);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .2s ease,background .2s ease;
  }
  .msa-pmenu-close:hover,
  .msa-pmenu-close:focus-visible{
    transform:rotate(5deg) scale(1.04);
    background:#fff;
    outline:none;
  }
  .msa-pmenu-close svg{
    width:20px;
    height:20px;
  }

  .msa-pmenu-links{
    display:flex;
    flex-direction:column;
    gap:7px;
    padding-top:3px;
  }

  .msa-pmenu-link{
    position:relative;
    isolation:isolate;
    width:100%;
    min-height:54px;
    padding:0 48px 0 17px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.78);
    border-radius:17px;
    background:rgba(255,255,255,.57);
    color:#0b4168;
    box-shadow:0 8px 22px rgba(6,31,54,.055), inset 0 1px 0 rgba(255,255,255,.88);
    font-size:15.5px;
    font-weight:850;
    line-height:1.3;
    text-decoration:none;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease;
  }
  html[lang^="en"] .msa-pmenu-link{
    padding:0 17px 0 48px;
  }

  .msa-pmenu-link::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    background:linear-gradient(135deg,#079879,#76ca43);
    opacity:0;
    transition:opacity .22s ease;
  }

  .msa-pmenu-link::after{
    content:"←";
    position:absolute;
    right:15px;
    left:auto;
    top:50%;
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    border-radius:9px;
    background:rgba(8,143,112,.09);
    color:#0b8d70;
    font-size:14px;
    transition:transform .22s ease,background .22s ease,color .22s ease;
  }
  html[lang^="en"] .msa-pmenu-link::after{
    content:"→";
    left:15px;
    right:auto;
  }

  .msa-pmenu-link:hover,
  .msa-pmenu-link:focus-visible{
    transform:translateY(-2px);
    border-color:rgba(18,162,113,.24);
    box-shadow:0 14px 30px rgba(16,117,87,.14);
    outline:none;
  }
  html[lang^="ar"] .msa-pmenu-link:hover::after,
  html[lang^="ar"] .msa-pmenu-link:focus-visible::after,
  html:not([lang^="en"]) .msa-pmenu-link:hover::after,
  html:not([lang^="en"]) .msa-pmenu-link:focus-visible::after{
    transform:translate(4px,-50%);
  }
  html[lang^="en"] .msa-pmenu-link:hover::after,
  html[lang^="en"] .msa-pmenu-link:focus-visible::after{
    transform:translate(-4px,-50%);
  }

  .msa-pmenu-link.is-active{
    color:#fff;
    border-color:rgba(114,205,74,.36);
    box-shadow:0 15px 32px rgba(19,153,104,.22);
  }
  .msa-pmenu-link.is-active::before{opacity:1}
  .msa-pmenu-link.is-active::after{
    color:#fff;
    background:rgba(255,255,255,.18);
  }
  .msa-pmenu-link:active{transform:scale(.985)}

  .msa-pmenu-overlay.is-open .msa-pmenu-link{
    animation:msaPMenuItemIn .42s both;
  }
  .msa-pmenu-overlay.is-open .msa-pmenu-link:nth-child(1){animation-delay:.05s}
  .msa-pmenu-overlay.is-open .msa-pmenu-link:nth-child(2){animation-delay:.09s}
  .msa-pmenu-overlay.is-open .msa-pmenu-link:nth-child(3){animation-delay:.13s}
  .msa-pmenu-overlay.is-open .msa-pmenu-link:nth-child(4){animation-delay:.17s}
  .msa-pmenu-overlay.is-open .msa-pmenu-link:nth-child(5){animation-delay:.21s}
  .msa-pmenu-overlay.is-open .msa-pmenu-link:nth-child(6){animation-delay:.25s}
  .msa-pmenu-overlay.is-open .msa-pmenu-link:nth-child(7){animation-delay:.29s}

  .msa-pmenu-footer{
    margin-top:auto;
    padding-top:12px;
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .msa-pmenu-cta{
    position:relative;
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:17px;
    background:linear-gradient(135deg,#078f73,#78cb43);
    color:#fff;
    box-shadow:0 14px 28px rgba(22,153,104,.23);
    font-size:15px;
    font-weight:900;
    text-decoration:none;
    transition:transform .22s ease,box-shadow .22s ease;
  }
  .msa-pmenu-cta::after{
    content:"";
    position:absolute;
    inset:-2px;
    background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.26) 45%,transparent 65%);
    transform:translateX(-120%);
    transition:transform .55s ease;
  }
  .msa-pmenu-cta:hover,
  .msa-pmenu-cta:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(22,153,104,.30);
    outline:none;
  }
  .msa-pmenu-cta:hover::after,
  .msa-pmenu-cta:focus-visible::after{
    transform:translateX(120%);
  }

  .msa-pmenu-meta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#7c909c;
    font-size:10.5px;
    font-weight:750;
    white-space:nowrap;
  }
  .msa-pmenu-dot{
    width:4px;height:4px;border-radius:50%;
    background:#69c94a;
    flex:0 0 auto;
  }

  html[data-theme="dark"] .msa-pmenu{
    background:linear-gradient(145deg,rgba(7,27,43,.96),rgba(8,39,48,.90));
    border-color:rgba(255,255,255,.12);
    box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06);
  }
  html[data-theme="dark"] .msa-pmenu-copy strong{color:#f0fbff}
  html[data-theme="dark"] .msa-pmenu-copy span,
  html[data-theme="dark"] .msa-pmenu-meta{color:#9eb2be}
  html[data-theme="dark"] .msa-pmenu-close{
    color:#eaf7fb;
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.09);
  }
  html[data-theme="dark"] .msa-pmenu-link{
    color:#eaf7fb;
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }
  html[data-theme="dark"] .msa-pmenu-link.is-active{color:#fff}

  @media (max-height:700px){
    .msa-pmenu{padding:15px 13px 12px;gap:5px}
    .msa-pmenu-top{padding-bottom:8px}
    .msa-pmenu-copy strong{font-size:20px}
    .msa-pmenu-link{min-height:45px;border-radius:14px;font-size:14px}
    .msa-pmenu-footer{padding-top:7px;gap:6px}
    .msa-pmenu-cta{min-height:45px}
    .msa-pmenu-meta{display:none}
  }
}

@keyframes msaPMenuItemIn{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .msa-pmenu-overlay,
  .msa-pmenu,
  .msa-pmenu-link,
  .msa-pmenu-link::after,
  .msa-pmenu-cta,
  .msa-pmenu-close{
    transition:none!important;
    animation:none!important;
  }
}