/* ================================
   Admin Bar
================================ */
body.admin-bar .ngs-header { top: 32px; }
@media (max-width: 782px){ body.admin-bar .ngs-header { top: 46px; } }

/* ================================
   Header Base
================================ */
.ngs-header{
  position: fixed; inset: 0 0 auto 0; width: 100%; z-index: 999;
  background: transparent; padding: 20px 25px;
  transition: background-color .3s ease, box-shadow .3s ease;
	border-radius: 8px;
	background-color: rgb(255 255 255 / 70%);
    width: calc(100% - 30px);
    margin: 0 auto;
    top: 40px;
    backdrop-filter: blur(19px);
    transition-property: width, top;
    transition-duration: 0.5s, 0.5s;
    transition-timing-function: ease, ease;
}
.ngs-header.scrolled{ background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.08); border-radius: 0px; top: 0; width: 100%;}

.ngs-container{
  max-width: 1720px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
}

.header-right{ margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Logo swap */
.logo img{ max-height:60px; height:auto; width:auto; transition: opacity .3s ease; }
.logo-light{ display:inline-block !important; }
.logo-dark { display:none !important; }
.ngs-header.scrolled .logo-light{ display:none !important; }
.ngs-header.scrolled .logo-dark { display:inline-block !important; }

/* ================================
   Primary Nav (row)
================================ */
.nav-menu{ list-style:none; display:flex; gap:25px; margin:0; padding:0; }
.nav-menu li a{
  color:#222; text-decoration:none; font-size:22px; font-weight:600;
  font-family:'Montserrat',sans-serif; transition: color .3s ease;
}
.ngs-header.scrolled .nav-menu li a{ color:#222; }
.nav-menu li a:hover{ color:orange; }

/* balance columns on desktop */
@media (min-width:1025px){
  .logo{ flex:1; }
  .main-nav{ flex:2; display:flex; justify-content:center; }
  .header-right{ flex:1; display:flex; justify-content:flex-end; gap:14px; }
}

/* ================================
   Buttons
================================ */
.ngs-btn{
  background:#FF680A; color:#fff; padding:16px 24px; border-radius:5px;
  font: 500 19px/1 Montserrat, sans-serif; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background-color .3s ease, color .3s ease;
}
.ngs-btn:hover{ background:#fff; color:#FF680A; }
.ngs-header.scrolled .ngs-btn{ background:#FF680A; color:#fff; }
.ngs-header.scrolled .ngs-btn:hover{ background:#000; color:#fff; }

.ngs-btn--icon{ display:none; width:42px; height:42px; border-radius:6px; padding:0; }
.ngs-btn--icon svg{ display:block; }

/* ================================
   Hamburger + Overlay (tablet/mobile)
================================ */
.menu-toggle{
  appearance:none; border:0; outline:0; background:transparent !important;
  -webkit-tap-highlight-color:transparent; padding:0; display:none;
  width:32px; height:24px; position:relative; cursor:pointer; z-index:1001;
}
.menu-toggle span{
  position:absolute; left:0; right:0; height:3px; background:#fff;
  transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}
.menu-toggle span:nth-child(1){ top:0; }
.menu-toggle span:nth-child(2){ top:50%; transform:translateY(-50%); }
.menu-toggle span:nth-child(3){ bottom:0; }
.ngs-header.scrolled .menu-toggle span{ background:#111; }
.menu-toggle.active span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* Overlay */
.fullscreen-menu{
  position:fixed; inset:0; width:100%; height:0; opacity:0; overflow:hidden;
  background:rgba(0,0,0,.95);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:25px;
  transition: height .4s ease, opacity .4s ease; z-index:1000;
}
.fullscreen-menu.active{ height:100%; opacity:1; }
.fullscreen-menu .overlay-menu{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.fullscreen-menu .overlay-menu > li > a{
  color:#fff; font-size:24px; font-weight:500; text-decoration:none;
  transition: color .3s ease, transform .25s ease;
}
.fullscreen-menu .overlay-menu > li > a:hover{ color:orange; transform: translateY(-1px); }

/* Mobile overlay accordion */
.fullscreen-menu .overlay-menu .sub-menu{ display:none; margin:6px 0 0; padding-left:0; }
.fullscreen-menu .overlay-menu .sub-menu li a{
  font-size:18px; font-weight:500; opacity:.95; padding:6px 0;
}
.fullscreen-menu .overlay-menu .menu-item-has-children.is-open > .sub-menu{ display:block; }
.fullscreen-menu .overlay-menu .menu-item-has-children > .sub-menu li a{ padding-left:10px; }

/* ================================
   Normal dropdowns (desktop) — exclude mega
================================ */
@media (min-width:1025px){
  .nav-menu > li:not(.mega){ position:relative; }
  .nav-menu > li:not(.mega) > .sub-menu{
    position:absolute; top:100%; left:0; transform:translateY(8px);
    min-width:220px; background:#fff; border-radius:8px;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    padding:10px 0; opacity:0; visibility:hidden; pointer-events:none; z-index:1002;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav-menu > li:not(.mega):hover > .sub-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }

  .nav-menu .sub-menu .menu-item-has-children{ position:relative; }
  .nav-menu .sub-menu .sub-menu{
    top:0; left:100%; transform:translateX(8px);
    min-width:200px; background:#fff; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.12);
    padding:8px 0; opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav-menu .sub-menu .menu-item-has-children:hover > .sub-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0);
  }
  .nav-menu .sub-menu, .nav-menu .sub-menu li{ margin:0; padding:0; list-style:none; }
  .nav-menu .sub-menu a{
    display:block; padding:10px 16px; color:#111; line-height:1.2; text-decoration:none; font-weight:500;
  }
  .nav-menu .sub-menu a:hover{ background:#f7f7f7; color:#FF680A; }
}

/* Caret on items with children (desktop + overlay) */
.nav-menu .menu-item-has-children > a,
.fullscreen-menu .overlay-menu .menu-item-has-children > a{
  position:relative; padding-right:18px;
}
.nav-menu .menu-item-has-children > a::after,
.fullscreen-menu .overlay-menu .menu-item-has-children > a::after{
  content:""; position:absolute; right:0; top:50%; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-60%) rotate(45deg); transition: transform .25s ease; opacity:.9;
}
.nav-menu > .menu-item-has-children:hover > a::after,
.fullscreen-menu .overlay-menu .menu-item-has-children.is-open > a::after{
  transform: translateY(-50%) rotate(225deg);
}

/* ================================
   MEGA MENU (desktop ≥1025px)
   - Parent group = title + list + divider
   - Left static pane + right auto-flow columns
================================ */
@media (min-width:1025px){
  .nav-menu > .menu-item.mega{ position: static; } /* center full width */
  .nav-menu > .menu-item.mega .ast-menu-toggle,
  .nav-menu > .menu-item.mega .dropdown-menu-toggle{ display:none !important; }
  .nav-menu > .menu-item.mega > .sub-menu{ display:none !important; } /* JS replaces it */

  /* Wrapper: left static + right grid */
  .nav-menu > .menu-item.mega .mega-menu-wrapper{
    position:absolute; top:100%; left:50%;
    transform: translate(-50%, 10px);
    z-index:1003;
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    display:grid;
    grid-template-columns: 360px 1fr; /* left static | right flowing columns */
    gap: 24px;
	margin-top: 25px;
	
	padding: 25px 30px;
	width: 100% !important;
    max-width: 1720px;
    border-radius: 8px !important;
    background-color: rgb(255 255 255 / 93%) !important;
  }
  .nav-menu > .menu-item.mega.is-open > .mega-menu-wrapper,
  .nav-menu > .menu-item.mega:hover > .mega-menu-wrapper{
    opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%, 0);
  }

  /* Left static pane (Built to Win area) */
  .mega-static{
  }
  .mega-static h3{ margin:0 0 8px; font-size:26px; font-weight:600; font-family: 'Montserrat'; color:#222; }
  .mega-static p{ font-size: 16px font-family: 'Montserrat'; margin:0; color:#444; line-height:1.5; }

  /* Right side: groups flow into columns automatically */
  .mega-grid{
    column-count: 4;       /* like screenshot: multiple narrow columns */
    column-gap: 28px;
  }
  @media (max-width: 1280px){ .mega-grid{ column-count: 2; } }

  /* Each parent group stays in one column */
  .mega-group{
    break-inside: avoid;
    display: inline-block; /* required for CSS columns */
    width: 100%;
    margin: 0 0 18px;
    padding: 0 0 6px;
  }

  /* Parent title (clickable) */
  .mega-group h4{
    margin:0 0 8px;
    font-size:20px; 
	font-weight:600;
	color:#222;
    position:relative; padding-bottom:6px;
	font-family:  'Montserrat';
  }
  .mega-group h4::after{
    content:""; position:absolute; left:0; bottom:0; width:36px; height:2px; background:#FF680A;
	  display: none;
  }
  .mega-group h4 a{ color:#222; text-decoration:none; }
  .mega-group h4 a:hover{ text-decoration:underline; }

  /* Sub-items under each parent */
  .mega-links{ list-style:none; margin:0; padding:0; }
  .mega-links li{ margin:0; }
  .mega-links a{
    display:block; padding:6px 0;
    font-size:12px; 
	color:#222; 
	text-decoration:none;
	font-family: 'Montserrat'	  
  }
  .mega-links a:hover{ color:#FF680A; }

  /* Divider after every parent group */
  .mega-divider{
    border:0; border-top:1px solid rgba(0,0,0,.08);
    margin:10px 0 0;
  }

  /* Old rail/columns (if any) — keep them inert */
  .mega-left, .mega-right, .mega-col{ display:none !important; }
}


.nav-menu ul.mega-links li a {
    font-size: 12px;
    font-weight: 500;
    color: #222;
    font-family: 'Montserrat';
}

.mega-links li a {
    position: relative;
    padding-left: 14px;
}

.mega-links li a:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid #222;
    left: 0;
    top: 13px;
    border-left: 0;
    border-top: 0;
    transform: rotate(-45deg);
}

/* ================================
   Breakpoints
================================ */
@media (max-width:1024px){
  .main-nav{ display:none; }
  .menu-toggle{ display:inline-block; }
  .ngs-btn--text{ display:inline-flex; }
  .ngs-btn--icon{ display:none; }
  .header-right{ gap:12px; }
}
@media (max-width:576px){
  .ngs-header{ padding:15px 20px; }
  .logo img{ max-height:35px; }
  .nav-menu li a{ font-size:14px; }
  .ngs-btn--text{ display:none; }
  .ngs-btn--icon{ display:inline-flex; background:#FF680A; color:#fff; }
  .ngs-btn--icon:hover{ background:#000; color:#fff; }
  .header-btn .ngs-btn{ padding:8px 14px; font-size:14px; }
}