/* ===========================================================
   Biply Site — Mobile Responsiveness Fixes
   Loaded after main.css to override layout/padding issues
   on small screens. Only targets ≤ 991px breakpoints.
   =========================================================== */

/* ── General overflow / text ──────────────────────────────── */
@media (max-width: 991.98px) {
  body {
    overflow-x: hidden;
  }
  h1, .h1 { font-size: 42px !important; }
  h2, .h2 { font-size: 36px !important; }
  h3, .h3 { font-size: 28px !important; }
  h4, .h4 { font-size: 24px !important; }

  /* Reduce massive padding-tops on mobile */
  .pt-150, .pt-140, .pt-130, .pt-120, .pt-110, .pt-100 {
    padding-top: 60px !important;
  }
  .pb-150, .pb-140, .pb-130, .pb-120, .pb-110, .pb-100 {
    padding-bottom: 60px !important;
  }
  .pt-80 { padding-top: 48px !important; }
  .pb-80 { padding-bottom: 48px !important; }
  .pt-50 { padding-top: 32px !important; }
  .pb-50 { padding-bottom: 32px !important; }
  .pt-40 { padding-top: 28px !important; }
  .pb-40 { padding-bottom: 28px !important; }
  .mb-60 { margin-bottom: 32px !important; }
  .mb-40 { margin-bottom: 24px !important; }

  /* Hero spacing */
  .at-hero-spacing {
    padding-top: 250px !important;
    padding-bottom: 60px !important;
  }
  .alt-hero-spacing {
    padding-top: 60px !important;
  }

  /* Home 4 hero cards: stack instead of grid */
  .sec-1-home-4__cards {
    grid-template-columns: 1fr !important;
  }
  .sec-1-home-4__card {
    min-height: auto !important;
  }
}

/* ── Small phones (≤ 574px) ───────────────────────────────── */
@media (max-width: 574.98px) {
  h1, .h1 { font-size: 32px !important; }
  h2, .h2 { font-size: 28px !important; }
  h3, .h3 { font-size: 24px !important; }

  .pt-150, .pt-140, .pt-130, .pt-120, .pt-110, .pt-100 {
    padding-top: 40px !important;
  }
  .pb-150, .pb-140, .pb-130, .pb-120, .pb-110, .pb-100 {
    padding-bottom: 40px !important;
  }

  /* Footer wordmark responsive */
  .footer-4-connect-title {
    font-size: 38px !important;
    white-space: normal !important;
    word-break: break-word;
  }
  .fz-200 {
    font-size: 38px !important;
  }

  /* Home hero: stack image & text */
  .hero-single {
    flex-direction: column !important;
    text-align: center;
  }
  .hero-single__image {
    width: 100% !important;
    max-width: 280px;
    margin: 0 auto;
  }

  /* Service cards on home page */
  .sec-1-services .row > div {
    width: 100% !important;
  }

  /* Pricing cards / feature lists */
  .home-2-pricing-card__body {
    padding: 24px !important;
  }

  /* Header fixes */
  .at-header-logo p {
    font-size: 18px !important;
  }

  /* NoviCRM screenshots */
  .novicrm-screenshot img,
  .AppScreenshot img {
    width: 100% !important;
    height: auto !important;
  }

  /* Fix overflow on small screens */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Stack feature groups vertically in footer */
  .alt-footer-link-item ul {
    columns: 1 !important;
  }

  /* Biply® wordmark */
  .fz-80 {
    font-size: 20px !important;
  }

  /* Make buttons full-width on mobile */
  .at-btn.w-100-sm {
    width: 100%;
  }

  /* Fix overlapping in topbar */
  .topbar .d-flex {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Hide extra large decorative elements */
  .hero-decorative-bg,
  .hero-bg-shape {
    display: none !important;
  }
}

/* ── Tablet (576px - 991px) ───────────────────────────────── */
@media (min-width: 576px) and (max-width: 991.98px) {
  .footer-4-connect-title {
    font-size: 60px !important;
  }
  .fz-200 {
    font-size: 60px !important;
  }
}

/* ── Fix container max-width on smaller desktops ─────────── */
@media (max-width: 1199.98px) {
  .container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .container-2200 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Home page hero image stacking fix ───────────────────── */
@media (max-width: 767.98px) {
  .sec-1-home-4 .row.align-items-center {
    flex-direction: column-reverse;
  }
  .client-capsule-wrapper {
    margin-top: 0 !important;
    height: 400px !important;
  }
}

/* ── NoviCRM page specific fixes ─────────────────────────── */
@media (max-width: 767.98px) {
  .novicrm-feature-grid {
    grid-template-columns: 1fr !important;
  }
  .novicrm-pricing-card {
    max-width: 100% !important;
  }
}

/* ── Products page fixes ─────────────────────────────────── */
@media (max-width: 767.98px) {
  .products-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Blog page fixes ─────────────────────────────────────── */
@media (max-width: 767.98px) {
  .blog-card-2 {
    flex-direction: column !important;
  }
  .blog-card-2__thumb {
    width: 100% !important;
  }
}

/* ── Contact page ────────────────────────────────────────── */
@media (max-width: 574.98px) {
  .sec-4-about-form__actions {
    flex-direction: column;
  }
  .sec-4-about-form__actions .at-btn {
    width: 100%;
  }
}

/* ── Portfolio page ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  .card_case__studies-card {
    flex-direction: column !important;
  }
}