.mega-menu > .grid {
  max-width: 1440px;
  margin-inline: auto;
}

.mega-menu > .grid ul li a.font-bold.text-lg,
.mega-menu > .grid ul li a.text-gray-700 {
  /*
  text-underline-position: under;

  */
  text-decoration: none;
}

{#
.mega-menu>.grid ul li a::after {
  content: ">";
}
#}

.mega-menu ul[role=menu] li a {
  position: relative;
}

.featured-image {
  max-width: 100%;
  aspect-ratio: 16 / 9;
}


div#nav-section.active nav#main-menu ul.flex,
div#nav-section.active nav#secondary-menu ul.flex {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .5rem;
}
header div#nav-section.active {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  left: 0;
  position: absolute;
  top: 0;
  width: 100svw;
  padding: 6rem 1rem 1rem 1rem;
  height: 100svh;
  background-color: #ffffffcc;
  backdrop-filter: blur(6px);
}
header div#nav-section.active nav {
  width: 100%;
}
header div#nav-section.active nav ul li span {
  justify-content: space-between;
}

ul.subitem-menu {
  display: none;
  height: 0;
  padding-inline: 1rem;
  transition: height .3s ease-in-out;
  position: absolute;
}
li.item-menu.has-children.active ul.subitem-menu {
  display: none;
  height: 100%;
  gap: .5rem;
  margin-block: .5rem 0;
  position: relative;
}

.mega-menu > .grid ul li a {
  position: relative;
  padding-bottom: .25rem;
}
nav#secondary-menu ul li,
nav#main-menu ul li.item-menu,
.mega-menu ul li {
  margin-block: 0;
}

nav#main-menu ul li.item-menu > span::after,
nav#main-menu ul li.item-menu > a::after,
.mega-menu > .grid ul li a::after {
  content: "";
  height: 2px;
  width: 1px;
  background-color: transparent;
  display: block;
  left: .25rem;
  position: absolute;
  bottom: 0;
  transition: all .3s ease-in-out;
}
nav#main-menu ul li.has-children.active > span::after {
  content: "";
  width: calc(100% - 2rem);
}
nav#main-menu ul li.not-children > a:hover::after {
  content: "";
  width: calc(100% - .5rem);
}

.mega-menu > .grid ul li a::after {
  left: 0;
}
.mega-menu > .grid ul li a.active::after,
.mega-menu > .grid ul li a:hover::after {
  content: "";
  width: 100%;
}


@media (max-width: 900px) {
  nav#main-menu ul li.p-1 {
    padding-inline: 0;
  }
}

@media (max-width: 768px) {
  nav#main-menu ul li.has-children.active > span::after {
    width: calc(100% - .5rem);
  }
  nav#main-menu ul li.not-children > a:hover::after {
    content: "";
    width: calc(100% - .5rem);
    background-color: gray;
  }
  nav#secondary-menu ul.flex li {
    padding-block: .5rem;
  }
  li.item-menu.has-children.active ul.subitem-menu {
    display: grid;
  }
}