.page-header {
  .logo {
    z-index: 9999;
  }

  @media (min-width: 1370px) {
    .header-right {
      padding-block: 0;
    }
  }

  

  .nav-primary {
    .ubermenu {
      > ul > li > a {
        padding-block: 25px !important;
      }

      .ubermenu-target {
        font-weight: normal;
      }

      .ubermenu-active > .ubermenu-target {
        color: #5f2167;
      }

      .ubermenu-active > .ubermenu-target > .ubermenu-sub-indicator {
        transform: rotate(180deg);
        top: -1px;
      }

      .ubermenu-target > .ubermenu-sub-indicator {
        position: relative;
        margin-top: 0;
        top: 0;
        transform: none;
        right: 0;
        display: inline-block;
        vertical-align: middle;
        margin-left: 6px;
        font-size: 14px;
        transform: rotate(0deg);
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
      }

      .ubermenu-item
        > .ubermenu-submenu.ubermenu-submenu-type-mega
        > .ubermenu-row,
      .ubermenu-active
        > .ubermenu-submenu.ubermenu-submenu-type-mega
        > .ubermenu-row {
        display: flex;
        flex-wrap: wrap;
      }

      .ubermenu-submenu-type-flyout {
        background: linear-gradient(
          #5f2167 0%,
          #64236e 14.29%,
          #6a2675 28.57%,
          #6f287d 42.86%,
          #742a84 57.14%,
          #7a2d8c 71.43%,
          #7f2f93 85.71%,
          #84329b 100%
        );
        border-radius: 0 0 4px 4px;
        color: #fff;
        min-width: 300px;
        padding: 12px 18px;

        .ubermenu-target {
          color: #fff;
          padding: 12px 22px;
          font-size: 18px;
          position: relative;
          transition: color 0.3s ease-in-out;
          overflow: hidden;
          display: flex;
          align-items: center;

          > span {
            position: relative;
            z-index: 2;
          }

          &:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            background: transparent;
            opacity: 0.83;
            backdrop-filter: blur(3.8093700408935547px);
            --webkit-backdrop-filter: blur(3.8093700408935547px);
            background-color: rgba(255, 255, 255, 0.5);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease-in-out;
          }
        }

        .ubermenu-item:hover > .ubermenu-target {
          color: #000;
        }

        .ubermenu-item:hover > .ubermenu-target:before {
          transform: scaleX(1);
        }

        .ubermenu-target > .ubermenu-sub-indicator {
          margin-left: auto;
        }

        .ubermenu-active > .ubermenu-target > .ubermenu-sub-indicator {
          transform: rotate(-90deg);
          top: 0;
        }
      }

      .ubermenu-submenu.ubermenu-submenu-type-mega {
        width: 100%;
        position: fixed;
        max-width: 1306px;
        padding-inline: var(--bs-gutter-x, 21px);
        transform: translateX(-50%);
        left: 50%;
        padding-bottom: 40px;
        box-shadow: none;

        > .ubermenu-row {
          max-width: 940px;
          margin: 0 0 0 auto;
          border-radius: 0px 0px 4px 4px;
          background: linear-gradient(
            #5f2167 0%,
            #64236e 14.29%,
            #6a2675 28.57%,
            #6f287d 42.86%,
            #742a84 57.14%,
            #7a2d8c 71.43%,
            #7f2f93 85.71%,
            #84329b 100%
          );
          color: #fff;
          padding: 42px 0;
          position: relative;

          &:before,
          &:after {
            content: "";
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 0;
            border-top: 350px solid transparent;
            border-right: 350px solid #fff;
            opacity: 0.1;
          }

          &:before {
          }

          &:after {
            border-top: 180px solid transparent;
            border-right: 180px solid #fff;
          }

          .ubermenu-target {
            color: #fff;
            padding: 10px 0;
            position: relative;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            font-weight: normal;
            transition: color 0.3s ease-in-out;

            &:before {
              content: "";
              display: block;
              position: absolute;
              top: 0;
              left: -12px;
              width: calc(100% + 24px);
              height: 100%;
              border-radius: 4px;
              background: transparent;
              opacity: 0.83;
              backdrop-filter: blur(3.8093700408935547px);
              --webkit-backdrop-filter: blur(3.8093700408935547px);
              background-color: rgba(255, 255, 255, 0.5);
              transform: scaleX(0);
              transform-origin: left;
              transition: transform 0.3s ease-in-out;
            }

            &:hover {
              color: #000;
            }

            &:hover:before {
              transform: scaleX(1);
            }

            > span {
              display: block;
              position: relative;
              z-index: 2;
            }
          }

          > .ubermenu-column {
            padding: 0 35px;
          }
        }

        > .ubermenu-row
          > .ubermenu-item
          > .ubermenu-submenu
          > .ubermenu-has-submenu-stack:first-child
          > .ubermenu-submenu {
          margin-top: 15px;
        }

        .ubermenu-submenu-type-stack
          > .ubermenu-row
          > .ubermenu-column:nth-child(1) {
          padding-right: 20px;
        }

        .ubermenu-submenu-type-stack
          > .ubermenu-row
          > .ubermenu-column:nth-child(2) {
          padding-left: 20px;
        }

        .ubermenu-submenu-type-stack
          > .ubermenu-row
          > .ubermenu-column:nth-child(3) {
          padding: 0;
        }

        > .ubermenu-row
          > .ubermenu-item
          > .ubermenu-submenu
          > .ubermenu-has-submenu-stack:first-child
          > .ubermenu-target {
          text-transform: uppercase;
          font-family: "Barlow", sans-serif;
          font-size: 18px;
          display: block;
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
          padding: 8px 0;
          pointer-events: none;

          &:hover {
            color: #fff;
          }

          &:before {
            display: none;
          }
        }

        > .ubermenu-row
          > .ubermenu-item
          > .ubermenu-submenu
          > .ubermenu-has-submenu-stack:first-child
          > .ubermenu-target
          > .ubermenu-sub-indicator {
          display: none;
        }
      }

      .ubermenu-item-type-column
        > .ubermenu-submenu-type-stack
        > .ubermenu-item-normal:first-child {
        margin-top: 0;
      }

      .ubermenu-submenu .ubermenu-submenu {
        padding-block: 0;
      }

      .submenu-logo-image {
        width: 240px;
        position: absolute;
        bottom: -40px;
        right: 20px;

        img {
          width: 100%;
          height: auto;
        }
      }
    }

    ul {
      gap: 0;
      display: block;
      padding: 0;
      margin: 0;
    }
  }

  .tab-nav {
    ul li a:before {
      display: none;
    }

    .ubermenu {
      visibility: visible;
      overflow: initial !important;

      &.ubermenu-responsive {
        position: relative;
        top: 0;
        background-color: transparent;
      }

      .ubermenu-item .ubermenu-submenu-drop {
        position: absolute !important;
      }

      ul {
        display: flex;
        flex-wrap: wrap;
      }

      > ul > li {
        position: relative;
        overflow: initial !important;
        min-width: 0;
        width: auto;
      }

      .ubermenu-sub-indicator {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 16px;
        right: 0;
        z-index: 10;
        transform: rotate(0deg);
        transition: transform 0.3s ease-in-out;
        padding: 0;
      }

      .ubermenu-is-open > .ubermenu-sub-indicator {
        transform: rotate(180deg);
      }

      > ul > li > a {
        padding-block: 22px !important;
        padding-right: 30px;
        padding-left: 0;
        display: inline-block;
        min-width: 100px;
      }

      > .ubermenu-nav > .ubermenu-item > .ubermenu-submenu > .ubermenu-row {
        background: linear-gradient(
          #5f2167 0%,
          #64236e 14.29%,
          #6a2675 28.57%,
          #6f287d 42.86%,
          #742a84 57.14%,
          #7a2d8c 71.43%,
          #7f2f93 85.71%,
          #84329b 100%
        );
        margin: 0;
        gap: 0;
      }

      .ubermenu-item > .ubermenu-submenu {
        min-height: 100% !important;
        visibility: visible;
        opacity: 1;
        overflow: initial !important;
        width: 200px;
        max-width: none !important;
        margin-top: 0;
        min-width: 230px !important;
        padding-block: 0;

        > .ubermenu-row > .ubermenu-item > .ubermenu-submenu {
          display: block;
          padding-bottom: 0;
        }

        .ubermenu-item-type-column
          > .ubermenu-submenu-type-stack
          > .ubermenu-item-normal:first-child {
          margin-top: 0;
        }

        .ubermenu-item {
          position: relative;
          color: #fff;
        }

        .ubermenu-item-level-5 > .ubermenu-submenu {
          background-color: #8c4c94;
          max-height: 300px;
          overflow: hidden !important;
          position: relative;
        }

        .ubermenu-sub-indicator {
          top: 5px;
          right: 3px;
        }

        ul {
          gap: 0;
          margin: 0;
        }

        .scroll-content .ubermenu-submenu {
          display: block;
        }

        .scrollbar-track-y {
          opacity: 1;
          width: 10px;
        }

        .scrollbar-thumb {
          width: 10px;
          border-radius: 0;
          background: #2b3139;
        }
      }

      .ubermenu-item.ubermenu-is-open > .ubermenu-submenu {
        display: block;
      }

      .ubermenu-submenu .ubermenu-target {
        color: #fff;
        padding: 10px 20px;
        font-weight: normal;
      }

      > .ubermenu-nav > .ubermenu-item > .ubermenu-submenu-type-flyout {
        background: linear-gradient(
          #5f2167 0%,
          #64236e 14.29%,
          #6a2675 28.57%,
          #6f287d 42.86%,
          #742a84 57.14%,
          #7a2d8c 71.43%,
          #7f2f93 85.71%,
          #84329b 100%
        );
        height: auto;
        max-height: none;

        .ubermenu-submenu {
          position: relative !important;
          box-shadow: none;
          background-color: #8c4c94;
        }
      }
    }

    .ubermenu-responsive-toggle {
      display: none;
    }

    .submenu-logo-image {
      display: none;
    }
  }

  @media (min-width: 768px) {
    .header-right {
      padding-block: 0;
    }
  }
}


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

  .page-header {
    & .tab-nav {
        & .ubermenu {
            > ul > li > a {
                padding-block: 22px !important;
                padding-right: 30px;
                padding-left: 0;
                display: inline-block;
                min-width: 100px;
            }
        }
    }
  }


  .ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target>.ubermenu-sub-indicator {
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -15px !important;
  }

}

@media (max-width: 1200px) {
  .page-header {
    position: fixed;
    width: 100%;
    left: 0;

    .logo {
      transition: max-width 0.3s ease-in-out;
    }

    &.menu-is-open .logo {
      max-width: 86px;
    }

    .nav-primary {
      display: none;
      position: fixed;
      width: 100%;
      left: 0;
      top: 193px;
      height: calc(100vh - 193px);

      &:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          #6a2572 0%,
          #64236e 14.29%,
          #6a2675 28.57%,
          #6f287d 42.86%,
          #742a84 57.14%,
          #7a2d8c 71.43%,
          #7f2f93 85.71%,
          #84329b 100%
        );
        opacity: 0.72;
      }

      .submenu-logo-image {
        display: none;
      }

      .ubermenu-responsive-toggle {
        display: none;
      }

      .ubermenu-responsive.ubermenu {
        position: relative;
        top: 0;
        visibility: visible;
        background: transparent;
        max-height: 100% !important;
        background-color: #fff;
        padding: 0;
        z-index: 2;
        max-height: calc(100vh - 193px) !important;
        overflow: scroll !important;

        .ubermenu-sub-indicator {
          display: block;
          width: 58px;
          height: 58px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 0;
          right: calc(var(--section-margins, 52px) - 30px);
          z-index: 10;
          font-size: 0;

          > span {
            width: 16px;
            height: 16px;
            display: block;
            position: relative;
            transform: rotate(0deg);
            display: block;
            transition: transform 0.3s ease-in-out;

            &:before,
            &:after {
              content: "";
              display: block;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
              right: 0;
              margin: 0 auto;
              background-color: #84329b;
            }

            &:before {
              width: 100%;
              height: 4px;
            }

            &:after {
              height: 100%;
              width: 4px;
            }
          }
        }

        .ubermenu-is-open > .ubermenu-sub-indicator {
          span {
            transform: rotate(-45deg);
          }
        }

        .ubermenu-submenu-type-flyout {
          background: none;
          box-shadow: none;
          padding: 0;
        }

        > ul > li {
          position: relative;

          &:not(:last-child) {
            border-bottom: 1px solid rgba(43, 49, 57, 0.2);
          }

          > .ubermenu-submenu-type-flyout,
          > .ubermenu-submenu {
            background: linear-gradient(
              #5f2167 0%,
              #64236e 14.29%,
              #6a2675 28.57%,
              #6f287d 42.86%,
              #742a84 57.14%,
              #7a2d8c 71.43%,
              #7f2f93 85.71%,
              #84329b 100%
            );
          }
        }

        > ul > li > a {
          color: #000;
          padding-block: 18px !important;
          font-size: 18px;
          font-weight: normal;
          padding-inline: var(--section-margins, 52px);
        }

        > ul > li.ubermenu-is-open > a {
          background-color: rgba(204, 208, 213, 0.4);
        }

        .ubermenu-is-open > .ubermenu-sub-indicator {
          transform: rotate(180deg);
        }

        .ubermenu-item.ubermenu-is-open > .ubermenu-submenu {
          display: block;
          overflow: initial;
          min-height: 100% !important;
          margin-top: 0;
        }

        .ubermenu-item > .ubermenu-submenu {
          height: auto;
          visibility: visible;
          opacity: 1;
          position: relative;
        }

        .ubermenu-submenu.ubermenu-submenu-type-mega {
          transform: none;
          max-height: 100%;
        }

        .ubermenu-nav > li > .ubermenu-submenu-type-flyout {
          .ubermenu-target:before {
            display: none;
          }

          .ubermenu-target {
            padding-block: 18px;
          }

          .ubermenu-sub-indicator {
            span:before,
            span:after {
              background-color: #fff;
            }
          }

          > li {
            position: relative;
          }

          > li > .ubermenu-target {
            padding-inline: var(--section-margins, 52px);
          }

          > li > .ubermenu-submenu {
            background-color: #8c4c94;
          }

          > li > .ubermenu-submenu > li > .ubermenu-target {
            padding-inline: calc(var(--section-margins, 52px) + 20px);
          }

          .ubermenu-item:hover > .ubermenu-target {
            color: #fff;
          }
        }

        .ubermenu-submenu.ubermenu-submenu-type-mega {
          padding: 0;
          position: relative;

          > .ubermenu-row {
            padding: 0;
            max-width: 100%;
          }

          .ubermenu-item:hover > .ubermenu-target {
            color: #fff;
          }

          .ubermenu-target:before {
            display: none;
          }

          .ubermenu-submenu {
            display: block;
          }

          .ubermenu-target {
            color: #fff;
          }

          > .ubermenu-row
            > .ubermenu-item
            > .ubermenu-submenu
            > .ubermenu-has-submenu-stack:first-child
            > .ubermenu-sub-indicator {
            display: none;
          }

          .ubermenu-submenu-type-stack
            > .ubermenu-row
            > .ubermenu-column:nth-child(1),
          .ubermenu-submenu-type-stack
            > .ubermenu-row
            > .ubermenu-column:nth-child(2) {
            padding: 0;
          }

          > .ubermenu-row {
            padding-inline: var(--section-margins, 52px);
            padding-block: 32px;

            > .ubermenu-column {
              padding: 0;

              &:not(:last-child) {
                margin-bottom: 55px;
              }

              &:nth-last-child(2) {
                margin-bottom: 0;
              }
            }

            &:before,
            &:after {
              display: none;
            }
          }
        }
      }
    }
  }


  .page-header {
      & .tab-nav {
          & .ubermenu {
              .ubermenu-item > .ubermenu-submenu {
                  min-height: 100% !important;
                  visibility: visible;
                  opacity: 1;
                  overflow: initial !important;
                  width: 200px;
                  max-width: none !important;
                  margin-top: 0;
                  min-width: 230px !important;
                  padding-block: 0;
              }
          }
      }
  }


}


@media (min-width: 1025px) and (max-width: 1369px){

  .page-header {
    & .tab-nav {
        & .ubermenu {
            .ubermenu-sub-indicator{
              right: -10px !important;
            }
          }
        }
      }

  .page-header {
    & .tab-nav {
        & .ubermenu {
            & .ubermenu-item > .ubermenu-submenu {
                .ubermenu-sub-indicator {
                  right: 3px !important;
                }    
              }
            }  
          }
        }   

}

@media (max-width: 767.99px) {
  .page-header {
    &.menu-is-open .logo {
      max-width: 88px;
    }

    .nav-primary {
      top: 192px;
      height: calc(100vh - 169px);

      .ubermenu-responsive.ubermenu {
        max-height: calc(100vh - 169px) !important;

        > ul > li > a {
          padding-inline: 22px;
        }

        .ubermenu-submenu.ubermenu-submenu-type-mega {
          > .ubermenu-row {
            padding-inline: 22px;
          }
        }

        .ubermenu-sub-indicator {
          right: 0;
        }

        .ubermenu-nav > li > .ubermenu-submenu-type-flyout {
          > li > .ubermenu-target {
            padding-inline: 22px;
          }
        }
      }
    }
  }
}

@media (min-width: 1370px) {
  .page-header .nav-primary {
    display: block !important;
  }


  .ubermenu-item > .ubermenu-submenu {
    height: auto;
    visibility: hidden;
    opacity: 0;
    position: relative;
  }

}

.toggle-menu {
  position: relative;

  i {
    opacity: 0;
  }

  > span {
    position: absolute;
    display: block;
    width: 27px;
    height: 20px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    > span {
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #000;
      transform-origin: left;
      transition: transform 0.3s ease-in-out, top 0.3s ease-in-out,
        left 0.3s ease-in-out, bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;

      &:first-child {
        top: 0;
      }

      &:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
      }

      &:last-child {
        bottom: 0;
      }
    }
  }

  &.is-active {
    > span {
      span:first-child {
        transform: rotate(45deg);
        top: -2px;
        left: 2px;
      }

      span:nth-child(2) {
        left: -10px;
        opacity: 0;
      }

      span:last-child {
        transform: rotate(-45deg);
        left: 2px;
        bottom: 2px;
      }
    }
  }
}

@media (min-width: 783px) and (max-width: 1369px) {
  .admin-bar {
    .page-header {
      .nav-primary {
        top: 192px;
        height: calc(100% - 192px);
      }
    }
  }
}


@media (min-width: 1200px) and (max-width: 1369px) {
  
  .logo{
    max-width: 180px;
  }


  .page-header {
    & .nav-primary {
        & .ubermenu {
            .ubermenu-target > .ubermenu-sub-indicator {                
                top: 6px;                
            }
        }
    }
  }

}



@media (min-width: 1370px) {
  
  .logo{
    max-width: 230px;
  }

  .page-header {
    & .nav-primary {
        & .ubermenu {
            .ubermenu-target > .ubermenu-sub-indicator {                
                top: 0;                
            }
        }
    }
  }

}

@media (max-width: 767px) {
  .admin-bar {
    .page-header {
      .nav-primary {
        top: 169px;
        height: calc(100% - 169px);
      }
    }
  }
}

@media (max-width: 466px) {
  .admin-bar {
    .page-header {
      .nav-primary {
        top: 195px;
        height: calc(100% - 195px);
      }
    }
  }
}

/* Tablet fixes */

.service-tablet
  + i
  + ul.ubermenu-submenu.ubermenu-submenu-id-2757.ubermenu-submenu-type-auto.ubermenu-submenu-type-mega.ubermenu-submenu-drop.ubermenu-submenu-align-full_width {
  background: #62226b !important;
}