/* ===================================================
   NEW WAVE CONSULTANCY — Responsive Stylesheet
=================================================== */

/* ---- Tablet: 1024px and below ---- */
@media (max-width: 1024px) {
  .nav-link {
    padding: 10px 10px;
    font-size: 12.5px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

/* ---- Mobile: 768px and below ---- */
@media (max-width: 768px) {
  :root {
    --header-height: 70px;
  }

  /* Top Bar — hide on mobile, no transition interference */
  .top-bar {
    display: none !important;
  }

  /* Override sticky-wrap top-bar rules on mobile since it's hidden */
  .header-sticky-wrap .top-bar,
  .header-sticky-wrap.scrolled .top-bar {
    max-height: none;
    opacity: 1;
  }

  .top-bar .container {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .top-bar-left {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Header */
  .main-header { height: var(--header-height); }

  .main-nav { display: none; }

  .apply-btn { display: none; }

  .hamburger { display: flex; }

  .logo-wrap img { height: 52px; }

  /* Hero */
  .hero { min-height: 420px; padding: 50px 0; }

  .hero-stats { gap: 20px; }

  .hero-stat-num { font-size: 1.5rem; }

  /* Page Hero */
  .page-hero { padding: 40px 0 60px; }

  /* Cards */
  .cards-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  /* Section spacing */
  .section-pad { padding: 50px 0; }
  .section-pad-sm { padding: 35px 0; }

  .section-title { font-size: 1.6rem; }
}

/* ---- Small Mobile: 480px and below ---- */
@media (max-width: 480px) {
  .top-bar-right { display: none; }

  .hero-btns { flex-direction: column; }

  .hero-btns .btn { justify-content: center; }

  .cta-strip h2 { font-size: 1.5rem; }

  .whatsapp-float { bottom: 20px; right: 20px; width: 50px; height: 50px; }

  .back-to-top { bottom: 82px; right: 20px; }
}

/* ---- Large Desktop: 1440px+ ---- */
@media (min-width: 1440px) {
  .container { max-width: 1340px; }
}