.vertical_menu_container {
        min-height: 200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        gap: 10px;
    }

    .vertical_menu_box
    {
        width: auto;
        background-color: #fff;
        font-size: 1.1rem;
        /*border: 1px solid red;*/
        flex-shrink: 0;
        margin-top: 25px;
        
    }
    #box-1 {
        flex-shrink: 1;
    }
     .vertical_menu_box1
    {
        width: auto;
        background-color: #fff;
        font-size: 1.1rem;  /*main font size */
        /*border: 1px solid red;*/
    }
    #box-2 {
        flex-grow: 1;
    }
    
/* 1. Parent wrapper aligns sidebar and content side-by-side */
.main-wrapper {
  display: flex;
  min-height: 100vh;
}

/* 2. Sidebar sizing */
.sidebar {
  width: 200px;
  /*background-color: aqua;*/
}

/* 3. Turns the list into a vertical flex container */
.vertical-menu {
  display: flex;
  flex-direction: column; /* Stacks links vertically */
  list-style: none;       /* Removes default bullets */
  padding: 0;
  margin: 15px;
}

/* 4. Optional: Styling the links to take full width */
.vertical-menu li a {
  display: block;
  padding-left: 15px;
  color: #ecf0f1;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 5px;
  font-family: var( --font-family-main);
   color: var(--nav-menu-maincolor);
}

.vertical-menu li a:hover {
  /*background-color: aqua;*/
   color: var(--nav-menu-maincolor);
}


/* Heading style */
.vertical_menu-heading {
  font-size: 1rem;
  margin-bottom: 1.1rem;
  margin-left: 10px;
  /*text-transform: uppercase;*/
  color: var(--nav-menu-maincolor);
  font-weight: 600;
}