/* ============================================================
   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: 0px;
  }
}

/* ---------- 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;
  }
}




/* ======================================================================
   ABOUT PAGE — responsive additions (append to assets/css/user.css)
   Same philosophy as the homepage: columns keep their desktop side-by-side
   proportion on mobile too (no stacking). Instead of hiding/reflowing
   content at breakpoints, text and spacing scale fluidly with clamp()
   so nothing overflows its column on small screens.
   ====================================================================== */

.btn{
  font-size: clamp(0.6rem, 1.4vw, 0.9rem);
  padding: clamp(0.4rem, 1vw, 0.8rem) clamp(0.8rem, 2vw, 1.5rem);
  border-radius: 0;
}


.about-section img {
  max-width: 100%;
  height: auto;
}

/* ---- Hero (image + intro text) ---- */
.about-eyebrow {
  font-size: clamp(0.6rem, 1.6vw, 1rem);
}

.about-hero-title {
  font-size: clamp(1.1rem, 3.6vw, 2.5rem);
  line-height: 1.2;
}

.about-hero-text {
  font-size: clamp(0.65rem, 1.6vw, 1rem);
  line-height: 1.5;
}

/* ---- Stats row (500+ / 150+ / 6+) ---- */
.about-stat-number {
  font-size: clamp(1.1rem, 3.2vw, 2rem);
  margin-bottom: 0;
}

.about-stat-label {
  font-size: clamp(0.6rem, 1.5vw, 1rem);
  margin-bottom: 0;
}

/* ---- Section headings shared across About sections ---- */
.about-section-title,
.about-section-title-dark {
  font-size: clamp(1.25rem, 4vw, 2.5rem);
}

.about-section-subtitle {
  font-size: clamp(0.7rem, 1.6vw, 1rem);
}

/* ---- Meet the Team (image + bio) ---- */
.team-name {
  font-size: clamp(1rem, 3vw, 1.75rem);
}

.team-role {
  font-size: clamp(0.65rem, 1.6vw, 1rem);
}

.team-bio {
  font-size: clamp(0.65rem, 1.5vw, 1rem);
  line-height: 1.5;
}

.team-links .btn {
  font-size: clamp(0.6rem, 1.4vw, 0.9rem);
  padding: 0.4rem 0.8rem;
}

/* ---- Why Clients Choose Us (4-up, stays 4-up at every width) ---- */
.why-choose-card {
  height: 100%;
}

.why-number {
  font-size: clamp(1.1rem, 4vw, 3rem);
  margin-bottom: 0.25rem;
}

.why-title {
  font-size: clamp(0.6rem, 2vw, 1.25rem);
  margin-bottom: 0.4rem;
}

.why-text {
  font-size: clamp(0.55rem, 1.4vw, 1rem);
  line-height: 1.4;
  margin-bottom: 0;
}

/* ---- Testimonials (3-up, stays 3-up at every width) ---- */
.testimonial-avatar {
  width: clamp(38px, 8vw, 80px);
  height: clamp(38px, 8vw, 80px);
  object-fit: cover;
}

.testimonial-name {
  font-size: clamp(0.7rem, 2vw, 1.25rem);
  margin-bottom: 0.2rem;
}

.testimonial-role {
  font-size: clamp(0.55rem, 1.4vw, 1rem);
  margin-bottom: 0.5rem;
}

.testimonial-quote {
  font-size: clamp(0.55rem, 1.4vw, 1rem);
  line-height: 1.4;
  margin-bottom: 0;
}

/* ---- Safety net: prevent any accidental horizontal scroll on mobile ---- */
@media (max-width: 575.98px) {
  .about-section .container {
    overflow-x: hidden;
  }
}


/* ======================================================================
   BLOG DETAILS PAGE — responsive additions (append to assets/css/user.css)
   Same approach as about.html: grid blocks keep their desktop proportion
   on mobile (related posts stay 3-across, author box stays side-by-side)
   using clamp() instead of stacking. The long-form article text is the
   one exception — it scales more gently so it stays comfortably readable
   at every width instead of shrinking like the card/grid elements.
   ====================================================================== */

/* ---- Post header ---- */
.post-back-link {
  font-size: clamp(0.65rem, 1.6vw, 0.9rem);
}

.post-meta-text,
.post-author-line {
  font-size: clamp(0.6rem, 1.5vw, 0.9rem);
}

.post-category-badge {
  font-size: clamp(0.55rem, 1.4vw, 0.85rem);
}

.post-title {
  font-size: clamp(1.3rem, 4.5vw, 3rem);
  line-height: 1.2;
}

.post-featured-img {
  max-height: 480px;
  object-fit: cover;
}

/* ---- Article body: comfortable reading size at every width ---- */
.post-body {
  max-width: 100%;
}

.post-paragraph {
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  line-height: 1.7;
}

.post-subheading {
  font-size: clamp(1.05rem, 2.5vw, 1.6rem);
  margin-top: 1.5rem;
}

.post-quote {
  border-left: 3px solid var(--bs-warning, #f0a500);
  padding: 0.75rem 1.25rem;
  font-style: italic;
  font-size: clamp(0.85rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  margin: 1.5rem 0;
}

.post-break-img {
  width: 100%;
  height: clamp(120px, 22vw, 260px);
  object-fit: cover;
}

.post-tags {
  font-size: clamp(0.55rem, 1.3vw, 0.8rem);
}

.post-tag {
  white-space: nowrap;
}

/* ---- Author box: stays side-by-side (image + bio) at every width ---- */
.author-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.author-name {
  font-size: clamp(0.8rem, 2vw, 1.25rem);
}

.author-role {
  font-size: clamp(0.6rem, 1.4vw, 0.9rem);
}

.author-bio {
  font-size: clamp(0.65rem, 1.3vw, 0.9rem);
  line-height: 1.5;
}

/* ---- Related posts: stays 3-across at every width ---- */
.related-title {
  font-size: clamp(1.1rem, 3.5vw, 2.25rem);
}

.related-card img {
  width: 100%;
  height: clamp(70px, 16vw, 220px);
  object-fit: cover;
}

.related-meta-row {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.related-date,
.related-badge {
  font-size: clamp(0.5rem, 1.2vw, 0.85rem);
}

.related-badge {
  padding: 0.25rem 0.4rem !important;
}

.related-post-title {
  font-size: clamp(0.6rem, 1.8vw, 1.1rem);
  line-height: 1.35;
}

.related-read-more {
  font-size: clamp(0.55rem, 1.3vw, 0.9rem);
}

.related-read-more img {
  width: clamp(14px, 3vw, 22px);
  height: auto;
}

/* ---- Safety net ---- */
@media (max-width: 575.98px) {
  .post-footer-row {
    flex-direction: column;
    align-items: flex-start !important;
  }
}


/* ===============================================
   Portfolio Page Additions
   Append this to assets/css/user.css
   (Do NOT replace existing user.css content)
=================================================== */

/* Fluid typography for new sections — scales instead of stacking/breaking */
.fs-cat        { font-size: clamp(0.65rem, 1.8vw, 1.05rem); }
.fs-body       { font-size: clamp(0.7rem, 1.6vw, 1rem); line-height: 1.5; }
.fs-project    { font-size: clamp(1rem, 3vw, 2rem); }
.fs-step       { font-size: clamp(1.25rem, 4vw, 2.5rem); }
.fs-step-title { font-size: clamp(0.8rem, 2vw, 1.25rem); }
.fs-cta        { font-size: clamp(1.75rem, 8vw, 5rem); }

/* Prevent flex-nowrap columns from overflowing on very small screens */
section .row.flex-nowrap {
  min-width: 0;
}
section .row.flex-nowrap > [class^="col-"],
section .row.flex-nowrap > [class*=" col-"] {
  min-width: 0;
}

/* Tighter gaps + smaller radius on small screens so proportions stay clean */
@media (max-width: 576px) {
  section .row.flex-nowrap {
    gap: 0.4rem !important;
  }
  section .row.flex-nowrap img {
    border-radius: 6px;
  }
  .portfolio-cat-row .position-absolute {
    padding: 0.4rem !important;
  }
}

/* Featured Project + Behind The Scenes images: keep aspect ratio controlled
   so they don't blow out section height on narrow screens */
section .row.flex-nowrap img.rounded-2 {
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* CTA button padding scale-down on very small screens */
@media (max-width: 400px) {
  .fs-cta { line-height: 1.05; }
}