Re-order custom columns in Navigation menu?

Site URL: https://unchartedtrvl.squarespace.com

In the screenshot below, I have created 4 columns using the CSS for the drop down when "Destinations" is hovered on. It's filled with Regions and Countries. The regions are in bold and the countries within that region fall under them in regular text. 

What I'd like to do is set up each column to begin with the bold Region but I am lost on how to do that. Ideally, Central Asia & Far East, Europe and South Caucasus, Middle East, and Russia would all be at the top of each column with its countries following below. 

Right now, my code to style the header is below, It can probably be optimized too... but right now I'd just like to set up my nav menu how I want it.

/* Nav design */
.header-title-nav-wrapper {
    flex: 1 0 75%!important;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}
[href="/destinations"]+.header-nav-folder-content {
  position: fixed!important;
  position: center!important;
  max-width: 75vw!important;
    margin-left: 6vw!important;
    margin-right: 6vw!important;
    column-count: 4!important;
}
.header-nav-folder-content{background-color:rgba(255,255,255,0.92)!important}
.header-nav-folder-content a {padding-bottom:0.2em!important;padding-top:0.5em!important}
.header-nav-folder-content{
  border: 1px solid #1b6fc1}
#block-yui_3_17_2_1_1612978871795_2959 h1{color:#fff}
  .sqs-block-image .design-layout-collage .image-overlay{
    opacity:0
  }
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 20px!important;
  .header-nav-folder-item 
  {
  a[href="/central-asia-far-east"]
   {font-weight: bold!important}
  a[href="/europe-south-caucasus"]
   {font-weight: bold!important}
  a[href="/middle-east"]
   {font-weight: bold!important}
  a[href="/russia"]
   {font-weight: bold!important}
  a[href="/scheduled-group-tours-2022"]
   {font-weight: bold!important}
  a[href="/scheduled-group-tours-2023"]
   {font-weight: bold!important}
 a[href="/tailor-made-tours"]
   {font-weight: bold!important}
          padding: 0em 1em!important;
  }
  .header-nav-folder-item {
    font-size: 20px;
  }

.header-nav-folder-item:hover {
    background: #1470af!important;
    a {color: #fff!important;}
  }
}

Any help?

Hi. Your site is private. Can you setup password & share url again? We can help easier

On 12/13/2021 at 8:03 AM, tuanphan said:

Hi. Your site is private. Can you setup password & share url again? We can help easier

Hi Tuanphan!

Sure thing.

https://unchartedtrvl.squarespace.com/

pw: undiscovered

Add to Design > Custom CSS

[data-section-id="61c1f4baa5fae80876c6ebc4"] span.accordion-item__title {
    font-weight: bold;
}