/* ============================================================
   BLACKPAGE STUDIO — MOBILE RESPONSIVE FIX
   Ye poori file assets/css/user.css ke andar paste karni hai.
   ============================================================ */

/* ---------- Tablet & Mobile (below 992px) ---------- */
@media (max-width: 991.98px) {

  /* Shrink the decorative blurred circles so they don't
     look oversized next to the smaller mobile image */
  .img-circle,
  .img-circle-2 {
    padding: 1.5rem !important;
  }

  /* Paragraph text sizing */
  .fs-2 {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
  }

  .text-300 {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }
}

/* ---------- Small phones (below 576px) ---------- */
@media (max-width: 575.98px) {

  h1.fs-4 {
    font-size: 1.6rem !important;
    line-height: 1.35 !important;
  }

  .img-circle,
  .img-circle-2 {
    padding: 1rem !important;
  }

  .fs-2 {
    font-size: 1.05rem !important;
  }

  /* Give the two small side images a bit of breathing room */
  .col-6.col-md-3.col-lg-2 img {
    border-radius: 6px;
  }
}

/* ---------- Footer spacing on mobile ---------- */
@media (max-width: 767.98px) {
  .bg-footer-black .col-md-6 {
    text-align: center !important;
  }

  .d-flex.gap-2.flex-wrap {
    justify-content: center !important;
    gap: 0.75rem 1rem !important;
  }
}