.elementor-6810 .elementor-element.elementor-element-a9354dd{--display:flex;}body.elementor-page-6810:not(.elementor-motion-effects-element-type-background), body.elementor-page-6810 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}/* Start custom CSS *//* ===== TRADESX CUSTOM PAGE CSS ===== */
/* Add to: Appearance > Customize > Additional CSS */

/* ========================================
   THEME VARIABLES - DARK (Default)
======================================== */
[data-theme="dark"],
:root {
  /* Backgrounds */
  --tx-bg-page: #080c12;
  --tx-bg-surface: #0a0f1a;
  --tx-bg-card: rgba(8, 12, 18, 0.85);
  --tx-bg-elevated: #0f1520;

  /* Text */
  --tx-text-primary: #ffffff;
  --tx-text-secondary: #c4cad1;
  --tx-text-muted: #7a8290;

  /* Borders */
  --tx-border: rgba(255, 255, 255, 0.1);
  --tx-border-strong: rgba(255, 255, 255, 0.18);

  /* Brand */
  --tx-orange: #ff5a00;
  --tx-orange-bright: #ff5f0a;
  --tx-orange-glow: rgba(255, 90, 0, 0.15);

  /* Shadows */
  --tx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --tx-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --tx-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* Grid */
  --tx-grid-color: rgba(45, 212, 191, 0.5);
  --tx-grid-opacity: 0.18;

  /* Glows */
  --tx-glow-green: rgba(45, 212, 151, 0.06);
  --tx-glow-orange: rgba(252, 86, 6, 0.05);
  --tx-glow-blue: rgba(64, 91, 208, 0.05);

  /* Nav */
  --tx-nav-bg: rgba(8, 12, 18, 0.85);

  /* Hero */
  --tx-hero-bg: #020303;
  --tx-hero-content-gradient: linear-gradient(90deg, #020303 0%, #020303 79%, rgba(2,3,3,0.97) 86%, rgba(2,3,3,0) 100%);

  /* iPad */
  --tx-ipad-screen-bg: #080d12;
}

/* ========================================
   THEME VARIABLES - LIGHT
======================================== */
[data-theme="light"] {
  /* Backgrounds */
  --tx-bg-page: #f4f5f7;
  --tx-bg-surface: #ffffff;
  --tx-bg-card: rgba(255, 255, 255, 0.92);
  --tx-bg-elevated: #ffffff;

  /* Text */
  --tx-text-primary: #1a1d23;
  --tx-text-secondary: #4a5060;
  --tx-text-muted: #8890a0;

  /* Borders */
  --tx-border: rgba(0, 0, 0, 0.08);
  --tx-border-strong: rgba(0, 0, 0, 0.14);

  /* Brand */
  --tx-orange: #e85000;
  --tx-orange-bright: #f05a00;
  --tx-orange-glow: rgba(255, 90, 0, 0.06);

  /* Shadows */
  --tx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --tx-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.07);
  --tx-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.09);

  /* Grid */
  --tx-grid-color: rgba(0, 0, 0, 0.08);
  --tx-grid-opacity: 0.4;

  /* Glows - much subtler on light */
  --tx-glow-green: rgba(45, 212, 151, 0.03);
  --tx-glow-orange: rgba(252, 86, 6, 0.02);
  --tx-glow-blue: rgba(64, 91, 208, 0.02);

  /* Nav */
  --tx-nav-bg: rgba(255, 255, 255, 0.88);

  /* Hero */
  --tx-hero-bg: #f8f9fb;
  --tx-hero-content-gradient: linear-gradient(90deg, #f8f9fb 0%, #f8f9fb 79%, rgba(248,249,251,0.97) 86%, rgba(248,249,251,0) 100%);

  /* iPad */
  --tx-ipad-screen-bg: #f0f2f5;
}

/* ========================================
   SMOOTH THEME TRANSITION
======================================== */
body,
body::before,
body::after,
.elementor-section,
.elementor-widget {
  transition:
    background-color 400ms ease,
    border-color 300ms ease,
    color 300ms ease,
    box-shadow 400ms ease;
}

/* ========================================
   BASE PAGE BACKGROUND
======================================== */
body,
.elementor-page,
.site-main {
  background-color: var(--tx-bg-page) !important;
  color: var(--tx-text-primary);
}

.elementor-location-single,
.elementor-location-archive {
  background-color: var(--tx-bg-page) !important;
}

/* ========================================
   AMBIENT GLOWS
======================================== */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 80%, var(--tx-glow-green) 0%, transparent 50%),
    radial-gradient(ellipse at 5% 10%, var(--tx-glow-orange) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 50%, var(--tx-glow-blue) 0%, transparent 45%);
}

/* ========================================
   GRID PATTERN
======================================== */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--tx-grid-opacity);
  background-image:
    linear-gradient(var(--tx-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--tx-grid-color) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ========================================
   CONTENT STACKING ABOVE BACKGROUND
======================================== */
.elementor-section,
.elementor-element,
.elementor-widget,
.elementor-container {
  position: relative;
  z-index: 1;
}

/* ========================================
   TRANSPARENT SECTIONS
======================================== */
.elementor-section > .elementor-container {
  background-color: transparent !important;
}

/* ========================================
   GLOBAL TEXT COLOUR OVERRIDES
======================================== */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: var(--tx-text-primary);
}

[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] li {
  color: var(--tx-text-secondary);
}/* End custom CSS */