/* =====================================================================
   responsive.css — loaded LAST (after ik-final.css) on every page.
   Goal: clean, modern, fully responsive layout on phones, tablets and
   small laptops without altering the desktop design.
   Breakpoints:  <=1024 (small laptop/tablet)  <=768 (tablet/large phone)
                 <=600 (phone)                 <=400 (small phone)
   ===================================================================== */

/* ---- Global guards: never allow horizontal scroll, keep media fluid ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: rgba(0,119,204,.15); }

/* =====================================================================
   <= 1024px  — tablets & small laptops
   ===================================================================== */
@media (max-width: 1024px) {
  .container { width: 100% !important; max-width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; }
  /* decorative hero illustration shouldn't dominate / overflow */
  .bannerbox .ik-hero-anim { max-width: 46%; right: 0; }
  .bannerbox .banner_element_1 { max-width: 120px; }
}

/* =====================================================================
   <= 768px  — phones & small tablets  (the big rework)
   ===================================================================== */
@media (max-width: 768px) {

  /* ---------- Hero / banner: pin slide 1, caption in natural flow ---------- */
  .bannerbox { height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: hidden; position: relative; }
  /* drop the busy hero decorations (chip SVG, neural canvas, cloud, greeting) */
  .bannerbox .ik-hero-anim,
  .bannerbox .banner_element_1,
  .ik-ai-net,
  .ik-ai-tip,
  .ik-hero-eyebrow { display: none !important; }
  .bannerbox::after { display: none !important; }
  .bannercu { position: relative !important; z-index: 5 !important; width: 100% !important; height: auto !important; min-height: 0 !important; }
  .bannercu .pav-slideshow,
  .bannercu .pavcontentslider,
  .bannercu .carousel,
  .bannercu .carousel-inner { height: auto !important; min-height: 0 !important; width: 100% !important; }
  /* pin the first slide visible — the cycling carousel hides the caption on mobile */
  .bannercu .carousel-inner > .item { display: none !important; }
  .bannercu .carousel-inner > .item:first-child {
    display: block !important; opacity: 1 !important; height: auto !important; min-height: 0 !important; left: 0 !important;
  }
  .bannercu .carousel-inner > .item:first-child > img { display: none !important; }
  .bannercu .carousel-inner > .item:first-child .bannerboxcont,
  .bannercu .carousel-inner > .item:first-child .bannerboxcont.pav-caption {
    position: relative !important; z-index: 5 !important;
    display: flex !important; flex-direction: column; justify-content: center; align-items: center;
    visibility: visible !important; opacity: 1 !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important; width: 100% !important; height: auto !important;
    padding: 44px 22px !important; box-sizing: border-box; text-align: center;
  }
  .bannerboxcont1 { transform: none !important; max-width: 100% !important; margin: 0 auto; }
  .banner_hd {
    font-size: 26px !important; line-height: 1.25 !important;
    padding: 0 !important; margin: 0 0 12px !important;
  }
  .banner_cont {
    font-size: 15px !important; line-height: 1.6 !important;
    height: auto !important; overflow: visible !important;
    width: 100% !important; max-width: 520px;
    padding: 0 !important; margin: 0 auto 20px !important;
  }
  .main_btn { text-align: center; }
  .main_btn a { display: inline-flex !important; align-items: center; gap: 8px; width: auto; }
  .ban_but { position: relative !important; bottom: auto !important; left: auto !important; width: 100% !important; margin: 4px 0 0 !important; text-align: center; }
  .ban_but .carousel-indicators { position: static !important; justify-content: center; display: flex; }

  /* ---------- "What We Do" tabs section ---------- */
  .multi_tabs { display: block !important; grid-template-columns: 1fr !important; }
  ul.tabs {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 4px 2px 10px !important;
    margin: 0 0 16px !important;
    scrollbar-width: none;
  }
  ul.tabs::-webkit-scrollbar { display: none; }
  ul.tabs li {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
    margin: 0 !important;
  }
  .tab_content {
    width: 100% !important;
    padding: 18px !important;
    box-sizing: border-box;
  }
  .tab_content img { max-width: 100%; height: auto; }

  /* ---------- Generic card / multi-column grids -> stack ---------- */
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  [class*="col-md-"], [class*="col-sm-"], [class*="col-lg-"] {
    width: 100% !important; float: none !important;
  }

  /* ---------- Stats / counters ---------- */
  .counter, .counter_box, .count_box { text-align: center; }

  /* ---------- Client logos ---------- */
  .clients ul, .client_logos { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .clients ul li { width: 40% !important; text-align: center; }

  /* ---------- Footer: stack columns ---------- */
  footer.main_Footer .main_Footer_in,
  footer.main_Footer .row { display: block !important; }
  footer.main_Footer [class*="col-"] { width: 100% !important; margin-bottom: 26px; text-align: center; }
  footer.main_Footer .social { justify-content: center; display: flex; gap: 10px; }
  footer.main_Footer .mFooter1 { text-align: center; }
  footer.main_Footer .copy { flex-direction: column; gap: 8px; text-align: center; }

  /* ---------- Forms (contact / careers) ---------- */
  form input, form select, form textarea, .form-control,
  input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;       /* prevents iOS zoom-on-focus */
  }
  .g-recaptcha { transform: scale(0.86); transform-origin: 0 0; }

  /* ---------- Section rhythm: tighter vertical padding on phones ---------- */
  section, .section, .section1 { padding-top: 40px !important; padding-bottom: 40px !important; }
  h1 { font-size: 28px !important; line-height: 1.25 !important; }
  h2 { font-size: 23px !important; line-height: 1.3 !important; }
  h3 { font-size: 19px !important; }

  /* ---------- Inner page banners ---------- */
  .innerbanner { padding: 80px 0 30px !important; }
  .innerbanner_in { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* ---------- AI marquee a touch smaller ---------- */
  .ik-mq-item { font-size: 12.5px; padding: 0 16px; }
}

/* =====================================================================
   <= 600px  — phones
   ===================================================================== */
@media (max-width: 600px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .banner_hd { font-size: 23px !important; }
  .clients ul li { width: 46% !important; }
  /* off-canvas mobile menu: make it comfortable */
  .cart_bx1 { width: 84% !important; max-width: 330px; }
  .cart_bx1 ul li a { font-size: 16px !important; padding: 13px 18px !important; }
}

/* =====================================================================
   <= 400px  — small phones
   ===================================================================== */
@media (max-width: 400px) {
  .banner_hd { font-size: 21px !important; }
  .banner_cont { font-size: 14px !important; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  .tab_content { padding: 14px !important; }
  .clients ul li { width: 100% !important; }
}

/* =====================================================================
   AI AGENT ("Ask AI") — responsive chat widget
   ===================================================================== */
@media (max-width: 768px) {
  /* launcher: clean round FAB */
  .ik-ai-trigger { right: 14px !important; bottom: 14px !important; gap: 4px !important; }
  .ik-ai-trigger-label { display: none !important; }
  .ik-ai-trigger-btn { width: 54px !important; height: 54px !important; }

  /* panel: full-width bottom sheet, fills the screen cleanly */
  .ik-ai-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: 88vh !important; max-height: 88vh !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-sizing: border-box !important;
    display: flex !important; flex-direction: column !important;
  }
  /* hide the floating launcher while the chat is open (avoids overlapping the input) */
  body:has(.ik-ai-panel.ik-open) .ik-ai-trigger { display: none !important; }

  /* internal layout: header + input fixed, messages scroll */
  .ik-ai-header { flex: 0 0 auto !important; padding: 16px 14px 13px !important; }
  .ik-ai-header-info strong { font-size: 15px !important; }
  .ik-ai-messages { flex: 1 1 auto !important; min-height: 0 !important; padding: 14px 12px !important; overflow-y: auto !important; }
  .ik-msg { max-width: 88% !important; }
  .ik-ai-suggestions { flex: 0 0 auto !important; padding: 8px 12px !important; }
  .ik-ai-input-row { flex: 0 0 auto !important; padding: 10px 12px !important; gap: 8px !important; }
  .ik-ai-input, .ik-ai-panel input, .ik-ai-panel textarea { font-size: 16px !important; width: 100% !important; box-sizing: border-box !important; }
  .ik-ai-footer { flex: 0 0 auto !important; }
}
@media (max-width: 400px) {
  .ik-ai-panel { height: 90vh !important; max-height: 90vh !important; }
  .ik-ai-trigger-btn { width: 50px !important; height: 50px !important; }
}


/* =====================================================================
   EXTRA POLISH — small-screen niceties
   ===================================================================== */
@media (max-width: 768px) {
  /* wide tables scroll instead of breaking layout */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* keep any embedded media fluid */
  .tab_content, .innerbanner_in, .main_Footer_in { max-width: 100%; }
  /* comfortable tap targets for nav + buttons */
  .cart_bx1 ul li a, .main_btn a, .ik-ai-chip, .ik-ai-sugg { min-height: 40px; }
  /* AI capability ticker: keep on one tidy line */
  .ik-ai-marquee { padding: 10px 0 !important; }
  /* section headings never overflow */
  .section1 h2, .section h2, h2, h3 { word-wrap: break-word; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  /* tab list: comfortable horizontal scroll on small phones */
  .section1 ul.tabs { flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important; }
  .section1 ul.tabs li { flex: 0 0 auto !important; width: auto !important; }
}