/* ==========================================================================
   Responsive Rules — Desktop / Laptop / Tablet / Mobile
   ========================================================================== */

/* Laptop */
@media (max-width: 1200px) {
  .container { padding: 0 1.5rem; }
  .hero-content h1 { font-size: 2.5rem; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
  .division-grid, .why-grid, .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cards-grid .why-card:nth-child(9), .why-cards-grid .why-card:nth-child(10) { grid-column: auto; }
  .cert-grid .cert-card:nth-child(5), .cert-grid .cert-card:nth-child(6) { grid-column: auto; }
  .industry-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Tablet */
@media (max-width: 960px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.1rem; }
  .loader-mark { width: min(330px, 78vw); }
  .logo-img { height: 56px; }
  .site-header.scrolled .logo-img { height: 48px; }
  .main-nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 380px; height: 100vh; background: var(--white); flex-direction: column; align-items: flex-start; padding: 6rem 2rem 2rem; gap: 0; box-shadow: var(--shadow-lg); transition: right 0.45s cubic-bezier(0.22,1,0.36,1); overflow-y: auto; }
  .main-nav.open { right: 0; }
  .main-nav > ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .main-nav > ul > li { width: 100%; border-bottom: 1px solid var(--border-light); }
  .main-nav a { color: var(--navy) !important; padding: 1rem 0; display: block; }
  .header-actions { flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.5rem; width: 100%; }
  .header-actions .btn { color: var(--navy) !important; border-color: var(--navy) !important; width: 100%; }
  .mega-menu { position: static; transform: none; width: 100%; box-shadow: none; opacity: 1; visibility: visible; display: none; grid-template-columns: 1fr; padding: 0.5rem 0 0.5rem 1rem; }
  li.has-mega.mega-open .mega-menu { display: grid; }
  .mega-promo { display: none; }
  .nav-toggle { display: flex; }

  .hero { min-height: 68vh; }
  .hero-content h1 { font-size: 2.1rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats.hero-stats-3 { grid-template-columns: repeat(3, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: var(--space-lg); }
  .about-preview-visual { padding-bottom: 0; margin-top: 0.5rem; min-height: 0; height: auto; flex-direction: column; gap: 0.9rem; }
  .about-visual-primary, .about-visual-secondary { flex: none; }
  .about-visual-primary img { height: 260px; }
  .about-visual-secondary img { height: 200px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .division-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cards-grid .why-card:nth-child(9), .why-cards-grid .why-card:nth-child(10) { grid-column: auto; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid .cert-card:nth-child(5), .cert-grid .cert-card:nth-child(6) { grid-column: auto; }
  .cert-grid--logos { max-width: 640px; }
  .equipment-grid { grid-template-columns: repeat(2, 1fr); }
  .equipment-grid .equipment-card:nth-child(19) { grid-column: 1 / -1; }
  .qcpd-layout { grid-template-columns: 1fr; gap: var(--space-lg); }
  .qcpd-icons { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-lg); }
  .machinery-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery-grid .g-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  section { padding: var(--space-xl) 0; }
  .applications-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 620px) {
  html { font-size: 15px; }
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.7rem; }
  section { padding: var(--space-lg) 0; }
  .container { padding: 0 1.2rem; }
  .loader-mark { width: min(260px, 72vw); }
  .logo-img { height: 48px; }
  .site-header.scrolled .logo-img { height: 42px; }
  .hero { min-height: 62vh; }
  .hero-content { padding-bottom: 6rem; }
  .hero-content h1 { font-size: 1.75rem; }
  .hero-content .sub { font-size: 0.9rem; }
  .about-heading { font-size: 1.6rem; }
  .about-lead { max-width: 100%; }
  .about-visual-primary img { height: 200px; }
  .about-visual-secondary img { height: 160px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats.hero-stats-3 { grid-template-columns: repeat(3, 1fr); }
  .stat-box { padding: 1.2rem 1rem; }
  .stat-box .num { font-size: 1.7rem; }
  .page-hero h1 { font-size: 2.1rem; }
  .product-grid { grid-template-columns: 1fr; }
  .division-grid, .why-grid, .cert-grid { grid-template-columns: 1fr; }
  .cert-grid .cert-card:nth-child(5), .cert-grid .cert-card:nth-child(6) { grid-column: auto; }
  .cert-grid--logos { max-width: 400px; }
  .why-cards-grid { grid-template-columns: 1fr; }
  .why-cards-grid .why-card:nth-child(9), .why-cards-grid .why-card:nth-child(10) { grid-column: auto; }
  .equipment-grid { grid-template-columns: 1fr; }
  .equipment-grid .equipment-card:nth-child(19) { grid-column: auto; }
  .qcpd-icons { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-md); gap: var(--space-sm); }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .applications-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery-grid .g-item:nth-child(1) { grid-column: span 1; }
  .gallery-grid .g-item:nth-child(4) { grid-column: span 1; }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-md); }
  .cta-banner { padding: var(--space-lg) 1.4rem; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  /* Floating action buttons at tablet size: shrink and keep WhatsApp+arrow
     stacked on the bottom-left, Tidio chatbot on the bottom-right. */
  :root {
    --fab-gap: 12px;
    --fab-left: 1.2rem;
    --arrow-size: 44px;
    --arrow-bottom: 1.2rem;
    --tidio-right: 1rem;
    --tidio-bottom: 1rem;
    --whatsapp-size: 44px;
  }
  .back-to-top, .whatsapp-float { width: var(--arrow-size); height: var(--arrow-size); }
  .whatsapp-float { width: var(--whatsapp-size); height: var(--whatsapp-size); }
  .form-card { padding: var(--space-md); }
}
/* =========================================================
   KCR GLOBAL — MOBILE NAVIGATION FINAL FIX
   Applies only to screens 960px and below
   ========================================================= */

@media (max-width: 960px) {

  /* Prevent horizontal page movement */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    position: relative;
  }

  /* -------------------------------------------------------
     MOBILE NAV PANEL
     ------------------------------------------------------- */

  .main-nav {
    position: fixed !important;
    top: 0 !important;
    right: -100vw !important;

    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;

    padding:
      90px
      24px
      30px
      24px !important;

    background: var(--white) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    box-sizing: border-box !important;

    z-index: 9998 !important;

    transition:
      right 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  /* OPEN STATE */
  .main-nav.open {
    right: 0 !important;
  }

  /* -------------------------------------------------------
     MAIN NAVIGATION LIST
     ------------------------------------------------------- */

  .main-nav > ul {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 0 !important;
  }

  .main-nav > ul > li {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border-bottom: 1px solid var(--border-light) !important;

    box-sizing: border-box !important;
  }

  /* -------------------------------------------------------
     NAV LINKS
     ------------------------------------------------------- */

  .main-nav > ul > li > a {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    min-height: 54px !important;

    padding: 14px 0 !important;
    margin: 0 !important;

    color: var(--navy) !important;

    font-size: 16px !important;
    line-height: 1.4 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;
  }

  /* -------------------------------------------------------
     PRODUCTS / MEGA MENU
     ------------------------------------------------------- */

  .main-nav .mega-menu {
    position: static !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 0 12px 14px !important;

    display: none !important;

    grid-template-columns: 1fr !important;

    background: transparent !important;

    box-shadow: none !important;
    border: 0 !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }

  /* Open Products submenu */
  .main-nav li.has-mega.mega-open > .mega-menu {
    display: grid !important;
  }

  /* Mega columns */
  .main-nav .mega-col {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  /* Product heading */
  .main-nav .mega-col h5 {
    margin: 10px 0 8px !important;

    font-size: 12px !important;
    line-height: 1.4 !important;

    letter-spacing: 0.08em !important;
  }

  /* Product list */
  .main-nav .mega-col ul {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .main-nav .mega-col ul li {
    width: 100% !important;
    max-width: 100% !important;

    border: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Product links */
  .main-nav .mega-col ul li a {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: auto !important;

    padding: 8px 10px 8px 0 !important;

    color: var(--navy) !important;

    font-size: 14px !important;
    line-height: 1.45 !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;

    box-sizing: border-box !important;
  }

  /* Hide promo inside mobile menu */
  .main-nav .mega-promo {
    display: none !important;
  }

  /* -------------------------------------------------------
     HEADER ACTION BUTTONS
     ------------------------------------------------------- */

  .main-nav .header-actions,
  .header-actions {
    width: 100% !important;
    max-width: 100% !important;

    margin-top: 20px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 12px !important;
  }

  .main-nav .header-actions .btn,
  .header-actions .btn {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

  /* -------------------------------------------------------
     MOBILE MENU BUTTON
     ------------------------------------------------------- */

  .nav-toggle {
    position: relative !important;

    z-index: 10000 !important;

    flex-shrink: 0 !important;
  }
}


/* =========================================================
   SMALL MOBILE PHONES
   ========================================================= */

@media (max-width: 620px) {

  .main-nav {
    padding:
      82px
      20px
      24px
      20px !important;
  }

  .main-nav > ul > li > a {
    min-height: 50px !important;

    padding: 13px 0 !important;

    font-size: 15px !important;
  }

  .main-nav .mega-menu {
    padding-left: 12px !important;
  }

  .main-nav .mega-col ul li a {
    padding: 7px 6px 7px 0 !important;

    font-size: 13.5px !important;

    line-height: 1.45 !important;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .main-nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .main-nav > ul > li > a {
    font-size: 14px !important;
  }

  .main-nav .mega-col ul li a {
    font-size: 13px !important;
  }
}