/* ==========================================================================
   Header "Services" & "Industry" mega-menus — refined dark, two-line design
   (reference: 21st MegaMenu — icon + title + description rows). Visual layer only
   over the existing markup: the real service/industry links, the GCC-logos panel
   and the nav JS are untouched. The icon + description sub-line are injected at
   runtime by digidesire-nav.js (`.dd-mm__ico`, `.dd-mm__title`, `.dd-mm__desc`).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

/* panel */
.megaMenuWrapper .megaMenu__subMenuWrapper {
  background: #0A0A0A !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 34px 90px -30px rgba(0,0,0,0.95) !important;
  font-family: "Manrope", system-ui, sans-serif !important;
}

/* ---- desktop layout: keep the panel tight & balanced at any width ----
   The source lets the panel stretch full-width on large screens, which spreads
   the item list and the logo column to opposite edges (big empty middle). We take
   over the split: a fixed two-column item grid on the left + the proof card on the
   right, capped to a comfortable max-width and centred. Deterministic ≥1200px;
   mobile drawer keeps the source layout untouched. */
@media (min-width: 1200px) {
  .megaMenuWrapper .megaMenu__subMenuWrapper {
    display: block !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 22px 24px !important;
    left: 0 !important; right: 0 !important;
  }
  .megaMenuWrapper .megaMenu__subMenu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px 14px !important;
    width: auto !important; max-height: none !important; height: auto !important;
    padding: 0 !important; margin: 0 !important;
  }
  .megaMenuWrapper .megaMenu__subMenu--item { width: auto !important; margin: 0 !important; }
}

/* GCC / proof column removed from the mega-menu entirely */
.megaMenuWrapper .megaMenu__subMenuWrapper .rightCol { display: none !important; }

/* ---- list items: icon + (title / description) + arrow ---- */
.megaMenuWrapper .megaMenu__subMenu--item .wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 12px !important;
  padding: 9px 12px !important;
  transition: background-color .22s ease !important;
}
.megaMenuWrapper .megaMenu__subMenu--item .wrapper:hover,
.megaMenuWrapper .megaMenu__subMenu--item.active .wrapper {
  background: rgba(255,255,255,0.06) !important;
}

/* icon chip */
.megaMenuWrapper .megaMenu__subMenu--item .dd-mm__ico {
  flex: 0 0 auto !important;
  width: 38px !important; height: 38px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.72) !important;
  transition: color .2s ease, background-color .22s ease, border-color .22s ease !important;
}
.megaMenuWrapper .megaMenu__subMenu--item .dd-mm__ico svg { display: block !important; }
.megaMenuWrapper .megaMenu__subMenu--item .wrapper:hover .dd-mm__ico,
.megaMenuWrapper .megaMenu__subMenu--item.active .dd-mm__ico {
  color: #fff !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* link becomes a two-line stack (title over description) */
.megaMenuWrapper .megaMenu__subMenu--link {
  flex: 1 1 auto !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  padding: 0 !important;
}
/* hide the legacy leading bullet dot — the icon chip replaces it */
.megaMenuWrapper .megaMenu__subMenu--link::before,
.megaMenuWrapper .megaMenu__subMenu--item .wrapper::before { display: none !important; content: none !important; }

.megaMenuWrapper .megaMenu__subMenu--item .dd-mm__title {
  color: rgba(255,255,255,0.90) !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  transition: color .2s ease !important;
}
.megaMenuWrapper .megaMenu__subMenu--item .dd-mm__desc {
  color: rgba(255,255,255,0.42) !important;
  font-size: 11.5px !important; font-weight: 400 !important; line-height: 1.3 !important;
}
.megaMenuWrapper .megaMenu__subMenu--item .wrapper:hover .dd-mm__title,
.megaMenuWrapper .megaMenu__subMenu--item.active .dd-mm__title { color: #fff !important; }
.megaMenuWrapper .megaMenu__subMenu--item .wrapper:hover .dd-mm__desc,
.megaMenuWrapper .megaMenu__subMenu--item.active .dd-mm__desc { color: rgba(255,255,255,0.58) !important; }

/* right chevron/arrow -> white, slides on hover */
.megaMenuWrapper .megaMenu__subMenu--item .arrow {
  flex: 0 0 auto !important;
  opacity: 0.35 !important; transition: transform .25s ease, opacity .2s ease !important;
}
.megaMenuWrapper .megaMenu__subMenu--item .arrow img { filter: brightness(0) invert(1) !important; }
.megaMenuWrapper .megaMenu__subMenu--item .wrapper:hover .arrow,
.megaMenuWrapper .megaMenu__subMenu--item.active .arrow { opacity: 0.85 !important; transform: translateX(3px) !important; }