/* ==================================================
   MOBILE RESPONSIVE OVERRIDES (<= 767.98px)
   Desktop styles are untouched.
   ================================================== */

@media (max-width: 767.98px) {

  /* ---------- Global guards: prevent horizontal overflow ---------- */
  html, body { overflow-x: hidden; }

  /* ---------- NAVBAR ---------- */
  .navbar-custom .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    margin: 0.75rem -12px 0;
    padding: 1rem 1.25rem 1.25rem;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  }
  .navbar-custom .navbar-collapse .navbar-nav {
    width: 100%;
    align-items: stretch !important;
    gap: 0.25rem !important;
  }
  .navbar-custom .navbar-collapse .nav-link {
    padding: 0.75rem 0.25rem !important;
    font-size: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  .navbar-custom .navbar-collapse .btn-primary-custom {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.75rem;
  }

  /* ---------- HERO ---------- */
  .hero-section { padding: 110px 0 60px !important; min-height: auto !important; }
  .hero-title { font-size: 2rem !important; line-height: 1.15 !important; }
  .hero-content h2.hero-title.fs-3 { font-size: 1.15rem !important; }
  .hero-subtitle { font-size: 1rem; }

  /* Constrain mockup area so floating cards do not push the page wider */
  .hero-image-wrapper {
    height: 380px;
    transform: scale(0.85);
    transform-origin: center top;
    max-width: 100%;
  }
  .hero-image-wrapper .hero-dashboard { transform: none !important; }
  .floating-card-1 { left: 0 !important; top: 5% !important; }
  .floating-card-2 { right: 0 !important; bottom: 0 !important; width: 130px !important; height: 260px !important; }
  .floating-card-3 { right: 0 !important; top: -2% !important; font-size: 0.7rem; }
  .floating-card-4 { left: 0 !important; bottom: 5% !important; }

  /* ---------- SERVICES (already col-12 via Bootstrap, just tighten spacing) ---------- */
  .service-card-content { padding: 1.75rem !important; }

  /* ---------- FEATURED PROJECTS ---------- */
  #projects .project-img { height: 280px !important; padding: 1rem !important; }
  #projects .premium-mockup-mobile { width: 90px !important; height: 180px !important; }

  /* ---------- WHY DIGIKREF (Bento) ---------- */
  /* Override the bento single-column default for the four stat cards: 2x2 grid */
  .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
  .bento-large {
    grid-column: span 2 !important;
  }
  .bento-card.premium-card { padding: 1.5rem !important; }
  .bento-large h2 { font-size: 1.6rem !important; }
  .bento-card .fs-2 { font-size: 1.6rem !important; }
  .icon-box-bento { width: 48px !important; height: 48px !important; margin-bottom: 1rem !important; }
  .icon-box-bento svg { width: 22px; height: 22px; }

  /* ---------- HOW WE WORK ---------- */
  .process-timeline .row { row-gap: 1.5rem; }
  .process-step { text-align: left !important; display: flex; align-items: flex-start; gap: 1rem; }
  .process-step .process-icon { margin-bottom: 0 !important; flex-shrink: 0; width: 56px !important; height: 56px !important; }
  .process-step h5 { margin-bottom: 0.25rem !important; }
  .process-step p { padding: 0 !important; text-align: left; }

  /* ---------- CLIENTS MARQUEE ---------- */
  .marquee-item { font-size: 1.1rem !important; padding: 0 1.25rem !important; }

  /* ---------- FAQ ---------- */
  #faq .accordion-button { padding: 1rem 1.25rem !important; font-size: 0.95rem; }
  #faq .accordion-body { padding-left: 1.25rem !important; padding-right: 1.25rem !important; margin-left: 1.25rem !important; margin-right: 1.25rem !important; }

  /* ---------- CTA ---------- */
  #contact .cta-premium-card { min-height: auto !important; padding: 2.5rem 0; border-radius: 1.25rem !important; }
  #contact h2.display-4 { font-size: 1.75rem !important; }
  #contact p.fs-5 { font-size: 1rem !important; }
  #contact .d-flex.flex-column.flex-sm-row { flex-direction: column !important; align-items: stretch !important; }
  #contact .cta-btn-primary,
  #contact .btn-outline-light {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1rem !important;
    font-size: 1rem !important;
  }

  /* ---------- FOOTER ---------- */
  footer .row.g-5 > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left;
  }
  footer .col-lg-4 { padding-right: 12px !important; }
  footer .row.align-items-center { text-align: center; }
  footer .row.align-items-center .col-md-6 { text-align: center !important; }

  /* ---------- ABOUT / PROJECTS pages page-header tweaks ---------- */
  .section-padding { padding-top: 3rem; padding-bottom: 3rem; }
  .section-header h2 { font-size: 1.75rem !important; }

  /* ---------- Modals ---------- */
  .inquiry-modal-card { padding: 24px !important; border-radius: 16px !important; }
}

/* Very small phones */
@media (max-width: 380px) {
  .hero-title { font-size: 1.75rem !important; }
  .hero-image-wrapper { transform: scale(0.72); height: 340px; }
  .bento-grid { grid-template-columns: 1fr !important; }
  .bento-large { grid-column: span 1 !important; }
}