/* ---- Hidden on desktop, revealed in mobile below ----------- */

.nav-back-link {
  display: none;
}

#menu-button,
#close {
  display: none;
}

.header-wrap{
  position:relative;
  width:100%; 
  display:flex; 
  flex-direction:row; 
  justify-content:flex-end;} 
  /*---keep this as relative positioning so the mega menu can be positioned absolutely within it */


.primary {
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  width:100%;
}

nav.primary > ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    direction: ltr;
    flex-grow: unset;
    justify-content: center;
    row-gap: 10px;
    height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    column-gap: 10px;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

nav.primary > ul > li > a,.main-link a{
       text-transform: uppercase !important;
    color: #FFFFFF !important;
    letter-spacing: 0em !important;
    line-height: 1.2em !important;
    font-family: var(--Roboto) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    display: inline-block !important;
}

nav.primary > ul > li > a:hover,.main-link:hover a { 
    color: #CCCCCC !important;
    text-decoration-line: underline;
}


.nav-expand.active > .nav-expand-content {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 99999;
}


/*---Mega Menu Content ---*/
.nav-expand-content {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

.nav-expand.active > .nav-expand-content {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:.2s ease-in-out;
  z-index: 99;
}

.mega-menu-grid {
    display: flex;
    gap: 20px;
    padding: 5px 30px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.mega-menu-column {
    width: 33.333%;
    padding: 0;
}

.mega-menu-heading,
.mega-submenu-item > .nav-expand-link,.secondary-link a {
    display: block !important;
    margin-bottom: 5px !important;
    padding-bottom: 8px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #2E5B78 !important;
    border-bottom: 1px solid #4f81bd !important;
}

.mega-submenu-panel {
    background: transparent !important;
    padding: 0;
}

.mega-menu-links,
.mega-submenu-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-links a {
    display: block;
    padding: 8px 10px;
    color: #000;
    background: transparent;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: color .25s ease;
}

.mega-menu-links a:hover {
    color: #A0A09F;
    background: transparent;
    text-decoration: underline;
}

.mega-submenu-links a:hover {
  color: #4589b4;
  outline: none;
    background: transparent;
    text-decoration: none;
}

.mega-submenu-item {
  position: relative;
}

.mega-menu-links button {
  width: 100%;
  min-height: 0;
  justify-content: space-between;
  padding: 0.8rem 0.95rem;
  font: 600 0.94rem/1.4 Arial, sans-serif;
  text-align: left;
}

.mega-menu-links .nav-expand-link::after {
  transform: none;
}

.mega-menu-links .nav-expand.active > .nav-expand-link::after {
  transform: none;
}


.mega-submenu-panel {
  position: relative !important;
  width: 100%;
  z-index: 50;
  transition: transform 0.4s ease-in-out;
  background: #ccc;
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Desktop: hide arrow on mega sub-items — panel is always open */
.mega-submenu-item > .nav-expand-link::after {
  display: none;
}


.mega-submenu-panel .nav-back-link {
  display: none!important;
}


.dropdown-content{
     padding: 5px 0;
    box-shadow: 0 24px 48px rgba(17, 17, 17, 0.12);
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    width: 1200px;
    max-width: 100%;
	display:flex;
}

.dropdown-content li {flex: 1;}

.dropdown-content li a{
    display: block;
    padding: 10px 20px;
    color: #111111;
    font-size: 14px;
    font-family: var(--Roboto);
    font-weight: 600;
	transition:.3s all;
}
.dropdown-content li a:hover {
  color: #4589b4;
  outline: none;
}
.mega-submenu-links a {
    padding: 8px 10px !important;
}
/* Desktop hover dropdowns */
@media screen and (min-width: 1001px) {

    .nav-expand:hover > .nav-expand-content {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 999;
    }

    /* Keep mega menu item active while hovering panel */
    .nav-expand-content:hover {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
	
	.nav-expand.active > .nav-expand-link{
color:#000;
background:#ccc;
}
	
	
	button.nav-expand-toggle {display: none;}
}

/* ============================================================
   MOBILE MENU
   ============================================================ */

@media screen and (max-width: 1000px) {
	button.nav-expand-toggle {display: block;}
			body::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease;
		z-index: 9998;
		pointer-events: none;
		}

		body.nav-is-toggled::after {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		}
		.nav-expand-content{
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		}
    .nav-is-toggled {
        overflow: hidden;
    }

    .primary {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        background: #fff;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .35s ease;
        z-index: 9999;
        display: block !important;
        width: min(340px, 88vw) !important;
    }

    body.nav-is-toggled .primary {
        transform: translateX(0);
    }

    #menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background: #2f2e2e;
        color: #fff;
        font-size: 20px;
        line-height: 1;
    }

    #close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        margin-left: auto;
        background: #2f2e2e;
        color: #fff;
        font-size: 32px;
        flex-shrink: 0;
    }

    nav.primary > ul {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    nav.primary > ul > li {
        width: 100%;
    }

    nav.primary > ul > li > a,.main-link a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 18px 20px !important;
        color: #333 !important;
        background: #fff !important;
        font-size: 18px !important;
        font-family: var(--Roboto) !important;
        text-decoration: none !important;
        text-transform: none !important;
        box-sizing: border-box !important;
    }

    .nav-expand.active > .nav-expand-link {
        background: #fff;
        color: #333;
    }

    /* =====================================
       ARROWS
       ===================================== */

/*
    .nav-expand-link::after {
             content: "\2304";
        margin-left: auto;
        font-size: 20px;
        transition: transform .3s ease;
        font-family: 'FontAwesome';
        font-weight: 900;
    }

    .nav-expand.active > .nav-expand-link::after {
        transform: rotate(180deg) !important;
    }

    .mega-submenu-item > .nav-expand-link::after {
        display: block !important;
    }

    .mega-submenu-item.active > .nav-expand-link::after {
        transform: rotate(180deg) !important;
    }
	
	.nav-expand-link.no-sub::after {content: none !important}
*/

    /* =====================================
       ACCORDION BEHAVIOR
       ===================================== */

    /* Hide all panels by default */
		.nav-expand-content,
		.mega-submenu-panel {
			display: none;
		}

		.primary > ul > li.nav-expand.active > .nav-expand-content:not(.mega-submenu-panel) {
			display: block;
		}

		.mega-submenu-item.active > .mega-submenu-panel {
			display: block;
		}

    /* =====================================
       MEGA MENU LAYOUT
       ===================================== */

    .mega-menu-grid {
        display: block;
        padding: 0;
        box-shadow: none;
    }

    .mega-menu-column {
        width: 100%;
    }

    .mega-menu-heading {
        display: none;
    }

    .mega-submenu-item > .nav-expand-link,.nav-expand-header.secondary-link a {
               padding-left: 35px !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        color: #333 !important;
        border-bottom: none !important;
        display: inline-flex !important;
        padding: 18px 20px;
    }

    .mega-submenu-panel {
        position: static !important;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: #fff;
    }

    /* =====================================
       LINKS
       ===================================== */

    .dropdown-content,
    .mega-submenu-links {
        display: block;
        position: static;
        width: 100%;
        box-shadow: none;
        background: #fff;
    }

    .dropdown-content li a,
    .mega-submenu-links a {
        display: block;
        font-size: 18px !important;
        font-weight: 400 !important;
        color: #000;
        text-decoration: none;
        border-bottom: none;
        padding: 18px 20px !important;
        box-sizing: border-box;
    }

    .dropdown-content li a {
        padding-left: 40px !important;
    }

    .mega-submenu-links a {
        padding-left: 55px !important;
    }

    /* =====================================
       BACK LINK
       ===================================== */

    .nav-back-link,
    .mega-submenu-panel .nav-back-link {
        display: none !important;
    }
	
	.nav-expand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-expand-link {
    flex: 1;
}

    .nav-expand-toggle {
        width: 44px !important;
        height: 44px !important;
        border: 0 !important;
        background: transparent !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

}