/* ============= Header Start Here ======================= */
.header {
  transition: 0.2s linear;
  border-bottom: 1px solid hsl(var(--main)/0.08);
  background-color: transparent;
  /* Add this line to make the default header background transparent */
}

@media (max-width: 991px) {
  .header {
    padding: 10px 0;
  }
}

.header.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-color: #fff;
}

@media (max-width: 991px) {
  .header.fixed-header {
    inset-block-start: -1px;
  }
}

.header-content-wrapper {
  gap: clamp(16px, calc(16px + (40 - 16) * ((100vw - 1199px) / (1599 - 1199))), 40px);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.toggle-mobileMenu {
  line-height: 1;
  font-size: 36px;
  color: var(--neutral-700);
}

/* Header Menu and Submenu Css Start */
.nav-menu {
  gap: 24px;
}

@media (max-width: 1199px) {
  .nav-menu {
    gap: 20px;
  }
}

.nav-menu__item.activePage>a {
  color: hsl(var(--main));
}

.nav-menu__item.activePage>a::before {
  color: hsl(var(--main));
}

.nav-menu__item:hover>a {
  color: var(--neutral-700);
}

@media (min-width: 992px) {
  .nav-menu__item:hover>a {
    color: hsl(var(--main));
  }
}

.nav-menu__link {
  color: var(--neutral-700);
  font-weight: 500;
  width: 100%;
  padding: 38px 0;
  width: 100%;
}

@media (max-width: 1199px) {
  .nav-menu__link {
    font-size: 0.875rem !important;
  }
}

.has-submenu {
  position: relative;
}

.has-submenu .nav-menu__link {
  padding-inline-end: 16px;
}

.has-submenu.active>a,
.has-submenu.active>a::before {
  color: hsl(var(--main));
}

.has-submenu.active>a::before {
  transform: translateY(-50%) rotate(180deg) !important;
}

.has-submenu:hover .nav-submenu {
  visibility: visible;
  opacity: 1;
  margin-block-start: 0;
}

@media (min-width: 992px) {
  .has-submenu:hover>a::before {
    color: hsl(var(--main));
    transform: translateY(-50%) rotate(180deg);
  }
}

.has-submenu>a {
  position: relative;
}

.has-submenu>a::before {
  position: absolute;
  content: "\E136";
  font-family: 'Phosphor';
  inset-inline-end: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color: hsla(var(--heading-color), 0.4);
  transition: 0.2s linear;
}

/* Submenu Start */
.nav-submenu {
  position: absolute;
  inset-inline-start: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  inset-block-start: 100%;
  width: max-content;
  background-color: hsl(var(--white));
  border-radius: 6px;
  min-width: 190px;
  overflow: hidden;
  padding: 8px;
  visibility: hidden;
  opacity: 0;
  margin-block-start: 16px;
  transition: 0.2s linear;
  z-index: 99;
}

@media (min-width: 992px) {
  .nav-submenu {
    max-height: 400px;
    overflow-y: auto;
  }
}

.nav-submenu__item {
  display: block;
  border-radius: 4px;
  transition: 0.2s linear;
  position: relative;
}

.nav-submenu__item.activePage .nav-submenu__link {
  color: hsl(var(--main));
}

.nav-submenu__item:hover a {
  color: var(--neutral-700);
}

.nav-submenu__link {
  color: var(--neutral-700);
  font-weight: 500;
  width: 100%;
  padding-inline-end: 16px;
  width: 100%;
  display: block;
  padding: 8px 14px;
  border-radius: inherit;
  font-size: 0.875rem;
}

.nav-submenu__link::before {
  position: absolute;
}

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

.header-right {
  gap: clamp(8px, calc(8px + (24 - 8) * ((100vw - 1199px) / (1599 - 1199))), 24px);
}

@media (max-width: 991px) {
  .header-select {
    margin-inline-start: auto;
  }
}

@media (max-width: 575px) {
  .header-select {
    width: auto;
    display: inline-flex;
  }
}

@media (max-width: 575px) {
  .select-icon {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .info-action {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 575px) {
  .info-action {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }
}

/* ================================= Header Css End =========================== */