/* ==========================================================================
   RT Systems — Responsive Styles
   Breakpoints: 1199px (laptop) | 991px (tablet) | 767px (mobile) | 575px (small)
   ========================================================================== */

/* ---------- Laptop ---------- */
@media (max-width: 1199.98px) {
  .hero h1 { font-size: 2.7rem; }
  .hero-core { width: 200px; height: 200px; }
  .hr-1 { width: 290px; height: 290px; }
  .hr-2 { width: 370px; height: 370px; }
  .section-title { font-size: 2.05rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
  .section-padding { padding: 70px 0; }

  .hero { padding: 130px 0 70px; min-height: auto; }
  .hero h1 { font-size: 2.35rem; }
  .hero-visual { min-height: 400px; margin-top: 60px; }

  .page-hero { padding: 140px 0 70px; }
  .page-hero h1 { font-size: 2.2rem; }

  /* Collapsed navbar panel */
  .navbar-collapse {
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 18px 22px;
    margin-top: 14px;
  }
  .navbar { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }

  /* Navbar bg is always white below 992px, so links stay dark regardless of scroll */
  .navbar .navbar-brand { color: var(--primary) !important; }
  .navbar .navbar-brand i, .navbar .navbar-brand span { color: var(--secondary); }
  .navbar .nav-link { color: var(--text) !important; }
  .navbar .nav-link:hover { color: var(--secondary) !important; }
  .navbar .nav-link.active { color: var(--secondary) !important; }
  .navbar .navbar-toggler { color: var(--primary); }

  .navbar .btn-main { margin-top: 10px; display: inline-block; }

  .process-row::before { display: none; }
  .process-step { margin-bottom: 34px; }

  .cta-banner { padding: 55px 32px; }
  .cta-banner h2 { font-size: 1.8rem; }

  .stat-box { margin-bottom: 24px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .section-padding { padding: 56px 0; }
  .section-title { font-size: 1.75rem; }

  .hero h1 { font-size: 1.95rem; }
  .hero p { font-size: 1rem; }

  .hero-visual { min-height: 340px; transform: scale(0.85); margin-top: 30px; }
  .hgc-1 { left: 0; }
  .hgc-2 { right: -8px; }
  .hgc-3 { left: 4%; }

  .page-hero h1 { font-size: 1.85rem; }

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

  .contact-form-card { padding: 32px 24px; }
  .contact-info-card { padding: 30px 24px; }

  .stat-num { font-size: 2.2rem; }

  .footer { padding-top: 54px; }
  .footer .col-lg-3, .footer .col-lg-4 { margin-bottom: 34px; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 575.98px) {
  .hero-btns .btn-main, .hero-btns .btn-outline-main { width: 100%; text-align: center; }

  .hero-visual { transform: scale(0.72); min-height: 300px; }

  .hero-core { width: 180px; height: 180px; }
  .hr-1 { width: 250px; height: 250px; }
  .hr-2 { width: 320px; height: 320px; }

  .navbar-brand { font-size: 1.25rem; }

  .section-tag { font-size: 0.72rem; }

  .client-pill { padding: 11px 24px; font-size: 0.85rem; }

  #scrollTop { bottom: 18px; right: 18px; width: 44px; height: 44px; }
}