/* Responsive Stylesheet */

@media (max-width: 1200px) {
  :root {
    --container-padding: 1.5rem;
  }
  
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }

  .hero-content {
    justify-items: center;
    max-width: 700px;
    margin: 0 auto;
  }

  .hero-mockup-wrapper {
    justify-content: center;
  }

  .split-scroll-container {
    flex-direction: column !important;
  }

  .split-scroll-left {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 2rem;
  }

  .split-scroll-right {
    width: 100% !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 992px) {
  /* Navigation Drawer Layout */
  .desktop-nav {
    display: none !important;
  }
  
  .menu-toggle-btn {
    display: flex !important;
  }
  
  .interactive-map-showcase {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  
  .map-sidebar {
    order: 2;
  }
  
  .map-wrapper {
    order: 1;
    height: 400px !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 500px;
    margin: 0 auto;
    gap: 2.5rem;
  }

  .platinum-featured {
    transform: scale(1) !important;
  }

  .timeline-container::after {
    left: 20px !important;
  }

  .timeline-step {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 45px !important;
    text-align: left !important;
  }

  .timeline-step:nth-child(even) {
    flex-direction: column !important;
    padding-left: 45px !important;
  }

  .timeline-badge {
    left: 20px !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.75rem !important;
    line-height: 1.15;
  }

  h2 {
    font-size: 2rem !important;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .features-grid {
    grid-template-columns: 1fr !important;
  }

  .how-it-works-grid {
    grid-template-columns: 1fr !important;
  }
  
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.25rem !important;
  }

  .card {
    padding: 1.5rem !important;
  }

  .live-tracking-panel {
    padding: 1rem !important;
  }
}