/* ===================================================================== */
/*  NEW BRAND THEMES (Missing in colors.css):                             */
/*  Obsidian Veil, StormBound Teal, Sandstone Aura, Amber Eclipse,        */
/*  Bronzed Ember                                                         */
/*  Paste at END of colors.css                                            */
/* ===================================================================== */

:root {
  /* Replace these with your official palette if different */
  --c-obsidian-veil: #0c100e;
  --c-stormbound-teal: #364442;
  --c-sandstone-aura: #c2ad90;
  --c-amber-eclipse: #97754d;
  --c-bronzed-ember: #5d4429;

  --c-ink: #282b38;
  --c-white: #ffffff;
}

/* --------------------- BG utilities --------------------- */
.bg-obsidian-veil {
  background-image: none !important;
  background-color: var(--c-obsidian-veil) !important;
  color: #fff;
}

.bg-stormbound-teal {
  background-image: none !important;
  background-color: var(--c-stormbound-teal) !important;
  color: #fff;
}

.bg-sandstone-aura {
  background-image: none !important;
  background-color: var(--c-sandstone-aura) !important;
  color: var(--c-ink);
}

.bg-amber-eclipse {
  background-image: none !important;
  background-color: var(--c-amber-eclipse) !important;
  color: var(--c-ink);
}

.bg-bronzed-ember {
  background-image: none !important;
  background-color: var(--c-bronzed-ember) !important;
  color: #fff;
}

/* --------------------- TEXT utilities --------------------- */
.t-obsidian-veil,
.t-obsidian-veil * {
  color: var(--c-obsidian-veil) !important;
}

.t-stormbound-teal,
.t-stormbound-teal * {
  color: var(--c-stormbound-teal) !important;
}

.t-sandstone-aura,
.t-sandstone-aura * {
  color: var(--c-sandstone-aura) !important;
}

.t-amber-eclipse,
.t-amber-eclipse * {
  color: var(--c-amber-eclipse) !important;
}

.t-bronzed-ember,
.t-bronzed-ember * {
  color: var(--c-bronzed-ember) !important;
}


/* --------------------- MENU BG classes (tramenu + menu-bg-*) --------------------- */
.tramenu .scroll.menu-bg-obsidian-veil,
.menu-bg-obsidian-veil {
  background-color: var(--c-obsidian-veil) !important;
  color: #fff;
}

.tramenu .scroll.menu-bg-stormbound-teal,
.menu-bg-stormbound-teal {
  background-color: var(--c-stormbound-teal) !important;
  color: #fff;
}

.tramenu .scroll.menu-bg-sandstone-aura,
.menu-bg-sandstone-aura {
  background-color: var(--c-sandstone-aura) !important;
  color: var(--c-ink);
}

.tramenu .scroll.menu-bg-amber-eclipse,
.menu-bg-amber-eclipse {
  background-color: var(--c-amber-eclipse) !important;
  color: var(--c-ink);
}

.tramenu .scroll.menu-bg-bronzed-ember,
.menu-bg-bronzed-ember {
  background-color: var(--c-bronzed-ember) !important;
  color: #fff;
}

/* --------------------- MENU TEXT classes (.menu-t-*) --------------------- */
/* Same pattern you use: exclude sub-menu */
.menu.scroll.menu-t-obsidian-veil,
.menu.scroll.menu-t-obsidian-veil :not(.sub-menu):not(.sub-menu *) {
  color: var(--c-obsidian-veil) !important;
}

.menu.scroll.menu-t-stormbound-teal,
.menu.scroll.menu-t-stormbound-teal :not(.sub-menu):not(.sub-menu *) {
  color: var(--c-stormbound-teal) !important;
}

.menu.scroll.menu-t-sandstone-aura,
.menu.scroll.menu-t-sandstone-aura :not(.sub-menu):not(.sub-menu *) {
  color: var(--c-sandstone-aura) !important;
}

.menu.scroll.menu-t-amber-eclipse,
.menu.scroll.menu-t-amber-eclipse :not(.sub-menu):not(.sub-menu *) {
  color: var(--c-amber-eclipse) !important;
}

.menu.scroll.menu-t-bronzed-ember,
.menu.scroll.menu-t-bronzed-ember :not(.sub-menu):not(.sub-menu *) {
  color: var(--c-bronzed-ember) !important;
}

/* --------------------- CMENU TEXT (.cmenu-t-*) --------------------- */
.wsmenu-list .nl-simple .cmenu-t-obsidian-veil,
.wsmenu-list .nl-simple .cmenu-t-obsidian-veil * {
  color: var(--c-obsidian-veil) !important;
}
.wsmenu-list .nl-simple .cmenu-t-stormbound-teal,
.wsmenu-list .nl-simple .cmenu-t-stormbound-teal * {
  color: var(--c-stormbound-teal) !important;
}
.wsmenu-list .nl-simple .cmenu-t-sandstone-aura,
.wsmenu-list .nl-simple .cmenu-t-sandstone-aura * {
  color: var(--c-sandstone-aura) !important;
}
.wsmenu-list .nl-simple .cmenu-t-amber-eclipse,
.wsmenu-list .nl-simple .cmenu-t-amber-eclipse * {
  color: var(--c-amber-eclipse) !important;
}
.wsmenu-list .nl-simple .cmenu-t-bronzed-ember,
.wsmenu-list .nl-simple .cmenu-t-bronzed-ember * {
  color: var(--c-bronzed-ember) !important;
}

/* --------------------- BORDER helpers (.b-t-*) --------------------- */
/* Your pattern: border-color via i::before */
.b-t-obsidian-veil i::before {
  border-color: var(--c-obsidian-veil) !important;
}
.b-t-stormbound-teal i::before {
  border-color: var(--c-stormbound-teal) !important;
}
.b-t-sandstone-aura i::before {
  border-color: var(--c-sandstone-aura) !important;
}
.b-t-amber-eclipse i::before {
  border-color: var(--c-amber-eclipse) !important;
}
.b-t-bronzed-ember i::before {
  border-color: var(--c-bronzed-ember) !important;
}

/* Real border colors (.br-t-*) */
.br-t-obsidian-veil {
  border-color: var(--c-obsidian-veil) !important;
}
.br-t-stormbound-teal {
  border-color: var(--c-stormbound-teal) !important;
}
.br-t-sandstone-aura {
  border-color: var(--c-sandstone-aura) !important;
}
.br-t-amber-eclipse {
  border-color: var(--c-amber-eclipse) !important;
}
.br-t-bronzed-ember {
  border-color: var(--c-bronzed-ember) !important;
}

/* Background as color token (.bg-t-*) */
.bg-t-obsidian-veil,
.bg-t-obsidian-veil::before,
.bg-t-obsidian-veil::after {
  background: var(--c-obsidian-veil) !important;
}
.bg-t-stormbound-teal,
.bg-t-stormbound-teal::before,
.bg-t-stormbound-teal::after {
  background: var(--c-stormbound-teal) !important;
}
.bg-t-sandstone-aura,
.bg-t-sandstone-aura::before,
.bg-t-sandstone-aura::after {
  background: var(--c-sandstone-aura) !important;
}
.bg-t-amber-eclipse,
.bg-t-amber-eclipse::before,
.bg-t-amber-eclipse::after {
  background: var(--c-amber-eclipse) !important;
}
.bg-t-bronzed-ember,
.bg-t-bronzed-ember::before,
.bg-t-bronzed-ember::after {
  background: var(--c-bronzed-ember) !important;
}

/* --------------------- DYNAMIC / BDYNAMIC rules --------------------- */
/* Dark backgrounds => white dynamic text */
.bg-obsidian-veil .dynamic,
.bg-stormbound-teal .dynamic,
.bg-bronzed-ember .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-obsidian-veil .dynamic-2,
.bg-stormbound-teal .dynamic-2,
.bg-bronzed-ember .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-obsidian-veil .dynamic-3,
.bg-stormbound-teal .dynamic-3,
.bg-bronzed-ember .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-obsidian-veil .Bdynamic,
.bg-stormbound-teal .Bdynamic,
.bg-bronzed-ember .Bdynamic {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.bg-obsidian-veil .Bdynamic .dynamic,
.bg-stormbound-teal .Bdynamic .dynamic,
.bg-bronzed-ember .Bdynamic .dynamic,
.bg-obsidian-veil .Bdynamic.dynamic,
.bg-stormbound-teal .Bdynamic.dynamic,
.bg-bronzed-ember .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Light backgrounds => dark dynamic text */
.bg-sandstone-aura .dynamic,
.bg-amber-eclipse .dynamic {
  color: var(--c-ink) !important;
  fill: var(--c-ink) !important;
}
.bg-sandstone-aura .dynamic-2,
.bg-amber-eclipse .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-sandstone-aura .dynamic-3,
.bg-amber-eclipse .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-sandstone-aura .Bdynamic,
.bg-amber-eclipse .Bdynamic {
  background-color: rgba(40, 43, 56, 0.06) !important;
}
.bg-sandstone-aura .Bdynamic .dynamic,
.bg-amber-eclipse .Bdynamic .dynamic,
.bg-sandstone-aura .Bdynamic.dynamic,
.bg-amber-eclipse .Bdynamic.dynamic {
  color: var(--c-ink) !important;
  fill: var(--c-ink) !important;
}

/* --------------------- MOBILE DYNAMIC (Mdynamic) additions --------------------- */
@media screen and (max-width: 1000px) {
  /* Light backgrounds => dark Mdynamic */
  .bg-sandstone-aura .Mdynamic,
  .bg-amber-eclipse .Mdynamic {
    color: var(--c-ink) !important;
    fill: var(--c-ink) !important;
  }
  .bg-sandstone-aura .Mdynamic-2,
  .bg-amber-eclipse .Mdynamic-2 {
    color: rgba(40, 43, 56, 0.7) !important;
  }
  .bg-sandstone-aura .Mdynamic-3,
  .bg-amber-eclipse .Mdynamic-3 {
    color: rgba(40, 43, 56, 0.5) !important;
  }

  /* Dark backgrounds => white Mdynamic */
  .bg-obsidian-veil .Mdynamic,
  .bg-stormbound-teal .Mdynamic,
  .bg-bronzed-ember .Mdynamic {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
  .bg-obsidian-veil .Mdynamic-2,
  .bg-stormbound-teal .Mdynamic-2,
  .bg-bronzed-ember .Mdynamic-2 {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .bg-obsidian-veil .Mdynamic-3,
  .bg-stormbound-teal .Mdynamic-3,
  .bg-bronzed-ember .Mdynamic-3 {
    color: rgba(255, 255, 255, 0.5) !important;
  }
}

/* Existing color.css content */

.mybg-transparent.btn {
  background-color: #ffffff00;
  color: #fff !important;
  border-color: #fff !important;
}
.mybg-transparent.btn:hover {
  background-color: #fff !important;
  color: #000 !important;
}
.mybg-white.btn {
  background-color: #ffffff;
  color: #000 !important;
}
.mybg-white.btn:hover {
  border-color: #000 !important;
}
.mybg-light-white.btn {
  background-color: #ffffff26;
  color: #fff !important;
}
.mybg-light-white.btn:hover {
  border-color: #fff !important;
}
.mybg-light-purple.btn,
.bg-whitesmoke-gradient.btn {
  background-color: #6a26da14;
  color: #000 !important;
}
.mybg-light-purple.btn:hover,
.bg-whitesmoke-gradient.btn:hover {
  border-color: #000 !important;
}
.mybg-light-blue.btn {
  background-color: #2d86fb14;
  color: #000 !important;
}
.mybg-light-blue.btn:hover {
  border-color: #000 !important;
}
.mybg-purple.btn {
  background-color: #6a26da;
  color: #fff !important;
}
.mybg-purple.btn:hover {
  border-color: #fff !important;
}
.mybg-blue.btn {
  background-color: #2d86fb;
  color: #fff !important;
}
.mybg-blue.btn:hover {
  border-color: #fff !important;
}

.green-color,
.green-color * {
  color: #10b981 !important;
}
.purple-color,
.purple-color * {
  color: #6a26da !important;
}
.orange-color,
.orange-color * {
  color: #f97316 !important;
}
.blue-color,
.blue-color * {
  color: #2d86fb !important;
}

/* thin divider option */
.my-footer-top-divider {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* footer bottom bar line */
.my-footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* =========================== HELP CENTER BANNER BASICS =========================== */
/* content wrappers (kept semantic) */

/* =========================== BRAND GRADIENT BACKGROUNDS (adds to existing color.css; does not replace) =========================== */
/* Sample original */
.grad-peach-sky {
  background-image: linear-gradient(30deg, #feefec 0%, #f5fdff 100%);
}

/* Brand gradients using your brand colors */
.grad-purple-blue {
  /* Purple → Blue */
  background-image: linear-gradient(30deg, #6a26da 0%, #2d86fb 100%);
}
.grad-white-light-blue {
  /* White → brand Light Blue companion */
  background-image: linear-gradient(30deg, #ffffff 0%, #e9f3ff 100%);
}
.grad-white-light-purple {
  /* White → brand Light Purple companion */
  background-image: linear-gradient(30deg, #ffffff 0%, #f0e8ff 100%);
}
.grad-light-purple-light_blue,
.grad-light-purple-light-blue {
  /* Light Purple companion → Light Blue companion */
  background-image: linear-gradient(30deg, #f0e8ff 0%, #e9f3ff 100%);
}
.grad-light-blue-light_purple,
.grad-light-blue-light-purple {
  /* Light Blue companion → Light Purple companion */
  background-image: linear-gradient(30deg, #e9f3ff 0%, #f0e8ff 100%);
}

/* =========================== ADDED COLORS AND TEXT STYLES =========================== */

/* New Solid Background Colors (and their default text colors) */
.mybg-transparent {
  background-image: none !important;
  background-color: #ffffff00 !important;
  color: #fff;
}
.mybg-white {
  background-image: none !important;
  background-color: #ffffff !important;
  color: #000;
}
.mybg-light-white {
  background-image: none !important;
  background-color: #ffffff26 !important;
  color: #fff;
}
.mybg-light-purple {
  background-image: none !important;
  background-color: #6a26da14 !important;
  color: #000;
}
.bg-whitesmoke-gradient {
  background-color: transparent !important; /* Or a solid color if needed after removing gradient */
  color: #000;
}
.mybg-light-blue {
  background-image: none !important;
  background-color: #2d86fb14 !important;
  color: #000;
}
.mybg-purple {
  background-image: none !important;
  background-color: #6a26da !important;
  color: #fff;
}
.mybg-blue {
  background-image: none !important;
  background-color: #2d86fb !important;
  color: #fff;
}

.bg-dark {
  background-image: none !important;
  background-color: #282b38 !important;
  color: #fff;
}
.bg-dark-cyan-blue {
  background-image: none !important;
  background-color: #02090a !important;
  color: #fff;
}
.bg-dark-cyan {
  background-image: none !important;
  background-color: #051a1c !important;
  color: #fff;
}
.bg-dark-cyan2 {
  background-image: none !important;
  background-color: #061a1c !important;
  color: #fff;
}
.bg-deepdark {
  background-image: none !important;
  background-color: #222d3d !important;
  color: #fff;
}
.bg-white {
  background-image: none !important;
  background-color: #fff !important;
  color: #000;
} /* Matches existing, added text color */
.bg-lightgrey {
  background-image: none !important;
  background-color: #f6f7f8 !important;
  color: #000;
}
.bg-grey {
  background-image: none !important;
  background-color: #f3f4f5 !important;
  color: #000;
}
.bg-whitesmoke {
  background-image: none !important;
  background-color: #f4f4f9 !important;
  color: #000;
}
.bg-lavender {
  background-image: none !important;
  background-color: #ecf1f4 !important;
  color: #000;
}
.bg-snow {
  background-image: none !important;
  background-color: #fbfbfd !important;
  color: #000;
}
.bg-blue {
  background-image: none !important;
  background-color: #0f53fa !important;
  color: #fff;
} /* Different from brand blue */
.bg-indigo {
  background-image: none !important;
  background-color: #62147e !important;
  color: #fff;
}
.bg-skyblue {
  background-image: none !important;
  background-color: #0195ff !important;
  color: #fff;
}
.bg-stateblue {
  background-image: none !important;
  background-color: #6064e3 !important;
  color: #fff;
}
.bg-green {
  background-image: none !important;
  background-color: #0fbc49 !important;
  color: #fff;
}
.bg-magenta {
  background-image: none !important;
  background-color: #562d57 !important;
  color: #fff;
}
.bg-orange-red {
  background-image: none !important;
  background-color: #ff523d !important;
  color: #fff;
}
.bg-pink {
  background-image: none !important;
  background-color: #2d86fb !important;
  color: #fff;
} /* Alias for brand blue */
.bg-plum {
  background-image: none !important;
  background-color: #e8daf5 !important;
  color: #000;
}
.bg-purple {
  background-image: none !important;
  background-color: #6a26da !important;
  color: #fff;
} /* Matches existing, added text color */
.bg-red {
  background-image: none !important;
  background-color: #f6412d !important;
  color: #fff;
}
.bg-salmon {
  background-image: none !important;
  background-color: #ff523d !important;
  color: #fff;
} /* Same as orange-red */
.bg-violet {
  background-image: none !important;
  background-color: #9400d3 !important;
  color: #fff;
}
.bg-violet-red {
  background-image: none !important;
  background-color: #2d86fb !important;
  color: #fff;
} /* Alias for brand blue */
.bg-deepyellow {
  background-image: none !important;
  background-color: #ffa755 !important;
  color: #000;
}

.bg-mirage {
  background-image: none !important;
  background-color: #111b1c !important;
  color: #fff;
}

.bg-deep-teal {
  background-image: none !important;
  background-color: #072022 !important;
  color: #fff;
}

/* New Transparent Background Colors (and their default text colors) */
.bg-tra {
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid #aaa;
  color: #000;
}
.bg-tra-dark {
  background-image: none !important;
  background-color: rgba(10, 10, 10, 0.15) !important;
  color: #000;
}
.bg-tra-white {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #000;
}
.bg-tra-grey {
  background-image: none !important;
  background-color: rgba(17, 36, 70, 0.04) !important;
  color: #000;
}
.bg-tra-blue {
  background-image: none !important;
  background-color: rgba(37, 138, 255, 0.08) !important;
  color: #000;
}
.bg-tra-skyblue {
  background-image: none !important;
  background: rgba(13, 135, 231, 0.08) !important;
  color: #000;
}
.bg-tra-green {
  background-image: none !important;
  background-color: rgba(15, 188, 73, 0.08) !important;
  color: #000;
}
.bg-tra-orange {
  background-image: none !important;
  background: rgba(255, 107, 15, 0.08) !important;
  color: #000;
}
.bg-tra-purple {
  background-image: none !important;
  background-color: rgba(106, 38, 218, 0.08) !important;
  color: #000;
}
.bg-tra-teal {
  background-image: none !important;
  background: rgba(0, 128, 128, 0.08) !important;
  color: #000;
}
.bg-tra-red {
  background-image: none !important;
  background-color: rgba(240, 64, 55, 0.08) !important;
  color: #000;
}
.bg-tra-paleviolet {
  background-image: none !important;
  background: rgba(199, 62, 155, 0.08) !important;
  color: #000;
}
.bg-tra-salmon {
  background-image: none !important;
  background-color: rgba(255, 82, 61, 0.08) !important;
  color: #000;
}
.bg-tra-violet {
  background-image: none !important;
  background: rgba(148, 0, 211, 0.08) !important;
  color: #000;
}
.bg-tra-yellow {
  background-image: none !important;
  background: rgba(255, 179, 12, 0.08) !important;
  color: #000;
}

/* New Gradient Background Colors (and their default text colors) */
.bg-dark-gradient {
  background-image: linear-gradient(180deg, #1d293f, #282b38);
  color: #fff;
}
.bg-lavender-gradient {
  background-image: linear-gradient(
    180deg,
    rgba(236, 241, 244, 0.5) 50%,
    rgba(236, 241, 244, 0.05) 100%
  );
  color: #000;
}
.bg-plum-gradient {
  background-image: linear-gradient(
    180deg,
    rgba(232, 218, 245, 0.5) 50%,
    rgba(236, 241, 244, 0.05) 100%
  );
  color: #000;
}
.bg-skyblue-gradient {
  background: linear-gradient(140deg, #1b78e0, #004899);
  color: #fff;
}
.bg-stateblue-gradient {
  background-image: linear-gradient(180deg, rgba(65, 62, 101, 1), rgba(76, 72, 119, 1));
  color: #fff;
}
.bg-purple-gradient {
  background-image: linear-gradient(-48deg, #8731e8 0%, #4528dc 100%);
  color: #fff;
}

/* New Text Color Utilities */
.t-dark,
.t-dark * {
  color: #282b38 !important;
}

.t-deepdark,
.t-deepdark * {
  color: #222d3d !important;
}

.t-lightgrey,
.t-lightgrey * {
  color: #f6f7f8 !important;
}

.t-grey,
.t-grey * {
  color: #f3f4f5 !important;
}

.t-whitesmoke,
.t-whitesmoke * {
  color: #f4f4f9 !important;
}

.t-lavender,
.t-lavender * {
  color: #ecf1f4 !important;
}

.t-snow,
.t-snow * {
  color: #fbfbfd !important;
}

.t-blue-dark,
.t-blue-dark * {
  color: #0f53fa !important;
}

.t-indigo,
.t-indigo * {
  color: #62147e !important;
}

.t-skyblue,
.t-skyblue * {
  color: #0195ff !important;
}

.t-stateblue,
.t-stateblue * {
  color: #6064e3 !important;
}

.t-green-dark,
.t-green-dark * {
  color: #0fbc49 !important;
}

.t-magenta,
.t-magenta * {
  color: #562d57 !important;
}

.t-orange-red,
.t-orange-red * {
  color: #ff523d !important;
}

.t-plum,
.t-plum * {
  color: #e8daf5 !important;
}

.t-red,
.t-red * {
  color: #f6412d !important;
}

.t-salmon,
.t-salmon * {
  color: #ff523d !important;
}

.t-violet,
.t-violet * {
  color: #9400d3 !important;
}

.t-deepyellow,
.t-deepyellow * {
  color: #ffa755 !important;
}
.t-white,
.t-white * {
  color: #fff !important;
}
.t-black,
.t-black * {
  color: #000 !important;
}
.t-muted,
.t-muted * {
  color: #6c757d !important;
}
.t-purple,
.t-purple * {
  color: #6a26da !important;
}
.t-blue,
.t-blue * {
  color: #2d86fb !important;
}


.i-t-obsidian-veil {
  color: var(--c-obsidian-veil);
}
.i-t-stormbound-teal {
  color: var(--c-stormbound-teal);
}
.i-t-sandstone-aura {
  color: var(--c-sandstone-aura);
}
.i-t-amber-eclipse {
  color: var(--c-amber-eclipse);
}
.i-t-bronzed-ember {
  color: var(--c-bronzed-ember);
}


.i-t-white {
  color: #fff;
}
.i-t-black {
  color: #000;
}
.i-t-muted {
  color: #6c757d;
}
.i-t-purple {
  color: #6a26da;
}
.i-t-blue {
  color: #2d86fb;
}
.i-t-dark {
  color: #282b38;
}
.i-t-deepdark {
  color: #222d3d;
}
.i-t-lightgrey {
  color: #f6f7f8;
}
.i-t-grey {
  color: #f3f4f5;
}
.i-t-whitesmoke {
  color: #f4f4f9;
}
.i-t-lavender {
  color: #ecf1f4;
}
.i-t-snow {
  color: #fbfbfd;
}
.i-t-blue-dark {
  color: #0f53fa;
}
.i-t-indigo {
  color: #62147e;
}
.i-t-skyblue {
  color: #0195ff;
}
.i-t-stateblue {
  color: #6064e3;
}
.i-t-green-dark {
  color: #0fbc49;
}
.i-t-magenta {
  color: #562d57;
}
.i-t-orange-red {
  color: #ff523d;
}
.i-t-plum {
  color: #e8daf5;
}
.i-t-red {
  color: #f6412d;
}
.i-t-salmon {
  color: #ff523d;
}
.i-t-violet {
  color: #9400d3;
}
.i-t-deepyellow {
  color: #ffa755;
}

/* END ADDED .i-t-* classes */

.f_bg_color {
  background: #f6fbfc;
}

/* Transformed Background Styles for .tramenu .scroll.menu-CLASS, .menu-CLASS */

.tramenu .scroll.menu-mybg-transparent,
.menu-mybg-transparent {
  background-color: #ffffff00 !important;
  color: #fff;
}
.tramenu .scroll.menu-mybg-white,
.menu-mybg-white {
  background-color: #ffffff !important;
  color: #000;
}
.tramenu .scroll.menu-mybg-light-white,
.menu-mybg-light-white {
  background-color: #ffffff26 !important;
  color: #fff;
}
.tramenu .scroll.menu-mybg-light-purple,
.menu-mybg-light-purple {
  background-color: #6a26da14 !important;
  color: #000;
}
.tramenu .scroll.menu-bg-whitesmoke-gradient,
.menu-bg-whitesmoke-gradient {
  background-image: linear-gradient(
    180deg,
    rgba(244, 244, 249, 0.8) 50%,
    rgba(244, 244, 249, 0.05) 100%
  );
  color: #000;
}
.tramenu .scroll.menu-mybg-light-blue,
.menu-mybg-light-blue {
  background-color: #2d86fb14 !important;
  color: #000;
}
.tramenu .scroll.menu-mybg-purple,
.menu-mybg-purple {
  background-color: #6a26da !important;
  color: #fff;
}
.tramenu .scroll.menu-mybg-blue,
.menu-mybg-blue {
  background-color: #2d86fb !important;
  color: #fff;
}

.tramenu .scroll.menu-bg-dark,
.menu-bg-dark {
  background-color: #282b38 !important;
  color: #fff;
}
.tramenu .scroll.bg-dark-cyan-blue,
.menu-bg-dark-cyan-blue {
  background-color: #02090a !important;
  color: #fff;
}
.tramenu .scroll.bg-dark-cyan,
.menu-bg-dark-cyan {
  background-color: #051a1c !important;
  color: #fff;
}
.tramenu .scroll.bg-dark-cyan2,
.menu-bg-dark-cyan2 {
  background-color: #061a1c !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-deepdark,
.menu-bg-deepdark {
  background-color: #222d3d !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-white,
.menu-bg-white {
  background-color: #fff !important;
  color: #000;
} /* Matches existing, added text color */
.tramenu .scroll.menu-bg-lightgrey,
.menu-bg-lightgrey {
  background-color: #f6f7f8 !important;
  color: #000;
}
.tramenu .scroll.menu-bg-grey,
.menu-bg-grey {
  background-color: #f3f4f5 !important;
  color: #000;
}
.tramenu .scroll.menu-bg-whitesmoke,
.menu-bg-whitesmoke {
  background-color: #f4f4f9 !important;
  color: #000;
}
.tramenu .scroll.menu-bg-lavender,
.menu-bg-lavender {
  background-color: #ecf1f4 !important;
  color: #000;
}
.tramenu .scroll.menu-bg-snow,
.menu-bg-snow {
  background-color: #fbfbfd !important;
  color: #000;
}
.tramenu .scroll.menu-bg-blue,
.menu-bg-blue {
  background-color: #0f53fa !important;
  color: #fff;
} /* Different from brand blue */
.tramenu .scroll.menu-bg-indigo,
.menu-bg-indigo {
  background-color: #62147e !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-skyblue,
.menu-bg-skyblue {
  background-color: #0195ff !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-stateblue,
.menu-bg-stateblue {
  background-color: #6064e3 !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-green,
.menu-bg-green {
  background-color: #0fbc49 !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-magenta,
.menu-bg-magenta {
  background-color: #562d57 !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-orange-red,
.menu-bg-orange-red {
  background-color: #ff523d !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-pink,
.menu-bg-pink {
  background-color: #2d86fb !important;
  color: #fff;
} /* Alias for brand blue */
.tramenu .scroll.menu-bg-plum,
.menu-bg-plum {
  background-color: #e8daf5 !important;
  color: #000;
}
.tramenu .scroll.menu-bg-purple,
.menu-bg-purple {
  background-color: #6a26da !important;
  color: #fff;
} /* Matches existing, added text color */
.tramenu .scroll.menu-bg-red,
.menu-bg-red {
  background-color: #f6412d !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-salmon,
.menu-bg-salmon {
  background-color: #ff523d !important;
  color: #fff;
} /* Same as orange-red */
.tramenu .scroll.menu-bg-violet,
.menu-bg-violet {
  background-color: #9400d3 !important;
  color: #fff;
}
.tramenu .scroll.menu-bg-violet-red,
.menu-bg-violet-red {
  background-color: #2d86fb !important;
  color: #fff;
} /* Alias for brand blue */
.tramenu .scroll.menu-bg-deepyellow,
.menu-bg-deepyellow {
  background-color: #ffa755 !important;
  color: #000;
}

.tramenu .scroll.menu-bg-mirage,
.menu-bg-mirage {
  background-color: #111b1c !important;
  color: #fff;
}

.tramenu .scroll.menu-bg-deep-teal,
.menu-bg-deep-teal {
  background-color: #072022 !important;
  color: #fff;
}

/* New Transparent Background Colors (and their default text colors) */
.tramenu .scroll.menu-bg-tra,
.menu-bg-tra {
  background-color: transparent !important;
  border: 1px solid #aaa;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-dark,
.menu-bg-tra-dark {
  background-color: rgba(10, 10, 10, 0.15) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-white,
.menu-bg-tra-white {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-grey,
.menu-bg-tra-grey {
  background-color: rgba(17, 36, 70, 0.04) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-blue,
.menu-bg-tra-blue {
  background-color: rgba(37, 138, 255, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-skyblue,
.menu-bg-tra-skyblue {
  background: rgba(13, 135, 231, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-green,
.menu-bg-tra-green {
  background-color: rgba(15, 188, 73, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-orange,
.menu-bg-tra-orange {
  background: rgba(255, 107, 15, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-purple,
.menu-bg-tra-purple {
  background-color: rgba(106, 38, 218, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-teal,
.menu-bg-tra-teal {
  background: rgba(0, 128, 128, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-red,
.menu-bg-tra-red {
  background-color: rgba(240, 64, 55, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-paleviolet,
.menu-bg-tra-paleviolet {
  background: rgba(199, 62, 155, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-salmon,
.menu-bg-tra-salmon {
  background-color: rgba(255, 82, 61, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-violet,
.menu-bg-tra-violet {
  background: rgba(148, 0, 211, 0.08) !important;
  color: #000;
}
.tramenu .scroll.menu-bg-tra-yellow,
.menu-bg-tra-yellow {
  background: rgba(255, 179, 12, 0.08) !important;
  color: #000;
}

/* New Gradient Background Colors (and their default text colors) */
.tramenu .scroll.menu-bg-dark-gradient,
.menu-bg-dark-gradient {
  background-image: linear-gradient(180deg, #1d293f, #282b38);
  color: #fff;
}
.tramenu .scroll.menu-bg-lavender-gradient,
.menu-bg-lavender-gradient {
  background-image: linear-gradient(
    180deg,
    rgba(236, 241, 244, 0.5) 50%,
    rgba(236, 241, 244, 0.05) 100%
  );
  color: #000;
}
.tramenu .scroll.menu-bg-plum-gradient,
.menu-bg-plum-gradient {
  background-image: linear-gradient(
    180deg,
    rgba(232, 218, 245, 0.5) 50%,
    rgba(236, 241, 244, 0.05) 100%
  );
  color: #000;
}
.tramenu .scroll.menu-bg-skyblue-gradient,
.menu-bg-skyblue-gradient {
  background: linear-gradient(140deg, #1b78e0, #004899);
  color: #fff;
}
.tramenu .scroll.menu-bg-stateblue-gradient,
.menu-bg-stateblue-gradient {
  background-image: linear-gradient(180deg, rgba(65, 62, 101, 1), rgba(76, 72, 119, 1));
  color: #fff;
}
.tramenu .scroll.menu-bg-purple-gradient,
.menu-bg-purple-gradient {
  background-image: linear-gradient(-48deg, #8731e8 0%, #4528dc 100%);
  color: #fff;
}

.banner-search-form-wrapper .flaticon-search {
  color: #10b3d6;
}

.bg-gold\/20 {
  background-color: rgba(174, 167, 151, 0.2);
}

.bg-dark-10,
.bg-white .bg-white-10,
.bg-vintage-cashmare .redynamic .bg-white-10 {
  background-color: #2a292710 !important;
}

/* --- DYNAMIC TEXT & BACKGROUND COLORS FOR NEW THEMES --- */

/* #region mybg-white (Light Background) */
.mybg-white .dynamic {
  color: #282b38 !important; /* Dark text */
  fill: #282b38 !important;
}
.mybg-white .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.mybg-white .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.mybg-white .Bdynamic {
  background-color: #f6f7f8 !important; /* Light grey for nested bg */
}
.mybg-white .Bdynamic .dynamic,
.mybg-white .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.mybg-white .Bdynamic .dynamic-2,
.mybg-white .Bdynamic.dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.mybg-white .Bdynamic .dynamic-3,
.mybg-white .Bdynamic.dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
/* #endregion */

/* #region mybg-light-white (Light, Transparent Background - default white text in base but children likely dark) */
.mybg-light-white .dynamic {
  color: #282b38 !important; /* Dark text for children */
  fill: #282b38 !important;
}
.mybg-light-white .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.mybg-light-white .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.mybg-light-white .Bdynamic {
  background-color: #ffffff44 !important; /* Slightly more opaque white */
}
.mybg-light-white .Bdynamic .dynamic,
.mybg-light-white .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.mybg-light-white .Bdynamic .dynamic-2,
.mybg-light-white .Bdynamic.dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
/* #endregion */

/* #region mybg-light-purple (Light, Transparent Background - default dark text) */
.mybg-light-purple .dynamic {
  color: #282b38 !important; /* Dark text */
  fill: #282b38 !important;
}
.mybg-light-purple .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.mybg-light-purple .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.mybg-light-purple .Bdynamic {
  background-color: #f0ecf9 !important; /* Lighter purple shade */
}
.mybg-light-purple .Bdynamic .dynamic,
.mybg-light-purple .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-whitesmoke-gradient (Light Background - default dark text) */
.bg-whitesmoke-gradient .dynamic {
  color: #282b38 !important; /* Dark text */
  fill: #282b38 !important;
}
.bg-whitesmoke-gradient .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-whitesmoke-gradient .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-whitesmoke-gradient .Bdynamic {
  background-color: #f6f7f8 !important; /* Light grey for nested bg */
}
.bg-whitesmoke-gradient .Bdynamic .dynamic,
.bg-whitesmoke-gradient .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region mybg-light-blue (Light, Transparent Background - default dark text) */
.mybg-light-blue .dynamic {
  color: #282b38 !important; /* Dark text */
  fill: #282b38 !important;
}
.mybg-light-blue .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.mybg-light-blue .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.mybg-light-blue .Bdynamic {
  background-color: #eaf3ff !important; /* Lighter blue shade */
}
.mybg-light-blue .Bdynamic .dynamic,
.mybg-light-blue .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region mybg-purple (Dark Background - default white text) */
.mybg-purple .dynamic {
  color: #ffffff !important; /* White text */
  fill: #ffffff !important;
}
.mybg-purple .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.mybg-purple .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.mybg-purple .Bdynamic {
  background-color: #7d44e5 !important; /* Slightly lighter purple */
}
.mybg-purple .Bdynamic .dynamic,
.mybg-purple .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region mybg-blue (Dark Background - default white text) */
.mybg-blue .dynamic {
  color: #ffffff !important; /* White text */
  fill: #ffffff !important;
}
.mybg-blue .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.mybg-blue .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.mybg-blue .Bdynamic {
  background-color: #4998ff !important; /* Slightly lighter blue */
}
.mybg-blue .Bdynamic .dynamic,
.mybg-blue .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-dark (Dark Background - default white text) */
.bg-dark .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-dark .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-dark .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-dark .Bdynamic {
  background-color: #3e4151 !important; /* Slightly lighter dark */
}
.bg-dark .Bdynamic .dynamic,
.bg-dark .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-deepdark (Dark Background - default white text) */
.bg-deepdark .dynamic,
.bg-dark-cyan-blue .dynamic,
.bg-dark-cyan .dynamic,
.bg-dark-cyan2 .dynamic,
.bg-mirage .dynamic,
.bg-deep-teal .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-deepdark .dynamic-2,
.bg-dark-cyan-blue .dynamic-2,
.bg-dark-cyan .dynamic-2,
.bg-dark-cyan2 .dynamic-2,
.bg-mirage .dynamic-2,
.bg-deep-teal .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-deepdark .dynamic-3,
.bg-dark-cyan-blue .dynamic-3,
.bg-dark-cyan .dynamic-3,
.bg-dark-cyan2 .dynamic-3,
.bg-mirage .dynamic-3,
.bg-deep-teal .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-deepdark .Bdynamic,
.bg-dark-cyan-blue .Bdynamic,
.bg-dark-cyan .Bdynamic,
.bg-dark-cyan2 .Bdynamic,
.bg-mirage .Bdynamic,
.bg-deep-teal .Bdynamic {
  background-color: #374659 !important; /* Slightly lighter deep dark */
}
.bg-deepdark .Bdynamic .dynamic,
.bg-dark-cyan-blue .Bdynamic .dynamic,
.bg-dark-cyan .Bdynamic .dynamic,
.bg-dark-cyan2 .Bdynamic .dynamic,
.bg-deepdark .Bdynamic.dynamic,
.bg-dark-cyan-blue .Bdynamic.dynamic,
.bg-dark-cyan .Bdynamic.dynamic,
.bg-dark-cyan2 .Bdynamic.dynamic,
.bg-mirage .Bdynamic .dynamic,
.bg-mirage .Bdynamic.dynamic,
.bg-deep-teal .Bdynamic .dynamic,
.bg-deep-teal .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-white (Light Background - default dark text) */
.bg-white .dynamic {
  color: #282b38 !important; /* Dark text */
  fill: #282b38 !important;
}
.bg-white .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-white .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-white .Bdynamic {
  background-color: #f6f7f8 !important; /* Light grey for nested bg */
}
.bg-white .Bdynamic .dynamic,
.bg-white .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-lightgrey (Light Background - default dark text) */
.bg-lightgrey .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-lightgrey .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-lightgrey .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-lightgrey .Bdynamic {
  background-color: #fbfbfd !important; /* Slightly lighter white */
}
.bg-lightgrey .Bdynamic .dynamic,
.bg-lightgrey .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-grey (Light Background - default dark text) */
.bg-grey .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-grey .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-grey .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-grey .Bdynamic {
  background-color: #f6f7f8 !important; /* Slightly lighter grey */
}
.bg-grey .Bdynamic .dynamic,
.bg-grey .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-whitesmoke (Light Background - default dark text) */
.bg-whitesmoke .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-whitesmoke .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-whitesmoke .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-whitesmoke .Bdynamic {
  background-color: #fbfbfd !important; /* Slightly lighter white */
}
.bg-whitesmoke .Bdynamic .dynamic,
.bg-whitesmoke .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-lavender (Light Background - default dark text) */
.bg-lavender .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-lavender .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-lavender .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-lavender .Bdynamic {
  background-color: #f6f7f8 !important; /* Lighter base for nested */
}
.bg-lavender .Bdynamic .dynamic,
.bg-lavender .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-snow (Light Background - default dark text) */
.bg-snow .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-snow .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-snow .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-snow .Bdynamic {
  background-color: #f4f4f9 !important; /* Light grey for nested bg */
}
.bg-snow .Bdynamic .dynamic,
.bg-snow .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-blue (Dark Background - default white text) */
.bg-blue .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-blue .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-blue .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-blue .Bdynamic {
  background-color: #2d6ffb !important; /* Slightly lighter blue */
}
.bg-blue .Bdynamic .dynamic,
.bg-blue .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-indigo (Dark Background - default white text) */
.bg-indigo .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-indigo .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-indigo .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-indigo .Bdynamic {
  background-color: #7a2a96 !important; /* Slightly lighter indigo */
}
.bg-indigo .Bdynamic .dynamic,
.bg-indigo .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-skyblue (Dark Background - default white text) */
.bg-skyblue .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-skyblue .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-skyblue .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-skyblue .Bdynamic {
  background-color: #25aaff !important; /* Slightly lighter skyblue */
}
.bg-skyblue .Bdynamic .dynamic,
.bg-skyblue .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-stateblue (Dark Background - default white text) */
.bg-stateblue .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-stateblue .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-stateblue .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-stateblue .Bdynamic {
  background-color: #797ceb !important; /* Slightly lighter stateblue */
}
.bg-stateblue .Bdynamic .dynamic,
.bg-stateblue .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-green (Dark Background - default white text) */
.bg-green .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-green .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-green .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-green .Bdynamic {
  background-color: #35d269 !important; /* Slightly lighter green */
}
.bg-green .Bdynamic .dynamic,
.bg-green .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-magenta (Dark Background - default white text) */
.bg-magenta .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-magenta .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-magenta .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-magenta .Bdynamic {
  background-color: #6d426e !important; /* Slightly lighter magenta */
}
.bg-magenta .Bdynamic .dynamic,
.bg-magenta .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-orange-red / bg-salmon (Dark Background - default white text) */
.bg-orange-red .dynamic,
.bg-salmon .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-orange-red .dynamic-2,
.bg-salmon .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-orange-red .dynamic-3,
.bg-salmon .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-orange-red .Bdynamic,
.bg-salmon .Bdynamic {
  background-color: #ff705b !important; /* Slightly lighter orange-red */
}
.bg-orange-red .Bdynamic .dynamic,
.bg-salmon .Bdynamic .dynamic,
.bg-orange-red .Bdynamic.dynamic,
.bg-salmon .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-pink / bg-violet-red (Dark Background - default white text, alias for mybg-blue) */
.bg-pink .dynamic,
.bg-violet-red .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-pink .dynamic-2,
.bg-violet-red .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-pink .dynamic-3,
.bg-violet-red .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-pink .Bdynamic,
.bg-violet-red .Bdynamic {
  background-color: #4998ff !important; /* Slightly lighter blue */
}
.bg-pink .Bdynamic .dynamic,
.bg-violet-red .Bdynamic .dynamic,
.bg-pink .Bdynamic.dynamic,
.bg-violet-red .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-plum (Light Background - default dark text) */
.bg-plum .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-plum .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-plum .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-plum .Bdynamic {
  background-color: #f6f7f8 !important; /* Lighter base for nested */
}
.bg-plum .Bdynamic .dynamic,
.bg-plum .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-purple (Dark Background - default white text, matches mybg-purple) */
.bg-purple .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-purple .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-purple .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-purple .Bdynamic {
  background-color: #7d44e5 !important; /* Slightly lighter purple */
}
.bg-purple .Bdynamic .dynamic,
.bg-purple .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-red (Dark Background - default white text) */
.bg-red .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-red .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-red .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-red .Bdynamic {
  background-color: #ff604f !important; /* Slightly lighter red */
}
.bg-red .Bdynamic .dynamic,
.bg-red .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-violet (Dark Background - default white text) */
.bg-violet .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-violet .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-violet .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-violet .Bdynamic {
  background-color: #a718e7 !important; /* Slightly lighter violet */
}
.bg-violet .Bdynamic .dynamic,
.bg-violet .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-deepyellow (Light Background - default dark text) */
.bg-deepyellow .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-deepyellow .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-deepyellow .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-deepyellow .Bdynamic {
  background-color: #ffc280 !important; /* Slightly lighter deepyellow */
}
.bg-deepyellow .Bdynamic .dynamic,
.bg-deepyellow .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra (Transparent with border - default dark text) */
.bg-tra .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra .Bdynamic {
  background-color: rgba(0, 0, 0, 0.05) !important; /* Slight dark tint for nested bg */
}
.bg-tra .Bdynamic .dynamic,
.bg-tra .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-dark (Transparent Dark - default dark text) */
.bg-tra-dark .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-dark .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-dark .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-dark .Bdynamic {
  background-color: rgba(10, 10, 10, 0.25) !important;
}
.bg-tra-dark .Bdynamic .dynamic,
.bg-tra-dark .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-white (Transparent White - default dark text) */
.bg-tra-white .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-white .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-white .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-white .Bdynamic {
  background-color: rgba(255, 255, 255, 0.25) !important;
}
.bg-tra-white .Bdynamic .dynamic,
.bg-tra-white .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-grey (Transparent Grey - default dark text) */
.bg-tra-grey .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-grey .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-grey .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-grey .Bdynamic {
  background-color: rgba(17, 36, 70, 0.08) !important;
}
.bg-tra-grey .Bdynamic .dynamic,
.bg-tra-grey .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-blue (Transparent Blue - default dark text) */
.bg-tra-blue .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-blue .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-blue .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-blue .Bdynamic {
  background-color: rgba(37, 138, 255, 0.16) !important;
}
.bg-tra-blue .Bdynamic .dynamic,
.bg-tra-blue .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-skyblue (Transparent Skyblue - default dark text) */
.bg-tra-skyblue .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-skyblue .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-skyblue .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-skyblue .Bdynamic {
  background: rgba(13, 135, 231, 0.16) !important;
}
.bg-tra-skyblue .Bdynamic .dynamic,
.bg-tra-skyblue .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-green (Transparent Green - default dark text) */
.bg-tra-green .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-green .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-green .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-green .Bdynamic {
  background-color: rgba(15, 188, 73, 0.16) !important;
}
.bg-tra-green .Bdynamic .dynamic,
.bg-tra-green .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-orange (Transparent Orange - default dark text) */
.bg-tra-orange .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-orange .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-orange .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-orange .Bdynamic {
  background: rgba(255, 107, 15, 0.16) !important;
}
.bg-tra-orange .Bdynamic .dynamic,
.bg-tra-orange .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-purple (Transparent Purple - default dark text) */
.bg-tra-purple .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-purple .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-purple .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-purple .Bdynamic {
  background-color: rgba(106, 38, 218, 0.16) !important;
}
.bg-tra-purple .Bdynamic .dynamic,
.bg-tra-purple .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-teal (Transparent Teal - default dark text) */
.bg-tra-teal .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-teal .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-teal .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-teal .Bdynamic {
  background: rgba(0, 128, 128, 0.16) !important;
}
.bg-tra-teal .Bdynamic .dynamic,
.bg-tra-teal .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-red (Transparent Red - default dark text) */
.bg-tra-red .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-red .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-red .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-red .Bdynamic {
  background-color: rgba(240, 64, 55, 0.16) !important;
}
.bg-tra-red .Bdynamic .dynamic,
.bg-tra-red .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-paleviolet (Transparent Paleviolet - default dark text) */
.bg-tra-paleviolet .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-paleviolet .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-paleviolet .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-paleviolet .Bdynamic {
  background: rgba(199, 62, 155, 0.16) !important;
}
.bg-tra-paleviolet .Bdynamic .dynamic,
.bg-tra-paleviolet .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-salmon (Transparent Salmon - default dark text) */
.bg-tra-salmon .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-salmon .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-salmon .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-salmon .Bdynamic {
  background-color: rgba(255, 82, 61, 0.16) !important;
}
.bg-tra-salmon .Bdynamic .dynamic,
.bg-tra-salmon .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-violet (Transparent Violet - default dark text) */
.bg-tra-violet .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-violet .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-violet .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-violet .Bdynamic {
  background: rgba(148, 0, 211, 0.16) !important;
}
.bg-tra-violet .Bdynamic .dynamic,
.bg-tra-violet .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-tra-yellow (Transparent Yellow - default dark text) */
.bg-tra-yellow .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-tra-yellow .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-tra-yellow .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-tra-yellow .Bdynamic {
  background: rgba(255, 179, 12, 0.16) !important;
}
.bg-tra-yellow .Bdynamic .dynamic,
.bg-tra-yellow .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-dark-gradient (Dark Background - default white text) */
.bg-dark-gradient .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-dark-gradient .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-dark-gradient .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-dark-gradient .Bdynamic {
  background-color: #3e4151 !important; /* Lighter dark */
}
.bg-dark-gradient .Bdynamic .dynamic,
.bg-dark-gradient .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-lavender-gradient (Light Background - default dark text) */
.bg-lavender-gradient .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-lavender-gradient .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-lavender-gradient .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-lavender-gradient .Bdynamic {
  background-color: #f6f7f8 !important; /* Lighter base for nested */
}
.bg-lavender-gradient .Bdynamic .dynamic,
.bg-lavender-gradient .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-plum-gradient (Light Background - default dark text) */
.bg-plum-gradient .dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
.bg-plum-gradient .dynamic-2 {
  color: rgba(40, 43, 56, 0.7) !important;
}
.bg-plum-gradient .dynamic-3 {
  color: rgba(40, 43, 56, 0.5) !important;
}
.bg-plum-gradient .Bdynamic {
  background-color: #f6f7f8 !important; /* Lighter base for nested */
}
.bg-plum-gradient .Bdynamic .dynamic,
.bg-plum-gradient .Bdynamic.dynamic {
  color: #282b38 !important;
  fill: #282b38 !important;
}
/* #endregion */

/* #region bg-skyblue-gradient (Dark Background - default white text) */
.bg-skyblue-gradient .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-skyblue-gradient .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-skyblue-gradient .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-skyblue-gradient .Bdynamic {
  background: #3a8fe9 !important; /* Mid-range blue from gradient */
}
.bg-skyblue-gradient .Bdynamic .dynamic,
.bg-skyblue-gradient .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-stateblue-gradient (Dark Background - default white text) */
.bg-stateblue-gradient .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-stateblue-gradient .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-stateblue-gradient .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-stateblue-gradient .Bdynamic {
  background-color: #5d5a8b !important; /* Mid-range from gradient */
}
.bg-stateblue-gradient .Bdynamic .dynamic,
.bg-stateblue-gradient .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* #region bg-purple-gradient (Dark Background - default white text) */
.bg-purple-gradient .dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.bg-purple-gradient .dynamic-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.bg-purple-gradient .dynamic-3 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.bg-purple-gradient .Bdynamic {
  background-color: #662cd7 !important; /* Mid-range purple from gradient */
}
.bg-purple-gradient .Bdynamic .dynamic,
.bg-purple-gradient .Bdynamic.dynamic {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* #endregion */

/* --- MOBILE DYNAMIC CLASSES (Mdynamic) --- */
@media screen and (max-width: 1000px) {
  /* For light backgrounds, Mdynamic will be dark */
  .mybg-white .Mdynamic,
  .mybg-light-white .Mdynamic,
  .mybg-light-purple .Mdynamic,
  .bg-whitesmoke-gradient .Mdynamic,
  .mybg-light-blue .Mdynamic,
  .bg-white .Mdynamic,
  .bg-lightgrey .Mdynamic,
  .bg-grey .Mdynamic,
  .bg-whitesmoke .Mdynamic,
  .bg-lavender .Mdynamic,
  .bg-snow .Mdynamic,
  .bg-plum .Mdynamic,
  .bg-deepyellow .Mdynamic,
  .bg-tra .Mdynamic,
  .bg-tra-dark .Mdynamic,
  .bg-tra-white .Mdynamic,
  .bg-tra-grey .Mdynamic,
  .bg-tra-blue .Mdynamic,
  .bg-tra-skyblue .Mdynamic,
  .bg-tra-green .Mdynamic,
  .bg-tra-orange .Mdynamic,
  .bg-tra-purple .Mdynamic,
  .bg-tra-teal .Mdynamic,
  .bg-tra-red .Mdynamic,
  .bg-tra-paleviolet .Mdynamic,
  .bg-tra-salmon .Mdynamic,
  .bg-tra-violet .Mdynamic,
  .bg-tra-yellow .Mdynamic,
  .bg-lavender-gradient .Mdynamic,
  .bg-plum-gradient .Mdynamic {
    color: #282b38 !important; /* Dark text for mobile */
    fill: #282b38 !important;
  }
  .mybg-white .Mdynamic-2,
  .mybg-light-white .Mdynamic-2,
  .mybg-light-purple .Mdynamic-2,
  .bg-whitesmoke-gradient .Mdynamic-2,
  .mybg-light-blue .Mdynamic-2,
  .bg-white .Mdynamic-2,
  .bg-lightgrey .Mdynamic-2,
  .bg-grey .Mdynamic-2,
  .bg-whitesmoke .Mdynamic-2,
  .bg-lavender .Mdynamic-2,
  .bg-snow .Mdynamic-2,
  .bg-plum .Mdynamic-2,
  .bg-deepyellow .Mdynamic-2,
  .bg-tra .Mdynamic-2,
  .bg-tra-dark .Mdynamic-2,
  .bg-tra-white .Mdynamic-2,
  .bg-tra-grey .Mdynamic-2,
  .bg-tra-blue .Mdynamic-2,
  .bg-tra-skyblue .Mdynamic-2,
  .bg-tra-green .Mdynamic-2,
  .bg-tra-orange .Mdynamic-2,
  .bg-tra-purple .Mdynamic-2,
  .bg-tra-teal .Mdynamic-2,
  .bg-tra-red .Mdynamic-2,
  .bg-tra-paleviolet .Mdynamic-2,
  .bg-tra-salmon .Mdynamic-2,
  .bg-tra-violet .Mdynamic-2,
  .bg-tra-yellow .Mdynamic-2,
  .bg-lavender-gradient .Mdynamic-2,
  .bg-plum-gradient .Mdynamic-2 {
    color: rgba(40, 43, 56, 0.7) !important;
  }
  .mybg-white .Mdynamic-3,
  .mybg-light-white .Mdynamic-3,
  .mybg-light-purple .Mdynamic-3,
  .bg-whitesmoke-gradient .Mdynamic-3,
  .mybg-light-blue .Mdynamic-3,
  .bg-white .Mdynamic-3,
  .bg-lightgrey .Mdynamic-3,
  .bg-grey .Mdynamic-3,
  .bg-whitesmoke .Mdynamic-3,
  .bg-lavender .Mdynamic-3,
  .bg-snow .Mdynamic-3,
  .bg-plum .Mdynamic-3,
  .bg-deepyellow .Mdynamic-3,
  .bg-tra .Mdynamic-3,
  .bg-tra-dark .Mdynamic-3,
  .bg-tra-white .Mdynamic-3,
  .bg-tra-grey .Mdynamic-3,
  .bg-tra-blue .Mdynamic-3,
  .bg-tra-skyblue .Mdynamic-3,
  .bg-tra-green .Mdynamic-3,
  .bg-tra-orange .Mdynamic-3,
  .bg-tra-purple .Mdynamic-3,
  .bg-tra-teal .Mdynamic-3,
  .bg-tra-red .Mdynamic-3,
  .bg-tra-paleviolet .Mdynamic-3,
  .bg-tra-salmon .Mdynamic-3,
  .bg-tra-violet .Mdynamic-3,
  .bg-tra-yellow .Mdynamic-3,
  .bg-lavender-gradient .Mdynamic-3,
  .bg-plum-gradient .Mdynamic-3 {
    color: rgba(40, 43, 56, 0.5) !important;
  }

  /* For dark backgrounds, Mdynamic will be white */
  .mybg-purple .Mdynamic,
  .mybg-blue .Mdynamic,
  .bg-dark .Mdynamic,
  .bg-dark-cyan-blue .Mdynamic,
  .bg-dark-cyan .Mdynamic,
  .bg-dark-cyan2 .Mdynamic,
  .bg-mirage .Mdynamic,
  .bg-deep-teal .Mdynamic,
  .bg-deepdark .Mdynamic,
  .bg-blue .Mdynamic,
  .bg-indigo .Mdynamic,
  .bg-skyblue .Mdynamic,
  .bg-stateblue .Mdynamic,
  .bg-green .Mdynamic,
  .bg-magenta .Mdynamic,
  .bg-orange-red .Mdynamic,
  .bg-pink .Mdynamic,
  .bg-purple .Mdynamic,
  .bg-red .Mdynamic,
  .bg-salmon .Mdynamic,
  .bg-violet .Mdynamic,
  .bg-violet-red .Mdynamic,
  .bg-dark-gradient .Mdynamic,
  .bg-skyblue-gradient .Mdynamic,
  .bg-stateblue-gradient .Mdynamic,
  .bg-purple-gradient .Mdynamic {
    color: #ffffff !important; /* White text for mobile */
    fill: #ffffff !important;
  }
  .mybg-purple .Mdynamic-2,
  .mybg-blue .Mdynamic-2,
  .bg-dark .Mdynamic-2,
  .bg-dark-cyan-blue .Mdynamic-2,
  .bg-dark-cyan .Mdynamic-2,
  .bg-dark-cyan2 .Mdynamic-2,
  .bg-mirage .Mdynamic-2,
  .bg-deep-teal .Mdynamic-2,
  .bg-deepdark .Mdynamic-2,
  .bg-blue .Mdynamic-2,
  .bg-indigo .Mdynamic-2,
  .bg-skyblue .Mdynamic-2,
  .bg-stateblue .Mdynamic-2,
  .bg-green .Mdynamic-2,
  .bg-magenta .Mdynamic-2,
  .bg-orange-red .Mdynamic-2,
  .bg-pink .Mdynamic-2,
  .bg-purple .Mdynamic-2,
  .bg-red .Mdynamic-2,
  .bg-salmon .Mdynamic-2,
  .bg-violet .Mdynamic-2,
  .bg-violet-red .Mdynamic-2,
  .bg-dark-gradient .Mdynamic-2,
  .bg-skyblue-gradient .Mdynamic-2,
  .bg-stateblue-gradient .Mdynamic-2,
  .bg-purple-gradient .Mdynamic-2 {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .mybg-purple .Mdynamic-3,
  .mybg-blue .Mdynamic-3,
  .bg-dark .Mdynamic-3,
  .bg-dark-cyan-blue .Mdynamic-3,
  .bg-dark-cyan .Mdynamic-3,
  .bg-dark-cyan2 .Mdynamic-3,
  .bg-mirage .Mdynamic-3,
  .bg-deep-teal .Mdynamic-3,
  .bg-deepdark .Mdynamic-3,
  .bg-blue .Mdynamic-3,
  .bg-indigo .Mdynamic-3,
  .bg-skyblue .Mdynamic-3,
  .bg-stateblue .Mdynamic-3,
  .bg-green .Mdynamic-3,
  .bg-magenta .Mdynamic-3,
  .bg-orange-red .Mdynamic-3,
  .bg-pink .Mdynamic-3,
  .bg-purple .Mdynamic-3,
  .bg-red .Mdynamic-3,
  .bg-salmon .Mdynamic-3,
  .bg-violet .Mdynamic-3,
  .bg-violet-red .Mdynamic-3,
  .bg-dark-gradient .Mdynamic-3,
  .bg-skyblue-gradient .Mdynamic-3,
  .bg-stateblue-gradient .Mdynamic-3,
  .bg-purple-gradient .Mdynamic-3 {
    color: rgba(255, 255, 255, 0.5) !important;
  }
}

/* ADDED menu classes */
/* ------------------------------------------------------- */
/*  Excluding .sub-menu from the Color Overrides
/* ------------------------------------------------------- */

.menu.scroll.menu-t-dark,
.menu.scroll.menu-t-dark :not(.sub-menu):not(.sub-menu *) {
  color: #282b38 !important;
}

.menu.scroll.menu-t-deepdark,
.menu.scroll.menu-t-deepdark :not(.sub-menu):not(.sub-menu *) {
  color: #222d3d !important;
}

.menu.scroll.menu-t-lightgrey,
.menu.scroll.menu-t-lightgrey :not(.sub-menu):not(.sub-menu *) {
  color: #f6f7f8 !important;
}

.menu.scroll.menu-t-grey,
.menu.scroll.menu-t-grey :not(.sub-menu):not(.sub-menu *) {
  color: #f3f4f5 !important;
}

.menu.scroll.menu-t-whitesmoke,
.menu.scroll.menu-t-whitesmoke :not(.sub-menu):not(.sub-menu *) {
  color: #f4f4f9 !important;
}

.menu.scroll.menu-t-lavender,
.menu.scroll.menu-t-lavender :not(.sub-menu):not(.sub-menu *) {
  color: #ecf1f4 !important;
}

.menu.scroll.menu-t-snow,
.menu.scroll.menu-t-snow :not(.sub-menu):not(.sub-menu *) {
  color: #fbfbfd !important;
}

.menu.scroll.menu-t-blue-dark,
.menu.scroll.menu-t-blue-dark :not(.sub-menu):not(.sub-menu *) {
  color: #0f53fa !important;
}

.menu.scroll.menu-t-indigo,
.menu.scroll.menu-t-indigo :not(.sub-menu):not(.sub-menu *) {
  color: #62147e !important;
}

.menu.scroll.menu-t-skyblue,
.menu.scroll.menu-t-skyblue :not(.sub-menu):not(.sub-menu *) {
  color: #0195ff !important;
}

.menu.scroll.menu-t-stateblue,
.menu.scroll.menu-t-stateblue :not(.sub-menu):not(.sub-menu *) {
  color: #6064e3 !important;
}

.menu.scroll.menu-t-green-dark,
.menu.scroll.menu-t-green-dark :not(.sub-menu):not(.sub-menu *) {
  color: #0fbc49 !important;
}

.menu.scroll.menu-t-magenta,
.menu.scroll.menu-t-magenta :not(.sub-menu):not(.sub-menu *) {
  color: #562d57 !important;
}

.menu.scroll.menu-t-orange-red,
.menu.scroll.menu-t-orange-red :not(.sub-menu):not(.sub-menu *) {
  color: #ff523d !important;
}

.menu.scroll.menu-t-plum,
.menu.scroll.menu-t-plum :not(.sub-menu):not(.sub-menu *) {
  color: #e8daf5 !important;
}

.menu.scroll.menu-t-red,
.menu.scroll.menu-t-red :not(.sub-menu):not(.sub-menu *) {
  color: #f6412d !important;
}

.menu.scroll.menu-t-salmon,
.menu.scroll.menu-t-salmon :not(.sub-menu):not(.sub-menu *) {
  color: #ff523d !important;
}

.menu.scroll.menu-t-violet,
.menu.scroll.menu-t-violet :not(.sub-menu):not(.sub-menu *) {
  color: #9400d3 !important;
}

.menu.scroll.menu-t-deepyellow,
.menu.scroll.menu-t-deepyellow :not(.sub-menu):not(.sub-menu *) {
  color: #ffa755 !important;
}

.menu.scroll.menu-t-white,
.menu.scroll.menu-t-white :not(.sub-menu):not(.sub-menu *) {
  color: #fff !important;
}

.menu.scroll.menu-t-black,
.menu.scroll.menu-t-black :not(.sub-menu):not(.sub-menu *) {
  color: #000 !important;
}

.menu.scroll.menu-t-muted,
.menu.scroll.menu-t-muted :not(.sub-menu):not(.sub-menu *) {
  color: #6c757d !important;
}

.menu.scroll.menu-t-purple,
.menu.scroll.menu-t-purple :not(.sub-menu):not(.sub-menu *) {
  color: #6a26da !important;
}

.menu.scroll.menu-t-blue,
.menu.scroll.menu-t-blue :not(.sub-menu):not(.sub-menu *) {
  color: #2d86fb !important;
}

/* END menu classes */

.wsmenu-list .nl-simple .cmenu-t-dark,
.wsmenu-list .nl-simple .cmenu-t-dark * {
  color: #282b38 !important;
}

.wsmenu-list .nl-simple .cmenu-t-deepdark,
.wsmenu-list .nl-simple .cmenu-t-deepdark * {
  color: #222d3d !important;
}

.wsmenu-list .nl-simple .cmenu-t-lightgrey,
.wsmenu-list .nl-simple .cmenu-t-lightgrey * {
  color: #f6f7f8 !important;
}

.wsmenu-list .nl-simple .cmenu-t-grey,
.wsmenu-list .nl-simple .cmenu-t-grey * {
  color: #f3f4f5 !important;
}

.wsmenu-list .nl-simple .cmenu-t-whitesmoke,
.wsmenu-list .nl-simple .cmenu-t-whitesmoke * {
  color: #f4f4f9 !important;
}

.wsmenu-list .nl-simple .cmenu-t-lavender,
.wsmenu-list .nl-simple .cmenu-t-lavender * {
  color: #ecf1f4 !important;
}

.wsmenu-list .nl-simple .cmenu-t-snow,
.wsmenu-list .nl-simple .cmenu-t-snow * {
  color: #fbfbfd !important;
}

.wsmenu-list .nl-simple .cmenu-t-blue-dark,
.wsmenu-list .nl-simple .cmenu-t-blue-dark * {
  color: #0f53fa !important;
}

.wsmenu-list .nl-simple .cmenu-t-indigo,
.wsmenu-list .nl-simple .cmenu-t-indigo * {
  color: #62147e !important;
}

.wsmenu-list .nl-simple .cmenu-t-skyblue,
.wsmenu-list .nl-simple .cmenu-t-skyblue * {
  color: #0195ff !important;
}

.wsmenu-list .nl-simple .cmenu-t-stateblue,
.wsmenu-list .nl-simple .cmenu-t-stateblue * {
  color: #6064e3 !important;
}

.wsmenu-list .nl-simple .cmenu-t-green-dark,
.wsmenu-list .nl-simple .cmenu-t-green-dark * {
  color: #0fbc49 !important;
}

.wsmenu-list .nl-simple .cmenu-t-magenta,
.wsmenu-list .nl-simple .cmenu-t-magenta * {
  color: #562d57 !important;
}

.wsmenu-list .nl-simple .cmenu-t-orange-red,
.wsmenu-list .nl-simple .cmenu-t-orange-red * {
  color: #ff523d !important;
}

.wsmenu-list .nl-simple .cmenu-t-plum,
.wsmenu-list .nl-simple .cmenu-t-plum * {
  color: #e8daf5 !important;
}

.wsmenu-list .nl-simple .cmenu-t-red,
.wsmenu-list .nl-simple .cmenu-t-red * {
  color: #f6412d !important;
}

.wsmenu-list .nl-simple .cmenu-t-salmon,
.wsmenu-list .nl-simple .cmenu-t-salmon * {
  color: #ff523d !important;
}

.wsmenu-list .nl-simple .cmenu-t-violet,
.wsmenu-list .nl-simple .cmenu-t-violet * {
  color: #9400d3 !important;
}

.wsmenu-list .nl-simple .cmenu-t-deepyellow,
.wsmenu-list .nl-simple .cmenu-t-deepyellow * {
  color: #ffa755 !important;
}
.wsmenu-list .nl-simple .cmenu-t-white,
.wsmenu-list .nl-simple .cmenu-t-white * {
  color: #fff !important;
}
.wsmenu-list .nl-simple .cmenu-t-black,
.wsmenu-list .nl-simple .cmenu-t-black * {
  color: #000 !important;
}
.wsmenu-list .nl-simple .cmenu-t-muted,
.wsmenu-list .nl-simple .cmenu-t-muted * {
  color: #6c757d !important;
}
.wsmenu-list .nl-simple .cmenu-t-purple,
.wsmenu-list .nl-simple .cmenu-t-purple * {
  color: #6a26da !important;
}
.wsmenu-list .nl-simple .cmenu-t-blue,
.wsmenu-list .nl-simple .cmenu-t-blue * {
  color: #2d86fb !important;
}

.b-t-dark i::before {
  border-color: #282b38 !important;
}

.b-t-deepdark i::before {
  border-color: #222d3d !important;
}

.b-t-lightgrey i::before {
  border-color: #f6f7f8 !important;
}

.b-t-grey i::before {
  border-color: #f3f4f5 !important;
}

.b-t-whitesmoke i::before {
  border-color: #f4f4f9 !important;
}

.b-t-lavender i::before {
  border-color: #ecf1f4 !important;
}

.b-t-snow i::before {
  border-color: #fbfbfd !important;
}

.b-t-blue-dark i::before {
  border-color: #0f53fa !important;
}

.b-t-indigo i::before {
  border-color: #62147e !important;
}

.b-t-skyblue i::before {
  border-color: #0195ff !important;
}

.b-t-stateblue i::before {
  border-color: #6064e3 !important;
}

.b-t-green-dark i::before {
  border-color: #0fbc49 !important;
}

.b-t-magenta i::before {
  border-color: #562d57 !important;
}

.b-t-orange-red i::before {
  border-color: #ff523d !important;
}

.b-t-plum i::before {
  border-color: #e8daf5 !important;
}

.b-t-red i::before {
  border-color: #f6412d !important;
}

.b-t-salmon i::before {
  border-color: #ff523d !important;
}

.b-t-violet i::before {
  border-color: #9400d3 !important;
}

.b-t-deepyellow i::before {
  border-color: #ffa755 !important;
}
.b-t-white i::before {
  border-color: #fff !important;
}

.b-t-black i::before {
  border-color: #000 !important;
}

.b-t-muted i::before {
  border-color: #6c757d !important;
}

.b-t-purple i::before {
  border-color: #6a26da !important;
}

.b-t-blue i::before {
  border-color: #2d86fb !important;
}

/* Real Border colors */

.br-t-dark {
  border-color: #282b38 !important;
}

.br-t-deepdark {
  border-color: #222d3d !important;
}

.br-t-lightgrey {
  border-color: #f6f7f8 !important;
}

.br-t-grey {
  border-color: #f3f4f5 !important;
}

.br-t-whitesmoke {
  border-color: #f4f4f9 !important;
}

.br-t-lavender {
  border-color: #ecf1f4 !important;
}

.br-t-snow {
  border-color: #fbfbfd !important;
}

.br-t-blue-dark {
  border-color: #0f53fa !important;
}

.br-t-indigo {
  border-color: #62147e !important;
}

.br-t-skyblue {
  border-color: #0195ff !important;
}

.br-t-stateblue {
  border-color: #6064e3 !important;
}

.br-t-green-dark {
  border-color: #0fbc49 !important;
}

.br-t-magenta {
  border-color: #562d57 !important;
}

.br-t-orange-red {
  border-color: #ff523d !important;
}

.br-t-plum {
  border-color: #e8daf5 !important;
}

.br-t-red {
  border-color: #f6412d !important;
}

.br-t-salmon {
  border-color: #ff523d !important;
}

.br-t-violet {
  border-color: #9400d3 !important;
}

.br-t-deepyellow {
  border-color: #ffa755 !important;
}
.br-t-white {
  border-color: #fff !important;
}

.br-t-black {
  border-color: #000 !important;
}

.br-t-muted {
  border-color: #6c757d !important;
}

.br-t-purple {
  border-color: #6a26da !important;
}

.br-t-blue {
  border-color: #2d86fb !important;
}

/* New Text Color Utilities */
.bg-t-dark,
.bg-t-dark::before,
.bg-t-dark::after {
  background: #282b38 !important;
}

.bg-t-deepdark,
.bg-t-deepdark::before,
.bg-t-deepdark::after {
  background: #222d3d !important;
}

.bg-t-lightgrey,
.bg-t-lightgrey::before,
.bg-t-lightgrey::after {
  background: #f6f7f8 !important;
}

.bg-t-grey,
.bg-t-grey::before,
.bg-t-grey::after {
  background: #f3f4f5 !important;
}

.bg-t-whitesmoke,
.bg-t-whitesmoke::before,
.bg-t-whitesmoke::after {
  background: #f4f4f9 !important;
}

.bg-t-lavender,
.bg-t-lavender::before,
.bg-t-lavender::after {
  background: #ecf1f4 !important;
}

.bg-t-snow,
.bg-t-snow::before,
.bg-t-snow::after {
  background: #fbfbfd !important;
}

.bg-t-blue-dark,
.bg-t-blue-dark::before,
.bg-t-blue-dark::after {
  background: #0f53fa !important;
}

.bg-t-indigo,
.bg-t-indigo::before,
.bg-t-indigo::after {
  background: #62147e !important;
}

.bg-t-skyblue,
.bg-t-skyblue::before,
.bg-t-skyblue::after {
  background: #0195ff !important;
}

.bg-t-stateblue,
.bg-t-stateblue::before,
.bg-t-stateblue::after {
  background: #6064e3 !important;
}

.bg-t-green-dark,
.bg-t-green-dark::before,
.bg-t-green-dark::after {
  background: #0fbc49 !important;
}

.bg-t-magenta,
.bg-t-magenta::before,
.bg-t-magenta::after {
  background: #562d57 !important;
}

.bg-t-orange-red,
.bg-t-orange-red::before,
.bg-t-orange-red::after {
  background: #ff523d !important;
}

.bg-t-plum,
.bg-t-plum::before,
.bg-t-plum::after {
  background: #e8daf5 !important;
}

.bg-t-red,
.bg-t-red::before,
.bg-t-red::after {
  background: #f6412d !important;
}

.bg-t-salmon,
.bg-t-salmon::before,
.bg-t-salmon::after {
  background: #ff523d !important;
}

.bg-t-violet,
.bg-t-violet::before,
.bg-t-violet::after {
  background: #9400d3 !important;
}

.bg-t-deepyellow,
.bg-t-deepyellow::before,
.bg-t-deepyellow::after {
  background: #ffa755 !important;
}

.bg-t-white,
.bg-t-white::before,
.bg-t-white::after {
  background: #fff !important;
}

.bg-t-black,
.bg-t-black::before,
.bg-t-black::after {
  background: #000 !important;
}

.bg-t-muted,
.bg-t-muted::before,
.bg-t-muted::after {
  background: #6c757d !important;
}

.bg-t-purple,
.bg-t-purple::before,
.bg-t-purple::after {
  background: #6a26da !important;
}

.bg-t-blue,
.bg-t-blue::before,
.bg-t-blue::after {
  background: #2d86fb !important;
}

.wsactive .wsanimated-arrow span {
  background: transparent !important;
}

/* --------------------- Fill utilities --------------------- */
.f-t-obsidian-veil,
.f-t-obsidian-veil * {
  fill: var(--c-obsidian-veil) !important;
}

.f-t-stormbound-teal,
.f-t-stormbound-teal * {
  fill: var(--c-stormbound-teal) !important;
}

.f-t-sandstone-aura,
.f-t-sandstone-aura * {
  fill: var(--c-sandstone-aura) !important;
}

.f-t-amber-eclipse,
.f-t-amber-eclipse * {
  fill: var(--c-amber-eclipse) !important;
}

.f-t-bronzed-ember,
.f-t-bronzed-ember * {
  fill: var(--c-bronzed-ember) !important;
}

/* New Text fill Utilities */
.f-t-dark,
.f-t-dark * {
  fill: #282b38 !important;
}

.f-t-deepdark,
.f-t-deepdark * {
  fill: #222d3d !important;
}

.f-t-lightgrey,
.f-t-lightgrey * {
  fill: #f6f7f8 !important;
}

.f-t-grey,
.f-t-grey * {
  fill: #f3f4f5 !important;
}

.f-t-whitesmoke,
.f-t-whitesmoke * {
  fill: #f4f4f9 !important;
}

.f-t-lavender,
.f-t-lavender * {
  fill: #ecf1f4 !important;
}

.f-t-snow,
.f-t-snow * {
  fill: #fbfbfd !important;
}

.f-t-blue-dark,
.f-t-blue-dark * {
  fill: #0f53fa !important;
}

.f-t-indigo,
.f-t-indigo * {
  fill: #62147e !important;
}

.f-t-skyblue,
.f-t-skyblue * {
  fill: #0195ff !important;
}

.f-t-stateblue,
.f-t-stateblue * {
  fill: #6064e3 !important;
}

.f-t-green-dark,
.f-t-green-dark * {
  fill: #0fbc49 !important;
}

.f-t-magenta,
.f-t-magenta * {
  fill: #562d57 !important;
}

.f-t-orange-red,
.f-t-orange-red * {
  fill: #ff523d !important;
}

.f-t-plum,
.f-t-plum * {
  fill: #e8daf5 !important;
}

.f-t-red,
.f-t-red * {
  fill: #f6412d !important;
}

.f-t-salmon,
.f-t-salmon * {
  fill: #ff523d !important;
}

.f-t-violet,
.f-t-violet * {
  fill: #9400d3 !important;
}

.f-t-deepyellow,
.f-t-deepyellow * {
  fill: #ffa755 !important;
}
.f-t-white,
.f-t-white * {
  fill: #fff !important;
}
.f-t-black,
.f-t-black * {
  fill: #000 !important;
}
.f-t-muted,
.f-t-muted * {
  fill: #6c757d !important;
}
.f-t-purple,
.f-t-purple * {
  fill: #6a26da !important;
}
.f-t-blue,
.f-t-blue * {
  fill: #2d86fb !important;
}

/* New Text Hover Color Utilities */
.t-h-dark:hover,
.t-h-dark:hover * {
  color: #282b38 !important;
  --current-hover: #282b38;
}

.t-h-deepdark:hover,
.t-h-deepdark:hover * {
  color: #222d3d !important;
  --current-hover: #222d3d;
}

.t-h-lightgrey:hover,
.t-h-lightgrey:hover * {
  color: #f6f7f8 !important;
  --current-hover: #f6f7f8;
}

.t-h-grey:hover,
.t-h-grey:hover * {
  color: #f3f4f5 !important;
  --current-hover: #f3f4f5;
}
/* Hover Text Color Utilities with CSS Variables */

.t-h-whitesmoke:hover,
.t-h-whitesmoke:hover * {
  color: #f4f4f9 !important;
  --current-hover: #f4f4f9;
}

.t-h-lavender:hover,
.t-h-lavender:hover * {
  color: #ecf1f4 !important;
  --current-hover: #ecf1f4;
}

.t-h-snow:hover,
.t-h-snow:hover * {
  color: #fbfbfd !important;
  --current-hover: #fbfbfd;
}

.t-h-blue-dark:hover,
.t-h-blue-dark:hover * {
  color: #0f53fa !important;
  --current-hover: #0f53fa;
}

.t-h-indigo:hover,
.t-h-indigo:hover * {
  color: #62147e !important;
  --current-hover: #62147e;
}

.t-h-skyblue:hover,
.t-h-skyblue:hover * {
  color: #0195ff !important;
  --current-hover: #0195ff;
}

.t-h-stateblue:hover,
.t-h-stateblue:hover * {
  color: #6064e3 !important;
  --current-hover: #6064e3;
}

.t-h-green-dark:hover,
.t-h-green-dark:hover * {
  color: #0fbc49 !important;
  --current-hover: #0fbc49;
}

.t-h-magenta:hover,
.t-h-magenta:hover * {
  color: #562d57 !important;
  --current-hover: #562d57;
}

.t-h-orange-red:hover,
.t-h-orange-red:hover * {
  color: #ff523d !important;
  --current-hover: #ff523d;
}

.t-h-plum:hover,
.t-h-plum:hover * {
  color: #e8daf5 !important;
  --current-hover: #e8daf5;
}

.t-h-red:hover,
.t-h-red:hover * {
  color: #f6412d !important;
  --current-hover: #f6412d;
}

.t-h-salmon:hover,
.t-h-salmon:hover * {
  color: #ff523d !important;
  --current-hover: #ff523d;
}

.t-h-violet:hover,
.t-h-violet:hover * {
  color: #9400d3 !important;
  --current-hover: #9400d3;
}

.t-h-deepyellow:hover,
.t-h-deepyellow:hover * {
  color: #ffa755 !important;
  --current-hover: #ffa755;
}

.t-h-white:hover,
.t-h-white:hover * {
  color: #fff !important;
  --current-hover: #fff;
}

.t-h-black:hover,
.t-h-black:hover * {
  color: #000 !important;
  --current-hover: #000;
}

.t-h-muted:hover,
.t-h-muted:hover * {
  color: #6c757d !important;
  --current-hover: #6c757d;
}

.t-h-purple:hover,
.t-h-purple:hover * {
  color: #6a26da !important;
  --current-hover: #6a26da;
}

.t-h-blue:hover,
.t-h-blue:hover * {
  color: #2d86fb !important;
  --current-hover: #2d86fb;
}

/* Custom Variables Sections */

.t-h-obsidian-veil:hover,
.t-h-obsidian-veil:hover * {
  color: var(--c-obsidian-veil) !important;
  --current-hover: var(--c-obsidian-veil);
}

.t-h-stormbound-teal:hover,
.t-h-stormbound-teal:hover * {
  color: var(--c-stormbound-teal) !important;
  --current-hover: var(--c-stormbound-teal);
}

.t-h-sandstone-aura:hover,
.t-h-sandstone-aura:hover * {
  color: var(--c-sandstone-aura) !important;
  --current-hover: var(--c-sandstone-aura);
}

.t-h-amber-eclipse:hover,
.t-h-amber-eclipse:hover * {
  color: var(--c-amber-eclipse) !important;
  --current-hover: var(--c-amber-eclipse);
}

.t-h-bronzed-ember:hover,
.t-h-bronzed-ember:hover * {
  color: var(--c-bronzed-ember) !important;
  --current-hover: var(--c-bronzed-ember);
}
/* Selects any element with a class containing "-hover" when hovered */
[class*="-hover"]:hover {
  background-image: none !important;
}

/* fill hover color */

.f-t-h-dark:hover,
.f-t-h-dark:hover * {
  fill: #282b38 !important;
}

.f-t-h-deepdark:hover,
.f-t-h-deepdark:hover * {
  fill: #222d3d !important;
}

.f-t-h-lightgrey:hover,
.f-t-h-lightgrey:hover * {
  fill: #f6f7f8 !important;
}

.f-t-h-grey:hover,
.f-t-h-grey:hover * {
  fill: #f3f4f5 !important;
}

.f-t-h-whitesmoke:hover,
.f-t-h-whitesmoke:hover * {
  fill: #f4f4f9 !important;
}

.f-t-h-lavender:hover,
.f-t-h-lavender:hover * {
  fill: #ecf1f4 !important;
}

.f-t-h-snow:hover,
.f-t-h-snow:hover * {
  fill: #fbfbfd !important;
}

.f-t-h-blue-dark:hover,
.f-t-h-blue-dark:hover * {
  fill: #0f53fa !important;
}

.f-t-h-indigo:hover,
.f-t-h-indigo:hover * {
  fill: #62147e !important;
}

.f-t-h-skyblue:hover,
.f-t-h-skyblue:hover * {
  fill: #0195ff !important;
}

.f-t-h-stateblue:hover,
.f-t-h-stateblue:hover * {
  fill: #6064e3 !important;
}

.f-t-h-green-dark:hover,
.f-t-h-green-dark:hover * {
  fill: #0fbc49 !important;
}

.f-t-h-magenta:hover,
.f-t-h-magenta:hover * {
  fill: #562d57 !important;
}

.f-t-h-orange-red:hover,
.f-t-h-orange-red:hover * {
  fill: #ff523d !important;
}

.f-t-h-plum:hover,
.f-t-h-plum:hover * {
  fill: #e8daf5 !important;
}

.f-t-h-red:hover,
.f-t-h-red:hover * {
  fill: #f6412d !important;
}

.f-t-h-salmon:hover,
.f-t-h-salmon:hover * {
  fill: #ff523d !important;
}

.f-t-h-violet:hover,
.f-t-h-violet:hover * {
  fill: #9400d3 !important;
}

.f-t-h-deepyellow:hover,
.f-t-h-deepyellow:hover * {
  fill: #ffa755 !important;
}

.f-t-h-white:hover,
.f-t-h-white:hover * {
  fill: #fff !important;
}

.f-t-h-black:hover,
.f-t-h-black:hover * {
  fill: #000 !important;
}

.f-t-h-muted:hover,
.f-t-h-muted:hover * {
  fill: #6c757d !important;
}

.f-t-h-purple:hover,
.f-t-h-purple:hover * {
  fill: #6a26da !important;
}

.f-t-h-blue:hover,
.f-t-h-blue:hover * {
  fill: #2d86fb !important;
}

/* Custom Variables Sections */

.f-t-h-obsidian-veil:hover,
.f-t-h-obsidian-veil:hover * {
  fill: var(--c-obsidian-veil) !important;
}

.f-t-h-stormbound-teal:hover,
.f-t-h-stormbound-teal:hover * {
  fill: var(--c-stormbound-teal) !important;
}

.f-t-h-sandstone-aura:hover,
.f-t-h-sandstone-aura:hover * {
  fill: var(--c-sandstone-aura) !important;
}

.f-t-h-amber-eclipse:hover,
.f-t-h-amber-eclipse:hover * {
  fill: var(--c-amber-eclipse) !important;
}

.f-t-h-bronzed-ember:hover,
.f-t-h-bronzed-ember:hover * {
  fill: var(--c-bronzed-ember) !important;
}




.btn-obsidian-veil,
.scroll .btn-obsidian-veil,
.white-color .btn-obsidian-veil,
.obsidian-veil-hover:hover,
.scroll .obsidian-veil-hover:hover,
.white-color .obsidian-veil-hover:hover {
  color: #fff !important;
  background-color: var(--c-obsidian-veil) !important;
  border-color: var(--c-obsidian-veil) !important;
}

.btn-stormbound-teal,
.scroll .btn-stormbound-teal,
.white-color .btn-stormbound-teal,
.stormbound-teal-hover:hover,
.scroll .stormbound-teal-hover:hover,
.white-color .stormbound-teal-hover:hover {
  color: #fff !important;
  background-color: var(--c-stormbound-teal) !important;
  border-color: var(--c-stormbound-teal) !important;
}

.btn-sandstone-aura,
.scroll .btn-sandstone-aura,
.white-color .btn-sandstone-aura,
.sandstone-aura-hover:hover,
.scroll .sandstone-aura-hover:hover,
.white-color .sandstone-aura-hover:hover {
  color: #fff !important;
  background-color: var(--c-sandstone-aura) !important;
  border-color: var(--c-sandstone-aura) !important;
}

.btn-amber-eclipse,
.scroll .btn-amber-eclipse,
.white-color .btn-amber-eclipse,
.amber-eclipse-hover:hover,
.scroll .amber-eclipse-hover:hover,
.white-color .amber-eclipse-hover:hover {
  color: #fff !important;
  background-color: var(--c-amber-eclipse) !important;
  border-color: var(--c-amber-eclipse) !important;
}

.btn-bronzed-ember,
.scroll .btn-bronzed-ember,
.white-color .btn-bronzed-ember,
.bronzed-ember-hover:hover,
.scroll .bronzed-ember-hover:hover,
.white-color .bronzed-ember-hover:hover {
  color: #fff !important;
  background-color: var(--c-bronzed-ember) !important;
  border-color: var(--c-bronzed-ember) !important;
}

.btn-blue,
.scroll .btn-blue,
.white-color .btn-blue,
.blue-hover:hover,
.scroll .blue-hover:hover,
.white-color .blue-hover:hover {
  color: #fff !important;
  background-color: #0f53fa !important;
  border-color: #0f53fa !important;
}

.btn-tra-blue,
.scroll .btn-tra-blue,
.white-color .btn-tra-blue,
.tra-blue-hover:hover,
.scroll .tra-blue-hover:hover,
.white-color .tra-blue-hover:hover {
  color: #0f53fa !important;
  background-color: transparent !important;
  border-color: #0f53fa !important;
}

.btn-green,
.scroll .btn-green,
.white-color .btn-green,
.green-hover:hover,
.scroll .green-hover:hover,
.white-color .green-hover:hover {
  color: #fff !important;
  background-color: #0fbc49 !important;
  border-color: #0fbc49 !important;
}

.btn-tra-green,
.scroll .btn-tra-green,
.white-color .btn-tra-green,
.tra-green-hover:hover,
.scroll .tra-green-hover:hover,
.white-color .tra-green-hover:hover {
  color: #0fbc49 !important;
  background-color: transparent !important;
  border-color: #0fbc49 !important;
}

.btn-indigo,
.scroll .btn-indigo,
.white-color .btn-indigo,
.indigo-hover:hover,
.scroll .indigo-hover:hover,
.white-color .indigo-hover:hover {
  color: #fff !important;
  background-color: #62147e !important;
  border-color: #62147e !important;
}

.btn-tra-indigo,
.scroll .btn-tra-indigo,
.white-color .btn-tra-indigo,
.tra-indigo-hover:hover,
.scroll .tra-indigo-hover:hover,
.white-color .tra-indigo-hover:hover {
  color: #62147e !important;
  background-color: transparent !important;
  border-color: #62147e !important;
}

.btn-orange-red,
.scroll .btn-orange-red,
.white-color .btn-orange-red,
.orange-red-hover:hover,
.scroll .orange-red-hover:hover,
.white-color .orange-red-hover:hover {
  color: #fff !important;
  background-color: #ff523d !important;
  border-color: #ff523d !important;
}

.btn-tra-orange-red,
.scroll .btn-tra-orange-red,
.white-color .btn-tra-orange-red,
.tra-orange-red-hover:hover,
.scroll .tra-orange-red-hover:hover,
.white-color .tra-orange-red-hover:hover {
  color: #ff523d !important;
  background-color: transparent !important;
  border-color: #ff523d !important;
}

.btn-pink,
.scroll .btn-pink,
.white-color .btn-pink,
.pink-hover:hover,
.scroll .pink-hover:hover,
.white-color .pink-hover:hover {
  color: #fff !important;
  background-color: #2d86fb !important;
  border-color: #2d86fb !important;
}

.btn-tra-pink,
.scroll .btn-tra-pink,
.white-color .btn-tra-pink,
.tra-pink-hover:hover,
.scroll .tra-pink-hover:hover,
.white-color .tra-pink-hover:hover {
  color: #2d86fb !important;
  background-color: transparent !important;
  border-color: #2d86fb !important;
}

.btn-purple,
.scroll .btn-purple,
.white-color .btn-purple,
.purple-hover:hover,
.scroll .purple-hover:hover,
.white-color .purple-hover:hover {
  color: #fff !important;
  background-color: #6a26da !important;
  border-color: #6a26da !important;
}

.btn-tra-purple,
.scroll .btn-tra-purple,
.white-color .btn-tra-purple,
.tra-purple-hover:hover,
.scroll .tra-purple-hover:hover,
.white-color .tra-purple-hover:hover {
  color: #6a26da !important;
  background-color: transparent !important;
  border-color: #6a26da !important;
}

.btn-red,
.scroll .btn-red,
.white-color .btn-red,
.red-hover:hover,
.scroll .red-hover:hover,
.white-color .red-hover:hover {
  color: #fff !important;
  background-color: #f6412d !important;
  border-color: #f6412d !important;
}

.btn-tra-red,
.scroll .btn-tra-red,
.white-color .btn-tra-red,
.tra-red-hover:hover,
.scroll .tra-red-hover:hover,
.white-color .tra-red-hover:hover {
  color: #f6412d !important;
  background-color: transparent !important;
  border-color: #f6412d !important;
}

.btn-skyblue,
.scroll .btn-skyblue,
.white-color .btn-skyblue,
.skyblue-hover:hover,
.scroll .skyblue-hover:hover,
.white-color .skyblue-hover:hover {
  color: #fff !important;
  background-color: #0195ff !important;
  border-color: #0195ff !important;
}

.btn-tra-skyblue,
.scroll .btn-tra-skyblue,
.white-color .btn-tra-skyblue,
.tra-skyblue-hover:hover,
.scroll .tra-skyblue-hover:hover,
.white-color .tra-skyblue-hover:hover {
  color: #0195ff !important;
  background-color: transparent !important;
  border-color: #0195ff !important;
}

.btn-stateblue,
.scroll .btn-stateblue,
.white-color .btn-stateblue,
.stateblue-hover:hover,
.scroll .stateblue-hover:hover,
.white-color .stateblue-hover:hover {
  color: #fff !important;
  background-color: #6064e3 !important;
  border-color: #6064e3 !important;
}

.btn-tra-stateblue,
.scroll .btn-tra-stateblue,
.white-color .btn-tra-stateblue,
.tra-stateblue-hover:hover,
.scroll .tra-stateblue-hover:hover,
.white-color .tra-stateblue-hover:hover {
  color: #6064e3 !important;
  background-color: transparent !important;
  border-color: #6064e3 !important;
}

.btn-violet,
.scroll .btn-violet,
.white-color .btn-violet,
.violet-hover:hover,
.scroll .violet-hover:hover,
.white-color .violet-hover:hover {
  color: #fff !important;
  background-color: #9400d3 !important;
  border-color: #9400d3 !important;
}

.btn-tra-violet,
.scroll .btn-tra-violet,
.white-color .btn-tra-violet,
.tra-violet-hover:hover,
.scroll .tra-violet-hover:hover,
.white-color .tra-violet-hover:hover {
  color: #9400d3 !important;
  background-color: transparent !important;
  border-color: #9400d3 !important;
}

.btn-violet-red,
.scroll .btn-violet-red,
.white-color .btn-violet-red,
.violet-red-hover:hover,
.scroll .violet-red-hover:hover,
.white-color .violet-red-hover:hover {
  color: #fff !important;
  background-color: #c73e9b !important;
  border-color: #c73e9b !important;
}

.btn-tra-violet-red,
.scroll .btn-tra-violet-red,
.white-color .btn-tra-violet-red,
.tra-violet-red-hover:hover,
.scroll .tra-violet-red-hover:hover,
.white-color .tra-violet-red-hover:hover {
  color: #c73e9b !important;
  background-color: transparent !important;
  border-color: #c73e9b !important;
}

.btn-yellow,
.scroll .btn-yellow,
.white-color .btn-yellow,
.yellow-hover:hover,
.scroll .yellow-hover:hover,
.white-color .yellow-hover:hover {
  color: #1d293f !important;
  background-color: #ffb30c !important;
  border-color: #ffb30c !important;
}

.btn-tra-yellow,
.scroll .btn-tra-yellow,
.white-color .btn-tra-yellow,
.tra-yellow-hover:hover,
.scroll .tra-yellow-hover:hover,
.white-color .tra-yellow-hover:hover {
  color: #1d293f !important;
  background-color: transparent !important;
  border-color: #ffb30c !important;
}


/* Hover:before BGs */


.b-obsidian-veil-hover:hover::before {
  background-color: var(--c-obsidian-veil) !important;
}

.b-stormbound-teal-hover:hover::before {
  background-color: var(--c-stormbound-teal) !important;
}

.b-sandstone-aura-hover:hover::before {
  background-color: var(--c-sandstone-aura) !important;
}

.b-amber-eclipse-hover:hover::before {
  background-color: var(--c-amber-eclipse) !important;
}

.b-bronzed-ember-hover:hover::before {
  background-color: var(--c-bronzed-ember) !important;
}

.b-blue-hover:hover::before {
  background-color: #0f53fa !important;
}

.b-tra-blue-hover:hover::before {
  background-color: #0f53fa !important;
}

.b-green-hover:hover::before {
  background-color: #0fbc49 !important;
}

.b-tra-green-hover:hover::before {
  background-color: #0fbc49 !important;
}

.b-indigo-hover:hover::before {
  background-color: #62147e !important;
}

.b-tra-indigo-hover:hover::before {
  background-color: #62147e !important;
}

.b-orange-red-hover:hover::before {
  background-color: #ff523d !important;
}

.b-tra-orange-red-hover:hover::before {
  background-color: #ff523d !important;
}

.b-pink-hover:hover::before {
  background-color: #2d86fb !important;
}

.b-tra-pink-hover:hover::before {
  background-color: #2d86fb !important;
}

.b-purple-hover:hover::before {
  background-color: #6a26da !important;
}

.b-tra-purple-hover:hover::before {
  background-color: #6a26da !important;
}

.b-red-hover:hover::before {
  background-color: #f6412d !important;
}

.b-tra-red-hover:hover::before {
  background-color: #f6412d !important;
}

.b-skyblue-hover:hover::before {
  background-color: #0195ff !important;
}

.b-tra-skyblue-hover:hover::before {
  background-color: #0195ff !important;
}

.b-stateblue-hover:hover::before {
  background-color: #6064e3 !important;
}

.b-tra-stateblue-hover:hover::before {
  background-color: #6064e3 !important;
}

.b-violet-hover:hover::before {
  background-color: #9400d3 !important;
}

.b-tra-violet-hover:hover::before {
  background-color: #9400d3 !important;
}

.b-violet-red-hover:hover::before {
  background-color: #c73e9b !important;
}

.b-tra-violet-red-hover:hover::before {
  background-color: #c73e9b !important;
}

.b-yellow-hover:hover::before {
  background-color: #ffb30c !important;
}

.b-tra-yellow-hover:hover::before {
  background-color: #ffb30c !important;
}


/*------------------------------------------*/
/*  Button Hover
/*------------------------------------------*/

.white-hover:hover,
.scroll .white-hover:hover {
  color: #1d293f !important;
  background-color: #fff !important;
  border-color: #fff !important;
}

.tra-white-hover:hover,
.white-color .tra-white-hover:hover {
  color: #fff !important;
  background-color: transparent !important;
  border-color: #fff !important;
}

.scroll .tra-white-hover:hover {
  color: #1d293f !important;
  background-color: transparent !important;
  border-color: #1d293f !important;
}

.dark-menu .scroll .tra-white-hover:hover {
  color: #fff !important;
  background-color: transparent !important;
  border-color: #fff !important;
}

.black-hover:hover,
.scroll .black-hover:hover,
.white-color .black-hover:hover {
  color: #fff !important;
  background-color: #1d293f !important;
  border-color: #1d293f !important;
}

.tra-black-hover:hover,
.scroll .tra-black-hover:hover .white-color .tra-black-hover:hover {
  color: #1d293f !important;
  background-color: transparent !important;
  border-color: #1d293f !important;
}

.grey-hover:hover,
.scroll .grey-hover:hover {
  color: #1d293f !important;
  background-color: rgba(17, 36, 70, 0.04) !important;
  border-color: rgba(17, 36, 70, 0.02) !important;
}

.tra-grey-hover:hover,
.scroll .tra-grey-hover:hover {
  color: #1d293f !important;
  background-color: transparent !important;
  border-color: #ccc !important;
}