.main-navigation-tiuga {
width: 400px;
 font-family: "futura"!important;
}
.tiuga-span{
    font-size: 16px;
    line-height: 0;
    margin-bottom:0;
}
.menu-tiuga,
.submenu-tiuga {
  list-style-type: none;
  padding: 0;
  margin: 0;
  
   
}

.submenu-tiuga{
    
    font-size: 22px;
}
.menu-item-tiuga {
  position: relative;
 font-size: 36px;
}

.toggle-button-tiuga,
.submenu-tiuga a {
  background: none;
  border: none;
  padding: 20px 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative; /* For positioning pseudo-elements */
  display: block;
  color: #fff;
  text-decoration: none;
 font-family: "futura"!important;
}

/* Persistent faded underline with ::after */
.toggle-button-tiuga::after,
.submenu-tiuga a::after {
  content: '';
  position: absolute;
  width: 100%; /* Full width for a constant faded underline */
  height: 1px;
  background-color: #aaa;
  bottom: 0;
  opacity: 0.2; /* Low opacity for the faded effect */
  left: 0; /* Align with the start of the element */
  transition: opacity 1.2s ease; /* Transition for opacity */
}

/* Adjusting submenu items' faded underline for indentation */
.submenu-tiuga a::after {
  left: 30px; /* Indentation to align with submenu text */
  width: calc(100% - 60px); /* Adjust width to match text length */
}

/* Animated underline that appears on hover with ::before */
.toggle-button-tiuga::before,
.submenu-tiuga a::before {
  content: '';
  position: absolute;
  width: 0; /* Start with no width for the animation */
  height: 2px;
  background-color: #aaa;
  bottom: 0;
  transition: width 1.2s ease; /* Animate the width */
  left: 0; /* Align with the start of the element */
}

/* Adjusting submenu items' animated underline for indentation */
.submenu-tiuga a::before {
  left: 30px; /* Indentation to align with submenu text */
}

/* Hover effect to expand the animated underline */
.menu-item-tiuga.has-children-tiuga > .toggle-button-tiuga:hover::before,
.menu-item-tiuga.has-children-tiuga > .toggle-button-tiuga.active::before,
.submenu-tiuga a:hover::before {
  width: 100%; /* Full width on hover */
}

/* Adjusting the expanding underline on hover for submenu items */
.submenu-tiuga a:hover::before {
  width: calc(100% - 60px); /* Adjust for the padding on submenu items */
}

.submenu-tiuga {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  will-change: max-height;
}

.submenu-tiuga a {
  padding-left: 30px; /* Additional indentation for submenu items */
}

.submenu-tiuga a:hover {
  color: #fff; /* Optional: Change color on hover */
}