/* ============================================================
   JP ROBOTIC — FOOTER (v2 / streamlined)

   Changed from the original:
   - The file declared .jpr-footer's background-color twice with
     two different values (#07090c, then #0b0e14 further down) —
     merged into one rule.
   - Removed the #back-to-top block entirely — it was an exact
     duplicate of the rule in "A top-of-page.css" (slightly
     different width: 55px vs 56px). That file is now the single
     source for the back-to-top button.
   ============================================================ */

.jpr-footer {
  background-color: #0b0e14 !important;
  color: #8a94a8 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 25px 0 15px 0 !important;
  padding-top: 4rem;
  padding-bottom: 2rem;
  font-family: 'Barlow', sans-serif !important;
}

.jpr-footer ul, .jpr-footer li { list-style: none !important; padding: 0 !important; margin: 0 !important; background: none !important; }
.jpr-footer li::before { content: none !important; display: none !important; }

.jpr-footer h5 {
  font-family: var(--fd) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 10px !important;
  padding-bottom: 5px !important;
  background-color: transparent !important;
}

.jpr-footer-brand { font-family: var(--fd) !important; font-size: 20px !important; color: #ffffff !important; background-color: transparent !important; }
.jpr-footer-brand span { color: var(--blue) !important; }

.jpr-footer .jpr-footer-tagline,
.jpr-footer p,
.jpr-footer .jpr-footer-copy,
.jpr-footer ul li a,
.jpr-footer a {
  color: #6a768a !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  background-color: transparent !important;
  transition: color 0.3s ease !important;
  margin-bottom: 1rem;
}
.jpr-footer ul li a:hover,
.jpr-footer a:hover { color: var(--blue) !important; }

.jpr-social-btn {
  display: inline-flex !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #6a768a !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.jpr-social-btn svg { fill: currentColor !important; width: 18px; }
.jpr-social-btn:hover { border-color: var(--blue) !important; color: var(--blue) !important; transform: translateY(-2px); }

.footer-play-btn img { opacity: 0.3 !important; width: 36px !important; filter: grayscale(1); transition: 0.3s ease; }
.footer-play-btn:hover img { opacity: 1 !important; filter: grayscale(0); }

.jpr-footer ul, .jpr-footer li { background-color: transparent !important; }

@media (max-width: 767px) {
  .jpr-footer, .jpr-footer-brand, .jpr-footer h5, .jpr-footer ul, .jpr-footer p, .jpr-footer-tagline {
    text-align: center !important;
  }
  .jpr-footer h5 { width: fit-content; margin: 0 auto 10px auto !important; }
  .jpr-footer-bottom .row { display: flex !important; flex-direction: column !important; align-items: center !important; }
  .footer-play-btn { margin: 10px 0 5px 0 !important; display: flex; justify-content: center; }
  .footer-social-wrapper { margin: 5px 0 10px 0 !important; display: flex; justify-content: center; gap: 8px; }
  .jpr-footer-copy { margin-bottom: 5px !important; }
}