/* One mobile navigation presentation across legacy and industry templates. */
.mobile-sidebar-menu{z-index:11000!important}
.mobile-menu-backdrop{z-index:10900!important}
[data-shared-desktop-nav] .others-dropdown{position:relative;display:inline-flex;align-items:center}
[data-shared-desktop-nav] .dropdown-menu{display:none!important;position:absolute;top:100%;inset-inline-start:0;min-width:195px;padding:8px;border:1px solid #dfe9f5;border-radius:10px;background:#fff;box-shadow:0 12px 28px #0002;z-index:10050}
[data-shared-desktop-nav] .others-dropdown:is(:hover,:focus-within,.open) .dropdown-menu{display:block!important}
[data-shared-desktop-nav] .dropdown-menu a{display:block!important;padding:10px 12px!important;margin:0!important;text-decoration:none;color:#263142!important;white-space:nowrap;font-size:14px!important}
body.dark-mode [data-shared-desktop-nav] .dropdown-menu{background:#222a35;border-color:#354153}
body.dark-mode [data-shared-desktop-nav] .dropdown-menu a{color:#eef2f7!important}
.mobile-sidebar-menu .mobile-menu-close{font-size:28px!important;line-height:1!important;text-decoration:none!important;color:#2387f7!important}
.mobile-sidebar-menu{width:280px!important;height:100dvh!important;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)!important;font-family:'DM Sans',sans-serif!important;overflow-y:auto!important}
.mobile-sidebar-menu.active{left:0!important;right:auto!important}
html[dir="rtl"] .mobile-sidebar-menu{left:auto!important;right:-300px!important;box-shadow:-5px 0 15px rgba(0,0,0,.1)!important}
html[dir="rtl"] .mobile-sidebar-menu.active{left:auto!important;right:0!important}
.mobile-sidebar-menu .sidebar-header{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:20px!important;border-bottom:1px solid #0002!important}
.mobile-sidebar-menu :is(.logo-container h3,.sidebar-logo){font-size:22px!important;font-weight:700!important;margin:0!important;color:#292929!important}
.mobile-sidebar-menu :is(.logo-container h3,.sidebar-logo) span{color:#2387f7!important}
.mobile-sidebar-menu :is(.sidebar-nav,.mobile-sidebar-nav){padding:20px!important}
.mobile-sidebar-menu nav ul{list-style:none!important;padding:0!important;margin:0!important}
.mobile-sidebar-menu nav li{margin:0 0 10px!important;opacity:1!important;transform:none!important;transition:none!important}
.mobile-sidebar-menu nav a{display:flex!important;align-items:center!important;gap:12px!important;padding:12px 15px!important;color:#333!important;font-size:16px!important;font-weight:400!important;line-height:1.5!important;border-radius:8px!important;text-decoration:none!important;text-align:start!important;background:transparent!important}
.mobile-sidebar-menu nav a i{width:24px!important;margin:0!important;text-align:center!important;font-size:18px!important}
/* Arabic typography rules must not replace Font Awesome's private-use glyph font. */
.mobile-sidebar-menu nav a i:is(.fa,.fas,.far,.fa-solid,.fa-regular){font-family:"Font Awesome 6 Free"!important}
.mobile-sidebar-menu nav a i:is(.fab,.fa-brands){font-family:"Font Awesome 6 Brands"!important}
.mobile-sidebar-menu nav a:is(:hover,.active){background:#2387f71a!important;color:#1a6dc3!important}
.mobile-sidebar-menu nav a:focus-visible{outline:3px solid #1a6dc3;outline-offset:2px}
body.dark-mode .mobile-sidebar-menu{background:#171d26!important}
body.dark-mode .mobile-sidebar-menu nav a,body.dark-mode .mobile-sidebar-menu :is(.logo-container h3,.sidebar-logo){color:#f4f7fb!important}
body.dark-mode .mobile-sidebar-menu nav a.active{color:#a3caff!important}
/* The website showcase used a separate boxed hamburger. Keep the same visual
   menu trigger used by the primary site while retaining its full hit area. */
body:has(.portfol-white-hero) .hamburger-btn{width:30px!important;height:22px!important;padding:2px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body:has(.portfol-white-hero) .hamburger-btn .hamburger-line{width:25px!important;height:3px!important;margin:0!important}
@media(max-width:1100px){
  body:has(.portfol-white-hero) header{padding:14px 50px!important;justify-content:space-between!important;min-height:63px!important}
  body:has(.portfol-white-hero) header .lefthead p{margin:0!important;line-height:1.08!important}
  body:has(.portfol-white-hero) header .mobile-menu-toggle{margin:0!important;flex:0 0 auto!important}
}
@media(max-width:700px){body:has(.portfol-white-hero) header{padding:12px 18px!important}}