:root {
  --header-height: 94px;
}

@media (min-width: 992px) {
  [data-title="بین الملل"] > .menu-sub-menu,
  [data-title="International Affairs"] > .menu-sub-menu,
  [data-title="دولي"] > .menu-sub-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem !important;
    right: -5rem !important;
    left: auto !important;
  }

  [data-title="بین الملل"] > .menu-sub-menu > li,
  [data-title="International Affairs"] > .menu-sub-menu > li,
  [data-title="دولي"] > .menu-sub-menu > li {
    white-space: nowrap;
  }
}

header,
.menu__TopBar_Wrapper {
  --header-padding-bottom: 0.5rem;
  --header-padding-top: 0.5rem;
  --header-accent: var(--primary-20);
  --header-bak: var(--white);
  --icon-color: var(--header-accent);
  --icon: 40px;
  --icon-inner: 1.5rem;
  color: var(--header-accent);
  background-color: var(--header-bak);
  transition: var(--transition);
  height: var(--header-height);
  z-index: 9;
  position: relative;
}

@media (max-width: 991px) {
  body:has(.header_SideMenu_Wrapper.active) header {
    --header-accent: var(--white);
    background-color: transparent;
    box-shadow: 0 0 0 transparent;
    border: none;
  }

  body:has(.header_SideMenu_Wrapper.active) header .header__Logo {
    filter: saturate(0) brightness(100);
  }
  body:has(.header_SideMenu_Wrapper.active) header .header__Tools_Item {
    opacity: 0;
    visibility: hidden;
  }
}

.header__Logo img#dnn_dnnLOGODesc_imgLogo {
  height: calc(
    var(--header-height) - var(--header-padding-bottom) -
      var(--header-padding-top)
  );
}

.header__logo_Text {
  height: 1.5rem;
}

body:not(.personabar-visible) header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  backdrop-filter: blur(0);
  border-bottom: solid 1px;
  border-image: linear-gradient(
      270deg,
      transparent 0%,
      hsla(0, 0%, 100%, 0.5) 50%,
      transparent 100%
    )
    1;

  box-shadow: 0px 4px 24px 0px #0000000f;
}

body:not(.personabar-visible).blury__Header header {
  background: #04448040;
  backdrop-filter: blur(4px);
}

.header__Inner {
  width: 100%;
  padding-block: var(--header-padding-top, 1rem) var(--header-padding-bottom);
  position: relative;
}

.header__Tools_Item:not(.btnStyle_Primary) {
  height: 40px;
  display: flex;
  align-items: center;
}

.header__Tools_Wrapper {
  gap: var(--header-tools-gap, 1rem);
}

@media (max-width: 1199px) {
  :root {
    --header-height: 4rem;
  }

  .header__Inner {
    height: 100%;
    align-items: center;
  }

  .header,
  .menu__TopBar_Wrapper {
    --header-tools-gap: 1rem;
    --header-padding-top: 6px;
    --header-padding-bottom: 6px;
    --header-tools-width: 40px;
  }
}

/* *------------------------------- header Order Btn Start ------------------------------- */
.header__Order_Btn {
  position: relative;
  transition: var(--transition);
  padding: 0.5rem 2.5rem !important;
  /* background-color: var(--primary-40); */
  background-color: var(--white);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-50) !important;
  font-weight: bold;
  outline: none;
  overflow: hidden;
}

.header__Order_Btn:hover {
  background-color: var(--primary-100);
}

.header__Order_Btn::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    var(--primary-40),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
  animation: shine 3s ease-out infinite;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  35% {
    left: -100%;
  }

  65% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

/* !------------------------------- header Order Btn End --------------------------------- */

/* *------------------------------- Header Lang Start ------------------------------- */

.header__Language {
  text-transform: capitalize;
}

.header__Lang_Inner {
  display: flex;
  gap: 1rem;
}

.header__Lang_Inner {
  flex-direction: column;
  padding: 1rem 0.5rem;
  gap: 0.25rem;
  background-color: var(--white);
  border-radius: var(--border-radius);
  border: solid 1px var(--Gray-95);
  box-shadow: 0px 8px 32px 0px #03201c33;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  position: absolute;
  top: calc(100% + var(--header-padding-bottom) + 1.5rem);
  left: 0;
  min-width: 88px;
  direction: ltr;
}

.header__Lang_Wrapper .header__Tools_Item {
  height: 40px;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  --icon: 1rem;
  --icon-inner: 1rem;
  transition: var(--transition);
}

@media (min-width: 992px) {
  .header__Lang_Wrapper .header__Tools_Item {
    --icon: 20px;
  }
}

.header__Lang_Wrapper .header__Tools_Item .chev {
  --icon-rotate: 180deg;
  --icon-inner: 0.5rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-100%, 40%) rotate(0deg);
}

.header__Lang_Wrapper:has(.header__Lang_Inner.active)
  .header__Tools_Item
  .chev {
  transform: translate(-100%, 40%) rotate(180deg);
}

body:not(.rtl) .header__Lang_Wrapper .header__Tools_Item .chev {
  left: 0;
  top: 50%;
  transform: translate(100%, 40%) rotate(0deg);
}

body:not(.rtl)
  .header__Lang_Wrapper:has(.header__Lang_Inner.active)
  .header__Tools_Item
  .chev {
  transform: translate(100%, 40%) rotate(180deg);
}

body:not(.rtl) .header__Lang_Inner {
  left: unset;
  right: 0;
  direction: ltr;
}

.header__Lang_Inner.active {
  opacity: 1;
  visibility: visible;
  transform: translatey(0);
}

.header__Lang_Inner .header__Language:not(:last-child) {
  padding-bottom: 0.25rem;
  border-bottom: solid 1px var(--Gray-95);
}

/* !------------------------------- Header Lang End --------------------------------- */

/* *------------------------------- header Search Start ------------------------------- */
.search__Box_outer {
  position: fixed;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  top: 0;
  left: 0;
  background-color: #0000003b;
  backdrop-filter: blur(0px);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  z-index: 100;
}

.search__Box_outer:has(.search__Box_Wrapper.active) {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(1px);
  --input-movement: translateY(0rem);
}

.search__Input_Wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--Gray-99);
  --icon-color: var(--primary-50);
  transition: var(--transition);
  margin-inline: auto;
  padding: 1rem 2rem;
  margin-top: calc(var(--header-height) + 0.5rem);
  transform: var(--input-movement, translateY(-3rem));
}

.search__Input_Wrapper:has(#dnn_DnnHeaderSearch_txtSearch:focus) {
  background-color: var(--white);
}

.search__close_Btn {
  --icon: 40px;
  --icon-color: var(--Gray-20);
  --icon-inner: 20px;
  order: 2;
}

@media (max-width: 992px) {
  .search__Input_Wrapper {
    padding-inline-start: 46px;
    padding-inline-end: 0.5rem;
    padding-block: 1rem;
    border-radius: var(--border-radius);
  }
}

#dnn_DnnHeaderSearch_ClassicSearch,
#dnn_DescSearch_ClassicSearch {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  align-items: center;
}

#dnn_DnnHeaderSearch_ClassicSearch .searchButton,
#dnn_DescSearch_ClassicSearch .searchButton {
  font-size: 0;
  --icon-url: url(../assets/icons/magnify.svg);
  margin-inline-end: 1.5rem;
}

#dnn_DnnHeaderSearch_txtSearch,
#dnn_DescSearch_txtSearch {
  width: 100%;
  background-color: transparent;
  height: 3rem;
  display: flex;
  align-items: center;
  margin-inline-end: 0.5rem;
  border: none;
  border-inline-end: 1px solid var(--primary-80);
  font-size: 1rem;
  color: var(--tc1);
}

:is(#dnn_DnnHeaderSearch_txtSearch, #dnn_DescSearch_txtSearch)::placeholder {
  color: var(--Gray-50);
}

.searchInputContainer {
  width: 100%;
}

#dnn_DnnHeaderSearch_txtSearch,
#dnn_DescSearch_txtSearch {
  height: 2.5rem;
}

.searchInputContainer {
  display: flex !important;
  align-items: center;
}

/* search result */

.search__Input_Wrapper {
  position: relative;
}

.searchInputContainer {
  position: static !important;
}

.searchSkinObjectPreview {
  width: 100% !important;
  animation: resultOpen forwards var(--transition);
  border-radius: 0;
  border: unset !important;
  padding: 2rem 40px 30px !important;
  overflow: hidden;
  max-height: 70vh;
  overflow-y: scroll;
  box-shadow: 0px 8px 32px 0px #03201c33;
  border-radius: var(--border-radius);

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* width */
.searchSkinObjectPreview::-webkit-scrollbar {
  display: none;
}

.searchSkinObjectPreview > li {
  padding: 0 !important;
  border: unset !important;
  padding-bottom: 1rem !important;
  border-bottom: solid 1px var(--Gray-95) !important;
  background-color: transparent !important;

  font-size: var(--fz-t5) !important;
  font-weight: var(--fw-500) !important;
  line-height: var(--lh-t5) !important;

  color: var(--tc1) !important;
}

.searchSkinObjectPreview li[data-url] > span {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 0.5rem;

  font-size: var(--fz-t5);
  line-height: var(--lh-t5);
  font-weight: var(--fw-600);
}

.searchSkinObjectPreview li[data-url] > span::after {
  content: "";
  --icon-url: url(../assets/icons/chevUp.svg);
  --icon-rotate: 90deg;
  --icon-color: var(--primary-50);
  --icon: 20px;
}

.searchSkinObjectPreview > li[data-url] > p {
  font-style: normal !important;
  font-size: var(--fz-b4);
  line-height: var(--lh-b4);
  font-weight: var(--fw-400);
  color: var(--Gray-30) !important;
}

.searchSkinObjectPreview > li[data-url] > p b {
  color: var(--primary-50) !important;
  font-weight: var(--fw-400) !important;
}

.searchSkinObjectPreview > li.searchSkinObjectPreview_group {
  border-color: transparent !important;
  border-bottom: 0rem !important;
}

.searchSkinObjectPreview > li:has(.searchSkinObjectPreview_more) {
  border-bottom: none !important;
  color: var(--primary-40) !important;
  padding: 0 !important;
}

.searchSkinObjectPreview > li .searchSkinObjectPreview_more::after {
  content: "";
  --icon-color: var(--primary-60);
  --icon-url: url(../assets/icons/chevUp.svg);
  --icon-rotate: 90deg;
  --icon: 20px;
  --icon-ms: 0.5rem;
}

.dnnSearchBoxClearText {
  display: none !important;
}

.search__Box_Wrapper:not(.active) .searchSkinObjectPreview {
  display: none;
  transition-delay: var(--transition);
}

.search__Box_Wrapper.active .searchSkinObjectPreview {
  transition-delay: 0;
}

@keyframes resultOpen {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(1rem);
  }
}

@media (max-width: 1199px) {
  .searchSkinObjectPreview {
    padding: 1.5rem 1rem !important;
    border-radius: 0px !important;
  }
}

/* *------------------------------- desc search Start ------------------------------- */
.header__Search_Desc {
  position: relative;
}

.desc__Search_Wrapper {
  position: absolute;
  top: calc(100% + var(--header-padding-bottom) + 0.5rem);
  left: 0;

  display: flex;
  align-items: center;
  padding-block: 0.5rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 0.5rem;
  background-color: var(--white);
  box-shadow: 0px 8px 32px 0px #03201c33;
  width: 456px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  --icon-color: var(--primary-50);
  transform: translateY(-1rem);
  border-radius: var(--border-radius);
}

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

body:not(.rtl) .desc__Search_Wrapper {
  left: unset;
  right: 0;
}

/* !------------------------------- desc search End --------------------------------- */

/* !------------------------------- header Search End --------------------------------- */

/* *------------------------------- header Menu Start --------------------------------- */

.ez__Menu_Wrapper {
  --header-accent: var(--Gray-10);
  color: var(--header-accent);
}

@media (min-width: 992px) {
  .ez__Menu_Wrapper .menu-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    --icon: 0.6rem;
    height: 100%;
    font-weight: var(--fw-600);
    font-size: var(--fz-t6);
    line-height: var(--lh-t5);
  }

  .ez__Menu_Wrapper .menu-main > .menu-have-submenu > .header__Menu_Item {
    --icon-color: var(--header-accent);
  }

  .header__Menu_Item {
    color: var(--color-accent);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    --icon-rotation: rotate(0deg);
    width: 100%;
  }

  .header__Menu_Title {
    transition: color var(--transition);
    position: relative;
  }

  .header__Menu_Title[href="javascript:void(0)"] {
    cursor: default;
  }

  .ez__Menu_Wrapper
    .menu-main
    li.menu-have-submenu
    > .header__Menu_Item::after {
    content: "";
    --icon-url: url(../assets/icons/chevUp.svg);
    --icon: 18px;
    --icon-inner: 1rem;
    --icon-rotate: 180deg;
    --icon-color: var(--header-accent);
  }

  .ez__Menu_Wrapper
    .menu-main
    li.menu-have-submenu:hover
    > .header__Menu_Item::after {
    --icon-rotate: 0deg;
    --icon-color: var(--primary-50);
  }

  .ez__Menu_Wrapper .menu-main li.menu-have-submenu {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .ez__Menu_Wrapper .menu-main li.menu-have-submenu > .menu-sub-menu {
    position: absolute;
    top: calc(100% + var(--header-padding-bottom) + 0.5rem);
    right: 100%;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    transform: translateY(-1rem);
    min-width: 220px;
    background: var(--white);
    box-shadow: 0px 8px 24px 0px #061f224d;
    padding: 1rem 1rem 1.5rem;
    margin-inline-start: unset;
    border-radius: var(--border-radius);
    --color-accent: var(--Gray-40);
  }

  .ez__Menu_Wrapper .menu-main li.menu-have-submenu:hover > .menu-sub-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .ez__Menu_Wrapper .menu-main li:is(:hover, .active) > .header__Menu_Item {
    --color-accent: var(--primary-20);
  }

  .ez__Menu_Wrapper
    .menu-main
    li:not(.disabled):is(:hover, .active)
    > .header__Menu_Item::before {
    --icon-transform: translateY(-0.25rem);
  }

  .ez__Menu_Wrapper .menu-main li.disabled > .header__Menu_Item {
    --color-accent: var(--Gray-70);
    cursor: not-allowed;
  }

  .ez__Menu_Wrapper
    .menu-main
    > li.menu-have-submenu
    > .menu-sub-menu
    li
    > .header__Menu_Item {
    --icon: 18px;
    --icon-url: url(../assets/icons/chevUp.svg);
    --icon-inner: 1rem;
    --icon-rotate: 90deg;
    --icon-color: var(--color-accent);
    font-size: var(--fz-t6);
    line-height: var(--lh-t6);
    font-weight: var(--fw-600);
  }

  .ez__Menu_Wrapper
    .menu-main
    > li.menu-have-submenu
    > .menu-sub-menu
    li:not(:last-child)
    > .header__Menu_Item {
    padding-bottom: 0.5rem;
    border-bottom: solid 1px var(--Gray-99);
    margin-bottom: 1rem;
  }

  .ez__Menu_Wrapper
    .menu-main
    > li.menu-have-submenu
    > .menu-sub-menu
    li:hover
    > .header__Menu_Item {
    --icon-rotation: translate(-0.25rem) rotate(90deg);
  }

  /* Layer 1 */

  .ez__Menu_Wrapper .menu-main > li.active > .header__Menu_Item {
    position: relative;
  }

  .ez__Menu_Wrapper .menu-main > li.active > .header__Menu_Item::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    background-color: var(--primary-99);
  }

  /* layer 2 */
  .ez__Menu_Wrapper .menu-main > li.menu-have-submenu > .menu-sub-menu {
    right: 0;
    transform: translateY(-0.25rem);
  }

  body:not(.rtl)
    .ez__Menu_Wrapper
    .menu-main
    > li.menu-have-submenu
    > .menu-sub-menu {
    right: unset;
    left: 0;
  }

  .ez__Menu_Wrapper .menu-main > li.menu-have-submenu > .menu-sub-menu::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--header-padding);
    position: absolute;
    bottom: 100%;
    left: 0;
  }
}

/* !------------------------------- header Menu End --------------------------------- */

/* *------------------------------- header Side Menu Start ------------------------------- */

.header_SideMenu_Wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 8;
  backdrop-filter: blur(0px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  color: var(--Gray-90);
  background-color: hsl(from var(--primary-00) h s l / 0.8);
  overflow: hidden;
  padding-top: var(--header-height);
}

@supports (-webkit-touch-callout: none) {
  /* for ios */
  .header_SideMenu_Wrapper {
    background-color: hsl(from var(--primary-00) h s l / 0.8);
  }
}

.header_SideMenu_Wrapper.active {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  backdrop-filter: blur(10px);
}

body:has(
    .header_SideMenu_Wrapper.active,
    .bottomNav_Side.active,
    .search__Box_Wrapper.active
  ) {
  overflow: hidden;
}

.menu__TopBar_Wrapper {
  display: flex;
  align-items: center;
  --icon: 2.5rem;
  --icon-inner: 2rem;
}

@media (max-width: 1199px) {
  .menu__TopBar_Wrapper {
    padding-block: 2rem;
    --icon: 2.5rem;
    --icon-inner: 1.5rem;
  }
}

.header__SideMenu_Item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  --icon-color: var(--Gray-100);
  transition: color var(--transition);
  color: var(--color-accent, var(--Gray-100));
}

.header__SideMenu_Item::after {
  --icon-url: url(../assets/icons/chevUp.svg);
  --icon-rotate: rotate(-90deg);
  --icon-ml: auto;
}

body:not(.rtl) .header__SideMenu_Item::after {
  --icon-rotate: rotate(90deg);
}

.header__SideMenu_Item .pageIcon {
  --icon: 1.5rem;
  --icon-mr: 0.5rem;
  --icon-color: var(--white);
}

.side__Menu_List {
  max-height: 100%;
  padding-top: var(--main-space);
  padding-bottom: var(--title-space);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition);
}

.side__Menu_List li.active > .header__SideMenu_Item {
  --color-accent: var(--Gray-100);
}

@media (max-width: 991px) {
  .header_SideMenu_Wrapper {
    background-color: hsl(from var(--primary-00) h s l / 0.85);
  }

  .header_SideMenu_Wrapper .container {
    max-height: calc(100dvh - var(--main-space) - 80px);
    overflow-y: scroll;
  }
}

@media (min-width: 992px) and (max-width: 1400px) {
  .ez__Menu_Wrapper .menu-main {
    font-weight: var(--fw-600);
    font-size: var(--fz-t6);
    line-height: var(--lh-t6);
  }
}

.header_SideMenu_Wrapper
  .side__Menu_List
  li.side_Menu-have-sub-menu
  > .header__SideMenu_Item::after {
  cursor: pointer;
  transform: var(--icon-rotate, rotate(0deg));
}

.header_SideMenu_Wrapper
  .side__Menu_List
  li.side_Menu-have-sub-menu
  > .header__SideMenu_Item {
  padding-inline-end: 1rem;
  transition: padding var(--transition), color var(--transition);
}
.header_SideMenu_Wrapper .side__Menu_List li:hover > .header__SideMenu_Item {
  --color-accent: var(--primary-80);
  --icon-color: var(--primary-80);
}
.header_SideMenu_Wrapper .side__Menu_List li.active > .header__SideMenu_Item {
  --color-accent: var(--primary-80);
  padding-inline-end: 0rem;
}

@media (max-width: 991px) {
  .header_SideMenu_Wrapper .side__Menu_List li.active > .header__SideMenu_Item {
    --icon-color: var(--primary-80);
  }

  .header_SideMenu_Wrapper .side__Menu_List li.active > .header__SideMenu_Item {
    padding-inline-end: 1rem;
  }
}

.header_SideMenu_Wrapper
  .side__Menu_List
  li.active
  > .header__SideMenu_Item
  .pageIcon {
  --icon-color: var(--secondar-50);
}

.side_Menu-sub-menu {
  display: flex;
  flex-direction: column;
}

/* Layer 1 */

.header_SideMenu_Wrapper .side__Menu_List > li {
  padding-bottom: 1rem;
  border-bottom: solid 1px;
  border-image: linear-gradient(
      calc(90deg * var(--direction-num)),
      hsl(from var(--Gray-100) h s l / 40%) 0%,
      transparent 100%
    )
    1;
}

.header_SideMenu_Wrapper .side__Menu_List > li > .header__SideMenu_Item {
  font-size: var(--fz-t4);
  line-height: var(--lh-t4);
  font-weight: var(--fw-600);
  --color-accent: var(--Gray-100);
}

.header_SideMenu_Wrapper .side__Menu_List > li > .header__SideMenu_Item::after {
  --icon: 1.5rem;
}
.header_SideMenu_Wrapper .container {
  overflow: visible;
}
.header_SideMenu_Wrapper .side__Menu_List > li > .side_Menu-sub-menu {
  gap: 2rem;
  padding-top: var(--main-space);
  padding-inline-start: var(--title-space);
  position: absolute;
  height: 100%;
  width: 90vw;
  right: calc(100% * 3.5 / 12);
  top: 0;
  background-color: hsl(from var(--primary-00) h s l / 80%);
  transition: var(--transition);
  transform: translate(calc(1.5rem * var(--direction-num)));
  opacity: 0;
  visibility: hidden;
  margin: 0;
}

body:not(.rtl)
  .header_SideMenu_Wrapper
  .side__Menu_List
  > li
  > .side_Menu-sub-menu {
  right: auto;
  left: calc(100% * 3.5 / 12);
}

.header_SideMenu_Wrapper .side_Menu-sub-menu:not(:has(> li)) {
  display: none;
}

.header_SideMenu_Wrapper .side__Menu_List > li.active > .side_Menu-sub-menu {
  transform: translate(0);
  opacity: 1;
  visibility: visible;
}

.sideMenu_SubMenu_Header {
  display: grid;
  gap: 2rem;
  --icon: 18px;
  --icon-color: var(--white);
  --icon-me: 0.5rem;
  --icon-rotate: -90deg;
}

.subMenu__Title {
  margin-right: 2rem;
  color: var(--primary-60) !important;
}

.subMenu__Title .shape {
  --shape-width: 120px;
  --shape-padding: 0.5rem;
}
.header_SideMenu_Wrapper .side__Menu_List > li > .side_Menu-sub-menu > li {
  padding-right: 4rem;
}

.subMenu__Title .shape::before {
  background-color: var(--primary-100);
}

.header__SideMenu_Wrapper
  li:not([class*="have-sub-menu"])
  > .header__SideMenu_Item
  > .header__SideMenu_Title.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  color: white !important;
  user-select: none;
}

@media (max-width: 991px) {
  .header_SideMenu_Wrapper .side__Menu_List > li > .side_Menu-sub-menu {
    width: 100%;
    height: 100%;
    right: 0%;
    top: var(--main-space);

    background-color: unset;
    padding-top: 0;
    padding-inline: 0;
    height: fit-content;
  }

  .header_SideMenu_Wrapper:has(.side_Menu-have-sub-menu.active)
    .side__Menu_List {
    transform: translate(calc(-100% * var(--direction-num)));
  }

  .header_SideMenu_Wrapper:has(.side_Menu-have-sub-menu.active)
    .side__Menu_List
    > li
    > .header__SideMenu_Item {
    transform: translate(calc(-100% * var(--direction-num)));
  }

  .header_SideMenu_Wrapper .side__Menu_List > li > .side_Menu-sub-menu {
    transform: translate(calc(200% * var(--direction-num))) !important;
  }
  .header_SideMenu_Wrapper .side__Menu_List > li.active > .side_Menu-sub-menu {
    transform: translate(calc(100% * var(--direction-num))) !important;
  }
}

/* layer 2 */
.header_SideMenu_Wrapper
  .side__Menu_List
  > li.side_Menu-have-sub-menu
  > .side_Menu-sub-menu
  > li
  > .header__SideMenu_Item::after {
  --icon: 1.25rem;
}

.header_SideMenu_Wrapper
  .side__Menu_List
  > li.side_Menu-have-sub-menu
  > .side_Menu-sub-menu
  > li
  > .header__SideMenu_Item {
  font-size: var(--fz-t5);
  line-height: var(--lh-t5);
  font-weight: var(--fw-500);
}

/* Layer 3 */
.header_SideMenu_Wrapper
  .side__Menu_List
  > li.side_Menu-have-sub-menu
  > .side_Menu-sub-menu
  > li.side_Menu-have-sub-menu
  > .side_Menu-sub-menu {
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--Gray-100);
  margin: 0.25rem;
  margin-top: 0.5rem;
  gap: 0.5rem;
}

.header__SideMenu_Title:hover {
  color: var(--secondar-50) !important;
}

/* !------------------------------- header Side Menu End --------------------------------- */

/* *------------------------------- menu Button Start ------------------------------- */
.header__Desc_LogoBox,
.header__Tools_Wrapper {
  position: relative;
  max-height: 100%;
}

.header__Menu_Wrapper {
  display: flex;
  align-items: center;
}

button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}

.header__Menu_Wrapper .background {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
}

.menu__icon {
  width: 26px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition);
}

body:not(.rtl) .menu__icon {
  --direction-num: -1;
}

.menu__icon span {
  width: 100%;
  height: 2px;
  border-radius: 0.125rem;
  background-color: var(--header-accent);
  transition: var(--transition);
}

.header__Menu_Wrapper:hover .menu__icon {
  transform: rotate(calc(90deg * var(--direction-num)));
  padding: 0px 4px;
}

.header__Menu_Wrapper:hover .menu__icon span {
  width: 0.25rem;
  height: 0.25rem;
  transform: translateX(calc(7px * var(--direction-num)));
}

body:has(.header_SideMenu_Wrapper.active) {
  .header__Menu_Wrapper .menu__icon {
    transform: rotate(calc(90deg * var(--direction-num)));
    padding: 0px 4px;
  }

  .header__Menu_Wrapper .menu__icon span {
    width: 110%;
    height: 2px;
    transform: translateX(calc(8px * var(--direction-num)));
  }
  .header__Menu_Wrapper .menu__icon span:nth-of-type(2) {
    opacity: 0;
  }

  .header__Menu_Wrapper .menu__icon span:is(:nth-of-type(1), :nth-of-type(3)) {
    width: 100%;
    height: 2px;
    transform: translateX(2px)
      translateY(
        calc(var(--direction-num) * var(--header-menu-span-move, -2.5px))
      )
      rotate(
        calc(var(--header-menu-span-rotate, -45deg) * var(--direction-num))
      );
    transform-origin: left center;
  }

  .header__Menu_Wrapper .menu__icon span:nth-of-type(3) {
    --header-menu-span-rotate: 45deg;
    --header-menu-span-move: 2.5px;
  }
}
/* !------------------------------- menu Button End --------------------------------- */

/* *------------------------------- header menu attractions Start ------------------------------- */

.menu-main .menu__MegaMenu {
  --megamenu-height: 16rem;
  width: 46rem;
  height: var(--megamenu-height);
  overflow-y: scroll;
}

.menu-main .menu__MegaMenu::-webkit-scrollbar {
  width: 6px;
}

.menu-main .menu__MegaMenu::-webkit-scrollbar-track {
  background: var(--primary-99);
  border-radius: 100px 0 0 100px;
  overflow: hidden;
}

.menu-main .menu__MegaMenu::-webkit-scrollbar-thumb {
  background: var(--primary-40);
  border-radius: 100px;
  width: 4px;
}

.menu-main .menu__MegaMenu::-webkit-scrollbar-thumb:hover {
  background: var(--primary-30);
}

.header__Attraction_Item {
  --attr-accent: var(--Gray-40);
  --icon-url: url(../assets/icons/chevUp.svg);
  --icon-rotate: 90deg;
  --icon: 18px;
  --icon-inner: 1rem;
  --icon-me: 0.5rem;
  --icon-color: var(--attr-accent);
  padding-block: 0.75rem;
  padding-inline-end: 10px;
  transition: --attr-accent var(--transition);
}

.header__Attraction_Item.hover {
  --icon-transform: translateY(calc(var(--direction-num) * 0.25rem));
  --attr-accent: var(--primary-40);
}

.header__Attraction_Title {
  color: var(--attr-accent) !important;
  transition: color var(--transition);
}

.header__Attractions_List {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}

.attractio__Image_Col {
  position: sticky;
  height: 100%;
  max-height: 100%;
  top: 0;
  display: flex;
  align-items: center;
}

.attractio__Image_Col img {
  width: 100%;
  border-radius: var(--border-radius);
}

.header__Attraction_CarTitle {
  grid-column: 1 / span 2;
  border-bottom: solid 1px var(--Gray-95);
  margin-inline-end: 1rem;
}

.header__Attraction_CarTitle .shape {
  transform-origin: calc(-100% * var(--direction-num));
  transform: scale(0.75);
}
/* !------------------------------- header menu attractions End --------------------------------- */

.side_Menu-have-sub-menu[data-sidename="بین الملل"] .side_Menu-sub-menu,
.side_Menu-have-sub-menu[data-sidename="International Affairs"]
  .side_Menu-sub-menu,
.side_Menu-have-sub-menu[data-sidename="دولي"] .side_Menu-sub-menu {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  padding-top: calc(var(--main-space) + 48px) !important;
  width: 64vw !important;
  gap: 1.5rem !important;
}

.side_Menu-have-sub-menu[data-sidename="بین الملل"] .sideMenu_SubMenu_Header,
.side_Menu-have-sub-menu[data-sidename="International Affairs"]
  .sideMenu_SubMenu_Header,
.side_Menu-have-sub-menu[data-sidename="دولي"] .sideMenu_SubMenu_Header {
  position: absolute !important;
  top: 40px !important;
  right: 3.5rem !important;
}

body:not(.rtl) .side_Menu-have-sub-menu[data-sidename="بین الملل"] .sideMenu_SubMenu_Header,
body:not(.rtl) .side_Menu-have-sub-menu[data-sidename="International Affairs"]
  .sideMenu_SubMenu_Header,
body:not(.rtl) .side_Menu-have-sub-menu[data-sidename="دولي"]
  .sideMenu_SubMenu_Header {
  right: unset !important;
  left: 3.5rem !important;
}