.elementor .hero-flex{flex-direction:column;justify-content:center;align-items:center;position: relative;
overflow: hidden;
isolation: isolate;
min-height: 80vh;

background:
  radial-gradient(
      ellipse at center,
      rgba(56,189,248,.18) 0%,
      rgba(56,189,248,.10) 22%,
      transparent 58%
  ),
  radial-gradient(
      ellipse at 80% 20%,
      rgba(168,85,247,.12),
      transparent 42%
  ),
  radial-gradient(
      ellipse at 18% 78%,
      rgba(16,185,129,.08),
      transparent 20%
  ),
  linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fafc 48%,
      #eef2f7 100%
  );
}


/* ==========================
 CONVEX LENS GRID
 ========================== */

.hero-flex::before {
content: "";
position: absolute;

width: 980px;
height: 980px;

left: 50%;
top: 50%;

transform:
    translate(-50%, -46%)
    scale(1.08, .82);

border-radius: 50%;

background:
    /* grid lines */
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 58px,
        rgba(15,23,42,.045) 59px,
        rgba(15,23,42,.045) 60px
    ),
    repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 58px,
        rgba(15,23,42,.045) 59px,
        rgba(15,23,42,.045) 60px
    );

/* make it feel like a bulging lens */
box-shadow:
    inset 0 85px 130px rgba(255,255,255,.72),
    inset 0 -130px 170px rgba(15,23,42,.10);

filter:
    drop-shadow(0 35px 70px rgba(15,23,42,.08))
    blur(.15px);

/*
  strong center, soft falloff to edges
  like a convex glass surface
*/
-webkit-mask-image:
    radial-gradient(
        ellipse 44% 40% at center,
        black 0%,
        rgba(0,0,0,.92) 34%,
        rgba(0,0,0,.62) 56%,
        rgba(0,0,0,.22) 74%,
        transparent 100%
    );

mask-image:
    radial-gradient(
        ellipse 44% 40% at center,
        black 0%,
        rgba(0,0,0,.92) 34%,
        rgba(0,0,0,.62) 56%,
        rgba(0,0,0,.22) 74%,
        transparent 100%
    );

opacity: .68;
pointer-events: none;
z-index: 0;
}


/* ==========================
 GLASS BULGE LIGHT
 ========================== */

.hero-flex::after {
content: "";
position: absolute;

width: 1040px;
height: 680px;

left: 50%;
top: 45%;

transform: translate(-50%, -50%);

border-radius: 50%;

background:
    /* top highlight on the lens */
    radial-gradient(
        ellipse at 50% 24%,
        rgba(255,255,255,.92),
        transparent 28%
    ),

    /* soft central glow */
    radial-gradient(
        ellipse at center,
        rgba(56,189,248,.16),
        transparent 60%
    ),

    /* subtle depth halo */
    radial-gradient(
        ellipse at center,
        rgba(255,255,255,.10),
        transparent 72%
    );

filter: blur(68px);
opacity: .9;
pointer-events: none;
z-index: 0;
}


/* ==========================
 CONTENT
 ========================== */

.hero-flex > * {
position: relative;
z-index: 1;\n}