/* =================================== */
/*    Header Menu
/* =================================== */
.header-transparrent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9;
}

.main-header {
  z-index: 3;
  .main-menu {
    ul {
      li {
        display: inline-block;
        position: relative;
        z-index: 1;
        margin: 0 5px;
        & > .nav-link {
          color: #222222;
          font-weight: 400;
          padding: 25px 16px;
          font-weight: 400;
          display: block;
          font-size: 16px;
          text-transform: capitalize;
          &::before {
            position: absolute;
            content: "";
            left: 0;
            bottom: 14px;
            background: $colorred;
            height: 1px;
            width: 0;
          }
          &:hover::before,
          &.active::before {
            width: 100%;
          }
        }
      }
      ul {
        &.submenu {
          position: absolute;
          width: 170px;
          background: #fff;
          left: 0;
          top: 80%;
          visibility: hidden;
          opacity: 0;
          box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
          padding: 17px 0;
          & > li {
            margin-left: 7px;
            display: block;
            & > a {
              padding: 6px 10px !important;
              font-size: 14px;
              color: #222222;
              text-transform: capitalize;
              &::before {
                position: absolute;
                content: "";
                left: -5px;
                background: $colorblue;
                height: 2px;
                width: 0;
                top: 50%;
              }
              &:hover {
                padding-left: 15px !important;
                &::before {
                  width: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.main-header {
  ul {
    & > li {
      &:hover {
        & > ul {
          &.submenu {
            visibility: visible;
            opacity: 1;
            top: 100%;
          }
        }
      }
    }
  }
}
