/* ========================================================================
   CHRISTIAN BOOK HELP — White + Charcoal Premium Theme Override
   Applied LAST to override all existing color/styling without changing layout.
   ======================================================================== */

/* ---------- CSS Custom Properties (Design Tokens) ---------- */
:root {
  --charcoal: #2d2d2d;
  --charcoal-dark: #1a1a1a;
  --charcoal-light: #3e3e3e;
  --charcoal-muted: #555555;
  --gray-soft: #8a8a8a;
  --gray-border: #e0e0e0;
  --gray-bg: #f5f5f5;
  --gray-bg-alt: #fafafa;
  --white: #ffffff;
  --white-off: #f9f9f9;
  --accent: #2d2d2d;
  --accent-hover: #1a1a1a;
  --star-gold: #d4a843;
  --shadow-soft: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-medium: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-card: 0 1px 8px rgba(0,0,0,0.05);
  --transition: all 0.3s ease;
  --radius: 8px;
  --radius-lg: 12px;
}

/* ---------- Global Body & Selection ---------- */
body {
  color: var(--charcoal) !important;
  background-color: var(--white) !important;
}

::selection {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
}

::-moz-selection {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title {
  color: var(--charcoal-dark) !important;
}

p, li, span, div, blockquote, cite, label, td, th {
  color: var(--charcoal);
}

a {
  color: var(--charcoal) !important;
  transition: var(--transition);
}

a:hover {
  color: var(--charcoal-light) !important;
}

/* ---------- Override Utility Color Classes ---------- */

/* Ocean (primary blue) → Charcoal */
.ocean, .hover-ocean:focus, .hover-ocean:hover {
  color: var(--charcoal) !important;
}

.bg-ocean, .hover-bg-ocean:focus, .hover-bg-ocean:hover {
  background-color: var(--gray-bg) !important;
}

.bc-ocean, .bc-ocean-40, .bc-ocean-60, .bc-ocean-80 {
  border-color: var(--gray-border) !important;
}

/* Gradient ocean → charcoal gradient */
.gradient-ocean {
  background: linear-gradient(165deg, var(--charcoal) 50%, var(--charcoal) 0, var(--charcoal-light) 0) !important;
}

/* Slate → Charcoal Dark */
.bg-slate, .hover-bg-slate:focus, .hover-bg-slate:hover {
  background-color: var(--charcoal-dark) !important;
}

.bg-slate-120, .hover-bg-slate-120:focus, .hover-bg-slate-120:hover {
  background-color: var(--charcoal-dark) !important;
}

/* Mint (green accent) → Charcoal */
.bg-mint, .hover-bg-mint:focus, .hover-bg-mint:hover {
  background-color: var(--charcoal) !important;
}

.mint, .hover-mint:focus, .hover-mint:hover {
  color: var(--charcoal) !important;
}

.bc-mint {
  border-color: var(--charcoal) !important;
}

/* Lavender → Charcoal */
.lavender, .hover-lavender:focus, .hover-lavender:hover {
  color: var(--charcoal) !important;
}

/* White text on dark backgrounds - preserve */
.white, .hover-white:focus, .hover-white:hover {
  color: var(--white) !important;
}

.bg-white, .hover-bg-white:focus, .hover-bg-white:hover {
  background-color: var(--white) !important;
}

/* Ensure black text stays readable */
.black, .hover-black:focus, .hover-black:hover {
  color: var(--charcoal-dark) !important;
}

/* ---------- Navigation ---------- */
.nav-global,
.nav-global.nav-color {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--gray-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

.nav-global.scrolled,
.nav-global.nav-color.scrolled {
  background-color: var(--white) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.nav-list-item a.link-text {
  color: var(--charcoal) !important;
  font-weight: 500 !important;
  transition: var(--transition) !important;
}

.nav-list-item a.link-text:hover {
  color: var(--charcoal-light) !important;
}

.nav-list-item.contact_link {
  background-color: transparent !important;
}

/* Active nav link */
.homepage .home_link,
.casestudiepage .case_link,
.processpage .process_link,
.companypage .company_link,
.contactpage .contact_link,
.srvcpage .services_link,
.pricingpage .pricing_link {
  background-color: var(--charcoal) !important;
  border-radius: 6px !important;
}

.homepage .home_link a.link-text,
.casestudiepage .case_link a.link-text,
.processpage .process_link a.link-text,
.companypage .company_link a.link-text,
.contactpage .contact_link a.link-text,
.srvcpage .services_link span.link-text,
.pricingpage .pricing_link a.link-text {
  color: var(--white) !important;
}

/* Nav phone link */
.number a.link.white,
.number a {
  color: var(--charcoal) !important;
  font-weight: 600 !important;
}

/* Keep the header phone contact on one line and centered in its nav slot. */
.nav-global .nav-list > li.number {
  flex: 0 0 auto !important;
  min-width: max-content;
  white-space: nowrap;
}

.nav-global .nav-list > li.number a {
  display: inline-flex;
  flex: 0 0 auto;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  margin: 0 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Nav CTA button */
.nav-list a.submit,
a.submit {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  transition: var(--transition) !important;
}

.nav-global .nav-list > li:last-child {
  flex: 0 0 auto !important;
  align-self: center;
  min-width: max-content;
}

.nav-global .nav-list > li > a.submit {
  display: inline-flex;
  flex: 0 0 auto;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.nav-list a.submit:hover,
a.submit:hover {
  background-color: var(--charcoal-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium) !important;
}

/* Mobile nav toggle */
.nav-toggle svg line {
  stroke: var(--charcoal) !important;
}

.nav-mobile {
  background-color: var(--white) !important;
}

/* ---------- Hero / Banner Section ---------- */
.main-home-banner,
.hero,
.pt-nav.hero {
  background-color: var(--white) !important;
}

.main-home-banner h1,
.hero h1,
.home-banner-heading {
  color: var(--charcoal-dark) !important;
}

/* Stars */
.txtwrp i.fa-star {
  color: var(--star-gold) !important;
}

.txtwrp span {
  color: var(--charcoal-muted) !important;
}

/* ---------- Buttons (Global) ---------- */
.button-reset.body.bg-mint,
button.bg-mint,
.btn-default,
.submit.btn-default,
button.submit.btn-default,
.button-reset.body.bg-mint.white {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition) !important;
}

.button-reset.body.bg-mint:hover,
button.bg-mint:hover,
.btn-default:hover,
.submit.btn-default:hover,
button.submit.btn-default:hover,
.button-reset.body.bg-mint.white:hover {
  background-color: var(--charcoal-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-medium) !important;
}

/* Arrow icon in buttons */
.rarr.bc-white {
  border-color: var(--white) !important;
}

/* btn-secondary override */
.btn-secondary {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

.btn-secondary:hover {
  background-color: var(--charcoal-dark) !important;
  color: var(--white) !important;
}

.btn:focus, .btn:hover {
  background-color: var(--charcoal-dark) !important;
}

/* .btn-main override */
.btn-main {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Inline style button overrides */
button[style*="background-color:black"],
a[style*="background-color:black"] {
  background-color: var(--charcoal) !important;
  border-radius: var(--radius) !important;
}

/* ---------- Partners / Logo Slider ---------- */
.partners-cta {
  background-color: var(--white) !important;
}

.partners-cta ul li figure img {
  filter: grayscale(100%) !important;
  opacity: 0.5 !important;
  transition: var(--transition) !important;
}

.partners-cta ul li figure img:hover {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* ---------- About / Services Section on Homepage ---------- */
.main-hme-srves-sec {
  background-color: var(--white) !important;
}

.main-hme-srves-sec hr {
  border-color: var(--gray-border) !important;
}

.main-hme-srves-sec p,
.main-hme-srves-sec li {
  color: var(--charcoal-muted) !important;
}

.gryr-bnts .button-reset {
  background-color: var(--charcoal) !important;
}

/* ---------- Our Services Section ---------- */
.main-or-services-sec {
  background-color: var(--gray-bg) !important;
}

.our-inner-cont h3,
.our-inner-cont p {
  color: var(--charcoal) !important;
}

/* ---------- Mid-page CTA Section ---------- */
.main-tri-cta-sec .bg-ocean.gradient-ocean {
  background: var(--charcoal) !important;
  box-shadow: var(--shadow-medium) !important;
  border-radius: var(--radius-lg) !important;
}

.main-tri-cta-sec .bg-ocean.gradient-ocean h2,
.main-tri-cta-sec .bg-ocean.gradient-ocean p {
  color: var(--white) !important;
}

.cta-hme-inner-sec p[style*="color:black"] {
  color: rgba(255,255,255,0.85) !important;
}

.lst-strd-btn,
.hme-cta-btns-sec a {
  background-color: var(--white) !important;
  color: var(--charcoal-dark) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 10px !important;
  display: inline-block !important;
}

.lst-strd-btn:hover,
.hme-cta-btns-sec a:hover {
  background-color: var(--gray-bg) !important;
  color: var(--charcoal-dark) !important;
  transform: translateY(-2px) !important;
}

/* ---------- How We Can Help Section ---------- */
.main-hw-cn-hlp-sec {
  background-color: var(--white) !important;
}

.main-hw-cn-hlp-sec h3 {
  color: var(--charcoal-dark) !important;
}

.hwwe-iner-heading h3 {
  color: var(--charcoal-dark) !important;
}

.hwwe-iner-heading p,
.body-3.slate {
  color: var(--charcoal-muted) !important;
}

.flex-shrink-0 {
  filter: brightness(0) saturate(100%) !important;
  opacity: 0.75 !important;
}

/* ---------- Ready to Publish Section (Dark CTA) ---------- */
.main-prf-sec,
.bg-slate-120.main-prf-sec {
  background-color: var(--charcoal-dark) !important;
}

.main-prf-sec h2,
.main-prf-sec p {
  color: var(--white) !important;
}

.main-prf-sec .button-reset {
  background-color: var(--white) !important;
  color: var(--charcoal-dark) !important;
}

.main-prf-sec .button-reset:hover {
  background-color: var(--gray-bg) !important;
}

/* Pipe/decorative images */
.pipe-top-left,
.pipe-bottom-left,
.pipe-bottom-middle-left,
.pipe-bottom-right {
  opacity: 0.08 !important;
}

/* ---------- Portfolio / Tabs Section ---------- */
.main-tbing-sec,
.main-rcnt-sec {
  background-color: var(--white) !important;
}

.main-tbing-sec ul.tbing li {
  border: 1px solid var(--gray-border) !important;
  color: var(--charcoal) !important;
  background-color: var(--white) !important;
  border-radius: var(--radius) !important;
  transition: var(--transition) !important;
}

.main-tbing-sec ul.tbing li.current {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
  border-color: var(--charcoal) !important;
}

.main-tbing-sec ul.tbing li:hover {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
  border-color: var(--charcoal) !important;
}

/* Portfolio slider arrows */
.main-rcnt-sec .slick-prev,
.main-rcnt-sec .slick-next {
  background: var(--charcoal) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ---------- Testimonials Section ---------- */
.main-hme-testi-sec {
  background-color: var(--white) !important;
}

.main-hme-testi-sec h2 {
  color: var(--charcoal-dark) !important;
}

.slide-content {
  border-color: var(--gray-border) !important;
  background-color: var(--white) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-lg) !important;
}

.slide-content h4 {
  color: var(--charcoal-dark) !important;
}

.slide-content blockquote p {
  color: var(--charcoal-muted) !important;
}

.tsti-sm {
  color: var(--charcoal-dark) !important;
}

/* Slider dots */
.sldr-blts .slider-nav-item {
  background-color: var(--gray-border) !important;
}

.sldr-blts .slider-nav-item.active,
.sldr-blts .slider-nav-item:hover {
  background-color: var(--charcoal) !important;
}

/* ---------- Bottom Form Section ---------- */
.bottom-form,
.main-btm-frm-sec {
  background-color: var(--gray-bg) !important;
}

.bottom-form h2,
.main-btm-frm-sec h2 {
  color: var(--charcoal-dark) !important;
}

.bottom-form p,
.main-btm-frm-sec p {
  color: var(--charcoal-muted) !important;
}

/* Form inputs */
.bot-form form input[type="text"],
.bot-form form input[type="email"],
.bot-form form input[type="number"],
.bot-form form input[type="tel"],
.bot-form form textarea,
.bot-form form select {
  border: 1px solid var(--gray-border) !important;
  border-radius: 6px !important;
  background-color: var(--white) !important;
  color: var(--charcoal) !important;
  transition: var(--transition) !important;
}

.bot-form form input:focus,
.bot-form form textarea:focus,
.bot-form form select:focus {
  border-color: var(--charcoal-light) !important;
  box-shadow: 0 0 0 3px rgba(45,45,45,0.08) !important;
  outline: none !important;
}

.bot-form form input[type="submit"],
.bot-form form button[type="submit"] {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  transition: var(--transition) !important;
}

.bot-form form input[type="submit"]:hover,
.bot-form form button[type="submit"]:hover {
  background-color: var(--charcoal-dark) !important;
  transform: translateY(-1px) !important;
}

/* Banner form */
.mybannerform input,
.mybannerform .input {
  border: 1px solid var(--gray-border) !important;
  border-radius: 6px !important;
  background-color: var(--white) !important;
}

.mybannerform input:focus,
.mybannerform .input:focus {
  border-color: var(--charcoal-light) !important;
  box-shadow: 0 0 0 3px rgba(45,45,45,0.08) !important;
}

.mybannerform .submit {
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
}

/* ---------- Footer ---------- */
.main-footer-sec,
footer.bg-slate,
footer {
  background-color: var(--charcoal-dark) !important;
}

.main-footer-sec h6 {
  color: var(--white) !important;
}

.main-footer-sec p,
.ftr-lgo-f p,
.cnt-ftr p,
.cnt-ftr > a,
.thw p {
  color: rgba(255,255,255,0.7) !important;
}

.main-footer-sec a {
  color: rgba(255,255,255,0.7) !important;
  transition: var(--transition) !important;
}

.main-footer-sec a:hover {
  color: var(--white) !important;
}

.main-prvcy-sec {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.trms-cndnt a {
  color: rgba(255,255,255,0.7) !important;
}

.trms-cndnt a:hover {
  color: var(--white) !important;
}

/* Footer social icons */
.smediaf a img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.7 !important;
  transition: var(--transition) !important;
}

.smediaf a img:hover {
  opacity: 1 !important;
}

/* Call button */
.callusnow {
  color: var(--charcoal) !important;
  border: 2px solid var(--charcoal) !important;
  background: var(--white) !important;
  box-shadow: var(--shadow-medium) !important;
}

.callusnow:hover {
  color: var(--white) !important;
  background: var(--charcoal) !important;
}

/* ---------- Box Shadows Override ---------- */
.bs-soft {
  box-shadow: var(--shadow-card) !important;
  -webkit-box-shadow: var(--shadow-card) !important;
}

.bs-hard {
  box-shadow: var(--shadow-medium) !important;
  -webkit-box-shadow: var(--shadow-medium) !important;
}

.bs-hard-dark {
  box-shadow: 0 1rem 1.5rem 0 rgba(0,0,0,0.12) !important;
  -webkit-box-shadow: 0 1rem 1.5rem 0 rgba(0,0,0,0.12) !important;
}

/* ---------- Service List Check Icons ---------- */
ul.or-srvces-lst li:before {
  color: var(--charcoal) !important;
}

/* ---------- About Us Page ---------- */
/* Value cards inline styles override */
.main-gst-wri-sec {
  background-color: var(--white) !important;
}

.main-gst-wri-sec h1,
.main-gst-wri-sec h2,
.main-gst-wri-sec h3 {
  color: var(--charcoal-dark) !important;
}

/* About us page inline-styled sections */
section[style*="background:#f7f9fc"],
section[style*="background: #f7f9fc"] {
  background: var(--gray-bg) !important;
}

/* Badge pills on about page */
div[style*="background:#c29152"],
span[style*="background:#c29152"] {
  background: var(--charcoal) !important;
  color: var(--white) !important;
}

/* ---------- Services Page ---------- */
.service-title {
  color: var(--charcoal-dark) !important;
}

.service-description {
  color: var(--charcoal-muted) !important;
}

/* CBH Diff Banner */
.cbh-diff-banner {
  background: var(--charcoal-dark) !important;
  color: var(--white) !important;
}

.cbh-diff-banner h2,
.cbh-diff-banner h3,
.cbh-diff-banner p {
  color: var(--white) !important;
}

/* Green CTA banner on services page */
.main-unlt-srve-sec,
.bg-mint.main-unlt-srve-sec {
  background-color: var(--charcoal) !important;
}

.main-unlt-srve-sec h2,
.main-unlt-srve-sec p,
.main-unlt-srve-sec a {
  color: var(--white) !important;
}

/* Ghostwriting page partner bar */
.ghostwritingpage .partners-cta {
  background: var(--charcoal) !important;
}

/* ---------- Contact Page ---------- */
.main-contact-sec {
  background-color: var(--white) !important;
}

/* Contact cards with inline gold bg */
div[style*="background:#AA7127"],
div[style*="background: #AA7127"] {
  background: var(--charcoal) !important;
}

/* Contact form */
.form-box-main {
  background: var(--gray-bg) !important;
  border-radius: var(--radius-lg) !important;
}

.form-box-main h2 {
  color: var(--charcoal-dark) !important;
}

.form-box-main form input[type="text"],
.form-box-main form input[type="email"],
.form-box-main form input[type="number"],
.form-box-main form input[type="tel"],
.form-box-main form textarea,
.form-box-main form select {
  border: 1px solid var(--gray-border) !important;
  border-radius: 6px !important;
  transition: var(--transition) !important;
}

.form-box-main form input:focus,
.form-box-main form textarea:focus,
.form-box-main form select:focus {
  border-color: var(--charcoal-light) !important;
  box-shadow: 0 0 0 3px rgba(45,45,45,0.08) !important;
}

.form-box-main form input[type="submit"],
.bot-form form .ctnt-bnts input[type="submit"] {
  background: var(--charcoal) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

.form-box-main form input[type="submit"]:hover {
  background: var(--charcoal-dark) !important;
  transform: translateY(-1px) !important;
}

/* ---------- Testimonials Page ---------- */
.cbh-proof-wrap {
  background-color: var(--white) !important;
}

.cbh-test-card {
  background: var(--gray-bg) !important;
  border: 1px solid var(--gray-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Case study items */
.cbh-case-item {
  background: var(--white) !important;
}

/* ---------- Pricing Section ---------- */
.prce_box {
  border: 1px solid var(--gray-border) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-lg) !important;
}

.prce_box:hover {
  box-shadow: var(--shadow-medium) !important;
}

.prce_box ul li:before {
  background: var(--charcoal) !important;
}

.prce_box button {
  background: var(--charcoal) !important;
  color: var(--white) !important;
  box-shadow: none !important;
  border-radius: var(--radius) !important;
}

h5.clr-heading-4 {
  background-color: rgba(45,45,45,0.1) !important;
  color: var(--charcoal) !important;
}

.prc_boxess .plus-pri a {
  background: var(--charcoal) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
}

/* Pricing slider arrows */
.pckgslidersec .slick-prev:before,
.pckgslidersec .slick-next:before {
  color: var(--charcoal) !important;
}

/* ---------- Accent Color Overrides (Gold → Charcoal) ---------- */
.cnt-ftr > a.go-to-lcn {
  color: rgba(255,255,255,0.9) !important;
}

/* ---------- FAQ Section ---------- */
[data-faq=active] > h2 {
  background-color: var(--gray-bg) !important;
}

/* ---------- Cookie Banner ---------- */
.cc-window {
  background-color: var(--charcoal-dark) !important;
}

/* ---------- Decorative Dot Patterns ---------- */
/* Inherit the subtle abstract dotted patterns from the reference */

/* ---------- Responsive Adjustments ---------- */
@media screen and (max-width: 991px) {
  .nav-global,
  .nav-global.nav-color {
    background-color: var(--white) !important;
  }

  .nav-list-item a.link-text {
    color: var(--charcoal) !important;
    border-bottom: 1px solid var(--gray-border) !important;
  }

  .cta-hme-inner-sec {
    padding: 30px !important;
  }

  .hme-cta-btns-sec {
    padding: 20px 0 0 0 !important;
  }

  .lst-strd-btn {
    padding: 15px 20px !important;
  }
}

@media screen and (max-width: 767px) {
  .main-home-banner {
    height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }

  .para-wdth {
    width: 100% !important;
  }

  .main-tbing-sec ul.tbing li {
    font-size: 11px !important;
    padding: 5px 12px 8px !important;
    margin: 3px !important;
  }
}

@media screen and (max-width: 480px) {
  .lst-strd-btn,
  .hme-cta-btns-sec a {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    padding: 14px 20px !important;
  }
}

/* ---------- Subtle Decorative Elements ---------- */
/* Clean abstract shapes inspired by the reference image dot patterns */
.main-home-banner::before {
  content: '';
  position: absolute;
  top: 60px;
  right: 30px;
  width: 80px;
  height: 80px;
  background-image: radial-gradient(circle, var(--gray-border) 2px, transparent 2px);
  background-size: 12px 12px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.main-home-banner::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: 30px;
  width: 60px;
  height: 60px;
  background-image: radial-gradient(circle, var(--gray-border) 2px, transparent 2px);
  background-size: 12px 12px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Smooth Link/Button Transitions ---------- */
a,
button,
input[type="submit"],
.button-reset,
.btn,
.submit {
  transition: var(--transition) !important;
}

/* ---------- HR Styling ---------- */
hr {
  border-color: var(--gray-border) !important;
}

/* ---------- Blockquote Styling ---------- */
blockquote {
  border-left: 3px solid var(--charcoal) !important;
}

/* ---------- Scrollbar Styling ---------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-soft);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--charcoal-muted);
}

/* ==========================================================================
   HOMEPAGE ENHANCEMENTS: Hero Book Showcase & Providence Publishing Studio
   ========================================================================== */

/* ---------- Hero Banner Layout & Proper Spacing ---------- */
.main-home-banner {
  background-color: var(--white) !important;
  background-image: radial-gradient(circle at 80% 30%, rgba(38, 166, 154, 0.06) 0%, rgba(255, 255, 255, 0) 60%),
                    radial-gradient(circle at 20% 80%, rgba(212, 168, 67, 0.05) 0%, rgba(255, 255, 255, 0) 50%) !important;
  position: relative;
  overflow: visible;
  padding-top: 100px !important;
  padding-bottom: 60px !important;
  height: auto !important;
  min-height: 720px;
}

.hero-inner-container {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-content-col {
  flex: 1 1 520px;
  max-width: 560px;
  z-index: 2;
}

.hero-subheading {
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal-muted) !important;
  margin-top: 14px;
  margin-bottom: 24px;
}

/* ---------- Main Book Image Showcase ---------- */
.hero-book-showcase-col {
  flex: 1 1 480px;
  max-width: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 10px;
}

.hero-book-showcase {
  position: relative;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

/* Ambient glow */
.hero-book-aura {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(38, 166, 154, 0.22) 0%, rgba(212, 168, 67, 0.16) 42%, rgba(255, 255, 255, 0) 72%);
  border-radius: 50%;
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
  animation: heroAuraPulse 7s ease-in-out infinite alternate;
}

@keyframes heroAuraPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

/* Book Frame & Float Animation */
.hero-book-frame {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: heroBookFloat 6s ease-in-out infinite;
  transform-origin: center bottom;
  will-change: transform;
}

@keyframes heroBookFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(0.8deg);
  }
}

.hero-book-img {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 35px rgba(20, 30, 40, 0.15)) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.06));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-book-frame:hover .hero-book-img {
  transform: scale(1.03) translateY(-4px);
  filter: drop-shadow(0 35px 45px rgba(20, 30, 40, 0.22)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.1));
}

/* Realistic dynamic ground contact shadow */
.hero-book-shadow {
  width: 72%;
  height: 22px;
  background: radial-gradient(ellipse at center, rgba(20, 30, 40, 0.26) 0%, rgba(20, 30, 40, 0.08) 55%, transparent 75%);
  border-radius: 50%;
  margin-top: 6px;
  animation: heroShadowPulse 6s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes heroShadowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.35;
  }
  50% {
    transform: scale(0.85);
    opacity: 0.18;
  }
}

/* Floating Glassmorphic Badges */
.hero-floating-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(220, 220, 220, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal-dark);
  z-index: 3;
  pointer-events: none;
  animation: heroPillFloat 5s ease-in-out infinite alternate;
}

.hero-floating-pill .pill-icon {
  color: var(--star-gold);
  font-size: 14px;
  line-height: 1;
}

.hero-pill-top {
  top: 8%;
  right: -12px;
  animation-delay: 0.4s;
}

.hero-pill-bottom {
  bottom: 8%;
  left: -16px;
  animation-delay: 2s;
}

@keyframes heroPillFloat {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-8px);
  }
}

/* ---------- About Our Publishing Studio Section Styling ---------- */
.about-studio-row {
  align-items: center !important;
}

.about-studio-tag {
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--charcoal-muted);
  margin-bottom: 8px;
}

.about-lead-p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--charcoal);
  margin-bottom: 16px;
}

.about-commitments-list {
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
}

.about-commitments-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--charcoal);
}

.about-commitments-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--charcoal-dark);
  font-weight: 700;
  font-size: 15px;
}

.about-role-box {
  margin: 16px 0;
  padding: 10px 0;
}

.about-role-box b {
  font-size: 16px;
  color: var(--charcoal-dark);
}

.about-role-box small {
  color: var(--charcoal-muted);
  font-weight: 500;
  font-size: 13px;
}

.about-role-box p:last-child {
  font-size: 14px;
  line-height: 1.65;
  color: var(--charcoal-muted);
  margin-top: 6px;
}

/* Image Beside About Section */
.about-studio-media {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.about-studio-img-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray-border);
  background-color: var(--white);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  animation: studioImageGently 7s ease-in-out infinite alternate;
}

@keyframes studioImageGently {
  0% {
    transform: translateY(0);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.05);
  }
  100% {
    transform: translateY(-8px);
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.08);
  }
}

.about-studio-img-wrapper:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 32px 65px rgba(0, 0, 0, 0.16), 0 10px 28px rgba(0, 0, 0, 0.1);
}

.about-studio-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-studio-img-wrapper:hover .about-studio-img {
  transform: scale(1.04);
}

.about-img-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(26, 26, 26, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.about-img-badge i {
  color: var(--star-gold);
}

/* Responsive Rules */
@media screen and (max-width: 991px) {
  .hero-inner-container {
    flex-direction: column !important;
    gap: 36px;
    padding-top: 20px;
    padding-bottom: 30px;
  }
  .hero-content-col {
    max-width: 100%;
  }
  .hero-book-showcase-col {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  .hero-pill-top {
    right: 0;
  }
  .hero-pill-bottom {
    left: 0;
  }
  .about-studio-media {
    margin-top: 30px;
  }
  .about-studio-row {
    flex-direction: column;
  }
}

@media screen and (max-width: 576px) {
  .main-home-banner {
    padding-top: 80px !important;
    padding-bottom: 50px !important;
  }
  .hero-book-showcase-col {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
  }
  .hero-book-showcase {
    max-width: 280px;
    margin: 0 auto;
    align-items: center;
  }
  .hero-floating-pill {
    padding: 6px 14px;
    font-size: 11px;
    white-space: nowrap;
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-book-img {
    max-width: 220px;
  }
  .hero-book-aura {
    width: 200px;
    height: 200px;
  }
  .hero-pill-top {
    margin-bottom: 10px;
  }
  .hero-pill-bottom {
    margin-top: 10px;
  }
  .about-img-badge {
    bottom: 10px;
    left: 10px;
    font-size: 11px;
    padding: 6px 12px;
  }
  .about-commitments-list li {
    font-size: 13.5px;
    padding-left: 24px;
  }
}

.main-hme-srves-sec .gryr-bnts {
  padding-top: 24px !important;
  text-align: center;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .hero-book-frame,
  .hero-book-shadow,
  .hero-floating-pill,
  .hero-book-aura,
  .about-studio-img-wrapper {
    animation: none !important;
  }
}