header.header {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  height: 80px;
  background: var(--mc1);
  color: var(--white);
  transition: var(--transition);
  padding: 1rem 0;
  --icon-color: var(--white);
  z-index: 20;
}

.header__MainLogo {
  height: 48px;
}

body:not(.personabar-visible, .detail).page__Scrolled_Down .header {
  transform: translateY(-100%);
}

body:not(.personabar-visible, .detail) .header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
}

#PageMenu > ul {
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
}

.header__Menu {
  align-items: center;
  position: static;
}

.header__Tool_Item {
  --back-color: transparent;
  --accent-color: var(--white);
  --hover-back: var(--white);
  --hover-accent: var(--mc1);
  padding: 0.5rem 1rem;
  background-color: var(--back-color);
  border: solid 1px var(--accent-color);
  border-radius: var(--border-radius-sm);
  transition: var(--transition);
  color: var(--accent-color) !important;
  --icon-color: var(--accent-color);
  justify-content: center;
  line-height: 24px;
  height: 40px;
}

.Dnn__menu_Item button {
  border: unset;
  background: unset;
  color: white;
  cursor: pointer;
}

.header__Tool_Item:hover {
  background-color: var(--hover-back);
  color: var(--hover-accent) !important;
  --icon-color: var(--hover-accent);
  border-color: var(--hover-accent);
}

.tool__White {
  --back-color: var(--white);
  --accent-color: var(--mc1);
  --hover-back: transparent;
  --hover-accent: var(--white);
}

/* *header menus start */

.Dnn__menu_Item {
  display: flex;
  align-items: center;
  --icon-mr: 0.5rem;
  font-size: 14px;
}

.Dnn__Menu_Link > img {
  width: 1.5rem;
  height: 1.5rem;
}

.Dnn__menu_Item .Dnn__Sub_Menu {
  visibility: hidden;
  opacity: 0;
}

.Dnn__menu_Item > .WbIcon {
  transform: rotate(90deg) !important;
}

.Dnn__menu_Item:hover > .WbIcon {
  transform: rotate(180deg) !important;
}

.header_Bottom.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header_Bottom .Dnn__Sub_Menu {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1.5rem 0;
  color: var(--white);
}

.header_Bottom .Dnn__Menu_Link {
  opacity: 0.7;
  transition: opacity var(--transition);
}

.header_Bottom .Dnn__Menu_Link:is(.hover, .active) {
  opacity: 1;
}

.Dnn__Menu_SubLink > img {
  margin-left: 0.5rem;
}

.SetPageImages {
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--border-radius-sm);
}

.header_Top
  .dnnMenu__Have_Submenu[data-hover="خدمات برندینگ"]
  > .Dnn__Sub_Menu {
  display: none;
}

/* ------------------------------- responsive ------------------------------- */

@media (min-width: 992px) {
  .header_Bottom {
    border-top: solid 1px var(--bw-fade-5);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    transform: translateY(20px);
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--mc1);
    height: 380px;
    padding: 40px 0;
  }

  .Dnn_Menu_Main li[data-hover="صفحه اصلی"] {
    display: none;
  }

  .Dnn_Menu_Main > .dnnMenu__Have_Submenu > .Dnn__menu_Item > .Dnn__Menu_Link {
    height: 70px;
    display: flex;
    align-items: center;
  }

  .Dnn__menu_Item:has(.Dnn__Sub_Menu) {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
    height: 70px;
  }

  .dnnMenu__Have_Submenu:not([data-hover="خدمات برندینگ"]) {
    position: relative;
  }

  .dnnMenu__Have_Submenu:not([data-hover="خدمات برندینگ"]) .Dnn__Sub_Menu {
    position: absolute;
    top: calc(100% + 1rem);
    right: 0;
    border-top: 1px var(--bw-fade-5) solid;
    background-color: var(--black);
    white-space: nowrap;
    min-width: 290px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
    font-weight: var(--fw-600);
    font-size: var(--fz-sm);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition),
      transform var(--transition);
    transform: translateY(+20px);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  }

  .dnnMenu__Have_Submenu:not([data-hover="خدمات برندینگ"]):hover
    .Dnn__Sub_Menu {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
  }

  .header_Bottom::before,
  .Dnn__Sub_Menu::before {
    content: "";
    width: 100%;
    height: 1.5rem;
    bottom: 100%;
    left: 0;
    display: block;
    position: absolute;
  }

  .header_Bottom .Dnn__Sub_Menu {
    flex-wrap: wrap;
    max-height: 300px;
  }
}

/* !header menus end */

/* -------------------------------------------------------------------------- */
/*                                 RESPONSIVE                                 */
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .header__Logo {
    margin-left: 40px;
  }
}

@media (max-width: 991px) {
  .header__Logo {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .Mobile__Menu_Icon {
    display: flex;
    flex-direction: column;
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
  }

  /* *header sideMenu */
  .menu__ShadowBox {
    width: 110vw;
    height: 110vh;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-5%, -5%);
    z-index: 998;
    display: none;
  }

  .show-effect .menu__ShadowBox {
    display: block;
  }

  .header__ProductCtg .SCat-Main {
    padding: 0rem 1rem;
    height: calc(100vh - 220px);
    max-height: calc(100vh - 220px);
    height: calc(100dvh - 220px);
    max-height: calc(100dvh - 220px);
    overflow-y: scroll;
    overflow-x: hidden;
  }

  /*
    .header_Top .dnnMenu__Have_Submenu[data-hover="خدمات برندینگ"] {
        display: none;
    } */

  .Dnn_Menu_Main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* max-height: calc(100vh - 5.25rem);
        max-height: calc(100dvh - 5.25rem);
        overflow-y: scroll; */
  }

  .Main__Menu_Mobile {
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    min-width: 100vw;
    width: 100vw;
    z-index: 999;
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--black);
    align-content: flex-start;
    transition:
      var(--transition),
      height 0s,
      max-height 0s;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding-bottom: 20%;
    padding-top: 2.5rem;
    overflow-y: hidden;
  }

  .header__Menu_Close {
    margin-bottom: 1.5rem;
  }

  .show-effect .Main__Menu_Mobile {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
    overflow-y: scroll !important;
  }

  .page_Scrolled__Down .Main__Menu_Mobile {
    transform: translate(100%, 100px);
  }

  .page_Scrolled__Down .show-effect .Main__Menu_Mobile {
    transform: translate(0%, 100px);
  }

  .Main__Menu_Mobile .nav.nav-pills > li {
    text-align: right;
    width: 100%;
    margin: 0px;
    font-weight: var(--fw-400);
    padding: 12px 0;
    border-bottom: dashed var(--mc2-fade-4) 1px;
  }

  .dnnMenu__Have_Submenu .WbIcon {
    margin-right: auto;
  }

  .append__SideMenu_Buttons {
    margin-top: var(--main-space);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  /* !header sideMenu End  */

  /* *bottom pages Menu in mobil start */

  .header_Bottom {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: calc(var(--transition) * 2);
    background-color: var(--black);
    z-index: 21;
    padding-bottom: 100px;
    padding-top: 2.5rem;
    --icon-color: var(--white);
  }

  .header__Pages_Wrapper {
    height: 100%;
    overflow-y: scroll;
  }

  .header_Bottom.active {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
  }

  /* !bottom pages Menu in mobil end */

  .Main__Menu li.dropdown > a:after {
    position: absolute;
    left: -15px;
    top: 5px;
    color: #fff;
  }

  .Main__Menu li.dropdown b:after {
    color: #fff;
  }

  .Main__Menu_Mobile .Dnn__Sub_Menu {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    gap: 1rem;
  }

  .Main__Menu .nav.nav-pills > li.dropdown a {
    pointer-events: none;
  }

  .Main__Menu .nav-pills li.dropdown .dropdown-menu {
    position: relative;
    float: none;
    top: 0;
    background: transparent;
    text-align: center;
    display: none;
  }

  body:not(.personabar-visible, .detail).page__Scrolled_Down .header {
    transform: none;
  }

  body:not(.personabar-visible, .detail) .header {
    position: static;
  }
}