html, body {
  overflow-x: hidden;
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

img, video {
  max-width: 100%;
  height: auto;
}
@media (max-width: 575.98px) {

  .service-detail-page {
    padding: 50px 0 !important;
  }
  .service-detail-page .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* H1 */
  .service-detail-page h1.display-3 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  .service-detail-page p.lead.fs-4 {
    font-size: 0.95rem !important;
  }

  /* Top 3 cards (col-md-4) → 1 column */
  .service-detail-page .row.g-4 > .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .service-detail-page .col-md-4 .card-body.p-4 {
    padding: 18px !important;
  }
  .service-detail-page .col-md-4 .fa-3x {
    font-size: 2rem !important;
  }

  /* Gutter reduction */
  .service-detail-page .row.g-4 {
    --bs-gutter-x: 12px !important;
    --bs-gutter-y: 12px !important;
  }
  .service-detail-page .row.g-3 {
    --bs-gutter-x: 10px !important;
    --bs-gutter-y: 10px !important;
  }

  /* 8-card grid → stay 2 columns */
  .service-detail-page .row.g-4 > .col-6.col-md-3,
  .service-detail-page .row.g-3 > .col-6.col-md-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  /* Icon box */
  .service-detail-page .col-6 > div > div[style*="width:52px"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }
  .service-detail-page .col-6 > div > div[style*="width:52px"] i {
    font-size: 0.95rem !important;
  }

  /* Card padding */
  .service-detail-page .col-6 > div.p-3 {
    padding: 10px !important;
  }

  /* H3 & p inside 8-card */
  .service-detail-page .col-6 h3 {
    font-size: 0.78rem !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
  }
  .service-detail-page .col-6 p {
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
  }

  /* Large card body */
  .service-detail-page .card-body.p-5 {
    padding: 18px !important;
  }
  .service-detail-page .card-body h2.text-center {
    font-size: 1.2rem !important;
    margin-bottom: 14px !important;
  }

  /* col-md-6 sections → full width */
  .service-detail-page .card-body .row > .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  /* Lists */
  .service-detail-page .list-unstyled li {
    font-size: 0.82rem !important;
  }

  /* Accordion FAQ */
  .service-detail-page .accordion-button {
    font-size: 0.82rem !important;
    padding: 12px 14px !important;
  }
  .service-detail-page .accordion-body {
    font-size: 0.78rem !important;
  }

  /* Inline FAQ cards (border-top section) */
  .service-detail-page [style*="border-top"] .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .service-detail-page [style*="border-top"] h3 {
    font-size: 0.8rem !important;
  }
  .service-detail-page [style*="border-top"] p {
    font-size: 0.74rem !important;
  }

  /* CTA gradient card */
  .service-detail-page .card-body.p-5.text-white h2 {
    font-size: 1.3rem !important;
  }
  .service-detail-page .card-body.p-5.text-white p.lead {
    font-size: 0.9rem !important;
  }
  .service-detail-page .d-flex.gap-3.justify-content-center .btn-lg {
    padding: 10px 18px !important;
    font-size: 0.88rem !important;
    width: 100% !important;
    max-width: 260px !important;
  }

  /* Branding example (service_branding) */
  .service-detail-page .card.bg-light.p-4 {
    padding: 14px !important;
  }

  /* How It Works steps (URL shortener) col-md-3 */
  .service-detail-page .col-md-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .service-detail-page h1.display-3 { font-size: 2.1rem !important; }
  .service-detail-page .card-body.p-5 { padding: 26px !important; }
  .service-detail-page .col-6 > div > div[style*="width:52px"] {
    width: 44px !important; height: 44px !important;
  }
  .service-detail-page .col-6 h3 { font-size: 0.84rem !important; }
  .service-detail-page .col-6 p  { font-size: 0.77rem !important; }
  .service-detail-page .card-body .row > .col-md-6 {
    flex: 0 0 100% !important; max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════
   2.  ABOUT US PAGE  (scoped to .about-hero
       + section siblings)
   ══════════════════════════════════════════════ */

@media (max-width: 575.98px) {

  .about-hero { padding: 70px 16px 36px !important; }
  .about-hero h1.display-4 { font-size: 1.8rem !important; }
  .about-hero + * .section-title,
  .about-hero ~ * .section-title { font-size: 1.5rem !important; }

  /* Stack col-md-4 (values) → 1 col */
  .about-hero ~ section .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
  }

  /* Mission + value cards */
  .mission-card, .value-card {
    padding: 18px !important;
  }
  .value-icon {
    width: 52px !important; height: 52px !important;
    font-size: 1.4rem !important;
  }
  .card-heading { font-size: 0.95rem !important; }
  .mission-card ul li { font-size: 0.82rem !important; }

  /* Timeline */
  .timeline::before { left: 14px !important; }
  .timeline-content {
    width: calc(100% - 42px) !important;
    margin-left: 42px !important;
    padding: 14px !important;
  }
  .timeline-dot { left: 14px !important; top: 16px !important; }
  .timeline-content .card-heading { font-size: 0.9rem !important; }
  .timeline-content p { font-size: 0.76rem !important; }

  /* Stats: 2 col */
  .about-hero ~ section .col-md-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 14px !important;
  }

  /* 8-card "What allqr gives you" */
  .about-hero ~ section .col-6.col-md-3 > div {
    padding: 10px !important;
  }
  .about-hero ~ section .col-6.col-md-3 div[style*="width:56px"] {
    width: 38px !important; height: 38px !important;
    min-width: 38px !important; margin-bottom: 8px !important;
  }
  .about-hero ~ section .col-6.col-md-3 div[style*="width:56px"] i {
    font-size: 0.9rem !important;
  }
  .about-hero ~ section .col-6.col-md-3 h3 {
    font-size: 0.76rem !important;
  }
  .about-hero ~ section .col-6.col-md-3 p {
    font-size: 0.7rem !important;
  }

  /* "Who uses" emoji tiles */
  .col-6.col-md-2 .p-3 { padding: 8px 6px !important; }
  .col-6.col-md-2 p { font-size: 0.68rem !important; }

  /* CTA */
  .about-hero ~ section h2.display-5 { font-size: 1.5rem !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .about-hero ~ section .section-title { font-size: 1.8rem !important; }
  .timeline-content {
    width: calc(100% - 52px) !important;
    margin-left: 52px !important;
  }
}


/* ══════════════════════════════════════════════
   3.  DIGITAL CONTACT CARD  (.dcc-page)
   ══════════════════════════════════════════════ */

@media (max-width: 575.98px) {

  .dcc-page .dcc-hero { padding: 54px 16px 46px !important; }
  .dcc-page .dcc-hero h1 { font-size: 1.65rem !important; line-height: 1.2 !important; }
  .dcc-page .dcc-hero p { font-size: 0.88rem !important; }
  .dcc-page .dcc-cta-group { flex-direction: column !important; align-items: center !important; }
  .dcc-page .btn-dcc-primary,
  .dcc-page .btn-dcc-outline {
    width: 100% !important; max-width: 260px !important;
    text-align: center !important; padding: 0.72rem 1.4rem !important;
  }

  .dcc-page .dcc-section { padding: 46px 0 !important; }
  .dcc-page .section-title { font-size: 1.4rem !important; }
  .dcc-page .section-sub { font-size: 0.86rem !important; }

  .dcc-page .dcc-card { padding: 14px !important; }
  .dcc-page .dcc-card h3 { font-size: 0.88rem !important; }
  .dcc-page .dcc-card ul li { font-size: 0.76rem !important; }

  /* Feature cards: 2 col */
  .dcc-page .col-12.col-sm-6.col-lg-3 {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
  .dcc-page .feat-card { padding: 12px 10px !important; }
  .dcc-page .feat-icon {
    width: 38px !important; height: 38px !important;
    font-size: 1rem !important; border-radius: 10px !important;
    margin-bottom: 8px !important;
  }
  .dcc-page .feat-card h3 { font-size: 0.78rem !important; }
  .dcc-page .feat-card p  { font-size: 0.7rem !important; line-height: 1.48 !important; }

  /* Compare cards */
  .dcc-page .compare-card { padding: 14px !important; }
  .dcc-page .compare-card h3 { font-size: 0.9rem !important; }
  .dcc-page .compare-card ul li { font-size: 0.76rem !important; }

  /* Perfect-for: 2 col */
  .dcc-page .col-6.col-md-4.col-lg-2 {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
  .dcc-page .perfect-item { font-size: 0.7rem !important; padding: 8px 6px !important; }
  .dcc-page .pi { font-size: 1.2rem !important; }

  /* Steps */
  .dcc-page .step-num { min-width: 32px !important; height: 32px !important; font-size: 0.82rem !important; }
  .dcc-page .step-text h3 { font-size: 0.84rem !important; }
  .dcc-page .step-text p  { font-size: 0.74rem !important; }

  /* 8-card "Why allqr" */
  .dcc-page .col-6.col-md-3 {
    flex: 0 0 50% !important; max-width: 50% !important;
    padding-right: 5px !important; padding-left: 5px !important;
  }

  /* "Where people use" use-case tiles: 2 col */
  .dcc-page .col-6.col-md-4 {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
  .dcc-page .col-6.col-md-4 .p-3 { padding: 9px !important; }
  .dcc-page .col-6.col-md-4 h3 { font-size: 0.72rem !important; }
  .dcc-page .col-6.col-md-4 p  { font-size: 0.66rem !important; }

  /* Final CTA */
  .dcc-page .dcc-final-cta { padding: 52px 16px !important; }
  .dcc-page .dcc-final-cta h2 { font-size: 1.55rem !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .dcc-page .col-12.col-sm-6.col-lg-3 {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
  .dcc-page .dcc-hero h1 { font-size: 2rem !important; }
}


/* ══════════════════════════════════════════════
   4.  FREE QR CODE GENERATOR HOME  (.qp)
   ══════════════════════════════════════════════ */

@media (max-width: 575.98px) {

  .qp .hero { padding: 50px 16px 0 !important; }
  .qp .hero h1 { font-size: 1.95rem !important; }
  .qp .hero p.lead { font-size: 0.88rem !important; margin-bottom: 20px !important; }
  .qp .hero-grid { grid-template-columns: 1fr !important; }
  .qp .hero-mock { display: none !important; }
  .qp .hero-spacer { height: 24px !important; }

  .qp .cta-row { flex-direction: column !important; align-items: stretch !important; }
  .qp .btn-p, .qp .btn-o {
    width: 100% !important; justify-content: center !important;
    font-size: 0.86rem !important; padding: 11px 16px !important;
  }

  .qp .sec { padding: 50px 16px !important; }
  .qp .ttl { font-size: 1.5rem !important; }
  .qp .sub  { font-size: 0.86rem !important; }

  /* Why choose feat-grid: 2 col */
  .qp .feat-card { padding: 20px 14px !important; }
  .qp .feat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 10px !important;
  }
  .qp .fi-icon { width: 34px !important; height: 34px !important; font-size: 0.85rem !important; border-radius: 8px !important; }
  .qp .fi h3  { font-size: 0.76rem !important; }
  .qp .fi p   { font-size: 0.68rem !important; line-height: 1.48 !important; }

  /* QR types: 2 col */
  .qp .qr-grid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; margin-top: 24px !important; }
  .qp .qr-card { padding: 16px 9px 12px !important; border-radius: 13px !important; }
  .qp .qr-icon-wrap { width: 40px !important; height: 40px !important; font-size: 1.1rem !important; margin-bottom: 9px !important; }
  .qp .qr-card h3 { font-size: 0.76rem !important; }
  .qp .qr-card p  { font-size: 0.66rem !important; }

  /* AllinOne section */
  .qp .aio-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .qp .aio-list li { font-size: 0.8rem !important; }

  /* Chips */
  .qp .chip { font-size: 0.74rem !important; padding: 7px 12px !important; }

  /* Steps: 2 col */
  .qp .steps-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 24px !important; }
  .qp .step { padding: 16px 12px !important; border-radius: 13px !important; }
  .qp .step-badge { width: 26px !important; height: 26px !important; font-size: 0.72rem !important; border-radius: 6px !important; margin-bottom: 8px !important; }
  .qp .step-ghost { font-size: 2rem !important; top: 8px !important; right: 9px !important; }
  .qp .step h3 { font-size: 0.76rem !important; }
  .qp .step p  { font-size: 0.68rem !important; }

  /* FAQ inside feat-card */
  .qp [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA section */
  .qp .cta-sec { padding: 60px 16px !important; }
  .qp .cta-sec h2 { font-size: 1.65rem !important; }
  .qp .cta-btns { flex-direction: column !important; align-items: center !important; }
  .qp .cta-btns .btn-p,
  .qp .cta-btns .btn-o { width: 100% !important; max-width: 250px !important; justify-content: center !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .qp .hero-grid { grid-template-columns: 1fr !important; }
  .qp .hero-mock { display: none !important; }
  .qp .qr-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .qp .steps-grid { grid-template-columns: 1fr 1fr !important; }
  .qp .aio-grid { grid-template-columns: 1fr !important; }
  .qp .feat-grid { grid-template-columns: 1fr 1fr !important; }
  .qp .ttl { font-size: 1.75rem !important; }
}