/* ========================================
MOBILE ONLY STYLES
add and modify varibales for mobile breakpoint
========================================= */
html.dwc-mobile {
  --mobile-menu-width: min(450px, 100%);
  --menu-item-font-size: 18px;
  --dropdown-item-font-size: var(--menu-item-font-size);
  --back-text-font-size: 16px;
  --menu-item-hover-border-bg: initial;
}

/* ======================================= 
  GENERAL NAV STYLES 
========================================= */
:root {
  /* ========================
 GENERAL COLORS/BACKGROUND
  ======================== */
  --primary-clr: orangered;
  --header-bg: white;
  --dropdown-content-bg: white;
  --mobile-menu-bg: white;
  --mobile-menu-topbar-bg: white;


  /* ===============================
   GENERAL WIDTH | HEIGHT | SPACINGS
  ================================== */
  --mobile-menu-width: min(300px, 100%); /* mobile & offcanvas */
  --multilevel-dropdown-width: 200px;  
  --dropdown-content-gap: 1px; /* header -> dropdown gap, add unit (e.g. 0px) */
  --header-min-height: 60px;
  --fullscreen-mobile-menu-top-height: 60px;  
  --top-offset: 40px; /* when nav is below header */ 
  --dropdown-content-default-width: 1080px;  /* preview width & default width for dropdown content */


  /* ==============================================
    GENERAL BORDERS | SHADOWS | OVERLAY BACKDROP
  ================================================= */
  /* dropdown content */
  --dropdown-content-border-radius: 0px;
  --dropdown-content-shadow: 0px 5px 15px -10px rgb(0 0 0 / 0%);  
  --dropdown-content-border-size: 1px; /* at least 1px */
  --dropdown-content-border-color: var(--dropdown-content-bg);   

  /* overlay backdrop */
  --nav-overlay-backdrop-blur: 0px;
  --nav-overlay-backdrop-clr: rgba(0, 0, 0, 0.3);

  /* sidebar nav */
  --sidebar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);

  /* radius for special mobile style on overlay header*/
  --mobile-menu-radius: var(--overlay-header-radius);

  /* 	mobile & offcanvas */
  --slide-out-speed: 1.3;


  /* ===============================
  MENU TOGGLE - Hamburger 
  (additional settings at line 202)
  ================================== */
  --menu-toggle-clr: var(--menu-item-clr);
  --menu-close-toggle-clr: var(--menu-item-clr);
  --menu-toggle-hover-clr: var(--menu-item-hover-clr);


  /* ========================
  MENU ITEMS
  ======================== */
  /* DEFAULT STATE */
  --menu-item-clr: #000;
  --menu-item-font-size: 14px;
  --menu-item-font-weight: 500;
  --menu-item-bg: initial; 

  /* HOVER STATE */
  --menu-item-hover-clr: var(--primary-clr);
  --menu-item-hover-bg: initial;
  --menu-item-hover-border-bg: var(--menu-item-active-border-bg);
  --menu-item-hover-border-height: var(--menu-item-active-border-height);

  /* ACTIVE STATE 
  (to exclude a link from this style, 
  add .dwc-exclude to its container)*/
  --menu-item-active-clr: var(--menu-item-hover-clr);
  --menu-item-active-bg: initial;
  --menu-item-active-border-bg: var(--primary-clr);
  --menu-item-active-border-height: 2px;

  /* PADDING | GAP */
  --menu-item-inline-padding: 1.1rem;
  --menu-item-block-padding: 1rem;
  --menu-items-gap: 0;

  /* BORDERS | RADIUS */
  --menu-item-border: 1px solid rgba(0, 0, 0, 0.1);
  --menu-item-radius: 0;
  
  /* CHEVRON (dropdown arrow) */
  --chevron-size: 14px;
  --chevron-clr: var(--menu-item-clr);
  --chevron-hover-clr: var(--menu-item-hover-clr);


  /* ========================
  MULTILEVEL DROPDOWN LINKS
  ======================== */
  /* DEFAULT STATE */
  --dropdown-item-clr: var(--menu-item-clr);
  --dropdown-item-font-size: var(--menu-item-font-size);
  --dropdown-item-bg: initial;
  --dropdown-indent-bg: rgb(0 0 0 / 5%);
  --dropdown-heading-clr: var(--primary-clr);

  /* HOVER STATE */
  --dropdown-item-hover-clr: var(--menu-item-hover-clr);
  --dropdown-item-hover-bg: white;

  /* EXPANDED STATE (PARENT) - mobile */
  /* when [data-submenu-reveal="expand"] */
  --dropdown-expanded-clr: white;
  --dropdown-expanded-bg: black;

  /* PADDING | GAP | INDENT */
  --dropdown-item-inline-padding: var(--menu-item-inline-padding);
  --dropdown-item-block-padding: var(--menu-item-block-padding);
  --dropdown-indent: 0.6rem;
  --dropdown-indent-item-pad-offset: 0.5;
  --dropdown-indent-line: solid 1px rgb(0 0 0 / 25%);

  /* OTHERS */
  --dropdown-inactive-overlay: rgb(0 0 0 / 10%);


  /* ========================
  MENU CTA BUTTON (ALL BUTTONS)
  ======================== */
  /* all cta buttons max width on mobile */
  --cta-width: 100%;

  /* gap offset between 2 or 3 cta buttons on mobile/offcanvas/sidebar*/
  --cta-gap-offset: 0;

  /* gap between breakout cta and menu toggle on mobile */
  --cta-breakout-gap: 20px;


  /* ========================
  MENU CTA BUTTON (LAST BUTTON)
  ======================== */
  /* DEFAULT STATE */
  --menu-cta-clr: white;
  --menu-cta-bg: black;
  --menu-cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3);
  --menu-cta-block-padding: var(--menu-item-block-padding);
  --menu-cta-border: none;
  --menu-cta-radius: 0em;

  /* HOVER STATE */
  --menu-cta-hover-clr: white;
  --menu-cta-hover-bg: var(--primary-clr);


  /* ========================
  MENU CTA BUTTON (SECOND BUTTON)
  ======================== */
  /* DEFAULT STATE */
  --menu-cta-2-clr: white;
  --menu-cta-2-bg: black;
  --menu-cta-2-inline-padding: var(--menu-cta-inline-padding);
  --menu-cta-2-block-padding: var(--menu-cta-block-padding);
  --menu-cta-2-border: var(--menu-cta-border);
  --menu-cta-2-radius: var(--menu-cta-radius);

  /* HOVER STATE */
  --menu-cta-2-hover-clr: white;
  --menu-cta-2-hover-bg: var(--primary-clr);


  /* ========================
  MENU CTA BUTTON (THIRD BUTTON)
  ======================== */
  /* DEFAULT STATE */
  --menu-cta-3-clr: white;
  --menu-cta-3-bg: black;
  --menu-cta-3-inline-padding: var(--menu-cta-inline-padding);
  --menu-cta-3-block-padding: var(--menu-cta-block-padding);
  --menu-cta-3-border: var(--menu-cta-border);
  --menu-cta-3-radius: var(--menu-cta-radius);

  /* HOVER STATE */
  --menu-cta-3-hover-clr: white;
  --menu-cta-3-hover-bg: var(--primary-clr);


  /* ========================
  MENU TOGGLE - Hamburger additional settings
  ======================== */
  --open-icon-size: 40px;
  --open-icon-line-height: 4px;
  --icon-line-gap: 0.7em;   /* gap between the lines*/
  --open-icon-line-variance: 9px;  /* line width variation, e.g. 0 = same width*/
  --open-icon-align: 0;  /* 0 = right | auto = left */
  --open-icon-horizontal-offset: 0px; /* nudge icon left or right from edge of screen*/
  --open-icon-close-offset: 1.2; /* nudge icon left or right when close icon is active */


  /* ======================================
  ADAPTIVE HEIGHT/ STRIPE BG COLOR/BORDER
  ========================================= */
  --adaptive-height-bg: #fff;
  --adaptive-height-border: 1px solid #fff;
  --adaptive-height-shadow: 0 0 30px rgb(39 50 59 / 10%);


  /* ========================
  STRIPE - when [data-optimize-stripe="true"]
  ======================== */
  --stripe-border-radius: 10px;


  /* ========================
  MOBILE/OFFCANVAS MENU
  ======================== */
  --mobile-menu-ttf: cubic-bezier(0.8, 0.07, 0.2, 0.95);
  /* Transition timing function */


  /* =================
  OVERLAY HEADER
  ================== */
  --overlay-header-width: 1400px;
  --overlay-header-inset: 1rem;
  --overlay-header-bg: rgb(255 255 255 / 100%);
  --overlay-header-bg-active: rgb(255 255 255 / 100%);
  --overlay-header-blur: 10px;
  --overlay-header-radius: 1rem;
  --overlay-header-shadow: 0px 2px 20px rgb(0 0 0 / 20%);
  --overlay-offset-padding: clamp(5rem, 1.875rem + 12.5vw, 11.25rem);


  /* ========================
  BACK TEXT
  ======================== */
  --back-text-clr: var(--menu-item-clr);
  --back-text-font-size: 12px;
  --back-text-font-weight: 600;
  --back-text-transform: uppercase;
  --back-text-bg: var(--mobile-menu-topbar-bg);


  /* ========================
  SIDEBAR NAV - OVERLAY MODE
  ======================== */
  --overlay-sidebar-radius: 1rem;
  --overlay-sidebar-bg: rgb(255 255 255 / 80%);
  --overlay-sidebar-shadow: 0 0 30px rgb(39 50 59 / 10%);
  --overlay-sidebar-inset: 12px;


  /* ======== DO NOT EDIT THIS VARIABLES! ======== */
  --iw: calc(var(--open-icon-size) - var(--open-icon-line-variance));
  --aw: calc(var(--iw) - var(--open-icon-line-variance));  
  --caret-size: calc(var(--dropdown-content-gap) + var(--dropdown-content-border-size));
  --dropdown-content-border: solid var(--dropdown-content-border-color) var(--dropdown-content-border-size); 
}


/* SIDEBAR BACK TEXT BAR HEIGHT WHEN BACK TEXT OVERLAYS LOGO */
#brx-header:has([data-sidebar-back-text-on-logo="true"]) {
  --top-offset: var(--mobile-menu-top-height);
}


/* ========================
  STICKY HEADER STYLES
add variables to modify for sticky header
  ======================== */
.sticky.scrolling {
  /* add your sticky styles variable here */
}

/* ========================
DROPDOWN ITEM IS BUTTON OR ICON 
======================== */

[data-is-button]>.brx-submenu-toggle {
  --menu-item-bg: black;
  --menu-item-clr: white;
  --menu-item-hover-clr: white;
  --menu-item-hover-bg: black;
  --menu-item-radius: 50vw;
  --menu-item-hover-border-height: 0;
  --chevron-size: 0;
  --chevron-color: white;
  --menu-item-inline-padding: 1.5rem;
  --menu-item-block-padding: 1rem;
  /* mobile only*/
  --menu-item-width: 200px;
  --menu-item-border: solid 1px transparent;
  --menu-item-hover-border: solid 1px transparent;

}

[data-is-icon]>.brx-submenu-toggle {
  --menu-item-bg: black;
  --menu-item-clr: white;
  --menu-item-hover-clr: white;
  --menu-item-hover-bg: black;
  --icon-clr: white;
  --icon-hover-clr: white;
  --icon-size: 14px;
  --menu-item-inline-padding: 1.1rem;
  --button-max-diameter: 45px;
  --menu-item-radius: 50vw;
  --menu-item-border: solid 1px transparent;
  --menu-item-hover-border: solid 1px transparent;
}

/* ========== NAV STYLES END ============== */



/* ======= STICKY HEADER WITH OVERLAY SPECIAL STYLES ===== */

/* SVG STYLES BEFORE SCROLLING - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open)) :is(path, .cls-1):not(:is(.brx-submenu-toggle path)) {
  fill: white;
}



/* STYLES BEFORE SCROLLING  - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open)) {
  --menu-item-clr: white;
  --chevron-clr: white;
  --menu-item-hover-clr: white;
  --menu-item-hover-border-bg: white;
  --overlay-header-bg: transparent;
  --overlay-header-shadow: none;
}

/* STYLES BEFORE SCROLLING */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .sticky:not(.scrolling) {
  --link-transition: 0s;
  --transition: 0.2s;
}


/* STYLES WHEN SCROLLING */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .sticky.scrolling {
  --overlay-header-bg: white;
}

/* STYLES WHEN SCROLLING :HOVER*/
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .sticky.scrolling .dwc-nest-header:has(.brxe-dropdown.open) {
  /* add and update variable here */

}


/* DEFAULT STYLES FOR OVERLAY HEADER  */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .sticky {
  --menu-item-hover-bg: initial;
  --menu-item-bg: initial;
  --overlay-header-inset: 0;
  --overlay-header-width: 100%;
  --overlay-header-radius: 0;
}

/* RESET STICKY HEADER TRANSITION*/
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend #brx-header.sticky .dwc-nest-header {
  transition: var(--transition);
}


/* ======= END STICKY HEADER WITH OVERLAY SPECIAL STYLES ===== */



/* ======== CHANGE postid-xxxx TO THIS TEMPLATE'S ID ========= */

/*hide sidebar in builder */
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header:not(.postid-23338 *, :has(.dwc-sidebar) *) {
  display: none !important;
}

[data-builder-window] #brx-header:has([data-offcanvas="true"]):not(.postid-23338 *, :has(.dwc-sidebar) *) :is(.dwc-nav-wrapper, .dwc-nest-menu) {
  display: none !important;
}


:is(.brx-header-left, .brx-header-right)[data-builder-window] :is(#brx-content, #brx-footer):not(.postid-23338 *, :has(.dwc-sidebar) *) {
  margin: unset !important;
}

[data-builder-mode]:is(.brx-header-left, .brx-header-right).postid-23338::before {
  display: none
}
const MegaMenuCONFIG = {
  // Minimum width threshold for desktop behavior,
  // should be 1px larger than mobile (max-width) breakpoint in the "MENU Styles/Options" CSS code block
  //IMPORTANT: Also change min-width in the "MEGA MENU Codes" CSS code block
  minWidth: 1201,

  // automatically open the current menu panel/dropdown (mobile, offcanvas & sidebar)
  menuAutoExpansion: true,

  swipeToClose: true,

  // show or hide swipe to close hint
  toolTip: true,

  // adaptive height animation
  adaptiveHeight: 0,

  // Stripe menu animation
  stripeStyle: 0,

  headerSelector: '.dwc-nest-header',
  nestMenuSelector: '.dwc-nest-menu',

  closeNavOnClick: 1,
  closeOnHashClickOnly: 0,
  breakinToNavList: 0, /*do not enable if using last item is button*/

  // Selectors (e.g. .class-name, #id_name, tag-name, .complex > selectors etc.) that should NOT close the navigation when clicked
  // Separate multiple selectors with a comma e.g. '.class-one, #id_one, tag'
  closeNavOnClickExclude: '.js-wpml-ls-item-toggle',

  // New properties for dropdown positioning
  shiftFactor: 1,  // Factor to shift overflow
  minOverflow: 10,   // Minimum overflow threshold 
  reinitializeOnURLchange: false, //when using page transition API
  
  //move backdrop overlay element Inside header
  //placing it inside header will allow backdrop overlay/blur to affect header, but won't work when data-overlay-header is enabled. 
  overlayInsideHeader:0

};

// Centered Logo Configuration
const CenteredLogoCONFIG = {
  enable: 0,
  centerGuide: 1,
  forceCenteredLogo: 1,
  // move the navigation left 
  // or right using negative or positive value
  centerNudge: 0,
  // allow centered logo when no. of 
  // menu items are odd e.g. 5 or 7
  allowOddItems: 1,
  // place logo 'before' or 'after' the odd menu item
  roundOffFactor: 'before'
};
/* DO NOT ADD ANY CODE IN THIS CODE BLOCK */

/*MOBILE MENU/OFFCANVAS/SIDEBAR STYLES*/




@media only screen and (max-width: 1200px) {
    .desktop-centered header:has([data-fix-centered-logo-fouc="true"]) {
        opacity: 0;
    }

    .dwc-nest-menu__logo[data-breakout-link] {
        margin-inline-end: auto
    }
  
/*mobile logo*/
  .dwc-nest-menu__mobile-logo > :is(svg, img) {
    height: 100%;
}
  
  .dwc-nest-menu__mobile-logo:not([data-show-mobile-logo="true"] .dwc-nest-menu__mobile-logo){
  display: none;
}


[data-sidebar-back-text-on-logo="true"] .dwc-nest-menu__mobile-logo {      
   --dwc-nest-header-height: var(--mobile-menu-top-height);
}

    /*special mobile menu styles for overlay header UPDATED */

    .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
        transform: translateY(-100%);
    }


    .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .brx-nav-nested-items {
        transform: translateY(0%);
    }

    .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
        transition: 0.45s;
        transition-timing-function: var(--mobile-menu-ttf);
        inset-block-start: calc(min(var(--overlay-header-radius), 2em) * -1);
    }


    .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-submenu-reveal="expand"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
        inset-block-start: calc(var(--dwc-nest-header-height) / -2);
    }


    .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
        --mobile-menu-width: 100% !important;
        inline-size: var(--mobile-menu-width);
        border-bottom-left-radius: min(var(--mobile-menu-radius), 2em);
        border-bottom-right-radius: min(var(--mobile-menu-radius), 2em);
        padding-block-start: calc(var(--dwc-nest-header-height) / 2);
        overflow-x: hidden;
    }

    .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="expand"] .brx-nav-nested-items {
        max-block-size: fit-content;
    }

    .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
        transform: translateY(0%);
        border-radius: min(var(--overlay-header-radius), 2em);
        overflow: hidden !important;
        inset-block-start: var(--overlay-header-inset);

    }

    .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .dwc-nav-wrapper {
        transform: translateY(0%);
    }

    .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper) {
        --mobile-menu-width: min(calc(100% - (var(--overlay-header-inset) * 2)), 100%) !important;
        inline-size: var(--mobile-menu-width) !important;
        inset-inline-end: var(--overlay-header-inset) !important;
        block-size: calc(100dvb - (var(--overlay-header-inset) * 2));
    }

    .dwc-mobile .dwc-nest-menu.brxe-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
        height: 0;
    }


    .dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) {
        padding-inline: initial
    }


    .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
        border-block-end: initial;
    }


    /* .dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"])) .dwc-nest-nav-items:has(.open.active) .brx-submenu-toggle>button:not(.brxe-dropdown.open.active .brx-submenu-toggle > button) {
opacity: 0;
} */

    .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
        inset-block-start: min(var(--overlay-header-radius), 2em) !important;
        padding-block-start: 50px;
    }


    .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
        inset-block-start: min(var(--overlay-header-radius), 2em) !important;
        padding-block-start: 50px;
    }


    .dwc-mobile .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) {
        z-index: 9999;
        min-inline-size: 100%;
        min-block-size: 50px;
        inset-block-start: min(var(--overlay-header-radius), 2em);
    }


    .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
        min-block-size: 100%;
    }



    .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content)>li {
        padding-block-end: 40px;
    }

    .dwc-mobile .dwc-nest-header[data-overlay-header-mobile="true"]>div {
        padding-inline: var(--menu-item-inline-padding);
        border-radius: var(--overlay-header-radius);
    }

    /* special style UPDATED ends*/



    .dwc-nest-menu .brx-nav-nested-items {
        width: var(--mobile-menu-width);
    }

    /*  unset default values */

    [data-offcanvas="true"] .open:has(.open) .brx-dropdown-content::before {
        display: none !important;
    }

    [data-offcanvas="true"] .brx-nav-nested-items {
        flex-wrap: nowrap;
    }

    .dwc-nest-menu .brx-nav-nested-items {
        gap: 0;
    }


    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
        display: flex;
        visibility: hidden;
    }

    [data-overlay-header="true"] .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content),
    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
        min-inline-size: 0 !important;
    }

    .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown>.brx-dropdown-content {
        overflow-y: auto;
    }

    .dwc-nest-menu .brx-nav-nested-items {
        flex-direction: column !important;
        flex-wrap: nowrap;

    }

    .dwc-nest-toggle--open.brxe-toggle {
        display: flex !important;
        place-items: center;
    }

    .dwc-nest-menu .brx-nav-nested-items {
        position: relative !Important;
        background: var(--mobile-menu-bg) !important;
        align-items: stretch;
        flex: 1;
    }





    .dwc-nest-menu .brx-nav-nested-items:not(.brx-open .brx-nav-nested-items) {
        transform: unset
    }

    .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content {
        transform: translateZ(0);
        transform: unset;
    }

    .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items {
        opacity: unset !important;
        visibility: unset !important;
    }

    .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
        overflow-y: auto;
        scrollbar-width: none;
        justify-content: flex-start !important;
    }


    /* set new values  */

    .dwc-nav-wrapper {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        transform: translateX(100%);
        background-color: var(--mobile-menu-bg);
        transition: 0.45s;
        transition-timing-function: var(--mobile-menu-ttf);
        z-index: 1;
        flex-wrap: nowrap;
        inline-size: var(--mobile-menu-width);
        visibility: hidden;
    }

   

    .brx-open .dwc-nav-wrapper {
        transform: translateX(0%);
        visibility: visible;
    }



    .dwc-nest-menu-top {
        background-color: var(--mobile-menu-topbar-bg);
        border-block-end: var(--menu-item-border);
        min-block-size: var(--dwc-nest-header-height);
        display: flex;
        flex-direction: row;
        align-items: center;
    }



    .dwc-nest-menu .brxe-dropdown.brx-has-megamenu,
    .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu)>.menu-item>a {
        border-block-end: var(--menu-item-border);
    }

    .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu):not(.open, :has(.open)),
    .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) >.brxe-dropdown:not(.open, :has(.open)) {
        border-block-end: var(--menu-item-border);
    }



    /* MENU CTA (LAST BUTTON) */

    :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type,
    :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2),
    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) {
        padding-inline: var(--menu-item-inline-padding) !important;
        padding-block: var(--menu-item-block-padding) !important;
        inline-size: 100%;
        margin-inline: auto;
        max-inline-size: var(--cta-width);
    }

    [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2)+li {
        padding-block-start: var(--cta-gap-offset) !important
    }

    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3)+li {
        padding-block-start: var(--cta-gap-offset) !important
    }


    :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type a,
    :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2) a,
    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) a {
        justify-content: center;
    }



    /* MOBILE MENU SLIDE IN DIRECTION */
    .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
        transform: translateX(-100%);
        inset-inline-start: 0;
        overflow: hidden;
    }

    /* RTL */
    [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
        inset-inline-start: initial;
        inset-inline-end: 0;
    }

    [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
        inset-inline-start: initial;
        inset-inline-end: 0;
    }

    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction="left"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button),

    [dir="rtl"] .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left"] [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
        inset-inline-start: initial;
        inset-inline-end: 0;
        justify-content: flex-end;
    }




    .bricks-is-frontend [data-slide-in-direction="left"].brx-open .dwc-nav-wrapper {
        transform: translateX(0);
    }

    /* SLIDE IN TOP */
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"].brx-open .dwc-nav-wrapper,
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"].brx-open .dwc-nav-wrapper {
        transform: translateY(0%);
    }

    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"] .dwc-nav-wrapper,
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"] .dwc-nav-wrapper {
        transform: translateY(-100%);
    }

    /* SLIDE IN BOTTOM */

    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"].brx-open .dwc-nav-wrapper,
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"].brx-open .dwc-nav-wrapper {
        transform: translateY(0%);
    }

    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"] .dwc-nav-wrapper,
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"] .dwc-nav-wrapper {
        transform: translateY(100%);
    }

    .bricks-is-frontend [data-slide-in-direction="left bottom"] .dwc-nav-wrapper,
    .bricks-is-frontend [data-slide-in-direction="left top"] .dwc-nav-wrapper {
        inset-inline-start: 0;
        overflow: hidden;
    }


    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-track,
    .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-track {
        border-radius: 50vw;
        background-color: transparent;
    }

    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar,
    .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar {
        inline-size: 0px;
        background-color: transparent;
    }

    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-thumb,
    .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-thumb {
        border-radius: 50vw;
        background-color: #55565d;
    }

    /* SCROLLBARS END */



    /*  SLIDE IN DIRECTION - DROPDOWN ITEMS*/
    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content {
        max-block-size: unset;
        position: absolute !important;
        opacity: 1;
        transition-duration: 0.45s !important;
        transition-timing-function: var(--mobile-menu-ttf);
        padding-block-end: 50px;
    }

    .bricks-is-frontend .dwc-nest-menu [data-submenu-reveal="expand"].brx-has-megamenu>ul {
        position: static !important;
        padding-block-end: 0 !important;
        transition: 0.3s ease-in-out !important;
    }



    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        inset: 0 !important;
        transform: translateX(100%);
        transition-property: opacity, transform, visibility;
        min-block-size: calc(100dvb - var(--dwc-nest-header-height));
        position: fixed !important;
    }

    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
        inset-block-start: var(--dwc-nest-header-height) !important;
    }

    .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul),
    .bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        transform: translateX(-100%);
    }

    .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu.brx-open .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        transform: translateX(0) !important;
    }

    html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        transform: translateX(0) !important;
        visibility: visible;
    }

    /*  SLIDE IN  - mult-level DROPDOWN ITEMS*/
    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
        inset-block: 0 !important;
        inline-size: 100%;
        transition-property: inset-inline-start, visibility, opacity;
        inset-inline-start: 100% !important;
        min-block-size: 100dvb;
        position: fixed !important;
    }

    .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content),
    .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content),
    .bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content) {
        inset-inline-start: -100% !important;
    }

    /* RTL */
    [dir="rtl"] .brx-header-right.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content,
    [dir="rtl"] .brx-header-right.bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content,
    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content,
    [dir="rtl"] .bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content {
        inset-inline-start: -100% !important;
    }

    [dir="rtl"] .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content,
    [dir="rtl"] .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content,
    [dir="rtl"] .brx-header-left.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content {
        inset-inline-start: 100% !important;
    }



    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
        inset-block-start: var(--dwc-nest-header-height) !important;
    }

    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
    .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
    .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
        inset-inline-start: 0 !important;
    }

    html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-nav-nested .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
    html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
    html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
        inset-inline-start: 0 !important;
        visibility: visible;
    }

    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown {
        position: static;
    }


    .bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
        transform: rotate(270deg)
    }


    /*  EXPAND  - mult-level DROPDOWN ITEMS*/
    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>li,
    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>.brxe-dropdown .brx-dropdown-content>li,
    .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content>.menu-item:not([data-submenu-reveal="slide"] li) {
        transform: translateY(-100px);
        opacity: 0;
        transition: transform 0s, opacity 0s
    }

    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>li,
    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>.brxe-dropdown.open .brx-dropdown-content>li,
    .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu).open>.brx-dropdown-content>.menu-item {
        transform: translateY(0);
        opacity: 1 !important;
        transition: transform 0.4s, opacity 0.4s
    }

    /* MOBILE LOGO */
    .dwc-nest-menu:not([data-submenu-reveal="expand"]):has(.brxe-dropdown.open) .dwc-nest-menu__mobile-logo {
        opacity: 0;
        transition: 0s;
    }

    .dwc-nest-menu__mobile-logo {
        opacity: 1;
        transition: opacity 0.45s 0.15s var(--mobile-menu-ttf);
    }

    .dwc-nest-menu__mobile-logo:not(.brx-header-left *, .brx-header-right *) {
        min-block-size: var(--dwc-nest-header-height);
    }

    .brx-header-left .dwc-nest-menu__mobile-logo,
    .brx-header-right .dwc-nest-menu__mobile-logo {
        min-block-size: var(--top-offset);
    }

    :where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__logo {
        display: none;
    }

    :where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__mobile-logo {
        display: flex;
    }

    /* DROPDOWN INDENT */


    .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] .brx-dropdown-content),
    .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) .brx-dropdown-content {
        padding-inline-start: var(--dropdown-indent) !important;
        padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
        border-left: var(--dropdown-indent-line);
        background-color: var(--dropdown-indent-bg)
    }


    .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *)>*> :is(a, .brx-submenu-toggle),
    .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>*> :is(a, .brx-submenu-toggle) {
        padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
    }


    .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle,
    .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle {
        background-color: var(--dropdown-expanded-bg);
        color: var(--dropdown-expanded-clr);
    }

    .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle svg, 
.dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle svg{
    color: var(--dropdown-expanded-clr) !important;
}


    /* BACK BUTTON POSITIONING */
    .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button),
    .bricks-is-frontend [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
        min-inline-size: 70%;
        position: fixed;
        inset-block-start: 0;
        transform: translateY(0%) !important;
        inset-inline-start: var(--menu-item-inline-padding);
        color: var(--back-text-clr);
        text-transform: var(--back-text-transform);
        letter-spacing: 1px;
        /* padding-inline: 1rem !important; */
        z-index: 1000;
        font-size: var(--back-text-font-size);
        font-weight: var(--back-text-font-weight);
        background-color: var(--back-text-bg);
        min-block-size: calc(var(--dwc-nest-header-height) - 2px);
        -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
        animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
    }




    /* BACK BUTTON TEXT, (ATTR SET BY JS) */
    .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button[data-back-text="auto"]:not([data-submenu-reveal="expand"] button, [data-hide-close-bar="true"] button):after,
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button[data-back-text="auto"]:not([data-hide-close-bar="true"] button):after {
        content: attr(data-text);
    }

    /* FORCE TO USE 'BACK' AS BACK BUTTON TEXT */

    .bricks-is-frontend .dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown.open:not([data-submenu-reveal="expand"])>.brx-submenu-toggle button:not([data-back-text="auto"])::after {
        content: attr(data-back-text) !important;
    }

    .dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown:not([data-submenu-reveal="expand"]) .brx-submenu-toggle button[aria-expanded] {
        transition: unset !important;
    }

    /* BACK BUTTON CHEVRON ARROW direction */
    .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open>.brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button svg {
        transform: rotate(90deg);
        margin-inline-end: 0.5em;
        inline-size: 10px;
    }

    /* RTL */
    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"])>.brx-submenu-toggle button svg,
    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button svg {
        order: 2;
        margin-inline-end: initial;
        margin-inline-start: 0.5em;
    }




    /* overlay back button on logo*/
    body:has(.brx-open .open.active:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"]:not([data-submenu-reveal="expand"], [data-below-header="true"]) .dwc-nest-menu-top {
        background-color: var(--mobile-menu-topbar-bg) !important;
        -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
        animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
    }

    body:has([data-submenu-reveal="slide"].brxe-dropdown.open, [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
        background-color: var(--mobile-menu-topbar-bg) !important;
    }

    .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nav-wrapper:not([data-below-header="true"] .dwc-nav-wrapper, [data-show-mobile-logo="true"] .dwc-nav-wrapper, [data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper) {
        background-color: transparent !important;
    }


    .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *, [data-show-mobile-logo="true"] *) {
        background-color: transparent !important;
    }




    /* MENU BELOW HEADER */
     .bricks-is-frontend [data-below-header="true"].dwc-nest-menu .dwc-nav-wrapper {
    inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px));
}

    [data-below-header="true"] .dwc-nest-menu-top {
        min-block-size: var(--top-offset);
    }

    .bricks-is-frontend [data-below-header="true"] .brxe-dropdown.open>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
        min-block-size: calc(var(--top-offset) - 1px);
        padding-block: 0 !important;
    }


    .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
        inset-block-start: calc(var(--top-offset) + 1px) !important;
    }

    .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
        inset-block-start: calc(var(--top-offset) + 1px) !important;
    }

    .dwc-nest-menu[data-below-header="true"] .dwc-nest-menu__mobile-logo {
        display: none;
    }



    /* tooltip */

    .dwc-nest-tooltip:not(.dwc-nav-wrapper:has(.open.active) .dwc-nest-tooltip, .dwc-tabbed-nav-list__li.active ~ .dwc-nest-tooltip) {
        opacity: 0 !important;
    }


    @keyframes slideIn {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            transform: translateX(50%);
            opacity: 0;
        }
    }

    .dwc-nest-tooltip {
        animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both;
        text-transform: initial;
    }


    /* EXPAND DROP DOWN */
    /* EXPAND MEGA MENU DROP DOWN */

    [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content {
        display: grid !important;
        grid-template-rows: 0fr;
        grid-template-columns: 1fr;
        transition: 0.3s ease-in-out;
        overflow: hidden;
        position: static;
        visibility: visible;
        opacity: 1;
    }

    [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;

    }

    [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content> :is(div, li) {
        padding-block: 0 !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content :is(div, li):not([data-submenu-reveal="slide"] *) {
        flex-wrap: nowrap !important;
        min-block-size: 0 !important;
    }

    [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
        opacity: 1;
        transition: opacity 0.25s 0.25s ease;
    }

    /* EXPAND MEGA MENU DROP DOWN -- MODULAR*/

    [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content {
        display: grid !important;
        grid-template-rows: 0fr;
        grid-template-columns: 1fr;
        transition: 0.3s ease-in-out;
        overflow: hidden;
        position: static;
        visibility: visible;
        opacity: 1;
    }

    [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
    }

    [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content> :is(div, li) {
        padding-block: 0 !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content :is(div, li) {
        flex-wrap: nowrap !important;
        min-block-size: 0 !important;
    }

    [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
        opacity: 1;
        transition: opacity 0.8s 0.25s ease;
    }

    /* HIDE TOP CLOSE BAR */
    [data-hide-close-bar='true'] .dwc-nest-menu-top {
        display: none;
    }



    /* hide close button, bring main hamburger to front */

    .dwc-nest-menu .brxe-toggle {
        position: relative;
    }

    [data-mobile-top-transparent="true"]:not(:has(.brxe-dropdown.open)) .brxe-toggle[aria-label="Open Menu"] {
        z-index: 9999;
    }

    [data-show-toggle-always="true"] .brxe-toggle[aria-label="Open Menu"] {
        z-index: 9999;
    }

    .dwc-nest-menu:not([data-mobile-top-transparent="true"], [data-below-header="true"]) .brxe-toggle[aria-label="Close Menu"] {
        display: grid;
        place-items: center;
        height: 100%;
    }

    .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown>.brx-dropdown-content {
        transform: unset;
    }

    .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.open>.brx-dropdown-content {
        transform: unset;
    }

    .dwc-stripe-style .dwc-nest-header::after,
    .dwc-stripe-style .dwc-nest-header::before {
        display: none !important;
    }


    /* builder */
    [data-builder-mode] .dwc-nest-menu-top {
        min-block-size: 80px !important;
    }

    [data-builder-mode] .dwc-nest-nav-items {
        overflow-y: scroll;
    }

    /* in builder ends*/

    /*==========RTL=============*/

    [dir=rtl] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="right"]) .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        transform: translateX(-100%);
    }

    [dir=rtl] nav:not(.brx-open, [data-slide-in-direction="right"]) .dwc-nav-wrapper {
        transform: translateX(-100%);
    }

    [dir=rtl] .bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
        transform: rotate(-270deg);
    }

    /* ================== BRICKS RESET LAYER ========================== */

    @layer bricks.reset {

        /* multilevel dropdown slide in */


        .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .brx-header-left *, .brx-header-right *),
        .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) {
            inset-inline-start: 100% !important;
        }

        [dir=rtl] .bricks-is-frontend [data-slide-in-direction="right"][data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu), .open) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
        [dir=rtl] .bricks-is-frontend [data-slide-in-direction="right"][data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content {
            inset-inline-start: -100% !important;
        }

        .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction^="left"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .brx-header-left *, .brx-header-right *),
        .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) {
            inset-inline-start: -100% !important;
        }

        /*sidebar*/
        .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu, .open)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .-brx-header-left *, .-brx-header-right *),
        .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) {
            inset-inline-start: 100% !important;
        }





        .bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
        .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
        .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
            inset-inline-start: 0 !important;
        }


        .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction^="left"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
        .bricks-is-frontend [data-slide-in-direction^="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
        .bricks-is-frontend [data-slide-in-direction^="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
            inset-inline-start: 0 !important;
        }

        /*sidebar*/
        .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-nav-nested .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
        .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
        .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
            inset-inline-start: 0 !important;
        }

        .brx-closing.brxe-nav-nested .brx-nav-nested-items {
            opacity: 1 !important;
        }

        .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items {
            opacity: unset !important;
            visibility: unset !important;
        }

    }

    /* ================== END BRICKS RESET LAYER ========================== */

}


/* END MEDIA QUERY*/



@media (min-width: 640px) and (max-width: 1200px) {

    /* ================== BRICKS RESET LAYER ========================== */

    @layer bricks.reset {

        /*special mobile style on tablet */

        .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
        .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {

            inset-inline-start: auto !important;
            inset-inline-end: -100% !important;
        }

        .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
        .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
        .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
            inset-inline-end: 0% !important;
            inset-inline-start: auto !important;
        }



    }

    /* ================== END BRICKS RESET LAYER ========================== */
}

/* END MEDIA QUERY*/
@media (min-width: 1201px){
  .dwc-mobile header{
      display: none;
  }  
  
  @layer bricks.reset{
.brx-dropdown-content:not(.brx-submenu-positioned) {
    display: flex!important;
}
}

  
  /* CENTERED LOGO*/

  /*force center align for centered logo menu */

.dwc-nest-header__container.dwc-logo-is-centered {
    justify-content: center;
}
  
  .dwc-logo-is-centered .dwc-nest-menu .brx-nav-nested-items{
  justify-content: center;
}


/*remvoe bricks default margin left*/
#brx-header .dwc-logo-is-centered .dwc-nest-menu li:not(.brx-dropdown-content *){
  
    margin-inline: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* prevent logo from shrinking on sceen resize*/
#brx-header .dwc-logo-is-centered .dwc-header-logo-item{
   flex-shrink: 0;
} 

.dwc-center-guide {
  background-color: rgba(132, 255, 0, 0.32);
  position: fixed;
  top: 0;
  bottom: 0;  
  align-self: center;
  height: 100dvb;
  z-index: 9999;
  pointer-events: none;
}
  
  body:not(:has([data-fix-centered-logo-fouc="true"])) .dwc-center-guide::before {
    content: 'To fix FOUC on the header, Go to Header Pro div > Attribute > data-fix-centered-logo-fouc, set the value to "true"';
    position: absolute;
    top: 30vh;
    padding: 1rem;
   background-color: white;
 
}

.dwc-logo-is-centered .dwc-menu-wrap{
  inline-size:100%
}


  
  .dwc-nest-header .brx-nav-nested-items {    
    transition-property: opacity,transform;   
}
  
  body.adaptive-height-active:has([data-fix-centered-logo-fouc="true"]):not(:has(.dwc-logo-is-centered))::before {
    content: 'Go to the Header Pro section > Attribute > data-fix-centered-logo-fouc, remove the value "true" OR enable Centered Logo';
}
  

}

/*=======================================  MIN WIDTH MEDIA QUERY ENDS  ==============================================================*/

  body:has([data-overlay-header="true"]) .dwc-nest-menu-overlay {   
    inset-block-start: 0 ;  
}

/*fix centered logo fouc*/
  html:not(.dwc-mobile)  .bricks-is-frontend header:has([data-fix-centered-logo-fouc="true"]):not(.desktop-centered header) {
    opacity: 0;
}



/*end fix fouc*/

.dwc-adaptive-height:not(.dwc-stripe-style){
    --dropdown-content-gap: 0 
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content){
  inset-inline-start: 0 !important;
}



html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content .brx-dropdown-content:not(.brx-sub-submenu-overflow-right, .brx-submenu-overflow-right){
inset-inline-start: 100% !important;
}


html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{
    min-inline-size: var(--multilevel-dropdown-width) !important;    
}

html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content{ 
  box-shadow: var(--dropdown-content-shadow);
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content > *{ 
  max-block-size: calc(95dvb - calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin !important;
}


.dwc-nest-menu[data-submenu-reveal="expand"] .brx-nav-nested-items > .brxe-dropdown:not([data-submenu-reveal="slide"], .brx-has-megamenu)  > .brx-submenu-toggle {
transform: translateY(0);
z-index: 9999;
}


:is([data-submenu-reveal="expand"][data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content,
:is(.brx-header-right, .brx-header-left) [data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{
inset-block-start: 0;
transition: 0s;
min-inline-size: var(--mobile-menu-width);
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner:before {   
block-size: var(--open-icon-line-height);
inset-inline-end: var(--open-icon-align);       
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:before {   
inline-size: var(--open-icon-size);      
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):before {   
inset-block-start: calc(var(--icon-line-gap) * -1); 
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):after {   
inset-block-end: calc(var(--icon-line-gap) * -1); 
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner{
block-size: var(--open-icon-line-height);
inset-inline-end:  var(--open-icon-horizontal-offset);      
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner{
inline-size:var(--iw);    
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner:after {   
block-size: var(--open-icon-line-height);
inset-inline-end:  var(--open-icon-align);
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:after {   
inline-size: var(--aw);
}


.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:after, 
.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner {
    inline-size: calc(var(--iw) * var(--open-icon-close-offset));
}


.dwc-nest-toggle--open.brxa--vortex .brxa-wrap{
inline-size: var(--open-icon-size)
}

.dwc-nest-menu .brxa-inner, 
.dwc-nest-menu .brxa-inner:after, 
.dwc-nest-menu .brxa-inner:before{
background-color: var(--menu-toggle-clr)
}

.dwc-nest-menu.brxe-nav-nested .brxe-toggle[aria-label="Close Menu"] i{
color: var(--menu-close-toggle-clr)
}

.dwc-nest-menu .brxa-wrap:hover .brxa-inner,
.dwc-nest-menu .brxa-wrap:hover .brxa-inner:after, 
.dwc-nest-menu .brxa-wrap:hover .brxa-inner:before {
background-color: var(--menu-toggle-hover-clr) !important
}

/* icon animation */

.dwc-nest-toggle--open.brxa--vortex .brxa-inner {
transition-duration: .3s;
transition-timing-function: ease-in-out;
}

.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner {
transform: rotate(225deg);
transition-timing-function: ease-in-out;
}

.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:before {
opacity: 0;
inset-block-start: calc(var(--icon-line-gap) * -1);
inline-size: 0px !important;   
}

.dwc-nest-toggle--open .brxa-inner:before {
transition-duration: 0.25s;
transition-property: inline-size, tansform !important;

}



/* MENU ITEMS SPACING AND COLOR*/
/* Shared styles for both menu types */
.dwc-nest-menu .brx-nav-nested-items > li > a:not(.dwc-nest-menu__logo),
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
font-weight: var(--menu-item-font-weight);
font-size: var(--menu-item-font-size);
color: var(--menu-item-clr);
background-color: var(--menu-item-bg);
inline-size: 100%;
}

.dwc-nest-menu .brx-dropdown-content > .brxe-dropdown > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
  --menu-item-font-size: var(--dropdown-item-font-size)
}

/* Specific padding for nested menu items */
.dwc-nest-menu .brx-nav-nested-items > li > a,
.dwc-nest-menu .brx-nav-nested-items > li.brx-has-megamenu .brx-submenu-toggle {
padding-block: var(--menu-item-block-padding);
padding-inline: var(--menu-item-inline-padding) !important;
}

/* Specific padding for dropdown items */

.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
  padding-block: var(--dropdown-item-block-padding);
  padding-inline: var(--dropdown-item-inline-padding) !important;
}

.dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle{
padding-block: var(--dropdown-item-block-padding);
  padding-inline: var(--dropdown-item-inline-padding) !important;
}

.dwc-nest-menu .brx-nav-nested-items > li:not(.brx-has-megamenu) .brx-submenu-toggle:not(.brxe-dropdown li .brx-submenu-toggle){
padding-block: var(--menu-item-block-padding);
  padding-inline: var(--menu-item-inline-padding) !important;

}
/* .dwc-nest-menu .brx-dropdown-content > .menu-item > a,
.dwc-nest-menu .brx-nav-nested-items > li:not(.brx-has-megamenu) .brx-submenu-toggle {
padding-block: var(--dropdown-item-block-padding);
padding-inline: var(--dropdown-item-inline-padding) !important;
} */

.dwc-nest-menu .brx-dropdown-content > .menu-item > a:not([aria-current="page"], li:hover > *),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *, li:hover > *, .open.active *) {
color: var(--dropdown-item-clr) !important;
}


/* DROPDOWN MENU ITEMS BG COLOR */
.dwc-nest-menu .brx-dropdown-content > .menu-item > a:not(.brx-has-megamenu a),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *) {
background-color: var(--dropdown-item-bg)
}

/* DROPDOWN BG COLOR */
.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
background-color: var(--dropdown-content-bg);
}

/* HOVER STYLES */
.dwc-nest-menu .brx-nav-nested-items > li:hover > a,
.dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item:hover > a {
color: var(--menu-item-hover-clr);
background-color: var(--menu-item-hover-bg)
}

.dwc-nest-nav-dropdown-link:hover {
color: var(--menu-item-hover-clr);
}

.dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):hover::before,
body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):focus-visible::before,
.dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle::before,
body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li:focus-within > .brx-submenu-toggle::before{
    content: '';
    background-color: var(--menu-item-hover-border-bg);
    inline-size: 100%;
    block-size: var(--menu-item-hover-border-height);
    position: absolute;
    inset-block-start: calc(100% - var(--menu-item-hover-border-height));
    inset-inline-start: 0;
}

.dwc-nest-menu .brx-nav-nested-items > li.menu-item:has(> a),
.dwc-nest-menu .brx-nav-nested-items > li.menu-item:has(> .brx-submenu-toggle) {
   position: relative; 
}

/* ACTIVE STYLES */
/* links and dropdwon active styles */
.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, li:hover > a, a:hover, .dwc-nest-menu__logo, 
[data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, 
[data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, 
[data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a),
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)):not(li:hover) > .brx-submenu-toggle {
color: var(--menu-item-active-clr);
background-color: var(--menu-item-active-bg);
}

.dwc-nest-menu .brx-nav-nested-items .brx-submenu-toggle > a[aria-current="page"]{   
  background-color: initial !important;  
}

.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, .dwc-nest-menu__logo),
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle{
  position: relative;
}

.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, [data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, 
[data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, 
[data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo, .brx-submenu-toggle > a)::before,
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)) > .brx-submenu-toggle::before{
  content: '';
  background-color: var(--menu-item-active-border-bg);
  inline-size: 100%;
  block-size: var(--menu-item-active-border-height);
  position: absolute; 
  inset-block-start: calc(100% - var(--menu-item-active-border-height));
  inset-inline-start: 0;  
}

.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)) > .brx-submenu-toggle > :is(a:not(.dwc-nest-menu__logo), svg, button, span){
color: var(--menu-item-active-clr);
}


/* DROPDOWN HOVER BG */
.dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle:not(.brx-has-megamenu *), 
.dwc-nest-menu .brx-dropdown-content > li:hover > a:not(.brx-has-megamenu a){
background-color: var(--dropdown-item-hover-bg) ;
color: var(--dropdown-item-hover-clr);
}


.dwc-nest-menu.brxe-nav-nested .brx-submenu-toggle {
justify-content: space-between;
}

/* DROPDOWN INDENT */

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"])
.brxe-dropdown:not(.brx-has-megamenu) > 
.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) {
padding-inline-start: var(--dropdown-indent) !important;
padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
border-left: var(--dropdown-indent-line);  
background-color: var(--dropdown-indent-bg)
}

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"]) 
.brxe-dropdown:not(.brx-has-megamenu) > 
.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) > * > :is(a, .brx-submenu-toggle){
padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
}

/* :is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"]) 
.open.active.brxe-dropdown > .brx-submenu-toggle{
background-color: var(--dropdown-expanded-bg);
color: var(--dropdown-expanded-clr);
} */

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"]) 
.open.active.brxe-dropdown > .brx-submenu-toggle svg:not(.open.active.brxe-dropdown:hover > .brx-submenu-toggle svg){
color: var(--dropdown-expanded-clr);
}


/* MENU ITEMS COLOR */
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle :where(span, a, svg) {
color: inherit;
font-weight: inherit;
} 

/* CHEVRON */
.dwc-nest-menu .brx-nav-nested-items > li:not(li:has([aria-current="page"]:not(.dwc-exclude)), li:hover) .brx-submenu-toggle svg{
color: var(--chevron-clr);
}

.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle svg{
  font-size: var(--chevron-size);
  color: var(--chevron-clr);
  }
  .dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)) > .brx-submenu-toggle svg,
.dwc-nest-menu .brx-nav-nested-items  li:hover > .brx-submenu-toggle svg{  
  color: var(--chevron-hover-clr);
  }

[data-align-dropdown-top="true"] .brx-dropdown-content .brxe-dropdown { 
position: static;   
}

.brx-dropdown-content:not(.brx-has-megamenu .brx-dropdown-content) {
padding-inline-end: 0 !important;
}


/*OVERLAY*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) :is(.brxe-code, .dwc-nest-menu-overlay),
body:has([data-hide-overlay="true"]) .dwc-nest-menu-overlay,
[data-builder-mode] .dwc-nest-menu-overlay {
display: none;
}

.bricks-is-frontend #brx-header .dwc-nest-menu[data-offcanvas="true"]:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
visibility: hidden;
}

/* builder */

[data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top {
min-block-size: 80px !important;
}



/* ===========DESKTOP ONLY ============== */

:is( html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"]) [data-mobile-top-transparent="true"]) :is(.dwc-nest-menu-top:not([data-below-header="true"] *, :has(.open.active)), 
.dwc-nav-wrapper:not([data-below-header="true"] *, :has(.open.active))) {
  background-color: transparent !important;
}


html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"])[data-last-item-is-button="true"]) :is(.dwc-menu-wrap, .dwc-nest-menu){
inline-size: 100%;
}

html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type){
margin-inline-start: auto;
}

html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type) {
margin-inline-start: auto;
}

html:not(.dwc-mobile) .dwc-nest-tooltip {
    display: none !important;
    clip: rect(1px,1px,1px,1px);
    word-wrap: normal!important;
    border: 0;
    clip-path: inset(50%);
    height: 1px !important;
    margin: -1px;
    overflow: hidden;
    overflow-wrap: normal!important;
    padding: 0 !important;
    width: 1px;
}


html:not(.dwc-mobile)  .open:has(.open) .open:has(.brxe-dropdown:hover) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *, [data-offcanvas="true"] *)  {
box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 30%);
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right) .brxe-nav-nested .brxe-dropdown.open>.brx-dropdown-content {
  display: flex;
  min-width: auto;
  opacity: 1;
  overflow-y: auto;
  position: static;
  visibility: visible;
  
}

/* EXTEND DROPDWON BUTTON TO AVOID LOSING FOCUS/CLOSING ON DROPDOWN CONTENT */


html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open .brx-dropdown-content .brxe-dropdown:has( > .brx-sub-submenu-overflow-right):hover::after {
    inset-inline-end: 100%;
    inset-inline-start: auto;
}

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:not(.brxe-dropdown:has( > .brx-sub-submenu-overflow-right)):hover::after {   
   inset-inline-start: 100%;
}


html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:hover::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    block-size: 100%;
    inline-size: 100%;
    z-index: -1;
 inset-inline-end: auto;
}


/*DIM DROPDOWN PARENT WHOSE CHILD DROPDOWN CONTENT IS SHOWING  */
html:not(.dwc-mobile) .open:has(.open) >  .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--dropdown-inactive-overlay);
pointer-events: none;
border-radius: var(--dropdown-content-border-radius);
z-index: 1;
}

html:not(.dwc-mobile) .open:has(.open) >   .brxe-dropdown:not(.open, .brx-header-left *, .brx-header-right *){
    position: static;
}
html:not(.dwc-mobile) .open:has(.open) > .brxe-dropdown:not(.open, .brx-header-left *, .brx-header-right *) > ul{
    opacity: 0;
    transition: 0s
}

html:not(.dwc-mobile) .brxe-dropdown.open:not(.brx-has-megamenu, .brx-header-left *, .brx-header-right *){   
     z-index: 1; 
}

/* LAST BUTTON LEFT PADDDING ON DESKTOP */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
padding-inline-start: var(--menu-item-inline-padding);
}

/* hide toggle with back button appears */
html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Open Menu"] {
z-index: 1;
}

/* fades in close button when the main toggle is covered by the back button */
html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Close Menu"]:not([data-submenu-reveal="expand"] *){
opacity: 1;
}

html:not(.dwc-mobile) [data-mobile-top-transparent="true"][data-offcanvas="true"]:not([data-show-mobile-logo="true"]) .brxe-toggle[aria-label="Close Menu"] {
opacity: 0;
}

html:not(.dwc-mobile) [data-show-mobile-logo="true"] .dwc-nav-wrapper{
  z-index: 9999
  }

html:not(.dwc-mobile) [data-offcanvas="true"].dwc-nest-menu .brxe-toggle {
display: flex;
}

/* STRIPE STYLE */
html:not(.dwc-mobile) .dwc-stripe-style .brxe-dropdown.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) {
background: transparent !important;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle),
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > a,
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > button {
cursor: default;
}

/* handles translate and opacity animation for stripe style on desktop */
/*
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * {
transform: translateX(0);
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * {
transition: transform 0.4s, opacity 0s 0.15s;
opacity: 1;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * {
transition: transform 0.4s, opacity 0s;
opacity: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open + .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * {
transform: translateX(5%);
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu:has(+ .brx-has-megamenu.open) .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * {
transform: translateX(-5%);
}
*/

/* handles translate and opacity animation for stripe style on desktop - NEW */
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{
transform: translateX(0);
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{
transition: transform 0.4s;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open + .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{
transform: translateX(50px);
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu:has(+ .brx-has-megamenu.open) .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{
transform: translateX(-50px);
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * {   
    overflow-x: hidden;
}


/* mobile logo */
html:not(.dwc-mobile) .dwc-nest-menu__mobile-logo:not([data-offcanvas="true"]:not(.brx-header-left *, .brx-header-right *) .dwc-nest-menu__mobile-logo) {
display: none;
}


/* prevent fouc when offcanvas is enabled and anime height */
body.bricks-is-frontend:has([data-offcanvas="true"])
.dwc-nav-wrapper:not(.sidebar-ready .dwc-nav-wrapper){
display: none;
}

.dwc-mobile [data-hide-close-bar = 'true'] .dwc-nav-wrapper{
inset-block-start: var(--dwc-nest-header-height) 
}

:is(.brx-header-left, .brx-header-right) .dwc-nest-header::before{
display: none;
}

/* mobile menu from top behind header */
.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-match-overlay-header-width="true"]) .dwc-nav-wrapper:has(.brxe-dropdown.open.active) {
  z-index: unset !important;
}

.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper {
z-index: -1;
}

.dwc-mobile .dwc-nest-header__container:has(:is([data-slide-in-direction="top"], [data-slide-in-direction="top left"])) {
  background-color: var(--header-bg)
}

/************************************
MENU HEIGHT/ STRIPE STYLE
************************************/

:is([data-builder-mode], .brx-header-right, .brx-header-left) .dwc-nest-header::after,
body:has([data-offcanvas="true"]) .dwc-nest-header::after {
display: none;
}

.dwc-nest-header:not(:is(.dwc-adaptive-height, .dwc-stripe-style) .dwc-nest-header)::after{
display: none;
}


html:not(.dwc-mobile) .dwc-nest-header::after {
  display: none;
  content: '';
  min-block-size: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  transition-delay: 0.1s !important;
  pointer-events: none;
  transition: inline-size 0.2s,
    block-size 0.2s,
    opacity 0.2s,
    inset-inline-start 0.2s,
    transform 0.2s !important;
  will-change: block-size, inline-size, inset-inline-start, transform, opacity;
  contain: layout paint;
  z-index: -1;
}

html:not(.dwc-mobile) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after {
  position: fixed;
}

html:not(.dwc-mobile) .dwc-adaptive-height:not(.dwc-stripe-style) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after {
  inset-block-start: 0;
}

html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"])::after {
  position: absolute;
  inset-block-end: calc(100% - var(--dwc-nest-header-height));
  block-size: 1000px;
  transform: translateY(calc(var(--dropdown-menu-height) * 1.01)) translateZ(0);
}


html:not(.dwc-mobile) .adaptive-height-active:is(.dwc-stripe-style, .dwc-adaptive-height) .dwc-nest-header::after {
  display: block;
}

.dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.show-nav .brx-dropdown-content, [data-builder-mode] .brx-dropdown-content){
  display:none
}

html:not(.dwc-mobile) body:has(.brx-has-megamenu.open) .dwc-nest-header::after {
transition-delay: 0s !important;
}

/* STRIPE STYLE */
html:not(.dwc-mobile) .dwc-stripe-style.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content),
html:not(.dwc-mobile) .dwc-adaptive-height.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transition-delay: 0s;
box-shadow: none !important;
transition-duration: 0s;
}

html:not(.dwc-mobile) .dwc-stripe-style.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
overflow-x: hidden;
}

html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content),
html:not(.dwc-mobile) .dwc-adaptive-height .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transition-delay: 0.1s;
transition-duration: .2s;
}


html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu:not([data-offcanvas="true"] .brx-has-megamenu)::before {
    content: '';
    position: absolute;
    inset-block-start: 100%;
    block-size: calc(var(--dwc-nest-header-height)* 0.5);
    inline-size: min(var(--dropdown-menu-width), 40vw);
    transform: translateX(-50%);
    inset-inline-start: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
overflow-x: hidden;
border-radius: var(--stripe-border-radius);
}


html:not(.dwc-mobile) .dwc-nest-header {
position: relative;
}

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::before {
content: '';
inline-size: calc(max(var(--dropdown-content-gap) + 2.5px, 16px) * 1.1);
block-size: calc(max(var(--dropdown-content-gap) + 2.5px, 16px) * 1.1);
background-color: var(--adaptive-height-bg);
position: absolute;
inset-block-start: 100%;
transition: 0s;
transition-property: inset-inline-start, transform, opacity;
inset-inline-start: var(--navlink-midpoint);
transform: translateX(-50%) rotate(45deg) translateY(calc(50% + 0px));
pointer-events: none;
border-top: var(--adaptive-height-border);
border-left: var(--adaptive-height-border);
z-index: 999;
}

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header:has(.brxe-dropdown.brx-has-megamenu.open:hover)::before {
  transition: 
    opacity 0.2s 0.1s, 
    transform 0.2s 0s,
  inset-inline-start 0.2s 0s;
}

html:not(.dwc-mobile) .dwc-nest-header::before{
opacity: 0 ;
}

html:not(.dwc-mobile) .dwc-nest-header.hide-menu-animation::after {
  opacity: 0 !important;
  }

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header.show-menu-animation:has(.brx-has-megamenu:hover)::before,
html:not(.dwc-mobile) .dwc-nest-header.show-menu-animation::after {
opacity: 1;
}

html:not(.dwc-mobile) .dwc-nest-header.show-menu-animation::after {
  box-shadow: var(--adaptive-height-shadow)
  }


html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
border: var(--adaptive-height-border);
}




html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
inset-inline-start: calc(var(--dropdown-menu-x) - 2.5rem);
inline-size: calc(var(--dropdown-menu-width) + 5rem);
transform: unset;
inset-block-start: calc(var(--dwc-nest-header-height) + max(var(--dropdown-content-gap), 16px));
block-size: var(--dropdown-menu-height);
z-index: 1;
opacity: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style:has(.brx-has-megamenu.open):not(:has([data-optimize-stripe=true])) .dwc-nest-header::after {
block-size: calc(var(--dropdown-menu-height) + 0rem) !important;
opacity: 1;
}

/* hide nav content until js is ready*/
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu>.brx-dropdown-content:not(.show-nav .brx-dropdown-content, [data-offcanvas="true"] .brx-dropdown-content) {
opacity: 0;
}



body:has(.brx-has-megamenu.open) .sticky .dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
}

body:has(.brx-has-megamenu.open) .brx-sticky .dwc-nest-header::after {
  background-color: var(--adaptive-height-bg) !important;
  }

.dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
opacity: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
inset-inline-start: calc(var(--dropdown-menu-x) - 1.5px);
inline-size: calc(var(--dropdown-menu-width) + 2.5px);
/*transform: unset;*/
block-size: calc(var(--dropdown-menu-height) + 3px) !important;
z-index: 1;
border-radius: var(--stripe-border-radius);
transform: translateZ(0);
opacity: 1
}


html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
border: var(--adaptive-height-border);
}


html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style:has([data-optimize-stripe=true]) .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transform: translateY(16px) !important; 
inset-block-start: 100%;
}


.dwc-nest-header:not(.show-nav .dwc-nest-header)::after {
display: none;
}

/* STRIP FIX FOR DYNAMIC NAV  */
html:not(.dwc-mobile) 
:not(.brx-header-left, .brx-header-right).dwc-stripe-style:has([data-optimize-stripe=true]) 
.brx-nav-nested-items> li > .brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
    transform: translateY(max(calc(var(--dropdown-content-gap) + 2.5px), 17px)) !important;
    inset-block-start: 100%;   
}


html:not(.dwc-mobile) .dwc-stripe-style .show-menu-animation .dwc-nest-header:has(.brx-has-megamenu:hover)::before, 
html:not(.dwc-mobile) .show-menu-animation::after {
    opacity: 1;
}

html:not(.dwc-mobile) .hide-menu-animation .dwc-nest-header::after {
    opacity: 0 !important;
}

html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
     block-size: calc(var(--dropdown-menu-height) + 6px) !important; 
}


/****************
MENU OVERLAY
***************/

.dwc-nest-menu-overlay {
position: fixed;
inline-size: 100%;
block-size: 100%;
inset-inline-start: 0;
inset-block-end: 0;
background: var(--nav-overlay-backdrop-clr) !important;
z-index: 2;   
opacity: 0;
transition: 0.4s;
backdrop-filter: blur(var(--nav-overlay-backdrop-blur));
}

html:not(.dwc-mobile) .dwc-nest-header:has(.dwc-nest-menu-overlay) .brxe-nav-nested{
    z-index: 3
}

[data-overlay-header=true].dwc-nest-header .dwc-nest-menu-overlay{
    display: none;
} 

body:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay  {
  inset-block-start: var(--dwc-nest-header-height);
}

.logged-in:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay:not(:has(+ .x-header)) {
  inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px));
  }

body:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"], [data-overlay-on-header="true"]) .dwc-nest-menu-overlay  {
  inset-block-start: 0 !important;
}








.dwc-nest-menu-overlay {
pointer-events: none;
}

.no-scroll .dwc-nest-menu-overlay {
opacity: 1;  
}

:is(.brx-header-right, .brx-header-left) .dwc-nest-header__container {
padding-inline: 0
}



/*fade in back button*/
@-webkit-keyframes dwc-nest-fade-in {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}
@keyframes slide-in-right {
0% {
  opacity: 0;
}
100% {   
  opacity: 1;
}
}

/* configurable menu and submenu slide out speed */
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper),
.bricks-is-frontend :is([data-submenu-reveal="slide"][data-offcanvas="true"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper),
:is(.bricks-is-frontend.brx-header-right, .bricks-is-frontend.brx-header-left) :is([data-submenu-reveal="slide"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper){
transition-duration: calc(0.5s / var(--slide-out-speed)) !important;    
}

#brx-header{
--content-gap: 0;
--at-container-gap: 0;
}


/* overlay header */
html:not(.dwc-mobile) .bricks-is-frontend 
#brx-header:has([data-overlay-header = "true"]) {
padding: var(--overlay-header-inset);  
}

html:not(.dwc-mobile) .bricks-is-frontend 
#brx-header:has([data-overlay-header = "true"]):not(.sticky, .brx-sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0; 
}

html:not(.dwc-mobile) .bricks-is-frontend #brx-header > 
.dwc-nest-header[data-overlay-header = "true"]{
border-radius: var(--overlay-header-radius);
background-color: var(--overlay-header-bg);
box-shadow: var(--overlay-header-shadow);
max-inline-size: var(--overlay-header-width);
}


html:not(.dwc-mobile) .bricks-is-frontend #brx-header > 
.dwc-nest-header[data-overlay-header = "true"]:not(:has([data-offcanvas="true"])){
backdrop-filter: blur(var(--overlay-header-blur));
}


html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has(.open) > 
.dwc-nest-header[data-overlay-header = "true"]{
background-color: var(--overlay-header-bg-active) !important;
}

/* overlay on mobile */
.dwc-mobile .bricks-is-frontend 
#brx-header:has([data-overlay-header-mobile = "true"]) {
padding: var(--overlay-header-inset);  
}

.dwc-mobile .bricks-is-frontend 
#brx-header:has([data-overlay-header-mobile = "true"]):not(.sticky, .brx-sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0; 
}

.dwc-mobile .bricks-is-frontend #brx-header > 
.dwc-nest-header[data-overlay-header-mobile = "true"]{
border-radius: var(--overlay-header-radius);
background-color: var(--overlay-header-bg);
box-shadow: var(--overlay-header-shadow);
max-inline-size: var(--overlay-header-width);
}

/*offset hero top padding when overlay header is active */
#brx-header:has([data-offset-section-padding="true"]) + main > :is(section, div) {
  padding-block-start: var(--overlay-offset-padding);
}

/* menu height anime on overlay header  */

html:not(.dwc-mobile) .bricks-is-frontend.dwc-adaptive-height:not(.dwc-stripe-style) #brx-header:has([data-overlay-header = "true"]) .dwc-nest-header::after {
border-radius: min(var(--overlay-header-radius), 2em);
inset-block-end: calc(100% + var(--overlay-header-inset));
opacity: 1;    
}

html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style)
#brx-header:has([data-overlay-header = "true"]:not([data-overlay-header-optimize-adaptive-height="true"])) 
.dwc-nest-header.show-menu-animation::after {
    transform: translateY( calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)))) translateZ(0)
}

html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header:has([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]) .dwc-nest-header.show-menu-animation::after {
  block-size: calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)));
}

/* we need to reposition the overlay outside the header */
html:not(.dwc-mobile) .bricks-is-frontend:has( .dwc-nest-menu .open):not(:has([data-offcanvas="true"])) .dwc-nest-menu-overlay{
  opacity: 1;
 }

/*menu items border radius desktop only*/
html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items > li > 
:is(a:not([data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo ), .brx-submenu-toggle){
border-radius: var(--menu-item-radius);
}

html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items {
  gap: var(--menu-items-gap);
}

/* dynamic dropdown conten width and position */

html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) {
  min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;
  inset-inline-start: var(--left-position)!important;
}

html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-dropdown-content {
  border-radius: var(--dropdown-content-border-radius);
}

.dwc-nest-header{
  position: relative;
  z-index: 9999;
  
}

/* optimize multi row header*/
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]{
  --dwc-nest-header-height:var(--fullscreen-mobile-menu-top-height) !important
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
    background-color: var(--mobile-menu-topbar-bg) !important;
   align-items: center !important;
  animation: none !important;
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper{
  z-index: 99999
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top .brxe-toggle {
    display: block;
}


.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]:not([data-hide-mobile-logo="true"]) .dwc-nest-menu__mobile-logo {
    display: flex;
}

/* overlay header on multirow*/
html:not(.dwc-mobile) .dwc-nest-header[data-fullscreen-mobile-menu="true"][data-overlay-header="true"] > div:first-child{
    border-top-left-radius: var(--overlay-header-radius);
   border-top-right-radius: var(--overlay-header-radius);
}

/* BricksExtras support*/

html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:has(.dwc-nest-header){
    position: relative;
    z-index:1;
}

html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:first-child{
    position: relative;
    z-index: 99991;
}




[data-x-overlay]:not([data-x-overlay="none"]) .dwc-nest-header{
background: var(--x-overlay-header-background)!important;
 }

html:not(.dwc-mobile) .brxe-xheaderrow .dwc-nest-header::after {
  block-size: 1000px;
}



/* in builder */
[data-builder-mode] [data-offcanvas="true"] .dwc-nest-toggle--open{
display: none !important;
}

[data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top{
  display: none;
}


:is(.brx-header-left, .brx-header-right) [data-builder-mode] .brx-nav-nested-items,
[data-builder-mode] .brx-open.dwc-nest-menu[data-offcanvas="true"] .brx-nav-nested-items {
  overflow-y: auto;
  scrollbar-width: thin !important;
  justify-content: flex-start !important;
box-shadow: var(--sidebar-shadow);
}


:is(.brx-header-left, .brx-header-right) [data-builder-mode] .dwc-nav-wrapper,
[data-builder-mode] [data-offcanvas="true"] .dwc-nav-wrapper {
  inset-inline-end: auto ;
  inset-inline-start: 0;
}

/* preview dropdown content width in builder*/

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content){
  min-inline-size:var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;  
  transform: translatex(50px);
  border: dotted #00b0f4 2px
}

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content):not([data-hide-instruction="true"])::after{
    content: 'Set dropdown Content width value in dropdown Content ATTRIBUTES > data-content-width, do not add a unit e.g. px. Leave empty to use global content width, set in Nav Nestable ATTRIBUTES > data-global-content-width. | Set alignment in ATTRIBUTES > data-content-align, values: left, right, center. This aligns the dropdown content to the dropdown button, leave empty to align center to the header. aligments are applied on frontend only. | TIP: click here to select dropdown Content';
    position: absolute;
    inset-block-start: 102%;
    color: #e1e1e1;
    font-size: 12px;    
    letter-spacing: 0.5px;
    line-height: 1.5;
    background: #2b2b2b;
    min-block-size: fit-content;
    padding: 1em;
}

/*set alignment for sidebar edit on desktop*/
:is(.brx-header-left, .brx-header-right)[data-builder-mode] .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items,
[data-builder-mode] .dwc-nest-menu.brxe-nav-nested[data-offcanvas="true"] .brx-nav-nested-items {
    justify-content: flex-start !important;
}

[data-builder-mode]:is(.brx-header-left, .brx-header-right)::before {
    content: 'To view sidebar, go to the MENU Styles/Options code block CSS, scroll to the end, and replace all the postid-xxxx in the CSS rules with this template post id';   
}


:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
    content: 'To edit Sidebar, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)';
    position: absolute;    
    padding-inline-start: 20px;
    color: #e1e1e1;
    font-size: 12px;    
    line-height: 1.5;
    background: #2b2b2b;
    min-block-size: fit-content;
    padding: 1em;
    inline-size: 250px;
}

.brx-header-left[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
  inset-inline-start: 100%;
}

.brx-header-right[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
  inset-inline-end: 100%;
}

[data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{
     content: 'To edit in Offcanvas mode, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)';
    position: absolute;
    inset-block-start: 100%;
    padding-block-start: 20px;
    color: #e1e1e1;
    font-size: 12px;    
    line-height: 1.5;
    background: #2b2b2b;
    min-block-size: fit-content;
    padding: 1em;
    inline-size: 250px;
}

@media (max-width: 1200px){
  [data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{
     content: 'To edit in Offcanvas mode, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" ';
    position: absolute;
    inset-inline-start: var(--mobile-menu-width);
    padding-inline-start: 20px;
  }
}

[data-builder-mode] [data-offcanvas="true"]:not(.brx-open) .dwc-nav-wrapper {
    transform: translateX(0);
    visibility: visible;
}

[data-builder-window] [data-last-item-is-button="true"][data-offcanvas="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
  padding-inline: var(--menu-item-inline-padding) !important;
  padding-block: var(--menu-item-block-padding) !important;
}


/* === */

:is(.brx-header-left, .brx-header-right)[data-builder-window]  .brxe-nav-nested .brxe-dropdown .brx-dropdown-content:not(.brx-open .brx-dropdown-content) {
    display: none;
}


:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {   
    scrollbar-width: none;
}


/* stripe style fix*/
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:not(:has([data-offcanvas="true"])) {
    align-items: stretch !important;
  }
  
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .dwc-nav-wrapper,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li > 
  a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo)
  /* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a) */ { 
    height: 100%;
  }
  
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item {
    height: 100%;
    display: flex;
    align-items: center;
  }



/*fix overlay in boxed mode*/
.brx-boxed .dwc-nest-menu-overlay {
    inline-size: var(--boxed-width, 100%);
}

/*wait for stripe style to load before active */
body:is(.dwc-stripe-style, .dwc-adaptive-height):not(.adaptive-height-active, .brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu{
  pointer-events: none;
}


/* LAST CTA BUTTONS */
/* Button styling for FRIST BUTTON*/
:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type a {
    color: var(--menu-cta-clr);
    background-color: var(--menu-cta-bg);
    border-radius: var(--menu-cta-radius) !important;
    padding-inline: var(--menu-cta-inline-padding) !important;
    padding-block: var(--menu-cta-block-padding) !important;
    border: var(--menu-cta-border);
}

:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(1) a:hover {
    color: var(--menu-cta-hover-clr);
    background-color: var(--menu-cta-hover-bg);
}

/* Button styling for second button*/
:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a {
    color: var(--menu-cta-2-clr);
    background-color: var(--menu-cta-2-bg);
    border-radius: var(--menu-cta-2-radius) !important;
    padding-inline: var(--menu-cta-2-inline-padding) !important;
    padding-block: var(--menu-cta-2-block-padding) !important;
    border: var(--menu-cta-2-border);
}

:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a:hover {
    color: var(--menu-cta-2-hover-clr);
    background-color: var(--menu-cta-2-hover-bg);
}

/* Button styling for third button */
[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a {
    color: var(--menu-cta-3-clr);
    background-color: var(--menu-cta-3-bg);
    border-radius: var(--menu-cta-3-radius) !important;
    padding-inline: var(--menu-cta-3-inline-padding) !important;
    padding-block: var(--menu-cta-3-block-padding) !important;
    border: var(--menu-cta-3-border);
}

[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a:hover {
    color: var(--menu-cta-3-hover-clr);
    background-color: var(--menu-cta-3-hover-bg);
}

/* Adjust padding for all variants in desktop mode */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type,
html:not(.dwc-mobile) [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2),
html:not(.dwc-mobile) [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) {
    padding-inline-start: var(--menu-item-inline-padding);
}

/* Center alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type) {
    margin-inline-start: auto;
}

/* Center alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(2), :first-of-type) {
    margin-inline-start: auto;
}

/* Center alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(3), :first-of-type) {
    margin-inline-start: auto;
}

/* Left alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:last-of-type {
    margin-inline-start: auto;
}

/* Left alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(2) {
    margin-inline-start: auto;
}

/* Left alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(3) {
    margin-inline-start: auto;
}

/* General width rule for all button cases and alignments */
html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"]):is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"])) :is(.dwc-menu-wrap, .dwc-nest-menu) {
    inline-size: 100%;
}



/* align dropdown content to bottom */
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:has([data-align-content-bottom="true"]):not(:has([data-offcanvas="true"])) {
  align-items: stretch !important;
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .dwc-nav-wrapper,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li > 
a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo)
/* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a, .dwc-nest-menu__logo)*/ { 
  height: 100%;
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item {
  height: 100%;
  display: flex;
  align-items: center;
}

/* dropdown content gap */
html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content) {
 transform: translateY(calc(var(--caret-size) - var(--dropdown-content-border-size))) scaleX(1) scaleY(1);
}

html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content .brx-dropdown-content{
  transform: translateY(0) scaleX(1) scaleY(1);
}

html:not(.dwc-mobile) .brx-dropdown-content:not(.open .brx-dropdown-content){
    --dropdown-content-border: solid transparent var(--dropdown-content-border-size);
}



html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown.open:not(.dwc-stripe-style .brx-has-megamenu)::after {
    inline-size: calc((var(--dropdown-content-gap) * 1.414) - var(--dropdown-content-border-size));
    aspect-ratio: 1;
    opacity: 1;
    transition: opacity 0.2s 0.1s;
}

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after {
    content: '';
    position: absolute;
    background-color: var(--dropdown-content-bg);
    transform: rotate(45deg);
    inset-block-end: calc((-1 * var(--dropdown-content-gap) - (var(--dropdown-content-gap) * 1.414 / 2.2)) + var(--dropdown-content-border-size));
    inset-inline-start: calc(50% - var(
  --dropdown-content-gap));
    opacity: 0;
}


html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after { 
  border-top: var(--dropdown-content-border);
  border-left: var(--dropdown-content-border);
  z-index: 9999;
  inset-block-end: calc(var(--dropdown-content-gap) * -1.55);

}

html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)  .brx-dropdown-content{
 outline: var(--dropdown-content-border);
} 




/* === ends == */

body:not(.adaptive-height-active) .brxe-dropdown::after{
display: none;
}

/* multi-level dropdwon arrow > */

html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) 
.dwc-nest-menu:not([data-offcanvas="true"])
.brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button 
svg {
  transform: rotate(270deg);
}


/* align dropwdown in builder */

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="left"][preview-alignment="true"]{
left: 0 !important;
right: auto !important;
}

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="right"][preview-alignment="true"]{
left: auto !important;
right: 0 !important; 
}

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content[data-content-align="center"][preview-alignment="true"]{
left: 50% !important;
transform: translatex(-50%) !important;
}


/* BREAKOUT ITEM */
.dwc-nest-menu > [data-breakout-link]:not(.dwc-nest-menu__logo){
      color: var(--menu-cta-clr);
    background-color: var(--menu-cta-bg);
    border-radius: var(--menu-cta-radius) !important;
    padding-inline: var(--menu-cta-inline-padding) !important;
    padding-block: var(--menu-cta-block-padding) !important;
    border: var(--menu-cta-border);   
}

.dwc-nest-menu > [data-breakout-link="before"],
.dwc-nest-menu > [data-breakout-link]:not([data-breakout-link="after"], .dwc-nest-menu__logo){   
  margin-inline-end: var(--cta-breakout-gap);
  margin-inline-start: auto;
}

.dwc-nest-menu > [data-breakout-link="after"]{   
  margin-inline-start: var(--cta-breakout-gap);
  order: 1;
}

.dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]),
.brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]){
inline-size: 100% !important;
}

.dwc-stripe-style .dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]), 
.dwc-stripe-style .brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]) {   
    min-height: var(--header-min-height);
}

.dwc-nest-header__container:has(.brx-nav-nested-items .dwc-nest-menu__logo[data-breakout-link]) { 
  flex-direction: column !important;
  justify-content: center !important;
}


.dwc-nest-menu > [data-breakout-link="after"] + .brxe-toggle[aria-label="Open Menu"]{
    margin-inline-start: auto;
}


/* BREAKIN ITEM */

.dwc-mobile .dwc-nav-wrapper:has([data-breakin]) {
background: linear-gradient(to top, var(--mobile-menu-bg) 0%, var(--mobile-menu-bg) calc(100% - var(--dwc-nest-header-height)), transparent calc(100% - var(--dwc-nest-header-height)), transparent 100%);

}


.dwc-mobile .dwc-nav-wrapper:has([data-breakin]) .breakin-container{
   inline-size: 100%;
}

.dwc-mobile .dwc-nav-wrapper:has([data-breakin="end"]) .breakin-container{
   margin-block-start: auto;
}

html:not(.dwc-mobile) .breakin-container{
display: none;
}



/* ==== DYNAMIC NAV CUSTOM CSS ==== */

[data-builder-mode] .dwc-nest-menu .brx-nav-nested-items > a:not(.dwc-nest-menu__logo){
    font-weight: var(--menu-item-font-weight);
    font-size: var(--menu-item-font-size);
    color: var(--menu-item-clr);
    background-color: var(--menu-item-bg);
    padding-block: var(--menu-item-block-padding);
    padding-inline: var(--menu-item-inline-padding) !important;
  
}


[data-builder-mode] .dwc-nest-menu .brx-dropdown-content > a:not(.brx-has-megamenu a) {
    background-color: var(--dropdown-item-bg);
        padding-block: var(--dropdown-item-block-padding);
    padding-inline: var(--dropdown-item-inline-padding) !important;
        font-weight: var(--menu-item-font-weight);
    font-size: var(--menu-item-font-size);
    color: var(--menu-item-clr);   
    inline-size: 100%;
}

[data-builder-mode] .dwc-nest-menu .brx-dropdown-content > a:hover:not(.brx-has-megamenu a) {
    background-color: var(--dropdown-item-hover-bg);
    color: var(--dropdown-item-hover-clr);
}


body:not([data-builder-mode]) .dwc-nest-menu .brx-nav-nested-items > li:empty{
    visibility: hidden;
}


.dwc-nest-menu .brx-nav-nested-items > * > .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle {
    padding-block: var(--dropdown-item-block-padding);
    padding-inline: var(--dropdown-item-inline-padding) !important;
}

/* ==== END DYNAMIC NAV CUSTOM CSS ==== */



/* CARET FIX FOR DYNAMIC MENU STRUCTURE*/


.dwc-nest-menu .brx-nav-nested-items > 
li> .brx-has-megamenu.open > .brx-dropdown-content {
    opacity: 1;
    visibility: visible;
}

html:not(.dwc-mobile) 
body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) 
.brx-nav-nested-items > li:has(.brx-has-megamenu.open):not(.dwc-stripe-style .brx-nav-nested-items > li)::after {
    inline-size: calc((var(--dropdown-content-gap) * 1.414) - var(--dropdown-content-border-size));
    aspect-ratio: 1;
    opacity: 1;
    transition: opacity 0.2s 0.1s;
}

html:not(.dwc-mobile) 
body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) 
.brx-nav-nested-items > li:has(.brx-has-megamenu):not(.dwc-stripe-style .brx-nav-nested-items > li)::after {
      content: '';
    position: absolute;
    background-color: var(--dropdown-content-bg);
    transform: rotate(45deg);
    inset-block-end: calc((-1 * var(--dropdown-content-gap) - (var(--dropdown-content-gap) * 1.414 / 2.2)) + var(--dropdown-content-border-size));
    inset-inline-start: calc(50% - var(
  --dropdown-content-gap));
    opacity: 0;
}


html:not(.dwc-mobile) 
.bricks-is-frontend:not(.brx-header-left, .brx-header-right) 
.dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) 
.brx-nav-nested-items > li {
    height: 100%;
    display: flex;
    align-items: center;
}

html:not(.dwc-mobile) 
.bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) 
.brx-nav-nested-items > li > .brxe-dropdown > .brx-submenu-toggle,
html:not(.dwc-mobile) 
.bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) 
.brx-nav-nested-items > li > .brxe-dropdown{
height: 100%
    }

.brx-nav-nested-items > li:has(> a),
.brx-nav-nested-items > li:has(> .brx-submenu-toggle) {
    position: relative;
}

/* END CARET FIX FOR DYNAMIC MENU STRUCTURE*/

/* SPECIAL MOBILE STYLES TABLET ONLY */


@media (min-width: 640px) and (max-width: 1200px) {

    /* mega menu */
    .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .dwc-nav-wrapper {
        --mobile-menu-width: min(720px, 100%);
      align-items: flex-end;
    }

    .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
        inline-size: min(400px, 100%);
        box-shadow: 0px 0px 15px -10px #000000b3
    }

     .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        inset-inline-end: 0 !important;
        inset-inline-start: auto !important;
        inset-block-start: 0 !important;
    }

/*dropdown*/


     .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
     .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
        transition-property: inset-inline-start, inset-inline-end, visibility, opacity !important;
        inset-inline-start: auto !important;
        width: 400px;
        box-shadow: 0px 0px 15px -10px #000000b3;
        inset-block-start: 0 !important;
        inset-inline-end: -100% !important;
    }

     .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
     .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
     .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
        inset-inline-end: 0% !important;
        inset-inline-start: auto !important;
    }

  /*active styles*/
   .dwc-mobile  body:not(.brx-header-right, .brx-header-left) [data-mobile-special-style="slide-split"] .brx-nav-nested-items > li > .brx-has-megamenu.open > .brx-submenu-toggle{
    background-color: var(--menu-item-active-bg);
}

 .dwc-mobile  body:not(.brx-header-right, .brx-header-left) [data-mobile-special-style="slide-split"]  .brx-nav-nested-items > li.open > .brx-submenu-toggle{
    background-color: var(--menu-item-active-bg);
}
    

}

/* END SPECIAL MOBILE STYLES TABLET ONLY */


/* OVERLAY HEADER NO TOP GAP */

    .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
        inset-block-start: 0 !important;
        }
        
        .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
             inset-block-start: calc((var(--dwc-nest-header-height) / 2) * -1) !important;
        }
        
        .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle > button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) {
          inset-block-start: calc(var(--dwc-nest-header-height) / 2);
           
        }
        
        .bricks-is-frontend #brx-header > 
        .dwc-nest-header[data-overlay-header-no-top-gap="true"] {
            border-top-left-radius: 0 !important;
            border-top-right-radius: 0 !important;
        }
        
         .bricks-is-frontend 
        #brx-header:has([data-overlay-header-no-top-gap="true"]) {
            padding-block-start: 0 !important;
        }

/* END OVERLAY HEADER NO TOP GAP */


/* DROPDOWN ITEM IS BUTTON OR ICON */

/* IS ICON */
.brxe-dropdown[data-is-icon]{
  padding-inline: var(--menu-item-inline-padding);
}

/* remove the underline */
.brxe-dropdown[data-is-icon] > .brx-submenu-toggle::before{
display: none;
}

/* general styling */
.dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon] > .brx-submenu-toggle{
       height: auto !important;
    width: auto;
  min-width: var(--button-max-diameter);    
    aspect-ratio: 1;
    border-radius: var(--menu-item-radius) !important;
    padding: 0 !important;
    margin-inline-start: auto;
    margin-block: auto;
    transition: 0.4s;
  border: var(--menu-item-border)
}


.dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon]:hover > .brx-submenu-toggle{
  border: var(--menu-item-hover-border)
}

.dwc-mobile .dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon] > .brx-submenu-toggle{
max-width: var(--button-max-diameter);
}


/* centralize */
.brxe-dropdown[data-is-icon] > .brx-submenu-toggle > button{
  margin: auto;
  color: var(--icon-clr);
  font-size: var(--icon-size);
}

.brxe-dropdown[data-is-icon]:hover > .brx-submenu-toggle > button{
  color: var(--icon-hover-clr);
}

/* reset rotation on icon when hovered */
.brxe-dropdown[data-is-icon] > .brx-submenu-toggle button[aria-expanded="true"] > * {
    transform: rotateZ(0deg);
}

/* reset margin left on mobile*/
.dwc-mobile .dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon] > .brx-submenu-toggle{
 margin-inline-start: initial;
}

/* remove inner span from document flow and hide visually*/

.brxe-dropdown[data-is-icon] > .brx-submenu-toggle > span{
      clip: rect(1px,1px,1px,1px);
    word-wrap: normal!important;
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    overflow-wrap: normal!important;
    padding: 0;
    position: absolute!important;
    width: 1px;
}

/* IS ICON ENDS */

/* IS BUTTON */

.brxe-dropdown[data-is-button] > .brx-submenu-toggle{
  height: auto !important;
    margin-block: auto;
  border-radius: var(--menu-item-radius) !important;
    max-width: var(--menu-item-width); 
  border: var(--menu-item-border);
}

.brxe-dropdown[data-is-button]:hover > .brx-submenu-toggle { 
    border: var(--menu-item-hover-border);
}


/* centralize text in span */

.brxe-dropdown[data-is-button] > .brx-submenu-toggle > span{
  margin-inline: auto;
}

/* remove button from document flow to allow text to centralize, but keep accessible*/
.brxe-dropdown[data-is-button="no-chevron"] > .brx-submenu-toggle > button{
      clip: rect(1px,1px,1px,1px);
    word-wrap: normal!important;
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    overflow-wrap: normal!important;
    padding: 0;
    position: absolute!important;
    width: 1px;
}

/* block padding on mobile */
.dwc-mobile .brxe-dropdown:is([data-is-icon], [data-is-button]){  
padding-block: var(--menu-item-block-padding);
 padding-inline: var(--menu-item-inline-padding);
}

/* IS BUTTON ENDS */

/* DROPDWON ITEM IS BUTTON OR ICON ENDS */

/* RTL */

html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) {
   inset-inline-end: var(--right-position)!important;
}

html:not(.dwc-mobile)[dir=rtl] .dwc-stripe-style .open.brx-has-megamenu:not([data-offcanvas="true"] .brx-has-megamenu)::before {
    transform: translateX(50%); 
}

html:not(.dwc-mobile)[dir=rtl] body:not(.brx-header-left, .brx-header-right) 
.dwc-nest-menu:not([data-offcanvas="true"])
.brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button 
svg {
    transform: rotate(-270deg);
}




/*RTL ENDS */


/* FIXES */
.dwc-nest-nav-items > li {
    width: auto;
}

li {
  -webkit-tap-highlight-color: transparent;
}

html:not(.dwc-mobile) #brx-header > *:not(.dwc-nest-header){
    z-index: 99999;
    position: relative;
}

/* account for admn bar on mobile menu */
.dwc-mobile .dwc-nav-wrapper {
    inset-block-start: var(--wp-admin--admin-bar--height, 0px);
}

.dwc-mobile .brxe-nav-nested.brx-open .brx-nav-nested-items {
 top:0;
}

    /* fix safari issue on fixed element inside scrollable container */
 .dwc-mobile .dwc-nest-menu.brxe-nav-nested:not([data-submenu-reveal="expand"]) .brx-nav-nested-items:has(.brxe-dropdown.open.active:not([data-submenu-reveal="expand"])){
        overflow-y: hidden;
    } 


[data-builder-window] .dwc-nest-menu{
  --global-width: attr(builder-preview-content-width px);
}

//document.body.classList.add('adaptive-height-active');
document.body.classList.add('show-nav');

function updateMobileClass(minWidth = MegaMenuCONFIG.minWidth) {
    const classList = document.documentElement.classList;
    const viewportWidth = document.documentElement.clientWidth;
    const isMobile = viewportWidth < minWidth;

    if (isMobile) {
        classList.add('dwc-mobile');
    } else {
        classList.remove('dwc-mobile');
    }
}
updateMobileClass();

// Centered Logo functionality
class CenteredLogoController {
    constructor(config = {}) {
        this.config = {
            enable: config.enable ?? CenteredLogoCONFIG.enable,
            allowOddItems: config.allowOddItems ?? CenteredLogoCONFIG.allowOddItems,
            forceCenteredLogo: config.forceCenteredLogo ?? CenteredLogoCONFIG.forceCenteredLogo,
            centerNudge: config.centerNudge ?? CenteredLogoCONFIG.centerNudge,
            roundOffFactor: config.roundOffFactor || CenteredLogoCONFIG.roundOffFactor,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector
        };

        this.logoListItem = null;
        this.listItems = [];
        this.resizedFinished = null;
        this.isInitialized = false;
    }

    // Method to check if DOM elements are ready
    checkDOMReady() {
        const headerLogo = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`);
        const headerInner = document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`);
        const menu = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`);
        const listParent = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`);

        return headerLogo && headerInner && menu && listParent;
    }

    // Early initialization attempt
    initializeEarly() {
        if (!this.config.enable || this.isInitialized) return;

        // Try immediate initialization if elements are ready
        if (this.checkDOMReady()) {
            document.body.classList.add('dom-ready')
            this.setupElements();
            this.initialize();
            return;
        }

        // If not ready, use polling with shorter intervals for faster response
        const pollForElements = () => {
            if (this.checkDOMReady()) {
                this.setupElements();
                this.initialize();
                return;
            }
            // Poll every 10ms for very fast response
            setTimeout(pollForElements, 10);
        };

        pollForElements();
    }

    setupElements() {
        this.elements = {
            headerLogo: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`),
            headerInner: document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`),
            menu: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`),
            listParent: document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`)
        };
    }

    initialize() {

        if (!this.config.enable || this.isInitialized) {
            return;
        }

        // Ensure elements are set up before proceeding
        if (!this.elements) {
            this.setupElements();
        }

        // Check if all required elements exist
        if (!this.elements.headerLogo || !this.elements.headerInner ||
            !this.elements.menu || !this.elements.listParent) {
            return;
        }

        this.isInitialized = true;

        // Create logo list item
        this.logoListItem = document.createElement('li');
        this.logoListItem.classList.add('dwc-header-logo-item');

        // Get list items excluding those with toggle divs, and exclude empty li
        this.listItems = Array.from(this.elements.listParent.children).filter(item => {
            const hasToggleDiv = item.querySelector('.brx-toggle-div');
            const isEmpty = item.matches('li:empty');
            const hasExclude = item.querySelector('.dwc-exclude')
            return !hasToggleDiv && !isEmpty && !hasExclude;
        });


        // Calculate position
        const halfIndex = this.listItems.length / 2;
        const logoOrder = this.roundHalfIndex(halfIndex, this.config.roundOffFactor);
        this.logoListItem.style.order = logoOrder;


        // Apply centering immediately
        this.centerLogo(logoOrder);



        // Add resize listener
        window.addEventListener('resize', this.centerLogo.bind(this, logoOrder));
    }

    roundHalfIndex(halfIndex, roundOffFactor) {
        if (roundOffFactor === 'before') {
            return Math.floor(halfIndex + 1);
        } else {
            return Math.ceil(halfIndex + 1);
        }
    }

    centerLogo(logoOrder) {
        if (!this.config.allowOddItems && this.listItems.length % 2 !== 0) {
            return;
        }

        clearTimeout(this.resizedFinished);

        this.resizedFinished = setTimeout(() => {
            const isDesktop = window.innerWidth >= MegaMenuCONFIG.minWidth;

            if (isDesktop) {
                document.body.classList.add('desktop-centered')
                let listID = 1;

                // Set order for list items
                this.listItems.forEach(listItem => {
                    if (!listItem.dataset.id) {
                        listItem.dataset.id = listID++;
                    }
                    this.logoListItem.style.order = logoOrder;
                    listItem.style.order = listItem.getAttribute('data-id');
                });

                if (!this.elements.listParent.contains(this.logoListItem) ||
                    !this.elements.listParent.contains(this.elements.headerLogo)) {

                    this.elements.listParent.prepend(this.logoListItem);
                    this.logoListItem.append(this.elements.headerLogo);
                    this.elements.headerInner.classList.add('dwc-logo-is-centered');

                    const logoBounds = this.elements.headerLogo.getBoundingClientRect();
                    const viewportWidth = document.documentElement.clientWidth;
                    const logoWidth = this.elements.headerLogo.offsetWidth;
                    const distanceRight = logoBounds.x;

                    // Force center if needed
                    if (this.config.forceCenteredLogo) {
                        const rightOffset = ((distanceRight + (logoWidth / 2)) + this.config.centerNudge) - (viewportWidth / 2);
                        const offsetMargin = rightOffset * 2;
                        this.elements.menu.style.marginRight = offsetMargin + 'px';
                    }

                    if (CenteredLogoCONFIG.centerGuide) {
                        if (document.body.classList.contains('logged-in')) {
                            // Check if the indicator already exists
                            if (!document.querySelector('.dwc-center-guide')) {
                                const indicatorEl = document.createElement('div')
                                indicatorEl.classList.add('dwc-center-guide')
                                indicatorEl.style.width = this.elements.headerLogo.offsetWidth + 'px';
                                document.body.appendChild(indicatorEl)
                            }
                        }
                    }

                }

            } else {
                document.body.classList.remove('desktop-centered');
                this.elements.headerInner.classList.add('dwc-logo-is-centered');
                this.elements.menu.style.marginRight = null;
                this.elements.headerInner.prepend(this.elements.headerLogo);
                this.logoListItem.style.order = null;
                this.listItems.forEach(listItem => {
                    listItem.style.order = null;
                });
            }
        }, 500);
    }
}

class MenuAnimationController {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle,
            adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight,
            toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip,
            menuAutoExpansion: config.menuAutoExpansion ?? MegaMenuCONFIG.menuAutoExpansion,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            megaMenuLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .brx-has-megamenu`,
            offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`,
            shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor,  // Added shiftFactor
            minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow   // Added minOverflow
        };

        this.megaMenuLinks = document.querySelectorAll(this.config.megaMenuLinksSelector);
        this.header = document.querySelector(this.config.headerSelector);

        this.maxMenuWidth = 0;
        this.maxMenuHeight = 0;
        this.headerTimeoutId = null;
        this.mobileMenuTimeoutId = null;

        this.applyConfigClasses();
    }

    applyConfigClasses() {
        if (MegaMenuCONFIG.stripeStyle) {
            document.body.classList.add('dwc-stripe-style');
        }
        if (MegaMenuCONFIG.adaptiveHeight) {
            document.body.classList.add('dwc-adaptive-height');
        }

        if (this.header) {
            this.header.style.setProperty('--stripe-style-enabled', this.config.stripeStyle ? '1' : '0');
            this.header.style.setProperty('--height-animation-enabled', this.config.adaptiveHeight ? '1' : '0');
        }
    }
    /*
    isAboveMinWidth() {
        return window.innerWidth >= this.config.minWidthThreshold;
    }
    */

    getViewportWidth() {
        // Check if window exists (for SSR/Node environments)
        if (typeof window === 'undefined') return 0;

        return window.innerWidth ||
            document.documentElement?.clientWidth ||
            document.body?.clientWidth ||
            0;
    }

    isAboveMinWidth() {
        return this.getViewportWidth() >= this.config.minWidthThreshold;
    }


    isOffCanvas() {
        return !!document.querySelector(this.config.offCanvasSelector);
    }

    hasHeaderClass() {
        return document.body.classList.contains('brx-header-left') ||
            document.body.classList.contains('brx-header-right');
    }

    updateMenuVariables() {
        if (!this.isAboveMinWidth() || !this.header) return;

        // Cache RTL detection for performance - only check once per method call
        const isRTLLayout = this.isRTL ? this.isRTL() : false;

        let menuOpened = false;
        let menuWidth = 0;
        let menuHeight = 0;
        let menuOffset = 0; // Renamed for direction-agnostic naming

        this.megaMenuLinks.forEach(link => {
            if (link.classList.contains('open')) {
                requestAnimationFrame(() => {
                    let dropdownMenu = link.querySelector('.brx-dropdown-content');
                    let nestHeader = link.closest(this.config.headerSelector);

                    if (dropdownMenu) {
                        // Get dimensions (direction-agnostic)
                        menuWidth = dropdownMenu.offsetWidth;
                        menuHeight = dropdownMenu.offsetHeight;

                        // RTL-aware offset calculation
                        if (isRTLLayout) {
                            // RTL: Calculate offset from right edges
                            // Formula: distance from header's right edge to menu's right edge
                            const headerRect = nestHeader.getBoundingClientRect();
                            const menuRect = dropdownMenu.getBoundingClientRect();
                            menuOffset = (headerRect.right - menuRect.right) + window.scrollX;
                        } else {
                            // LTR: Original left-based calculation (unchanged for backwards compatibility)
                            menuOffset = Number(dropdownMenu.getBoundingClientRect().left) - Number(nestHeader.getBoundingClientRect().left) + window.scrollX;
                        }

                        // Update maximum dimensions (direction-agnostic)
                        this.maxMenuWidth = Math.max(this.maxMenuWidth, menuWidth);
                        this.maxMenuHeight = Math.max(this.maxMenuHeight, menuHeight);

                        // Calculate scaling factors (direction-agnostic)
                        let scaleX = menuWidth / this.maxMenuWidth;
                        let scaleY = menuHeight / this.maxMenuHeight;

                        // Set adaptive height if enabled (direction-agnostic)
                        if (this.config.adaptiveHeight || this.config.stripeStyle) {
                            this.header.style.setProperty('--dropdown-menu-height', `${menuHeight}px`);
                        }

                        // Set stripe-style variables with RTL awareness
                        if (this.config.stripeStyle) {
                            // Position variable - RTL-aware naming and calculation
                            if (isRTLLayout) {
                                // Set RTL-specific position variable
                                this.header.style.setProperty('--dropdown-menu-x-rtl', `${menuOffset}px`);
                                // Also set the standard variable for CSS that expects it
                                this.header.style.setProperty('--dropdown-menu-x', `${menuOffset}px`);
                            } else {
                                // LTR: Use standard left-based positioning
                                this.header.style.setProperty('--dropdown-menu-x', `${menuOffset}px`);
                                // Clear any RTL variable that might exist
                                this.header.style.removeProperty('--dropdown-menu-x-rtl');
                            }

                            // Set dimension and scaling variables (direction-agnostic)
                            this.header.style.setProperty('--dropdown-menu-width', `${menuWidth}px`);
                            this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`);
                            this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`);
                            this.header.style.setProperty('--dropdown-menu-scale-x', scaleX.toString());
                            this.header.style.setProperty('--dropdown-menu-scale-y', scaleY.toString());

                            // Set direction indicator for CSS usage
                            this.header.style.setProperty('--dropdown-menu-direction', isRTLLayout ? 'rtl' : 'ltr');
                        }
                    }
                });

                menuOpened = true;
                this.header.classList.add('show-menu-animation');
                this.header.classList.remove('hide-menu-animation');
            }
        });

        // Handle menu closing (unchanged logic, direction-agnostic)
        if (!menuOpened) {
            const hasAdaptiveHeight = document.body.classList.contains('dwc-adaptive-height');
            const hasStripeStyle = document.body.classList.contains('dwc-stripe-style');

            if (hasAdaptiveHeight && !hasStripeStyle) {
                this.header.style.setProperty('--dropdown-menu-height', '0px');
            }

            this.header.style.setProperty('--dropdown-menu-scale-y', '0');

            if (this.header) {
                this.header.classList.add('hide-menu-animation');
                this.header.classList.remove('show-menu-animation');
            }
        }
    }


    updateDropdownPositions() {
    const viewportWidth = document.documentElement.clientWidth;
    if (viewportWidth < this.config.minWidthThreshold) return; // Run only on desktop

    const dropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content`);
    const defaultElement = document.querySelector('#brx-header');
    const defaultRect = defaultElement ? defaultElement.getBoundingClientRect() : null;
    const isRTL = this.isRTL();

    requestAnimationFrame(() => {
        // Handle vertical positioning (global top or stripe style)
        this.handleVerticalPositioning();

        // Handle width and horizontal alignment positioning
        dropdowns.forEach((dropdown) => {
            this.setDropdownWidth(dropdown);
            this.positionDropdownHorizontally(dropdown, defaultRect, viewportWidth, isRTL);
        });
    });
}

/**
 * Detect if the document is using RTL (Right-to-Left) layout
 */
isRTL() {
    const htmlDir = document.documentElement.dir?.toLowerCase();
    if (htmlDir) return htmlDir === 'rtl';
    
    const computedDirection = getComputedStyle(document.documentElement).direction;
    return computedDirection === 'rtl';
}

/**
 * Handle vertical positioning for dropdowns (global top positioning or stripe style)
 */
handleVerticalPositioning() {
    const nestMenu = document.querySelector('.dwc-nest-menu');
    const globalTopSelector = nestMenu ? nestMenu.getAttribute('data-global-content-vertical') : null;

    if (globalTopSelector) {
        this.positionDropdownsRelativeToElement(globalTopSelector, 'global top element');
    } else if (this.config.stripeStyle) {
        this.positionDropdownsRelativeToElement('#brx-header', '#brx-header bottom (stripe style)');
    }
}

/**
 * Position dropdowns relative to a specified element
 */
positionDropdownsRelativeToElement(selector, description) {
    const targetElement = document.querySelector(selector);
    if (!targetElement) return;

    const positioningDropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content)`);
    const targetRect = targetElement.getBoundingClientRect();

    positioningDropdowns.forEach(dropdown => {
        const menuItem = dropdown.closest('.menu-item') || dropdown.parentElement;
        const menuItemRect = menuItem.getBoundingClientRect();
        
        const topPosition = menuItemRect.height + targetRect.bottom - menuItemRect.bottom;
        dropdown.style.top = `${topPosition}px`;
    });

    // console.log(`Positioned dropdowns relative to ${description}`);
}

/**
 * Set dropdown width based on data attributes or global settings
 */
setDropdownWidth(dropdown) {
    // Check for individual data-content-width attribute first
    const localSelector = dropdown.getAttribute('data-content-width');
    
    if (localSelector) {
        this.applyWidthFromSelector(dropdown, localSelector);
        return;
    }

    // Fall back to global data-global-content-width setting
    const nestMenu = document.querySelector('.dwc-nest-menu');
    const globalSelector = nestMenu ? nestMenu.getAttribute('data-global-content-width') : null;
    
    if (globalSelector) {
        this.applyWidthFromSelector(dropdown, globalSelector);
    }
}

/**
 * Apply width to dropdown based on selector (number, CSS value, CSS variable, or element selector)
 */
applyWidthFromSelector(dropdown, selector) {
    // Check if it's a number or value with CSS units
    if (/^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)?$/i.test(selector)) {
        const hasUnit = /\d+(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)$/i.test(selector);
        const widthValue = hasUnit ? selector : `${selector}px`;
        dropdown.style.setProperty('--dropdown-content-width', widthValue);
    }
    // Check if it's a CSS variable (starts with var( and ends with ))
    else if (/^var\(--[\w-]+\)$/.test(selector)) {
        this.applyWidthFromCSSVariable(dropdown, selector);
    }
    // Treat as element selector
    else {
        this.applyWidthFromElement(dropdown, selector);
    }
}

/**
 * Apply width from CSS variable
 */
applyWidthFromCSSVariable(dropdown, variableSelector) {
    const variableName = variableSelector.match(/^var\((--[\w-]+)\)$/)[1];
    const computedValue = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();

    if (computedValue) {
        const hasUnit = /\d+(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)$/i.test(computedValue);
        const widthValue = hasUnit ? computedValue : `${computedValue}px`;
        dropdown.style.setProperty('--dropdown-content-width', widthValue);
    }
}

/**
 * Apply width from target element
 */
applyWidthFromElement(dropdown, selector) {
    const targetElement = document.querySelector(selector);
    if (targetElement) {
        const targetWidth = targetElement.getBoundingClientRect().width;
        dropdown.style.setProperty('--dropdown-content-width', `${targetWidth}px`);
    }
}

/**
 * Handle horizontal positioning of dropdown with RTL support and overflow management
 * FIXED VERSION - Properly handles RTL overflow prevention
 */
positionDropdownHorizontally(dropdown, defaultRect, viewportWidth, isRTL) {
    const parentLi = dropdown.closest('.brx-has-megamenu.brxe-dropdown');
    if (!parentLi) return;

    const contentAlign = dropdown.getAttribute('data-content-align');
    let actualDropdownWidth = this.getActualDropdownWidth(dropdown);
    const liRect = parentLi.getBoundingClientRect();

    // Constrain width to viewport if dropdown is wider
    if (actualDropdownWidth > viewportWidth) {
        dropdown.style.setProperty('--dropdown-content-width', `${viewportWidth}px`);
        actualDropdownWidth = viewportWidth;
    }

    // Calculate initial position based on alignment and RTL
    let position = this.calculateInitialPosition(dropdown, parentLi, contentAlign, actualDropdownWidth, defaultRect, isRTL);

    // Apply overflow corrections with proper RTL support
    position = this.handleOverflowAdjustments(position, liRect, actualDropdownWidth, viewportWidth, isRTL);

    // Set final position using appropriate CSS property
    if (isRTL) {
        // In RTL, we need to calculate right-based positioning
        const rightPosition = liRect.width - position - actualDropdownWidth;
        dropdown.style.setProperty('--right-position', `${rightPosition}px`);
        dropdown.style.removeProperty('--left-position');
    } else {
        // LTR uses left-based positioning (existing behavior)
        dropdown.style.setProperty('--left-position', `${position}px`);
        dropdown.style.removeProperty('--right-position');
        
        // Fallback for existing CSS that expects --left-position
        if (!dropdown.style.getPropertyValue('--left-position')) {
            dropdown.style.setProperty('--left-position', '0px');
        }
    }
}

/**
 * Get actual dropdown width accounting for CSS transforms
 */
getActualDropdownWidth(dropdown) {
    const computedStyle = getComputedStyle(dropdown);
    const dropdownRect = dropdown.getBoundingClientRect();

    // Extract scale factor from transform
    const transform = computedStyle.transform || computedStyle.webkitTransform;
    let scaleX = 1;

    if (transform && transform !== 'none') {
        const matrix = transform.match(/^matrix\((.+)\)$/);
        if (matrix) {
            const values = matrix[1].split(', ');
            scaleX = parseFloat(values[0]);
        }
    }

    return dropdownRect.width / scaleX;
}

/**
 * Calculate initial dropdown position based on alignment and RTL settings
 * ENHANCED VERSION with improved RTL positioning
 */
calculateInitialPosition(dropdown, parentLi, contentAlign, actualDropdownWidth, defaultRect, isRTL) {
    const validAlignments = ['left', 'center', 'right'];
    const hasValidAlignment = contentAlign && validAlignments.includes(contentAlign);
    const liRect = parentLi.getBoundingClientRect();

    if (!hasValidAlignment) {
        // Default centering behavior
        return this.calculateCenteredPosition(actualDropdownWidth, defaultRect, liRect, isRTL);
    }

    // Apply RTL-aware alignment mapping
    const effectiveAlignment = this.getEffectiveAlignment(contentAlign, isRTL);
    
    // Calculate position relative to parent element
    switch (effectiveAlignment) {
        case 'left':
            return isRTL ? liRect.width : 0;
        case 'right':
            return isRTL ? 0 : (liRect.width - actualDropdownWidth);
        case 'center':
            return (liRect.width - actualDropdownWidth) / 2;
        default:
            return isRTL ? liRect.width : 0;
    }
}


/**
 * Map alignment values for RTL layouts
 */
getEffectiveAlignment(contentAlign, isRTL) {
    if (!isRTL) return contentAlign;
    
    // RTL alignment mapping
    switch (contentAlign) {
        case 'left': return 'right';
        case 'right': return 'left';
        case 'center': return 'center';
        default: return contentAlign;
    }
}


/**
 * Calculate centered position for default alignment
 * ENHANCED VERSION with better RTL support
 */
calculateCenteredPosition(actualDropdownWidth, defaultRect, liRect, isRTL) {
    if (!defaultRect) return isRTL ? liRect.width / 2 : 0;

    const defaultElement = document.querySelector('#brx-header');
    const headerRect = defaultElement ? defaultElement.getBoundingClientRect() : null;

    if (headerRect) {
        const centerOffset = (defaultRect.width - actualDropdownWidth) / 2;
        
        if (isRTL) {
            // RTL: Calculate position relative to parent's right edge
            const headerRightOffset = headerRect.right;
            const liRightOffset = liRect.right;
            return centerOffset - (headerRightOffset - liRightOffset);
        } else {
            // LTR: Calculate position relative to parent's left edge (existing logic)
            const headerLeftOffset = headerRect.left + window.scrollX;
            return centerOffset - (liRect.left - headerLeftOffset);
        }
    }

    return isRTL ? liRect.width / 2 : 0;
}

/**
 * Handle viewport overflow adjustments with proper RTL support
 * COMPLETELY REWRITTEN for accurate RTL edge calculations
 */
handleOverflowAdjustments(position, liRect, actualDropdownWidth, viewportWidth, isRTL) {
    // Calculate edges based on layout direction
    let leftEdge, rightEdge;
    
    if (isRTL) {
        // RTL: position is relative to parent's right edge, calculate absolute edges
        const parentRight = liRect.right;
        rightEdge = parentRight - position;
        leftEdge = rightEdge - actualDropdownWidth;
    } else {
        // LTR: position is relative to parent's left edge (existing logic)
        leftEdge = liRect.left + position;
        rightEdge = leftEdge + actualDropdownWidth;
    }

    let adjustedPosition = position;
    const isViewportConstrained = actualDropdownWidth >= viewportWidth;

    // Check for left viewport overflow
    if (leftEdge < 0) {
        const leftOverflow = Math.abs(leftEdge);
        
        if (isViewportConstrained) {
            // For viewport-constrained dropdowns, use exact positioning
            if (isRTL) {
                // RTL: adjust position to align left edge with viewport
                adjustedPosition = position - leftOverflow;
            } else {
                // LTR: adjust position to align left edge with viewport
                adjustedPosition += leftOverflow;
            }
        } else {
            // For normal dropdowns, use configured shift behavior
            const adjustedOverflow = leftOverflow < this.config.minOverflow ? this.config.minOverflow : leftOverflow;
            if (isRTL) {
                adjustedPosition -= adjustedOverflow * this.config.shiftFactor;
            } else {
                adjustedPosition += adjustedOverflow * this.config.shiftFactor;
            }
        }
    }

    // Recalculate right edge after left adjustments
    let adjustedRightEdge;
    if (isRTL) {
        const parentRight = liRect.right;
        adjustedRightEdge = parentRight - adjustedPosition;
    } else {
        adjustedRightEdge = liRect.left + adjustedPosition + actualDropdownWidth;
    }
    
    // Check for right viewport overflow
    if (adjustedRightEdge > viewportWidth) {
        const rightOverflow = adjustedRightEdge - viewportWidth;
        
        if (isViewportConstrained) {
            // For viewport-constrained dropdowns, position exactly at viewport edge
            if (isRTL) {
                // RTL: adjust position to align right edge with viewport
                adjustedPosition += rightOverflow;
            } else {
                // LTR: adjust position to align right edge with viewport
                adjustedPosition -= rightOverflow;
            }
            
            // Double-check: if this causes opposite overflow, prioritize based on RTL
            let finalLeftEdge, finalRightEdge;
            if (isRTL) {
                const parentRight = liRect.right;
                finalRightEdge = parentRight - adjustedPosition;
                finalLeftEdge = finalRightEdge - actualDropdownWidth;
            } else {
                finalLeftEdge = liRect.left + adjustedPosition;
                finalRightEdge = finalLeftEdge + actualDropdownWidth;
            }
            
            if (finalLeftEdge < 0) {
                if (isRTL) {
                    // In RTL, prioritize right edge - align dropdown to right edge of viewport
                    adjustedPosition = liRect.right - viewportWidth;
                } else {
                    // In LTR, prioritize left edge - align dropdown to left edge of viewport
                    adjustedPosition = -liRect.left;
                }
            }
        } else {
            // For normal dropdowns, use configured shift behavior
            const adjustedOverflow = rightOverflow < this.config.minOverflow ? this.config.minOverflow : rightOverflow;
            if (isRTL) {
                adjustedPosition += adjustedOverflow * this.config.shiftFactor;
            } else {
                adjustedPosition -= adjustedOverflow * this.config.shiftFactor;
            }
        }
    }

    return adjustedPosition;
}

/**
 * Handle dropdowns that are wider than the viewport
 */
handleWideDropdownOverflow(liRect, actualDropdownWidth, viewportWidth, isRTL) {
    // For dropdowns wider than viewport, prioritize showing the start of content
    // In RTL, this means showing the right side; in LTR, the left side
    if (isRTL) {
        // Align to right edge of viewport
        return viewportWidth - liRect.left - actualDropdownWidth;
    } else {
        // Align to left edge of viewport
        return -liRect.left;
    }
}


    setCurrentPageDropdownActive() {
        if (!this.config.menuAutoExpansion) return;

        const isDesktop = window.innerWidth >= this.config.minWidthThreshold;
        const hasSpecialHeader = document.body.classList.contains('brx-header-left') ||
            document.body.classList.contains('brx-header-right');
        const isOffCanvas = !!document.querySelector(this.config.offCanvasSelector);

        if (isDesktop && !hasSpecialHeader && !isOffCanvas) return;

        const currentPageLink = document.querySelector('[aria-current="page"]');

        if (currentPageLink) {
            const parentDropdown = currentPageLink.closest('.brxe-dropdown');
            let tabbedParentDropdown = currentPageLink.closest('.dwc-tabbed-nav-list__li');

            // If tabbedParentDropdown has currentPageLink as a direct child, ignore it
            if (tabbedParentDropdown) {
                const directPageLink = tabbedParentDropdown.querySelector(':scope > a[aria-current="page"]');
                if (directPageLink) {
                    tabbedParentDropdown = null; // Ignore tabbedParentDropdown
                }
            }

            if (parentDropdown) {
                setTimeout(() => {
                    //console.log(tabbedParentDropdown);
                    parentDropdown.classList.add('open', 'active');

                    // Only add 'active' class if tabbedParentDropdown exists
                    if (tabbedParentDropdown) {
                        tabbedParentDropdown.classList.add('active');
                    }

                    const submenuToggle = parentDropdown.querySelector('.brx-submenu-toggle');
                    let button = submenuToggle ? submenuToggle.querySelector('button') : null;
                    const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle');

                    if (button) {
                        menuToggle.addEventListener('click', () => {
                            setTimeout(() => {
                                const submenuIsOpen = parentDropdown.classList.contains('open', 'active');
                                if (submenuIsOpen) {
                                    button.setAttribute('aria-expanded', 'true');
                                }
                            }, 100);
                        });
                    }

                    setTimeout(() => {
                        currentPageLink.scrollIntoView({
                            behavior: 'smooth',
                            block: 'nearest'
                        });
                    }, 600);
                }, 700);
            }
        }
    }

    updateChevronPosition(targetLink) {
        if (!this.config.stripeStyle) return;

        requestAnimationFrame(() => {
            let headerElement = document.querySelector(this.config.headerSelector);
            if (!headerElement) {
                console.error('Chevron parent element not found.');
                return;
            }

            // Cache RTL detection for performance within this animation frame
            const isRTLLayout = this.isRTL ? this.isRTL() : false;

            // Get element dimensions and positions
            let linkRect = targetLink.getBoundingClientRect();
            let headerRect = headerElement.getBoundingClientRect();

            // Calculate link midpoint (geometric center - always the same regardless of direction)
            let linkMidpoint = linkRect.left + linkRect.width / 2;

            // RTL-aware reference point calculation
            let headerReferenceOffset, navlinkMidpointOffset, navlinkEdgeOffset;

            if (isRTLLayout) {
                // RTL: Use right edge as reference point
                let headerRightOffset = headerRect.right + window.scrollX;

                // Calculate offsets relative to header's right edge
                navlinkMidpointOffset = headerRightOffset - linkMidpoint;
                navlinkEdgeOffset = headerRightOffset - linkRect.right;
                headerReferenceOffset = headerRightOffset;

                // Set RTL-specific CSS variables
                headerElement.style.setProperty('--chevron-parent-right', `${headerReferenceOffset}px`);
                headerElement.style.setProperty('--navlink-midpoint-rtl', `${navlinkMidpointOffset}px`);
                headerElement.style.setProperty('--navlink-right', `${navlinkEdgeOffset}px`);

                // Set unified variables for CSS that expects them (RTL context)
                headerElement.style.setProperty('--navlink-midpoint', `${navlinkMidpointOffset}px`);
                headerElement.style.setProperty('--navlink-edge', `${navlinkEdgeOffset}px`);

            } else {
                // LTR: Original left-based calculation (unchanged for perfect backwards compatibility)
                let headerLeftOffset = headerRect.left + window.scrollX;

                // Calculate offsets relative to header's left edge (original logic)
                navlinkMidpointOffset = linkMidpoint - headerLeftOffset;
                navlinkEdgeOffset = linkRect.left - headerLeftOffset;
                headerReferenceOffset = headerLeftOffset;

                // Set standard LTR CSS variables (original behavior)
                headerElement.style.setProperty('--chevron-parent-left', `${headerReferenceOffset}px`);
                headerElement.style.setProperty('--navlink-midpoint', `${navlinkMidpointOffset}px`);
                headerElement.style.setProperty('--navlink-left', `${navlinkEdgeOffset}px`);

                // Set unified edge variable for consistency
                headerElement.style.setProperty('--navlink-edge', `${navlinkEdgeOffset}px`);

                // Clean up any RTL variables that might exist from previous state
                headerElement.style.removeProperty('--chevron-parent-right');
                headerElement.style.removeProperty('--navlink-midpoint-rtl');
                headerElement.style.removeProperty('--navlink-right');
            }

            // Set direction-agnostic variables (same for both LTR and RTL)
            headerElement.style.setProperty('--chevron-parent-width', `${headerRect.width}px`);
            headerElement.style.setProperty('--navlink-width', `${linkRect.width}px`);

            // Set direction indicator for CSS conditional logic
            headerElement.style.setProperty('--chevron-direction', isRTLLayout ? 'rtl' : 'ltr');

            // Set boolean flags for easier CSS targeting
            if (isRTLLayout) {
                headerElement.style.setProperty('--is-rtl', '1');
                headerElement.style.removeProperty('--is-ltr');
            } else {
                headerElement.style.setProperty('--is-ltr', '1');
                headerElement.style.removeProperty('--is-rtl');
            }
        });
    }


    updateHeaderHeight() {
        if (this.headerTimeoutId) {
            clearTimeout(this.headerTimeoutId);
        }

        requestAnimationFrame(() => {
            if (this.header) {
                this.headerTimeoutId = setTimeout(() => {
                    let headerHeight = this.header.offsetHeight;
                    document.body.style.setProperty('--dwc-nest-header-height', `${headerHeight}px`);
                }, 300);
            }
        });
    }

    setMobileMenuTopHeight() {
        if (this.mobileMenuTimeoutId) {
            clearTimeout(this.mobileMenuTimeoutId);
        }

        let mobileMenuTop = document.querySelector('.dwc-nest-menu-top');
        if (!mobileMenuTop) {
            console.error('Mobile menu top element not found');
            return;
        }

        this.mobileMenuTimeoutId = setTimeout(() => {
            let menuTopHeight = mobileMenuTop.offsetHeight;
            document.body.style.setProperty('--mobile-menu-top-height', `${menuTopHeight}px`);
        }, 1000);
    }


    updateMobileLogo() {
        let mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo');
        let desktopLogo = document.querySelector('.dwc-nest-menu__logo');

        if (!mobileLogo) {
            console.error('Mobile logo container not found');
            return;
        }

        if (!desktopLogo) {
            console.error('Desktop logo container not found');
            return;
        }

        // Updated to check for either img or svg in desktop logo
        let desktopLogoElement = desktopLogo.querySelector('img, svg');
        if (!desktopLogoElement) return;

        // Check if mobile logo has an image or SVG
        const currentMobileLogo = mobileLogo.querySelector('img, svg');

        // Store original logo data if not already stored
        if (!mobileLogo.hasAttribute('data-original-logo-type') && currentMobileLogo) {
            // Get logo type (img or svg)
            const logoType = currentMobileLogo.tagName.toLowerCase();
            mobileLogo.setAttribute('data-original-logo-type', logoType);

            if (logoType === 'img') {
                mobileLogo.setAttribute('data-original-logo-src', currentMobileLogo.src);
                mobileLogo.setAttribute('data-original-logo-alt', currentMobileLogo.alt || '');
                mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.className || '');
            } else if (logoType === 'svg') {
                // Store SVG content as a string
                mobileLogo.setAttribute('data-original-logo-content', currentMobileLogo.outerHTML);
                mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.getAttribute('class') || '');
            }
        }

        if (this.isAboveMinWidth()) {
            if (currentMobileLogo) {
                mobileLogo.removeChild(currentMobileLogo);
            }

            // Clone desktop logo (either img or svg)
            let newLogo = desktopLogoElement.cloneNode(true);
            newLogo.removeAttribute('id');
            //  mobileLogo.appendChild(newLogo);
        } else {
            // For mobile view
            const originalLogoType = mobileLogo.getAttribute('data-original-logo-type');

            if (!currentMobileLogo) {
                // If no current logo, clone desktop logo
                let mobileLogoElement = desktopLogoElement.cloneNode(true);
                mobileLogoElement.removeAttribute('id');
                mobileLogo.appendChild(mobileLogoElement);
            } else if (originalLogoType) {
                mobileLogo.removeChild(currentMobileLogo);

                if (originalLogoType === 'img') {
                    // Restore original img
                    let mobileLogoImage = document.createElement('img');
                    mobileLogoImage.src = mobileLogo.getAttribute('data-original-logo-src');
                    mobileLogoImage.alt = mobileLogo.getAttribute('data-original-logo-alt') || '';
                    mobileLogoImage.className = mobileLogo.getAttribute('data-original-logo-class') || '';
                    mobileLogo.appendChild(mobileLogoImage);
                } else if (originalLogoType === 'svg') {
                    // Restore original SVG
                    const svgContent = mobileLogo.getAttribute('data-original-logo-content');
                    if (svgContent) {
                        const tempContainer = document.createElement('div');
                        tempContainer.innerHTML = svgContent;
                        const svgElement = tempContainer.querySelector('svg');
                        if (svgElement) {
                            mobileLogo.appendChild(svgElement.cloneNode(true));
                        }
                    }
                }
            }
        }
    }


    initDesktopNav() {
        if (this.isOffCanvas() || !this.header || this.hasHeaderClass()) return;

        let menuElement = this.header.querySelector('.dwc-nest-menu');
        if (menuElement) {
            menuElement.classList.remove('brx-open');
            menuElement.querySelectorAll('.brxe-dropdown').forEach(dropdown => {
                dropdown.classList.remove('active', 'open');
            });
        }
    }

    initializeMaxDimensions() {
        if (!this.isAboveMinWidth()) return;

        this.megaMenuLinks.forEach(link => {
            let dropdown = link.querySelector('.brx-dropdown-content');
            if (dropdown) {
                this.maxMenuWidth = Math.max(this.maxMenuWidth, dropdown.offsetWidth);
                this.maxMenuHeight = Math.max(this.maxMenuHeight, dropdown.offsetHeight + 10);
            }
        });

        this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`);
        this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`);
        this.header.style.setProperty('--dropdown-menu-scale-x', '0');
        this.header.style.setProperty('--dropdown-menu-scale-y', '0');
    }

    resetForMobile() {
        this.header.style.setProperty('--dropdown-menu-scale-x', '0');
        this.header.style.setProperty('--dropdown-menu-scale-y', '0');
        this.header.style.setProperty('--dropdown-menu-width', '0');

        if (this.header) {
            this.header.classList.remove('show-menu-animation', 'hide-menu-animation');
        }
    }

    setBoxedWidthVariable() {
        // Check if body has the brx-boxed class
        if (document.body.classList.contains('brx-boxed')) {
            // Get computed style for the body
            const computedStyle = window.getComputedStyle(document.body);

            // Get the max-width value
            const maxWidth = computedStyle.getPropertyValue('max-width');

            // Set the max-width as a CSS variable on the body
            document.body.style.setProperty('--boxed-width', maxWidth);

            return maxWidth;
        } else {
            return null;
        }
    }

    closeNavOnClick() {
        if (MegaMenuCONFIG.closeNavOnClick) {

            const allLinks = document.querySelectorAll('.dwc-nest-menu a');
            const menuContainer = document.querySelector('.dwc-nest-menu');
            const menuItemLinks = Array.from(allLinks).filter(link => {
                return link.parentElement !== menuContainer;
            });

            const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle');

            // Always remove existing event listeners first
            menuItemLinks.forEach(link => {
                const storedHandler = link._clickHandler;
                if (storedHandler) {
                    link.removeEventListener('click', storedHandler);
                    delete link._clickHandler;
                }
            });

            // Check condition - if true, exit without adding new listeners
            if (this.isAboveMinWidth() && !this.isOffCanvas()) return;

            // Helper function to check if element has excluded selector
            const hasExcludedSelector = (element) => {
                if (!MegaMenuCONFIG.closeNavOnClickExclude) return false;

                const excludedSelectors = MegaMenuCONFIG.closeNavOnClickExclude
                    .split(',')
                    .map(selector => selector.trim());

                return excludedSelectors.some(selector => {
                    try {
                        return element.matches(selector);
                    } catch (error) {
                        // Fallback for invalid selectors - log warning and skip
                        console.warn(`Invalid selector: "${selector}"`, error);
                        return false;
                    }
                });
            };

            // Helper function to check if link has a hash
            const hasHashLink = (link) => {
                const href = link.getAttribute('href');
                return href && href.includes('#');
            };

            // Only add new event listeners if the condition is false
            menuItemLinks.forEach(link => {
                // Skip this link if it has any excluded classes
                if (hasExcludedSelector(link)) return;

                // If closeOnHashClickOnly is true, skip links without hash
                if (MegaMenuCONFIG.closeOnHashClickOnly && !hasHashLink(link)) return;

                const clickHandler = () => {
                    if (menuToggle) {
                        menuToggle.click();
                    }
                };

                link._clickHandler = clickHandler;
                link.addEventListener('click', clickHandler);
            });
        }
    }
}

class TooltipManager {
    constructor(config) {
        this.config = {
            toolTip: config.toolTip || false
        };
        this.targetButton = null;
        this.tooltipProcessed = false;
    }

    setBackText() {
        let menuElement = document.querySelector('.dwc-nest-menu');
        let forcedBackText = menuElement.getAttribute('data-back-text')
        document.querySelectorAll('.brx-submenu-toggle').forEach(submenu => {
            const textContent = submenu.textContent.trim();
            const button = submenu.querySelector('.brx-submenu-toggle > button');
            if (button) {
                button.setAttribute('data-text', textContent);
                button.setAttribute('data-back-text', forcedBackText);
            }
        });
    }

    updateTooltipDataText(button) {
        if (!this.config.toolTip) return;

        let menuElement = document.querySelector('.dwc-nest-menu');
        let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text')

        const closestUl = button.closest('.dwc-nav-wrapper, .dwc-tabbed-nav__list-wrapper');
        if (closestUl) {
            const tooltip = closestUl.querySelector('.dwc-nest-tooltip');
            if (tooltip) {
                const buttonText = button.getAttribute('data-text') ||
                    button.querySelector('i')?.getAttribute('data-text');
                tooltip.setAttribute('data-text', buttonText);
                tooltip.innerText = toolTipBackText + ' ' + buttonText;                
            }
            //console.log('button: ', button)
            //console.log('closet ul: ', closestUl)
        }

    }

    addTooltip(button) {
        if (!this.config.toolTip) return;

        let menuElement = document.querySelector('.dwc-nest-menu');
        let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text')

        const closestUl = button.closest('.dwc-nav-wrapper, .dwc-tabbed-nav__list-wrapper');
        if (!closestUl) return;

        this.removeTooltipFrom(closestUl);

        const tooltip = document.createElement('div');
        tooltip.className = 'dwc-nest-tooltip';
        tooltip.innerText = toolTipBackText;
        tooltip.style.position = 'fixed';
        tooltip.style.bottom = '12px';
        tooltip.style.left = '12px';
        tooltip.style.background = 'rgb(0 0 0 / 30%)';
        tooltip.style.color = 'white';
        tooltip.style.padding = '5px 10px';
        tooltip.style.borderRadius = '5px';
        tooltip.style.fontSize = '12px';
        tooltip.style.zIndex = '9999';
        tooltip.style.opacity = '0';
        tooltip.style.transition = 'opacity 1.5s';
        tooltip.style.pointerEvents = 'none';
        closestUl.appendChild(tooltip);

        requestAnimationFrame(() => {
            tooltip.style.opacity = '1';
        });
    }

    removeAllTooltips() {
        document.querySelectorAll('.dwc-nest-tooltip').forEach(tooltip => tooltip.remove());
    }

    removeTooltipFrom(ulElement) {
        const existingTooltip = ulElement.querySelector('.dwc-nest-tooltip');
        if (existingTooltip) existingTooltip.remove();
    }

    setupTooltipObserver() {
        const tooltipObserver = new MutationObserver((mutationsList) => {
            if (this.tooltipProcessed) return;

            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    for (const node of mutation.addedNodes) {
                        if (node.nodeType === Node.ELEMENT_NODE &&
                            node.classList.contains('dwc-nest-tooltip') &&
                            !this.tooltipProcessed) {
                            const button = document.querySelector('.open.active > .brx-submenu-toggle > button:not(.open .open button)');
                            if (button) {
                                this.updateTooltipDataText(button);
                                this.tooltipProcessed = true;
                                return;
                            }
                        }
                    }
                }
            }
        });

        tooltipObserver.observe(document.body, { childList: true, subtree: true });
    }
}

class SwipeGestureHandler {
    constructor(config) {
        this.config = {
            swipeToClose: config.swipeToClose || false
        };
        this.targetButton = null;
        this.startX = 0;
        this.startY = 0;
        this.endX = 0;
        this.endY = 0;
        
        // Cache RTL detection for performance during touch events
        this.isRTLLayout = null;
        this.cacheRTLStatus();
    }

    /**
     * Cache RTL status and set up listener for direction changes
     */
    cacheRTLStatus() {
        this.isRTLLayout = this.isRTL();
        
        // Listen for potential direction changes (rare but possible)
        const observer = new MutationObserver(() => {
            const newRTLStatus = this.isRTL();
            if (newRTLStatus !== this.isRTLLayout) {
                this.isRTLLayout = newRTLStatus;
            }
        });
        
        observer.observe(document.documentElement, {
            attributes: true,
            attributeFilter: ['dir', 'class', 'style']
        });
    }

    /**
     * Detect if the document is using RTL (Right-to-Left) layout
     * Follows the same pattern as MenuAnimationController
     */
    isRTL() {
        const htmlDir = document.documentElement.dir?.toLowerCase();
        if (htmlDir) return htmlDir === 'rtl';
        
        const computedDirection = getComputedStyle(document.documentElement).direction;
        return computedDirection === 'rtl';
    }

    initialize() {
        if (!this.config.swipeToClose) return;

        document.addEventListener('touchstart', this.handleTouchStart.bind(this));
        document.addEventListener('touchend', this.handleTouchEnd.bind(this));
    }

    handleTouchStart(event) {
        if (!this.isMobileMenuOpen()) return;

        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
    }

    handleTouchEnd(event) {
        if (!this.isMobileMenuOpen()) return;

        this.endX = event.changedTouches[0].clientX;
        this.endY = event.changedTouches[0].clientY;

        const diffX = this.endX - this.startX;
        const diffY = Math.abs(this.endY - this.startY);
        
        // RTL-aware swipe detection
        const isValidSwipe = this.isValidSwipeGesture(diffX, diffY);

        if (isValidSwipe && this.targetButton) {
            this.targetButton.click();
            this.targetButton = null;
        }
    }

    /**
     * Determine if the swipe gesture is valid based on layout direction
     * @param {number} diffX - Horizontal distance (positive = right, negative = left)
     * @param {number} diffY - Vertical distance (absolute value)
     * @returns {boolean} True if the swipe should trigger menu close
     */
    isValidSwipeGesture(diffX, diffY) {
        const swipeThreshold = 50;
        const verticalTolerance = 30;
        
        // Vertical movement must be within tolerance
        if (diffY >= verticalTolerance) return false;

        if (this.isRTLLayout) {
            // RTL: Accept right-to-left swipes (negative diffX)
            return diffX < -swipeThreshold;
        } else {
            // LTR: Accept left-to-right swipes (positive diffX) - existing behavior
            return diffX > swipeThreshold;
        }
    }

    isMobileMenuOpen() {
        return document.querySelector('.dwc-nest-menu')?.classList.contains('brx-open');
    }

    setTargetButton(button) {
        this.targetButton = button;
    }

    /**
     * Get current layout direction (for debugging)
     * @returns {string} 'rtl' or 'ltr'
     */
    getLayoutDirection() {
        return this.isRTLLayout ? 'rtl' : 'ltr';
    }
}

class OffcanvasMenuHandler {
    constructor(config) {
        this.config = config || {};
    }

    applyMobileStyles() {
        let offcanvasMenu = document.querySelector(this.config.offCanvasSelector);
        let hasHeaderPosition = ['brx-header-left', 'brx-header-right'].some(cls =>
            document.body.classList.contains(cls)
        );

        if (!offcanvasMenu && !hasHeaderPosition) return;

        let styleSheet = document.querySelector('[data-stylesheet]');
        if (!styleSheet) return;

        let styleElement = styleSheet.querySelector('style');
        if (!styleElement) return;

        let originalStyles = styleElement.textContent || styleElement.innerText;
        let modifiedStyles = originalStyles.replace(/\(max-width:\s*\d+px\)/g, '(max-width: 5000px)');

        let newStyleElement = document.createElement('style');
        newStyleElement.id = 'dwc-offcanvas-styles';
        newStyleElement.textContent = modifiedStyles;

        document.head.appendChild(newStyleElement);

        setTimeout(() => {
            document.body.classList.add('show-nav');
             document.body.classList.add('sidebar-ready');

        }, 100);

        styleSheet.remove();
    }
}



class MobileMenuScrollReset {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            scrollResetDelay: config.scrollResetDelay || 300
        };

        this.menuElement = null;
        this.nestedItemsElement = null;
        this.scrollResetTimeout = null;
        this.isInitialized = false;
    }

    initialize() {
        if (this.isInitialized) return;

        this.menuElement = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`);
        this.nestedItemsElement = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`);

        if (!this.menuElement || !this.nestedItemsElement) {
            console.warn('Mobile menu scroll reset: Required elements not found');
            return;
        }

        this.setupMutationObserver();
        this.isInitialized = true;
    }

    setupMutationObserver() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    this.handleMenuClassChange();
                }
            });
        });

        observer.observe(this.menuElement, {
            attributes: true,
            attributeFilter: ['class']
        });
    }

    handleMenuClassChange() {
        // Only run on mobile
        if (!this.isMobile()) return;

        const isMenuOpen = this.menuElement.classList.contains('brx-open');

        // If menu is now closed, set timeout to reset scroll
        if (!isMenuOpen) {
            this.scheduleScrollReset();
        } else {
            // If menu is opened, cancel any pending scroll reset
            this.cancelScrollReset();
        }
    }

    scheduleScrollReset() {
        // Clear any existing timeout
        this.cancelScrollReset();

        // Set new timeout
        this.scrollResetTimeout = setTimeout(() => {
            this.resetScroll();
        }, this.config.scrollResetDelay);
    }

    cancelScrollReset() {
        if (this.scrollResetTimeout) {
            clearTimeout(this.scrollResetTimeout);
            this.scrollResetTimeout = null;
        }
    }

    resetScroll() {
        if (this.nestedItemsElement && this.isMobile()) {
            this.nestedItemsElement.scrollTop = 0;
        }
    }

    isMobile() {
        return window.innerWidth < this.config.minWidthThreshold;
    }

    // Method to reinitialize (useful for your reinitialize functionality)
    reinitialize() {
        this.cancelScrollReset();
        this.isInitialized = false;
        this.initialize();
    }
}


class MenuSystem {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle,
            adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight,
            toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip,
            swipeToClose: config.swipeToClose ?? MegaMenuCONFIG.swipeToClose,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            megaMenuLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .brx-has-megamenu`,
            offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`,
            shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor,
            minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow
        };

        this.animationController = new MenuAnimationController(this.config);
        this.tooltipManager = new TooltipManager(this.config);
        this.swipeHandler = new SwipeGestureHandler(this.config);
        this.offcanvasHandler = new OffcanvasMenuHandler(this.config);
        this.centeredLogoController = new CenteredLogoController(this.config);
        this.mobileScrollReset = new MobileMenuScrollReset(this.config);

        // Flag to track if updateDropdownPositions has been called via user interaction
        this.hasUpdatedDropdowns = false;

        this.centeredLogoController.initializeEarly();
    }


    // New method to handle the DOMContentLoaded logic, replaces former menuSystem.initialize()
    setupMenu() {
        let overlay = document.querySelector('.dwc-nest-menu-overlay');
        if (!overlay) {
            overlay = document.createElement('nav-overlay');
            overlay.className = 'dwc-nest-menu-overlay';
            const overlayParent = document.querySelector('.dwc-nest-header__container');
            const header = document.querySelector('#brx-header');
            if (overlayParent && MegaMenuCONFIG.overlayInsideHeader) {
                overlayParent.parentNode.prepend(overlay, overlayParent);
            } else if (header) {
                header.parentNode.insertBefore(overlay, header);
            }
        }

     
        this.offcanvasHandler.applyMobileStyles();
        this.animationController.updateHeaderHeight();
        this.animationController.initializeMaxDimensions();
        this.animationController.setMobileMenuTopHeight();
        this.animationController.updateMobileLogo();
        this.animationController.setCurrentPageDropdownActive();
        this.tooltipManager.setBackText();
        this.tooltipManager.setupTooltipObserver();
        this.animationController.closeNavOnClick();
        this.centeredLogoController.initialize();
        this.mobileScrollReset.initialize();


        if (this.animationController.isAboveMinWidth()) {
            this.setupDesktopBehavior();
        } else {
            this.swipeHandler.initialize();
        }

        this.setupEventListeners();

        if (!this.animationController.isAboveMinWidth()) {
            this.animationController.resetForMobile();
        }

        setTimeout(() => {
            document.body.classList.add('show-nav');
            this.animationController.updateHeaderHeight();
        }, 0);

        setTimeout(() => {
            document.body.classList.add('adaptive-height-active');
            if (this.animationController.isAboveMinWidth()) {
                this.animationController.updateDropdownPositions();
                this.animationController.setBoxedWidthVariable();
            }
        }, 500);
    }

    // Original initialize method (unchanged) now calls the setupMenu()
    initialize() {
        updateMobileClass(this.config.minWidthThreshold);
        document.addEventListener('DOMContentLoaded', () => {
            this.setupMenu();
        });
        return this;
    }

    // Updated reinitialize method - to call: mainMenu.reinitialize();
    reinitialize() {
        // Reset critical states
        this.centeredLogoController.isInitialized = false;
        this.animationController.maxMenuWidth = 0;
        this.animationController.maxMenuHeight = 0;
        this.tooltipManager.tooltipProcessed = false;

        // Clear breakinto states ← ADD THIS
        const breakintoElements = document.querySelectorAll('[data-breakinto]');
        breakintoElements.forEach(element => {
            breakintoOriginalParents.delete(element);
            breakintoOriginalIndexes.delete(element);
            breakintoItemStates.delete(element);
            element.removeAttribute('data-breakinto-moved');
        });

        // Clear existing timeouts
        if (this.animationController.headerTimeoutId) {
            clearTimeout(this.animationController.headerTimeoutId);
        }
        if (this.animationController.mobileMenuTimeoutId) {
            clearTimeout(this.animationController.mobileMenuTimeoutId);
        }
        if (this.centeredLogoController.resizedFinished) {
            clearTimeout(this.centeredLogoController.resizedFinished);
        }

        // Remove added DOM elements and classes
        const overlay = document.querySelector('.dwc-nest-menu-overlay');
        if (overlay) overlay.remove();
        document.body.classList.remove('show-nav', 'adaptive-height-active', 'desktop-centered', 'dom-ready');
        this.tooltipManager.removeAllTooltips();
        const offcanvasStyles = document.querySelector('#dwc-offcanvas-styles');
        if (offcanvasStyles) offcanvasStyles.remove();

        // Reset mobile logo
        const mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo');
        if (mobileLogo) {
            const currentMobileLogo = mobileLogo.querySelector('img, svg');
            if (currentMobileLogo) currentMobileLogo.remove();
        }

        // Re-run setup
        updateMobileClass(this.config.minWidthThreshold);
        this.setupMenu();
        this.mobileScrollReset.reinitialize();
        console.log('Mega Menu Pro reinitialized...')
    }



    setupDesktopBehavior() {
        this.animationController.megaMenuLinks.forEach(link => {
            link.removeEventListener('mouseenter', this.handleMouseEnter);
            link.addEventListener('mouseenter', this.handleMouseEnter);
        });
    }

    handleMouseEnter = (event) => {
        this.animationController.updateChevronPosition(event.target);
        // Call updateDropdownPositions on mouseenter if not already called via interaction
        if (this.animationController.isAboveMinWidth() && !this.hasUpdatedDropdowns) {
            this.animationController.updateDropdownPositions();
            this.animationController.updateMenuVariables();
            this.hasUpdatedDropdowns = true;
        }
    };

    setupEventListeners() {
        let observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    this.animationController.updateMenuVariables();
                }
            });
        });

        this.animationController.megaMenuLinks.forEach(link =>
            observer.observe(link, { attributes: true })
        );

        document.addEventListener('click', event => {
            let submenuToggle = event.target.closest('.brx-submenu-toggle, .dwc-tabbed-nav-list__li');
            if (submenuToggle) {
                setTimeout(() => {
                    let openButtons = document.querySelectorAll('.brxe-dropdown.open.active button, .dwc-tabbed-nav-list__li.active button');
                    let targetButton = Array.from(openButtons).find(button => {
                        let parentDropdown = button.closest('.brxe-dropdown.open.active, .dwc-tabbed-nav-list__li.active');
                        return parentDropdown &&
                            parentDropdown.tagName.toLowerCase() === 'li' &&
                            !parentDropdown.querySelector('.brxe-dropdown.open.active:not(:scope), .dwc-tabbed-nav-list__li.active:not(:scope)');
                    });

                    if (targetButton) {
                        this.swipeHandler.setTargetButton(targetButton);
                        if (this.config.toolTip) {
                            this.tooltipManager.removeAllTooltips();
                            this.tooltipManager.addTooltip(targetButton);
                            this.tooltipManager.updateTooltipDataText(targetButton);
                        }
                    }
                }, 50);
            }
        });

        window.addEventListener('resize', this.debounce(() => {
            updateMobileClass(this.config.minWidthThreshold);
            this.animationController.updateHeaderHeight();
            this.animationController.initializeMaxDimensions();
            this.animationController.setMobileMenuTopHeight();
            this.animationController.updateMobileLogo();
            this.animationController.closeNavOnClick();

            if (this.animationController.isAboveMinWidth()) {
                this.animationController.updateMenuVariables();
                this.animationController.initDesktopNav();
                this.setupDesktopBehavior();
                // Reset flag on resize to desktop and call updateDropdownPositions       
                this.hasUpdatedDropdowns = false;
                this.animationController.updateDropdownPositions();
            } else {
                this.animationController.resetForMobile();
                this.swipeHandler.initialize();
                // Reset flag on resize to mobile               
                this.hasUpdatedDropdowns = false;
            }
        }, 300));
    }

    debounce(func, delay) {
        let timeoutId;
        return function (...args) {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
    }
}

const mainMenu = new MenuSystem().initialize();


// RECALCULATE DROPDOWN POSITION ON LAYOUT SHIFTS

const debouncedUpdate = mainMenu.debounce(() => {
    //console.log('updated')
    mainMenu.animationController.updateDropdownPositions();
    mainMenu.animationController.updateMenuVariables();

    if (!mainMenu.animationController.menuOpened) {
        mainMenu.animationController.header.style.setProperty('--dropdown-menu-width', '100px');
        // console.log('less')
    }

}, 300);



if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', debouncedUpdate);
}




//==== HEADER INSTANCE EXPERIMENTAL ====
/*
const secondaryMenu = new MenuSystem({   
headerSelector: '.second.dwc-nest-header',
adaptiveHeight: 1,
stripeStyle: 0,
shiftFactor: 1.5,  // Example override
minOverflow: 300   // Example override
}).initialize();
*/


/* BREAKOUT LINK & BREAKIN FUNCTIONALITY */

// WeakMaps for breakinto feature state management
const breakintoOriginalParents = new WeakMap(); // Track original parents for breakinto items
const breakintoOriginalIndexes = new WeakMap(); // Track original child indexes for breakinto items  
const breakintoItemStates = new WeakMap(); // Track individual breakinto item states

// Use WeakMap for better garbage collection
const originalParents = new WeakMap();
const itemStates = new WeakMap(); // Track individual item states
const breakinOriginalParents = new WeakMap(); // Track original parents for breakin items
const breakinOriginalIndexes = new WeakMap(); // Track original child indexes for breakin items
const breakinItemStates = new WeakMap(); // Track individual breakin item states
let isMobileView = null;
let resizeTimer;
let breakinContainer = null;

function ensureBreakInContainer() {
    // Check if any breakin elements exist in the header first
    const hasBreakInElements = document.querySelector('#brx-header [data-breakin]');
    if (!hasBreakInElements) return null;

    // Select nav wrapper based on config
    const navWrapperSelector = MegaMenuCONFIG.breakinToNavList
        ? '.dwc-nest-menu .brx-nav-nested-items'
        : '.dwc-nav-wrapper';

    const navWrapper = document.querySelector(navWrapperSelector);
    if (!navWrapper) return null;

    if (!breakinContainer) {
        breakinContainer = navWrapper.querySelector('.breakin-container');
        if (!breakinContainer) {
            // Create element based on config
            breakinContainer = MegaMenuCONFIG.breakinToNavList
                ? document.createElement('li')
                : document.createElement('div');

            breakinContainer.className = 'breakin-container';
            navWrapper.appendChild(breakinContainer);
        }
    }

    return breakinContainer;
}

function handleBreakInItems() {
    const currentWidth = window.innerWidth;
    const container = ensureBreakInContainer();
    if (!container) return;

    // Get all breakin items from both original locations and breakin container
    const breakinItemsInOriginal = document.querySelectorAll('#brx-header [data-breakin]:not(.breakin-container [data-breakin])');
    const breakinItemsInContainer = container.querySelectorAll('[data-breakin]');

    // Combine both nodelets into a single array
    const breakinItems = [...breakinItemsInOriginal, ...breakinItemsInContainer];

    breakinItems.forEach(item => {
        const breakpointAttr = item.getAttribute('data-breakin');

        // Set default breakpoint if not defined or invalid
        let breakpoint;
        if (!breakpointAttr || breakpointAttr.trim() === '') {
            breakpoint = MegaMenuCONFIG.minWidth - 1;
        } else {
            breakpoint = parseInt(breakpointAttr, 10);
            if (isNaN(breakpoint)) {
                breakpoint = MegaMenuCONFIG.minWidth - 1;
            }
        }

        // Continue with your logic using the breakpoint value...

        // Determine if item should be in mobile state (moved into container)
        const shouldBeInContainer = currentWidth <= breakpoint;

        // Get current state of this breakin item
        const currentItemState = breakinItemStates.get(item);

        // Only process if this item's state changed
        if (currentItemState !== shouldBeInContainer) {
            breakinItemStates.set(item, shouldBeInContainer);

            if (shouldBeInContainer) {
                // Move to breakin container

                // Store original parent and index if not already stored
                if (!breakinOriginalParents.has(item)) {
                    const originalParent = item.parentElement;
                    const originalIndex = Array.from(originalParent.children).indexOf(item);
                    breakinOriginalParents.set(item, originalParent);
                    breakinOriginalIndexes.set(item, originalIndex);
                }

                // Move item to breakin container
                container.appendChild(item);

            } else {
                // Move back to original parent at original position
                const originalParent = breakinOriginalParents.get(item);
                const originalIndex = breakinOriginalIndexes.get(item);

                if (originalParent && originalIndex !== undefined) {
                    const children = originalParent.children;

                    if (originalIndex >= children.length) {
                        // Insert at the end if original index is beyond current children
                        originalParent.appendChild(item);
                    } else {
                        // Insert at the original position
                        originalParent.insertBefore(item, children[originalIndex]);
                    }
                }
            }
        }
    });
}

function handleBreakIntoItems() {
    const currentWidth = window.innerWidth;

    // Get all breakinto items from both original locations and target containers
    const breakintoItemsInOriginal = document.querySelectorAll('[data-breakinto]:not([data-breakinto=""])');
    const breakintoItemsInContainers = document.querySelectorAll('[data-breakinto-moved="true"]');

    // Combine both nodelets into a single array
    const breakintoItems = [...breakintoItemsInOriginal, ...breakintoItemsInContainers];

    breakintoItems.forEach(item => {
        const breakintoAttr = item.getAttribute('data-breakinto');

        // Skip if no breakinto attribute or empty value
        if (!breakintoAttr || breakintoAttr.trim() === '') {
            return;
        }

        // Parse the attribute value for container selector and optional breakpoint
        let containerSelector, customBreakpoint;

        if (breakintoAttr.includes('|')) {
            // Format: '.class | 767' or '#id | 1024'
            const parts = breakintoAttr.split('|').map(part => part.trim());
            containerSelector = parts[0];
            customBreakpoint = parseInt(parts[1], 10);

            // Validate custom breakpoint
            if (isNaN(customBreakpoint)) {
                console.warn(`Invalid breakpoint in data-breakinto="${breakintoAttr}". Using global breakpoint.`);
                customBreakpoint = null;
            }
        } else {
            // Format: '.class' or '#id'
            containerSelector = breakintoAttr.trim();
            customBreakpoint = null;
        }

        // Find the target container
        let targetContainer;
        try {
            targetContainer = document.querySelector(containerSelector);
        } catch (error) {
            console.error(`Invalid selector in data-breakinto="${breakintoAttr}":`, error);
            return;
        }

        if (!targetContainer) {
            console.warn(`Target container "${containerSelector}" not found for data-breakinto element.`);
            return;
        }

        // Determine breakpoint to use (custom or global)
        const breakpoint = customBreakpoint !== null ? customBreakpoint : MegaMenuCONFIG.minWidth;

        // Determine if item should be in target container (moved state)
        const shouldBeInContainer = currentWidth <= breakpoint;

        // Get current state of this breakinto item
        const currentItemState = breakintoItemStates.get(item);

        // Only process if this item's state changed
        if (currentItemState !== shouldBeInContainer) {
            breakintoItemStates.set(item, shouldBeInContainer);

            if (shouldBeInContainer) {
                // Move to target container

                // Store original parent and index if not already stored
                if (!breakintoOriginalParents.has(item)) {
                    const originalParent = item.parentElement;
                    const originalIndex = Array.from(originalParent.children).indexOf(item);
                    breakintoOriginalParents.set(item, originalParent);
                    breakintoOriginalIndexes.set(item, originalIndex);
                }

                // Mark item as moved and move to target container
                item.setAttribute('data-breakinto-moved', 'true');
                targetContainer.appendChild(item);

            } else {
                // Move back to original parent at original position
                const originalParent = breakintoOriginalParents.get(item);
                const originalIndex = breakintoOriginalIndexes.get(item);

                if (originalParent && originalIndex !== undefined) {
                    const children = originalParent.children;

                    // Remove the moved marker
                    item.removeAttribute('data-breakinto-moved');

                    if (originalIndex >= children.length) {
                        // Insert at the end if original index is beyond current children
                        originalParent.appendChild(item);
                    } else {
                        // Insert at the original position
                        originalParent.insertBefore(item, children[originalIndex]);
                    }
                }
            }
        }
    });
}

function handleResponsiveMenu() {
    const currentIsMobile = window.innerWidth < MegaMenuCONFIG.minWidth;
    const currentWidth = window.innerWidth;

    const nestMenu = document.querySelector('.dwc-nest-menu');
    if (!nestMenu) return;

    // Get all target items from both original locations and nest menu
    const targetItemsInOriginal = document.querySelectorAll('.brx-nav-nested-items > .menu-item > [data-breakout-link]');
    const targetItemsInNest = nestMenu.querySelectorAll('[data-breakout-link]');

    // Combine both nodelets into a single array
    const targetItems = [...targetItemsInOriginal, ...targetItemsInNest];
    let hasStateChange = false;

    targetItems.forEach(item => {

        if (item.closest('.dwc-header-logo-item')) return; // don't interfere with centerd logo item

        const parent = item.parentElement;
        const breakpointAttr = item.getAttribute('data-breakout-link');

        // Determine if item should be in mobile state
        let shouldBeMobile;

        if (!breakpointAttr || breakpointAttr.trim() === '') {
            // No custom breakpoint - use global mobile view logic
            shouldBeMobile = currentIsMobile;
        } else {
            // Custom breakpoint - check if within range
            const customBreakpoint = parseInt(breakpointAttr, 10);
            if (isNaN(customBreakpoint)) {
                // Invalid breakpoint value - fallback to global logic
                shouldBeMobile = currentIsMobile;
            } else {
                // Within custom range: between customBreakpoint and MegaMenuCONFIG.minWidth (exclusive)
                shouldBeMobile = currentWidth >= customBreakpoint && currentWidth < MegaMenuCONFIG.minWidth;
            }
        }

        // Get current state of this item
        const currentItemState = itemStates.get(item);

        // Only process if this item's state changed
        if (currentItemState !== shouldBeMobile) {
            hasStateChange = true;
            itemStates.set(item, shouldBeMobile);

            if (shouldBeMobile) {
                // Move to mobile state
                parent.classList.add('has-breakout-link');

                // Store original parent if not already stored
                if (!originalParents.has(item)) {
                    originalParents.set(item, parent);
                }

                // Move item to nest menu
                nestMenu.insertBefore(item, nestMenu.firstChild);

                // Hide the original parent
                parent.style.display = 'none';
            } else {
                // Move to desktop state - restore to original parent
                const originalParent = originalParents.get(item);
                if (originalParent) {
                    originalParent.appendChild(item);
                    originalParent.style.display = '';
                    originalParent.classList.remove('has-breakout-link');
                }
            }
        }
    });

    // Update global mobile view state only if there was a global state change
    if (isMobileView !== currentIsMobile) {
        isMobileView = currentIsMobile;
    }

    // Optional: You can add logic here if you need to do something when any state changes
    if (hasStateChange) {
        // Any additional logic when items change state
    }
}

function handleAllResponsiveElements() {
    handleResponsiveMenu(); // Handle breakout functionality
    handleBreakInItems();   // Handle breakin functionality
    handleBreakIntoItems(); // Handle breakinto functionality ← ADD THIS LINE
}

// Run on page load
handleAllResponsiveElements();

// Debounce resize events
window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(handleAllResponsiveElements, 150);
});

// Optional: Add for better initial load behavior
document.addEventListener('DOMContentLoaded', handleAllResponsiveElements);




// REINITIALIZE ON URL CHANGE
if (MegaMenuCONFIG.reinitializeOnURLchange) {
    console.log('on URL change active')
    function onUrlChange() {
        setTimeout(function () {
            mainMenu.reinitialize();
        }, 1500); // Delay execution by 1.5 seconds
    }

    // Listen for popstate event (history navigation)
    window.addEventListener('popstate', onUrlChange);

    // Listen for hashchange event (URL hash change)
    window.addEventListener('hashchange', onUrlChange);

    // Handle pushState and replaceState
    (function (history) {
        const pushState = history.pushState;
        const replaceState = history.replaceState;

        history.pushState = function (state) {
            const result = pushState.apply(history, arguments);
            onUrlChange(); // Call the function when pushState is used
            return result;
        };

        history.replaceState = function (state) {
            const result = replaceState.apply(history, arguments);
            onUrlChange(); // Call the function when replaceState is used
            return result;
        };
    })(window.history);
}

console.log('%c<Mega Menu Pro v1.4.2>', 'color: #b388eb');
/*prevent FOUC on mobile when using sidebar */
.dwc-mobile :is(.bricks-is-frontend.brx-header-left, .bricks-is-frontend.brx-header-right) #brx-header {
  position: relative;
  inline-size: 100%;
  flex-direction: column;
}

.dwc-mobile .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is(#brx-content, #brx-footer) {
  margin-inline-start: 0;
}

/*prevent FOUC on desktop when using sidebar */
.bricks-is-frontend:is(.brx-header-left, .brx-header-right):not(.show-nav) .dwc-nav-wrapper {
  display: none;
}

/*=== sidebar css ===*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]).no-scroll {
  overflow: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nav-wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu .brxe-toggle {
  display: none !important;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header :is(.brxe-code, .dwc-nest-menu-overlay) {
  display: none;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu-top {
  min-block-size: var(--top-offset);
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-hide-close-bar = 'true']) .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) + 1px) !important;

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-submenu-reveal = 'slide']) .brx-dropdown-content:not([data-submenu-reveal = 'slide'] *) {  
  inset-inline-start: 0;
  inset-block-start: unset !important;
  overflow: hidden;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
  visibility: hidden;  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;
  min-inline-size: var(--mobile-menu-width);

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button:not([data-submenu-reveal = 'expand'] button)  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal = 'slide'] > .brx-submenu-toggle button  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

/* sidebar css ends*/



/*sidebar in builder*/
/*=== sidebar css ===*/
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
  --top-offset: 40px;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nav-wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

body:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brxe-toggle {
  display: none !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu-top {
  min-block-size: var(--top-offset);
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) - 1px) !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;  
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu {
  margin: 0 !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .brx-nav-nested-items {  
  flex-direction: column !important;  
}
   
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-toggle--open.brxe-toggle {
  display: flex !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brx-nav-nested-items {
  position: relative !Important;
  background: var(--mobile-menu-bg) !important;
  align-items: stretch;
  flex: 1;
}

:where(.brx-header-left, .brx-header-right)[data-builder-mode]:not(:has(.dwc-sidebar)) .dwc-nest-menu-top::before {
    content: 'this space is the back text bar';
    padding: 1rem;
    background-color: gray;
    color: white;
    width: 100%;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}
 
/* MENU CTA (LAST BUTTON) */
:is(.brx-header-left, .brx-header-right)[data-builder-window] [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
  padding-inline: var(--menu-item-inline-padding) !important;
  padding-block: var(--menu-item-block-padding) !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu-top {
  min-block-size: 80px !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-nav-items {
  overflow-y: scroll;
}

:is(.brx-header-left, .brx-header-right)[data-builder-mode] .brx-dropdown-content {
  min-inline-size: var(--mobile-menu-width);
  position: static;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  flex-wrap: nowrap;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content {   
  visibility: visible !important;
  opacity: 1;
}

/*OVERLAY SIDEBAR*/


html:not(.dwc-mobile):has([data-overlay-sidebar=true])  {
 --mobile-menu-bg: rgb(255 255 255 / 0%);
  --menu-item-border: solid 1px rgb(255 255 255 / 50%);
 
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer){
  margin: 0 !important
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer) :where(section):not(section>section) {
  padding-inline-start: calc(var(--mobile-menu-width) + clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem));
  max-inline-size: 100%
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) #brx-header {
  border-radius: var(--overlay-sidebar-radius);
  overflow: hidden;
  background: var(--overlay-sidebar-bg);
  box-shadow: var(--overlay-sidebar-shadow) !important;
  inset: var(--overlay-sidebar-inset);
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) .dwc-nest-header{
  backdrop-filter: blur(13px);
  background: transparent !important;
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]):not([data-builder-modee])  .brx-dropdown-content {
   background-color: rgb(255 255 255 / 100%);
}

/*NO BRX-OPEN STYLES*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column !important;
}


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu.brxe-nav-nested .brxe-dropdown .brx-dropdown-content {
      visibility: visible;
      min-inline-size: var(--mobile-menu-width) !important;
  }


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-dropdown-content {
   position: static;
}


class SidebarNavigation {
  constructor(options = {}) {
    // Basic configuration properties
    this.config = {
      minWidth: options.minWidth || MegaMenuCONFIG.minWidth, // Using external minWidth variable
      menuSelector: options.menuSelector || '.dwc-nest-menu',
      openClass: options.openClass || 'brx-open',
      activeClasses: options.activeClasses || ['open', 'active'],
      leftHeaderClass: options.leftHeaderClass || 'brx-header-left',
      rightHeaderClass: options.rightHeaderClass || 'brx-header-right',
      debounceDelay: options.debounceDelay || 100,
      menuItemClickDelay: options.menuItemClickDelay || 300
    };
    
    // Set dependent selectors
    const menuSelector = this.config.menuSelector;
    this.config.submenuToggleSelector = options.submenuToggleSelector || `${menuSelector} .brx-submenu-toggle`;
    this.config.dropdownSelector = options.dropdownSelector || `${menuSelector} .brxe-dropdown`;
    this.config.dropdownContentSelector = options.dropdownContentSelector || `${menuSelector} .brx-dropdown-content`;
    
    // State
    this.previousHeaderClass = null;
    this.dropdownClickHandlers = new Map();
    this.menuHoverHandlers = null;
    this.menuItemClickTimeout = null;
    this.keyboardNavHandler = null;
    this.cachedFocusableElements = null;
    this.cachedElements = {
      menuElement: null,
      navElement: null,
      dropdowns: null,
      dropdownToggles: null,
      menuItems: null
    };
    
    // Bind methods to this instance
    this.handleResize = this.debounce(this.handleMenu.bind(this), this.config.debounceDelay);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }
  
  // Initialize everything - called once
  init() {
    // Wait for DOM to be fully loaded before attaching events
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => {
        this.initAfterDOMLoaded();
      }, { once: true });
    } else {
      this.initAfterDOMLoaded();
    }
    
    return this;
  }
  
  // Separate initialization method to run after DOM is loaded
  initAfterDOMLoaded() {
    // Cache DOM elements once
    this.cacheElements();
    
    // Setup resize event with passive flag
    window.addEventListener('resize', this.handleResize, { passive: true });
    
    // Setup mutation observer for critical class changes only
    this.setupMutationObserver();
    
    // Initial setup based on current screen size
    this.handleMenu();
    
    // Cache focusable elements once if header class is present
    if (this.hasHeaderClass()) {
      this.cacheFocusableElements();
      this.setupMenuFocusNavigation();
    }
  }
  
  // Cache all required DOM elements upfront
  cacheElements() {
    this.cachedElements.menuElement = document.querySelector(this.config.menuSelector);
    
    if (this.cachedElements.menuElement) {
      this.cachedElements.navElement = this.cachedElements.menuElement.querySelector('.dwc-nest-nav-items');
      this.cachedElements.dropdowns = Array.from(document.querySelectorAll(this.config.dropdownSelector));
      this.cachedElements.dropdownToggles = Array.from(document.querySelectorAll(this.config.submenuToggleSelector));
      this.cachedElements.menuItems = Array.from(document.querySelectorAll(`${this.config.menuSelector} .menu-item`));
    }
  }
  
  // Set up a focused mutation observer only for dropdown state changes
  setupMutationObserver() {
    if (!this.cachedElements.dropdowns || this.cachedElements.dropdowns.length === 0) return;
    
    const callback = (mutations) => {
      for (let mutation of mutations) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          const target = mutation.target;
          const prevClassList = mutation.oldValue ? mutation.oldValue.split(' ') : [];
          const hadBothBefore = prevClassList.includes('open') && prevClassList.includes('active');
          const hasBothNow = target.classList.contains('open') && target.classList.contains('active');
    
          if (hadBothBefore !== hasBothNow) {
            this.updateDropdownAccessibility();
            break; // Only need to update once per batch
          }
        }
      }
    };
    
    // Create observer with optimized options
    this.classObserver = new MutationObserver(callback);
    
    // Observe only the dropdown elements
    this.cachedElements.dropdowns.forEach(dropdown => {
      this.classObserver.observe(dropdown, { 
        attributes: true, 
        attributeFilter: ['class'], 
        attributeOldValue: true 
      });
    });
  }
  
  // Cache focusable elements for keyboard navigation
  cacheFocusableElements() {
    if (!this.cachedElements.navElement) return;
    
    // Get direct children of nav
    const directChildren = Array.from(this.cachedElements.navElement.children);
    
    // Find the first focusable element within each direct child
    this.cachedFocusableElements = directChildren.map(child => {
      // Check if the child itself is focusable
      if (child.matches('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')) {
        return child;
      }
      // Otherwise, find the first focusable element within this child
      return child.querySelector('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
    }).filter(Boolean); // Remove null/undefined values
  }
  
  // Clean up all event listeners and observers
  destroy() {
    // Clean up the mutation observer
    if (this.classObserver) {
      this.classObserver.disconnect();
      this.classObserver = null;
    }
    
    // Clean up resize listener
    window.removeEventListener('resize', this.handleResize);
    
    // Clean up click handlers
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
    
    // Clean up hover handlers
    this.cleanupMenuHover();
    
    // Clean up menu item click handlers
    this.cleanupMenuItemClicks();
    
    // Clean up outside click handler
    document.removeEventListener('click', this.handleOutsideClick);
    
    // Clean up keyboard navigation
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler);
      this.keyboardNavHandler = null;
    }
    
    // Clear any pending timeouts
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  // Utility methods
  hasHeaderClass() {
    return document.body.classList.contains(this.config.leftHeaderClass) || 
           document.body.classList.contains(this.config.rightHeaderClass);
  }
  
  debounce(func, delay) {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(...args), delay);
    };
  }

  // Check if an element has all the required active classes
  hasAllActiveClasses(element) {
    return this.config.activeClasses.every(className => element.classList.contains(className));
  }
  
  // Toggle all active classes on an element
  toggleActiveClasses(element) {
    this.config.activeClasses.forEach(className => {
      element.classList.toggle(className);
    });
  }
  
  // Core functionality methods
  handleMenu() {
    if (!this.cachedElements.menuElement) return;
    if (!this.hasHeaderClass() && !this.previousHeaderClass) return;

    const screenWidth = window.innerWidth;
    const isLargeScreen = screenWidth >= this.config.minWidth;
    const menuElement = this.cachedElements.menuElement;

    if (!isLargeScreen) {
      // Save which class was present before removal
      if (this.hasHeaderClass()) {
        this.previousHeaderClass = document.body.classList.contains(this.config.leftHeaderClass) 
          ? this.config.leftHeaderClass 
          : this.config.rightHeaderClass;
        
        // Remove header classes
        document.body.classList.remove(this.config.leftHeaderClass, this.config.rightHeaderClass);
        menuElement.classList.remove(this.config.openClass);
        
        // Reset accessibility attributes
        this.resetAccessibilityAttributes();
      }
      
      // Clean up event handlers for mobile view
      this.cleanupMenuHover();
      this.cleanupMenuItemClicks();
      this.cleanupDropdownHandlers();
      document.removeEventListener('click', this.handleOutsideClick);
      
      return;
    }

    // Large screen behavior
    if (!this.hasHeaderClass() && this.previousHeaderClass) {
      document.body.classList.add(this.previousHeaderClass);
    }

    if (this.hasHeaderClass()) {
      if (!menuElement.classList.contains(this.config.openClass)) {
        menuElement.classList.add(this.config.openClass);
      }
      
      // Setup elements for large screen view
      this.setupMenuHover();
      this.setupMenuItemClicks();
      this.setupDropdownHandlers();
      this.setupMenuFocusNavigation();
      this.updateDropdownAccessibility();
      
      // Ensure outside click handler is set up
      document.removeEventListener('click', this.handleOutsideClick);
      document.addEventListener('click', this.handleOutsideClick, { passive: false });
    }
  }
  
  // Reset accessibility attributes when switching to mobile
  resetAccessibilityAttributes() {
    if (!this.cachedElements.dropdowns) return;
    
    // Remove all inert attributes from dropdown contents
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      if (content) {
        content.removeAttribute('inert');
      }
      
      const button = dropdown.querySelector('button');
      if (button) {
        button.setAttribute('aria-expanded', 'false');
      }
    });
  }
  
  setupMenuFocusNavigation() {
    // Only run if hasHeaderClass() is true and we have focusable elements
    if (!this.hasHeaderClass() || !this.cachedFocusableElements || this.cachedFocusableElements.length === 0) {
      return;
    }
    
    // Clean up previous handler if it exists
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler, true);
      this.keyboardNavHandler = null;
    }
    
    const navMenu = this.cachedElements.menuElement;
    const focusableElements = this.cachedFocusableElements;
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];
    
    // Find adjacent focusable elements outside the menu (only once during setup)
    const headerElement = navMenu.closest('header') || document.querySelector('header');
    
    // Prepare variables to hold adjacent elements
    let prevFocusableElement = null;
    let nextFocusableElement = null;
    let firstElementAfterHeader = null;
    
    if (headerElement) {
      // Get all focusable elements within the header - do this once and cache the result
      const headerFocusables = Array.from(
        headerElement.querySelectorAll('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])')
      ).filter(el => window.getComputedStyle(el).display !== 'none');
      
      // Find the index of our first and last menu elements in one pass
      const menuStartIndex = headerFocusables.indexOf(firstFocusableElement);
      const menuEndIndex = headerFocusables.indexOf(lastFocusableElement);
      
      // Cache the adjacent elements
      if (menuStartIndex > 0) {
        prevFocusableElement = headerFocusables[menuStartIndex - 1];
      }
      
      if (menuEndIndex !== -1 && menuEndIndex < headerFocusables.length - 1) {
        nextFocusableElement = headerFocusables[menuEndIndex + 1];
      }
      
      // Pre-calculate the first element after header - but only if needed
      if (!nextFocusableElement) {
        // Use a more efficient selector that targets immediate children of body that aren't the header
        const selector = 'body > *:not(header)';
        const nonHeaderElements = document.querySelectorAll(selector);
        
        // Only process if we have elements
        if (nonHeaderElements.length > 0) {
          // Create a function to find the first focusable element (used later if needed)
          this.findFirstFocusableAfterHeader = () => {
            for (const element of nonHeaderElements) {
              const focusable = element.querySelector('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])');
              if (focusable && window.getComputedStyle(focusable).display !== 'none') {
                return focusable;
              }
            }
            return null;
          };
        }
      }
    }
    
    // Create keyboard navigation handler with closure over the cached elements
    this.keyboardNavHandler = (e) => {
      // Quick check for Tab key first
      if (e.key !== 'Tab') return;
      
      // Then check if focus is inside the menu
      if (!navMenu.contains(document.activeElement)) return;
      
      let targetElement = null;
      
      // Handle tab navigation at boundaries only
      if (!e.shiftKey && document.activeElement === lastFocusableElement) {
        // Forward tab from last element
        e.preventDefault();
        e.stopPropagation();
        
        if (nextFocusableElement) {
          targetElement = nextFocusableElement;
        } else if (this.findFirstFocusableAfterHeader) {
          // Only search for elements after header if needed and not already found
          firstElementAfterHeader = this.findFirstFocusableAfterHeader();
          targetElement = firstElementAfterHeader;
        }
        
        // Focus on the target or body as fallback
        setTimeout(() => {
          if (targetElement) {
            targetElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      } 
      else if (e.shiftKey && document.activeElement === firstFocusableElement) {
        // Backward tab from first element
        e.preventDefault();
        e.stopPropagation();
        
        setTimeout(() => {
          if (prevFocusableElement) {
            prevFocusableElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      }
    };
    
    // Use capture phase for the event
    document.addEventListener('keydown', this.keyboardNavHandler, true);
  }
  
  setupMenuHover() {
    const menuElement = this.cachedElements.menuElement;
    if (!menuElement) return;
    
    // Clean up existing hover handlers first
    this.cleanupMenuHover();
    
    // Create event handlers
    const mouseenterHandler = () => {
      menuElement.classList.add(this.config.openClass);
    };
    
    const mouseleaveHandler = () => {
      menuElement.classList.remove(this.config.openClass);
    };
    
    // Add event listeners with passive flag for better performance
    menuElement.addEventListener('mouseenter', mouseenterHandler, { passive: true });
    menuElement.addEventListener('mouseleave', mouseleaveHandler, { passive: true });
    
    // Store the handlers for cleanup
    this.menuHoverHandlers = {
      element: menuElement,
      mouseenter: mouseenterHandler,
      mouseleave: mouseleaveHandler
    };
  }
  
  cleanupMenuHover() {
    if (this.menuHoverHandlers) {
      const { element, mouseenter, mouseleave } = this.menuHoverHandlers;
      element.removeEventListener('mouseenter', mouseenter);
      element.removeEventListener('mouseleave', mouseleave);
      this.menuHoverHandlers = null;
    }
  }
  
  setupMenuItemClicks() {
    if (!this.cachedElements.menuItems || this.cachedElements.menuItems.length === 0) return;
    
    // Clean up existing handlers first
    this.cleanupMenuItemClicks();
    
    const menuElement = this.cachedElements.menuElement;
    const menuItemHandlers = new Map();
    
    this.cachedElements.menuItems.forEach(item => {
      const clickHandler = () => {
        if (this.hasHeaderClass()) {
          // Clear any existing timeout
          if (this.menuItemClickTimeout) {
            clearTimeout(this.menuItemClickTimeout);
          }
          
          // Set timeout before adding the class
          this.menuItemClickTimeout = setTimeout(() => {
            if (!menuElement.classList.contains(this.config.openClass)) {
              menuElement.classList.add(this.config.openClass);
            }
          }, this.config.menuItemClickDelay);
        }
      };
      
      menuItemHandlers.set(item, clickHandler);
      item.addEventListener('click', clickHandler);
    });
    
    this.menuItemClickHandlers = menuItemHandlers;
  }
  
  cleanupMenuItemClicks() {
    if (this.menuItemClickHandlers && this.menuItemClickHandlers instanceof Map) {
      this.menuItemClickHandlers.forEach((handler, item) => {
        item.removeEventListener('click', handler);
      });
      this.menuItemClickHandlers.clear();
    }
    
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  setupDropdownHandlers() {
    if (!this.hasHeaderClass() || !this.cachedElements.dropdownToggles) return;
    
    // Clean up existing handlers first
    this.cleanupDropdownHandlers();
    
    this.cachedElements.dropdownToggles.forEach(toggle => {
      const clickHandler = (event) => {
        event.stopPropagation();
        event.preventDefault();
        
        const dropdown = toggle.closest(this.config.dropdownSelector);
        if (dropdown) {
          this.toggleActiveClasses(dropdown);
          this.updateDropdownAccessibility();
        }
      };
      
      this.dropdownClickHandlers.set(toggle, clickHandler);
      toggle.addEventListener('click', clickHandler);
    });
  }
  
  cleanupDropdownHandlers() {
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
  }
  
  handleOutsideClick(event) {
    if (event.target.tagName === 'A') return;
    if (!event.target.closest(this.config.dropdownSelector)) return;
    if (!event.target.closest(this.config.submenuToggleSelector)) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  
  updateDropdownAccessibility() {
    // Only run if hasHeaderClass() is true
    if (!this.hasHeaderClass() || !this.cachedElements.dropdowns) return;
    
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      const button = dropdown.querySelector('button');
      
      // Check if dropdown has all active classes
      const isOpen = this.hasAllActiveClasses(dropdown);
      
      if (content) {
        if (isOpen) {
          content.removeAttribute('inert');
        } else {
          content.setAttribute('inert', '');
        }
      }
      
      if (button) {
        button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      }
    });
  }
}


const sidebarNav = new SidebarNavigation().init();

Black Hat 2024: Belangrijkste Lessen

Black Hat 2024, een van de belangrijkste jaarlijkse conferenties op het gebied van cybersecurity, biedt een unieke inkijk in de nieuwste dreigingen en verdedigingsstrategieën in de digitale wereld. Deze conferentie trekt cybersecurityprofessionals en experts van over de hele wereld aan, die samenkomen om kennis te delen over de meest geavanceerde hacking-technieken, softwarebugs en oplichtingspraktijken die momenteel de grootste zorgen baren.

De relevantie van de informatie die op Black Hat wordt gepresenteerd, reikt echter verder dan alleen de professionals. De besproken onderwerpen hebben directe implicaties voor het bredere publiek, aangezien de geavanceerde technieken en bugs die hier worden onthuld, ook het potentieel hebben om consumenten en bedrijven wereldwijd te treffen. Daarom biedt deze conferentie waardevolle lessen voor iedereen die zich bezighoudt met online veiligheid.

Lees verder over de zorgwekkende hacking-technieken en scams die tijdens de conferentie zijn besproken. Door inzicht te krijgen in deze dreigingen, kunnen zowel individuen als organisaties beter voorbereid zijn op de uitdagingen van de digitale wereld en proactieve stappen ondernemen om hun online veiligheid te verbeteren.

2024 08 12 17 59 03

Overzicht van de Belangrijkste Hacks

De cybersecuritywereld is voortdurend in beweging, en de technieken die cybercriminelen gebruiken, worden steeds geavanceerder. Op Black Hat 2024 werden enkele van de meest zorgwekkende hacking-methoden en kwetsbaarheden gepresenteerd die bedrijven over de hele wereld bedreigen. Dit artikel biedt een overzicht van drie cruciale gebieden: Advanced Persistent Threats (APT’s), Supply Chain Attacks en Zero-Day Exploits, en hoe deze de cyberbeveiliging drastisch beïnvloeden.

Advanced Persistent Threats (APT’s)

Advanced Persistent Threats (APT’s) vertegenwoordigen een van de meest geavanceerde vormen van hacking die gericht zijn op langdurige infiltratie en diefstal van gevoelige informatie. Deze aanvallen zijn doorgaans gesponsord door staten of goed gefinancierde groepen en zijn erop gericht langdurig en onopgemerkt in een netwerk aanwezig te blijven. Wat de nieuwste APT-technieken zo verontrustend maakt, is hun capaciteit om zich aan te passen en te evolueren, waardoor traditionele beveiligingsmaatregelen vaak ontoereikend zijn.

Op Black Hat 2024 werd benadrukt dat APT’s steeds vaker gebruikmaken van geavanceerde social engineering-technieken om initiële toegang te verkrijgen. Eenmaal binnen kunnen aanvallers laterale bewegingen uitvoeren binnen het netwerk, waarbij ze systemen compromitteren zonder detectie. Deze aanvallen richten zich niet alleen op het stelen van gegevens, maar kunnen ook sabotage, spionage en verstoring van vitale infrastructuren omvatten. De focus van APT’s op langdurige infiltratie betekent dat ze maanden of zelfs jaren onopgemerkt kunnen blijven, wat de schade exponentieel vergroot.

Supply Chain Attacks

Supply Chain Attacks zijn de afgelopen jaren in frequentie en complexiteit toegenomen en vormen een bijzonder gevaar voor bedrijven wereldwijd. Deze aanvallen richten zich niet rechtstreeks op het doelwit, maar op de leveranciers of derden die cruciale diensten of software leveren. Door een zwakke schakel in de toeleveringsketen te compromitteren, kunnen hackers toegang krijgen tot meerdere bedrijven die afhankelijk zijn van diezelfde leverancier.

Een recent voorbeeld van een supply chain-aanval die op Black Hat 2024 werd besproken, is de aanval op SolarWinds, waarbij kwaadwillenden schadelijke updates naar duizenden klanten stuurden, waaronder overheidsinstellingen en grote bedrijven. Dit soort aanvallen toont aan hoe kwetsbaar de digitale infrastructuur van bedrijven kan zijn, zelfs als ze zelf sterke beveiligingsmaatregelen hebben genomen. Het compromitteren van één leverancier kan leiden tot massale datalekken en langdurige verstoringen.

De dreiging van supply chain-aanvallen vereist dat bedrijven niet alleen hun eigen beveiligingsprotocollen aanscherpen, maar ook die van hun leveranciers en partners nauwlettend in de gaten houden. Het controleren van de beveiligingsmaatregelen van alle partijen in de toeleveringsketen en het regelmatig uitvoeren van audits zijn cruciale stappen om het risico van dergelijke aanvallen te minimaliseren.

Zero-Day Exploits

Zero-Day Exploits zijn kwetsbaarheden in software die onbekend zijn bij de leverancier en waarvoor nog geen patch of oplossing beschikbaar is. Deze exploits zijn bijzonder gevaarlijk omdat ze door hackers kunnen worden uitgebuit voordat de ontwikkelaar ervan op de hoogte is en een oplossing kan bieden. Op Black Hat 2024 werden meerdere zero-day-kwetsbaarheden onthuld, die de potentiële impact van dergelijke exploits op softwarebeveiliging benadrukten.

Een zero-day-aanval kan variëren van het stelen van gevoelige gegevens tot het volledig overnemen van een systeem. De snelheid waarmee hackers kunnen reageren op het ontdekken van een zero-day kwetsbaarheid is wat deze aanvallen zo effectief maakt. Bovendien, omdat deze exploits vaak op de zwarte markt worden verhandeld voor aanzienlijke bedragen, zijn ze een lucratief doelwit voor cybercriminelen.

De onthullingen op Black Hat 2024 benadrukken de noodzaak voor softwareontwikkelaars om proactieve beveiligingsstrategieën te implementeren, zoals bug bounties en penetratietests, om kwetsbaarheden vroegtijdig op te sporen en te verhelpen. Organisaties moeten ook ervoor zorgen dat hun systemen altijd up-to-date zijn met de nieuwste beveiligingspatches om het risico van een zero-day exploit te verkleinen.

Hacking

De dreigingen die op Black Hat 2024 werden gepresenteerd, onderstrepen de noodzaak voor bedrijven om hun cyberbeveiliging voortdurend te evalueren en te verbeteren. Advanced Persistent Threats, Supply Chain Attacks en Zero-Day Exploits vormen serieuze uitdagingen die niet kunnen worden genegeerd. Door robuuste beveiligingsmaatregelen te implementeren en waakzaam te blijven voor nieuwe vormen van hacking, kunnen organisaties hun kwetsbaarheid verminderen en de schade van mogelijke aanvallen beperken.

004146

De Nieuwste Cyberdreigingen

De afgelopen jaren hebben met name drie specifieke domeinen de aandacht getrokken vanwege hun unieke en gevaarlijke kwetsbaarheden: hardware hacks, software bugs, en de dreiging van quantum computing. Deze aspecten vertegenwoordigen niet alleen de cutting edge van hacking, maar ook de groeiende complexiteit van de bescherming van digitale systemen.

Hardware Hacks: Nieuwe Fronten in Cyberoorlog

Hardware-kwetsbaarheden vormen een nieuw en gevaarlijk front in de strijd tegen cyberdreigingen. Waar de meeste mensen bij hacking denken aan software-inbreuken, hebben recente ontdekkingen aangetoond dat hardware steeds meer het doelwit wordt van geavanceerde aanvallen. Deze aanvallen richten zich met name op Internet of Things (IoT)-apparaten en industriële controlesystemen, die vaak kritieke functies vervullen binnen infrastructuren.

IoT-apparaten, zoals slimme thermostaten, beveiligingscamera’s en industriële sensoren, zijn vaak kwetsbaar omdat ze niet altijd met robuuste beveiligingsprotocollen worden ontworpen. Deze apparaten zijn doorgaans verbonden met netwerken en zijn daardoor potentieel toegangsporten voor aanvallers. Een hacker die in staat is om controle te krijgen over een IoT-apparaat kan bijvoorbeeld de sensoren in een fabriekslijn manipuleren, wat kan leiden tot enorme financiële verliezen of zelfs gevaar voor mensenlevens. Een recent voorbeeld is de hack van een waterzuiveringsinstallatie, waarbij aanvallers via kwetsbaarheden in de hardware chloorwaarden in het water probeerden te manipuleren.

Industriële controlesystemen, zoals die in energiecentrales en transportnetwerken, zijn eveneens kwetsbaar. Dit soort systemen wordt vaak geïnstalleerd met een levensduur van tientallen jaren, waardoor ze verouderde technologieën bevatten die niet tegen moderne dreigingen zijn bestand. Een hacking-incident op een dergelijk systeem kan catastrofale gevolgen hebben, zoals massale stroomuitval of verstoring van transportdiensten.

Software Bugs: De Zwakke Schakel in Digitale Beveiliging

Hoewel hardware-aanvallen toenemen, blijven software bugs een van de meest voorkomende en gevaarlijke kwetsbaarheden. Software bugs zijn fouten in de code van een programma die onbedoeld kwetsbaarheden kunnen introduceren. Kwaadwillenden kunnen deze kwetsbaarheden uitbuiten om ongeautoriseerde toegang te krijgen tot systemen of om deze te verstoren.

Een recent voorbeeld van een ernstige softwarebug is de kwetsbaarheid bekend als “Log4Shell”, die werd ontdekt in de Log4j-bibliotheek, een veelgebruikte logging-tool in Java-applicaties. Deze bug stelde aanvallers in staat om op afstand code uit te voeren op getroffen systemen, wat leidde tot een wereldwijde paniek onder ontwikkelaars en bedrijven. De impact van deze bug was enorm omdat Log4j op miljoenen servers en apparaten wereldwijd werd gebruikt. Een hacker kon deze bug misbruiken om volledige controle over een systeem te krijgen, gegevens te stelen, of verdere malware te installeren.

Naast Log4Shell zijn er talloze andere softwarebugs die jaarlijks worden ontdekt. Het probleem met deze bugs is dat ze vaak onopgemerkt blijven tot ze door kwaadwillenden worden ontdekt en uitgebuit. Dit benadrukt het belang van regelmatige software-updates en patchmanagement om systemen veilig te houden.

Quantum Computing: Een Dreiging voor de Toekomst van Encryptie

Quantum computing vertegenwoordigt een van de meest uitdagende dreigingen voor de toekomst van cyberbeveiliging. Hoewel deze technologie nog in ontwikkeling is, is de potentie ervan om huidige encryptiestandaarden te breken een zorgwekkend vooruitzicht. De meeste moderne encryptie is gebaseerd op complexe wiskundige problemen die met de huidige computersystemen onmogelijk snel kunnen worden opgelost. Echter, quantum computers zijn in staat om deze problemen veel sneller op te lossen.

Dit betekent dat zodra quantum computing op grote schaal beschikbaar is, veel van de huidige encryptiemethoden, zoals RSA en ECC, niet langer veilig zullen zijn. Dit zou een revolutie teweegbrengen in hacking, waarbij kwaadwillenden in staat zouden zijn om versleutelde gegevens te ontsleutelen die tot nu toe veilig werden geacht. Dit heeft implicaties voor alles, van online transacties tot de beveiliging van persoonlijke gegevens.

Er worden al stappen ondernomen om quantum-resistente encryptie te ontwikkelen, maar de technologie is nog niet volwassen genoeg om de huidige standaarden volledig te vervangen. Dit maakt het noodzakelijk voor organisaties om zich voor te bereiden op een toekomst waarin quantum computing een realiteit is en om proactief te investeren in onderzoek en ontwikkeling van quantumveilige beveiligingstechnieken.

2024 08 12 18 12 18

Opkomst van Geavanceerde Scams

Cybercriminelen maken gebruik van steeds geavanceerdere methoden om slachtoffers te misleiden en financiële of persoonlijke gegevens te stelen. Drie van de meest zorgwekkende trends in dit domein zijn social engineering-aanvallen, deepfakes in combinatie met phishing, en cryptocurrency-fraude. Deze methoden, die tijdens de Black Hat 2024-conferentie uitvoerig werden besproken, laten zien hoe het hacking-landschap verandert en hoe belangrijk het is voor individuen en organisaties om alert te blijven.

Social Engineering Attacks

Social engineering is al jarenlang een populaire techniek onder cybercriminelen, maar de methoden worden steeds geavanceerder en moeilijker te detecteren. Social engineering-aanvallen berusten op psychologische manipulatie, waarbij aanvallers proberen slachtoffers te overtuigen om vrijwillig gevoelige informatie te verstrekken. Dit kan variëren van het klikken op een schadelijke link in een ogenschijnlijk onschuldige e-mail tot het overhandigen van wachtwoorden via de telefoon.

De nieuwe generatie social engineering-aanvallen maakt gebruik van gepersonaliseerde en doelgerichte tactieken. Aanvallers verzamelen uitgebreide informatie over hun doelwitten via sociale media en andere openbare bronnen. Vervolgens gebruiken ze deze informatie om hun aanvallen geloofwaardiger en moeilijker te detecteren te maken. Bijvoorbeeld, een werknemer kan een e-mail ontvangen die lijkt te komen van een collega of een leidinggevende, waarin gevraagd wordt om dringend toegang te verlenen tot een belangrijk document. Omdat de aanvaller zoveel mogelijk relevante informatie heeft verzameld, lijkt de e-mail legitiem, wat de kans vergroot dat het slachtoffer in de val trapt.

Deepfakes en Phishing

Een van de meest verontrustende ontwikkelingen in de wereld van hacking is het gebruik van deepfake-technologie om phishing-aanvallen naar een nieuw niveau te tillen. Deepfakes zijn gemanipuleerde media, zoals video’s of audio-opnamen, die lijken alsof ze echt zijn, maar in werkelijkheid zijn ze kunstmatig gecreëerd met behulp van kunstmatige intelligentie. Deze technologie wordt nu door criminelen gebruikt om phishing-aanvallen nog overtuigender te maken.

In plaats van alleen te vertrouwen op e-mails of berichten, gebruiken aanvallers deepfakes om video’s of spraakberichten te maken die lijken te komen van vertrouwde personen, zoals leidinggevenden binnen een organisatie. Bijvoorbeeld, een werknemer kan een videoboodschap ontvangen die lijkt te zijn opgenomen door de CEO van het bedrijf, met instructies om geld over te maken naar een bepaald rekeningnummer. Omdat de video er realistisch uitziet en de stem exact lijkt, is de kans groot dat het slachtoffer gehoor geeft aan de instructies.

Deze vorm van phishing is bijzonder gevaarlijk omdat het moeilijk te detecteren is met traditionele beveiligingsmaatregelen. Organisaties moeten daarom nieuwe methoden ontwikkelen om deepfakes te herkennen en hun werknemers bewust maken van deze dreiging.

Cryptocurrency Fraude

De opkomst van cryptocurrencies heeft een nieuwe wereld van mogelijkheden geopend voor cybercriminelen. Tijdens Black Hat 2024 werden verschillende nieuwe vormen van cryptocurrency-fraude besproken, die laten zien hoe criminelen profiteren van de anonimiteit en de ongereguleerde aard van digitale valuta.

Een van de meest voorkomende vormen van cryptocurrency-fraude is het zogenaamde “rug pull”-schema. Hierbij wordt een cryptocurrency-project opgezet met de belofte van hoge rendementen, waarbij investeerders worden aangemoedigd om hun geld in te leggen. Zodra er voldoende geld is verzameld, verdwijnen de oplichters met het geld, waardoor de waarde van de cryptocurrency instort en de investeerders met lege handen achterblijven.

Daarnaast gebruiken criminelen ook geavanceerde phishing-technieken om toegang te krijgen tot cryptocurrency-portefeuilles. Dit kan variëren van het sturen van valse e-mails die lijken te komen van een legitieme cryptocurrency-uitwisseling tot het opzetten van nep-websites die inloggegevens stelen. Omdat transacties met cryptocurrencies moeilijk te traceren zijn en vaak niet teruggedraaid kunnen worden, zijn slachtoffers van deze vorm van hacking vaak voorgoed hun geld kwijt.

De populariteit van cryptocurrencies blijft groeien, en daarmee ook de complexiteit van de fraude die ermee gepaard gaat. Het is daarom essentieel voor zowel particulieren als bedrijven om extra waakzaam te zijn en geavanceerde beveiligingsmaatregelen te implementeren.

Hacking

De opkomst van geavanceerde scams zoals social engineering-aanvallen, deepfakes in phishing, en cryptocurrency-fraude benadrukt de noodzaak voor voortdurende bewustwording en beveiligingsverbeteringen. Hacking-methoden worden steeds geavanceerder, en zonder adequate bescherming en kennis kunnen individuen en organisaties het doelwit worden van deze moderne cyberbedreigingen. Het is van cruciaal belang om beveiligingsprotocollen voortdurend te evalueren en te verbeteren, en ervoor te zorgen dat iedereen in de organisatie op de hoogte is van de nieuwste dreigingen en hoe deze kunnen worden voorkomen.

2024 08 12 18 12 06

Implicaties voor Cybersecurity

De technieken en tools die op evenementen zoals Black Hat 2024 werden gepresenteerd, tonen aan dat de taak van cyberverdedigers steeds complexer wordt. De snelle evolutie van hacking-methoden vereist dat organisaties voortdurend innoveren om zichzelf te beschermen tegen nieuwe dreigingen.

Verhoogde Complexiteit van Verdediging

De geavanceerde methoden die door hackers worden gebruikt, maken het voor cybersecurity-teams steeds moeilijker om een effectieve verdediging op te zetten. Technieken zoals “smash and grab” aanvallen, waarbij hackers snel waardevolle gegevens exfiltreren zonder langdurige aanwezigheid in het systeem, illustreren de snelheid en precisie waarmee cyberaanvallen tegenwoordig worden uitgevoerd. Dit verhoogt de druk op verdedigingsmechanismen die traditioneel zijn ontworpen om langdurige aanvallen te detecteren en te neutraliseren. De uitdaging ligt niet alleen in het herkennen van deze nieuwe aanvalspatronen, maar ook in het reageren voordat er onherstelbare schade wordt aangericht.

Noodzaak voor Innovatie

Om deze verhoogde dreiging het hoofd te bieden, is voortdurende innovatie in cyberbeveiliging essentieel. De traditionele methoden, zoals het simpelweg versterken van de netwerkperimeter, zijn niet langer voldoende. In plaats daarvan moeten organisaties investeren in geavanceerde detectie- en responsmechanismen die in staat zijn om snel in te spelen op de nieuwste hacking-technieken. Innovatie kan ook komen in de vorm van nieuwe benaderingen zoals Zero Trust-beveiliging, waarbij geen enkele entiteit binnen of buiten het netwerk zonder meer wordt vertrouwd. Dit soort modellen dwingen organisaties om hun beveiliging holistisch te benaderen en ervoor te zorgen dat alle onderdelen van hun infrastructuur worden beschermd.

Betere Bewustwording en Training

Naast technologische innovatie is het verbeteren van bewustwording en training binnen organisaties cruciaal. Veel hacking-aanvallen slagen doordat menselijke fouten of onwetendheid worden uitgebuit. Phishing en social engineering blijven enkele van de meest effectieve methoden voor aanvallers om toegang te krijgen tot systemen. Daarom is het belangrijk dat medewerkers worden getraind om verdachte activiteiten te herkennen en te melden. Een goed geïnformeerd personeelsbestand kan dienen als een eerste verdedigingslinie tegen hacking-aanvallen, door aanvallen te identificeren voordat ze schade kunnen aanrichten.

Samenvattend, de complexe en snel veranderende aard van cyberdreigingen vereist dat organisaties hun verdedigingsstrategieën voortdurend herzien en innoveren. Door te investeren in zowel technologische oplossingen als in training en bewustwording, kunnen bedrijven zichzelf beter beschermen tegen de steeds geavanceerdere hacking-methoden die door cybercriminelen worden ingezet.

Aanbevelingen voor Organisaties

De lessen van Black Hat 2024 hebben duidelijk gemaakt dat traditionele beveiligingsmaatregelen vaak niet meer volstaan om moderne aanvallen af te weren. Organisaties moeten daarom proactief en strategisch handelen om hun cyberverdediging te versterken. Dit zijn de drie belangrijke aanbevelingen : de implementatie van een Zero Trust-model, het investeren in Cyber Threat Intelligence, en het versterken van incident response-teams.

Implementatie van Zero Trust

Een van de meest effectieve manieren om de beveiligingsperimeter van een organisatie te versterken, is door het implementeren van een Zero Trust-model. Zero Trust is een beveiligingsconcept dat uitgaat van het principe dat geen enkele gebruiker of apparaat wordt vertrouwd, ongeacht of ze zich binnen of buiten het netwerk bevinden. Dit model biedt een uitgebreide en holistische benadering van beveiliging, waarbij elk toegangspunt streng wordt gecontroleerd.

De implementatie van Zero Trust begint met het segmenteren van netwerken en het instellen van strikte toegangscontroles. Organisaties moeten ervoor zorgen dat alleen geautoriseerde gebruikers toegang hebben tot specifieke delen van het netwerk en dat elke toegangspoging zorgvuldig wordt geverifieerd. Dit betekent dat multifactor authenticatie (MFA) een standaard moet worden, waarbij gebruikers hun identiteit moeten bewijzen via meerdere onafhankelijke factoren voordat ze toegang krijgen.

Daarnaast is het essentieel om het gebruik van minst-privilege-principes te hanteren. Dit houdt in dat gebruikers alleen toegang krijgen tot de gegevens en systemen die ze nodig hebben voor hun werk, en niets meer. Dit beperkt de impact van mogelijke inbreuken aanzienlijk.

Tot slot moeten organisaties hun Zero Trust-model voortdurend monitoren en aanpassen aan de nieuwste bedreigingen en technologieën. De dynamische aard van cyberdreigingen vereist een flexibele en aanpasbare aanpak om effectief te blijven.

Investeren in Cyber Threat Intelligence

Om op de hoogte te blijven van de laatste dreigingen en trends in de cyberwereld, is het voor organisaties van groot belang om te investeren in Cyber Threat Intelligence (CTI). CTI biedt waardevolle inzichten in de technieken, tactieken en procedures (TTP’s) die door kwaadwillenden worden gebruikt, en helpt organisaties om hun verdediging hierop af te stemmen.

Door gebruik te maken van CTI kunnen organisaties potentiële aanvallen detecteren voordat ze plaatsvinden en kunnen ze kwetsbaarheden in hun systemen identificeren en verhelpen. Dit is vooral belangrijk gezien de snelheid waarmee nieuwe aanvalstechnieken en hacking-methoden worden ontwikkeld. CTI kan organisaties helpen om bedreigingen te prioriteren en hun middelen effectief in te zetten om de meest kritieke risico’s aan te pakken.

Daarnaast kan CTI worden gebruikt om incident response-teams beter voor te bereiden op potentiële aanvallen. Door inzicht te krijgen in de modus operandi van hackers, kunnen deze teams sneller en gerichter reageren wanneer een aanval plaatsvindt.

Versterking van Incident Response Teams

Zelfs met de beste preventieve maatregelen is het onvermijdelijk dat organisaties te maken krijgen met beveiligingsincidenten. Daarom is het cruciaal om incident response-teams te versterken en goed voor te bereiden op snelle en effectieve reacties.

Een sterk incident response-team moet beschikken over de juiste tools en technologieën om snel verdachte activiteiten te detecteren en te analyseren. Dit omvat bijvoorbeeld het gebruik van geavanceerde monitoring- en detectietools die afwijkingen in netwerkgedrag kunnen identificeren. Bovendien moeten deze teams beschikken over duidelijke protocollen en procedures voor het beheren van incidenten, zodat ze snel kunnen handelen en de schade kunnen beperken.

Training en simulaties zijn eveneens essentieel voor het verbeteren van de paraatheid van incident response-teams. Door regelmatige oefeningen en scenario’s uit te voeren, kunnen teams hun reactietijden verbeteren en hun samenwerking versterken. Dit is vooral belangrijk in situaties waar tijd van essentieel belang is en elke minuut telt om een inbreuk in te dammen.

Korte Samenvatting van de Belangrijkste Punten

  • Zero Trust-Model: Het implementeren van Zero Trust versterkt de beveiligingsperimeter door strikte toegangscontroles en netwerksegmentatie.
  • Cyber Threat Intelligence: Investeren in CTI biedt inzicht in de nieuwste dreigingen en helpt bij het prioriteren van beveiligingsmaatregelen.
  • Incident Response Teams: Het versterken van incident response-teams door training en de juiste tools verhoogt de effectiviteit bij het reageren op aanvallen.

De inzichten en lessen van Black Hat 2024 onderstrepen het belang voor organisaties om hun cybersecurity-strategieën te herzien en aan te passen aan de huidige dreigingslandschap. Het is van vitaal belang dat organisaties onmiddellijk stappen ondernemen om hun beveiliging te verbeteren, vooral gezien de groeiende complexiteit en frequentie van cyberaanvallen. Door te investeren in Zero Trust, CTI, en sterke incident response-teams, kunnen organisaties zichzelf beter beschermen tegen de verwoestende impact van moderne cyberdreigingen.