Mega menu issue

Hi there,

tricky one, as the sub menus are what define the individual columns.
However, we may be able to get around that with a different approach.

If you can construct the menu without the mega menu, and in the structure your require.
Then let me have access to the site so i can see the menu item ill provide some other CSS for it.

Ok, so i had to re-order the menu items, as those 3 x child items had to come immediately after the first parent menu.

And in the Customizer CSS, i kept your current CSS and left it commented out.
And before that i added a different set of CSS.
In that CSS i commented this section:

/* menu columns */
    nav .main-nav .mega-menu>ul {
        position: absolute;
        width: 100%;
        right: 0 !important;
        display: block;
        column-count: 3;
    }
    nav .main-nav .mega-menu>ul>li:nth-child(5),
    nav .main-nav .mega-menu>ul>li:nth-child(6) {
        break-before: column;
    }
    /*-- menu columns end --*/

First we use column-count: 3; CSS property to create the 3 columns.
An then we tell which parent LI’s need to break toa new column.
In the example its the 5th and 6th menu items.

Within the @media query you could add this CSS at the end:

nav .main-nav .mega-menu>ul {
    left: 0 !important;
    height: auto !important;
    max-height: 0;
    transition: all 0.3s ease-in;
}
nav .main-nav .mega-menu:hover>ul {
    max-height: 400px;
}

Adjust the max-height: 400px; to suit the need.