/* ==========================================================================
   Hatim Computers — Responsive Styles
   Breakpoints: 1280px, 1024px, 768px, 480px, 360px
   ========================================================================== */

/* --- Large Desktops (1440px+) --- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1360px;
  }
}

/* --- Desktops & Small Laptops (Max 1280px) --- */
@media (max-width: 1280px) {
  .header-container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .header-brand img {
    height: 38px;
  }

  .desktop-nav {
    gap: 0.15rem;
  }

  .nav-list {
    gap: 0.15rem;
  }

  .nav-link {
    padding: 0.45rem 0.65rem;
    font-size: 0.865rem;
  }

  .header-actions {
    gap: 0.75rem;
  }

  .header-phone {
    font-size: 0.825rem;
    padding: 0.35rem 0.5rem;
  }

  .header-phone .phone-icon {
    width: 28px;
    height: 28px;
  }

  .header-actions .btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.825rem;
    white-space: nowrap;
  }

  .mega-menu-wrapper {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    padding: 1.35rem 1.5rem;
  }

  .mega-menu-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 220px;
    gap: 0.85rem;
  }

  .mega-category-title {
    font-size: 0.735rem;
  }

  .mega-subitem a {
    font-size: 0.775rem;
    padding: 3px 5px;
  }

  .mega-subitem .sub-desc {
    font-size: 0.675rem;
  }

  .mega-cta-panel {
    padding: 1.1rem 1rem;
  }

  .mega-cta-panel h4 {
    font-size: 0.9rem;
  }

  .mega-cta-panel p {
    font-size: 0.735rem;
    line-height: 1.35;
    margin-bottom: 0.85rem;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Medium Laptops & Tablets Landscape (1025px - 1180px) --- */
@media (max-width: 1180px) and (min-width: 1025px) {
  .mega-menu-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .mega-cta-panel {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    margin-top: 0.5rem;
  }

  .mega-cta-panel > div {
    display: flex;
    flex-direction: column;
    max-width: 70%;
  }

  .mega-cta-panel h4 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
  }

  .mega-cta-panel p {
    font-size: 0.75rem;
    margin-bottom: 0;
  }

  .mega-cta-panel .btn {
    width: auto;
    margin-left: 1.25rem;
    flex-shrink: 0;
  }
}

/* --- Tablets & Medium Screens (Max 1024px) --- */
@media (max-width: 1024px) {
  .desktop-nav {
    display: none;
  }

  .hamburger-btn {
    display: inline-flex;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .training-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .feature-split.reverse {
    direction: ltr;
  }

  .sales-banner-card {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-section-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

/* --- Tablets & Mobile Boundary (Max 768px) --- */
@media (max-width: 768px) {
  .site-header {
    height: var(--header-height-mobile);
  }

  .header-phone span {
    display: none;
  }

  .header-actions .btn {
    display: none;
  }

  .hero-slider-section {
    height: 520px;
    min-height: 500px;
  }

  .hero-headline {
    font-size: 2.15rem;
  }

  .hero-subheading {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .slider-arrow {
    display: none;
  }

  .trust-bar-section {
    margin-top: 1.5rem;
  }

  .trust-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .feature-checklist {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .training-grid {
    grid-template-columns: 1fr;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .partners-grid {
    grid-template-columns: 1fr;
  }

  .ecosystem-logos-bar {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .ecosystem-logos-list {
    justify-content: center;
    gap: 1rem 1.5rem;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .footer-legal-links {
    justify-content: center;
  }

  .mobile-bottom-bar {
    display: block;
  }

  body {
    padding-bottom: 64px; /* clearance for bottom bar */
  }

  .floating-whatsapp {
    bottom: 74px;
    right: 16px;
    width: 50px;
    height: 50px;
  }
}

/* --- Mobile Phones (Max 480px) --- */
@media (max-width: 480px) {
  .hero-slider-section {
    height: 480px;
  }

  .hero-headline {
    font-size: 1.75rem;
  }

  .hero-btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-btn-group .btn {
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.col-span-2 {
    grid-column: span 1;
  }

  .form-submit-row {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .form-submit-row .btn {
    width: 100%;
  }

  .trust-bar-card,
  .enquiry-form-card,
  .contact-info-card,
  .sales-banner-card {
    padding: 1.5rem 1.25rem;
  }

  .section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

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

  .cta-banner-buttons .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .footer-services-2col {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

/* --- Small Mobile Phones (Max 360px) --- */
@media (max-width: 360px) {
  .header-brand img {
    height: 34px;
  }

  .hero-headline {
    font-size: 1.55rem;
  }

  .service-card {
    padding: 1.5rem 1.15rem;
  }
}