.elementor-328 .elementor-element.elementor-element-e3228e4{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-328 .elementor-element.elementor-element-e2f7b2f{text-align:center;}.elementor-328 .elementor-element.elementor-element-e2f7b2f .elementor-heading-title{color:#FFFFFF;}/* Start custom CSS */:root {
  --bg: #020617;       /* The deep slate base */
  --coral: #FF4D4F;    /* Bright red */
  --plum: #312E81;     /* Deep purple/blue */
  --turq: #22D3EE;     /* Electric turquoise */
}

/* ==========================================================================
   GLOBAL BASE SETUP
   ========================================================================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg); /* Keeps a solid baseline */
}

/* ==========================================================================
   DESKTOP BACKGROUND STYLE (Default)
   ========================================================================== */
body {
  background-image:
    radial-gradient(1200px 600px at 10% 20%, var(--coral) 0%, transparent 55%),
    radial-gradient(1200px 700px at 90% 10%, var(--plum) 0%, transparent 60%),
    radial-gradient(1200px 800px at 50% 95%, var(--turq) 0%, transparent 60%);
  background-blend-mode: screen;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ==========================================================================
   MOBILE BACKGROUND OPTIMIZATION FIX (Screens smaller than 768px wide)
   ========================================================================== */
@media (max-width: 767px) {
  body {
    /* 1. Clear desktop background completely */
    background-image: none !important;
    
    /* 2. Force body layout to cooperate with z-indexing */
    position: relative;
    z-index: 0;
  }

  /* 3. Inject the bulletproof fixed viewport layer */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    
    /* Crucial stacking fix: Force it exactly between base color and content */
    z-index: -1; 
    
    /* Re-apply base background explicitly inside the mobile layer */
    background-color: var(--bg);
    
    /* Mobile-optimized layout */
    background-image:
      radial-gradient(circle at 0% 10%, var(--coral) 0%, transparent 40%),
      radial-gradient(circle at 100% 5%, var(--plum) 0%, transparent 45%),
      radial-gradient(circle at 50% 90%, var(--turq) 0%, transparent 40%);
      
    background-blend-mode: screen;
    background-size: cover;
    background-repeat: no-repeat;
    
    /* Essential mobile hardware rendering tweaks */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: none; /* Prevents the layer from blocking clicks/taps */
  }
}/* End custom CSS */