/* ============= Header Start Here ======================= */
.header {
  @include md-screen {
    padding: 10px 0;
  }
  &.fixed-header {
    position: sticky;
    inset-inline-start: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 100%;
    z-index: 9;
    backdrop-filter: blur(24px);
    animation: slideDown 0.35s ease-out;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
    @include md-screen {
      inset-block-start: -1px;
    }
  }
}

.header-three {
  @include md-screen {
    padding: 10px 0;
  }
  &.fixed-header {
    position: sticky !important;
    inset-inline-start: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 100%;
    z-index: 9;
    backdrop-filter: blur(24px);
    animation: slideDown 0.35s ease-out;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    @include md-screen {
      inset-block-start: -1px;
    }
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Header Menu and Submenu Css Start */
.nav-menu {
  &__item {
    &.activePage {
      > a {
        color: var(--main-600) !important;
        &::before {
          color: var(--main-600);
        }
      }
    }
    &:hover {
      > a {
        color: hsl(var(--heading-color));
        @media (min-width: 992px) {
          color: var(--main-600);
        }
      }
    }
  }
}

.has-submenu {
  &.active {
    > a,
    > a::before {
      color: var(--main-600);
    }
    > a::before {
      transform: translateY(-50%) rotate(180deg) !important;
    }
  }
  &:hover {
    .nav-submenu {
      visibility: visible;
      opacity: 1;
      margin-block-start: 0;
    }
    > a {
      &::before {
        @media (min-width: 992px) {
          color: var(--main-600);
          transform: translateY(-50%) rotate(180deg);
        }
      }
    }
  }
  > a {
    position: relative;
    &::before {
      position: absolute;
      content: "\E136";
      inset-inline-end: 0;
      inset-block-start: 50%;
      transform: translateY(-50%);
      font-family: "Phosphor";
      font-weight: 900;
      color: #fff;
      transition: 0.2s linear;
    }
  }
}

.has-submenu__three {
  &.active {
    > a,
    > a::before {
      color: var(--main-600);
    }
    > a::before {
      transform: translateY(-50%) rotate(180deg) !important;
    }
  }
  &:hover {
    .nav-submenu {
      visibility: visible;
      opacity: 1;
      margin-block-start: 0;
    }
    > a {
      &::before {
        @media (min-width: 992px) {
          color: var(--main-600);
          transform: translateY(-50%) rotate(180deg);
        }
      }
    }
  }
  > a {
    position: relative;
    &::before {
      position: absolute;
      content: "\E136";
      inset-inline-end: 0;
      inset-block-start: 50%;
      transform: translateY(-50%);
      font-family: "Phosphor";
      font-weight: 900;
      color: #121212;
      transition: 0.2s linear;
    }
  }
}

/* Submenu Start */
.nav-submenu {
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  min-width: 190px;
  visibility: hidden;
  opacity: 0;
  @media (min-width: 992px) {
    max-height: 400px;
    overflow-y: auto;
  }
  &__item {
    &.activePage {
      .nav-submenu {
        &__link {
          color: var(--main-600) !important;
        }
      }
    }
    &:hover {
      a {
        color: hsl(var(--heading-color));
      }
    }
  }
}
/* Submenu End */
.header-home {
  display: none;
}
.header-item:hover.header-home {
  display: block;
}
.header-item-link::before {
  position: absolute;
  content: "";
  background-color: #ffd200;
  top: 6px;
  left: 4px;
  width: 98px;
  height: 44px;
  z-index: -1;
  border-radius: 8px;
  transition: 0.4s;
}
.header-item-link:hover {
  &::before {
    position: absolute;
    content: "";
    background-color: #ffd200;
    top: -6px;
    left: -5px;
    width: 98px;
    height: 44px;
    z-index: -1;
    border-radius: 8px;
    transition: 0.4s;
  }
}

/*================ header three css start =====================*/
.header-three-item-link::before {
  position: absolute;
  content: "";
  background-color: #104042;
  top: 5px;
  left: 3px;
  width: 98px;
  height: 44px;
  z-index: -1;
  border-radius: 8px;
  transition: 0.4s;
}
.header-three-item-link:hover {
  &::before {
    position: absolute;
    content: "";
    background-color: #104042;
    top: -5px;
    left: -4px;
    width: 98px;
    height: 44px;
    z-index: -1;
    border-radius: 8px;
    transition: 0.4s;
  }
}

/*================ header three css end =====================*/

/* Header Menu and Submenu Css End */
/* ================================= Header Css End =========================== */

/*=============================== top header css start =============================*/
.top-header-item {
  @media (max-width: 768px) {
    justify-content: space-between !important;
    flex-grow: 1;
  }
}

@media (max-width: 991px) {
  .nav-menu--mobile .nav-submenu {
    background: transparent !important;
  }

  .nav-menu--mobile .nav-submenu a {
    color: #fff;
  }
}

/*=============================== top header css end =============================*/
