/* =========================================================
   Innovity Technologies - Responsive Styles
   ========================================================= */

@media (max-width: 1200px) {
  :root {
    --section-padding: 104px;
  }

  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .industry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  :root {
    --section-padding: 92px;
  }

  .nav-container {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .btn-quote {
    display: none;
  }

  .primary-navigation {
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(11, 95, 255, 0.2);
    border-radius: 16px;
    box-shadow: var(--shadow-medium);
    padding: 0.65rem;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
  }

  .primary-navigation.open {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-list a {
    width: 100%;
    padding: 0.65rem;
  }

  .hero {
    padding-top: 140px;
  }

  .hero-grid,
  .two-column,
  .featured-product .product-card,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .hero-content h1,
  .inner-hero h1 {
    max-width: 100%;
  }

  .hero-visual {
    max-width: 640px;
    margin-inline: auto;
  }

  .service-grid,
  .why-grid,
  .testimonial-grid,
  .generic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid,
  .resource-grid,
  .blog-grid,
  .jobs-grid,
  .case-grid,
  .related-grid,
  .two-card-split {
    grid-template-columns: 1fr;
  }

  .capability-layout {
    grid-template-columns: 1fr;
  }

  .capability-primary {
    grid-column: auto;
  }

  .service-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industry-grid,
  .logo-wall,
  .technology-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 80px;
  }

  .container {
    width: min(100% - 1.2rem, var(--container));
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .technology-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-feature-grid {
    grid-template-columns: 1fr;
  }

  .service-grid,
  .why-grid,
  .testimonial-grid,
  .generic-grid,
  .stat-grid,
  .industry-grid,
  .logo-wall {
    grid-template-columns: 1fr;
  }

  .service-process-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .timeline li {
    padding-left: 2.5rem;
  }

  .timeline::before {
    left: 14px;
  }

  .timeline li span {
    left: 0.42rem;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand,
  .footer-column {
    justify-items: center;
  }

  .footer-brand p,
  .footer-caption {
    max-width: 100%;
  }

  .site-footer ul {
    justify-items: center;
  }

  .social-links {
    justify-content: center;
  }

  .hero-actions,
  .product-actions {
    width: 100%;
  }

  .hero-actions .btn,
  .product-actions .btn,
  .final-cta .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .technology-card-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 125px;
    padding-bottom: 70px;
  }

  .inner-hero {
    padding-top: 132px;
    padding-bottom: 60px;
  }

  .not-found-panel {
    padding: 2rem 1rem;
  }
}
