/* Custom styles to mimic Lucide icons if not using a library for icons */
  /* For a production environment, you'd typically use an icon library like Font Awesome or include SVGs directly. */
.menu-icon,
.x-icon {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-icon {
    display: block; /* Default to showing menu icon */
}

.x-icon {
    display: none; /* Default to hiding x icon */
}

  /* JavaScript will toggle these classes */
.menu-open .menu-icon {
    display: none;
}

.menu-open .x-icon {
    display: block;
}

  /* Basic responsive classes - Tailwind handles most of this */
@media (min-width: 768px) {
    .md\\:hidden {
        display: none !important;
    }
    .md\\:block {
        display: block !important;
    }
}

#fixedbutton {
    position: fixed;
    bottom: 10px;
    right: 10px;
}