/* ============================================================
   LAWYER WEBSITE — BLACK & GOLD PREMIUM THEME
   Drop-in replacement for demos/lawyer/lawyer.css
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=DM+Sans:wght@300;400;500;600&display=swap");

/* ── 1. DESIGN TOKENS ───────────────────────────────────────── */
:root {
  /* --gold:           #c9a84c;     */
 --gold-gradient: linear-gradient(
    90deg,
    #c79b3b 0%,
    #ddb86a 35%,
    #f2e3b3 70%,
    #ffffff 100%
  );
  --obsidian: #111111;
  --onyx: #111111;
  --charcoal: #1a1a1a; /* card / panel bg */
  --iron: #242424; /* elevated surface */
  --smoke: #9a9a9a; /* body text on dark */
  --ash: #6b6b6b; /* muted text */
  --white: #ffffff;
  --off-white: #f0ece4; /* warm white for headings */

  /* legacy token remapping */
  --base-color: var(--gold-gradient);
  --dark-gray: var(--charcoal);
  --medium-gray: var(--smoke);
  --very-light-gray: var(--onyx);

  --alt-font: "Playfair Display", serif;
  --primary-font: "DM Sans", sans-serif;
}

/* ── 2. GLOBAL RESET ────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background-color: var(--obsidian) !important;
  color: var(--smoke) !important;
  font-family: var(--primary-font) !important;
  font-size: 17px;
  line-height: 32px;
  -webkit-font-smoothing: antialiased;
}

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6,
.alt-font {
  font-family: var(--primary-font) !important;
  /* color: var(--off-white) !important; */
}

p,
li,
span,
div {
  color: inherit;
}

a {
  /* color: var(--gold-gradient) !important; */
  text-decoration: none !important;
  transition: color 0.25s ease;
}

a:hover {
  color: var(--gold-light) !important;
}
p {
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.04em;
}
.text-dark-gray,
.text-dark-gray-hover:hover {
  color: var(--off-white) !important;
}

.text-base-color {
  color: var(--gold-gradient) !important;
}
.text-white {
  color: var(--white) !important;
}

/* Gold underline decoration */
/* .text-decoration-line-bottom,
.text-decoration-line-bottom-medium {
  background-image: linear-gradient(var(--gold-gradient), var(--gold-gradient)) !important;
} */

/* ── 4. HEADER / NAV ────────────────────────────────────────── */
header {
  background: transparent;
}

/* header .navbar,
header.sticky .navbar {
  background-color: rgba(10, 10, 10, 0.96) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

header.sticky .navbar {
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.7) !important;
} */

header .navbar-brand img {
  max-height: 36px;
}

/* Nav links */
.navbar .navbar-nav .nav-link {
  font-family: var(--primary-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  /* color: rgba(240, 236, 228, 0.75) !important; */
  color: #fff !important;
  letter-spacing: 0.04em;
  transition: color 0.25s ease;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link {
  color: var(--gold-gradient) !important;
}

/* Dropdown */
.navbar .navbar-nav .dropdown-menu {
  background-color: var(--charcoal) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
  border-radius: 4px !important;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
  border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
  padding: 14px 20px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--smoke) !important;
  transition:
    background 0.2s,
    color 0.2s;
}

.navbar
  .navbar-nav
  .dropdown.dropdown-with-icon-style02
  .dropdown-menu
  li
  a:hover,
.navbar
  .navbar-nav
  .dropdown.dropdown-with-icon-style02
  .dropdown-menu
  li.active:hover
  > a {
  background-color: var(--gold-gradient) !important;
  color: var(--obsidian) !important;
}

.navbar
  .navbar-nav
  .dropdown.dropdown-with-icon-style02
  .dropdown-menu
  li:hover
  img {
  filter: brightness(0) invert(1) !important;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu {
  width: 310px !important;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a {
  color: var(--smoke) !important;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a p {
  line-height: 20px;
  color: var(--ash) !important;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li.active > a,
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a:hover {
  color: var(--gold-gradient) !important;
}

/* Hamburger lines */
.navbar-toggler-line {
  background-color: var(--gold-gradient) !important;
}

header .widget-text a:hover {
  color: var(--gold-gradient) !important;
}

/* Left nav divider pseudo */
header .left-nav .navbar-nav::before {
  background-color: rgba(201, 168, 76, 0.15) !important;
}

/* ── 5. BUTTONS ─────────────────────────────────────────────── */
.btn {
  font-family: var(--primary-font) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}

/* White btn → Gold */
.btn-white,
.btn.btn-white {
  background-color: var(--gold-gradient) !important;
  color: var(--obsidian) !important;
  border-color: var(--gold-gradient) !important;
}

/* .btn-white:hover,
.btn.btn-white:hover {

  border: none !important;
  border-color: var(--gold-gradient) !important;
} */

/* Dark gray btn */
/* .btn-dark-gray,
.btn.btn-dark-gray {
  background-color: var(--gold-gradient) !important;
  color: var(--obsidian) !important;
  border-color: var(--gold-gradient) !important;
}

.btn-dark-gray:hover,
.btn.btn-dark-gray:hover {
  background-color: transparent !important;
  color: var(--gold-gradient) !important;
  border-color: var(--gold-gradient) !important;
} */

/* Transparent white btn */
/* .btn-transparent-white,
.btn.btn-transparent-white {
  background-color: transparent !important;
  color: var(--gold-gradient) !important;
  border-color: rgba(201, 168, 76, 0.5) !important;
} */

.btn-transparent-white:hover,
.btn.btn-transparent-white:hover {
  background-color: var(--gold-gradient) !important;
  color: var(--obsidian) !important;
  border-color: var(--gold-gradient) !important;
}

/* "with-rounded" arrow badge */
.btn.with-rounded span,
.with-rounded span {
  background-color: var(--obsidian) !important;
  color: var(--gold-gradient) !important;
  border: 1px solid rgba(201, 168, 76, 0.3);
}

.btn.with-rounded:hover span {
  background-color: var(--gold-dim) !important;
  color: var(--off-white) !important;
}

/* Blue-whale btn override */
.btn.btn-blue-whale {
  background-color: var(--gold-gradient) !important;
  color: var(--obsidian) !important;
  border-color: var(--gold-gradient) !important;
}

.btn.btn-blue-whale:hover {
  background-color: transparent !important;
  border-color: var(--gold-gradient) !important;
  color: var(--gold-gradient) !important;
}

/* Rounded sizes */
/* .btn.btn-rounded.btn-extra-large { padding: 18px 66px 18px 40px; font-size: 17px; }
.btn.btn-rounded.btn-large        { padding: 16px 55px 16px 38px; font-size: 16px; }
.btn.btn-large                    { font-size: 15px; } */

/* ── 6. SECTIONS BACKGROUND OVERRIDES ───────────────────────── */

/* Hero */
section.p-0.bg-dark-gray {
  background-color: var(--obsidian) !important;
}

/* About intro */
section:not([class*="bg-"]) {
  background-color: var(--obsidian) !important;
}

/* Ticker / marquee bar (was bg-very-light-gray) */
section.bg-very-light-gray,
.bg-very-light-gray {
  /* background-color: #0a0a0a !important; */
  border-top: 1px solid rgba(201, 168, 76, 0.12) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12) !important;
}

/* Practice areas dark section */
section.bg-blue-whale,
.bg-blue-whale {
  background-color: var(--obsidian) !important;
}

/* Stats / counter strip */
section.bg-gradient-dark-transparent,
.bg-gradient-dark-transparent {
  background: linear-gradient(
    to top,
    var(--obsidian) 7%,
    transparent 70%
  ) !important;
}

/* Team section */
section.bg-blue-licorice,
.bg-blue-licorice {
  background-color: var(--charcoal) !important;
}

/* Generic alt bg */
.bg-dark-gray {
  background-color: var(--onyx) !important;
}

/* ── 7. ABOUT / IMAGE CARD ──────────────────────────────────── */
/* "18 years of experience" floating card */
.position-absolute.bg-white.box-shadow-quadruple-large.border-radius-5px {
  background-color: var(--charcoal) !important;
  border: 1px solid rgba(201, 168, 76, 0.25) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

.position-absolute.bg-white.box-shadow-quadruple-large.border-radius-5px
  .text-dark-gray {
  color: var(--gold-gradient) !important;
}

.position-absolute.bg-white.box-shadow-quadruple-large.border-radius-5px
  .alt-font.fw-700 {
  color: var(--gold-gradient) !important;
}

/* Gold accent circle behind the card */
.h-150px.w-150px.bg-base-color {
  background: radial-gradient(
    circle,
    var(--gold-dim) 0%,
    transparent 70%
  ) !important;
  opacity: 0.5;
}

/* ── 8. CHECKLIST / BULLET ICONS ────────────────────────────── */
.list-style-02 li i.feather {
  color: var(--gold-gradient) !important;
}

.list-style-02 li {
  color: var(--off-white) !important;
}

/* ── 9. PRACTICE AREAS CARDS ────────────────────────────────── */
.interactive-banner-style-08 figure figcaption {
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.92) 40%,
    rgba(10, 10, 10, 0.3) 100%
  ) !important;
}

.interactive-banner-style-08:hover figure figcaption {
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.96) 50%,
    rgba(10, 10, 10, 0.55) 100%
  ) !important;
}

/* Arrow circle on cards */
.circle-box.bg-white.rounded-circle {
  background-color: var(--gold-gradient) !important;
  border: none !important;
}

.circle-box.bg-white.rounded-circle i {
  color: var(--obsidian) !important;
}

.circle-box.bg-white.rounded-circle:hover {
  background-color: var(--gold-light) !important;
}

/* ── 11. COUNTERS / STATS STRIP ─────────────────────────────── */
.counter-style-02 .counter-content span,
.counter-style-03 .counter-content span {
  color: var(--gold-gradient) !important;
}

/* Generic large counter numbers */
[class*="counter"] .fw-700,
[class*="counter"] .alt-font {
  color: var(--gold-gradient) !important;
}

/* ── 12. PROCESS STEPS ──────────────────────────────────────── */
.process-step-style-02 .process-step-icon,
.process-step-style-03 .process-step-icon-box,
.process-step-style-04 .process-step-icon-box {
  background-color: var(--iron) !important;
  border-color: rgba(201, 168, 76, 0.2) !important;
}

.process-step-style-02:hover .process-step-icon .number,
.process-step-style-03:hover .process-step-icon-box .number {
  color: var(--gold-gradient) !important;
}

.process-step-style-02:hover .process-step-icon,
.process-step-style-03:hover .process-step-icon-box {
  background-color: var(--gold-dim) !important;
  border-color: var(--gold-gradient) !important;
}

/* ── 13. TEAM / ATTORNEY CARDS ──────────────────────────────── */
.team-style-07,
.team-style-08 {
  background-color: var(--charcoal) !important;
  border: 1px solid rgba(201, 168, 76, 0.12) !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.team-style-07:hover,
.team-style-08:hover {
  border-color: rgba(201, 168, 76, 0.4) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
}

.team-style-07 .team-member-name,
.team-style-08 .team-member-name {
  color: var(--off-white) !important;
}

.team-style-07 .team-member-position,
.team-style-08 .team-member-position {
  color: var(--gold-gradient) !important;
}

/* Social icons on team */
.social-icon-style-02 li a,
.social-icon-style-04 li a {
  color: var(--smoke) !important;
  border-color: rgba(201, 168, 76, 0.25) !important;
}

.social-icon-style-02 li a:hover,
.social-icon-style-04 li a:hover {
  color: var(--gold-gradient) !important;
  border-color: var(--gold-gradient) !important;
  background-color: transparent !important;
}

/* ── 14. BLOG / JOURNAL CARDS ───────────────────────────────── */
.card {
  background-color: var(--charcoal) !important;
  border: 1px solid rgba(201, 168, 76, 0.1) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease;
}

.card:hover {
  border-color: rgba(201, 168, 76, 0.35) !important;
  transform: translateY(-4px);
}

.card-body {
  background-color: var(--charcoal) !important;
}

.card-title,
.card-title a {
  color: var(--off-white) !important;
}

.card-title a:hover {
  color: var(--gold-gradient) !important;
}

/* Blog category badge */
.categories-btn.bg-white {
  background-color: var(--gold-gradient) !important;
  color: var(--obsidian) !important;
}

.categories-btn.bg-white:hover {
  background-color: var(--gold-light) !important;
}

/* Blog meta */
.blog-date,
.author-name,
.author-name a {
  color: var(--ash) !important;
}

.author-name a:hover {
  color: var(--gold-gradient) !important;
}

/* Like count */
.like-count a i {
  color: var(--gold-gradient) !important;
}
.like-count span {
  color: var(--smoke) !important;
}

/* ── 15. TESTIMONIALS ───────────────────────────────────────── */
.testimonials-style-02,
.testimonials-style-04 {
  background-color: var(--charcoal) !important;
  border: 1px solid rgba(201, 168, 76, 0.12) !important;
}

.testimonials-style-02 .testimonial-content,
.testimonials-style-04 .testimonial-content {
  color: var(--smoke) !important;
}

.testimonials-style-02 .rating i,
.testimonials-style-04 .rating i {
  color: var(--gold-gradient) !important;
}

/* ── 16. ACCORDION / FAQ ────────────────────────────────────── */
.accordion-item {
  /* background-color: var(--charcoal) !important; */
  /* border: 1px solid rgba(201, 168, 76, 0.12) !important; */
  border-radius: 4px !important;
  margin-bottom: 6px;
}

.accordion-button {
  background-color: var(--charcoal) !important;
  color: var(--off-white) !important;
  font-family: var(--alt-font) !important;
  font-weight: 500 !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--iron) !important;
  color: var(--gold-gradient) !important;
  box-shadow: none !important;
}

.accordion-button::after {
  filter: invert(80%) sepia(40%) saturate(600%) hue-rotate(5deg) brightness(95%) !important;
}

.accordion-body {
  /* background-color: var(--iron) !important;
  color: var(--smoke) !important;
  padding: 25px !important; */
  border-top: 1px solid rgba(201, 168, 76, 0.1) !important;
}

/* ── 17. FORMS / INPUTS ─────────────────────────────────────── */
/* .form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background-color: var(--charcoal) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  color: var(--off-white) !important;
  border-radius: 4px !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
} */

/* .form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background-color: var(--iron) !important;
  border-color: var(--gold-gradient) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15) !important;
  color: var(--off-white) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ash) !important;
} */

/* .input-small,
.textarea-small {
  font-size: 14px;
  color: var(--smoke) !important;
} */

/* ── 18. DIVIDERS ───────────────────────────────────────────── */
.divider-style-03,
hr,
[class*="divider"] {
  border-color: rgba(201, 168, 76, 0.15) !important;
}

/* .border-color-transparent-white-light {
  border-color: rgba(201, 168, 76, 0.15) !important;
} */

/* Gold accent dividers */
.border-color-base-color,
.divider-style-03-03.border-color-base-color {
  border-color: #a8883f !important;
}

/* ── 19. PAGINATION ─────────────────────────────────────────── */
.pagination-style-01 .page-item.active .page-link,
.pagination-style-01 .page-item .page-link:hover {
  background: var(--gold-gradient) !important;
  color: var(--obsidian) !important;
  border-color: var(--gold-gradient) !important;
}

.pagination-style-01 .page-item .page-link {
  background: var(--charcoal) !important;
  color: var(--smoke) !important;
  border-color: rgba(201, 168, 76, 0.15) !important;
}

.pagination-style-01 .page-item:first-child .page-link,
.pagination-style-01 .page-item:last-child .page-link {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--gold-gradient) !important;
}

.pagination-style-01 .page-item:first-child .page-link:hover,
.pagination-style-01 .page-item:last-child .page-link:hover {
  color: var(--gold-light) !important;
}

/* ── 20. SCROLL PROGRESS ────────────────────────────────────── */
.scroll-progress .scroll-top {
  color: var(--gold-gradient) !important;
}

.scroll-progress .scroll-line {
  background-color: rgba(201, 168, 76, 0.25) !important;
}

.scroll-progress .scroll-point {
  background-color: var(--gold-gradient) !important;
}

/* ── 21. CUSTOM CURSOR ──────────────────────────────────────── */
.custom-cursor .circle-cursor-inner {
  background-color: var(--gold-gradient) !important;
  width: 10px;
  height: 10px;
}

.custom-cursor .circle-cursor-inner.cursor-link-hover {
  background-color: var(--gold-light) !important;
}

.custom-cursor .circle-cursor-outer {
  border: 1px solid rgba(201, 168, 76, 0.45) !important;
}

/* ── 22. FOOTER ─────────────────────────────────────────────── */
footer,
footer.footer-dark,
footer.bg-blue-whale {
  /* background-color: var(--onyx) !important; */
  background-color: var(--obsidian) !important;
  color: var(--ash) !important;
}

footer.footer-dark p,
footer.footer-dark a,
.footer-dark p,
.footer-dark a {
  color: var(--ash) !important;
}

footer a:hover {
  color: var(--gold-gradient) !important;
}

footer .footer-logo img {
  max-height: 36px;
}

/* CTA banner inside footer */
footer .footer-top h5 {
  color: var(--off-white) !important;
}

footer .footer-top .text-decoration-line-bottom-medium {
  color: var(--gold-gradient) !important;
}

/* Footer nav links */
footer .footer-navbar .nav-link {
  color: var(--ash) !important;
}

footer .footer-navbar .nav-link:hover {
  color: var(--gold-gradient) !important;
}

/* Dividers in footer */
footer .divider-style-03 {
  border-color: rgba(201, 168, 76, 0.12) !important;
}

/* Footer location / contact icons */
footer .bi {
  color: var(--gold-gradient) !important;
}

/* ── 23. HERO SLIDER OVERLAYS ───────────────────────────────── */
/* .swiper-slide.cover-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(10, 10, 10, 0.78) 0%,
    rgba(10, 10, 10, 0.35) 60%,
    transparent 100%
  );
  pointer-events: none;
} */

/* ── 24. GOLD ACCENT SHAPES ─────────────────────────────────── */
/* The decorative scale image in footer CTA */
footer .position-absolute img {
  opacity: 0.15 !important;
  filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.2);
}

/* ── 25. MISC UTILITY OVERRIDES ─────────────────────────────── */
.opacity-05 {
  opacity: 0.05;
}
.opacity-09 {
  opacity: 0.09;
}

/* Fancy text effect label (rotating words) */
.fancy-text-style-4 span[data-fancy-text] {
  color: var(--gold-gradient) !important;
}

/* Box shadows on dark theme */
.box-shadow-quadruple-large {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

/* Page title */
.page-title-large h1 {
  font-size: 4rem !important;
  line-height: 3.9rem !important;
  color: var(--off-white) !important;
}

/* bg-gradient overlay used on practice area cards */
.bg-gradient-gray-light-dark-transparent {
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.95) 0%,
    transparent 100%
  ) !important;
}

/* SVG / PNG icon images — keep gold filter */
.demo-lawyer-practice-icon,
[src*="demo-lawyer-home-icon"] {
  filter: sepia(1) saturate(4) hue-rotate(-20deg) brightness(1.1) !important;
}

/* ── 26. MOBILE NAV ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .navbar-collapse {
    background-color: rgba(10, 10, 10, 0.97) !important;
    border-top: 1px solid rgba(201, 168, 76, 0.15) !important;
    padding: 20px !important;
  }

  header .widget-text {
    color: var(--smoke) !important;
  }
  header .widget-text i {
    color: var(--gold-gradient) !important;
  }

  .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .navbar
    .navbar-nav
    .dropdown.dropdown-with-icon-style02
    .dropdown-menu
    li
    a:hover,
  .navbar
    .navbar-nav
    .dropdown.dropdown-with-icon-style02
    .dropdown-menu
    li.active:hover
    > a {
    background-color: transparent !important;
    color: var(--gold-gradient) !important;
  }

  .elements-social.social-icon-style-04 .large-icon a {
    font-size: 21px;
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 1400px) {
  .xl-min-h-270px {
    min-height: 270px !important;
  }
}

@media (max-width: 1300px) {
  .navbar .navbar-nav .nav-link {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 1199px) {
  footer .nav-link {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .navbar .navbar-nav .nav-link {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 1024px) {
  .navbar .navbar-nav .nav-link {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 767px) {
  .process-step-style-02 .progress-step-separator,
  .process-step-style-03 .progress-step-separator,
  .process-step-style-04 .progress-step-separator {
    display: block;
  }
}

@media (max-width: 575px) {
  .process-step-style-02 .progress-step-separator,
  .process-step-style-03 .progress-step-separator,
  .process-step-style-04 .progress-step-separator {
    display: none;
  }
}

/* ── 27. SUBTLE GOLD GLOW ON HEADINGS ───────────────────────── */
h1 .fw-700.font-style-italic,
h2 .fw-700.font-style-italic,
h3 .fw-700.font-style-italic {
  color: var(--gold-gradient) !important;
}

/* Hero italic bold text gold */
.text-shadow-double-large .fw-700.font-style-italic {
  color: var(--gold-light) !important;
}

/* ── 28. GOLD SEPARATOR LINES ───────────────────────────────── */
.col-lg-1 .divider-style-03-03 {
  border-top: 2px solid var(--gold-gradient) !important;
}

/* ── 29. IS-TOUCHABLE CURSOR HIDE ───────────────────────────── */
.is-touchable .cursor-page-inner {
  display: none !important;
}

/* ── 30. CONTEXTUAL GOLD BADGES / LABELS ────────────────────── */
.fs-19.text-base-color.text-decoration-line-bottom {
  color: var(--gold-gradient) !important;
  font-family: var(--primary-font) !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px !important;
}

/* ── END ────────────────────────────────────────────────────── */

.text-fill-outline {
  color: #c9a84c;
}

:root {
  /* --gold:#c9a84c;
    --gold-light:#e2c97e;
    --gold-dim:rgba(201,168,76,0.25); */
  --bg: #0a0a0a;
  --text-white: rgba(255, 255, 255, 0.95);
  --text-muted: rgba(255, 255, 255, 0.45);
}
.section-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  font-family: "DM Sans", system-ui, sans-serif;
  padding: 0 24px;
}
.gold-bg-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #a8883f;
  z-index: 0;
  width: 10%;
  transition: width 0.8s cubic-bezier(0.4, 0.6, 0.4, 1);
}
.inner-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  min-height: 480px;
}
.right-panel {
  flex: 0 0 50%;
  padding: 56px 0 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid rgb(255 255 255 / 39%);
}
.top-text {
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-white);
  margin-bottom: 36px;
}
.highlight-wrap {
  display: inline;
  position: relative;
}
.highlight-wrap span.underline-img {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 14px;
  /* overflow:hidden; */
  /* clip-path:inset(0 100% 0 0); */
  transition: clip-path 1s cubic-bezier(0.4, 0.6, 0.4, 1);
  pointer-events: none;
}
.highlight-wrap span.underline-img.revealed {
  clip-path: inset(0 0 0 0);
}
.highlight-wrap span.underline-img svg {
  width: 100%;
  height: 14px;
}
.tab-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-left: 0 !important;
}
.tab-nav li button {
  all: unset;
  cursor: pointer;
  font-size: 42px;
  /* font-family:'Playfair Display','Georgia',serif; */
  font-weight: 500;
  color: var(--text-muted);
  line-height: 110%;
  transition: color 0.3s ease;
  display: block;
  padding: 6px 0;
}
.tab-nav li button:hover {
  color: rgba(255, 255, 255, 0.7);
}
.tab-nav li button.active {
  color: var(--text-white);
}
.bottom-text {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 40%);
}
.bottom-text strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 8px;
}
.bottom-text p {
  /* font-size:14px;
    line-height:1.7; */
  color: rgba(255, 255, 255, 0.55);
  max-width: 320px;
}
.left-panel {
  flex: 1;
  padding: 56px 48px 56px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-images {
  position: relative;
  /* width:100%; */
  /* width: 750px; */
  height: 550px;
  border-radius: 16px;
  overflow: hidden;
}
.tab-img-item {
  display: none;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.tab-img-item.active {
  display: block;
}
.img-placeholder {
  width: 100%;
  /* height: 350px; */
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}
.img-placeholder img {
  width: 100%;
  height: 550px;
  object-fit: cover;
}
.figcaption-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.7) 0,
    rgba(0, 0, 0, 0.15) 100%
  );
  z-index: 2;
}
.arrow-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
  cursor: pointer;
  transition: background 0.2s;
}
.arrow-circle:hover {
  background: var(--gold-gradient);
}
.arrow-circle svg {
  width: 28px;
  height: 28px;
}
.discover-link {
  margin-top: auto;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.discover-link:hover {
  opacity: 1;
  color: var(--gold-light);
}

.accordion-style-02 .accordion-item .accordion-body {
  padding: 25px 25px 30px 0 !important;
}

/* sticky section css */

/* ── Section base ───────────────────────────────────────────────── */
.sc-section {
  background-color: #0a0a0a;
}

/* ── Stack item base ────────────────────────────────────────────── */
.stack-card .sc-item {
  background-color: #111111 !important;
  border-radius: 0 !important;
  position: sticky;
  /* top: 60px; */
  top: 0px;
}

/* .stack-card .sc-item[data-index="0"] { z-index: 3; }
.stack-card .sc-item[data-index="1"] { z-index: 2; }
.stack-card .sc-item[data-index="2"] { z-index: 1; } */

/* ── Borders ────────────────────────────────────────────────────── */
.border-color-sc-subtle {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Left col ───────────────────────────────────────────────────── */
.sc-left-col {
  padding-top: 80px;
  padding-bottom: 80px;
  padding-right: 60px;
}

@media (max-width: 991px) {
  .sc-left-col {
    padding: 50px 0 30px;
  }
}

/* ── Right col ──────────────────────────────────────────────────── */
.sc-right-col {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 1600px) {
  .sc-right-col {
    padding-top: 8% !important;
    padding-bottom: 8% !important;
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
}

@media (max-width: 991px) {
  .sc-right-col {
    padding: 0 0 50px !important;
    border-left: none !important;
  }
}

/* ── Number badge ───────────────────────────────────────────────── */
.sc-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #9a9a9a;
  margin-bottom: 36px;
}

/* ── Heading ────────────────────────────────────────────────────── */
.sc-heading {
  /* font-family: 'Playfair Display', serif !important; */
  color: #f0ece4 !important;
  font-size: clamp(28px, 3vw, 44px) !important;
  line-height: 1.15 !important;
}

/* ── Highlight underline — gold tint ───────────────────────────── */
.sc-highlight {
  color: #f0ece4 !important;
  box-shadow: none !important;
  display: inline-block;
}

.sc-hl-img {
  filter: sepia(1) saturate(6) hue-rotate(-20deg) brightness(1);
}

/* ── Arrow icon ─────────────────────────────────────────────────── */
.sc-arrow-icon {
  font-size: 28px;
  color: #9a9a9a;
}

/* ── Body wrap ──────────────────────────────────────────────────── */
.sc-body-wrap {
  padding-top: 40px;
  margin-top: 40px;
}

@media (max-width: 1199px) {
  .sc-body-wrap {
    padding-top: 24px;
    margin-top: 24px;
  }
}

/* ── Body text ──────────────────────────────────────────────────── */
.sc-body {
  /* color: #9a9a9a !important;
    font-size: 15px;
    line-height: 1.75; */
  max-width: 88%;
}

@media (max-width: 991px) {
  .sc-body {
    max-width: 100%;
  }
}

/* ── Underline span ─────────────────────────────────────────────── */
.sc-underline {
  color: #f0ece4 !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.5);
  padding-bottom: 1px;
}

/* ── Button ─────────────────────────────────────────────────────── */
.btn.sc-btn {
  background: linear-gradient(
                    90deg,
                    #8a6a2f 0%,
                    #b8964d 20%,
                    #f5e8b8 40%,
                    #fff6d6 50%,
                    #f5e8b8 60%,
                    #b8964d 80%,
                    #8a6a2f 100%
                  );
  color: #0a0a0a !important;
  border: none;
  /* border-color: #c9a84c !important; */
  font-weight: 500 !important;
  box-shadow: none !important;
  transition:
    background-color 0.25s ease,
    transform 0.2s ease !important;
}

.btn.sc-btn:hover {
  background-color: #e2c97e !important;
  border-color: #e2c97e !important;
  transform: translateY(-2px);
}

.btn.sc-btn .feather {
  color: #0a0a0a !important;
}

/* ── Floating badge ─────────────────────────────────────────────── */
.sc-badge {
  background: linear-gradient(
                    90deg,
                    #8a6a2f 0%,
                    #b8964d 20%,
                    #f5e8b8 40%,
                    #fff6d6 50%,
                    #f5e8b8 60%,
                    #b8964d 80%,
                    #8a6a2f 100%
                  ) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

.sc-badge span {
  color: #0a0a0a !important;
}

.sc-badge-icon {
  filter: brightness(0) !important; /* dark icon on gold bg */
}

/* ── Decorative glow blob ───────────────────────────────────────── */
.sc-decor {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgb(201 168 76 / 62%) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(50px);
    animation: 8s linear infinite rotation;
    -webkit-animation: 8s linear infinite rotation;
}

.sc-decor-left {
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
}

.sc-decor-right {
    right: -40px;
    bottom: -60px;
}

@keyframes rotation {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@media (max-width: 991px) {
    .sc-decor { display: none; }
}
.bg-gold {
  background-color: var(--gold-gradient);
}
.border-color-light-white {
  border-color: #000;
}

.nav a,
.nav-drop > span {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  position: relative;
  transition: color 0.3s ease;
  cursor: pointer;
}

.btn-nav {
  /* background-color: rgba(201, 169, 110, 0.15); */
  background-image: url("/images/button-adv.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--black);
  padding: 12px 26px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}
.nav a::after,
.nav-drop > span::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold-gradient);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav a:hover,
.nav-drop:hover > span {
  color: #a8883f;
}
.btn-nav:hover {
  background-color: rgba(201, 169, 110, 0.32);
  transform: rotate(-0.6deg);
}
.main-content {
    position: relative;
    z-index: 2;
}

/* testimonial css */

/* ── Reset & base ───────────────────────────────────────── */
.ts-section {
    background-color: #0d0d0d;
    width: 100%;
}
.ts-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}
.ts-spacer { padding-top: 8.3vw; }

/* ── TOP BAR ─────────────────────────────────────────────
   12-col logic:
   col 1-2  → label
   col 5    → counter (starts at 33% offset)
   col 12   → arrows (pushed to far right)
   ─────────────────────────────────────────────────────── */
.ts-top-bar {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.625rem;
    align-items: center;
    margin-bottom: 5.7vw;
}

.ts-top-label {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c9a84c;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.ts-label-text {
    font-size: max(0.72rem, 0.78vw);
    font-weight: 500;
    letter-spacing: .1em;
    color: #c9a84c;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.ts-top-center {
    grid-column: 5 / 9;
    display: flex;
    align-items: center;
}

.ts-counter {
    font-size: max(1rem, 1.2vw);
    color: #c9a84c;
    font-weight: 400;
    letter-spacing: .02em;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.ts-top-arrows {
    grid-column: 11 / 13;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

/* ── Arrow buttons ───────────────────────────────────────── */
.ts-arrow {
    width: clamp(34px, 2.2vw, 42px);
    height: clamp(34px, 2.2vw, 42px);
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.45);
    color: #c9a84c;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
    flex-shrink: 0;
}
.ts-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ts-arrow:hover {
    background: #c9a84c;
    color: #0d0d0d;
    border-color: #c9a84c;
}

/* ── Name track ──────────────────────────────────────────── */
.ts-name-track-wrap {
    overflow: hidden;
    width: 100%;
    padding-bottom: 2.6vw;
}

.ts-name-track {
    display: flex;
    align-items: flex-end;
    transition: transform 0.8s cubic-bezier(.25, .1, .25, 1);
    will-change: transform;
}

.ts-name-slide {
    flex: 0 0 33.333%;
    min-width: 0;
    padding-right: 40px;
}

.ts-name {
    color: #828282;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(15px, 1.25vw, 22px);
    font-weight: 400;
    line-height: 1.15;
    margin: 0;
    transition: color 0.8s cubic-bezier(.25, .1, .25, 1);
}
.ts-name.ts-active {
    color: #f0ece4;
}

/* ── Divider ─────────────────────────────────────────────── */
.ts-divider {
    width: 100%;
    height: 1px;
    background: rgba(172, 172, 172, 0.2);
    margin-bottom: 2.6vw;
}

/* ── Review text grid ────────────────────────────────────── */
.ts-review-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.625rem;
}

/* review text sits in cols 5-9 — matching original layout */
.ts-review-cell {
    grid-column: 5 / 9;
    position: relative;
    min-height: 180px;
}

/* ── Fade slides ─────────────────────────────────────────── */
.ts-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(.25, .1, .25, 1);
}
.ts-fade.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.ts-review-text {
    font-size: max(1.05rem, 1.1vw);
    font-weight: 400;
    line-height: 1.55;
    color: #c8c5be;
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    .ts-container { padding: 0 24px; }
    .ts-top-bar { grid-template-columns: 1fr 1fr; }
    .ts-top-label { grid-column: 1 / 2; }
    .ts-top-center { grid-column: 1 / 2; margin-top: 16px; }
    .ts-top-arrows { grid-column: 2 / 3; grid-row: 1; }
    .ts-name-slide { flex: 0 0 50%; }
    .ts-review-grid { grid-template-columns: 1fr; }
    .ts-review-cell { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
    .ts-name-slide { flex: 0 0 100%; }
}


/* ── Section & container ────────────────────────────────────── */
.cta2-section {
    width: 100%;
}

.cta2-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

.cta2-spacer {
    padding-top: 8.3vw;
}

/* ── 12-col grid ────────────────────────────────────────────── */
.cta2-main-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(16px, 1fr));
    grid-template-rows: min-content;
    gap: 0.625rem;
    align-items: start;
    width: 100%;
}

/* left: cols 2-6 */
.cta2-left {
    grid-column: 2 / 7;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    /* padding-top: 1vw; */
}

/* right: cols 7-12 */
.cta2-form-box {
    grid-column: 7 / 12;
    grid-row: 1;
    /* background-color: #111111;
    border-radius: 3px;
    padding: 5.2vw; */
    width: 100%;
}

/* ── Left heading area ──────────────────────────────────────── */
.cta2-heading-wrap {
    display: flex;
    flex-direction: column;
    gap: 2.8vw;
}

.cta2-heading {
    font-size: clamp(36px, 4.5vw, 80px);
    font-weight: 400;
    line-height: 1.05;
    color: #1a1a1a;
    margin: 0;
}

.cta2-desc {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: max(1.05rem, 1.1vw);
    /* font-weight: 500;
    line-height: 1.46;
    color: #2a2a2a; */
    max-width: 35ch;
    margin: 0;
}

/* ── Tab menu ───────────────────────────────────────────────── */
.cta2-tab-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2vw;
    gap: 0;
}

.cta2-tab-btn {
    all: unset;
    cursor: pointer;
    width: 50%;
    text-align: center;
    padding: 0 0 0.8rem;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: max(1.2rem, 1.5vw);
    font-weight: 500;
    line-height: 1.125;
    color: #666;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    transition: color .3s ease, border-color .3s ease;
}

.cta2-tab-btn.cta2-tab-active {
    color: #f0ece4;
    border-bottom: 1px solid #c9a84c;
}

.cta2-tab-btn:hover:not(.cta2-tab-active) {
    color: #aaa;
}

/* ── Tab panes ──────────────────────────────────────────────── */
.cta2-tab-pane {
    display: none;
}

.cta2-tab-pane.cta2-pane-active {
    display: block;
}

/* ── Form fields ────────────────────────────────────────────── */
.cta2-form {
    display: flex;
    flex-direction: column;
}

.cta2-field-wrap {
    position: relative;
}

.cta2-field {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: #f0ece4;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: max(0.95rem, 0.9vw);
    font-weight: 500;
    padding: 2rem 0 1.2rem;
    margin-bottom: 0;
    transition: border-color .3s ease;
    line-height: 1.4;
}

.cta2-field::placeholder {
    color: rgba(255,255,255,0.35);
}

.cta2-field:focus {
    border-bottom-color: #c9a84c;
    outline: none;
}

.cta2-textarea {
    resize: none;
    min-height: 100px;
}

/* ── Submit button ──────────────────────────────────────────── */
.cta2-btn-wrap {
    margin-top: 2vw;
}

.cta2-submit-btn {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(
                    90deg,
                    #c79b3b 0%,
                    #ddb86a 35%,
                    #f2e3b3 70%,
                    #ffffff 100%
                  ); /* light olive — matches reference */
    color: #1a1a1a;
    border-radius: 4px;
    padding: 0.875rem 1.5rem;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: max(0.95rem, 1vw);
    font-weight: 500;
    transition: background-color .3s ease, transform .2s ease;
}

.cta2-submit-btn:hover {
    background-color: #d9d98a;
    transform: translateY(-1px);
}

.cta2-arrow-icon {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cta2-arrow-icon svg {
    width: 100%;
    height: 100%;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .cta2-left      { grid-column: 1 / 6; }
    .cta2-form-box  { grid-column: 6 / 13; }
}

@media (max-width: 991px) {
    .cta2-container { padding: 0 24px; }
    .cta2-main-grid { grid-template-columns: 1fr; }
    .cta2-left      { grid-column: 1 / -1; grid-row: 1; padding-bottom: 40px; }
    .cta2-form-box  { grid-column: 1 / -1; grid-row: 2; padding: 40px 32px; }
    .cta2-heading   { font-size: clamp(32px, 8vw, 56px); }
    .cta2-desc      { max-width: 100%; }
}

@media (max-width: 575px) {
    .cta2-form-box { padding: 32px 20px; }
    .cta2-tab-btn  { font-size: 1.1rem; }
}

/* ── Section ─────────────────────────────────────────────── */
.vc-section {
    /* background-color: #0a0a0a;
    padding: 70px 60px; */
    width: 100%;
    box-sizing: border-box;
}

/* ── Row: 4 equal columns ────────────────────────────────── */
.vc-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Each counter item ───────────────────────────────────── */
.vc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ── Number + underline wrapper ──────────────────────────── */
.vc-number-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}

/* ── The number itself ───────────────────────────────────── */
.vc-number {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(40px, 4.5vw, 70px);
    font-weight: 800;
    letter-spacing: -2px;
    color: #f0ece4;
    margin: 0;
    line-height: 1;
    position: relative;
    z-index: 1;
    /* count-up starts from 0, JS updates textContent */
}

/* ── Gold gradient highlight bar under number ────────────── */
.vc-highlight {
       display: block;
    position: absolute;
    bottom: -4px;
    left: -3px;
    width: calc(100% + 6px);
    height: 5px;
    filter: blur(1px);
    z-index: 0;
    border-radius: 2px;
    background: linear-gradient(to right, #c9a84c, #e2c97e, #c9a84c, #8c6e2f);
    opacity: 0.45;
}

/* ── Label ───────────────────────────────────────────────── */
.vc-label {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9a9a9a;
    display: block;
    margin-top: 6px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .vc-section { padding: 50px 24px; }
    .vc-row     { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
}

@media (max-width: 400px) {
    .vc-row { grid-template-columns: 1fr; }
}