/* ================================================================
   SITE-WIDE (ALL BREAKPOINTS) — NAV ACTIVE-STATE COLOR
   Not a mobile-only fix — applies everywhere, unlike the rest of
   this file. Webflow's own library CSS (webflow.css) hardcodes the
   current-page nav link and current dropdown-list link to blue
   (#0082f3). These rules override that to the site's brand green
   and add a green state for an open dropdown's toggle label.
   Inactive nav links are untouched, so they stay white as before.
   ================================================================ */
.navbar-link.w--current {
  color: var(--brand-color) !important;
}

.w-dropdown-link.w--current {
  color: var(--brand-color) !important;
}

.w-dropdown-toggle.w--open .text-block-34,
.w-dropdown-toggle.w--open .bold-text-10 {
  color: var(--brand-color) !important;
}

/* ================================================================
   MEDIA INITIATION — SITE-WIDE MOBILE FIX
   Applies ONLY at max-width:767px and 479px.
   ZERO changes to desktop/tablet (991px+) — confirmed safe.
   ================================================================
   ROOT CAUSES FIXED:
   1. .display-inline (hero h1) was display:inline — overflows
      symmetrically and gets clipped by ancestor overflow:clip
   2. Many ancestor containers use overflow:clip at mobile,
      visually cutting any element that overflows even slightly
   3. Several headings keep huge negative margins/font-sizes
      on mobile with no proper scaling
   ================================================================ */

/* ================================================================
   AGENCY PAGE — Carousel card fixes
   1. Card height collapses to content (no empty gap)
   2. Arrows pinned to bottom-center INSIDE the gray card, side by side
   3. Uniform text size across all 4 slides
   ================================================================ */

/* Slide card: enough padding at bottom for the arrows */
.reviews-slide {
  padding: 2.5rem 2rem 5rem !important;
  gap: 1rem !important;
  justify-content: flex-start !important;
}

/* Slider & mask: auto height so no empty gap */
.reviews-slider {
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
}

.mask-2 {
  height: auto !important;
  min-height: 0 !important;
}

/* Icon size */
.image-6 {
  width: 56px !important;
  height: auto !important;
  margin-bottom: 0.25rem !important;
}

/* Uniform heading size across ALL 4 slides */
.heading-15, .heading-16,
.heading-17, .heading-18 {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
  text-align: center !important;
}

/* Uniform paragraph size across ALL 4 slides */
.paragraph-17, .paragraph-18, .paragraph-19,
.heading-16 {
  font-size: clamp(0.9rem, 1.4vw, 1.05rem) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* ── ARROWS: pinned to the bottom-center of the card, side by side ──
   .reviews-slider hugs .mask-2 (the visible card) tightly once the
   arrows are taken out of flow, so absolute-positioning them against
   .reviews-slider anchors them to the bottom edge of the card itself. */
.reviews-slider {
  position: relative !important;
}

.reviews-arrow {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: 2.6rem !important;
  height: 2.6rem !important;
  bottom: 1.5rem !important;
}

/* Left arrow: just left of centre */
.reviews-arrow.left {
  left: calc(50% - 3rem) !important;
  right: auto !important;
  bottom: 1.5rem !important;
}

/* Right arrow: just right of centre */
.reviews-arrow.right {
  left: calc(50% + 0.4rem) !important;
  right: auto !important;
  bottom: 1.5rem !important;
}

@media screen and (max-width: 991px) {
  .reviews-slide {
    padding: 2.5rem 2rem 4.5rem !important;
  }
}

@media screen and (max-width: 479px) {
  .reviews-slide {
    padding: 2rem 1.5rem 4.5rem !important;
  }

  .heading-15, .heading-17, .heading-18 {
    font-size: clamp(1.15rem, 5vw, 1.5rem) !important;
  }
}

/* ================================================================
   COURSES PAGE — "Pricings & Durations" heading + table centering
   1. "heading-25" (Pricings & Durations) was only styled at the
      >=1440px and <=479px breakpoints, so at every normal laptop/
      desktop width in between it rendered as plain, small text.
      Giving it a permanent heading treatment fixes that at all sizes.
   2. The 4 course/pricing tables (.grid-thirds-awards-table) had no
      horizontal margin, so they sat flush-left inside their wider
      container instead of centered. margin:auto centers them.
   ================================================================ */
.heading-25 {
  color: #000 !important;
  background-color: #fffefe !important;
  border-radius: 50px !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  padding: 16px 32px !important;
  font-size: clamp(1.75rem, 4vw, 3.125rem) !important;
  font-weight: 700 !important;
  width: fit-content !important;
  max-width: 90% !important;
}

.grid-thirds-awards-table {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ================================================================
   SERVICE PAGES — remove the 2 internal scroll boxes
   Root cause (verified by rendering the page): at <=479px, Webflow
   hard-clips .padding-section-medium-2 (and its -copy variant) to a
   fixed height:200px with overflow:auto. Content inside is taller
   than 200px, so it becomes its own independently-scrolling box
   instead of flowing with the page — this is the "2 scroll elements"
   (each page has exactly two of these boxes). Letting them size to
   their content removes the inner scrollbar entirely; the parent
   section's fixed height is relaxed to auto so nothing gets clipped
   or leaves a gap once the boxes are their natural (taller) height.
   Scoped to <=479px only — zero change above that.
   ================================================================ */
@media screen and (max-width: 479px) {
  .padding-section-medium-2,
  .padding-section-medium-2-copy {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .section_pricing {
    height: auto !important;
  }

  /* Vertically center the content: previously all the extra space
     (padding-top: 4.7rem + container-22's margin-top: 50px = 125px)
     sat only above the text with nothing below it, pushing the pill
     and paragraph toward the bottom of the black box. Splitting that
     space evenly top and bottom centers it instead. */
  .padding-section-medium-2,
  .padding-section-medium-2-copy {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .container-22 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ================================================================
   SERVICE PAGES — "Why Choose Media Initiation" component
   (about-right / about-content) — companion fix for the same
   component: remove the rigid 280px width so it isn't squeezed.
   ================================================================ */
@media screen and (max-width: 479px) {
  .about-right {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .about-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

@media screen and (max-width: 767px) {

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ── Stop every known clipping container from cutting content ── */
  .container,
  .container-3,
  .container-4,
  .max-width-40ch,
  .max-width-70ch,
  .section,
  .services_content,
  .services_component,
  .label_wrap,
  .phase-cards-wrapper,
  .hero-component,
  .opacity-85,
  .text-block-7,
  .single-title-home,
  .hide,
  .heading-3,
  .master-title-home,
  .common-heading-div,
  .padding-global-6,
  .container-medium-2,
  .intro_component,
  .intro_content,
  .intro_texts,
  .w-layout-blockcontainer {
    overflow: visible !important;
  }

  /* ── Width & box-sizing safety net for all containers ── */
  .container,
  .container-3,
  .container-4,
  .container-medium-2,
  .padding-global-6,
  .common-heading-div,
  .max-width-40ch,
  .max-width-70ch,
  .intro_component,
  .intro_content,
  .intro_texts {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Remove large negative margins that push content off-canvas ── */
  .section_intro {
    margin-top: 0 !important;
    padding-top: 90px !important;
  }

  .heading-1.text-weight-regular {
    margin-top: 0 !important;
  }

  .hero-wrapper {
    margin-top: 2rem !important;
  }

  .working-process-content-wrapper {
    margin-top: 1rem !important;
  }

  .tab_menu {
    margin-top: 1rem !important;
  }

  .sub-heading-2-copy {
    margin-top: 0 !important;
  }

  .common-heading-div {
    padding-left: 0 !important;
    margin-top: 1rem !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── HERO H1 ON HOME PAGE — the main reported bug ──
     Was: display:inline; font-size:50px → overflows + clipped */
  .display-inline {
    display: block !important;
    font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
    line-height: 1.25 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .intro_component,
  .intro_content,
  .intro_texts {
    align-items: center !important;
    text-align: center !important;
  }

  .text-color-grey {
    text-align: center !important;
    width: 100% !important;
  }

  .button-4.is-grey.is-large {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: fit-content !important;
  }

  .intro_image-1,
  .intro_image-2 {
    display: none !important;
  }

  /* ── HEADING-1 — used on agency/marketing pages, was 10.5rem ── */
  .heading-1 {
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    line-height: 1.2 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── HEADING-2 / HEADING-3 bold variants — fixed widths/margins ── */
  .heading-2.text-weight-bold,
  .heading-2-copy.text-weight-bold,
  .heading-2-copy-copy.text-weight-bold {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  .heading-3 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  /* ── Generic heading safety net ── */
  h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; line-height: 1.25 !important; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(1.2rem, 4.5vw, 1.6rem) !important; }

  /* "Our Case Studies" heading (h3.heading variant used on the
     peshawar / islamabad / bahria-town pages) — the generic h3 rule
     above was shrinking it to ~19px; give it its own larger size so
     it reads as a heading, matching the homepage version. */
  h2.heading, h3.heading, h2.heading-copy {
    font-size: clamp(2.75rem, 8vw, 3.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }

  /* ── HERO COMPONENT (services.html etc.) ── */
  .hero-component,
  .hero-wrapper,
  .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* ── Section padding consistency ── */
  .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ════════════════════════════════════════════════════════════
     CENTER ALL TEXT ON MOBILE
     Headings, paragraphs, descriptions — centered site-wide
     ════════════════════════════════════════════════════════════ */
  h1, h2, h3, h4, h5, h6,
  p, li,
  .heading, .heading-1, .heading-2, .heading-2-copy, .heading-2-copy-copy,
  .heading-3, .heading-13, .heading-24, .heading-style-h1, .heading-style-h2,
  .heading-style-h3, .heading-style-h5, .heading-style-h6,
  .title, .medium-text, .text-color-grey,
  .services_desc, .text-block, .text-block-7, .text-block-21,
  .subtitle-home, .bold-text-6,
  .testimonial-quote, .testimonial-content,
  .opacity-85, .max-width-40ch, .max-width-70ch,
  .case-studies-header .heading,
  .case-studies-header .medium-text,
  .header-2 .heading-6 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* Flex/grid wrappers that hold the above text: center their children */
  .label_wrap,
  .services_content,
  .case-studies-header,
  .header-2,
  .split,
  .split-copy,
  .div-block-25 {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .services_content .heading-style-h3,
  .services_content p {
    text-align: center !important;
  }

  .services_item-infos {
    text-align: center !important;
  }

  /* Buttons: center within their wrapper */
  .button-4, .button-3, .secondary-button {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .double-button-component {
    justify-content: center !important;
  }

  /* Footer links/columns centered */
  .footer-content,
  .footer-top,
  .footer-bottom-content,
  .footer-1-links,
  .footer-horizontal-links-2 {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media screen and (max-width: 479px) {

  h1, h2, h3, h4, h5, h6, p {
    text-align: center !important;
  }

  .display-inline {
    font-size: clamp(1.7rem, 7.5vw, 2.3rem) !important;
  }

  .heading-1 {
    font-size: clamp(2rem, 8.5vw, 2.6rem) !important;
  }

  .heading-2.text-weight-bold,
  .heading-2-copy.text-weight-bold,
  .heading-2-copy-copy.text-weight-bold,
  .heading-3 {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important;
  }

  .section_intro {
    padding-top: 80px !important;
  }

  .container,
  .container-3,
  .container-4 {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   "OUR CASE STUDIES" MINI-SECTIONS — reduce excessive top gap
   (peshawar / islamabad / agency / real-estate pages)

   These sections inherit desktop spacing that's huge on purpose
   for large screens: .section-copy / .section-copy-copy carry a
   200px margin-top (plus another 100px padding-top added only at
   the 767px breakpoint), and the .split / .split-copy grid item
   inside adds its own 72px margin-top on top of that. Combined,
   that's 250px+ of empty black space above "Our Case Studies" on
   mobile. Shrink all of it down to something reasonable.
   ════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
  .section-copy,
  .section-copy-copy {
    margin-top: 32px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    top: 0 !important;
  }

  .split-copy {
    margin-top: 24px !important;
  }

  .section-copy-copy .split {
    margin-top: 24px !important;
  }

  /* Decorative spacer directly above this block on the
     agency-for-digital-marketing page — was a fixed 64px */
  .space-4rem {
    min-height: 24px !important;
  }
}