/* =============================================================
   The Code Kraft — Responsive stylesheet
   Loaded AFTER styles.css so these rules win at small viewports.
   Breakpoints:
     ≤1199px  large tablet / small laptop
     ≤991px   tablet (navbar collapses here — Bootstrap lg)
     ≤767px   mobile landscape / large phone
     ≤575px   phone
     ≤400px   small phone
   ============================================================= */

/* Global safety — never let media overflow horizontally */
img, svg, video, iframe { max-width: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }

/* =========================================================
   ≤ 1199px — large tablet / small laptop
   ========================================================= */
@media (max-width: 1199px) {
  .section-padding { padding: 90px 0; }
  .hero { padding: 180px 0 110px; }
}

/* =========================================================
   ≤ 991px — TABLET (navbar collapses)
   ========================================================= */
@media (max-width: 991px) {

  /* ---- Navbar / mobile menu ---- */
  .navbar { padding: 10px 0; }
  .brand-logo { height: 44px; }

  /* Collapsed menu panel */
  .navbar-collapse {
    margin-top: 12px;
    padding: 12px 4px 6px;
    border-top: 1px solid #eef0f3;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .navbar-nav.mx-auto { margin: 0 !important; }
  .navbar-nav .nav-item { width: 100%; }
  .nav-link {
    margin: 0;
    padding: 12px 4px;
    border-bottom: 1px solid #f3f4f6;
  }
  .navbar-toggler { border: none; padding: 4px 6px; }
  .navbar-toggler:focus { box-shadow: none; }

  /* Services mega menu inside collapsed nav */
  .navbar .mega-menu {
    box-shadow: none;
    padding: 6px 0 2px;
    margin-top: 4px;
  }
  .mega-head { padding: 4px 8px 10px; }
  .mega-grid { gap: 2px; }
  .mega-item { padding: 10px 10px; }
  .nav-cta {
    margin: 14px 4px 4px;
    align-self: stretch;
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
  }

  /* ---- Stop forced-nowrap text from overflowing the viewport ---- */
  .text-nowrap { white-space: normal !important; }
  .feature-list li.text-nowrap { white-space: normal !important; }
  .hero h1 .hero-line1 { white-space: normal; }

  /* ---- Spacing ---- */
  .section-padding { padding: 80px 0; }
  .hero { padding: 150px 0 80px; }
  .page-hero { padding: 140px 0 60px; }

  /* ---- Heavy decorative visuals ---- */
  .provide-visual { min-height: 360px; margin-top: 10px; }
  .provide-screen { width: 190px; height: 190px; font-size: 88px; }
  .tech-bubble { width: 54px; height: 54px; font-size: 20px; }

  .about-img { padding: 50px; font-size: 140px; border-radius: 24px; }

  .newsletter-visual { min-height: 300px; padding: 40px; }
  .newsletter-icon-main { font-size: 140px; }

  /* ---- Cards ---- */
  .value-card,
  .pricing-card { padding: 36px 28px; }

  /* ---- Footer ---- */
  .footer-wave { height: 140px; }
  footer h4 { margin-bottom: 22px; }
  .footer-brand-text { max-width: none; }
}

/* =========================================================
   ≤ 767px — MOBILE
   ========================================================= */
@media (max-width: 767px) {

  body { font-size: 15.5px; }

  /* ---- Hero ---- */
  .hero { padding: 130px 0 56px; }
  .hero h1 .hero-line1 { white-space: normal; }   /* stop clipping on phones */
  .hero p { font-size: 16px; }
  .hero-buttons { width: 100%; }
  .hero-buttons .btn-dark-c,
  .hero-buttons .btn-primary-c,
  .hero-buttons .btn-outline-c { width: 100%; justify-content: center; }

  /* ---- Inner page hero ---- */
  .page-hero { padding: 120px 0 50px; }
  .page-hero-text { font-size: 16px; }

  /* ---- Sections ---- */
  .section-padding { padding: 60px 0; }
  .section-title { margin-bottom: 14px; }

  /* ---- Provide visual: shrink so floating bubbles don't collide ---- */
  .provide-visual { min-height: 300px; }
  .provide-screen { width: 160px; height: 160px; font-size: 72px; border-radius: 26px; }
  .tech-bubble { width: 46px; height: 46px; font-size: 16px; }
  .tech-bubble.b-247, .tech-bubble.b-cpp { font-size: 13px; }

  /* ---- About / newsletter visuals ---- */
  .about-img { padding: 40px; font-size: 110px; }
  .newsletter-visual { padding: 32px; min-height: 240px; border-radius: 24px; }
  .newsletter-icon-main { font-size: 110px; }
  .newsletter-decor { display: none; }

  /* ---- Cards & forms ---- */
  .service-card { padding: 30px 24px; }
  .value-card,
  .pricing-card { padding: 32px 24px; }
  .testimonial-card { padding: 28px 24px; }
  .contact-form { padding: 32px 22px; }
  .contact-field input,
  .contact-field textarea { padding: 16px 22px; font-size: 15px; }
  .contact-field input { padding-right: 48px; }

  /* ---- Counters / stats spacing ---- */
  .counter-box { margin-bottom: 26px; }

  /* ---- Footer ---- */
  .footer-wave { height: 90px; }
  .footer-inner { padding: 20px 0 40px; }
  footer h4 { margin-bottom: 18px; margin-top: 8px; }
  .footer-logo { font-size: 26px; }

  /* ---- Back to top ---- */
  .back-to-top { bottom: 18px; right: 18px; width: 42px; height: 42px; font-size: 16px; }
}

/* =========================================================
   ≤ 575px — PHONE
   ========================================================= */
@media (max-width: 575px) {

  .container { padding-left: 18px; padding-right: 18px; }

  .hero { padding: 120px 0 48px; }
  .page-hero { padding: 112px 0 44px; }
  .section-padding { padding: 50px 0; }

  /* Provide visual smallest */
  .provide-visual { min-height: 270px; }
  .provide-screen { width: 140px; height: 140px; font-size: 60px; }
  .tech-bubble { width: 42px; height: 42px; }

  .about-img { padding: 32px; font-size: 90px; border-radius: 20px; }

  /* Pricing emphasis card shouldn't scale up over others on mobile */
  .pricing-card.featured { transform: none; }

  /* Mega menu titles can wrap on tiny screens */
  .mega-title { white-space: normal; }

  /* Newsletter button full width */
  .newsletter-form button { width: 100%; justify-content: center; }
}

/* =========================================================
   ≤ 400px — SMALL PHONE
   ========================================================= */
@media (max-width: 400px) {
  .brand-logo { height: 34px; }
  .hero h1 { font-size: 30px; }
  .section-title { font-size: 25px; }
  .provide-screen { width: 120px; height: 120px; font-size: 52px; }
  .tech-bubble { width: 38px; height: 38px; font-size: 14px; }
}

/* =========================================================
   Landscape phones — keep fixed navbar from eating the hero
   ========================================================= */
@media (max-width: 991px) and (orientation: landscape) and (max-height: 500px) {
  .hero { padding: 110px 0 50px; }
  .page-hero { padding: 100px 0 40px; }
  .navbar-collapse { max-height: calc(100vh - 70px); }
}