@media screen and (min-width: 1260px) and (max-width: 10000px) {


  
  /* Added span for main-menu */
  .xxx-mm-item > .fa-solid {
      display: none;
  }

  /* All top level menu items */
  .header .main-menu div > ul > li {
      position: relative;
      flex-direction: column;
  } 

  @media (hover: hover) {
      .header .main-menu div > ul > li::after {
          content: "";
          position: absolute;
          bottom: -4px;
          left: 0;
          height: 2px;
          width: 0;
          background-color: #ffffff;
          transition: width 0.5s;
      }

      .header .main-menu div > ul > li:hover::after {
          width: 100%;
      }

      .header .main-menu div > ul > li::before {
          content: "";
          position: absolute;
          bottom: -200%;
          left: 0;
          height: 0;
          width: 100%;
          background-color: transparent;
      }

      .header .main-menu div > ul > li:hover::before {
          height: 200%;
      }
  }

  /* All sub menus */
  .header .main-menu div > ul > li > ul {
      display: flex !important;
      position: absolute;
      top: 56px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10000;
      background-color: #e2dde3;
      width: max-content;
      max-width: 1392px;
      padding: 0rem 3rem;
      height: 0vh;
      overflow: auto;
      opacity: 0;
      transition: all 0.5s;
      flex-direction: column;
  }
  @media (hover: hover) {
      .header .main-menu div > ul > li:hover > ul {
          padding: 2rem 3rem;
          opacity: 1;
          height: fit-content;
      }
  }
  /* all sub-menus that have another menu inside of them */
  .header .main-menu div > ul > li > ul ul {
      display: flex;
      flex-direction: column;
      list-style: disc;
      margin: 0 22px;
  }

  .header .main-menu div > ul > li > ul ul ul {
      margin: 0 0;
  }

  .header .main-menu div > ul > li > ul ul > li {
      color: #352839;
  }

  /* every link in the sub menu  */
  .header .main-menu div > ul > li > ul a {
      display: block;
      color: #352839;
      transition: transform 0.3s;
      font-size: 14px;
      margin: 5px 0;
  }

  @media (hover: hover) {
      .header .main-menu div > ul > li > ul a:hover {
          transform: translateX(10px);
      }
  }

  /* links with arrows */
  .xxx-mh-item {
      font-weight: 700;
      font-size: 16px;
      margin: 10px 0;
  }

  /* top level menu item : what to expect & about us & resource center */
  .header .main-menu div > ul > li:nth-of-type(6) > ul,
  .header .main-menu div > ul > li:nth-of-type(1) > ul,
  .header .main-menu div > ul > li:nth-of-type(4) > ul,
   .header .main-menu div > ul > li:nth-of-type(3) > ul{
      flex-direction: column;
  }

  /* top level menu item : family law */
  .header .main-menu div > ul > li:nth-of-type(5) > ul > li,
  .header .main-menu div > ul > li:nth-of-type(2) > ul > li {
      width: 33.33%;
  }

  /* top level menu item : family law */
  .header .main-menu div > ul > li:nth-of-type(6) > ul > li:nth-of-type(3) > ul > li:nth-of-type(4),
  .header .main-menu div > ul > li:nth-of-type(2) > ul > li:nth-of-type(3) > ul > li:nth-of-type(4),
  .header .main-menu div > ul > li:nth-of-type(2) > ul > li:nth-of-type(3) > ul > li:nth-of-type(3) {
      display: block;
  }

  /* top level menu item : family law */
  .header .main-menu div > ul > li:nth-of-type(5) > ul > li:nth-of-type(3) > ul > li:nth-of-type(4) .xxx-mh-item,
  .header .main-menu div > ul > li:nth-of-type(2) > ul > li:nth-of-type(3) > ul > li:nth-of-type(4) .xxx-mh-item,
  .header .main-menu div > ul > li:nth-of-type(2) > ul > li:nth-of-type(3) > ul > li:nth-of-type(3) .xxx-mh-item {
      margin-left: -22px;
  }

  /* Lines */
  .main-menu
      ul
      .hs-menu-depth-1.hs-item-has-children
      > .hs-menu-children-wrapper
      .hs-item-has-children
      .hs-menu-children-wrapper {
      position: relative;
      flex-direction: column;
      
  }
.main-menu
      ul
      .hs-menu-depth-1.hs-item-has-children
      > .hs-menu-children-wrapper
      .hs-item-has-children
      .hs-menu-children-wrapper::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 200px;
      background-color: #352839;
 
  
}