.elementor-1027 .elementor-element.elementor-element-bca948b > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF00 54%, #010207 100%);opacity:0.88;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1027 .elementor-element.elementor-element-bca948b > .elementor-container{max-width:850px;}.elementor-1027 .elementor-element.elementor-element-bca948b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:8% 0% 6% 0%;}.elementor-1027 .elementor-element.elementor-element-f8ec3a3.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-1027 .elementor-element.elementor-element-f8ec3a3 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1027 .elementor-element.elementor-element-9b6a6f4 .elementor-button{background-color:#61CE7000;font-family:"Inter", Sans-serif;font-size:15px;font-weight:500;letter-spacing:0.7px;border-radius:100px 100px 100px 100px;padding:0px 0px 0px 0px;}.elementor-1027 .elementor-element.elementor-element-9b6a6f4{width:auto;max-width:auto;}.elementor-widget-image-box .elementor-image-box-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-widget-image-box:has(:hover) .elementor-image-box-title,
					 .elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-1027 .elementor-element.elementor-element-edc5acd{margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1027 .elementor-element.elementor-element-edc5acd .elementor-image-box-title{margin-bottom:11px;font-family:"Inter", Sans-serif;font-size:56px;font-weight:600;line-height:1.2em;letter-spacing:-1.1px;color:#FFFFFF;}.elementor-1027 .elementor-element.elementor-element-edc5acd .elementor-image-box-description{font-family:"Manrope", Sans-serif;font-size:19px;font-weight:300;line-height:1.7em;color:#E6E8F0;}body.elementor-page-1027:not(.elementor-motion-effects-element-type-background), body.elementor-page-1027 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#010207;}/* Start custom CSS for button, class: .elementor-element-9b6a6f4 *//* THINXIFY Premium Glass Supported Button */
.hero-supported-btn{
  position: relative;
  display: inline-block;

  padding: 10px 25px;
  border-radius: 999px;

  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 600;

  color: #FFFFFF;
  text-decoration: none;

  /* Glass background adapted to dark theme */
  background: linear-gradient(
    145deg,
    rgba(0,87,255,0.08),
    rgba(255,255,255,0.03)
  );

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* Brand subtle border */
  border: 1px solid rgba(0,87,255,0.35);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 30px rgba(0,0,0,0.45);

  overflow: hidden;
  transition: all .3s ease;
}

/* Blue animated shimmer (clean, professional) */
.hero-supported-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(0,87,255,0.15) 40%,
    rgba(0,87,255,0.45) 50%,
    rgba(0,87,255,0.15) 60%,
    transparent 100%
  );

  transform: translateX(-120%);
  opacity: 0.9;
  animation: heroBorderShimmer 4s ease-in-out infinite;
}

/* Inner glass highlight tuned for dark theme */
.hero-supported-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: radial-gradient(
    120% 140% at 30% 20%,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.02) 50%,
    transparent 75%
  );

  opacity: 0.8;
}

/* Hover – stronger brand presence */
.hero-supported-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(0,87,255,0.65);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 45px rgba(0,0,0,0.55),
    0 0 30px rgba(0,87,255,0.25);
}

/* Faster shimmer on hover */
.hero-supported-btn:hover::before{
  animation-duration: 2.8s;
  opacity: 1;
}

.hero-supported-btn:active{
  transform: translateY(0);
}

/* Focus accessibility */
.hero-supported-btn:focus-visible{
  outline: none;
  border-color: #0057FF;
  box-shadow:
    0 0 0 3px rgba(0,87,255,0.25),
    0 0 30px rgba(0,87,255,0.3);
}

@media (prefers-reduced-motion: reduce){
  .hero-supported-btn::before{ animation: none; }
}

@keyframes heroBorderShimmer{
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-bca948b *//* ==========================================================
   THINXIFY About Hero (Your Style) — Animated + PRO Mouse Effect
   Class: .aboutsectionbg
   Dark scheme: #010207 + deep blues (as you provided)
========================================================== */

.aboutsectionbg{
  position: relative;
  overflow: hidden;
  background: #010207;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);

  /* mouse vars (JS updates these) */
  --mx: 50;   /* raw */
  --my: 50;   /* raw */
  --mxs: 50;  /* smoothed */
  --mys: 50;  /* smoothed */

  /* Premium spotlight follows cursor (subtle) */
  background-image:
    radial-gradient(
      520px 360px at calc(var(--mxs) * 1%) calc(var(--mys) * 1%),
      rgba(0,60,200,.18),
      rgba(0,60,200,0) 70%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Layer 1: deep cinematic gradients + darker blue aurora (ANIMATED + SMOOTH MOUSE) */
.aboutsectionbg::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:0;

  background:
    radial-gradient(900px 600px at calc(18% + (var(--mxs) - 50)*0.10%) calc(22% + (var(--mys) - 50)*0.08%),
      rgba(0,60,200,.42), transparent 62%),
    radial-gradient(820px 560px at calc(82% + (var(--mxs) - 50)*0.07%) calc(30% + (var(--mys) - 50)*0.06%),
      rgba(0,60,200,.22), transparent 66%),
    radial-gradient(760px 560px at calc(55% - (var(--mxs) - 50)*0.06%) calc(85% - (var(--mys) - 50)*0.05%),
      rgba(255,255,255,.06), transparent 62%),
    radial-gradient(680px 520px at calc(35% + (var(--mxs) - 50)*0.06%) calc(70% + (var(--mys) - 50)*0.07%),
      rgba(0,40,160,.18), transparent 66%),
    linear-gradient(135deg, #010207 0%, #050816 35%, #010207 100%);

  filter: saturate(115%) contrast(112%);
  transform: translate3d(0,0,0);
  animation: thxAuroraDrift 18s ease-in-out infinite;
  will-change: transform;
  pointer-events:none;
}

/* Layer 2: tech pattern (grid + traces + scanlines + noise) + bottom fade (ANIMATED + SMOOTH MOUSE) */
.aboutsectionbg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    /* circuit-like horizontal/vertical traces */
    repeating-linear-gradient(90deg, rgba(0,60,200,.12) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg,  rgba(0,60,200,.10) 0 1px, transparent 1px 34px),

    /* fine sub-grid */
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.03) 0 1px, transparent 1px 10px),

    /* diagonal “data flow” lines */
    repeating-linear-gradient(135deg, rgba(0,40,160,.10) 0 1px, transparent 1px 26px),

    /* scanlines */
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px),

    /* micro noise */
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 0 1px, transparent 1px 100%),

    /* bottom fade (#010207 -> transparent) */
    linear-gradient(to top,
      #010207 0%,
      rgba(1,2,7,.88) 32%,
      rgba(1,2,7,.45) 62%,
      rgba(1,2,7,0) 100%
    );

  background-size: auto, auto, auto, auto, auto, auto, 3px 3px, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;

  mix-blend-mode: screen;
  opacity: .70;

  transform: translate3d(
    calc((var(--mxs) - 50) * 0.14px),
    calc((var(--mys) - 50) * 0.10px),
    0
  );

  animation: thxPatternPan 22s linear infinite;
  will-change: transform, background-position;
}

/* Tech Beam (NO extra HTML) — uses background overlay on the element itself */
.aboutsectionbg{
  /* beam overlay (subtle) */
  --beamY: calc(35% + (var(--mys) - 50)*0.06%);
  --beamX: calc(50% + (var(--mxs) - 50)*0.18%);

  background-image:
    /* beam */
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,60,200,.10) 35%,
      rgba(0,60,200,.22) 50%,
      rgba(0,60,200,.10) 65%,
      transparent 100%
    ),
    /* spotlight */
    radial-gradient(
      520px 360px at calc(var(--mxs) * 1%) calc(var(--mys) * 1%),
      rgba(0,60,200,.18),
      rgba(0,60,200,0) 70%
    );

  background-repeat: no-repeat, no-repeat;
  background-size: 180% 220%, 100% 100%;
  background-position: -20% var(--beamY), 0 0;
  animation: thxBeamBg 10s ease-in-out infinite;
}

/* Keep content above layers */
.aboutsectionbg > *{
  position: relative;
  z-index: 2;
}

/* Subtle hover polish */
.aboutsectionbg:hover::before{
  filter: saturate(125%) contrast(114%);
}

/* Animations */
@keyframes thxAuroraDrift{
  0%   { transform: translate(-2%, -2%) scale(1.02); }
  50%  { transform: translate( 2%,  1%) scale(1.06); }
  100% { transform: translate(-2%, -2%) scale(1.02); }
}

@keyframes thxPatternPan{
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 240px 0, 0 240px, 120px 0, 0 120px, 160px 160px, 0 90px, 12px 12px, 0 0; }
}

@keyframes thxBeamBg{
  0%   { background-position: -20% var(--beamY), 0 0; }
  50%  { background-position: 120% var(--beamY), 0 0; }
  100% { background-position: -20% var(--beamY), 0 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .aboutsectionbg,
  .aboutsectionbg::before,
  .aboutsectionbg::after{
    animation: none !important;
  }
}/* End custom CSS */