:root[data-theme="dark"] {
  color-scheme: dark;
  --primary-color: #FFFFFF;          /* headings / strong text */
  --secondary-color: #1C2822;      /* card surfaces */
  --text-color: #A7AABB;             /* body text */
  --bg-color: #101614;               /* page background */
  --accent-color: #36D79C;
  --accent-secondary-color: #35BDB5;
  --divider-color: #2B3931;
  --dark-divider-color: #FFFFFF66;
  --scrollbar-track: #FFFFFF;

  .bg-section {
  width: 100%;
  background-position: center center;
  border: 1px solid var(--divider-color);
  border-radius: 30px;
  background: linear-gradient(180deg, #132C28 0%, #15201C 50%, #1C2920 100%);
  }
  
  .transaction-card {
    --tc-bg: #1d2a24;
    --tc-row-alt: #26342d;
    --tc-head: #26362f;
    --tc-pill: #26362f;
    --tc-border: rgba(255, 255, 255, 0.08);
    --tc-text: #e8eeea;
    --tc-success: #22c58b;
    --tc-danger: #e0805f;

    background: var(--tc-bg);
    border: 1px solid var(--tc-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: none;
}

/* Header + pill title */
.transaction-card .card-header {
    background: transparent;
    border: 0;
    padding: 0 0 18px;
}

.transaction-card h5 {
    display: inline-block;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tc-text);
    background: var(--tc-pill);
    border: 1px solid var(--tc-border);
    border-radius: 100px;
    padding: 9px 24px;
}

.transaction-card .card-body {
    padding: 0;
}

/* Table */
.transaction-card .table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-hover-bg: transparent;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--tc-text);
}

.transaction-card .table > :not(caption) > * > * {
    box-shadow: none;
    color: var(--tc-text);
    border: 1px solid var(--tc-border);
    padding: 16px 14px;
    font-size: 14px;
    vertical-align: middle;
}

.transaction-card thead th {
    background: var(--tc-head);
    font-weight: 600;
}

/* Zebra rows (darker first, lighter second) */
.transaction-card tbody tr:nth-child(odd) td {
    background: #1f2d26;
}

.transaction-card tbody tr:nth-child(even) td {
    background: var(--tc-row-alt);
}

.transaction-card tbody tr:hover td {
    background: #2d3d35;
}

/* Amount colours */
.transaction-card .table td.text-success {
    color: var(--tc-success);
}

.transaction-card .table td.text-danger {
    color: var(--tc-danger);
}

/* Layout (unchanged) */
.transaction-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.transaction-wrapper > div {
    flex: 1 1 48%;
}

@media (max-width: 768px) {
    .transaction-wrapper > div {
        flex: 1 1 100%;
    }
}
  
}


:root[data-theme="light"] {
  color-scheme: light;
  --primary-color: #172C27;
  --secondary-color: #F8F8F2;
  --text-color: #5A5F73;
  --bg-color: #FAF9F5;
  --divider-color: #DCE4DC;
  --dark-divider-color: #0B0D1740;
  --scrollbar-track: #F1F2F7;
  --error-color: #D93636;

  .bg-section {
  width: 100%;
  background-position: center center;
  border: 1px solid var(--divider-color);
  border-radius: 30px;
  background: linear-gradient(180deg, #E2F0E8 0%, #F2F4EE 50%, #EDF2E7 100%);
  }

  .testimonial-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
  }

  .testimonial-slider .testimonial-button-next,
  .testimonial-slider .testimonial-button-prev {
      position: relative;
      width: 60px;
      height: 60px;
      border: 1px solid var(--divider-color);
      border-radius: 50%;
      transition: all 0.4s ease-in-out;
  }

  .testimonial-slider .testimonial-button-next {
      margin-left: 20px;
  }

  .testimonial-slider .testimonial-button-next:hover,
  .testimonial-slider .testimonial-button-prev:hover {
      background: var(--accent-color);
  }

  .testimonial-slider .testimonial-button-next::before,
  .testimonial-slider .testimonial-button-prev::before {
      content: '';
      position: absolute;
      top: 50%;
      bottom: 0;
      left: 50%;
      right: 0;
      transform: translate(-50%, -50%) rotate(45deg);
      background: url('../images/arrow-black.svg') no-repeat;
      background-position: center center;
      background-size: cover;
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .testimonial-slider .testimonial-button-prev::before {
      transform: translate(-50%, -50%) rotate(225deg);
  }
  
.transaction-card {
    --tc-bg: #f7f8f2;
    --tc-sage: #e4eae0;
    --tc-border: #dde4d8;
    --tc-text: #1f2d26;
    --tc-success: #1a8a5c;
    --tc-danger: #c0594a;

    background: var(--tc-bg);
    border: 1px solid var(--tc-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: none;
}

/* Header + pill title */
.transaction-card .card-header {
    background: transparent;
    border: 0;
    padding: 0 0 18px;
}

.transaction-card h5 {
    display: inline-block;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tc-text);
    background: var(--tc-sage);
    border: 1px solid var(--tc-border);
    border-radius: 100px;
    padding: 9px 24px;
}

.transaction-card .card-body {
    padding: 0;
}

/* Table */
.transaction-card .table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-hover-bg: transparent;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--tc-text);
}

.transaction-card .table > :not(caption) > * > * {
    box-shadow: none;
    color: var(--tc-text);
    border: 2px solid var(--tc-bg);
    padding: 17px 14px;
    font-size: 15px;
    vertical-align: middle;
}

.transaction-card thead th {
    background: var(--tc-sage);
    font-weight: 600;
}

/* Zebra rows */
.transaction-card tbody tr:nth-child(odd) td {
    background: var(--tc-bg);
}

.transaction-card tbody tr:nth-child(even) td {
    background: var(--tc-sage);
}

.transaction-card tbody tr:hover td {
    filter: brightness(0.97);
}

/* Amount colours */
.transaction-card .table td.text-success {
    color: var(--tc-success);
}

.transaction-card .table td.text-danger {
    color: var(--tc-danger);
}

/* Layout (unchanged) */
.transaction-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.transaction-wrapper > div {
    flex: 1 1 48%;
}

@media (max-width: 768px) {
    .transaction-wrapper > div {
        flex: 1 1 100%;
    }
}
  
}

/* Always-white text used on top of the pink/blue gradient */
:root {
  --on-accent-color: #FFFFFF;
  --white-color: #FFFFFF; /* was referenced but never defined (.tag-links a) */
}

body {
  transition: background-color .3s ease, color .3s ease;
}

/* Scrollbar track no longer reuses --primary-color */
::-webkit-scrollbar-track { background-color: var(--scrollbar-track); border-left-color: var(--scrollbar-track); }
::-webkit-scrollbar       { background-color: var(--scrollbar-track); }

/* ----------------------------------------------------------
   Elements that sit on a gradient must stay white in BOTH
   themes (otherwise they'd turn dark in light mode)
   ---------------------------------------------------------- */
.btn-default,
.section-footer-text span,
.main-menu ul ul li a,
.slicknav_nav .slicknav_row,
.slicknav_nav li a,
.slicknav_arrow:after,
.post-tags .tag-links a,
.post-social-sharing ul li a,
.project-category-list h3,
.service-item:hover .service-item-content h3,
.service-item:hover .service-item-content p,
.approach-item:hover .approach-item-content h3,
.approach-item:hover .approach-item-content p,
.page-testimonials .testimonial-item:hover .testimonial-content h3,
.page-testimonials .testimonial-item:hover .testimonial-content p,
.page-testimonials .testimonial-item:hover .author-content h3,
.page-testimonials .testimonial-item:hover .author-content p,
.page-testimonials .testimonial-item.active .testimonial-content h3,
.page-testimonials .testimonial-item.active .testimonial-content p,
.page-testimonials .testimonial-item.active .author-content h3,
.page-testimonials .testimonial-item.active .author-content p {
  color: var(--on-accent-color);
}

.slicknav_icon .slicknav_icon-bar,
.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1),
.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3) {
  background-color: var(--on-accent-color);
}

/* Submenu / mobile-menu hover text stays readable on the gradient */
.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus,
.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover {
  color: #000000;
}

/* Sidebar arrow turned white on hover — in light mode the card is light, so don't invert */
:root[data-theme="light"] .page-catagery-list ul li a:hover:before { filter: none; }

/* Light-mode polish: soft shadows so cards separate from the white page */
:root[data-theme="light"] .service-item,
:root[data-theme="light"] .project-item,
:root[data-theme="light"] .post-item,
:root[data-theme="light"] .testimonial-item,
:root[data-theme="light"] .approach-item,
:root[data-theme="light"] .value-box-item,
:root[data-theme="light"] .faq-accordion .accordion-item {
  box-shadow: 0 8px 30px rgba(11, 13, 23, .06);
}
:root[data-theme="light"] header.main-header .header-sticky.active {
  box-shadow: 0 4px 20px rgba(11, 13, 23, .08);
}
:root[data-theme="light"] .hero-image-2 { box-shadow: 0 40px 30px 0 rgba(11, 13, 23, .18); }

/* Bootstrap bits that hard-code colours */
:root[data-theme="light"] .navbar-toggler-icon { filter: invert(1); }
:root[data-theme="light"] .faq-accordion .accordion-button:not(.collapsed) { box-shadow: none; }
.faq-accordion .accordion-button,
.faq-accordion .accordion-button:not(.collapsed) { background: transparent; }

/* ----------------------------------------------------------
   Theme-specific images (e.g. a white logo vs a dark logo)
   <img class="only-dark"  src="images/logo.png">
   <img class="only-light" src="images/logo-dark.png">
   ---------------------------------------------------------- */
:root[data-theme="light"] .only-dark  { display: none !important; }
:root[data-theme="dark"]  .only-light { display: none !important; }

/* Optional: swap dark-only background art in light mode
:root[data-theme="light"] .page-header { background-image: url('../images/page-header-bg-light.png'); }
:root[data-theme="light"] .hero        { background-image: url('../images/hero-bg-shape-light.png'); }
*/

/* ----------------------------------------------------------
   Light / dark switch — pill toggle
   Light: blue pill, white sun on the left
   Dark : black pill, white moon on the right + small yellow sun
   ---------------------------------------------------------- */
.theme-toggle {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #00865F;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  transition: background-color .35s ease, box-shadow .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

/* sliding knob */
.theme-toggle .tt-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.theme-toggle .tt-knob svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .25s ease, transform .35s ease;
}

/* LIGHT state (sun visible, moon + star hidden) */
.theme-toggle .tt-sun  { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle .tt-moon { opacity: 0; transform: scaleX(-1) rotate(40deg) scale(.6); }
.theme-toggle .tt-star {
  position: absolute;
  top: 6px;
  left: 37px;
  width: 11px;
  height: 11px;
  opacity: 0;
  transform: scale(.4) rotate(-45deg);
  transition: opacity .3s ease .1s, transform .4s ease .1s;
}

/* DARK state (also the default when no data-theme is set yet) */
:root[data-theme="dark"] .theme-toggle,
:root:not([data-theme]) .theme-toggle {
  background: #000000;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28);
}
:root[data-theme="dark"] .theme-toggle .tt-knob,
:root:not([data-theme]) .theme-toggle .tt-knob { transform: translateX(30px); }

:root[data-theme="dark"] .theme-toggle .tt-sun,
:root:not([data-theme]) .theme-toggle .tt-sun  { opacity: 0; transform: rotate(90deg) scale(.6); }

:root[data-theme="dark"] .theme-toggle .tt-moon,
:root:not([data-theme]) .theme-toggle .tt-moon { opacity: 1; transform: scaleX(-1) rotate(0) scale(1); }

:root[data-theme="dark"] .theme-toggle .tt-star,
:root:not([data-theme]) .theme-toggle .tt-star { opacity: 1; transform: scale(1) rotate(0); }

.main-menu ul li.theme-switch-item { margin-left: 8px; display: flex; align-items: center; }

/* Inside the mobile (slicknav) menu the background is the gradient */
.slicknav_menu .theme-switch-item { padding: 7px 20px; }
.slicknav_menu .theme-toggle { box-shadow: 0 0 0 2px rgba(255, 255, 255, .75); }