@media (max-width: 767px) {
      .menu-enter {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
      }
      .menu-enter.active {
        max-height: 500px;
        opacity: 1;
      }
    }


    /* Smooth fade animation */
    .fade {
      animation: fade 1s ease-in-out;
    }
    @keyframes fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

/* --- Mobile Fix for Hero Slider --- */
@media (max-width: 768px) {
  #hero-slider {
    height: auto !important;
    min-height: 90vh;
  }

  #hero-slider .slide {
    position: relative !important;
    flex-direction: column !important;
    text-align: center !important;
    padding: 2rem 1rem !important;
  }

  #hero-slider .slide img {
    width: 70% !important;
    max-width: 280px !important;
    margin: 1rem auto !important;
  }

  #hero-slider .slide .text-white {
    width: 100% !important;
  }

  #hero-slider h1 {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }

  #hero-slider p {
    font-size: 0.9rem !important;
  }

  #hero-slider a {
    font-size: 0.9rem !important;
    padding: 0.6rem 1.2rem !important;
  }

  #hero-slider button {
    font-size: 1.5rem !important;
    padding: 0.5rem !important;
  }
}
@media (max-width: 768px) {
  /* Center and lift up the dots */
  #hero-slider .absolute.bottom-6 {
    bottom: 1.5rem !important; /* move them a bit higher */
    justify-content: center !important;
    transform: translateY(-10px);
  }

  #hero-slider .dot {
    width: 10px !important;
    height: 10px !important;
    opacity: 0.8 !important;
  }

  /* Optional: make active dot larger for better look */
  #hero-slider .dot.active {
    background-color: white !important;
    width: 12px !important;
    height: 12px !important;
  }
}