/* ============================================================
   SPAN SECURITY SERVICES PVT. LTD. - RESPONSIVE STYLES
   Version: 2.0
   ============================================================ */

/* ============================================================
   XXL & XL DEVICES (Max: 1199px)
   ============================================================ */
@media (max-width: 1199px) {
  :root {
    --space-4xl: 5rem;
    --space-3xl: 3.5rem;
  }
  
  .container { max-width: 960px; padding-inline: 1.5rem; }

  /* ── Hero Slider ── */
  .slide-text__title { font-size: 3.2rem; }
  .slider-arrow { width: 46px; height: 46px; }

  /* ── Footer ── */
  .footer-grid { gap: 2rem; }
}

/* ============================================================
   LARGE DEVICES / TABLETS (Max: 991px)
   ============================================================ */
@media (max-width: 991px) {
  :root {
    --header-nav-h: 70px;
  }

  .container { max-width: 720px; }

  /* ── Top Bar ── */
  .top-bar__contact span { display: none; /* Hide text, keep icons */ }
  .top-bar__contact { gap: 1rem; }

  /* ── Navigation ── */
  .navbar__menu { display: none; /* Hide desktop menu */ }
  .navbar__cta { display: none; }
  .hamburger { display: flex; /* Show hamburger */ }
  
  .navbar.scrolled { height: 70px; }

  /* ── Hero Slider ── */
  .hero-slider { height: 75vh; min-height: 500px; }
  .slide-text__title { font-size: 2.8rem; }
  .slide-text__desc { font-size: 0.95rem; }
  .slider-arrow { display: none; /* Hide arrows on tablet/mobile */ }
  .slider-scroll-hint { display: none; }

  /* ── Sections ── */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  
  .stat-item:nth-child(2)::after { display: none; } /* Remove border after 2nd item */

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col { margin-bottom: 1.5rem; }
}

/* ============================================================
   MEDIUM DEVICES / PHONES (Max: 767px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --space-4xl: 4rem;
    --space-3xl: 2.5rem;
    --space-2xl: 2rem;
    --space-xl:  1.5rem;
  }

  .container { max-width: 540px; }

  /* ── Page Hero ── */
  .page-hero { padding: 3rem 0 2rem; }
  .page-hero__title { font-size: 2rem; }

  /* ── Sections ── */
  .section-title { font-size: 2rem; }

  /* ── Grids ── */
  .services-grid { grid-template-columns: 1fr; }
  
  .contact-form { grid-template-columns: 1fr; }
  
  .process-grid { 
    grid-template-columns: 1fr; 
    gap: 3rem; 
  }
  
  .process-step::after {
    content: '';
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2rem;
    background: rgba(130,2,6,0.2);
  }
  .process-step:last-child::after { display: none; }

  /* ── CTA Banner ── */
  .cta-banner { text-align: center; }
  .cta-banner .container { justify-content: center; }
  .cta-banner__actions { justify-content: center; width: 100%; margin-top: 1rem; }
  .cta-banner::before { display: none; }
  
  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-col__title { margin-bottom: 1rem; }
  .footer-bottom .container { flex-direction: column; text-align: center; gap: 1rem; }
}

/* ============================================================
   SMALL DEVICES (Max: 575px)
   ============================================================ */
@media (max-width: 575px) {
  :root {
    --header-topbar-h: 0px; /* Hide top bar on mobile */
  }

  .top-bar { display: none; }

  .navbar__logo img { height: 42px; }
  .navbar.scrolled .navbar__logo img { height: 38px; }

  /* ── Hero Slider ── */
  .hero-slider { height: 100svh; } /* Full mobile viewport */
  .slide-text__badge { margin-bottom: 1rem; font-size: 0.65rem; }
  .slide-text__title { font-size: 2.2rem; margin-bottom: 1rem; }
  .slide-text__desc { display: none; /* Hide description on small mobile to save space */ }
  .slide-text__actions { flex-direction: column; width: 100%; }
  .slide-text__actions .btn { width: 100%; justify-content: center; }
  
  /* ── Stats ── */
  .stats-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .stat-item::after {
    right: auto;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 1px;
  }
  
  /* ── Values Bar ── */
  .values-bar__item { width: 100%; justify-content: center; }

  /* ── Compliance Table ── */
  .compliance-table th,
  .compliance-table td { padding: 0.5rem; font-size: 0.75rem; }
}

/* ============================================================
   EXTRA SMALL DEVICES (Max: 400px)
   ============================================================ */
@media (max-width: 400px) {
  .section-title { font-size: 1.75rem; }
  .slide-text__title { font-size: 1.8rem; }
}