/* ============================================
   THEME SYSTEM - Dark/Light Mode
   ============================================ */

:root {
  /* Light Mode (Default) */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8f7f3;
  --theme-bg-tertiary: #fafafa;
  --theme-bg-dark: #000000;
  --theme-bg-dark-gradient: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
  
  --theme-text-primary: #000000;
  --theme-text-secondary: #333333;
  --theme-text-tertiary: #666666;
  --theme-text-grey: #999999;
  --theme-text-grey-light: #bbbbbb;
  --theme-text-white: #ffffff;
  --theme-text-red: #ea384c;
  --theme-text-accent: #f3350c;
  --theme-text-dark-grey: #2a2a2a; /* Light black for better readability */
  
  /* Brand colors - consistent across themes */
  --color-red-primary: #B73645;
  --color-red-secondary: #ea384c;
  
  --theme-border: rgba(0, 0, 0, 0.1);
  --theme-border-light: rgba(255, 255, 255, 0.08);
  
  --theme-logo-filter: brightness(0);
  --theme-menu-icon-color: #000000;
  --theme-toggle-icon-color: #000000;
  
  --theme-overlay-light: rgba(255, 255, 255, 0.4);
  --theme-overlay-dark: rgba(0, 0, 0, 0.4);
  
  --theme-card-bg: rgba(255, 255, 255, 0.6);
  --theme-card-border: rgba(0, 0, 0, 0.08);
  
  --theme-solutions-bg: linear-gradient(180deg, #fff 0%, #f8f7f3 100%);
  --theme-solutions-text: #000000;
  --theme-solutions-text-secondary: #666666;
  --theme-solutions-text-light: #333333;
  --theme-solutions-card-bg: rgba(255, 255, 255, 0.6);
  --theme-solutions-card-border: rgba(0, 0, 0, 0.08);
  
  --theme-faq-bg: linear-gradient(180deg, #fff 0%, #f8f7f3 100%);
  --theme-faq-text: #000000;
  
  --theme-menu-bg: rgba(0, 0, 0, 0.95);
  --theme-menu-text: #ffffff;
  --theme-menu-blur-bg: rgba(0, 0, 0, 0.5);
  
  --theme-video-overlay-text: #ffffff;
}

[data-theme="dark"] {
  /* Dark Mode */
  --theme-bg-primary: #000000;
  --theme-bg-secondary: #0a0a0a;
  --theme-bg-tertiary: #111111;
  --theme-bg-dark: #ffffff;
  --theme-bg-dark-gradient: linear-gradient(180deg, #fff 0%, #f8f7f3 100%);
  
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #ffffff;
  --theme-text-tertiary: #cccccc;
  --theme-text-grey: #999999;
  --theme-text-grey-light: #666666;
  --theme-text-white: #000000;
  --theme-text-red: #ea384c;
  --theme-text-accent: #f3350c;
  --theme-text-dark-grey: #bbbbbb; /* Original grey for dark mode */
  
  /* Brand colors - consistent across themes */
  --color-red-primary: #B73645;
  --color-red-secondary: #ea384c;
  
  --theme-border: rgba(255, 255, 255, 0.1);
  --theme-border-light: rgba(0, 0, 0, 0.08);
  
  --theme-logo-filter: brightness(0) invert(1);
  --theme-menu-icon-color: #ffffff;
  --theme-toggle-icon-color: #ffffff;
  
  --theme-overlay-light: rgba(0, 0, 0, 0.4);
  --theme-overlay-dark: rgba(255, 255, 255, 0.4);
  
  --theme-card-bg: rgba(0, 0, 0, 0.6);
  --theme-card-border: rgba(255, 255, 255, 0.08);
  
  --theme-solutions-bg: linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #000000 100%);
  --theme-solutions-text: #ffffff;
  --theme-solutions-text-secondary: #999999;
  --theme-solutions-text-light: #bbbbbb;
  --theme-solutions-card-bg: rgba(10, 10, 10, 0.6);
  --theme-solutions-card-border: rgba(255, 255, 255, 0.08);
  
  --theme-faq-bg: linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #000000 100%);
  --theme-faq-text: #ffffff;
  
  --theme-menu-bg: rgba(255, 255, 255, 0.95);
  --theme-menu-text: #000000;
  --theme-menu-blur-bg: rgba(255, 255, 255, 0.5);
  
  --theme-video-overlay-text: #000000;
}

/* Theme Toggle Button */
.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 1rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10000;
  flex-shrink: 0;
}

/* Ensure navbar_links-menu has proper spacing */
.navbar_links-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Prevent theme toggle from overlaying menu - menu should be above toggle when open */
.menu_component {
  position: relative;
  z-index: 10001;
}

/* When menu is open, it should be above the toggle */
.menu {
  z-index: 10002 !important;
}

.menu[style*="display: block"],
.menu[style*="display:flex"],
.menu[style*="display: block;"] {
  z-index: 10002 !important;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle-icon {
  width: 24px;
  height: 24px;
  position: absolute;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-icon.sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle-icon.moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}

[data-theme="dark"] .theme-toggle-icon.sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}

[data-theme="dark"] .theme-toggle-icon.moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Sun Icon SVG - black filled in light mode */
.theme-toggle-icon.sun svg {
  width: 100%;
  height: 100%;
  color: #000000;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-icon.sun svg circle {
  fill: #000000;
}

.theme-toggle-icon.sun svg path {
  stroke: #000000;
}

/* Moon Icon SVG - white filled in dark mode for visibility */
.theme-toggle-icon.moon svg {
  width: 100%;
  height: 100%;
  color: #ffffff;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-icon.moon svg path {
  fill: #ffffff;
  transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* In dark mode, moon is white for visibility on black background */
[data-theme="dark"] .theme-toggle-icon.moon svg path {
  fill: #ffffff !important;
  opacity: 1 !important;
}

/* In light mode, sun stays black */
:root:not([data-theme="dark"]) .theme-toggle-icon.sun svg circle,
:root:not([data-theme="dark"]) .theme-toggle-icon.sun svg path {
  fill: #000000;
  stroke: #000000;
}

/* Apply theme colors to body */
body {
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo theming - SVG files are swapped, but keep filter as fallback */
.navbar_logo {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  drop-shadow: none !important;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1 !important;
}

/* In dark mode, logo should be white (handled by JS swapping to Logo.WHITE.svg) */
[data-theme="dark"] .navbar_logo {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  drop-shadow: none !important;
}

/* In light mode, logo should be black (handled by JS swapping to black-logo.svg) */
:root:not([data-theme="dark"]) .navbar_logo {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  drop-shadow: none !important;
}

/* Menu hamburger theming - theme takes precedence - apply to all pages */
[data-theme="dark"] .hamburger_line,
[data-theme="dark"] .hamburger_line._1,
[data-theme="dark"] .hamburger_line._2,
[data-theme="dark"] .hamburger_line._3 {
  background-color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

.hamburger_line,
.hamburger_line._1,
.hamburger_line._2,
.hamburger_line._3 {
  background-color: var(--theme-menu-icon-color) !important;
  box-shadow: none !important;
  border: none !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove any white stroke/outline from hamburger - apply to all pages */
.hamburger,
.hamburger_line,
.hamburger_line._1,
.hamburger_line._2,
.hamburger_line._3 {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
}

/* Theme toggle icon color - handled by specific sun/moon rules below */

/* Menu background - transparent with blur, adapts to theme - apply to all pages */
.menu {
  background-color: transparent !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu_bg-blur {
  background-color: var(--theme-menu-blur-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override hardcoded background in site.css */
:root:not([data-theme="dark"]) .menu_bg-blur {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .menu_bg-blur {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.menu_in {
  background-color: var(--theme-menu-bg) !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override hardcoded background in site.css */
:root:not([data-theme="dark"]) .menu_in {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .menu_in {
  background-color: rgba(0, 0, 0, 0.95) !important;
}

.menu_link-text {
  color: var(--theme-menu-text) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override any hardcoded text colors */
:root:not([data-theme="dark"]) .menu_link-text {
  color: #000000 !important;
}

[data-theme="dark"] .menu_link-text {
  color: #ffffff !important;
}

.menu_legal-text {
  color: var(--theme-menu-text) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override any hardcoded text colors */
:root:not([data-theme="dark"]) .menu_legal-text {
  color: #000000 !important;
}

[data-theme="dark"] .menu_legal-text {
  color: #ffffff !important;
}

.menu_close-icon {
  filter: var(--theme-logo-filter);
  transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Menu close button - inverted colors for light mode */
/* In dark mode: grey background with white icon (current - works great) */
/* In light mode: white background with black icon (inverted) */
:root:not([data-theme="dark"]) .menu_close {
  background-color: #ffffff !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:root:not([data-theme="dark"]) .menu_close-icon {
  filter: brightness(0) !important; /* Black icon in light mode */
  -webkit-filter: brightness(0) !important;
  transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure the icon SVG itself is black in light mode */
:root:not([data-theme="dark"]) .menu_close-icon svg,
:root:not([data-theme="dark"]) .menu_close-icon path,
:root:not([data-theme="dark"]) .menu_close-icon line {
  stroke: #000000 !important;
  fill: #000000 !important;
  color: #000000 !important;
}

/* In dark mode, keep the grey background with white icon */
[data-theme="dark"] .menu_close {
  background-color: var(--_colors---grey--50) !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .menu_close-icon {
  filter: brightness(0) invert(1) !important; /* White icon in dark mode */
  transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text over videos - always light colored for visibility */
.note-marquee_text,
.home-header_subhead {
  color: #ffffff !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* House Cleo heading - adapts to theme: black in light mode, white in dark mode */
.home-header_headings .home-header_heading,
.section_home-header .home-header_heading,
h1.home-header_heading,
h2.home-header_heading {
  color: #000000 !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* In dark mode, text over videos stays white for visibility */
[data-theme="dark"] .home-header_headings .home-header_heading,
[data-theme="dark"] .section_home-header .home-header_heading,
[data-theme="dark"] h1.home-header_heading,
[data-theme="dark"] h2.home-header_heading {
  color: #ffffff !important;
}

[data-theme="dark"] .note-marquee_text,
[data-theme="dark"] .home-header_subhead {
  color: #ffffff !important;
}

/* Solutions 2025 Section */
#solutions-2025 {
  background: var(--theme-solutions-bg) !important;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#solutions-2025 h2,
#solutions-2025 h3,
#solutions-2025 .sol-content-2025 h3 {
  color: var(--theme-solutions-text) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* "Our Products" heading - black in light mode */
:root:not([data-theme="dark"]) #solutions-2025 h2 span {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #000000 !important;
  background-clip: unset !important;
  color: #000000 !important;
}

#solutions-2025 p {
  color: var(--theme-solutions-text-secondary) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#solutions-2025 .sol-content-2025 p,
#solutions-2025 .sol-content-2025 p strong {
  color: var(--theme-solutions-text-light) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#solutions-2025 .sol-content-2025 p strong {
  color: var(--theme-solutions-text) !important;
}

.sol-card-2025 {
  background: var(--theme-solutions-card-bg) !important;
  border-color: var(--theme-solutions-card-border) !important;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add shadows to product cards in light mode */
:root:not([data-theme="dark"]) .sol-card-2025 {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

:root:not([data-theme="dark"]) .sol-card-2025:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-4px) !important;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sol-tag-2025 {
  background: rgba(183, 54, 69, 0.1) !important;
  border-color: rgba(183, 54, 69, 0.3) !important;
  color: var(--color-red-primary) !important;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tags stay red in both light and dark modes */
[data-theme="dark"] .sol-tag-2025 {
  background: rgba(183, 54, 69, 0.15) !important;
  border-color: rgba(183, 54, 69, 0.4) !important;
  color: #B73645 !important;
}

:root:not([data-theme="dark"]) .sol-tag-2025 {
  background: rgba(183, 54, 69, 0.1) !important;
  border-color: rgba(183, 54, 69, 0.3) !important;
  color: #B73645 !important;
}

/* Explore buttons - red in both light and dark modes */
.sol-arrow-2025 {
  color: #B73645 !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sol-arrow-2025 svg {
  stroke: #B73645 !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Explore buttons stay red in both modes */
[data-theme="dark"] .sol-arrow-2025,
:root:not([data-theme="dark"]) .sol-arrow-2025 {
  color: var(--color-red-primary) !important;
}

[data-theme="dark"] .sol-arrow-2025 svg,
:root:not([data-theme="dark"]) .sol-arrow-2025 svg {
  stroke: var(--color-red-primary) !important;
  fill: none !important;
}

/* View All Products button - red in both light and dark modes */
#sol-btn-2025 {
  color: var(--color-red-primary) !important;
  border-color: var(--color-red-primary) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#sol-btn-2025 svg {
  stroke: var(--color-red-primary) !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* View All Products button stays red in both modes */
[data-theme="dark"] #sol-btn-2025,
:root:not([data-theme="dark"]) #sol-btn-2025 {
  color: var(--color-red-primary) !important;
  border-color: var(--color-red-primary) !important;
}

[data-theme="dark"] #sol-btn-2025 svg,
:root:not([data-theme="dark"]) #sol-btn-2025 svg {
  stroke: var(--color-red-primary) !important;
  fill: none !important;
}

/* Portal entry button - red in both light and dark modes */
.portal-entry-btn {
  color: var(--color-red-primary) !important;
  border-color: var(--color-red-primary) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portal-entry-btn svg {
  stroke: var(--color-red-primary) !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Portal entry button stays red in both modes */
[data-theme="dark"] .portal-entry-btn,
:root:not([data-theme="dark"]) .portal-entry-btn {
  color: var(--color-red-primary) !important;
  border-color: var(--color-red-primary) !important;
}

[data-theme="dark"] .portal-entry-btn svg,
:root:not([data-theme="dark"]) .portal-entry-btn svg {
  stroke: var(--color-red-primary) !important;
  fill: none !important;
}

/* Navigation arrows - grey by default, visible in both modes */
#solutions-2025 .control-btn {
  color: rgba(128, 128, 128, 0.6) !important;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1 !important;
  visibility: visible !important;
}

#solutions-2025 .control-btn svg {
  fill: rgba(128, 128, 128, 0.6) !important;
  transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1 !important;
  visibility: visible !important;
}

/* Preserve hover state - red on hover */
#solutions-2025 .control-btn:hover {
  color: var(--color-red-primary) !important;
}

#solutions-2025 .control-btn:hover svg {
  fill: var(--color-red-primary) !important;
}

/* NAVIGATE text - grey in both modes */
#solutions-2025 .slider-controls div {
  color: rgba(128, 128, 128, 0.6) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure arrows are visible in both light and dark modes */
:root:not([data-theme="dark"]) #solutions-2025 .control-btn,
[data-theme="dark"] #solutions-2025 .control-btn {
  color: rgba(128, 128, 128, 0.6) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:root:not([data-theme="dark"]) #solutions-2025 .control-btn svg,
[data-theme="dark"] #solutions-2025 .control-btn svg {
  fill: rgba(128, 128, 128, 0.6) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hover state works in both modes */
:root:not([data-theme="dark"]) #solutions-2025 .control-btn:hover,
[data-theme="dark"] #solutions-2025 .control-btn:hover {
  color: var(--color-red-primary) !important;
}

:root:not([data-theme="dark"]) #solutions-2025 .control-btn:hover svg,
[data-theme="dark"] #solutions-2025 .control-btn:hover svg {
  fill: var(--color-red-primary) !important;
}

/* FAQ Section */
.section_faq {
  background: var(--theme-faq-bg) !important;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.section_faq h2,
.section_faq h3,
.section_faq .faq-header {
  color: var(--theme-faq-text) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* FAQ main title - black in light mode */
:root:not([data-theme="dark"]) .faq-main-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #000000 !important;
  background-clip: unset !important;
  color: #000000 !important;
}

/* FAQ main title - white in dark mode */
[data-theme="dark"] .faq-main-title {
  background: linear-gradient(135deg, #fff 0%, #999 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* FAQ question text - white in light mode */
:root:not([data-theme="dark"]) .faq-question {
  color: #ffffff !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:root:not([data-theme="dark"]) .faq-item:hover .faq-question {
  color: #ffffff !important;
}

:root:not([data-theme="dark"]) .faq-item.active .faq-question {
  color: #ffffff !important;
}

/* FAQ answer text - white in light mode */
:root:not([data-theme="dark"]) .faq-answer-content {
  color: #ffffff !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:root:not([data-theme="dark"]) .faq-answer-content p {
  color: #ffffff !important;
}

:root:not([data-theme="dark"]) .faq-answer-content strong {
  color: #ffffff !important;
}

/* Retro title - white in light mode */
:root:not([data-theme="dark"]) .retro-title {
  color: #ffffff !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Globe title - white in light mode */
:root:not([data-theme="dark"]) .globe-title {
  color: #ffffff !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Globe subtitle - white in light mode */
:root:not([data-theme="dark"]) .globe-subtitle {
  color: #ffffff !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Retro description - white in light mode, but keep highlight-text red */
:root:not([data-theme="dark"]) .retro-description {
  color: #ffffff !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:root:not([data-theme="dark"]) .retro-description strong,
:root:not([data-theme="dark"]) .retro-description .highlight-text {
  color: var(--color-red-primary) !important;
}

/* General text color classes */
.text-color-grey,
.text-color-grey-400 {
  color: var(--theme-text-grey) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-color-red {
  color: var(--theme-text-red) !important;
}

.text-color-white {
  color: #ffffff !important;
}

[data-theme="dark"] .text-color-white {
  color: #000000 !important;
}

/* Sections with backgrounds */
.section_home-header {
  background-color: transparent;
}

.section_home-grid,
.section_home-about {
  background-color: var(--theme-bg-primary);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Don't change sections with no background or overlays */
.w-background-video,
.home-header_video {
  background: transparent !important;
}

.w-background-video > video {
  background: transparent !important;
}

/* Ensure videos are not blocked */
video {
  pointer-events: auto !important;
  z-index: 1;
}

.w-background-video {
  pointer-events: none;
}

.w-background-video > video {
  pointer-events: auto;
}

/* Additional sections that need theming */
.section_home-grid,
.section_home-about,
.section_brands,
.section_testimonials,
.section_cta,
.section_blog-list {
  background-color: var(--theme-bg-primary) !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CTA Component - respects theme */
.cta_component {
  background-color: var(--theme-bg-primary) !important;
  background-image: none !important; /* Moved to ::before for theme control */
  position: relative;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure dots pattern is visible in both modes */
/* Use a pseudo-element or filter to ensure dots are always visible */
.cta_component::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/pixel.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* In light mode, ensure dots are dark/visible - darker grey */
:root:not([data-theme="dark"]) .cta_component::before {
  filter: brightness(0) opacity(0.5);
}

/* In dark mode, ensure dots are light/visible */
[data-theme="dark"] .cta_component::before {
  filter: brightness(0) invert(1) opacity(0.3);
}

/* Ensure content is above the dots */
.cta_content,
.cta_note {
  position: relative;
  z-index: 1;
}

/* CTA text colors - adapt to theme */
.section_cta .text-color-white,
.section_cta .text-color-white h1,
.section_cta .text-color-white h2,
.section_cta .text-color-white h3,
.section_cta .heading-style-h1,
.section_cta h1,
.section_cta h2 {
  color: var(--theme-text-primary) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CTA note marquee text */
.section_cta .note-marquee_text {
  color: var(--theme-text-secondary) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.6 !important;
}

/* CTA Button - "Get in touch" button text colors */
.section_cta .button-secondary,
.section_cta .button-secondary .button_text,
.section_cta .button-secondary .button_text._1,
.section_cta .button-secondary .button_text._2,
.section_cta .button-secondary.white,
.section_cta .w-variant-084c35ac-0c40-f906-a9cd-0d43386a2d5d .button_text,
.section_cta .w-variant-084c35ac-0c40-f906-a9cd-0d43386a2d5d .button_text._1,
.section_cta .w-variant-084c35ac-0c40-f906-a9cd-0d43386a2d5d .button_text._2 {
  color: var(--theme-text-primary) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* In dark mode, button text should be black */
[data-theme="dark"] .section_cta .button-secondary .button_text,
[data-theme="dark"] .section_cta .button-secondary .button_text._1,
[data-theme="dark"] .section_cta .button-secondary .button_text._2,
[data-theme="dark"] .section_cta .button-secondary.white .button_text,
[data-theme="dark"] .section_cta .w-variant-084c35ac-0c40-f906-a9cd-0d43386a2d5d .button_text,
[data-theme="dark"] .section_cta .w-variant-084c35ac-0c40-f906-a9cd-0d43386a2d5d .button_text._1,
[data-theme="dark"] .section_cta .w-variant-084c35ac-0c40-f906-a9cd-0d43386a2d5d .button_text._2 {
  color: #000000 !important;
}

/* Add shadow to button in light mode for better visibility */
:root:not([data-theme="dark"]) .section_cta .button-secondary,
:root:not([data-theme="dark"]) .section_cta .w-variant-084c35ac-0c40-f906-a9cd-0d43386a2d5d {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced shadow on hover in light mode */
:root:not([data-theme="dark"]) .section_cta .button-secondary:hover,
:root:not([data-theme="dark"]) .section_cta .w-variant-084c35ac-0c40-f906-a9cd-0d43386a2d5d:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2), 0 3px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Remove white dashed line separator in dark mode */
[data-theme="dark"] .home-header_info {
  border-top: none !important;
}

[data-theme="dark"] .section_home-about {
  border-top: none !important;
}

/* Remove the line separator between section_home-grid and solutions-2025 in both modes */
.section_home-grid .line {
  border-top: none !important;
  display: none !important;
}

/* Ensure testimonials numbers and other dynamic content are visible */
.testimonials_numbers,
.number_number,
.number_main {
  color: var(--theme-text-primary) !important;
}

/* Portal section theming */
.portal-interstellar-section,
.portal-hero-title {
  color: var(--theme-text-primary) !important;
}

/* Footer theming */
footer,
.footer_component,
.footer_wrap {
  background-color: var(--theme-bg-primary) !important;
  color: var(--theme-text-primary) !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer_brand,
.footer_brand a,
.footer_brand span,
.footer_copyright,
.footer_link-label,
.footer_template-link,
.footer_newsletter-form,
.footer_field,
.field-label {
  color: var(--theme-text-primary) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer_field {
  background-color: var(--theme-bg-secondary) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

.footer_social-icon {
  filter: var(--theme-logo-filter);
  transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Footer newsletter button - white with black text in dark mode */
[data-theme="dark"] .footer_newsletter-button {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .footer_newsletter-button:hover {
  background-color: #f5f5f5 !important;
  background-image: none !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.footer_newsletter-button {
  background-color: var(--theme-text-primary) !important;
  color: var(--theme-bg-primary) !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Footer newsletter button - light mode (black background, white text) */
:root:not([data-theme="dark"]) .footer_newsletter-button {
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:root:not([data-theme="dark"]) .footer_newsletter-button:hover {
  background-color: #1a1a1a !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* General text elements - only apply if not already styled */
h1:not(.home-header_heading):not([style*="color"]),
h2:not(.home-header_heading):not([style*="color"]),
h3:not([style*="color"]),
h4:not([style*="color"]),
h5:not([style*="color"]),
h6:not([style*="color"]) {
  color: var(--theme-text-primary);
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

p:not([style*="color"]) {
  color: var(--theme-text-secondary);
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Buttons and links - only apply if not already styled */
a:not([style*="color"]):not(.menu_link):not(.footer_link-label) {
  color: var(--theme-text-primary);
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure sections with video backgrounds remain transparent */
.section_home-header {
  background: transparent !important;
}

/* Ensure home header component is visible in light mode */
:root:not([data-theme="dark"]) .section_home-header,
:root:not([data-theme="dark"]) .home-header_component,
:root:not([data-theme="dark"]) .home-header_content {
  background: transparent !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure video background is visible in light mode */
:root:not([data-theme="dark"]) .home-header_video,
:root:not([data-theme="dark"]) .w-background-video,
:root:not([data-theme="dark"]) .home-header_video video {
  background: transparent !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

/* ============================================
   LIGHT MODE BACKGROUND OVERRIDES
   Convert black/grey backgrounds to white in light mode
   ============================================ */

/* Body and HTML backgrounds - light mode */
:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) html {
  background: var(--theme-bg-primary) !important;
  background-color: var(--theme-bg-primary) !important;
}

/* Page wrapper backgrounds - light mode */
:root:not([data-theme="dark"]) .page-wrapper,
:root:not([data-theme="dark"]) .main-wrapper,
:root:not([data-theme="dark"]) .main-wrapper-7 {
  background: var(--theme-bg-primary) !important;
  background-color: var(--theme-bg-primary) !important;
}

/* Contact page specific backgrounds - light mode */
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b79"] {
  background: var(--theme-bg-primary) !important;
}

:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b79"] .page-wrapper {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,247,243,0.98) 100%) !important;
}

/* Products page - mission control wrapper - light mode */
:root:not([data-theme="dark"]) .mission-control-wrapper {
  background: 
    radial-gradient(circle at 20% 30%, rgba(183,54,69,0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(183,54,69,0.02) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8f7f3 100%) !important;
}

/* Product pages - retro product wrapper - light mode */
:root:not([data-theme="dark"]) .retro-product-wrapper {
  background: linear-gradient(180deg, #ffffff 0%, #f8f7f3 50%, #ffffff 100%) !important;
}

/* Studio page sections - light mode with shadows */
:root:not([data-theme="dark"]) .section_precision,
:root:not([data-theme="dark"]) .section_tech-stack,
:root:not([data-theme="dark"]) .section_workflow,
:root:not([data-theme="dark"]) .section_impact {
  background: var(--theme-bg-primary) !important;
  background-color: var(--theme-bg-primary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border-radius: 0 !important;
}

:root:not([data-theme="dark"]) .section_precision[style*="background"],
:root:not([data-theme="dark"]) .section_tech-stack[style*="background"],
:root:not([data-theme="dark"]) .section_workflow[style*="background"],
:root:not([data-theme="dark"]) .section_impact[style*="background"] {
  background: var(--theme-bg-primary) !important;
  background-color: var(--theme-bg-primary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Privacy and Terms pages - light mode */
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"],
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] {
  background: var(--theme-bg-primary) !important;
}

:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] body,
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] body {
  background: var(--theme-bg-primary) !important;
}

:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] .page-wrapper,
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] .main-wrapper,
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] .page-wrapper,
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] .main-wrapper {
  background: var(--theme-bg-primary) !important;
}

/* Privacy and Terms page sections - light mode with shadows */
:root:not([data-theme="dark"]) section[style*="background: linear-gradient(180deg, #0a0a0a"],
:root:not([data-theme="dark"]) section[style*="background: #000"] {
  background: var(--theme-bg-primary) !important;
  background-color: var(--theme-bg-primary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Studio page inline style backgrounds - light mode with shadows */
:root:not([data-theme="dark"]) section[style*="background: linear-gradient(180deg, #0a0a0a 0%, #000000"],
:root:not([data-theme="dark"]) section[style*="background: #000"] {
  background: var(--theme-bg-primary) !important;
  background-color: var(--theme-bg-primary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Generic section backgrounds with black/grey - light mode with shadows */
:root:not([data-theme="dark"]) section[style*="background: #000"],
:root:not([data-theme="dark"]) section[style*="background: #0a0a0a"],
:root:not([data-theme="dark"]) section[style*="background: linear-gradient"][style*="#000"],
:root:not([data-theme="dark"]) section[style*="background: linear-gradient"][style*="#0a0a0a"] {
  background: var(--theme-bg-primary) !important;
  background-color: var(--theme-bg-primary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Contact page gradient backgrounds - light mode */
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b79"] .page-wrapper[style*="background: linear-gradient"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,247,243,0.98) 100%) !important;
}

/* Contact page header section - light mode with shadow */
:root:not([data-theme="dark"]) .section_contact-header {
  background: linear-gradient(135deg, #ffffff 0%, #f8f7f3 100%) !important;
  border-bottom-color: var(--theme-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Contact header text - light mode (keep red but adjust for visibility) */
:root:not([data-theme="dark"]) .contact-header_text {
  color: var(--color-red-primary) !important;
  text-shadow: 
    0 0 20px rgba(183, 54, 69, 0.3),
    0 0 40px rgba(183, 54, 69, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Contact form section - light mode */
:root:not([data-theme="dark"]) .section_contact-form {
  background: var(--theme-bg-primary) !important;
}

/* Contact form component/card - add shadow in light mode (no layout changes) */
:root:not([data-theme="dark"]) .contact-form_component,
:root:not([data-theme="dark"]) .contact-form_form-block {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  /* Do not add padding - preserve existing layout */
}

/* Contact form component label - light mode */
:root:not([data-theme="dark"]) .contact-form_component::before {
  color: rgba(183, 54, 69, 0.6) !important;
}

/* Contact form inputs - light mode with subtle shadows */
:root:not([data-theme="dark"]) .contact-form_input {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

:root:not([data-theme="dark"]) .contact-form_field {
  background: var(--theme-bg-secondary) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

:root:not([data-theme="dark"]) .contact-form_field:focus {
  background: #ffffff !important;
  border-color: var(--color-red-primary) !important;
  box-shadow: 
    0 0 0 3px rgba(183, 54, 69, 0.1),
    inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

:root:not([data-theme="dark"]) .contact-form_field::placeholder {
  color: var(--theme-text-grey) !important;
}

/* Contact form checkbox - light mode */
:root:not([data-theme="dark"]) .contact-form_checkbox-check {
  border-color: var(--theme-border) !important;
  background: var(--theme-bg-secondary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Contact form button - light mode with shadow */
:root:not([data-theme="dark"]) .button-solid {
  box-shadow: 0 4px 12px rgba(183, 54, 69, 0.3), 0 2px 4px rgba(183, 54, 69, 0.2) !important;
}

:root:not([data-theme="dark"]) .button-solid:hover {
  box-shadow: 0 6px 16px rgba(183, 54, 69, 0.4), 0 3px 6px rgba(183, 54, 69, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Products page body background - light mode */
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b70"] {
  background: var(--theme-bg-primary) !important;
}

/* Product pages body background - light mode */
:root:not([data-theme="dark"]) body[data-wf-page="68bf46c7c477e62106bc589a"],
:root:not([data-theme="dark"]) body[data-wf-page="68bf46c7c477e62106bc589b"],
:root:not([data-theme="dark"]) body[data-wf-page="68bf46c7c477e62106bc589c"],
:root:not([data-theme="dark"]) body[data-wf-page="68bf46c7c477e62106bc589d"] {
  background: var(--theme-bg-primary) !important;
}

/* Timeline node borders in light mode - should be white instead of black */
:root:not([data-theme="dark"]) .timeline-node[style*="border: 4px solid #000"] {
  border-color: #ffffff !important;
}

/* Timeline line - red gradient in light mode (same effect as dark mode but with red) */
:root:not([data-theme="dark"]) div[style*="background: linear-gradient(180deg, transparent 0%, rgba(183,54,69,0.1)"] {
  background: linear-gradient(180deg, transparent 0%, rgba(183, 54, 69, 0.15) 10%, rgba(183, 54, 69, 0.15) 90%, transparent 100%) !important;
}

/* Timeline progress line - red in light mode */
:root:not([data-theme="dark"]) .timeline-progress[style*="background: linear-gradient(180deg, transparent 0%, rgba(183,54,69,0.8)"] {
  background: linear-gradient(180deg, transparent 0%, rgba(183, 54, 69, 0.6) 10%, rgba(183, 54, 69, 0.6) 90%, transparent 100%) !important;
}

/* Spec badges and small containers - light mode with shadows */
:root:not([data-theme="dark"]) .spec-badge,
:root:not([data-theme="dark"]) .spec-badge[style*="background: rgba(255,255,255,0.05)"] {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  color: var(--theme-text-secondary) !important;
}

/* Spec badge border override for light mode */
:root:not([data-theme="dark"]) .spec-badge[style*="border: 1px solid rgba(255,255,255,0.1)"] {
  border-color: var(--theme-border) !important;
}

/* Point cloud visualization container - light mode with shadow */
:root:not([data-theme="dark"]) div[style*="background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(10,10,10,0.9) 100%)"] {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 247, 243, 0.98) 100%) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Container large and other containers on studio page - light mode */
:root:not([data-theme="dark"]) .container-large {
  /* Shadows are handled by parent sections */
}

/* ============================================
   LIGHT MODE TEXT COLOR OVERRIDES
   Convert white text to dark in light mode
   ============================================ */

/* White text in sections with dark backgrounds - change to dark in light mode */
:root:not([data-theme="dark"]) .section-heading[style*="color: #fff"],
:root:not([data-theme="dark"]) .section-heading[style*="color:#fff"],
:root:not([data-theme="dark"]) h2[style*="color: #fff"],
:root:not([data-theme="dark"]) h2[style*="color:#fff"],
:root:not([data-theme="dark"]) h3[style*="color: #fff"],
:root:not([data-theme="dark"]) h3[style*="color:#fff"],
:root:not([data-theme="dark"]) p[style*="color: #fff"],
:root:not([data-theme="dark"]) p[style*="color:#fff"],
:root:not([data-theme="dark"]) .section_precision [style*="color: #fff"],
:root:not([data-theme="dark"]) .section_tech-stack [style*="color: #fff"],
:root:not([data-theme="dark"]) .section_workflow [style*="color: #fff"],
:root:not([data-theme="dark"]) .section_impact [style*="color: #fff"] {
  color: var(--theme-text-primary) !important;
}

/* THE WORKFLOW heading - override inline white color in light mode */
:root:not([data-theme="dark"]) .section_workflow .section-heading,
:root:not([data-theme="dark"]) .section_workflow .section-heading[style*="color: #fff"],
:root:not([data-theme="dark"]) .section_workflow h2.section-heading,
:root:not([data-theme="dark"]) .section_workflow h2.section-heading[style*="color: #fff"] {
  color: #000000 !important;
}

/* PRECISION REALITY CAPTURE heading - override inline white color in light mode */
:root:not([data-theme="dark"]) .section_precision .section-heading,
:root:not([data-theme="dark"]) .section_precision .section-heading[style*="color: #fff"],
:root:not([data-theme="dark"]) .section_precision h2.section-heading,
:root:not([data-theme="dark"]) .section_precision h2.section-heading[style*="color: #fff"] {
  color: #000000 !important;
}

/* OUR TECHNOLOGY STACK heading - override inline white color in light mode */
:root:not([data-theme="dark"]) .section_tech-stack .section-heading,
:root:not([data-theme="dark"]) .section_tech-stack .section-heading[style*="color: #fff"],
:root:not([data-theme="dark"]) .section_tech-stack h2.section-heading,
:root:not([data-theme="dark"]) .section_tech-stack h2.section-heading[style*="color: #fff"] {
  color: #000000 !important;
}

/* WHY IT MATTERS heading - override inline white color in light mode */
:root:not([data-theme="dark"]) .section_impact .section-heading,
:root:not([data-theme="dark"]) .section_impact .section-heading[style*="color: #fff"],
:root:not([data-theme="dark"]) .section_impact h2.section-heading,
:root:not([data-theme="dark"]) .section_impact h2.section-heading[style*="color: #fff"] {
  color: #000000 !important;
}

/* Grey text in sections - adjust for light mode (make #bbb darker for better readability - light black) */
:root:not([data-theme="dark"]) [style*="color: #bbb"],
:root:not([data-theme="dark"]) [style*="color:#bbb"],
:root:not([data-theme="dark"]) .animated-text[style*="color: #bbb"],
:root:not([data-theme="dark"]) .animated-text[style*="color:#bbb"],
:root:not([data-theme="dark"]) p[style*="color: #bbb"],
:root:not([data-theme="dark"]) p[style*="color:#bbb"] {
  color: var(--theme-text-dark-grey) !important;
}

/* Override #555 color in light mode (used by JavaScript animations) - make it darker */
:root:not([data-theme="dark"]) [style*="color: #555"],
:root:not([data-theme="dark"]) [style*="color:#555"],
:root:not([data-theme="dark"]) [style*="color: #555555"],
:root:not([data-theme="dark"]) [style*="color:#555555"],
:root:not([data-theme="dark"]) p[style*="color: #555"],
:root:not([data-theme="dark"]) p[style*="color:#555"],
:root:not([data-theme="dark"]) .workflow-card p[style*="color: #555"],
:root:not([data-theme="dark"]) .workflow-card p[style*="color:#555"],
:root:not([data-theme="dark"]) .animated-text[style*="color: #555"],
:root:not([data-theme="dark"]) .animated-text[style*="color:#555"],
:root:not([data-theme="dark"]) *[style*="color: #555"],
:root:not([data-theme="dark"]) *[style*="color:#555"] {
  color: var(--theme-text-dark-grey) !important;
}

/* Also override computed color for elements that might have #555 set via CSS or JS */
:root:not([data-theme="dark"]) p,
:root:not([data-theme="dark"]) .animated-text,
:root:not([data-theme="dark"]) .workflow-card p {
  /* This will be overridden by inline styles, but helps with CSS-set colors */
}

:root:not([data-theme="dark"]) [style*="color: #aaa"],
:root:not([data-theme="dark"]) [style*="color:#aaa"],
:root:not([data-theme="dark"]) [style*="color: #888"],
:root:not([data-theme="dark"]) [style*="color:#888"] {
  color: var(--theme-text-secondary) !important;
}

/* Section number colors - adjust for light mode */
:root:not([data-theme="dark"]) .section-number[style*="color: #666"],
:root:not([data-theme="dark"]) .section-number[style*="color:#666"] {
  color: var(--theme-text-tertiary) !important;
}

/* Tech cards - adjust borders and backgrounds for light mode with enhanced shadows */
:root:not([data-theme="dark"]) .tech-card[style*="border: 1px solid rgba(255,255,255"] {
  border-color: var(--theme-border) !important;
  background: var(--theme-card-bg) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

:root:not([data-theme="dark"]) .tech-card[style*="background: linear-gradient(135deg, rgba(255,255,255,0.03)"] {
  background: var(--theme-card-bg) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Tech cards - general light mode styling with enhanced shadows */
:root:not([data-theme="dark"]) .tech-card {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Workflow cards - red border effect in light mode (same as white border in dark mode) */
:root:not([data-theme="dark"]) .workflow-card[style*="border: 1px solid rgba(255,255,255"],
:root:not([data-theme="dark"]) .workflow-card[style*="border: 1px solid rgba(255,255,255,0.08)"] {
  border-color: rgba(183, 54, 69, 0.3) !important;
  border-width: 1px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(183, 54, 69, 0.1) !important;
}

:root:not([data-theme="dark"]) .workflow-card[style*="background: rgba(255,255,255,0.02)"] {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(183, 54, 69, 0.3) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(183, 54, 69, 0.1) !important;
}

/* Workflow cards - general light mode styling with red border effect */
:root:not([data-theme="dark"]) .workflow-card {
  border-color: rgba(183, 54, 69, 0.3) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(183, 54, 69, 0.1) !important;
}

/* Section borders - adjust for light mode */
:root:not([data-theme="dark"]) section[style*="border-top: 1px solid rgba(255,255,255,0.1)"] {
  border-top-color: var(--theme-border) !important;
}

/* Products page text colors - light mode */
:root:not([data-theme="dark"]) .products-header [style*="color: #fff"],
:root:not([data-theme="dark"]) .products-header [style*="color:#fff"],
:root:not([data-theme="dark"]) .mission-control-wrapper [style*="color: #fff"],
:root:not([data-theme="dark"]) .mission-control-wrapper [style*="color:#fff"] {
  color: var(--theme-text-primary) !important;
}

/* Product pages text colors - light mode */
:root:not([data-theme="dark"]) .retro-product-wrapper [style*="color: #fff"],
:root:not([data-theme="dark"]) .retro-product-wrapper [style*="color:#fff"] {
  color: var(--theme-text-primary) !important;
}

/* Product pages - How it Works step titles (1-5) - black in light mode */
:root:not([data-theme="dark"]) body[data-wf-page="68bf46c7c477e62106bc589a"] .step-content h3,
:root:not([data-theme="dark"]) body[data-wf-page="68bf46c7c477e62106bc589b"] .step-content h3,
:root:not([data-theme="dark"]) body[data-wf-page="68bf46c7c477e62106bc589c"] .step-content h3,
:root:not([data-theme="dark"]) body[data-wf-page="68bf46c7c477e62106bc589d"] .step-content h3,
:root:not([data-theme="dark"]) .retro-product-wrapper .step-content h3,
:root:not([data-theme="dark"]) .retro-product-wrapper .step-content h3[style*="color: #fff"],
:root:not([data-theme="dark"]) .retro-product-wrapper .step-content h3[style*="color:#fff"] {
  color: #000000 !important;
}

/* Contact page text colors - light mode */
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b79"] [style*="color: #fff"],
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b79"] [style*="color:#fff"] {
  color: var(--theme-text-primary) !important;
}

/* Privacy and Terms pages text colors - light mode */
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color: #fff"],
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color:#fff"],
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] [style*="color: #fff"],
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] [style*="color:#fff"] {
  color: var(--theme-text-primary) !important;
}

/* Terms of Use page - comprehensive text color overrides for light mode */
/* Note: Using html selector directly for higher specificity */
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) * {
  color: var(--theme-text-primary) !important;
}

/* Privacy Policy page - comprehensive text color overrides for light mode (same as Terms of Use) */
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) * {
  color: var(--theme-text-primary) !important;
}

/* Terms of Use specific elements - light mode */
:root:not([data-theme="dark"]) .terms-section h3,
:root:not([data-theme="dark"]) .terms-section h4,
:root:not([data-theme="dark"]) .terms-section p,
:root:not([data-theme="dark"]) .terms-section li,
:root:not([data-theme="dark"]) .terms-section ul,
:root:not([data-theme="dark"]) .terms-section ol,
:root:not([data-theme="dark"]) .terms-content,
:root:not([data-theme="dark"]) .terms-highlight,
:root:not([data-theme="dark"]) .terms-label {
  color: var(--theme-text-primary) !important;
}

:root:not([data-theme="dark"]) .terms-highlight {
  background: rgba(183, 54, 69, 0.12) !important;
  border-left-color: var(--color-red-primary) !important;
}

/* Privacy Policy specific elements - light mode (same as Terms of Use) */
:root:not([data-theme="dark"]) .privacy-section h3,
:root:not([data-theme="dark"]) .privacy-section h4,
:root:not([data-theme="dark"]) .privacy-section p,
:root:not([data-theme="dark"]) .privacy-section li,
:root:not([data-theme="dark"]) .privacy-section ul,
:root:not([data-theme="dark"]) .privacy-section ol,
:root:not([data-theme="dark"]) .privacy-content,
:root:not([data-theme="dark"]) .privacy-highlight,
:root:not([data-theme="dark"]) .privacy-label {
  color: var(--theme-text-primary) !important;
}

:root:not([data-theme="dark"]) .privacy-highlight {
  background: rgba(183, 54, 69, 0.12) !important;
  border-left-color: var(--color-red-primary) !important;
}

/* Terms of Use navigation sidebar - light mode */
:root:not([data-theme="dark"]) .nav-sidebar {
  background: var(--theme-card-bg) !important;
  border-color: var(--theme-border) !important;
}

:root:not([data-theme="dark"]) .nav-sidebar h4 {
  color: var(--theme-text-tertiary) !important;
}

:root:not([data-theme="dark"]) .nav-sidebar a {
  color: var(--theme-text-secondary) !important;
}

:root:not([data-theme="dark"]) .nav-sidebar a:hover {
  color: var(--theme-text-primary) !important;
  background: var(--theme-bg-secondary) !important;
}

:root:not([data-theme="dark"]) .nav-sidebar a.active {
  color: var(--color-red-primary) !important;
  background: rgba(183, 54, 69, 0.1) !important;
}

/* Terms of Use grey text - adjust for light mode */
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] [style*="color: #888"],
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] [style*="color:#888"],
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] [style*="color: #aaa"],
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] [style*="color:#aaa"],
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] [style*="color: #ddd"],
:root:not([data-theme="dark"]) html[data-wf-page="terms-of-use"] [style*="color:#ddd"] {
  color: var(--theme-text-secondary) !important;
}

/* Privacy Policy grey text - adjust for light mode (same as Terms of Use) */
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color: #888"],
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color:#888"],
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color: #aaa"],
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color:#aaa"],
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color: #ddd"],
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color:#ddd"],
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color: #bbb"],
:root:not([data-theme="dark"]) html[data-wf-page="privacy-policy"] [style*="color:#bbb"] {
  color: var(--theme-text-secondary) !important;
}

/* Terms of Use h1 heading - override inline white color with maximum specificity */
/* Must come after general selector and be very specific */
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) h1,
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) h1[style],
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) section h1,
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) section h1[style],
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) h1[style*="color"],
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) section h1[style*="color"] {
  color: #000000 !important;
}

/* Privacy Policy h1 heading - override inline white color with maximum specificity (same as Terms of Use) */
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) h1,
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) h1[style],
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) section h1,
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) section h1[style],
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) h1[style*="color"],
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) section h1[style*="color"] {
  color: #000000 !important;
}

/* Terms of Use highlight paragraph - override inline grey color with maximum specificity */
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) .terms-highlight p,
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) .terms-highlight p[style],
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) #acceptance p,
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) #acceptance p[style],
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) .terms-highlight p[style*="color"],
html[data-wf-page="terms-of-use"]:not([data-theme="dark"]) #acceptance p[style*="color"] {
  color: #000000 !important;
}

/* Privacy Policy highlight paragraph - override inline grey color with maximum specificity (same as Terms of Use) */
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) .privacy-highlight p,
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) .privacy-highlight p[style],
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) #introduction p,
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) #introduction p[style],
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) .privacy-highlight p[style*="color"],
html[data-wf-page="privacy-policy"]:not([data-theme="dark"]) #introduction p[style*="color"] {
  color: #000000 !important;
}

/* Text color white class - override for light mode */
:root:not([data-theme="dark"]) .text-color-white,
:root:not([data-theme="dark"]) .text-color-white * {
  color: var(--theme-text-primary) !important;
}

/* Style guide page - light mode backgrounds */
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"],
:root:not([data-theme="dark"]) html[data-wf-page="68bef9295b19e61118ff8b68"] body {
  background: var(--theme-bg-primary) !important;
}

:root:not([data-theme="dark"]) .page-wrapper-2 {
  background: var(--theme-bg-primary) !important;
}

:root:not([data-theme="dark"]) .section.utlity {
  background: linear-gradient(135deg, #ffffff 0%, #f8f7f3 100%) !important;
  border-bottom-color: var(--theme-border) !important;
}

/* Style guide page - light mode text colors (black text on white background) */
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] *,
:root:not([data-theme="dark"]) html[data-wf-page="68bef9295b19e61118ff8b68"] * {
  color: var(--theme-text-primary) !important;
}

/* Override white text specifically on style guide page */
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] [style*="color: #fff"],
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] [style*="color:#fff"],
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] [style*="color: #ffffff"],
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] [style*="color:#ffffff"],
:root:not([data-theme="dark"]) html[data-wf-page="68bef9295b19e61118ff8b68"] [style*="color: #fff"],
:root:not([data-theme="dark"]) html[data-wf-page="68bef9295b19e61118ff8b68"] [style*="color:#fff"],
:root:not([data-theme="dark"]) html[data-wf-page="68bef9295b19e61118ff8b68"] [style*="color: #ffffff"],
:root:not([data-theme="dark"]) html[data-wf-page="68bef9295b19e61118ff8b68"] [style*="color:#ffffff"] {
  color: var(--theme-text-primary) !important;
}

/* Style guide headings and text elements */
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] h1,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] h2,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] h3,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] h4,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] h5,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] h6,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] p,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] span,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] div,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] a,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] li,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] td,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] th {
  color: var(--theme-text-primary) !important;
}

/* Style guide specific classes - override white text */
:root:not([data-theme="dark"]) .utlity-page-title,
:root:not([data-theme="dark"]) .style-single-title,
:root:not([data-theme="dark"]) .white,
:root:not([data-theme="dark"]) .description,
:root:not([data-theme="dark"]) .medium-description {
  color: var(--theme-text-primary) !important;
}

/* Style guide typography scale - override white text */
:root:not([data-theme="dark"]) .style-scale-category-box h1,
:root:not([data-theme="dark"]) .style-scale-category-box h2,
:root:not([data-theme="dark"]) .style-scale-category-box h3,
:root:not([data-theme="dark"]) .style-scale-category-box h4,
:root:not([data-theme="dark"]) .style-scale-category-box h5,
:root:not([data-theme="dark"]) .style-scale-category-box .short-description-regular,
:root:not([data-theme="dark"]) .style-scale-category-box .description,
:root:not([data-theme="dark"]) .style-scale-category-box .small-description,
:root:not([data-theme="dark"]) .style-scale-category-box .small-description-regular {
  color: var(--theme-text-primary) !important;
}

/* Style guide color title - adjust for light mode */
:root:not([data-theme="dark"]) .style-color-title {
  color: var(--theme-text-secondary) !important;
}

/* Style guide sub-title - adjust for light mode */
:root:not([data-theme="dark"]) .style-sub-title {
  color: var(--theme-text-primary) !important;
}

/* Style guide category grid box - adjust text for light mode */
:root:not([data-theme="dark"]) .style-category-grid-box {
  color: var(--theme-text-primary) !important;
}

/* Any remaining text elements on style guide page */
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] .style-single-wrap,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] .color-wrap,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] .color-code-box,
:root:not([data-theme="dark"]) body[data-wf-page="68bef9295b19e61118ff8b68"] .color-right-box {
  color: var(--theme-text-primary) !important;
}

/* Style guide buttons - text should be dark in light mode */
:root:not([data-theme="dark"]) .secondary-button,
:root:not([data-theme="dark"]) .nav-button {
  color: var(--theme-text-primary) !important;
}

:root:not([data-theme="dark"]) .secondary-button-text,
:root:not([data-theme="dark"]) .secondary-button-hover-text,
:root:not([data-theme="dark"]) .nav-button-text,
:root:not([data-theme="dark"]) .nav-button-hover-text {
  color: var(--theme-text-primary) !important;
}

:root:not([data-theme="dark"]) .secondary-button:hover,
:root:not([data-theme="dark"]) .nav-button:hover {
  color: var(--theme-text-primary) !important;
}

:root:not([data-theme="dark"]) .secondary-button:hover .secondary-button-text,
:root:not([data-theme="dark"]) .secondary-button:hover .secondary-button-hover-text,
:root:not([data-theme="dark"]) .nav-button:hover .nav-button-text,
:root:not([data-theme="dark"]) .nav-button:hover .nav-button-hover-text {
  color: var(--theme-text-primary) !important;
}

/* Style guide sections - light mode backgrounds with shadows */
:root:not([data-theme="dark"]) .section.license {
  background: var(--theme-bg-secondary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Style guide color cards - light mode with shadows */
:root:not([data-theme="dark"]) .color-card-wrap {
  background: var(--theme-card-bg) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
    margin-right: 0.75rem;
  }
  
  .theme-toggle-icon {
    width: 20px;
    height: 20px;
  }
}