/* =====================================================
   Quality Payment Systems — Design Tokens & Base Styles
===================================================== */
:root{
  --ink:        #0A1F44;   /* primary dark / headings */
  --steel:      #142B57;   /* secondary dark, gradients */
  --signal:     #1657FF;   /* primary accent / CTA */
  --signal-dk:  #0E3FCB;   /* accent hover */
  --mint:       #17B26A;   /* success / trust accent, used sparingly */
  --cloud:      #F4F7FB;   /* alt section background */
  --line:       #E4E9F2;   /* hairline borders */
  --slate:      #4B5768;   /* muted body text */
  --slate-lt:   #8792A2;   /* faint text */
  --white:      #FFFFFF;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 30px -12px rgba(10,31,68,0.18);
  --shadow-card: 0 2px 10px rgba(10,31,68,0.06);
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,.display-font{
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.text-mono{ font-family: var(--font-mono); letter-spacing: 0.02em; }

a{ color: var(--signal); text-decoration:none; }
a:hover{ color: var(--signal-dk); }

.text-slate{ color: var(--slate) !important; }
.text-mint{ color: var(--mint) !important; }
.bg-cloud{ background: var(--cloud) !important; }
.bg-ink{ background: var(--ink) !important; }

.section{ padding: 60px 0; }
@media (max-width: 767.98px){ .section{ padding: 50px 0; } }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background: var(--signal);
  display:inline-block;
}
.fixed-top{ position: sticky;
}
/* -------- Buttons -------- */
.btn{
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 5px;
  padding: 0.75rem 1.6rem;
  transition: all .25s ease;
}
.btn-signal{
  background: var(--signal);
  border: 1px solid var(--signal);
  color: #fff;
}
.btn-signal:hover{
  background: var(--signal-dk);
  border-color: var(--signal-dk);
  color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(22,87,255,0.55);
}
.btn-outline-light-line{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
}
.btn-outline-light-line:hover{
  background: rgba(255,255,255,0.1);
  border-color:#fff;
  color:#fff;
  transform: translateY(-2px);
}
.btn-outline-ink{
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-outline-ink:hover{
  border-color: var(--signal);
  color: var(--signal);
  transform: translateY(-2px);
}
.btn-sm-pill{ padding:.5rem 1.1rem; font-size:.9rem; }

/* -------- Navbar -------- */
.navbar-qps{
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
      border-top: 4px solid var(--signal);
  transition: box-shadow .2s ease;
}
.navbar-qps.scrolled{ box-shadow: 0 4px 20px rgba(10,31,68,0.08); }
.navbar-brand-qps{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  display:flex; align-items:center; gap:.6rem;
}
.navbar-brand-qps .mark{
  width: 34px; height:34px; border-radius:9px;
  background: linear-gradient(135deg, var(--signal), var(--ink));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1rem;
}
.navbar-brand-qps small{
  display:block; font-family: var(--font-mono);
  font-size:.62rem; color: var(--slate-lt); letter-spacing:.08em;
  font-weight:500;
}
.nav-link-qps{
  font-weight: 600;
  color: var(--ink) !important;
  padding: .5rem 1rem !important;
  position:relative;
  text-transform: uppercase;
}
.nav-link-qps.active,.nav-link-qps:hover{ color: var(--signal) !important; }
.navbar .btn-signal{ padding:.6rem 1.3rem; }

/* -------- Hero -------- */
.hero{
	position:relative;
	background: linear-gradient(180deg, var(--ink) 0%, var(--steel) 100%);
	color:#fff;
	overflow:hidden;
	padding: 5rem 0 5rem;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(22,87,255,0.35), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(23,178,106,0.18), transparent 40%);
  pointer-events:none;
}
.hero-grid-lines{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 75%);
}
.hero h1{ color:#fff; line-height:1.08; }
.hero .lead{ color: rgba(255,255,255,0.78); font-size:1.15rem; }
.trust-row{
  display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.2rem;
  font-family: var(--font-mono); font-size:.78rem; color: rgba(255,255,255,0.6);
}
.trust-row span{ display:flex; align-items:center; gap:.4rem; }
.trust-row i{ color: var(--mint); }

.hero-bg-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
 
  .hero-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
 
  .hero-bg-slide.active {
    opacity: 1;
  }
  .hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,15,30,0.72) 0%, rgba(10,15,30,0.82) 100%);
    z-index: 1;
  }
  .hero-grid-lines,
  .hero .container {
    position: relative;
    z-index: 2;
  }
  /* Prev / Next arrows */
  .hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.2s ease;
  }
  .hero-nav:hover {
    background-color: rgba(255,255,255,0.3);
  }
  .hero-nav-prev { left: 20px; }
  .hero-nav-next { right: 20px; }
 
  @media (max-width: 767px) {
    .hero-nav { display: none; } /* keep mobile hero clean; dots still work */
  }
 
  /* Dot indicators */
  .hero-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
  }
  .hero-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255,255,255,0.4);
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .hero-dots button.active {
    background-color: #fff;
    transform: scale(1.2);
  }
  

/* ----- Terminal mockup (signature element) ----- */
.terminal-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 1.6rem;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
}
.terminal-screen{
  background: linear-gradient(160deg,#0E1B36,#0A1530);
  border-radius: 14px;
  padding: 1.4rem;
  position:relative;
  overflow:hidden;
  min-height: 210px;
}
.terminal-screen .status-dot{
  width:8px;height:8px;border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 4px rgba(23,178,106,0.2);
  display:inline-block; margin-right:.4rem;
  animation: pulse-dot 1.8s infinite;
}
@keyframes pulse-dot{
  0%,100%{ box-shadow:0 0 0 4px rgba(23,178,106,0.2); }
  50%{ box-shadow:0 0 0 8px rgba(23,178,106,0.06); }
}
.terminal-amount{
  font-family: var(--font-mono);
  font-size: 2.1rem; font-weight:600; color:#fff; margin: .6rem 0 0;
}
.tap-wave{
  position:absolute; right:18px; top:18px;
  width:52px; height:52px;
}
.tap-wave .ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--signal);
  animation: tap-ring 2.2s ease-out infinite;
  opacity:0;
}
.tap-wave .ring:nth-child(2){ animation-delay:.5s; }
.tap-wave .ring:nth-child(3){ animation-delay:1s; }
@keyframes tap-ring{
  0%{ transform:scale(0.4); opacity:.9; }
  100%{ transform:scale(1.3); opacity:0; }
}
.tap-wave .card-chip{
  position:absolute; inset:14px; background: var(--signal);
  border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem;
}
.terminal-status-line{
  font-family: var(--font-mono); font-size:.72rem; color: var(--slate-lt);
  margin-top: 1.1rem; padding-top: 1rem; border-top:1px dashed rgba(255,255,255,0.12);
  display:flex; justify-content:space-between;
}
.terminal-status-line b{ color: var(--mint); font-weight:600; }
.terminal-foot{
  display:flex; justify-content:space-between; margin-top:1.1rem;
  font-family: var(--font-mono); font-size:.72rem; color: rgba(255,255,255,0.5);
}

/* -------- Stat / Feature cards -------- */
.stat-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; height:100%;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.stat-card .num{
  font-family: var(--font-mono); font-size:2rem; font-weight:600; color: var(--signal);
}
.icon-tile{
  width:48px; height:48px; border-radius:12px;
  background: linear-gradient(135deg, rgba(22,87,255,0.12), rgba(10,31,68,0.06));
  display:flex; align-items:center; justify-content:center;
  color: var(--signal); font-size:1.25rem; margin-bottom: 1rem;
}
 .stat-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-bottom: 10px;
  }
  
/* -------- Service cards -------- */
.services-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .services-carousel-viewport {
    overflow: hidden;
    flex: 1;
  }

  .services-carousel-track {
    display: flex;
    transition: transform 0.45s ease;
  }

  .services-slide {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .services-slide .service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
  .service-text{ padding: 20px 15px; }
  .service-text h3{ font-size:18px;}
  .services-slide .service-card p {
    flex-grow: 1;
  }

  .learn-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
  }

  .services-nav {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0,0,0,0.35);
    color: #fff;
    display: inline-block;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 20px;
  }
  .services-nav:hover { background-color: rgba(0,0,0,0.55); }
  .services-nav:disabled { opacity: 0.35; cursor: default; }

  .services-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .services-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: #cbd5e1;
    padding: 0;
    cursor: pointer;
  }
  .services-dots button.active {
    background-color: var(--bs-primary, #2563eb);
  }

  /* Tablet: 2 cards visible */
  @media (max-width: 991px) {
    .services-slide {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

  /* Mobile: 1 card visible */
  @media (max-width: 575px) {
    .services-slide {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

/* -------- How it works -------- */
.step-item{ position:relative; padding-left: 0; }
.step-num{
  font-family: var(--font-mono); font-size:.78rem; color: var(--signal);
  border:1px solid var(--line); border-radius:999px; padding:.15rem .65rem;
  display:inline-block; margin-bottom: .9rem;
}
  .step-item {
    text-align: center;
    background: #f1f5f9;
    border-radius: 16px;
    padding: 32px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
 
  .step-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 14px;
  }
 
  .step-num {
    display: none; /* hidden to match the reference design; remove this rule to show step numbers */
  }
 
  .step-item h3 {
    margin-bottom: 10px;
  }
 
  .step-item p {
    margin-bottom: 0;
  }
  
/* -------- Industries chips -------- */
.industry-chip{
  border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; background:#fff; text-align:center;
  font-weight:600; font-size:.92rem; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  transition: all .2s ease;
}
.industry-chip:hover{ border-color: var(--signal); color:var(--signal); transform: translateY(-3px); }
.industry-chip i{ font-size:1.4rem; color: var(--signal); }

/* -------- Testimonials -------- */
.testi-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .testi-carousel-viewport {
    overflow: hidden;
    flex: 1;
  }

  .testi-carousel-track {
    display: flex;
    transition: transform 0.45s ease;
  }

  .testi-slide {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .testi-slide .testi-card {
    height: 100%;
    display: flex;
    flex-direction: column;
	background: #f1f5f9;
	padding: 15px;
	border-radius: 10px;
  }
  .testi-slide .testi-card p {
    flex-grow: 1;
  }

  .testi-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .testi-nav {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0,0,0,0.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .testi-nav:hover { background-color: rgba(0,0,0,0.55); }

  .testi-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
  }
  .testi-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: #cbd5e1;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .testi-dots button.active {
    background-color: var(--bs-primary, #2563eb);
  }

  /* Tablet: 2 cards visible */
  @media (max-width: 991px) {
    .testi-slide {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

  /* Mobile: 1 card visible */
  @media (max-width: 575px) {
    .testi-slide {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

/* -------- CTA banner -------- */
.cta-banner{
  background: linear-gradient(120deg, var(--ink), var(--steel));
  border-radius: 24px; color:#fff; padding: 3.4rem;
  position:relative; overflow:hidden;
}
.cta-banner::after{
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  background: radial-gradient(circle, rgba(22,87,255,0.4), transparent 70%);
}

/* -------- Accordion (FAQ) -------- */
.accordion-qps .accordion-item{
  border: 1px solid var(--line); border-radius: var(--radius) !important; overflow:hidden; margin-bottom: .9rem;
}
.accordion-qps .accordion-button{
  font-family: var(--font-display); font-weight:600; color: var(--ink);
  padding: 1.2rem 1.4rem;
}
.accordion-qps .accordion-button:not(.collapsed){
  color: var(--signal); background: rgba(22,87,255,0.05); box-shadow:none;
}
.accordion-qps .accordion-button:focus{ box-shadow:none; border-color: var(--line); }
.accordion-qps .accordion-button::after{ filter: hue-rotate(190deg); }

/* -------- Footer -------- */
.footer-qps{
  background: var(--ink); color: rgba(255,255,255,0.7); padding: 4rem 0 1.6rem;
}
.footer-qps h6{ color:#fff; font-family: var(--font-display); margin-bottom:1.1rem; font-size: 18px;}
.footer-qps a{ color: rgba(255,255,255,0.65); }
.footer-qps a:hover{ color:#fff; }
.footer-qps .social-ic{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition: all .2s ease;
}
.footer-qps .social-ic:hover{ background: var(--signal); border-color: var(--signal); transform: translateY(-3px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); margin-top:2.6rem; padding-top:1.4rem; font-size:.85rem; }

/* -------- Page header (inner pages) -------- */
 .page-header {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 70px 0;
    overflow: hidden;
  }
 
  /* Dark overlay so breadcrumb, title, and text stay readable over any photo */
  .page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,15,30,0.75) 0%, rgba(10,15,30,0.85) 100%);
    z-index: 0;
  }
 
  /* Explicit flex + order locks breadcrumb → title → paragraph,
     regardless of any column-reverse or similar rule inherited from
     a parent layout. This makes the stacking order bulletproof. */
  .page-header-content {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
  }
  .page-header-content .breadcrumb-qps { order: 1; }
  .page-header-content h1 { order: 2; }
  .page-header-content p { order: 3; }
 
  .breadcrumb-qps {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
  }
  .breadcrumb-qps a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
  }
  .breadcrumb-qps a:hover {
    color: #fff;
  }

/* -------- Service detail blocks -------- */
.service-block{ scroll-margin-top: 90px; padding: 3.4rem 0; border-bottom: 1px solid var(--line); }
.service-block:last-child{ border-bottom:none; }
.service-visual{
  border-radius: var(--radius); background: var(--cloud);
  height: 100%; min-height: 260px; display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--line);
}
.feature-check{ display:flex; gap:.7rem; margin-bottom: .8rem; align-items:flex-start; }
.feature-check i{ color: var(--mint); margin-top:.2rem; }
.service-toc{
  position:sticky; top: 100px;
  border:1px solid var(--line); border-radius: var(--radius); padding: 1.3rem;
}
.service-toc a{
  display:block; padding:.45rem 0; color: var(--slate); font-weight:600; font-size:.92rem;
  border-bottom: 1px solid var(--line);
}
.service-toc a:last-child{ border-bottom:none; }
.service-toc a.active,.service-toc a:hover{ color: var(--signal); }

/* -------- Contact -------- */
.contact-card{
  border:1px solid var(--line); border-radius: var(--radius); padding: 1.6rem;
  display:flex; gap:1rem; align-items:flex-start; height:100%; background:#fff;
}
.form-control-qps{
  border-radius: var(--radius-sm); border:1px solid var(--ink); padding: .75rem 1rem;
}
.form-control-qps:focus{ border-color: var(--signal); box-shadow: 0 0 0 3px rgba(22,87,255,0.12); }
.map-frame{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); }

/* -------- FAQ resources -------- */
.resource-card{
  border:1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; height:100%;
  transition: all .2s ease;
}
.resource-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-4px); }

/* -------- misc -------- */
.divider-dot{ width:5px; height:5px; border-radius:50%; background: var(--slate-lt); display:inline-block; margin:0 .6rem; }
.back-to-top{
  position:fixed; right:24px; bottom:24px; width:46px; height:46px; border-radius:50%;
  background: var(--signal); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft); opacity:0; visibility:hidden; transition: all .25s ease; z-index:999;
}
.back-to-top.show{ opacity:1; visibility:visible; }

[data-aos]{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-aos].aos-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-aos]{ opacity:1; transform:none; transition:none; }
  .tap-wave .ring, .status-dot{ animation:none; }
}
.b-hours{ height: auto;}


 .service-detail-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 16px;
  }
 
  .service-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }
  .service-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    color: #475569;
    font-size: 0.95rem;
  }
  .service-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--bs-primary, #2563eb);
    font-weight: 700;
  }
 
  @media (max-width: 767px) {
    .service-detail-img {
      height: 240px;
    }
  }





#menu-footer-quick-links li{ margin-bottom: .5rem !important;}
#menu-footer-residential-service-menu li{ margin-bottom: .5rem !important;}