/* ============================================================
   INVESTORS MEGA MENU — Desktop (4-column) + Mobile Accordion
   Append this entire block to your main.css
   ============================================================ */

/* ── Desktop: wrapper ──────────────────────────────────────── */
.investors-mega-parent {
  /* position: relative; */
  position: static !important;
}

.global-header4-menu-area-main-menu ul li.investors-mega-parent li {
  display: block;
}

.investors-mega-menu {
  position: absolute;
  top: calc(100% - 10px) !important;
  left: 0 !important;
  width: 100vw;         
  background: #000000;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  border-radius:10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 999;
  pointer-events: none;
}

.investors-mega-parent .investors-mega-menu.sub-menu{
  max-width: 100% !important;
  width: 100% !important;
  
}

.investors-mega-parent:hover .investors-mega-menu.sub-menu {
  opacity: 1;
  visibility: visible;
  /* transform:  translateY(0); */
  pointer-events: all;
}

/* ── Column base ───────────────────────────────────────────── */
.inv-col {
  padding: 24px 20px;
  border-right: 1px solid #eef0f3;
}
.inv-col:last-child {
  border-right: none;
}

/* ── Section heading ───────────────────────────────────────── */
.inv-col-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #2BA1E1 !important;
  text-transform: none;
  letter-spacing: 0;
  padding-bottom: 8px;
  margin-bottom: 10px;
  /* border-bottom: 1.5px solid #2BA1E1; */
  line-height: 1.4 !important;
}

/* clickable heading (e.g. Shareholding Pattern) */
.inv-col-title a {
  color: #2BA1E1 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.inv-col-title a:hover {
  color: #1a80c4 !important;
}

/* ── Divider between sections inside a column ─────────────── */
.inv-divider {
  height: 1px;
  background: #e8ebef;
  margin: 20px 0;
}

/* ── List items ────────────────────────────────────────────── */
.investors-mega-menu .inv-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.investors-mega-menu .inv-col ul li {
  padding: 4px 0;
  border: none !important;
}

.investors-mega-menu .inv-col ul li a {
  font-size: 14px !important;
  color: #ffffff !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  transition: color 0.2s ease;
}

/* .investors-mega-menu .inv-col ul li a::before {
  content: "›";
  font-size: 15px;
  line-height: 1.4;
  color: #2BA1E1;
  flex-shrink: 0;
} */

.investors-mega-menu .inv-col ul li a:hover {
  color: #2BA1E1 !important;
}

/* ── Sub-list (e.g. Notices children) ─────────────────────── */
.investors-mega-menu .inv-sub-list {
  padding-left: 14px !important;
  margin-top: 4px !important;
}

.investors-mega-menu .inv-sub-list li a {
  font-size: 12px !important;
  color: #555 !important;
}

.investors-mega-menu .inv-sub-list li a::before {
  content: none !important;
}

/* ── Active nav link highlight ─────────────────────────────── */
.investors-mega-parent > a.active,
.investors-mega-parent:hover > a {
  color: #2BA1E1 !important;
}

/* ── Keep menu open when hovering the panel ───────────────── */
.investors-mega-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}


/* ============================================================
   MOBILE — accordion inside .global-mobile-menu
   ============================================================ */

/* The mobile Investors item reuses the existing
   .menu-item-has-children + .global-submenu system.
   No extra CSS needed beyond these tweaks:           */

.mobile-investors-submenu .inv-mobile-group-title {
  display: block;
  font-size: 13px !important;
  font-weight: 700;
  color: #2BA1E1;
  padding: 8px 16px 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
  pointer-events: none;
}

.mobile-investors-submenu a{
  font-size: 14px !important;
  border-bottom: none !important;
}


.mobile-investors-submenu .inv-mobile-sub li a {
  /* padding-left: 20px !important; */
  padding-inline: 0 !important;
  font-size: 13px !important;
  color: #000000 !important;
}


/* ============================================================
   RESPONSIVE — collapse to normal sub-menu on tablet/mobile
   (below xl = below 1200 px, same breakpoint as your site)
   ============================================================ */

@media (max-width: 1199px) {
  .investors-mega-menu {
    /* hidden on tablet/mobile — mobile menu handles it */
    display: none !important;
  }
}