.mega-nav-wrapper {
  --submenu-width: 220px;
  --submenu-padding: 40px;
  --submenu-normal-padding: 30px;
  --column-gap: 40px;
  --offset: 24px;
  --items-gap: 16px;
  --title-font: 16px;
  --headline-font: 14px;
  --description-font: 15px;
  --primary-menu-color: #fff;

  a.current-item, a.current-item * {
      font-weight: bold;
      color: var(--cta);
  }

  .mega-nav {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    row-gap: 0px;
    column-gap: 24px;
  }

  .mega-mobile_toggle {
    display: none;
    svg {
      display: block
    }
  }



  .mega-menu-item {
    position: relative;
    display: flex;

    .mega-primary-link {
      display: flex;
      align-items: center;
      column-gap: 10px;
      justify-content: space-between;
      height: 80px;
      font-weight: 400;
      letter-spacing: 0;
      font-size: 14px;
      color: var(--primary-menu-color);
      &:hover{
        color: var(--cta);
      }

      &.item-type-button {
        .mega-primary-nav{
          background-color: var(--cta);
          display: block;
          padding: 10px 18px;
          position: relative;
          overflow: hidden;
          span{
            position: relative;
          }
          &:before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #fff;
            left: 50%;
            top: 50%;
            z-index: 0;
            transition: .3s ease;
            transform: translate(-50%, -50%) scaleX(0);
          }
        }
        &:hover .mega-primary-nav{
          span{
            color: #000;
          }
          &:before{
            transform: translate(-50%, -50%) scaleX(1);
          }
        }
      }
    }

    .mega-nav-submenu {
      position: absolute;
      background: #000;
      border-top: 1px solid var(--cta);
      pointer-events: none;
      opacity: 0;
      z-index: -999;
      visibility: hidden;
      top: calc(100% + 20px);
      transition: all .3s, height 0s;
      overflow: hidden;
      display: flex;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0px 8px 8px rgb(0 0 0 / 10%);
     
      a[rel^="external"] .sn-menu-title:after {
        content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 26V38C36 39.0609 35.5786 40.0783 34.8284 40.8284C34.0783 41.5786 33.0609 42 32 42H10C8.93913 42 7.92172 41.5786 7.17157 40.8284C6.42143 40.0783 6 39.0609 6 38V16C6 14.9391 6.42143 13.9217 7.17157 13.1716C7.92172 12.4214 8.93913 12 10 12H22" stroke="%2314194D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 6H42V18" stroke="%2314194D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 28L42 6" stroke="%2314194D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        margin-left: .3em;
        position: relative;
      }

      .menu-col {
        padding: var(--submenu-padding);
        display: flex;
        row-gap: var(--column-gap);
        column-gap: var(--column-gap);
        margin-top: var(--top-offset);
        &.no-promo{
          max-width: 100%;
        }
      }


      .menu-col {
        width: var(--column-width);
        max-width: 100%;
        /* max-width: calc(calc(100% / calc(var(--count))) - calc(calc(var(--count) - 1) * var(--column-gap) / calc(var(--count)))); */
        display: flex;
        flex-direction: column;
        row-gap: var(--items-gap);
        column-gap: var(--items-gap);
      }


      .menu_headline {
        font-weight: 600;
        font-size: var(--headline-font);
        line-height: 1.14;
        text-transform: uppercase;
        color: #3EA2F9;
      }
      .menu-content{
        color: #fff;
        &:hover{
          color: var(--cta);
        }
      }
      .menu_title {
        font-size: var(--title-font);
        line-height: 1.4;
        
        &.fade_title{
          opacity: 0.6;
        }
        &.title-headline{
          color: var(--cta);
          text-transform: uppercase;
          font-size: var(--headline-font);
        }
      }
     

      .badge_text{
        font-size: 14px;
        font-weight: bold;
        letter-spacing: -0.03em;
        line-height: 20px;
        display: flex;
        align-items: center;
        column-gap: 4px;
        flex-wrap: wrap;
        color: #fff;
        opacity: .6;
        svg{
          display: block;
        }
      }
      .menu_description {
        font-size: var(--description-font);
        font-weight: normal;
        line-height: 1.5;
        color: #fff;
        max-width: 420px;
      }

      .menu-content {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        column-gap: 8px;
      }

      .submenu_row .menu-content {
        position: relative;
        z-index: 2;

        /* &:before {
          content: "";
          display: block;
          position: absolute;
          inset: -8px -12px;
          border-radius: 4px;
          background-color: #F5F5F5;
          z-index: -1;
          opacity: 0;
          transition: .3s linear;
        }

        &:hover:before {
          opacity: 1;
        } */

        .menu_promot_image{
          width: 100%;
          max-width: 460px;
          overflow: hidden;
          border-radius: 0 0 10px 0;
          img{
            display: block;
            width: 100%;
          }
        }

      }

    }
    &.type-auto .mega-nav-submenu{
      width: var(--submenu-width);
      .menu-col{
        padding: var(--submenu-normal-padding)
      }
    }
    &:hover .mega-nav-submenu {
      pointer-events: auto;
      opacity: 1;
      z-index: 9;
      visibility: visible;
      top: calc(100% - 2px);
    }

    &.type-full {
      position: static;
    }

    &.type-full .mega-nav-submenu {
      width: 100%;
      left: 0;
      transform: none;

      .submenu_row {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }


  span.mega-indicator {
    content: '';
    width: 6px;
    height: 6px;
    display: block !important;
    border-bottom: 3px solid;
    border-right: 3px solid;
    transform: translate(0px, -2px) rotate(45deg);
  }

  .sn-menu-btn {
    display: table;
    padding: 14px 30px;
    border: 1px solid;
    border-radius: 2px;
    color: #fff;
    position: relative;
    overflow: hidden;
    .sn-menu-title{
      position: relative;
    }
    &:before{
      content: '';
      display: block;
      position: absolute;
      background-color: var(--cta);
      width: 110%;
      height: 110%;
      left: 50%;
      top:50%;
      transform: translate(-50%,-50%) scaleX(0);
      transform-origin: 50% 50%;
      transition: .2s linear;
    }
    &:hover:before{
      transform: translate(-50%,-50%) scaleX(1);
    }
    &.cta-primary{
      background-color: #fff;
      color: #000;
      &:hover{
        color:#fff;
        border-color: var(--cta);
      }
    }
    &.cta-secondary{
      &:hover{
        color: #000;
        border-color: #fff;
      }
      &:before{
        background-color: #fff;
      }
    }
  }

  li.sn-mobile_btns {
    padding: 20px 48px;
    border-bottom: 1px solid #ccc;
  }

  @media (min-width:1199px) {
    .mega-nav-content {
        display: block !important;
    }
    .mega-nav {
      display: flex !important;

      .mega-primary-item {
        &:hover .indicator-wrapper {
          transform: rotate(180deg);

          .mega-indicator {
            border-color: var(--cta);
          }
        }

        .mega-nav-submenu {
          display: flex !important;
           &.position-left{
              transform: translateX(calc(var(--offset) * -1));
              left: 0;
          }
          &.position-right{
              transform: translateX(var(--offset));
              left: auto;
              right: 0;
          }
        }
      }

      .sn-mobile_btns {
        display: none;
      }
    }
  }
  .nav-mobile-header {
      display: none;
  }
  /* @media (max-width:1441px) {
    --submenu-width: 220px;
    --column-gap: 24px;
    --submenu-padding: 32px 20px;
    --offset: 20px;
    --items-gap: 12px;
    --title-font: 16px;
    --headline-font: 12px;
    --description-font: 12px;
  } */
  
  @media (max-width:1198px) {
    --submenu-padding: 16px 20px;
    --submenu-normal-padding: 0 20px;
    .mega-mobile_toggle {
      display: block;
      cursor: pointer;
    }
    .nav-mobile-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #000;
      padding: 20px 5%;
      z-index: 9;
      position: sticky;
      top: 0;
      width: 100%;
      .nav-logo {
          max-width: 200px;
      }
    }
    .mega-nav-content {
      position: fixed;
      left: 0;
      width: 100%;
      top: 0; /*100%*/
      background: #000;
      display: block;
      height: 100vh;
      padding-bottom: 200px;
      overflow: auto;
      display: none;
      z-index: 2;

      ul.mega-nav{
        display: block;
        max-width: 1140px;
        width: 90%;
        margin: auto;
      }

      .mega-menu-item {
        .submenu_row {
          max-width: 100% !important;
          width: 100%;
          flex-direction: column;
        }

        .menu-col {
          max-width: 100%;
          width: 100%;
          margin-top: 0;
        }
      }

      .mega-primary-item {
        padding: 0;
        display: block;
        border-bottom: 1px solid #ccc;

        .mega-primary-link {
          width: 100%;
          justify-content: space-between;
          height: 78px;
          font-size: 18px;
        }

        span.indicator-wrapper {
          width: 60px;
          display: flex;
          height: 100%;
          justify-content: center;
          align-items: center;
        }

        &.menu-active .indicator-wrapper {
          transform: rotate(-180deg);
        }

        .mega-nav-submenu {
          width: 100%;
          max-width: 100%;
          position: relative;
          opacity: 1;
          visibility: visible;
          z-index: 999;
          pointer-events: auto;
          box-shadow: none;
          display: none;
          padding: 0 0 24px;
          border: none;
          border-radius: 0;

          .menu-col {
            width: 100%;
            max-width: 100%;
          }

          .sn-menu-desciption {
            max-width: 100%;
          }

          .submenu_row {
            padding: 0 0 24px 0 !important;
          }
        }
      }
      li.sn-mobile_btns{
        padding: 20px 0;
      }
    }
  }

  @media (max-width:767px) {
    ul.mega-nav {
      .mega-primary-itemm {
        padding: 0 20px;
      }
      li.sn-mobile_btns{
        padding: 20px 0;
      }
    }
  }
}