.snorkel-nav-wrapper {
  --promo_width: 420px;
  --promo_full_width: 464px;
  --column-width: 220px;
  --column-gap: 40px;
  --submenu-padding: 40px;
  --offset: 40px;
  --items-gap: 20px;
  --title-font: 20px;
  --headline-font: 14px;
  --description-font: 14px;

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

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



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

    .sn-primary-link {
      display: flex;
      align-items: center;
      column-gap: 10px;
      justify-content: space-between;
      height: 80px;
      color: var(--c_heading);
      font-weight: 600;
      letter-spacing: 0;
      font-size: 16px;
    }

    .snorkel-submenu {
      position: absolute;
      background: #fff;
      border-top: 1px solid rgba(20, 25, 77, 0.2);
      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%);
      border-radius: 0 0 24px 0;
     
      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;
      }

      .submenu_left,
      .submenu_right {
        padding: var(--submenu-padding);
      }

      .submenu_left {
        display: flex;
        row-gap: var(--column-gap);
        column-gap: var(--column-gap);
        max-width: calc(100% - var(--promo_width));
        &.no-promo{
          max-width: 100%;
        }
      }

      .submenu_right {
        /* border-left: 1px solid rgba(20, 25, 77, 0.2);*/
        background-color: #F3F3F3;
        width: var(--promo_width);
        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);
      }

      .promo_box {
        display: flex;
        flex-direction: column;
        row-gap: var(--items-gap);
        column-gap: var(--items-gap);
        .menu_promot_image {
          border-radius: 0 0 10px 0;
          overflow: hidden;
        }
      }

      .menu_headline {
        font-family: "Work Sans",sans-serif;
        font-weight: 600;
        font-size: var(--headline-font);
        line-height: 1.14;
        text-transform: uppercase;
        color: #3EA2F9;
      }

      .menu_title {
        font-family: "Poppins",sans-serif;
        font-weight: 500;
        font-size: var(--title-font);
        line-height: 1.4;
        color: #14194D;
        &.fade_title{
          opacity: 0.6;
        }
      }
     

      .badge_text{
        font-family: "Work Sans",sans-serif;
        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: #14194D;
        opacity: .6;
        svg{
          display: block;
        }
      }
      .menu_description {
        font-family: "Work Sans",sans-serif;
        font-size: var(--description-font);
        line-height: 1.43;
        letter-spacing: -0.03em;
        color: rgba(20, 25, 77, 0.6);
      }

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

      .submenu_left .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%;
          }
        }

      }

    }

    &:hover .snorkel-submenu {
      pointer-events: auto;
      opacity: 1;
      z-index: 9;
      visibility: visible;
      top: calc(100% - 2px);
    }

    &.type-full {
      position: static;
    }

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

      .submenu_left {
        max-width: calc(100% - var(--promo_full_width));
      }

      .submenu_right {
        min-width: var(--promo_full_width);
      }
    }
  }


  span.sn-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: none;
    border-radius: 12px;
  }

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

  @media (min-width:1199px) {
    .snorkel-nav {
      display: flex !important;

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

          .sn-indicator {
            border-color: #3EA2F9;
          }
        }

        .snorkel-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;
      }
    }
  }

  @media (max-width:1441px) {
    --promo_width: 320px;
    --promo_full_width: 360px;
    --column-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) {
    .snorkel-mobile_toggle {
      display: block;
      cursor: pointer;
    }

    ul.snorkel-nav {
      position: absolute;
      left: 0;
      width: 100%;
      top: 100%;
      background: #fff;
      display: block;
      height: 100vh;
      padding-bottom: 200px;
      overflow: auto;
      display: none;

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

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

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

        .sn-primary-link {
          width: 100%;
          justify-content: space-between;
          height: 78px;
        }

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

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

        .snorkel-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;

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

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

          .submenu_left {
            padding: 0 0 32px 0 !important;
          }

          .submenu_right {
            padding: 20px 0 0 0 !important;
            border: none;
            border-top: 1px solid rgba(20, 25, 77, 0.2);
            width: 100%;
          }

          .promo_box {
            max-width: 420px;
          }
        }
      }
    }
  }

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