/* styles-responsive.css — Responsive breakpoints */

@media (max-width: 900px) {
  .hero-content {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    display: none;
  }
  .hero-title {
    font-size: 2.2rem;
  }
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .jobs-grid,
  .testimonials-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }
  nav,
  .header-actions {
    display: none;
  }
  .menu-btn {
    display: flex;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .auth-page {
    grid-template-columns: 1fr;
  }
  .auth-left {
    display: none;
  }
  .auth-right {
    padding: 40px 28px;
  }
  .main-content {
    margin-left: 0;
  }
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .hamburger {
    display: flex;
  }
  .dash-main {
    margin-left: 0;
  }
  .dash-sidebar {
    transform: translateX(-100%);
  }
  .dash-sidebar.open {
    transform: translateX(0);
  }
  .dash-hamburger {
    display: flex;
  }
  .dash-body {
    padding: 20px 16px;
  }
  .dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .process-steps::before {
    display: none;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 0 16px;
  }
  .section {
    padding: 56px 0;
  }
  .hero-content {
    padding: 72px 16px 56px;
  }
  .hero-title {
    font-size: 1.9rem;
  }
  .hero-stats {
    gap: 16px;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dash-stats {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .process-steps {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .auth-right {
    padding: 32px 20px;
  }
  .page-body {
    padding: 16px;
  }
  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .topbar-right {
    display: none;
  }
  .hero-btns {
    flex-direction: column;
  }
  .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }
  .modal {
    padding: 24px 20px;
  }
  .dash-body {
    padding: 16px;
  }
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-header {
    flex-direction: column;
  }
  .page-header-actions {
    width: 100%;
  }
  .section-title {
    font-size: 1.6rem;
  }
  .dash-topbar {
    padding: 0 16px;
  }
  .dash-page-header {
    flex-direction: column;
  }
}