/* ===============================
   DR Custom Footer (Quark override)
   Works with: <section id="footer" class="footer-section">
   =============================== */

/* Base footer: override Quark's #footer { text-align:center } */
#footer,
#footer.footer-section {
  background: #000000 !important;
  color: #ffffff !important;
  text-align: left !important;
}

/* Remove Quark modular/text styling boxes inside the footer */
#footer .modular-text,
#footer .modular-text.bg-gray,
#footer .bg-gray,
#footer .modular-row,
#footer .card,
#footer .column > section {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Column-specific alignment (left / center / right) */
#footer .footer-columns > .column:nth-child(1) { text-align: left !important; }
#footer .footer-columns > .column:nth-child(2) { text-align: center !important; }
#footer .footer-columns > .column:nth-child(3) { text-align: right !important; }

/* Make footer content inherit the column alignment (and beat any p/h3 centering) */
#footer .footer-col-content,
#footer .footer-modular-content,
#footer .footer-col-content * ,
#footer .footer-modular-content * {
  text-align: inherit !important;
}

/* Typography */
#footer h1, #footer h2, #footer h3, #footer h4 {
  color: #ffffff !important;
  margin-top: 0;
}

/* Links */
#footer a {
  color: #acb3c2 !important;
  text-decoration: none;
}

#footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* If you ever use lists in footer columns */
#footer ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile: stack + left align for readability */
@media (max-width: 768px) {
  #footer .footer-columns > .column {
    text-align: left !important;
  }
}

/* ===============================
   Copyright Bar Styling
   =============================== */

.footer-copyright {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.75rem 0;
  margin-top: 0.5rem;
}

.footer-copyright p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}

/* Mobile: ensure it stays readable */
@media (max-width: 768px) {
  .footer-copyright {
    padding: 0.5rem 0;
    margin-top: 0.25rem;
  }
}

/* ===============================
   Hero Button Styling
   =============================== */

/* Primary button (Get More Leads) */
body .hero .btn.btn-primary {
    background: #5755d9 !important;
    border: 2px solid #5755d9 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Force the hover state to win over Spectre defaults */
body .hero .btn.btn-primary:hover, 
body .hero .btn.btn-primary:active, 
body .hero .btn.btn-primary:focus {
    background: #4b49c6 !important; /* Darker blue */
    border-color: #4b49c6 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Secondary button (How It Works) */
body .hero .btn.btn-secondary {
    background: #ffffff !important;
    border: 2px solid #004494 !important;
    color: #004494 !important;
    font-weight: bold !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

body .hero .btn.btn-secondary:hover, 
body .hero .btn.btn-secondary:active, 
body .hero .btn.btn-secondary:focus {
    background: #004494 !important;
    border-color: #004494 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
/* Keep top menu bar dark when scrolled/minimized */
#header.section.scrolled {
    background-color: #000000;   /* or your preferred dark color */
}

/* Make sure links stay readable on the dark background */
#header.section.scrolled .navbar a {
    color: #ffffff !important;
}