/* ============= 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);
    background: hsl(var(--black));
    @include md-screen {
      inset-block-start: -1px;
    }
  }
  &-right {
    gap: 20px;
    @include xl-screen {
      gap: 20px;
    }
  }
  &-btn-wrap {
      @include lg-screen {
        display: none !important;
      }
  }
  &-button {
      @include msm-screen {
        display: none !important;
      }
  }
  &-call {
      @include xl-screen {
        display: none !important;
      }
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Header Menu and Submenu Css Start */
.nav-menu {
  @include lg-screen {
   	gap: 20px !important;
  }
  &__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;
      transform: scaleY(1);
    }
    > 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: 400;
        color: hsl(var(--white));
        transition: 0.2s linear;
        font-size: 12px;
    }
  }
}

/* Submenu Start */
.nav-submenu {
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  min-width: 210px;
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0);
  transition: 0.4s ease;
  transform-origin: top center;
  @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));
      }
    }
  }
}

.header-transparent {
	position: absolute;
	width: 100%;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 9;
}

.header-two {
  &-button {
    @include sm-screen {
      display: none;
    }
    & a {
      @include xl-screen {
        padding-inline: var(--size-9);
      }
    }
  }
}

.header-top-three {
  border-bottom: 1px solid rgba(217, 217, 217, 0.3);
  padding-block: 10px;
}




.header-three {
  &.header-transparent {
    inset-block-start: 41px;
    @include sm-screen {
     inset-block-start: 0;
    }
  }
  & .nav-menu__link {
      font-size: 15px;
  }
  & .logo {
    transform: translateX(-160px);
    @include xxl-screen {
          transform: translateX(-100px);
    }
    @include xl-screen {
      transform: translateX(-30px);
    }
    @include lg-screen {
      display: none;
    }
    @include md-screen {
      display: block;
      transform: translateX(0);
    }
  }
}
.fixed-header.header-three.header-transparent {
	inset-block-start: 0;
}
.home-four-bg {
  background-color: hsl(var(--white)) !important;
}



.header-top {
  &-four {
    padding-block: 16px;
    @include md-screen {
        display: none !important;
    }
  }
}

.header-four {
  @include md-screen {
    padding: 0 0;
    background: #f2f1ef;
  }
  &-nav {
      @include xl-screen {
        padding-inline: var(--size-4);
      }
      @include md-screen {
      padding-inline: 0;
          border-radius: 0;
          padding-block: 16px;
      }
  }
  & .has-submenu > a::before {
    color: hsl(var(--heading-color)) !important;
  }
  & .header-right {
    @include lg-screen {
       display: none !important;
    }
    @include md-screen {
       display: block !important;
    }
  }
  &-call {
      @include xl-screen {
        display: flex !important;
        margin-inline-end: 0;
      }
      @include lg-screen {
        display: none !important;
      }
  }
}



.header-four.fixed-header {
	background: #f2f1ef;
}










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