.hero-section {
  display: flex;
  flex-direction: column;
  padding: 50px;
}

.hero-title {
  width: 100%;
  margin-bottom: 25px;
}

.new-lead-btn {
  width: auto;
  min-width: 140px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.toggle-buttons {
  justify-content: space-between;
  margin: 0 auto;
  display: flex;
  width: 75%;
  justify-content: space-between;
}

.toggle-buttons button {
  padding: 0.45rem 1.1rem;
  width: 30%;
  background: #171717;
  color: whitesmoke;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.toggle-buttons button.active {
  background: #ff6642;
  color: white;
  width: 30%;
  border-radius: 0px;
  transition: background 0.15s ease, color 0.15s ease;
}

.toggle-buttons button:first-child { border-right: none; }

/* =========================================================
   MOBILE HERO / TABLE BUTTON CLEANUP
   Put this at the VERY BOTTOM of dashboard_hero.css
   ========================================================= */

@media (max-width: 900px) {
  .hero-section {
    padding: 24px 12px 18px;
  }

  .toggle-buttons {
    width: 100%;
  }

  .toggle-buttons button {
    width: auto;
  }

  .toggle-buttons button.active {
    width: auto;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 18px 10px 12px;
  }
}