/* Sliding Menu Container */
#sliding-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%; 

    height: calc(100% - env(safe-area-inset-bottom)); 
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
    display: flex;
    flex-direction: column; /* Allow for header, content, and footer alignment */
    overflow: hidden; /* Ensure no overflowing content */
    overflow-y: auto; /* Allow scrolling if necessary */

}

/* Make the menu visible when toggled */
#sliding-menu-container.menu-visible {
    transform: translateX(0);
}

/* Main Menu and Submenu Styling */
.ml-menu, .ml-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
    height: inherit;
}

/* Submenu */
.ml-submenu {
    display: none;
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}

/* Submenu - When open */
.ml-submenu.open {
    display: block;
    transform: translateX(0); /* Slide into view */
}

/* Sliding Out (for parent menus) */
.ml-menu.sliding-out, .ml-submenu.sliding-out {
    transform: translateX(-100%); /* Slide out to the left */
}

/* Menu Items */
.ml-menu > li > a,
.ml-submenu > li > a {
    display: block;
    padding: 15px 20px;
    color: #6C6D74;
    text-decoration: none;
    background-color: #fff;
    position: relative; /* For parent indicators */
}

.ml-menu > li > a:hover,
.ml-submenu > li > a:hover {
    background-color: #fff; /* Highlight on hover */
}

/* Parent Menu Item Indicator */
.menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 8px;
  height: 14px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1.1665 12.8334L6.99984 7.00004L1.1665 1.16671" stroke="%236C6D74" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
  background-size: contain;
}
/* Back Button Styling */
.ml-back {
    background-color: rgba(0, 0, 0, 0.1);
}

.ml-back a {
    display: block;
    padding: 15px 20px;
    color: #0056b3 !important;
    text-decoration: none;
    font-size: 16px;
    position: relative;
}

.ml-back a:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.ml-back a::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 8px;
  height: 14px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M6.8335 1.16669L1.00016 7.00002L6.8335 12.8334" stroke="%2317479C" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
  background-size: contain;
}

/* Search Box Styling (Optional) */
.sliding-menu-search {
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sliding-menu-search input {
    width: calc(100% - 40px);
    padding: 8px 10px;
    margin: 0;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}

/* Menu Toggle Button */
#sliding-menu-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10000;
    background-color: #9e1847;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

#sliding-menu-toggle:hover {
    background-color: #7b1235;
}


























/* Hamburger Button Styles */
.ham-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 40px;
    height: 26px;
    position: relative;
    z-index: 10000; /* Ensure it's on top */
  }
  
  /* Hamburger Lines */
  .ham-menu span {
    position: absolute;
    width: 35px;
    height: 5px;
    background: #17479c;
    border-radius: 10px;
    display: inline-block;
    transition: all 0.3s ease;
  }
  
  /* Top Line */
  .ham-menu span.top {
    top: 0;
  }
  
  /* Middle Line */
  .ham-menu span.middle {
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* Bottom Line */
  .ham-menu span.bottom {
    bottom: 0;
  }
  
  /* Menu Open State */
  .ham-menu.menu-open span.top {
    transform: rotate(45deg);
    top: 50%;
  }
  
  .ham-menu.menu-open span.middle {
    opacity: 0;
  }
  
  .ham-menu.menu-open span.bottom {
    transform: rotate(-45deg);
    top: 50%;
  }
  
  /* Hover Effects */
  .ham-menu:hover span {
    background: #0056b3;
  }
  
  /* Menu Wrapper for Preventing Shifts */
  .mm-wrapper {
    position: relative;
    overflow: hidden;
  }
  
  /* Positioning on Mobile */
  @media screen and (max-width: 1024px) {
   /* Default state - toggle button is relative */
#botao-mm {
    position: relative;
    z-index: 10000; /* Ensure it stays on top of content */
  }
  
  /* When the menu is open, set the toggle to fixed */
  #sliding-menu-container.menu-visible + #botao-mm {
    position: fixed;
    top: 20px;
    right: 20px;
  }
  
  }

/* Hide sliding menu on larger screens */
@media screen and (min-width: 1025px) {
    #sliding-menu-container {
        display: none; /* Completely hide the menu */
    }
    #botao-mm {
        display: none; /* Hide the hamburger button */
    }
}

  

  .menu-item-type-custom a {
    font-family: var(--e-global-typography-a1dcd3c-font-family), Sans-serif;
  font-size: var(--e-global-typography-a1dcd3c-font-size);
  line-height: var(--e-global-typography-a1dcd3c-line-height);

color:#6C6D74;
  }



/* Custom button at the bottom */
.custom-bottom-button {
    display: block;
    width: calc(100% - 30px); /* Adjust to fit inside the menu */
    margin: 15px auto;
    padding: 10px 15px;
    background-color: #0056b3; /* Button background */
    color: #fff; /* Button text color */
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .custom-bottom-button:hover {
    background-color: #004699; /* Hover background */
  }