JS CODE

<script>
jQuery(document).ready(function($) {
// When an open button is clicked, close any open overlay first,
// then open the overlay for the clicked column.
$('.open-overlay').on('click', function(e) {
e.preventDefault();
// Close any currently open overlays in all columns.
$('.column-overlay:visible').fadeOut();

// Open the overlay for this particular column.
$(this).closest(‘.et_pb_column’).find(‘.column-overlay’).fadeIn();
});

// When the close button is clicked, just close the overlay.
$(‘.close-overlay’).on(‘click’, function(e) {
e.preventDefault();
$(this).closest(‘.column-overlay’).fadeOut();
});
});
</script>

<script>
jQuery(function($) {
$(document).ready(function() {
// Append a toggle button to each menu item with children, defaulting to ‘+’
$(“body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children”)
.append(‘<a href=”#” class=”mobile-toggle”>+</a>’);

// Add click event to toggle visibility of submenus and toggle between ‘+’ and ‘-‘
$(‘ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle’)
.click(function(event) {
event.preventDefault();
$(this).parent(‘li’).toggleClass(‘dt-open’); // Toggle open/closed class
$(this).parent(‘li’).find(‘ul.children, ul.sub-menu’).first().toggleClass(‘visible’); // Show/hide submenu

// Toggle between “+” and “-” on the toggle button
if ($(this).parent(‘li’).hasClass(‘dt-open’)) {
$(this).text(‘-‘); // Set to “-” when open
} else {
$(this).text(‘+’); // Set to “+” when closed
}
});
});
});
</script>

<script>
document.addEventListener(“DOMContentLoaded”, function() {
// Get the menu button (text module) and fullwidth section
var menuButton = document.querySelector(“.menu-trigger”);
var fullwidthMenu = document.getElementById(“fullwidth-menu”);
var closeButton = document.querySelector(“.menu-close”);

if (menuButton && fullwidthMenu && closeButton) {
// Open menu when clicking the menu button
menuButton.addEventListener(“click”, function() {
fullwidthMenu.classList.add(“active”);
});

// Close menu when clicking the close button
closeButton.addEventListener(“click”, function() {
fullwidthMenu.classList.remove(“active”);
});

// Close menu if user clicks outside the menu area
fullwidthMenu.addEventListener(“click”, function(event) {
if (event.target === fullwidthMenu) {
fullwidthMenu.classList.remove(“active”);
}
});
}
});
</script>

<script>
function toggleStickyHeader() {
if (window.innerWidth >= 981) { // Only for desktop
if (document.getElementById(“fullwidth-menu”).classList.contains(“active”)) {
document.body.classList.add(“menu-open”); // Disable sticky header
} else {
document.body.classList.remove(“menu-open”); // Re-enable sticky header
}
}
}

// Disable sticky header when menu is open
document.getElementById(“fullwidth-menu”).addEventListener(“transitionend”, toggleStickyHeader);

// Ensure sticky header remains off while scrolling if menu is open
window.addEventListener(“scroll”, function () {
if (window.innerWidth >= 981 && document.getElementById(“fullwidth-menu”).classList.contains(“active”)) {
document.body.classList.add(“menu-open”); // Ensure sticky header remains off
}
});
</script>

CSS  CODE

/* === Fullwidth Menu Styles === */
#fullwidth-menu {
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #E2E3DA !important;
    color: black !important;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    padding: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hide scrollbar for Webkit (Chrome, Safari) */
#fullwidth-menu::-webkit-scrollbar {
    display: none;
}

/* Show menu when active */
#fullwidth-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Ensure menu content stays within viewport */
#fullwidth-menu > div {
    max-height: 100vh;
    overflow-y: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: black !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 80px;
}

/* Close Button */
.menu-close {
    position: absolute;
    top: -160px;
    right: 10px;
    font-size: 180px;
    color: white !important;
    cursor: pointer;
    z-index: 10000;
    background: none;
    padding: 10px;
    border-radius: 40%;
}

.menu-close:hover {
    background: none;
}

/* Menu Container */
#fullwidth-menu .custom-vertical-menu {
    width: 90%;
    max-width: 800px;
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

/* Main Menu Item Styles */
#fullwidth-menu .custom-vertical-menu ul {
    padding: 0;
    margin: 0;
    width: 92%;
    max-width: 750px;   
}

#fullwidth-menu .custom-vertical-menu ul li {
    display: block;
    width: 100%;
    padding: 6px;
    white-space: nowrap;
    text-align: left;
    font-size: 18px;
    position: relative;
}

/* === FIRST-LEVEL DROPDOWN (Main Menu → First Submenu) === */
#fullwidth-menu .custom-vertical-menu ul li ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 95%;
    background: #E2E3DA !important;
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
    padding: 5px;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    border: 1px solid black !important;
    margin-left: 25rem;
}

#fullwidth-menu .custom-vertical-menu ul li.menu-item-has-children:hover > ul {
    opacity: 1;
    visibility: visible;
    display: block;
}

/* === SECOND-LEVEL MENU DROPDOWN (Horizontal Extension) === */
#fullwidth-menu .custom-vertical-menu ul li ul li ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 400px;
    background: #E2E3DA !important;
    border: 1px solid black !important;
    display: none;
    z-index: 10001;
    margin-left: -14rem;
}

#fullwidth-menu .custom-vertical-menu ul li ul li:hover > ul {
    display: block;
}

/* === THIRD-LEVEL MENU DROPDOWN (Drops Down Again) === */
#fullwidth-menu .custom-vertical-menu ul li ul li ul li ul {
    position: absolute;
    top: 70%;
    left: 0;
    width: 260px;
    display: none;
    z-index: 10002;
    margin-left: 10rem;
}

#fullwidth-menu .custom-vertical-menu ul li ul li ul li:hover > ul {
    display: block;
}

/* === AUTO APPLY (▶) TO ALL MENU ITEMS WITH A SUBMENU (ANY LEVEL) === */
#fullwidth-menu .custom-vertical-menu ul li.menu-item-has-children > a::after,
#fullwidth-menu .custom-vertical-menu ul li ul li.menu-item-has-children > a::after,
#fullwidth-menu .custom-vertical-menu ul li ul li ul li.menu-item-has-children > a::after {
    content: "→";
    font-size: 20px;
    font-weight: bold;
    color: black !important;
    position: absolute;
    right: 10%; /* Adjust to 10% of the container's width from the right */
    top: 30%;
    transform: translateY(-50%);
    white-space: nowrap;
}

/* Ensure menu links have sufficient padding to accommodate the arrow and adjust space usage */
#fullwidth-menu .custom-vertical-menu ul li.menu-item-has-children > a,
#fullwidth-menu .custom-vertical-menu ul li ul li.menu-item-has-children > a,
#fullwidth-menu .custom-vertical-menu ul li ul li ul li.menu-item-has-children > a {
    display: block;
    position: relative;
    width: 90%; /* Adjust text container to take 90% of the space */
    padding-right: 10%; /* Space for the arrow */
}

/* Fix for Sticky Header When Menu is Open */
@media (min-width: 981px) {
    body.menu-open .et_pb_section.et_pb_sticky {
        position: static !important;
    }
}

/* Ensure the UL or parent container of the social icons is displayed as a flex container */
#menu-your-menu-id .social-media-container { /* Replace 'your-menu-id' with the actual ID or class */
    display: flex;
    justify-content: center; /* Centers the icons horizontally */
    flex-wrap: nowrap; /* Prevents wrapping to a new line */
}

/* Style for each social media link */
#menu-your-menu-id .social-media-container > li { /* Direct children of the container */
    margin-right: 10px; /* Space between items */
    list-style: none; /* Removes bullet points */
}

/* Style adjustments for the icons within the links */
#menu-your-menu-id .social-media-container > li a {
    color: #FFF; /* White color for the icons, adjust as needed */
    font-size: 24px; /* Icon size */
    display: flex;
    align-items: center; /* Vertically center icons and any accompanying text */
    text-decoration: none; /* Removes underline */
}

/* Additional styling if FontAwesome is used */
#menu-your-menu-id .social-media-container > li a i.fab {
    margin-right: 5px; /* Space between icon and any text */
}

/* Make mobile menu full width and position it directly below the menu row */
.et_mobile_menu {
    width: 100vw !important; /* Full viewport width */
    left: 0 !important; /* Align to the left of the viewport */
    position: fixed !important; /* Fixed position to cover full width */
    top: 70px !important; /* Adjust top to account for menu icon row height */
    z-index: 9999; /* Ensure it's above other elements */
    background-color: #E2E3DA; /* Background color for the dropdown */
    padding-top: 40px; /* Adjust padding */
    box-sizing: border-box;
    display: none; /* Hidden initially */
    overflow-y: auto; /* Allow scrolling if menu items overflow */
    max-height: calc(100vh - 80px); /* Limit height to screen height minus menu icon row */
}

/* Show the mobile menu when opened */
.menu-opened .et_mobile_menu {
    display: block;
}

/* Ensure the mobile menu items are centered and span full width */
.et_mobile_menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
}

/* Increase height and spacing for menu items */
.et_mobile_menu ul li,
.et_mobile_menu ul li a {
    padding: 15px 20px !important; /* Increased padding for spacing */
    line-height: 1.8 !important; /* Adjust line height for better spacing */
}

/* Increase height and spacing for submenu items */
.et_mobile_menu ul li .sub-menu li,
.et_mobile_menu ul li .sub-menu li a {
    padding: 12px 20px !important; /* Increase padding for submenu items */
    line-height: 1.6 !important; /* Adjust line height */
}

/* Change hamburger icon to X when mobile menu is open */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    
    content: '×'; /* Multiplication sign, often renders better than '✖' */
    font-size: 30px; /* Set the font size */
    font-weight: 100; /* Lighter weight to make the '×' thinner */
    color: black !important; /* Ensure the close icon is black */
	
    display: inline-block; /* Proper display for alignment and spacing */
    font-family: 'Arial', 'Helvetica', sans-serif; /* Use a font that supports light weights */
}

/* Alternative: Use an image-based close icon (if needed) */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar.close-image::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar.close-image::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('your-x-icon-url.svg'); /* Replace with actual URL */
    background-size: contain;
    background-repeat: no-repeat;
}

/* Ensure the close icon remains visible */
.menu-opened .mobile_menu_bar::before {
    display: inline-block !important;
}

/* Add a mobile-toggle button for dropdown (+/-) */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has-children .mobile-toggle {
    width: 44px;
    height: 100%;
    padding: 0px !important;
    max-height: 44px;
    border: none;
    position: absolute;
    right: 20px;
    top: 0;
    z-index: 999;
    background-color: transparent;
    font-family: Arial, sans-serif; /* Consistent font */
    font-size: 20px; /* Icon size */
    color: #f68121; /* Color for toggle symbols */
    display: inline-block;
    text-align: center;
}

/* Remove default arrow icons on mobile menu items */
ul.et_mobile_menu li.menu-item-has-children > a::after,
ul.et_mobile_menu li.page_item_has-children > a::after {
    content: none !important; /* Remove default icons */
}

/* Positioning for mobile menu items */
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has-children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
    position: relative;
}

/* Remove default background color from menu items that have children */
.et_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
}

/* Hide the submenu by default */
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
    display: none !important;
    visibility: hidden !important;
}

/* Show the submenu when toggled open */
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
    display: block !important;
    visibility: visible !important;
}

/* Adjust the toggle icon position and transparency */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
    text-align: center;
    opacity: 1;
}

/* Force the background color and add a rounded border */
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
    background-color: #ffffff !important;
    border-radius: 10px;
}

/* Additional font size adjustment for any superscript text within the mobile menu */
.et_pb_text sup {
    font-size: 75%; /* Adjust as needed */
}

/* Style the social media menu items to be in one line on mobile */
@media only screen and (max-width: 980px) {
    /* Flex container for social icons */
    .et_mobile_menu .menu-item.social-icons {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    /* Inline display for each social icon */
    .et_mobile_menu .menu-item.social-icons a {
        display: inline-flex;
        align-items: center;
        font-size: 20px; /* Adjust size for icons */
        color: #ffffff !important; /* Set icon color to white */
    }
}

/* Style for the mobile menu toggle (hamburger and close) */
.mobile_menu_bar {
    font-size: 24px;
    color: #ffffff;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 10px;
    z-index: 10001;
}

/* Toggle between hamburger and X icons */
.fa-bars {
    display: inline;
}

.menu-opened .fa-bars {
    display: none;
}

.menu-opened .fa-times {
    display: inline;
    color: black !important; /* Ensure close (X) icon is black */
}

/* Zero out margins and padding for the UL or parent container of the menu */
.nav, .menu, ul.nav, ul.menu {
    margin: 0;
    padding: 0;
}

/* Specifically target the menu container for social icons if part of a list */
.menu-item.socials, .menu-item.socials li {
    display: inline-flex; /* Aligns items inline */
    align-items: center; /* Centers items vertically */
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
    list-style-type: none; /* Removes bullet points */
}

/* Styling for links within the social icons container */
.menu-item.socials a {
    text-decoration: none; /* Removes underline */
    margin-right: 10px; /* Space between icons, last item won't need it */
}

.menu-item.socials a:last-child {
    margin-right: 0; /* Ensures no trailing space after the last icon */
}

/* Specific targeting of FontAwesome icons within the links */
.menu-item.socials a i {
    color: #e02b20 !important; /* Default color set to black, ensure this overrides with !important */
}