.hamburger {
  display: none; /* hidden by default */
}

/* ==================== Mobile (up to 768px) ==================== */
@media (max-width: 768px) {
  .navbar {
    padding: 10px 20px;
  }

  .logo img {
    height: 60px;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    background: #161515;
    position: absolute;
    top: 100px;
    right: 10px;
    width: 25%;
    text-align: center;
    padding: 20px 0;
    gap: 15px;
  }

  .nav-menu a {
        font-size: 14px;   /* 👈 reduce font size for small menu */
    }
  .nav-menu.show {
    display: flex;
  }

  .hamburger {
    display: block !important;  /* force show */
    font-size: 30px;
    cursor: pointer;
    color: #f2eded;
    position: relative;
  z-index: 9999;
  }

  .contact-info {
    flex-direction: column; /* ✅ stack vertically */
    font-size: 14px;
    text-align: center; /* center each line */
    gap: 0;
  }

  .contact-info p {
    margin: 5px 0;
  }

  .home-link {
    font-size: 15px; /* slightly larger for tap targets */
  }
}

/* ==================== Tablet (768px - 1024px) ==================== */
@media (max-width: 1024px) {
  .navbar {
    padding: 10px 30px;
  }

  .logo img {
    height: 70px;
  }

  .hamburger {
    font-size: 30px;
    cursor: pointer;
    color: #f2eded;
  }

  .contact-info {
    gap: 0;
    font-size: 15px; /* slightly smaller */
    flex-wrap: wrap; /* ensures wrapping if needed */
  }
}