/* Ex-TopUp Desktop Overrides (min-width: 768px) */

@media screen and (min-width: 768px) {
  body {
    background: #f4f6f8;
    max-width: 960px;
    margin: 0 auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    background-image: var(--bg-gradient);
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
  }

  header {
    max-width: 960px;
    margin: 0 auto;
    left: 0;
    right: 0;
  }

  .bottom-nav {
    max-width: 960px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }

  /* Slider Heights and layouts on desktop */
  .slider-container {
    height: 300px; /* Taller on desktop */
  }

  .slide-caption h3 {
    font-size: 20px;
  }

  .slide-caption p {
    font-size: 13px;
  }

  /* Expand grids to 4 columns */
  .sectors-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }



  .packages-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .payment-methods-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .profile-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Two support buttons side-by-side */
  .support-buttons-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Modals placement centering */
  .modal-content {
    max-width: 480px;
  }
}