/* SecurityTalent 1.9.62 — multilingual off-canvas navigation repair. */
@media (max-width: 1199.98px) {
  :root {
    --st-drawer-width: min(88vw, 420px);
  }

  html:not([dir="rtl"]) .offcanvas-menu,
  html:not([dir]) body:not(.rtl) .offcanvas-menu {
    left: auto !important;
    right: calc(-1 * var(--st-drawer-width)) !important;
  }

  html[dir="rtl"] .offcanvas-menu,
  html:not([dir]) body.rtl .offcanvas-menu {
    left: calc(-1 * var(--st-drawer-width)) !important;
    right: auto !important;
  }

  html.offcanvas-active:not([dir="rtl"]) .offcanvas-menu,
  html:not([dir]) body.offcanvas-active:not(.rtl) .offcanvas-menu {
    left: auto !important;
    right: 0 !important;
  }

  html[dir="rtl"].offcanvas-active .offcanvas-menu,
  html[dir="rtl"] body.offcanvas-active .offcanvas-menu,
  html:not([dir]) body.rtl.offcanvas-active .offcanvas-menu {
    left: 0 !important;
    right: auto !important;
  }

  .offcanvas-menu {
    width: var(--st-drawer-width) !important;
    max-width: 420px !important;
    height: 100dvh !important;
    background: #fffdf8 !important;
    color: #123c3f !important;
    opacity: 1 !important;
    overflow: hidden !important;
    visibility: hidden;
    pointer-events: none;
    z-index: 10050 !important;
    box-shadow: 0 24px 70px rgba(3, 32, 36, .28) !important;
    transition: left .28s ease, right .28s ease, visibility .28s ease !important;
  }

  body.offcanvas-active .offcanvas-menu,
  html.offcanvas-active .offcanvas-menu {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  .offcanvas-menu .offcanvas-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 92px 22px 30px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #fffdf8 !important;
    color: #123c3f !important;
  }

  .offcanvas-overlay {
    z-index: 10040 !important;
    background: rgba(5, 35, 38, .54) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .offcanvas-menu .close-offcanvas {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #ffffff !important;
    border-radius: 15px !important;
    background: #f4512a !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(187, 54, 24, .28) !important;
    opacity: 1 !important;
    z-index: 8 !important;
  }

  .offcanvas-menu .close-offcanvas:hover,
  .offcanvas-menu .close-offcanvas:focus-visible {
    background: #c83f1e !important;
    outline: 3px solid rgba(244, 81, 42, .28) !important;
    outline-offset: 3px !important;
  }

  .offcanvas-menu .close-offcanvas .burger-icon > span,
  .offcanvas-menu .close-offcanvas span {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
  }

  .offcanvas-menu .mod-menu,
  .offcanvas-menu ul.menu,
  .offcanvas-menu .menu {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .offcanvas-menu li {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .offcanvas-menu li.st-offcanvas-has-child,
  .offcanvas-menu li.menu-parent,
  .offcanvas-menu li.menu-deeper {
    position: relative !important;
  }

  .offcanvas-menu li > a,
  .offcanvas-menu li > .menu-separator,
  .offcanvas-menu li > .nav-header {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 12px 64px 12px 18px !important;
    color: #123c3f !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  html[dir="rtl"] .offcanvas-menu li > a,
  html[dir="rtl"] .offcanvas-menu li > .menu-separator,
  html[dir="rtl"] .offcanvas-menu li > .nav-header,
  body.rtl .offcanvas-menu li > a,
  body.rtl .offcanvas-menu li > .menu-separator,
  body.rtl .offcanvas-menu li > .nav-header {
    padding: 12px 18px 12px 64px !important;
    text-align: right !important;
    justify-content: flex-start !important;
  }

  .offcanvas-menu .st-offcanvas-submenu-toggle,
  .offcanvas-menu li > .menu-toggler,
  .offcanvas-menu li > a > .menu-toggler {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    left: auto !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #a9cec9 !important;
    border-radius: 11px !important;
    background: #eaf6f3 !important;
    color: #087d82 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 4 !important;
  }

  html[dir="rtl"] .offcanvas-menu .st-offcanvas-submenu-toggle,
  html[dir="rtl"] .offcanvas-menu li > .menu-toggler,
  html[dir="rtl"] .offcanvas-menu li > a > .menu-toggler,
  body.rtl .offcanvas-menu .st-offcanvas-submenu-toggle,
  body.rtl .offcanvas-menu li > .menu-toggler,
  body.rtl .offcanvas-menu li > a > .menu-toggler {
    right: auto !important;
    left: 10px !important;
  }

  .offcanvas-menu .st-offcanvas-submenu-toggle::before,
  .offcanvas-menu .st-offcanvas-submenu-toggle::after,
  .offcanvas-menu li > .menu-toggler::before,
  .offcanvas-menu li > .menu-toggler::after,
  .offcanvas-menu li > a > .menu-toggler::before,
  .offcanvas-menu li > a > .menu-toggler::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    margin: -7px 0 0 -5px !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    background: transparent !important;
    transform: rotate(45deg) !important;
    transition: transform .2s ease, margin .2s ease !important;
  }

  .offcanvas-menu .st-offcanvas-submenu-toggle::before,
  .offcanvas-menu li > .menu-toggler::before,
  .offcanvas-menu li > a > .menu-toggler::before {
    display: none !important;
  }

  .offcanvas-menu li.st-offcanvas-menu-open > .st-offcanvas-submenu-toggle::after,
  .offcanvas-menu li.st-offcanvas-menu-open > .menu-toggler::after,
  .offcanvas-menu li.st-offcanvas-menu-open > a > .menu-toggler::after,
  .offcanvas-menu li.menu-parent-open > .st-offcanvas-submenu-toggle::after,
  .offcanvas-menu li.menu-parent-open > .menu-toggler::after,
  .offcanvas-menu li.menu-parent-open > a > .menu-toggler::after {
    margin-top: -2px !important;
    transform: rotate(225deg) !important;
  }

  .offcanvas-menu .st-offcanvas-submenu-toggle:hover,
  .offcanvas-menu .st-offcanvas-submenu-toggle:focus-visible,
  .offcanvas-menu li > .menu-toggler:hover,
  .offcanvas-menu li > .menu-toggler:focus-visible {
    border-color: #087d82 !important;
    background: #d9efeb !important;
    outline: 2px solid rgba(8, 125, 130, .2) !important;
    outline-offset: 2px !important;
  }

  .offcanvas-menu li > ul,
  .offcanvas-menu li > .sp-dropdown {
    position: static !important;
    inset: auto !important;
    display: none !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin: 2px 6px 12px !important;
    padding: 7px !important;
    border: 1px solid #c8dfdb !important;
    border-left: 4px solid #17a0a6 !important;
    border-radius: 12px !important;
    background: #f0f8f6 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
  }

  html[dir="rtl"] .offcanvas-menu li > ul,
  html[dir="rtl"] .offcanvas-menu li > .sp-dropdown,
  body.rtl .offcanvas-menu li > ul,
  body.rtl .offcanvas-menu li > .sp-dropdown {
    border-right: 4px solid #17a0a6 !important;
    border-left: 1px solid #c8dfdb !important;
  }

  .offcanvas-menu li.st-offcanvas-menu-open > ul,
  .offcanvas-menu li.st-offcanvas-menu-open > .sp-dropdown,
  .offcanvas-menu li.menu-parent-open > ul,
  .offcanvas-menu li.menu-parent-open > .sp-dropdown {
    display: flex !important;
  }

  .offcanvas-menu li > ul li > a,
  .offcanvas-menu li > .sp-dropdown li > a {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #164d50 !important;
    font-size: .95rem !important;
    font-weight: 650 !important;
    white-space: normal !important;
  }

  .offcanvas-menu li > ul li > a:hover,
  .offcanvas-menu li > ul li > a:focus-visible {
    background: #dff1ee !important;
    color: #075f64 !important;
  }

  .offcanvas-menu .st-responsive-auth,
  .offcanvas-menu .st-header-auth-grid,
  .offcanvas-menu .st-offcanvas-auth {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    overflow: visible !important;
  }

  .offcanvas-menu .st-responsive-auth > *,
  .offcanvas-menu .st-header-auth-grid > *,
  .offcanvas-menu .st-offcanvas-auth > *,
  .offcanvas-menu .st-responsive-auth a,
  .offcanvas-menu .st-responsive-auth button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 479.98px) {
  .offcanvas-menu .offcanvas-inner {
    padding: 84px 16px 24px !important;
  }

  .offcanvas-menu li > a,
  .offcanvas-menu li > .menu-separator,
  .offcanvas-menu li > .nav-header {
    min-height: 55px !important;
    font-size: 1rem !important;
  }

  html[lang^="ar"] .offcanvas-menu li > a,
  html[lang^="ar"] .offcanvas-menu li > .menu-separator,
  html[lang^="ar"] .offcanvas-menu li > .nav-header {
    font-size: 1.08rem !important;
  }
}
