.main-nav, .main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
}

.main-nav > li > a {
    color: #fff;
    padding: 0 0 9px;
    display: inline-block;
    position: relative;
}

.main-nav .sub-menu a {
    color: #000;
    line-height: 2.2;
    display: inline-block;
}


.main-nav {
    display: flex;
    flex-direction: row;
    gap: 58px;
}

li.menu-item-has-children {
    position: relative;
}




.btn-mobile {
      background: transparent;
      display: none;
      align-items: center;
      justify-content: center;
      border: 0;
      min-width: 38px;
      height: 38px;
      padding: 0;
      position: relative;
  }

  .btn-mobile:before, .btn-mobile:after {
    background: #fff;
  }

  .btn-mobile span {
    background: var(--blue);
  }

  .btn-mobile span, .btn-mobile:before, .btn-mobile:after {
      width: 38px;
      height: 3px;
      border-radius: 3px;
      display: flex;
      transition: .25s;
      opacity: 1;
  }

  .btn-mobile.menu-open span {
    opacity: 0;
  }
  .btn-mobile:before, .btn-mobile:after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
  }

  .btn-mobile:before {
      transform: translate(-50%, calc(-50% + 12px) ) rotate(0deg);
  }

  .btn-mobile:after {
      transform: translate(-50%, calc(-50% - 12px) ) rotate(0deg);
  }

  .btn-mobile.menu-open:before {
      transform: translate(-50%, calc(-50% + 0px) ) rotate(45deg);
      background: var(--blue);
  }

  .btn-mobile.menu-open:after {
      transform: translate(-50%, calc(-50% - 0px) ) rotate(-45deg);
      background: var(--blue);
  }

li.menu-item-has-children .sep {
    display: none;
  
}



@media screen and (min-width: 1200px) {

    li.menu-item-has-children:hover ul.sub-menu {
    display: block;
    }

    .main-nav .sub-menu a:hover {
        color: #2F4E72;
    }

    li.menu-item-has-children:hover > a:after {
        width: 100%;
    }

    ul.sub-menu:before {
        content: '';
        display: block;
        width: 100%;
        background: #fff;
        position: absolute;
        top: 15px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: 23px;
    }
    ul.sub-menu {
        padding: 35px 27px 20px;
        border-radius: 23px;
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(0px, 100%);
        min-width: 215px;
        display: none;
    }

    .main-nav > li > a:after {
        content: '';
        display: block;
        width: 0;
        height: 3px;
        background: var(--blue);
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 3px;
        transition: .15s;
    }

    .main-nav > li > a:hover:after,
    .main-nav > li.current-menu-item a:after {
        width: 100%;
    }

}


@media screen and (max-width: 1199px) {

     .main-nav > li.current-menu-item a {
        color: #2f4e72;
    }

    

    .btn-mobile {
        display: flex;
    }


    .main-nav > li > a {
        color: #000;
        padding: 0 0 0px;
    }

    .site-header nav {
    position: fixed;
    top: 78px;
    right: 0;
    left: 26px;
    bottom: 0px;
    z-index: 1;
    background: #fff;
    border-radius: 24px 0 0 0;
    padding: 35px;
}

.admin-bar .site-header nav {
    top: 110px;
}

.site-header {
    padding: 20px 0;
}

.site-haader .logo img {
    max-height: 30px;
}

.site-header .logo img {
    max-height: 30px;
    width: auto;
}

.site-header .logo, .site-header .logo a {
    display: flex;
    align-items: center;
}

.main-nav {
    flex-direction: column;
    gap: 30px;
}

.main-nav > li > a {
    line-height: 1;
}

ul.sub-menu {
    padding-left: 30px;
    padding-top: 15px;
    position: relative;
    z-index: 1;
}
.site-header .social {
    display: none;
}
.site-header nav {
    transform: translate(101%, 0);
    transition: .12s;
}

.menu-open .site-header nav {
    transform: translate(0%, 0);
}
li.menu-item-has-children .sep {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
}


@media screen and (max-width: 782px) { 
    .admin-bar .site-header {
        top: 46px;
    }
    .admin-bar .site-header nav {
        top: 124px;
    }
}