$menu_font_size: 14px;

.sp-megamenu-parent {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
  z-index: 99;
  display: block;
  text-align: center;
  position: relative;

  > li {
    display: inline-block;
    position: relative;
    padding: 0;
    > ul,
    > div {
      text-align: left;
    }

    &.menu-justify {
      position: static;
    }

    > a,
    > span {
      display: inline-block;
      padding: 0 15px;
      line-height: $header_height;
      font-size: $menu_font_size;
      margin: 0;
    }

    &.active > a {
      font-weight: 500;
    }
    .sp-dropdown {
      .menu_item.item-header > a {
        font-size: 18px !important;
      }
      li.sp-menu-item > a {
        font-weight: 400;
      }
    }
    .sp-menu-badge {
      height: 20px;
      line-height: 20px;
      padding: 0 5px;
      font-size: 10px;
      letter-spacing: 1px;
      display: inline-block;
      text-transform: uppercase;
      background: #d60000;
      color: #fff;
      border-radius: 3px;
    }
  }

  .sp-module {
    padding: 10px;
  }

  .sp-mega-group {
    list-style: none;
    padding: 0;
    margin: 0;

    > li > a {
      display: block;
      text-transform: uppercase;
      font-size: $menu_font_size;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .sp-mega-group-child {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }

  .sp-dropdown {
    margin: 0;
    position: absolute;
    z-index: 10;
    display: none;

    .sp-dropdown-inner {
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
      padding: 20px;

      > .row:not(:first-child) {
        margin-top: 20px;
      }
    }

    .sp-dropdown-items {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    &.sp-dropdown-main {
      top: 100%;
    }

    &.sp-dropdown-sub {
      top: 0;

      .sp-dropdown-inner {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      }
    }

    //List Item
    li.sp-menu-item {
      //child sub
      display: block;
      padding: 0;
      position: relative;

      > a,
      span:not(.sp-menu-badge) {
        font-size: $menu_font_size;
        line-height: 1;
        display: inline-block;
        padding: 8px 0;
        cursor: pointer;

        &.sp-group-title {
          text-transform: uppercase;
          font-weight: bold;
        }
      }
    }

    // Module
    .menu_item.item-header > a {
      color: $menu_text_color;
    }
    .sp-module {
      padding: 0;
      .sp-module-title {
        font-size: 18px;
        margin: 0 0 15px;
        text-transform: uppercase;
        font-weight: bold;
        color: $menu_text_color;
      }

      .latestnews {
        margin: 0;
        border-right: 1px solid #eaeaea;
        > li {
          &:not(:last-child) {
            margin: 0 0 15px;
          }
          a {
            font-size: 14px;
            span {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .sp-dropdown-mega {
    > .row {
      margin-top: 30px;
      &:first-child {
        margin-top: 0;
      }
    }
  }

  //Has Child
  .sp-has-child {
    &:hover {
      > .sp-dropdown {
        display: block;
      }
    }
  }

  //fadeIn
  &.menu-animation-fade {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spFadeIn 600ms;
        }
      }
    }
  }

  // fadeInUp
  &.menu-animation-fade-up {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spFadeInUp 400ms ease-in;
        }
      }
    }
  }

  // fadeInDown
  &.menu-animation-fade-down {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spFadeInDown 400ms ease-in;
        }
      }
    }
  }

  // zoomIn
  &.menu-animation-zoom {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spZoomIn 300ms;
        }
      }
    }
  }

  // rotateIn
  &.menu-animation-rotate {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spRotateIn 300ms;
        }
      }
    }
  }

  // Elastic
  &.menu-animation-pulse {
    .sp-has-child {
      &:hover {
        > .sp-dropdown {
          animation: spPulse 300ms;
        }
      }
    }
  }
}

// ltr
body {
  &.ltr {
    .sp-megamenu-parent {
      > li {
        &.sp-has-child > a:after,
        &.sp-has-child > span:after {
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          content: "\f107";
          float: right;
          margin-left: 7px;
        }

        .sp-menu-badge {
          &.sp-menu-badge-right {
            margin-left: 5px;
          }

          &.sp-menu-badge-left {
            margin-right: 5px;
          }
        }
      }

      .sp-dropdown {
        .sp-dropdown-items {
          .sp-has-child > a:after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f105";
            float: right;
            margin-left: 7px;
          }
        }

        &.sp-menu-center {
          margin-left: 45px;
        }

        &.sp-dropdown-main {
          &.sp-menu-right {
            left: 0;
          }

          &.sp-menu-full {
            left: 50%;
            right: auto;
            transform: translateX(-50%);
          }

          &.sp-menu-left {
            right: 0;
          }
        }

        &.sp-dropdown-sub {
          left: 100%;
        }
      }
    }
  }
}

.sp-megamenu-wrapper {
  .sp-module ul {
    list-style: none;
    padding: 0;
    > li > a {
      color: $menu_dropdown_text_color;
      &:hover,
      &:focus {
        color: $menu_dropdown_text_hover_color;
      }
    }
  }
  .latestnews {
    display: flex;
    flex-direction: column;
    padding-right: 10%;
    > div {
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .article-list-img img {
      border-radius: 5px;
    }
    .latest-post-content-wrap {
      margin-top: 10px;
      .latest-post-title {
        font-size: 17px;
        font-weight: 500;
        line-height: 1.3;
      }
    }
    .article-list-img.video-format {
      position: relative;
      overflow: hidden;
      border-radius: 3px;
      margin-top: 20px;
      &:before {
        content: "\f144";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: fontawesome;
        font-size: 60px;
        color: #fff;
        pointer-events: none;
      }
    }
    .latest-post-content-wrap {
      font-size: 14px;
      .category-tag {
        font-weight: 600;
        margin-bottom: 10px;
      }
      .latest-post-title {
        opacity: 0.9;
        margin-bottom: 5px;
        font-size: 20px;
      }
      a {
        color: #151416;
        &:hover,
        &:focus {
          color: $link_color;
        }
      }
    }
  }
  .sp-dropdown-mega.sp-menu-full {
    .sp-dropdown-inner {
      padding: 30px;
    }
  }
  .item-header {
    > a {
      pointer-events: none;
    }
  }
  .custom-megamenu {
    .sp-dropdown-inner {
      .row {
        margin: -15px !important;
        > div {
          padding: 15px !important;
        }
      }
      > .row:first-child {
        > div:nth-child(2) {
          .sp-mega-group {
            display: flex;
            flex-wrap: wrap;
            .sp-dropdown-items {
              display: flex;
              flex-wrap: wrap;
              > li {
                flex: 0 0 50%;
                max-width: 50%;
              }
            }
            > li:nth-child(1),
            > li:nth-child(2) {
              flex: 0 0 50%;
              max-width: 50%;
              // padding-right: 15px;
              // a{
              // 	padding: 15px 0;
              // }
            }
            > li:nth-child(3) {
              flex: 0 0 100%;
              max-width: 100%;
              margin-top: 40px;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 576px) {
  .sp-menu-full.container {
    width: 540px;
  }
}

@media (min-width: 768px) {
  .sp-menu-full.container {
    width: 720px;
  }
}

@media (min-width: 992px) {
  .sp-menu-full.container {
    width: 960px;
  }
}

@media (min-width: 1200px) {
  .sp-menu-full.container {
    width: 1140px;
  }
}
