/* ========================================
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();

Ethical Hacking met Python

Python speelt een steeds grotere rol in cybersecurity. Niet alleen vanwege de eenvoud en leesbaarheid, maar vooral door de flexibiliteit waarmee je het kunt inzetten in uiteenlopende situaties. Van het analyseren van netwerkverkeer tot het automatiseren van complexe taken, de mogelijkheden zijn breed en krachtig.

Wie serieus met beveiliging aan de slag wil, doet er goed aan deze programmeertaal te beheersen. Het gaat niet om theorie, maar om toepassen, testen en begrijpen wat er écht gebeurt achter de schermen.

Vergrootglaspictogram over een lijngrafiek heen gelegd, dat data-analyse of financiële beoordeling symboliseert.

1. Waarom Python voor Ethical Hacking?

Python is al jaren een van de meest gebruikte programmeertalen in cybersecurity. Voor wie zich wil verdiepen in ethical hacking is het een logische keuze. Het is veelzijdig, leesbaar en krachtig genoeg om zowel simpele scripts als complexe tools te bouwen. Het is geen toeval dat veel bekende hackingtools en exploit-frameworks gebouwd zijn met of in Python worden ondersteund.

Python biedt de ideale balans tussen gebruiksgemak en functionaliteit. Zeker als je net begint met hacken, of je skills wilt uitbreiden, is het een taal die je snel productief maakt.

Voordelen van Python in cybersecurity

Python is populair in cybersecurity om meerdere redenen. Hieronder een overzicht van de belangrijkste voordelen.

  • Toegankelijke syntax
    De leesbare structuur maakt het eenvoudig om scripts te begrijpen, aan te passen en te delen, ook als je nog weinig ervaring hebt.
  • Grote community
    Problemen of vragen? Grote kans dat iemand ze al eerder is tegengekomen en opgelost. Er is veel documentatie, van tutorials tot volledige scriptcollecties.
  • Breed inzetbaar
    Python wordt gebruikt voor netwerkscans, log-analyse, kwetsbaarheidsscans, OSINT, web scraping, automatisering en exploitontwikkeling.
  • Sterke Linux-integratie
    Python werkt naadloos samen met Kali Linux en andere security-georiënteerde distributies. Veel tools in Kali hebben Python als basis.
  • Multiplatform
    Scripts werken op Windows, Linux en macOS met minimale aanpassingen. Dit maakt het handig om je tools overal te gebruiken.
  • Uitbreidbaar en modulair
    Met modules als threading, socket, os en subprocess kun je snel functionele netwerk- en systeemtools bouwen.

Bekende Python libraries voor hacking

Wat Python echt krachtig maakt voor hacking, is de beschikbaarheid van gespecialiseerde libraries. Deze maken het mogelijk om snel geavanceerde functionaliteit toe te voegen zonder alles zelf te hoeven programmeren.

  • Scapy
    Scapy is een interactieve packet-manipulatietool. Je kunt netwerkverkeer opbouwen, analyseren en versturen. Denk aan ARP spoofing, traceroutes en ping sweeps.
  • Requests
    Requests is een eenvoudige HTTP-library voor het versturen van webverzoeken. Ideaal voor webapplicatietests, loginformulieren, cookie-analyse en header-manipulatie.
  • Beautiful Soup
    Deze library is handig bij OSINT (Open Source Intelligence). Het stelt je in staat om HTML en XML te parsen, waardoor je automatisch data kunt verzamelen van websites.
  • Paramiko
    Paramiko is een implementatie van het SSH2-protocol. Hiermee kun je met Python automatisch verbinding maken met servers, bestanden uploaden, of commando’s uitvoeren.
  • Nmap (via python-nmap)
    Met de Python-wrapper voor Nmap kun je de kracht van deze bekende netwerkscanner combineren met de flexibiliteit van Python-scripts. Denk aan automatische poortscans, detectie van services en netwerkmapping.
  • Cryptography
    Voor veilige toepassingen is versleuteling onmisbaar. Met de Cryptography-module kun je onder andere gegevens versleutelen, hashes genereren en veilige sleutels beheren.
  • Pymetasploit3
    Deze library maakt het mogelijk om via Python met het Metasploit Framework te communiceren. Zo kun je exploits automatiseren, sessies beheren en resultaten loggen zonder handmatig in de Metasploit-console te werken.

Waarom zoveel hackers met Python werken

Python is wijdverspreid in de hacking community omdat het zich snel aanpast aan nieuwe technologieën. Of je nu een script wilt schrijven dat wachtwoorden kraakt, websites scant op kwetsbaarheden, of netwerkverkeer monitort: je hebt er waarschijnlijk maar een paar regels code voor nodig. Dat maakt het niet alleen krachtig, maar ook efficiënt.

Voor veel penetration testers is Python hét startpunt voor maatwerkoplossingen. Standaardtools werken vaak niet in alle situaties, maar met een aangepast script kun je net dat verschil maken. Python is dus geen alternatief voor tools als Burp Suite of Nmap, maar een verlengstuk ervan.

Python in combinatie met bestaande tools

Een andere reden waarom Python populair blijft, is de mogelijkheid om het te combineren met andere hackingtools.

  • Je kunt Python-scripts gebruiken om resultaten van Nmap of Nikto automatisch te parseren.
  • Python kan gebruikt worden om output van tools als Dirb of Gobuster te analyseren en vergelijken.
  • Het is ook geschikt voor chaining: meerdere tools achter elkaar gebruiken in een geautomatiseerd script.

Zo maak je jouw pentest niet alleen effectiever, maar ook efficiënter.

Leer je sneller met Python?

Wie snel resultaat wil zien van zijn inspanning, zit goed met Python. Je kunt binnen een uur al je eerste netwerkverkenningstool bouwen, of een script dat loginpagina’s test op zwakke wachtwoorden. Deze directe feedback motiveert om verder te leren en diepgaander te experimenteren.

Door de combinatie van eenvoud, documentatie en praktische toepassingen is Python een van de krachtigste keuzes voor wie serieus aan de slag wil met hacking.

004041

2. Je eigen Hacking lab opzetten

Wie wil oefenen met pentesting of zelf tools wil ontwikkelen, heeft een gecontroleerde omgeving nodig. Een hacking lab geeft je de vrijheid om technieken te testen, zonder risico voor je eigen systemen of netwerk. Het opzetten van zo’n lab hoeft niet ingewikkeld of duur te zijn. Met de juiste tools en een goede opzet kun je lokaal experimenteren en leren.

Waarom je een testlab nodig hebt

  • Je wilt kwetsbaarheden testen zonder schade aan te richten
  • Je hebt een plek nodig om scripts te bouwen, verfijnen en automatiseren
  • Je kunt scenario’s naspelen en realistische aanvallen oefenen
  • Het is een veilige manier om fouten te maken en daarvan te leren

Of je nu net begint met hacking of gevorderd bent, een eigen lab is een stevige basis om op verder te bouwen.

Tools en software die je nodig hebt

Met een paar open-source tools richt je in korte tijd een krachtig testlab in. Deze tools gebruik je om je omgeving te bouwen:

  • Kali Linux
    Deze Linux-distributie is standaard in cybersecurity en bevat honderden voorgeïnstalleerde tools. Denk aan Nmap, Metasploit, Burp Suite, Wireshark en meer. Kali draait op bijna elk systeem en is beschikbaar als ISO of VM.
  • VirtualBox of VMware
    Hiermee kun je virtuele machines draaien op je eigen computer. VirtualBox is gratis en open-source, VMware Workstation biedt meer functies maar is betaald. Je gebruikt deze software om meerdere gescheiden systemen naast elkaar te draaien, zonder dat je echte machine gevaar loopt.
  • Python en virtual environments
    Elke test of script kun je het best in een aparte Python-omgeving draaien. Dit voorkomt conflicten tussen libraries en maakt het eenvoudiger om projecten gescheiden te houden. Met virtual environments kun je bijvoorbeeld per script een specifieke versie van een library installeren, zonder je hele systeem te beïnvloeden.

Structuur van je labomgeving

Zodra je de tools hebt, is het tijd om je virtuele omgeving logisch op te bouwen. Denk aan:

  • Aanvals-VM: bijvoorbeeld Kali Linux, waar je alle scripts en tools draait
  • Doelwit-VM: een verouderd systeem met bekende kwetsbaarheden, zoals Metasploitable of DVWA (Damn Vulnerable Web Application)
  • Netwerkstructuur: gebruik een intern netwerk zodat machines alleen met elkaar kunnen communiceren

Zorg dat je lab volledig geïsoleerd is van je thuisnetwerk. Je wilt geen onbedoelde scans uitvoeren op apparaten buiten je testomgeving.

Netwerkisolatie

Een vaak gemaakte fout is dat mensen hun VM’s verbinden met hun gewone netwerk. Dat is niet veilig. Gebruik liever een intern netwerk binnen VirtualBox of VMware. Zo blijven al je scans, exploits en tools beperkt tot je eigen labmachines.

Je kunt optioneel één machine via NAT verbinden met internet, bijvoorbeeld om updates te downloaden. Maar hou dit beperkt en gecontroleerd.

Snapshots maken

Voordat je begint met testen is het slim om van elke virtuele machine een snapshot te maken. Zo kun je altijd terug naar een schone versie als er iets misgaat. Dit is handig bij het oefenen met exploits of privilege escalation. Je hoeft dan niet steeds opnieuw een systeem te installeren.

Logging en monitoring

Zodra je je lab hebt draaien, wil je ook zicht houden op wat er gebeurt. Dat doe je met netwerkmonitoring en logging:

  • Installeer Wireshark op je aanvals-VM om netwerkverkeer tussen machines live te analyseren
  • Gebruik command-line tools zoals tcpdump of iftop om inzicht te krijgen in data die over het netwerk gaat
  • Noteer IP-adressen, testdata, kwetsbaarheden en resultaten van scans voor eigen referentie

Dit helpt je om later terug te kijken wat je getest hebt en hoe je dat gedaan hebt.

Labdocumentatie bijhouden

Voor je workflow is het handig om alle instellingen, configuraties en versies van gebruikte tools ergens vast te leggen. Denk aan:

  • Hostnamen en IP-adressen van je VM’s
  • Gebruikersnamen en wachtwoorden van testaccounts
  • Installatiestappen van gebruikte libraries of tools
  • Versies van Python en libraries die je gebruikt

Zo’n overzicht voorkomt dat je bij elk nieuw project opnieuw moet uitzoeken hoe alles was ingericht.

Wat kun je oefenen in je lab?

Je eigen lab opent de deur naar allerlei technieken die je op een echte omgeving niet zomaar mag of kunt toepassen:

  • Port scanning en netwerkanalyse
  • Brute-force aanvallen op loginportalen
  • Exploits ontwikkelen en testen
  • Scriptontwikkeling en automatisering
  • OSINT en reconnaissance oefenen
  • Man-in-the-middle aanvallen in een gecontroleerd netwerk

Je oefent hiermee niet alleen tools, maar leert ook denken als een aanvaller. Dat maakt je ook als verdediger sterker.

Een goed ingericht hacking lab is geen luxe, maar een noodzaak als je serieus wilt leren. Het maakt het verschil tussen klikken in andermans tools en zelf denken, bouwen en begrijpen.

003821

3. Basisvaardigheden Python voor Hacking

Zonder een solide basis in Python blijf je afhankelijk van bestaande scripts van anderen. Wie zelf tools wil schrijven of bestaande scripts wil aanpassen, moet de taal begrijpen. Voor hacking gaat het niet om complexe theorie, maar juist om de vaardigheden die je nodig hebt om kleine, krachtige scripts te bouwen. Daarmee automatiseer je taken, test je systemen en bespaar je tijd.

Welke kennis je nodig hebt

Als je Python wilt inzetten voor securitydoeleinden, hoef je geen professionele ontwikkelaar te zijn. Maar je moet wel de taal voldoende beheersen om effectief en zelfstandig te kunnen werken. Dat begint bij een aantal fundamentele concepten.

Werken met datatypes en logica

Python werkt met verschillende soorten data. Als je netwerkverkeer wilt analyseren of bestanden wilt lezen, moet je kunnen omgaan met lijsten, strings en dictionaries. In scripts gebruik je logica om te bepalen wat er wanneer gebeurt. Denk aan:

  • Lists om IP-adressen op te slaan of poorten te scannen
  • Dictionaries om scanresultaten te structureren
  • If-statements om te reageren op een bepaalde respons of foutmelding
  • Loops om meerdere doelwitten of poorten automatisch te controleren

Zonder deze bouwstenen kun je weinig automatiseren. Met een goed begrip ervan kun je zelf scriptjes bouwen die taken uitvoeren zoals poortscans, directory-bruteforcing of log-analyse.

Functies en foutafhandeling

Bij hacking is het vaak nodig om scripts opnieuw te gebruiken of meerdere keren uit te voeren met verschillende parameters. Daarom is het werken met functies belangrijk:

  • Maak je code overzichtelijker door logica in functies te stoppen
  • Roep dezelfde functie aan met andere parameters voor herbruikbaarheid
  • Combineer meerdere functies in een script dat complete workflows uitvoert

Daarnaast kun je in securityprojecten regelmatig te maken krijgen met fouten, zoals een time-out, netwerkfout of ongeldige respons. Door foutafhandeling toe te passen voorkom je dat je script stopt bij de eerste fout:

  • Gebruik try en except om fouten op te vangen en ermee om te gaan
  • Print duidelijke foutmeldingen of log fouten automatisch
  • Ga bij fouten verder met de volgende taak in plaats van het hele script te stoppen

Scripts bouwen die je vanaf de command-line uitvoert

Python is ideaal om command-line tools te bouwen. Je kunt scripts maken die parameters accepteren zoals IP-adressen, poorten of gebruikerslijsten. Dat maakt ze flexibel en geschikt voor hergebruik.

Met command-line argumenten kun je:

  • Een doelwit opgeven zonder het in je script te hoeven aanpassen
  • Instellen welk type scan je wilt uitvoeren
  • Automatisch resultaten naar een bestand laten schrijven

Dergelijke scripts kun je eenvoudig integreren in grotere testomgevingen of opnemen in je eigen workflow.

Praktische voorbeelden van wat je met deze skills kunt doen

Zodra je deze basis onder de knie hebt, kun je al een hoop waardevolle dingen maken:

  • Een script dat een lijst met domeinen pingt en bereikbaarheid checkt
  • Een bruteforce-script dat wachtwoorden uitprobeert op een inlogformulier
  • Een scraper die informatie verzamelt uit LinkedIn-profielen voor OSINT
  • Een log-analyzer die verdachte IP-adressen of foutcodes uit Apache-logs haalt
  • Een poortscanner die open services op een reeks IP-adressen detecteert

Je leert hiermee denken als een hacker: hoe automatiseer ik dit? Hoe maak ik dit sneller? Hoe kom ik bij data die ik anders niet zou zien?

Snel aan de slag komen

Het fijne aan Python is dat je direct kunt beginnen. Je hebt geen dure software nodig. Met een teksteditor en de Python-interpreter kun je alles maken wat je nodig hebt. Je schrijft een script, voert het uit en ziet meteen resultaat.

Een paar tips om snel progressie te boeken:

  • Gebruik altijd virtual environments zodat je Python-projecten schoon blijven
  • Begin met kleine scripts die je één duidelijk doel geven
  • Test veel, leer van foutmeldingen en kijk wat werkt
  • Verdiep je in libraries zoals argparse, os, socket en subprocess, stuk voor stuk handig voor hackingtoepassingen

Door met deze aanpak te werken, groei je van beginner naar iemand die zijn eigen hackingtools schrijft. Geen black box meer, maar controle over je eigen workflow.

In een klaslokaal concentreert de groep zich intens op digitale schermen waarop complexe gegevens worden weergegeven. Ze leren hoe een SIEM werkt, terwijl een groot futuristisch digitaal bord de voorkant van het lokaal domineert.

4. Automatiseren van hacking taken met Python

Wie serieus aan de slag gaat met penetration testing of OSINT merkt al snel dat handmatig werken tijd vreet. Python biedt je de mogelijkheid om taken te automatiseren die je normaal uren kosten. Denk aan portscanning, logbestanden analyseren of webapplicaties testen. Door scripts slim op te bouwen, werk je sneller én consistenter.

Je hoeft geen grote applicaties te bouwen. Kleine, doelgerichte scripts zijn vaak genoeg om je werkproces flink te versnellen.

File parsing, log analyse en rapportage

Systemen en applicaties genereren continu logbestanden. Deze logs bevatten waardevolle informatie: verdachte IP’s, mislukte inlogpogingen, fouten op webservers en meer.

Met Python kun je:

  • Grote logbestanden automatisch doorzoeken op bepaalde patronen of fouten
  • Regex gebruiken om bijvoorbeeld IP-adressen, gebruikersnamen of foutcodes te herkennen
  • Een rapport genereren dat verdachte gebeurtenissen per IP groepeert
  • Tijdstempels sorteren of filteren om periodes van ongebruikelijke activiteit te herkennen

Je kunt hiermee bijvoorbeeld automatisch alle 404, 403 of 500 foutcodes per bron-IP bundelen, of brute-force pogingen uit een SSH-log herkennen.

Web scraping en data-extractie

Het verzamelen van informatie uit websites is vaak onderdeel van OSINT of voorbereiding op social engineering. Handmatig gegevens kopiëren is inefficiënt — Python lost dat voor je op.

Scraping met Python stelt je in staat om:

  • Automatisch bedrijfsgegevens te verzamelen van websites
  • Lijsten van e-mails, gebruikersnamen of exposed directories te bouwen
  • Social media-profielen te analyseren voor OSINT-doeleinden
  • Tekst, links of meta-informatie uit HTML te filteren en opslaan in CSV of JSON

Met libraries als Beautiful Soup en Requests kun je snel een script maken dat bijvoorbeeld vacatureteksten doorzoekt op gebruikte technologieën, of domeinen checkt op exposed subdirectories.

Netwerkscanning en port scanning

Een van de basisvaardigheden binnen hacking is het scannen van systemen op open poorten en actieve services. Python maakt het mogelijk om je eigen scanners te bouwen, of bestaande scanners slimmer aan te sturen.

Automatisering via Python betekent dat je:

  • Systeembreed kunt scannen op poorten 1–65535 zonder handmatig werk
  • Resultaten automatisch logt en groepeert op IP of servicetype
  • Combinaties kunt uitvoeren van TCP-, UDP- en SYN-scans
  • Direct verder kunt gaan op basis van een scanresultaat (bijv. automatisch exploit testen als poort 21 openstaat)

Je kunt je scripts uitbreiden met logica om direct kwetsbaarheden te koppelen aan ontdekte services via externe API’s zoals de NVD of Vulners.

Webapplicatietests automatiseren

Het testen van webapplicaties op kwetsbaarheden is vaak repetitief. Python stelt je in staat om veel van deze stappen te automatiseren, zonder afhankelijk te zijn van grote tools.

Met een goed script kun je:

  • Formulieren automatisch invullen en versturen, inclusief authenticatie
  • Parameters injecteren met payloads om te testen op SQL-injectie, XSS of CSRF
  • CSRF-tokens dynamisch ophalen en hergebruiken in requests
  • Resultaten loggen per payload of URL, zodat je risico’s kunt prioriteren

Je kunt zelfs een script maken dat automatisch directories brute-forcet met een woordlijst, of verborgen adminpanelen zoekt via response-analyse.

Slimme workflows bouwen

Het krachtige aan automatisering met Python is dat je verschillende technieken aan elkaar kunt koppelen. Denk aan:

  • Een script dat eerst domeinnamen verzamelt via scraping, daarna een portscan uitvoert op elk domein en de resultaten logt
  • Een OSINT-workflow die automatisch social media profielen analyseert en combineert met email hunter-tools
  • Een workflow waarbij je met Requests wachtwoordvelden test, en bij succesvolle logins automatisch de cookies opslaat voor verder gebruik

Je hoeft geen gigantische frameworks te bouwen. Door kleine, modulaire scripts slim te combineren, bouw je je eigen toolkit.

Voordelen van automatiseren

  • Snelheid: je voert in minuten uit wat handmatig uren kost
  • Herhaalbaarheid: je tests zijn consistent en reproduceerbaar
  • Schaalbaarheid: je kunt grote lijsten met doelen verwerken zonder handmatige input
  • Minder fouten: scripts maken geen typefouten of vergeten een stap

Het automatiseren van hacking-taken met Python is geen luxe, maar een logische stap als je zelfstandig, efficiënt en met impact wilt werken. Je vergroot niet alleen je slagkracht, maar ook je inzicht. Want je leert niet alleen hoe tools werken, maar ook wat erachter zit.

Y Hmctqutuy3thvx5sc77a

5. Reconnaissance en informatie verzamelen

Elke succesvolle aanval begint met informatie. Hoe meer je weet over een doelwit, hoe gerichter en effectiever je je aanvallen kunt uitvoeren. Dit proces heet reconnaissance of verkenning. Met Python kun je veel van deze stappen automatiseren, versnellen en verfijnen. Of je nu pentester bent of je eigen organisatie wilt testen: informatie vergaren is altijd de eerste stap.

Passieve versus actieve technieken

Reconnaissance valt uiteen in twee benaderingen:

  • Passieve technieken
    Hierbij verzamel je informatie zonder direct contact te maken met het doelwit. Denk aan het opvragen van domeininformatie of het analyseren van social media-profielen. Het doelwit weet meestal niet dat je onderzoek doet.
  • Actieve technieken
    Hierbij benader je het doelwit direct, bijvoorbeeld door een ping, een poortscan of DNS-query. Dit laat vaak sporen achter in logbestanden en kan worden opgemerkt.

Beide methodes zijn waardevol. In een goed hackingproces gebruik je ze vaak gecombineerd: eerst passief om breed zicht te krijgen, daarna actief om te testen wat mogelijk is.

Handige informatie om te verzamelen

  • Domeinnamen en subdomeinen
  • IP-adressen en netwerkstructuur
  • Openbare e-mailadressen en gebruikersnamen
  • Social media accounts van medewerkers
  • Gebruikte technologieën (zoals CMS, frameworks, plugins)
  • DNS records en WHOIS-data
  • Openbare repositories (zoals GitHub)
  • Exposed documenten of interne links

Hoe meer je weet, hoe beter je risico’s kunt inschatten en prioriteiten kunt stellen.

WHOIS, DNS en social scraping

Zonder tools te installeren kun je al veel achterhalen. WHOIS-gegevens geven informatie over domeinregistraties, zoals eigenaar, contactgegevens en nameservers. DNS-records laten je zien welke servers betrokken zijn bij mail, webhosting of externe diensten.

Python kan worden ingezet om automatisch:

  • WHOIS-data op te vragen voor meerdere domeinen
  • DNS-records te verzamelen zoals A, MX, TXT, CNAME
  • Subdomeinen te bruteforcen of uit certificaten te halen
  • Social media accounts op basis van bedrijfsnamen te vinden
  • Profielen op LinkedIn of Twitter te analyseren op functietitels en structuur

Deze informatie kan je helpen om zwakke plekken te vinden zoals onbeschermde subdomeinen, misconfiguraties of exposed API’s.

Informatie verzamelen via Python

Met behulp van bestaande libraries kun je zelf scripts maken die snel en doelgericht data ophalen. Enkele voorbeelden:

  • Verzamel subdomeinen met requests en een subdomain-wildcardlijst
  • Gebruik BeautifulSoup om contactpagina’s te scrapen op namen of e-mailadressen
  • Zoek in GitHub naar lekken van API-sleutels of interne scripts
  • Combineer DNS-resolutie en IP-checks om live systemen te onderscheiden van dode links

Een goed script zoekt niet alleen, maar filtert ook direct op relevantie. Zo hoef je niet handmatig honderden regels data door te spitten.

Automatisering van OSINT-workflows

Met een slimme combinatie van scraping, API-gebruik en data-analyse kun je complete OSINT-workflows bouwen. Bijvoorbeeld:

  • Input: bedrijfsnaam of domein
  • Output: lijst met subdomeinen, IP’s, gebruikte technologie, contactpersonen
  • Filter: alleen live servers of links met kwetsbare paden
  • Rapport: export naar CSV of JSON voor verdere analyse of rapportage

Zo’n workflow kun je keer op keer inzetten, uitbreiden en aanpassen. Het is een krachtig hulpmiddel voor pentesters, red teams, maar ook voor bedrijven die zichzelf willen controleren.

Waarom reconnaissance het verschil maakt

In veel gevallen bepaalt de informatie die je vooraf verzamelt of een aanval überhaupt kans van slagen heeft. Je ontdekt:

  • Oude staging servers die nog live staan
  • Adminpanelen zonder authenticatie
  • Externe leveranciers die vergeten zijn
  • API’s met publieke toegang
  • Medewerkers die gevoelige informatie delen

Deze zwakke plekken zijn vaak de ingang naar verdere verkenning of exploitatie. Zonder goed vooronderzoek mis je kansen en werk je op gevoel in plaats van op data.

Python is een uitstekende partner bij dit proces. Het helpt je om systematisch, gestructureerd en snel te werk te gaan en tegelijk het overzicht te behouden.

004252

6. Netwerkscanning met Python

Als je weet welke systemen en poorten openstaan, weet je ook waar mogelijk toegang te vinden is. Netwerkscanning is een vaste stap in elke pentest of hacking-analyse. Python biedt je de mogelijkheid om deze stap te automatiseren en aan te passen aan je doelwitten, zonder afhankelijk te zijn van tools als Nmap of Masscan. Of juist in combinatie daarmee.

Een goede netwerkscan geeft niet alleen IP’s en poorten, maar ook serviceversies, besturingssystemen en mogelijke kwetsbaarheden. Daarmee leg je de basis voor verdere aanvallen of beveiligingsmaatregelen.

Scapy en Nmap in actie

Twee van de meest gebruikte libraries voor netwerkscanning met Python zijn Scapy en python-nmap.

  • Scapy is een krachtig pakket waarmee je handmatig netwerkverkeer kunt opbouwen, versturen en analyseren. Je kunt er zelf SYN-scans mee maken, ARP-verkeer analyseren of traceroutes uitvoeren. Het is flexibel, maar vraagt wel wat kennis van netwerklagen.
  • python-nmap is een wrapper rond de bekende Nmap-scanner. Hiermee kun je Nmap-scans automatisch aansturen, resultaten uitlezen, filteren en gebruiken in je eigen workflow. Denk aan:
    • Scannen van specifieke poorten op meerdere IP’s
    • Detecteren van versies en services
    • Opslaan van resultaten per host voor verdere verwerking

Deze tools laten je de kracht van bestaande scanners combineren met de flexibiliteit van Python.

Open poorten en diensten identificeren

Een open poort betekent vaak een draaiende service. Dat kan een webserver zijn, een database, een remote desktopdienst of een vergeten admininterface. Door te scannen en vervolgens de response te analyseren, krijg je een lijst van potentiële ingangen.

Python helpt je om:

  • Snel poorten te testen op TCP of UDP op meerdere hosts
  • Detecteren welke services draaien op poorten zoals 21 (FTP), 22 (SSH), 80 (HTTP), 443 (HTTPS)
  • Responsheaders te lezen, bannerversies op te vragen of foutmeldingen te analyseren
  • Herhaalbare scans op te zetten, met logging en rapportage
  • Resultaten direct door te sturen naar andere scripts (zoals exploit-scanners)

Je kunt je scans uitbreiden met logica zoals: als poort 22 open is, probeer dan met Paramiko in te loggen met standaardcredentials. Of: als poort 80 draait op een oude Apache-versie, check dan op bekende kwetsbaarheden.

Automatisch CVE’s opzoeken en koppelen

Zodra je weet welke versies van services draaien, kun je zoeken naar bekende kwetsbaarheden (Common Vulnerabilities and Exposures). Dit proces kun je automatiseren met Python.

Mogelijke aanpak:

  • Parse de output van een scan om versies van services te vinden
  • Gebruik een API zoals die van de NVD (National Vulnerability Database) of Vulners
  • Verstuur automatisch zoekopdrachten op basis van service + versie (bijv. “Apache 2.4.49”)
  • Geef CVE-nummers, risico’s of exploitbeschrijvingen terug in je scriptoutput
  • Log gevonden kwetsbaarheden voor prioritering of opvolging

Zo weet je binnen enkele minuten of een open poort niet alleen bereikbaar is, maar ook kwetsbaar.

Slimme filtering van resultaten

Scannen is nuttig, maar alleen als je niet verdrinkt in data. Python maakt het mogelijk om output te filteren op wat relevant is:

  • Alleen hosts tonen met open poort 445 én bekende CVE’s
  • Services uitsluiten die geen interactie toelaten (zoals ICMP-only hosts)
  • Poorten of IP’s groeperen per subnet voor netwerkoverzicht
  • Resultaten wegschrijven in CSV, JSON of een overzichtelijke console output

Je kunt ook notificaties instellen, bijvoorbeeld via e-mail of Telegram, als een kwetsbare service gevonden wordt. Daarmee wordt je scan niet alleen een rapport, maar ook een alert-systeem.

Wat je hiermee kunt bereiken

Met netwerkscanning en service-analyse zet je de stap van theorie naar aanvalsmogelijkheden. Je ontdekt:

  • Onbeveiligde services die naar buiten openstaan
  • Verouderde softwareversies met bekende exploits
  • Slecht geconfigureerde netwerkstructuren
  • Mogelijke routes voor privilege escalation of data-extractie

En dat allemaal met scripts die je kunt hergebruiken, uitbreiden en integreren in grotere workflows.

Python maakt netwerkscanning schaalbaar en slim. Geen one-size-fits-all scans meer, maar maatwerk dat aansluit op jouw doel, tempo en aanpak.

003869

7. Exploitatietechnieken

Zodra je via reconnaissance en netwerkscans zwakke plekken hebt gevonden, komt het erop aan: kun je ze uitbuiten? Exploitatietechnieken richten zich op het binnendringen van systemen door gebruik te maken van bekende fouten in software of configuratie. Python is hier bijzonder krachtig. Je kunt bestaande exploits automatiseren, zelf nieuwe ontwikkelen en handmatige aanvallen vervangen door slimme scripts.

Exploiteren is niet het lukraak uitvoeren van scripts, maar een gericht proces. Je bepaalt wat kwetsbaar is, test zorgvuldig en probeert binnen te komen — zonder schade te veroorzaken, maar met maximaal inzicht.

Kwetsbaarheden scannen met Python

Voordat je aanvalt, wil je bevestigen of een systeem écht kwetsbaar is. Python-scripts kunnen je helpen bij het analyseren van headers, foutmeldingen en versienummers.

Met slimme checks kun je bijvoorbeeld:

  • Banners van services uitlezen om versies te detecteren
  • Headers van webservers scannen op foutconfiguraties
  • Bekende fingerprinting-methodes toepassen
  • Automatisch CVE’s koppelen aan aangetroffen versies

Voor extra kracht kun je Python combineren met tools als searchsploit of openbare exploit-databases. Hiermee kun je direct zien of er kant-en-klare aanvalsscripts bestaan voor jouw doelwit.

Zelfgemaakte exploits schrijven (buffer overflows)

Voor gevorderde hackers is het schrijven van eigen exploits de ultieme vorm van controle. Eén van de klassieke technieken is de buffer overflow: een fout waarbij te veel input geheugen overschrijft, waardoor je eigen code kunt injecteren.

Python is hier perfect voor:

  • Het genereren van payloads met precieze lengte
  • Het manipuleren van registers en stackstructuren
  • Automatisch detecteren van offset-waardes
  • Herhalen en testen van payloads met kleine variaties

Typische stappen zijn:

  • Connectie maken met een kwetsbare service via socket
  • Input sturen die de buffer overschrijdt
  • Shellcode injecteren voor remote toegang

Dit soort aanvallen vereist oefening en kennis van systeemarchitectuur. Maar als je een eigen exploit schrijft en ziet werken, begrijp je echt hoe diep je controle kunt krijgen.

Webapplicaties exploiteren (SQLi, XSS, CSRF, IDOR, etc.)

Veel aanvallen richten zich op webapplicaties. Python maakt het mogelijk om geautomatiseerd te testen en vervolgens doelgericht te exploiteren.

Je kunt scripts schrijven die:

  • Testen op SQL-injectie door foute queries te forceren en responses te analyseren
  • Payloads injecteren in formulieren of URL’s om XSS te detecteren
  • CSRF-tokens automatisch ophalen en misbruiken in fake requests
  • IDOR-kwetsbaarheden opsporen door object-ID’s te manipuleren

Met tools als requests, urllib en re kun je deze technieken goed combineren. Je kunt zelfs scripts bouwen die automatisch kwetsbare routes ontdekken en documenteren.

Slimme automatisering van exploits

Je kunt je exploitcode combineren met detectielogica. Bijvoorbeeld:

  • Eerst controleren of poort 21 openstaat en een oude vsFTP versie draait
  • Dan automatisch een bekende exploit uitvoeren
  • Bij succes: een reverse shell opzetten en loggen in je rapport

Ook handig:

  • Payloads variëren om te testen op WAF’s of inputfilters
  • Bij falen: automatisch fallback-strategieën uitvoeren
  • Exploits in batches uitvoeren tegen meerdere hosts of IP-ranges

Deze aanpak maakt je werk niet alleen sneller, maar ook consistenter en controleerbaarder.

Aandachtspunten bij exploiteren

  • Test in een veilige omgeving zoals je eigen lab
  • Documenteer altijd je aanvalsstappen
  • Beheers de impact: je wilt aantonen dat iets werkt, niet systemen omver duwen
  • Combineer Python-scripts met logging, rollback-opties en limieten om fouten te voorkomen

Exploiteren is geen scriptje afvuren en hopen op succes. Het is een gecontroleerde actie die laat zien dat een kwetsbaarheid écht gevolgen heeft.

Wat je hiermee bereikt

Door exploitatie kun je:

  • Aantonen dat een organisatie risico loopt
  • Inzicht geven in de impact van kwetsbaarheden
  • Privileges verhogen binnen een systeem
  • Reële aanvalsscenario’s nabootsen
  • Leren denken als een aanvaller en verdediger tegelijk

Python helpt je om deze technieken niet alleen handmatig toe te passen, maar ook te testen, automatiseren en verfijnen. Je leert patronen herkennen, logica verbeteren en risico’s effectiever communiceren.

Image 5

8. Wachtwoorden kraken en Wireless Hacking

Wachtwoorden zijn nog steeds de sleutel tot de meeste systemen. Toch worden ze vaak slecht gekozen, hergebruikt of onvoldoende beveiligd. Voor een hacker zijn zwakke wachtwoorden een makkelijke ingang. Met Python kun je eenvoudig tools maken die wachtwoorden testen of wifi-netwerken analyseren. Niet om te misbruiken, maar om te begrijpen waar de risico’s zitten — en hoe je ze kunt beperken.

Brute-force en dictionary-aanvallen met Python

Een brute-force aanval probeert eindeloos combinaties totdat het juiste wachtwoord gevonden is. Dit is zelden effectief zonder goede voorbereiding. Een dictionary-aanval is slimmer: je gebruikt lijsten met veelvoorkomende wachtwoorden of combinaties.

Met Python kun je dit eenvoudig automatiseren:

  • Laad een wachtwoordenlijst (bijv. rockyou.txt) en probeer elk wachtwoord op een loginformulier
  • Gebruik requests om POST-verzoeken te sturen en responses te analyseren
  • Voeg logica toe om fouten, time-outs of lockouts te detecteren
  • Combineer gebruikersnamen met verschillende wachtwoorden in variaties

Voor kleine doelwitten of testomgevingen is dit een goede manier om loginbeveiliging te testen. Het laat direct zien of rate-limiting of account-locking ontbreekt.

Slimme brute-force scripts kunnen:

  • Automatisch CSRF-tokens verwerken
  • Cookies gebruiken voor sessiebeheer
  • Captchas detecteren (en omzeilen met tussenkomst)

Hoewel brute-force aanvallen log en zichtbaar zijn, zijn ze nog steeds effectief bij zwakke of hergebruikte wachtwoorden.

Wireless auditing met Python en tools als Aircrack

Wifi-netwerken lijken veilig dankzij WPA2, maar veel hangt af van het wachtwoord en configuratie. Met de juiste tools kun je netwerken testen op kwetsbaarheid — uiteraard alleen in je eigen lab of met toestemming.

Python zelf bevat geen ingebouwde wifi-analysetools, maar je kunt het combineren met bestaande programma’s:

  • Aircrack-ng: dé standaardtool voor het kraken van WPA-handshakes
  • Scapy: voor het opbouwen, versturen en sniffen van wifi-pakketten
  • Pyrit: voor snelle WPA-sleutelcontrole met GPU-ondersteuning

Een typische workflow:

  • Start airmon-ng om je netwerkkaart in monitor mode te zetten
  • Gebruik airodump-ng om wifi-netwerken en clients te identificeren
  • Capture een handshake door een client te disconnecten (deauth) en opnieuw verbinding te laten maken
  • Gebruik Python om de handshake te analyseren en wachtwoorden te testen met een dictionary

Je kunt zelfs met Python detecteren of netwerken verborgen SSID’s gebruiken, hoeveel clients erop verbonden zijn en hoe sterk het signaal is. Handig bij OSINT, red teaming of fysieke pentests.

Bescherming tegen veelvoorkomende aanvalstechnieken

Juist door te weten hoe aanvallen werken, kun je systemen beter beschermen. Enkele verdedigingsmaatregelen:

  • Gebruik sterke wachtwoorden
    Lang, uniek en onvoorspelbaar. Gebruik een password manager om het makkelijk te houden.
  • Voer rate-limiting in op loginpogingen
    Beperk het aantal pogingen per IP of account. Voeg vertraging toe na meerdere mislukte pogingen.
  • Activeer multifactor-authenticatie
    Zelfs als een wachtwoord lekt, blijft het account beschermd.
  • Zorg voor account-lockout na X pogingen
    Dit voorkomt eindeloze brute-force aanvallen. Combineer met meldingen naar admins.
  • Gebruik WPA3 en disable WPS
    Bij wifi voorkomt dit eenvoudige aanvallen op de toegang. Gebruik lange netwerkwachtwoorden.
  • Monitor op loginmisbruik
    Ongewone loginlocaties of tijden kunnen duiden op een aanval. Automatiseer detectie waar mogelijk.

Door aanvallen te begrijpen én toe te passen in een gecontroleerde omgeving, leer je jezelf en anderen beter te beveiligen. Python maakt dat proces sneller en krachtiger.

Waarom dit relevant blijft

Zwakke wachtwoorden en onveilige netwerken blijven een van de meest gebruikte toegangsvectoren bij echte aanvallen. Het zijn laagdrempelige ingangen met vaak grote gevolgen. Denk aan:

  • Hergebruikte wachtwoorden die via datalekken zijn buitgemaakt
  • Wifi-netwerken zonder de juiste isolatie waardoor een aanvaller intern netwerkverkeer kan sniffen
  • Webapplicaties die geen brute-force bescherming hebben

Als je deze technieken kunt herkennen, testen én automatiseren, vergroot je je impact als ethical hacker of securityspecialist.

004026

De 10 belangrijkste leerpunten:

  1. Python is ideaal voor hacking door zijn eenvoud, flexibiliteit en krachtige libraries
    Met tools zoals Scapy, Requests en Paramiko kun je bijna elk aspect van een penetration test automatiseren of uitbreiden.
  2. Een eigen hacking lab biedt een veilige omgeving om te oefenen zonder risico op schade
    Door te werken met Kali Linux, virtual machines en gescheiden netwerken bouw je een gecontroleerde testomgeving.
  3. Basiskennis van Python is voldoende om zelf scripts te schrijven voor offensieve security-taken
    Denk aan loops, functies, foutafhandeling en het gebruik van command-line argumenten met argparse.
  4. Automatisering is onmisbaar om tijd te besparen en consistente resultaten te krijgen
    Je kunt logs analyseren, netwerkscans uitvoeren en webapplicaties testen met relatief eenvoudige scripts.
  5. Reconnaissance is de basis van elke aanval
    Door gebruik te maken van WHOIS, DNS-gegevens en social scraping verzamel je cruciale info zonder interactie met het doelwit.
  6. Python maakt netwerkscanning flexibel en aanpasbaar aan elk doelwit
    Met Scapy of python-nmap scan je hosts, detecteer je open poorten en haal je service-informatie op.
  7. Gevonden services kun je automatisch koppelen aan bekende kwetsbaarheden (CVE’s)
    Zo weet je snel of er kant-en-klare exploits bestaan voor wat je gevonden hebt.
  8. Zelf exploits schrijven met Python is haalbaar als je weet hoe buffer overflows werken
    Je krijgt diep inzicht in geheugentoegang en systeembesturing, met veel ruimte voor maatwerk.
  9. Webapplicatie-kwetsbaarheden zoals SQLi, XSS en CSRF kun je gericht testen met Python-scripts
    Scripts kunnen automatisch payloads injecteren, responsen analyseren en risico’s in kaart brengen.
  10. Wachtwoord- en wifi-aanvallen zijn goed te testen met Python en externe tools
    Je leert hoe brute-force werkt, hoe WPA-handshakes worden gekraakt en hoe je zwakke plekken kunt ontdekken én vermijden.