/* Qanattar Corporate Site v0.8.0.4 — dedicated mobile navigation drawer rebuild */

/* The new drawer is independent from the legacy desktop .qcs-nav rules. */
.qcs-mobile-drawer{display:none}

@media (max-width:820px){
  html.qcs-menu-open,
  body.qcs-menu-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  .qcs-v0804 .qcs-header{
    position:sticky;
    top:0;
    z-index:100100!important;
  }

  /* Kill the legacy mobile nav entirely. It was the empty rounded pill visible
     in iOS screenshots even though the hamburger had switched to the X state. */
  .qcs-v0804 .qcs-nav{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .qcs-v0804 .qcs-menu-toggle{
    position:relative;
    z-index:100103!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent;
  }
  .qcs-v0804 .qcs-menu-toggle[aria-expanded="true"] span:not(.screen-reader-text):nth-child(1){transform:translateY(6px) rotate(45deg)}
  .qcs-v0804 .qcs-menu-toggle[aria-expanded="true"] span:not(.screen-reader-text):nth-child(2){opacity:0}
  .qcs-v0804 .qcs-menu-toggle[aria-expanded="true"] span:not(.screen-reader-text):nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .qcs-v0804 .qcs-mobile-drawer{
    display:none;
    position:fixed!important;
    z-index:100099!important;
    left:0!important;
    right:0!important;
    top:var(--qcs-mobile-drawer-top,74px)!important;
    bottom:0!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    background:
      radial-gradient(circle at 10% -10%,rgba(37,126,255,.19),transparent 38%),
      radial-gradient(circle at 96% 8%,rgba(239,44,71,.08),transparent 28%),
      linear-gradient(180deg,#061126 0%,#07142b 45%,#050c1c 100%)!important;
    box-shadow:inset 0 1px 0 rgba(93,172,255,.16),0 22px 60px rgba(0,0,0,.46)!important;
    color:#fff;
    scrollbar-width:thin;
    scrollbar-color:rgba(79,177,255,.55) transparent;
  }
  .qcs-v0804 .qcs-mobile-drawer.is-open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .qcs-v0804 .qcs-mobile-drawer::-webkit-scrollbar{width:4px}
  .qcs-v0804 .qcs-mobile-drawer::-webkit-scrollbar-thumb{background:rgba(79,177,255,.5);border-radius:999px}

  .qcs-v0804 .qcs-mobile-drawer-inner{
    width:min(100%,680px);
    margin:0 auto;
    padding:18px 18px calc(34px + env(safe-area-inset-bottom));
  }

  .qcs-v0804 .qcs-lang-switch-drawer{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px!important;
    width:100%;
    margin:0 0 18px!important;
  }
  .qcs-v0804 .qcs-lang-switch-drawer>span{display:none!important}
  .qcs-v0804 .qcs-lang-switch-drawer a{
    display:flex!important;
    align-items:center;
    justify-content:center;
    min-width:0!important;
    width:100%!important;
    min-height:42px;
    padding:8px 6px!important;
    border:1px solid rgba(91,164,255,.24);
    border-radius:12px;
    background:rgba(12,32,67,.72);
    color:#9eb8de;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-decoration:none;
  }
  .qcs-v0804 .qcs-lang-switch-drawer a.is-active,
  .qcs-v0804 .qcs-lang-switch-drawer a[aria-current="page"]{
    color:#fff;
    border-color:rgba(54,165,255,.72);
    background:linear-gradient(135deg,rgba(17,91,198,.76),rgba(12,42,93,.9));
    box-shadow:0 0 24px rgba(38,142,255,.14),inset 0 1px 0 rgba(255,255,255,.07);
  }

  .qcs-v0804 .qcs-mobile-nav{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
  }

  .qcs-v0804 .qcs-mobile-nav-main,
  .qcs-v0804 .qcs-mobile-nav-section-title{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:54px;
    padding:13px 15px;
    border:1px solid rgba(91,164,255,.2);
    border-radius:14px;
    background:linear-gradient(135deg,rgba(10,28,59,.94),rgba(7,21,47,.94));
    color:#eaf4ff!important;
    font-size:16px!important;
    line-height:1.25!important;
    font-weight:700!important;
    letter-spacing:0!important;
    text-decoration:none!important;
  }
  .qcs-v0804 .qcs-mobile-nav-main b,
  .qcs-v0804 .qcs-mobile-nav-section-title b{
    color:#53b7ff;
    font-size:20px;
    font-weight:500;
  }
  .qcs-v0804 .qcs-mobile-nav-main.is-active,
  .qcs-v0804 .qcs-mobile-nav-section-title.is-active{
    border-color:rgba(54,165,255,.58);
    background:linear-gradient(135deg,rgba(13,67,142,.9),rgba(8,32,71,.96));
    box-shadow:0 0 24px rgba(30,128,255,.1);
  }

  .qcs-v0804 .qcs-mobile-nav-services{
    display:block!important;
    width:100%;
  }
  .qcs-v0804 .qcs-mobile-nav-services>.qcs-mobile-nav-section-title{margin-bottom:10px}
  .qcs-v0804 .qcs-mobile-service-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:100%!important;
  }
  .qcs-v0804 .qcs-mobile-service-grid>a{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:4px;
    width:100%!important;
    min-width:0!important;
    padding:12px 14px!important;
    border:1px solid rgba(82,149,236,.14)!important;
    border-radius:12px!important;
    background:rgba(7,23,50,.72)!important;
    color:#dcecff!important;
    text-decoration:none!important;
  }
  .qcs-v0804 .qcs-mobile-service-grid>a.is-current{
    border-color:rgba(54,165,255,.52)!important;
    background:rgba(12,50,103,.72)!important;
  }
  .qcs-v0804 .qcs-mobile-service-grid strong{
    color:#f5f9ff!important;
    font-size:14px!important;
    line-height:1.25!important;
  }
  .qcs-v0804 .qcs-mobile-service-grid span{
    color:#86a7d0!important;
    font-size:11px!important;
    line-height:1.35!important;
  }

  .qcs-v0804 .qcs-mobile-nav-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
    margin-top:8px;
    padding-top:16px;
    border-top:1px solid rgba(85,155,240,.16);
  }
  .qcs-v0804 .qcs-mobile-nav-actions>a{
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:50px;
    padding:11px 12px!important;
    border:1px solid rgba(76,158,255,.31)!important;
    border-radius:13px!important;
    background:rgba(11,34,73,.88)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
    text-align:center;
    text-decoration:none!important;
  }
  .qcs-v0804 .qcs-mobile-nav-actions>a:last-child{
    border-color:rgba(238,49,77,.42)!important;
    background:linear-gradient(135deg,rgba(151,24,49,.42),rgba(52,19,49,.76))!important;
  }
}

@media (max-width:420px){
  .qcs-v0804 .qcs-mobile-drawer-inner{padding-inline:14px}
  .qcs-v0804 .qcs-mobile-nav-actions{grid-template-columns:1fr}
}

@media (min-width:821px){
  .qcs-v0804 .qcs-mobile-drawer{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .qcs-v0804 .qcs-mobile-drawer,
  .qcs-v0804 .qcs-mobile-nav a,
  .qcs-v0804 .qcs-menu-toggle span{transition:none!important}
}