/* Nav overrides to handle longer labels like "Knowledge & Insights" */
/* Keep nav link text from wrapping, but allow the nav container to reflow so
   the Apply Now button doesn't get pushed off-screen. */
header nav .menu_navigation>ul,
header nav ul {
  /* prevent the menu items from wrapping — keep them on a single line.
     Allow horizontal scrolling when content overflows so the header layout
     (e.g. the Apply Now button) doesn't get pushed to the next line. */
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
}

header nav .menu_navigation>ul>li>a,
header nav ul li a {
  padding-right: 18px !important;
  color: #2E3192 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important; /* prevent wrapping */
}

/* small responsive adjustment for cramped widths */
@media (max-width:1200px) {
  header nav .menu_navigation>ul>li>a,
  header nav ul li a {
    padding-right: 12px !important;
    font-size: 15px !important;
  }
}

/* Constrain the Apply Now area so it cannot push the header past page width */
header nav .menu_apply_now{
  flex: 0 0 auto !important;
  max-width: 240px !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding-left: 8px !important;
}

/* Ensure the navigation middle area can shrink if needed */
header nav .menu_navigation{
  flex: 1 1 auto !important;
  min-width: 0 !important; /* allow it to shrink below its content width */
}

/* Make sure the button itself doesn't overflow its container */
.apply-now-button{
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Reduce the space between logo (icon) and the first menu item */
header nav .menu_logo{
  /* let the logo take only its intrinsic size and sit close to the menu */
  flex: 0 0 auto !important;
  margin-right: 6px !important;
}

header nav .menu_navigation{
  /* ensure the navigation sits directly after the logo */
  margin-left: 0 !important;
  min-width: 0 !important;
}

header nav .menu_navigation>ul{
  justify-content: flex-start !important;
  gap: 10px !important; /* slightly tighten gaps between menu items */
}

/* Strengthen selectors to override any remaining cascade issues.
   Targets the exact header structure and the `.nav-menu` class used in markup. */
header.header nav .menu_navigation>ul.nav-menu,
header.header nav ul.nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
}

header.header nav .menu_navigation>ul.nav-menu>li>a,
header.header nav ul.nav-menu li a {
  /* white-space: nowrap !important; */
  overflow: visible !important;
}

/* Make sure the overall header layout doesn't force a wrap by constraining
   logo / register button widths and allowing the navigation to shrink. */
header.header nav .menu_container{
  flex-wrap: nowrap !important;
}

header.header nav .menu_navigation{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* Hide nav UL scrollbars visually (keep horizontal scroll) and prevent vertical scroll next to Apply Now */
header nav .menu_navigation > ul,
header.header nav ul.nav-menu {
  overflow-x: auto !important;
  overflow-y: hidden !important;      /* ensure no vertical scrollbar appears */
  -ms-overflow-style: none !important; /* IE/Edge */
  scrollbar-width: none !important;   /* Firefox */
  -webkit-overflow-scrolling: touch !important;
}

/* Hide webkit scrollbars */
header nav .menu_navigation > ul::-webkit-scrollbar,
header.header nav ul.nav-menu::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* Keep Apply Now visually above any scrollbar artifacts */
header nav .menu_apply_now {
  position: relative !important;
  z-index: 1000 !important;
}

/* Small safety: if an inline style or JS tries to show scrollbars, force them hidden on the nav list */
html body header.header nav .menu_navigation > ul[style],
html body header.header nav ul.nav-menu[style] {
  overflow-y: hidden !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Ensure mega/submenu containers are removed from flow and hidden by default */
header.header nav .three_column_menu_container,
header.header nav .two_column_menu_container {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  display: none !important;              /* hide by default */
  width: auto !important;
  max-width: calc(100vw - 40px) !important;
  box-sizing: border-box !important;
  z-index: 1200 !important;
  background: #ffffff !important;        /* match index styling */
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  margin: 0 !important;
  padding: 12px !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
}

/* Reveal submenu on hover (desktop) or when JS adds .active */
header.header nav .main-have-sub-menu:hover > .three_column_menu_container,
header.header nav .main-have-sub-menu > .three_column_menu_container.active,
header.header nav .main-have-sub-menu:hover > .two_column_menu_container,
header.header nav .main-have-sub-menu > .two_column_menu_container.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Center and layout mega menus like index.html */
header.header nav .menu_container {
  position: relative !important; /* ensure absolute children are positioned relative to header area */
}

/* Replace centering behavior with positioning relative to the parent li
   so each submenu opens under its own menu item (prevents overlap). */
header.header nav .three_column_menu_container,
header.header nav .two_column_menu_container {
  /* anchor to parent li's left edge instead of centering to the whole header */
  left: 0 !important;
  transform: none !important;
  top: 100% !important;                  /* directly below the header item */
  margin-top: 6px !important;            /* small gap for pointer */
  max-width: 960px !important;           /* keep menus constrained */
  min-width: 300px !important;           /* avoid collapsing too small */
  width: auto !important;
  box-sizing: border-box !important;
  z-index: 2200 !important;
}

/* When visible, layout as columns — width and flex behaviour preserved.
   Use the parent hover/.active rules already present to show the menu. */
header.header nav .main-have-sub-menu:hover > .three_column_menu_container,
header.header nav .main-have-sub-menu > .three_column_menu_container.active {
  display: flex !important;
  /* ensure it doesn't overflow horizontally beyond viewport */
  max-width: calc(100vw - 40px) !important;
  overflow-wrap: normal !important;
}

/* Two-column "card" should also be anchored to the parent li, not centered globally */
header.header nav .main-have-sub-menu:hover > .two_column_menu_container,
header.header nav .main-have_sub-menu > .two_column_menu_container.active {
  left: 0 !important;
  transform: none !important;
  top: 100% !important;
  margin-top: 6px !important;
  display: flex !important;
  max-width: 820px !important;
  z-index: 2200 !important;
}

/* Keep the small pointer but adjust its position relative to the card top */
header.header nav .two_column_menu_container::before,
header.header nav .three_column_menu_container::before {
  top: -8px !important;
  left: 20px !important; /* align pointer near the left edge of the card (under parent li) */
  transform: none !important;
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-bottom: 8px solid #2E3192 !important;
}

/* Defensive: if a submenu would overflow viewport on the right, make it align to right edge instead */
@media (min-width: 1024px) {
  header.header nav .menu_navigation > ul > li:hover > .three_column_menu_container,
  header.header nav .menu_navigation > ul > li:hover > .two_column_menu_container {
    /* prefer left:0, but allow the menu to shift left if it would exceed viewport */
    right: auto !important;
  }
}

/* Responsive: mobile keeps full width, stacked layout */
@media (max-width: 900px) {
  header.header nav .three_column_menu_container,
  header.header nav .two_column_menu_container {
    left: 0 !important;
    transform: none !important;
    top: 100% !important;
    width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    max-width: none !important;
  }
}

/* Column widths */
header.header nav .three_column_menu_container .three_column_menu_subcontainer {
  flex: 0 0 33.333% !important;
  min-width: 180px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

header.header nav .two_column_menu_container .two_column_menu_subcontainer {
  flex: 0 0 50% !important;
  min-width: 200px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* Ensure submenu_group_txt items have spacing inside columns (restore expected spacing) */
header.header nav .submenu_group_txt {
  padding: 10px 6px !important;
  display: block !important;
}

/* --- Knowledge & Insights / two-column mega menu: centered card with pointer --- */

/* Position the mega menu relative to its parent li and add small gap */
header.header nav .main-have-sub-menu > .two_column_menu_container,
header.header nav .main-have-sub-menu > .three_column_menu_container {
  left: 0 !important;                      /* center relative to parent li */
  transform: none !important;
  top: 100% !important;                   /* directly below the header item */
  margin-top: 6px !important;             /* small gap for pointer */
  max-width: 980px !important;
  width: auto !important;
  padding: 0 !important;
}

/* Card appearance: white background, rounded corners, purple top bar and drop shadow */
header.header nav .two_column_menu_container,
header.header nav .three_column_menu_container {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 40px rgba(33, 33, 77, 0.15) !important;
  border-top: 6px solid #2E3192 !important; /* purple top band */
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Small purple pointer centered above the card */
header.header nav .two_column_menu_container::before,
header.header nav .three_column_menu_container::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 20px !important; /* align pointer near the left edge of the card (under parent li) */
  transform: none !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-bottom: 8px solid #2E3192 !important;
  pointer-events: none !important;
  z-index: 1300 !important;
}

/* Layout the two columns: text left, image right */
/* Changed: removed the global selector that made all two-column menus visible.
   Now the flex layout only applies when the parent is hovered, focused or the container has .active */
header.header nav .main-have-sub-menu:hover > .two_column_menu_container,
header.header nav .main-have-sub-menu > .two_column_menu_container.active {
  display: flex !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 22px !important;
}

/* Also fix accidental typos elsewhere: ensure all selectors use the hyphenated class name */
header.header nav .main-have-sub-menu:hover > .two_column_menu_container,
header.header nav .main-have-sub-menu > .two_column_menu_container.active {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Column widths */
header.header nav .two_column_menu_container .two_column_menu_subcontainer:first-child {
  flex: 0 0 60% !important;
  padding-right: 16px !important;
}
header.header nav .two_column_menu_container .two_column_menu_subcontainer:last-child {
  flex: 0 0 40% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Image styling (right column) */
header.header nav .two_column_menu_container .submenu_group_img img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
}

/* Headings & description style to match Index look */
header.header nav .two_column_menu_container .submenu_group_txt > a > span:first-child {
  display: block !important;
  color: #2E3192 !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}
header.header nav .two_column_menu_container .submenu_group_txt > a > span:last-child {
  display: block !important;
  color: #5a5a86 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  opacity: 0.95 !important;
}

/* Restore spacing between items in column */
header.header nav .two_column_menu_container .submenu_group_txt {
  padding: 8px 0 !important;
}

/* Responsive: stack columns under 900px */
@media (max-width: 900px) {
  header.header nav .main-have-sub-menu > .two_column_menu_container {
    left: 0 !important;
    transform: none !important;
    width: calc(100% - 40px) !important;
    margin-left: 20px !important;
  }
  header.header nav .two_column_menu_container {
    display: block !important;
    padding: 14px !important;
  }
  header.header nav .two_column_menu_container .two_column_menu_subcontainer {
    width: 100% !important;
    flex: none !important;
    padding: 8px 0 !important;
  }
  header.header nav .two_column_menu_container::before { display: none !important; } /* hide pointer on mobile */
}

/* Small defensive tweak: ensure image column doesn't shrink awkwardly */
header.header nav .three_column_menu_container .submenu_group_img,
header.header nav .two_column_menu_container .submenu_group_img {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Keep header from clipping dropdowns */
header.header,
header.header nav,
header.header .menu_container,
header.header .menu_navigation {
  overflow: visible !important;
}