.dda-mega-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
.dda-mega-menu > li {
  position: relative;
}
.dda-mega-menu > li > a {
  display: block;
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
  color: var(--dda-on-surface-0);
  padding: 20px 16px;
  position: relative;
}

.dda-mega-menu > li:hover > a,
.dda-mega-menu > li > a.active {
  color: var(--dda-color-primary-40);
}

body.transparent .dda-mega-menu > li > a {
  color: var(--dda-neutral-100);
}

.dda-mega-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 4px;
  background-color: var(--dda-color-primary-40);
  border-radius: 8px 8px 0px 0px;
  transform: translateX(-50%);
  /* transition: all 0.25s ease-in-out; */
}

body.transparent .dda-mega-menu > li > a::after {
  background-color: var(--dda-neutral-100);
}

.dda-mega-menu > li:hover > a::after,
.dda-mega-menu > li > a:focus-visible:after,
.dda-mega-menu > li > a.active::after {
  width: calc(100% - 32px);
}
/********************************/
.dda-header-menu li {
  list-style: none;
}
.dda-header-menu li::marker {
  display: none;
}
.dda-default-submenu {
  display: none;
  min-width: 350px;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  padding-top: 5px;
}

.dda-default-submenu ul {
  max-height: 325px;
  overflow: visible;
  overflow-x: visible;
  overflow-y: auto;
}

.dda-default-submenu ul::-webkit-scrollbar {
  width: 6px;
}

.dda-default-submenu ul::-webkit-scrollbar-track {
  background: transparent;
}

.dda-default-submenu ul::-webkit-scrollbar-thumb {
    background: var(--dda-on-primary-98);
}

.dda-default-submenu:hover ul::-webkit-scrollbar-thumb {
    background: var(--dda-on-primary-98);
}

.dda-default-submenu a,
.dda-default-submenu .dda-submenu-title {
  position: relative;
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
}

.dda-default-submenu a.has-submenu::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: solid 1px var(--dda-color-primary-40);
  border-bottom: solid 1px var(--dda-color-primary-40);
  position: absolute;
  top: 50%;
  inset-inline-end: 9px;
  margin-top: -4.5px;
  transform: rotate(-45deg);
}
:root[dir='rtl'] .dda-default-submenu a.has-submenu::after {
  transform: rotate(135deg);
}

.dda-default-submenu span {
  display: block;
  border-bottom: solid 1px #ddd;
  padding: 5px 8px 10px 8px;
  margin-bottom: 5px;
}

.dda-default-submenu > ul {
  width: 100%;
  max-width: 350px;
  background-color: var(--dda-surface-100);
  border-radius: 5px;
  padding: 10px !important;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
}

.dda-default-submenu ul li {
  list-style: none;
  position: relative;
  margin-bottom: 1px;
}
.dda-default-submenu ul li a {
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
  color: var(--dda-on-surface-0);
  display: block;
  padding: 10px 7px;
  border-radius: 8px;
}
.dda-default-submenu ul li:hover > a,
.dda-default-submenu ul li a.active {
  background-color: var(--dda-on-primary-98);
  color: var(--dda-on-primary-variant-40);
}

.dda-default-subsubmenu {
  display: none;
  width: 300px;
  position: absolute;
  inset-inline-start: 100%;
  top: 0;
  margin-inline-start: 15px;
}
.dda-default-subsubmenu.is-visible {
  display: block;
  padding: 0px 5px;
}
.dda-default-subsubmenu .dda-default-subsubmenu-content {
  max-width: 100%;
  background-color: var(--dda-surface-100);
  border-radius: 5px;
  padding: 10px !important;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
  position: fixed;
  width: 350px;
}
.dda-default-subsubmenu-content ol {
  padding: 0px;
}

.dda-main-megamenu {
  display: none;
  width: 100%;
  position: fixed;
  inset-inline-start: 0;
}
.dda-megamenu-wrap {
  width: 90vw;
  margin: 0 auto;
  padding-top: 5px;
}
.dda-megamenu-content {
  height: 300px;
  overflow-x: visible;
  overflow-y: auto;
  background: var(--dda-surface-100);
  border-radius: 8px;
  margin: 0 auto;
  padding: 42px 15px;
  box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
  position: relative;
}

.dda-megamenu-content::-webkit-scrollbar {
  width: 6px;
}

.dda-megamenu-content::-webkit-scrollbar-track {
  background: transparent;
}

.dda-megamenu-content::-webkit-scrollbar-thumb {
    background: var(--dda-on-primary-98);
}

.dda-megamenu-content::-webkit-scrollbar-thumb:hover {
    background: var(--dda-on-primary-98);
}
.dda-mega-menu > li:hover .dda-default-submenu,
.dda-mega-menu > li:hover .dda-main-megamenu,
.dda-default-submenu.is-visible,
.dda-main-megamenu.is-visible {
  display: block;
}
.dda-megamenu-content ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 !important;
}
.dda-megamenu-content .megamemu-sub-title {
  font-size: var(--font-h6);
  font-weight: var(--font-weight-regular);
  padding: 8px 15px 8px 15px;
}

.dda-megamenu-content .dda-mega-menu-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 16px;
  background: var(--dda-surface-100);
  color: var(--dda-on-surface-0);
  border-radius: 8px;
  /* transition: all 500ms ease; */
}
.dda-megamenu-content .dda-mega-menu-link:hover {
  background-color: var(--dda-on-primary-98);
}
.dda-mega-menu-link {
  display: block;
}

.dda-mega-menu-link .dda-mega-menu-icon {
  width: 40px;
  height: 40px;
  background: var(--dda-on-primary-94);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dda-color-primary-40);
}

.dda-mega-menu-link .text-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.dda-mega-menu-link .dda-mega-menu-text {
  display: block;
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
}

.dda-mega-menu-link .dda-mega-menu-desc {
  font-size: var(--font-caption);
  font-weight: var(--font-weight-regular);
  color: var(--dda-on-surface-variant-30);
  max-height: 40px;
  overflow: hidden;
}
.dda-mega-menu a:focus-visible {
  outline: solid 2px var(--dda-primary-variant-87) !important;
  outline-offset: 0px;
}

@media (max-width: 1024px) {
  .dda-mega-menu {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .dda-mega-menu > li > a::after {
    transition: all 0.25s ease-in-out;
  }
  .dda-megamenu-content .dda-mega-menu-link {
    transition: all 500ms ease;
  }
}