/*
 * bw-override.css  —  Black & White version of the Family Law theme
 * ------------------------------------------------------------------
 * Load AFTER style.css and responsive.css. Header + footer live in bw-header-footer.css.
 * Rules: white backgrounds, black text, black menu/header/footer-menu,
 *        black hero with light text, GOLD gradient on every hover.
 * To go back to the purple design: just remove the <link> to this file.
 */

:root {
  --bw-black: #000;
  --bw-white: #fff;
  --bw-gold: #dab145;
  --bw-gold-grad: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%);
}

/* =====================================================
   2. BUTTONS
      default  : black bg / white text
      hover    : gold gradient / black text
   ===================================================== */
.wrapper a.cmn-btn {
  background: #000;
  color: #fff;
  border: 2px solid #000;
}
.wrapper a.cmn-btn:hover {
  background: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%) !important;
  border-color: var(--bw-gold);
  color: #000 !important;
}

/* form submit */
.hm-form-sec .gform_wrapper .top_label input[type="submit"] {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
}
.hm-form-sec .gform_wrapper .top_label input[type="submit"]:hover {
  background: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%) !important;
  border-color: var(--bw-gold) !important;
  color: #000 !important;
}

/* =====================================================
   3. HERO  (black bg, light text)
   ===================================================== */
.banner-sec {
  background-color: #000;
  background-image: radial-gradient(ellipse at 50% 28%, #2b2b2b 0%, #111 45%, #000 78%);
  color: #fff;
}
.banner-sec:before { background: linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 45%); }
.banner-sec .banner-head h1,
.banner-sec .banner-cnt h6 { color: #fff; }
/* hero buttons stay gold (they sit on black) – hover flips to white */
.wrapper .banner-sec a.cmn-btn {
  background: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%);
  color: #000;
  border-color: transparent;
}
.wrapper .banner-sec a.cmn-btn:hover {
  background: #fff !important;
  border-color: #fff;
  color: #000 !important;
}

/* =====================================================
   4. WHY HIRE US
   ===================================================== */
.hm-case-results { background-color: #fff; }
.hm-case-results:before { background-image: none; background-color: #fff; border-radius: 60px 60px 0 0; }
.hm-case-results h2 { color: #000; }
.case-lst .case-itm { border: 1px solid #e3e3e3; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.case-lst .case-itm:hover { border: 1px solid var(--bw-gold); }
.case-lst .case-itm h4 { color: #000; }
.case-lst .case-itm h4:before { filter: grayscale(1) contrast(1.15); }   /* icon sprites → grey */

/* =====================================================
   5. ABOUT
   ===================================================== */
.about_sec { background-image: none; background-color: #fff; }
.about_sec::before,
.about_sec::after { display: none; }
.about_sec span { color: #444; }
.about_sec h2,
.about_sec h2 strong { color: #000; }
.about_sec .about_items .abt-para:before { background-color: #000; }
.about_sec .law-firm-case .abt-img:before { filter: grayscale(1); }
.about_sec .law-firm-case .abt-img:after,
.about_sec .divorce_sec .abt-imag:before { filter: grayscale(1) contrast(1.2); }

/* =====================================================
   6. PRACTICE AREAS
   ===================================================== */
.hmpractice-sec { background-color: #fff; }
.hmpractice-sec::before,
.hmpractice-sec::after { display: none; }
.hmpractice-sec h2 { color: #000; }
.hmpractice-sec .prct-itm::before { display: none; }
.hmpractice-sec .prct-image img { transition: box-shadow .3s; }
.hmpractice-sec .prct-itm:hover .prct-image img { box-shadow: 0 0 0 4px var(--bw-gold); }
.hmpractice-sec .prct-itm:hover h3 { color: var(--bw-gold); }

/* =====================================================
   7. OWL ARROWS  (purple sprites → clean black circles, gold hover)
   ===================================================== */
.hmpractice-sec .prct-main.owl-carousel .owl-nav button.owl-prev,
.hmpractice-sec .prct-main.owl-carousel .owl-nav button.owl-next,
.hmblg-sec .hmblg-blck.owl-carousel .owl-nav button.owl-prev,
.hmblg-sec .hmblg-blck.owl-carousel .owl-nav button.owl-next,
.hmawards-sec .award-list.owl-carousel .owl-nav button.owl-prev,
.hmawards-sec .award-list.owl-carousel .owl-nav button.owl-next,
.hm-testimonials .testi-blck.owl-carousel .owl-nav button.owl-prev,
.hm-testimonials .testi-blck.owl-carousel .owl-nav button.owl-next {
  background-image: none !important;
  background-color: #000;
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 30px !important;
  line-height: 1;
  padding: 0 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hmpractice-sec .prct-main.owl-carousel .owl-nav button.owl-prev:hover,
.hmpractice-sec .prct-main.owl-carousel .owl-nav button.owl-next:hover,
.hmblg-sec .hmblg-blck.owl-carousel .owl-nav button.owl-prev:hover,
.hmblg-sec .hmblg-blck.owl-carousel .owl-nav button.owl-next:hover,
.hmawards-sec .award-list.owl-carousel .owl-nav button.owl-prev:hover,
.hmawards-sec .award-list.owl-carousel .owl-nav button.owl-next:hover,
.hm-testimonials .testi-blck.owl-carousel .owl-nav button.owl-prev:hover,
.hm-testimonials .testi-blck.owl-carousel .owl-nav button.owl-next:hover,
.sidebar-testi .owl-nav button.owl-next:hover {
  background-image: none !important;
  background: linear-gradient(260deg,rgba(218,177,69,1) 16%,rgba(243,228,126,1) 55%,rgba(218,177,69,1) 85%) !important;
  color: #000;
}
/* mobile dots on "Why Hire Us" */
.hm-case-results .case-lst.owl-carousel .owl-dots .owl-dot { background-color: #bdbdbd; }
.hm-case-results .case-lst.owl-carousel .owl-dots .active { background-color: #000; }

/* =====================================================
   8. STAND STRONG (law firm section)
   ===================================================== */
.law_firm_sec { background-image: none; background-color: #fff; }
.law_firm_sec h2,
.law_firm_sec h2 span { color: #000; }
.law_firm_sec .law_firm_items .img_one:before { background-color: #000; }
.law_firm_sec .law_firm_items .img_one:after { filter: grayscale(1); }
.law_firm_sec .law_firm_items .txt_sec h3:before { background-color: #000; }

/* =====================================================
   9. AWARDS
   ===================================================== */
.hmawards-sec { background-color: #fff; }
.hmawards-sec h2,
.hmawards-sec h2 strong { color: #000; }
.hmawards-sec .award-list.owl-carousel .owl-stage-outer:before { border: 1px solid #e3e3e3; }
.hmawards-sec .award-list.owl-carousel .owl-item.active.center { box-shadow: 0 0 28px 4px rgba(0,0,0,.1); }

/* =====================================================
   10. TESTIMONIALS
   ===================================================== */
.hm-testimonials { background-image: none; background-color: #fff; }
.hm-testimonials h2.text-heading { color: #000; }
.hm-testimonials .testi-blck.owl-carousel.owl-loaded { border: 1px solid #e3e3e3; }
.hm-testimonials .testi-blck.owl-carousel.owl-loaded::before { filter: grayscale(1) brightness(0); }  /* quote mark → black */
/* .star-rat is left gold on purpose */

/* =====================================================
   11. ATTORNEY
   ===================================================== */
.attorney_sec h2,
.attorney_sec span { color: #000; }
.attorney_sec .Eiman_sec .img-one { background-color: #000; }
.attorney_sec .Eiman_sec .img-two { background-color: #000; }
.attorney_sec .Eiman_sec .img-two:before { filter: grayscale(1); }
.attorney_sec .Eiman_sec .img-one:before { filter: grayscale(1); }
.attorney_sec .Eiman_sec .name_sec span { -webkit-text-stroke: 1px #fff; }

/* =====================================================
   12. BLOG
   ===================================================== */
.hmblg-sec { background-color: #fff; }
.hmblg-sec::before { background-color: #fff; }
.hmblg-sec h2.text-heading,
.hmblg-sec h2.text-heading span { color: #000; }
.hmblg-sec .hmblg-item { border: 1px solid #e3e3e3; box-shadow: 0 8px 28px rgba(0,0,0,.08); }
.hmblg-sec .clndr { background-color: #000; color: #fff; }
.hmblg-sec .hmpost_btn a { color: #000; }
.hmblg-sec .hmpost_btn a:hover { color: var(--bw-gold); }
.hmblg-sec .hmblgcnt h3 a:hover { color: var(--bw-gold); }

/* =====================================================
   13. CONTACT FORM SECTION
   ===================================================== */
.hm-form-sec { background-image: none; background-color: #fff; }
.hm-form-sec .ftr-form-main { border: 2px solid #000; box-shadow: none; }
.hm-form-sec .ftr-form-main h2 { color: #000; }
.hm-form-sec .gform_wrapper .top_label input:focus,
.hm-form-sec .gform_wrapper .top_label textarea:focus { border-color: var(--bw-gold); box-shadow: 0 0 0 2px var(--bw-gold); }
.hm-form-sec .gform_wrapper .popup span.close { background-color: #000; }
.hm-form-sec .gform_wrapper .form-links a:hover { color: var(--bw-gold); }

/* =====================================================
   15. MOBILE  (≤ 991px) – parts of responsive.css that re-add purple
   ===================================================== */
@media screen and (max-width: 991px) {
  .case-lst .case-itm { border: 1px solid #000; }
  .hm-testimonials { background-image: none; }
  .hmawards-sec .award-list.owl-carousel .owl-item .award-itm { border: 1px solid #e3e3e3; }
}