.elementor-kit-442{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-57ba244:#F3D501;--e-global-color-e919aba:#000000;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, #000000 100%);--e-page-transition-entrance-animation:e-page-transition-fade-out-right;--e-page-transition-animation-duration:1500ms;--e-preloader-animation-duration:1500ms;--e-preloader-delay:0ms;--e-preloader-color:#000000;--e-preloader-size:20px;}.elementor-kit-442 e-page-transition{background-color:#000000;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   🌬️ BLOWING CONTAINERS — Elementor Custom CSS
   Paste into: Elementor > Site Settings > Custom CSS
   OR per-element: Edit Container > Advanced > Custom CSS
   ============================================================ */

/* ── WIND DRIFT: container gently sways like a flag in the breeze ── */
.blow-wind {
  animation: windDrift 6s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes windDrift {
  0%   { transform: rotate(0deg) skewX(0deg); }
  20%  { transform: rotate(0.8deg) skewX(0.5deg); }
  50%  { transform: rotate(-0.5deg) skewX(-0.3deg); }
  75%  { transform: rotate(0.6deg) skewX(0.4deg); }
  100% { transform: rotate(0deg) skewX(0deg); }
}

/* ── FLOAT DRIFT: container drifts up/down + sideways like a leaf ── */
.blow-float {
  animation: floatDrift 8s ease-in-out infinite;
}

@keyframes floatDrift {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(8px, -12px); }
  50%  { transform: translate(-5px, -20px); }
  75%  { transform: translate(10px, -8px); }
  100% { transform: translate(0px, 0px); }
}

/* ── GUST: container gets hit by a sudden gust, then settles ── */
.blow-gust {
  animation: gust 4s ease-in-out infinite;
}

@keyframes gust {
  0%   { transform: translateX(0) rotate(0deg); }
  10%  { transform: translateX(-4px) rotate(-1deg); }
  20%  { transform: translateX(18px) rotate(1.5deg); }
  35%  { transform: translateX(-8px) rotate(-0.8deg); }
  50%  { transform: translateX(6px) rotate(0.5deg); }
  65%  { transform: translateX(-3px) rotate(-0.3deg); }
  80%  { transform: translateX(2px) rotate(0.2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* ── SHIMMER BLOW: background shimmers like heat or wind ── */
.blow-shimmer {
  position: relative;
  overflow: hidden;
}

.blow-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%
  );
  background-size: 200% 200%;
  animation: shimmerWind 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes shimmerWind {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── BREATH SCALE: container expands/contracts like breathing wind ── */
.blow-breath {
  animation: breathScale 5s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes breathScale {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.025); }
  60%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* ── TILT BLOW: perspective tilt like wind hitting from one side ── */
.blow-tilt {
  animation: tiltBlow 7s ease-in-out infinite;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes tiltBlow {
  0%   { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }
  25%  { transform: perspective(1000px) rotateY(-3deg) rotateX(1deg); }
  50%  { transform: perspective(1000px) rotateY(2deg) rotateX(-0.5deg); }
  75%  { transform: perspective(1000px) rotateY(-1.5deg) rotateX(0.8deg); }
  100% { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }
}

/* ── LEAVES / PARTICLE TRAIL (pseudo-element wind particles) ── */
.blow-particles {
  position: relative;
  overflow: visible;
}

.blow-particles::before,
.blow-particles::after {
  content: '·';
  position: absolute;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.4);
  animation: particleBlow 4s linear infinite;
  pointer-events: none;
}

.blow-particles::before {
  top: 20%;
  left: -10px;
  animation-delay: 0s;
}

.blow-particles::after {
  top: 60%;
  left: -10px;
  animation-delay: 2s;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.25);
}

@keyframes particleBlow {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { transform: translate(120%, -30px) rotate(360deg); opacity: 0; }
}

/* ── BORDER WIND: animated border flows like wind ── */
.blow-border {
  border: 2px solid transparent;
  background-image: linear-gradient(white, white),
    linear-gradient(90deg, #74ebd5, #acb6e5, #74ebd5, #acb6e5);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 200% auto;
  animation: borderWind 3s linear infinite;
  border-radius: 12px;
}

@keyframes borderWind {
  0%   { background-position: 0 0, 0% center; }
  100% { background-position: 0 0, 200% center; }
}

/* ── SLOW WHOOSH: heavy container rolls with a slow wind ── */
.blow-whoosh {
  animation: slowWhoosh 10s ease-in-out infinite;
}

@keyframes slowWhoosh {
  0%   { transform: translateX(0px) rotate(0deg); opacity: 1; }
  15%  { transform: translateX(-3px) rotate(-0.3deg); }
  45%  { transform: translateX(12px) rotate(0.7deg); }
  70%  { transform: translateX(-5px) rotate(-0.4deg); }
  100% { transform: translateX(0px) rotate(0deg); opacity: 1; }
}

/* ── SPEED CONTROLS ── */
/* Add these alongside any .blow-* class to change speed */
.blow-slow   { animation-duration: 10s !important; }
.blow-medium { animation-duration: 6s !important; }
.blow-fast   { animation-duration: 2.5s !important; }

/* ── HOVER TO PAUSE ── */
.blow-pause-on-hover:hover {
  animation-play-state: paused;
}

/* ── REDUCED MOTION (accessibility) ── */
@media (prefers-reduced-motion: reduce) {
  .blow-wind,
  .blow-float,
  .blow-gust,
  .blow-shimmer::after,
  .blow-breath,
  .blow-tilt,
  .blow-particles::before,
  .blow-particles::after,
  .blow-border,
  .blow-whoosh {
    animation: none !important;
  }
}



GSAP
/* Elementor → Custom Code → Head */
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);
</script>

/* ================================================================
   ✦ MOVING GLOW CONTAINERS — Elementor CSS Kit
   12 pure CSS animated glow effects + 8 modifier classes

   HOW TO INSTALL:
   Elementor → Site Settings → Custom CSS → paste this file

   HOW TO USE:
   Select any container or widget →
   Advanced tab → CSS Classes → type class name (no dot)

   IMPORTANT FOR BORDER GLOWS (orbit, aurora, prism, gradient-spin):
   The ::after pseudo-element creates the "cutout" that shows
   your container background. Update the background color to
   match YOUR container background color.
   ================================================================ */


/* ─────────────────────────────────────────────
   01. GLOW-ORBIT
   Rotating conic gradient border — full 360° spin
   Use: Feature cards, pricing containers, hero sections
   CSS class: glow-orbit
───────────────────────────────────────────── */
.glow-orbit {
  position: relative;
  border-radius: 14px;
  isolation: isolate;
}
.glow-orbit::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--_a, 0deg),
    #a08cff,
    #40e0d0,
    #ff8fa3,
    #ffd700,
    #a08cff
  );
  z-index: -1;
  animation: _orbitSpin 4s linear infinite;
}
.glow-orbit::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: #ffffff; /* ← CHANGE TO YOUR CONTAINER BACKGROUND COLOR */
  z-index: -1;
}
@property --_a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes _orbitSpin { to { --_a: 360deg; } }


/* ─────────────────────────────────────────────
   02. GLOW-CHASE
   Single white dot chases around the border
   Use: Buttons, badges, small containers
   CSS class: glow-chase
───────────────────────────────────────────── */
.glow-chase {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  isolation: isolate;
}
.glow-chase::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--_b, 0deg),
    transparent 0deg,
    transparent 305deg,
    rgba(64, 224, 208, 0.3) 318deg,
    #ffffff 338deg,
    rgba(64, 224, 208, 0.3) 352deg,
    transparent 360deg
  );
  z-index: -1;
  filter: blur(1.5px);
  animation: _chaseSpin 2.2s linear infinite;
}
@property --_b {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes _chaseSpin { to { --_b: 360deg; } }


/* ─────────────────────────────────────────────
   03. GLOW-PULSE
   Radial glow breathes in and out rhythmically
   Use: Testimonials, info cards, highlight boxes
   CSS class: glow-pulse
───────────────────────────────────────────── */
.glow-pulse {
  border-radius: 14px;
  border: 1px solid rgba(160, 140, 255, 0.18);
  animation: _glowPulse 3s ease-in-out infinite;
}
@keyframes _glowPulse {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(160, 140, 255, 0.18),
      0 0 36px rgba(160, 140, 255, 0.07),
      inset 0 0 18px rgba(160, 140, 255, 0.03);
  }
  50% {
    box-shadow:
      0 0 32px rgba(160, 140, 255, 0.55),
      0 0 75px rgba(160, 140, 255, 0.20),
      0 0 130px rgba(160, 140, 255, 0.06),
      inset 0 0 28px rgba(160, 140, 255, 0.07);
  }
}


/* ─────────────────────────────────────────────
   04. GLOW-SWEEP
   Glowing beam sweeps left → right across surface
   Use: Banners, headers, product showcases
   CSS class: glow-sweep
───────────────────────────────────────────── */
.glow-sweep {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden; /* ← REQUIRED: do not remove */
}
.glow-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(160, 140, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(64, 224, 208, 0.05) 75%,
    transparent
  );
  animation: _sweepAcross 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes _sweepAcross {
  0%   { left: -100%; }
  100% { left: 165%; }
}


/* ─────────────────────────────────────────────
   05. GLOW-AURORA
   Northern lights — shifting organic color halo
   Use: Hero sections, about boxes, gallery items
   CSS class: glow-aurora
───────────────────────────────────────────── */
.glow-aurora {
  position: relative;
  border-radius: 14px;
  isolation: isolate;
}
.glow-aurora::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 17px;
  background: linear-gradient(0deg, #a08cff, #40e0d0, #ff8fa3, #a08cff);
  filter: blur(9px);
  opacity: 0.7;
  z-index: -1;
  animation: _aurora 7s ease-in-out infinite;
}
.glow-aurora::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: #ffffff; /* ← CHANGE TO YOUR CONTAINER BACKGROUND COLOR */
  z-index: -1;
}
@keyframes _aurora {
  0%   { filter: blur(9px);  opacity: 0.55; background: linear-gradient(0deg,   #a08cff, #40e0d0, #ff8fa3, #a08cff); }
  33%  { filter: blur(14px); opacity: 0.80; background: linear-gradient(120deg, #40e0d0, #ff8fa3, #ffd700, #40e0d0); }
  66%  { filter: blur(7px);  opacity: 0.65; background: linear-gradient(240deg, #ff8fa3, #a08cff, #40e0d0, #ff8fa3); }
  100% { filter: blur(9px);  opacity: 0.55; background: linear-gradient(360deg, #a08cff, #40e0d0, #ff8fa3, #a08cff); }
}


/* ─────────────────────────────────────────────
   06. GLOW-NEON
   Classic neon tube flicker effect (teal)
   Use: Dark mode sites, tech brands, nightlife themes
   CSS class: glow-neon
───────────────────────────────────────────── */
.glow-neon {
  border-radius: 14px;
  border: 1px solid rgba(64, 224, 208, 0.32);
  animation: _neonFlicker 4.5s ease-in-out infinite;
}
@keyframes _neonFlicker {
  0%,  18%, 20%, 22%, 79%, 81%, 100% {
    box-shadow:
      0 0  5px rgba(64, 224, 208, 0.45),
      0 0 18px rgba(64, 224, 208, 0.28),
      0 0 48px rgba(64, 224, 208, 0.13),
      0 0 96px rgba(64, 224, 208, 0.05);
    border-color: rgba(64, 224, 208, 0.32);
  }
  19%, 21% {
    box-shadow: none;
    border-color: rgba(64, 224, 208, 0.04);
  }
  80% {
    box-shadow:
      0 0 3px rgba(64, 224, 208, 0.35),
      0 0 9px rgba(64, 224, 208, 0.18);
    border-color: rgba(64, 224, 208, 0.15);
  }
}


/* ─────────────────────────────────────────────
   07. GLOW-FIRE
   Warm orange-red flickering flame
   Use: CTA buttons, sale sections, warm themes
   CSS class: glow-fire
───────────────────────────────────────────── */
.glow-fire {
  border-radius: 14px;
  border: 1px solid rgba(255, 90, 40, 0.22);
  animation: _fireGlow 1.9s ease-in-out infinite alternate;
}
@keyframes _fireGlow {
  0% {
    box-shadow:
      0 0  9px rgba(255,  55, 15, 0.28),
      0 0 28px rgba(255, 115, 35, 0.13),
      0 0 55px rgba(255, 175, 55, 0.05);
    border-color: rgba(255, 75, 25, 0.28);
  }
  40% {
    box-shadow:
      0 0 18px rgba(255,  95, 25, 0.48),
      0 0 48px rgba(255,  55, 15, 0.18),
      0 0 85px rgba(255, 135, 55, 0.07);
  }
  70% {
    box-shadow:
      0 0  7px rgba(255, 195, 35, 0.38),
      0 0 22px rgba(255, 115, 25, 0.15),
      0 0 46px rgba(255,  75, 15, 0.05);
    border-color: rgba(255, 155, 35, 0.28);
  }
  100% {
    box-shadow:
      0 0  26px rgba(255,  75, 25, 0.52),
      0 0  65px rgba(255,  45,  8, 0.20),
      0 0 115px rgba(255,  95, 45, 0.07);
    border-color: rgba(255, 85, 25, 0.42);
  }
}


/* ─────────────────────────────────────────────
   08. GLOW-ELECTRIC
   High-voltage electric discharge flashes
   Use: Tech, gaming, dramatic product showcases
   CSS class: glow-electric
───────────────────────────────────────────── */
.glow-electric {
  border-radius: 14px;
  border: 1px solid rgba(100, 175, 255, 0.28);
  animation: _electricZap 2.8s ease-in-out infinite;
}
@keyframes _electricZap {
  0%, 100% {
    box-shadow:
      0 0  7px rgba(100, 175, 255, 0.38),
      0 0 22px rgba( 80, 135, 255, 0.13);
    border-color: rgba(100, 175, 255, 0.28);
  }
  9% {
    box-shadow:
      0 0  28px rgba(135, 195, 255, 0.68),
      0 0  58px rgba( 95, 155, 255, 0.32),
      0 0 115px rgba( 75, 135, 255, 0.11);
    border-color: rgba(175, 215, 255, 0.68);
  }
  11% {
    box-shadow: 0 0 4px rgba(100, 175, 255, 0.15);
    border-color: rgba(100, 175, 255, 0.08);
  }
  13% {
    box-shadow:
      0 0 22px rgba(135, 195, 255, 0.55),
      0 0 52px rgba( 95, 155, 255, 0.22);
    border-color: rgba(155, 195, 255, 0.55);
  }
  58% {
    box-shadow:
      0 0 11px rgba(100, 175, 255, 0.42),
      0 0 32px rgba( 80, 135, 255, 0.16);
    border-color: rgba(115, 175, 255, 0.38);
  }
}


/* ─────────────────────────────────────────────
   09. GLOW-PRISM
   Full-spectrum rainbow border rotation
   Use: Creative portfolios, colorful brands
   CSS class: glow-prism
───────────────────────────────────────────── */
.glow-prism {
  position: relative;
  border-radius: 14px;
  isolation: isolate;
}
.glow-prism::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--_p, 0deg),
    #ff0080,
    #ff4400,
    #ffaa00,
    #00ff88,
    #0088ff,
    #8800ff,
    #ff0080
  );
  filter: blur(4px);
  opacity: 0.62;
  z-index: -1;
  animation: _prismSpin 9s linear infinite;
}
.glow-prism::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: #ffffff; /* ← CHANGE TO YOUR CONTAINER BACKGROUND COLOR */
  z-index: -1;
}
@property --_p {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes _prismSpin { to { --_p: 360deg; } }


/* ─────────────────────────────────────────────
   10. GLOW-DRIFT
   Two glowing orbs drift around the perimeter
   Use: Dark cards, pricing sections, feature boxes
   CSS class: glow-drift
───────────────────────────────────────────── */
.glow-drift {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.glow-drift::before {
  content: '';
  position: absolute;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 140, 255, 0.75), transparent 70%);
  filter: blur(17px);
  z-index: -1;
  animation: _driftA 5.5s ease-in-out infinite;
  pointer-events: none;
}
.glow-drift::after {
  content: '';
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 224, 208, 0.65), transparent 70%);
  filter: blur(13px);
  z-index: -1;
  animation: _driftB 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes _driftA {
  0%   { top: -28px;               left: -28px; }
  25%  { top: -28px;               left: calc(100% - 47px); }
  50%  { top: calc(100% - 47px);   left: calc(100% - 47px); }
  75%  { top: calc(100% - 47px);   left: -28px; }
  100% { top: -28px;               left: -28px; }
}
@keyframes _driftB {
  0%   { bottom: -22px;              right: -22px; }
  25%  { bottom: calc(100% - 36px); right: -22px; }
  50%  { bottom: calc(100% - 36px); right: calc(100% - 36px); }
  75%  { bottom: -22px;             right: calc(100% - 36px); }
  100% { bottom: -22px;             right: -22px; }
}


/* ─────────────────────────────────────────────
   11. GLOW-GRADIENT-SPIN
   Blurred gradient halo rotates as outer glow
   Use: Premium cards, luxury products, bold CTAs
   CSS class: glow-gradient-spin
───────────────────────────────────────────── */
.glow-gradient-spin {
  position: relative;
  border-radius: 14px;
  isolation: isolate;
}
.glow-gradient-spin::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 19px;
  background: linear-gradient(
    var(--_g, 0deg),
    #a08cff  0%,
    #40e0d0 33%,
    #ff8fa3 66%,
    #ffd700 100%
  );
  filter: blur(7px);
  opacity: 0.78;
  z-index: -1;
  animation: _gradSpin 4.5s linear infinite;
}
.glow-gradient-spin::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: #ffffff; /* ← CHANGE TO YOUR CONTAINER BACKGROUND COLOR */
  z-index: -1;
}
@property --_g {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes _gradSpin { to { --_g: 360deg; } }


/* ─────────────────────────────────────────────
   12. GLOW-SPOTLIGHT
   Soft spotlight travels around four corners
   Use: Service cards, image containers, team cards
   CSS class: glow-spotlight
───────────────────────────────────────────── */
.glow-spotlight {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden; /* ← REQUIRED: do not remove */
}
.glow-spotlight::before {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.10) 0%,
    transparent 68%
  );
  animation: _spotlightMove 6.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes _spotlightMove {
  0%   { top: -65px;              left: -65px; }
  25%  { top: -65px;              left: calc(100% - 65px); }
  50%  { top: calc(100% - 65px); left: calc(100% - 65px); }
  75%  { top: calc(100% - 65px); left: -65px; }
  100% { top: -65px;             left: -65px; }
}


/* ================================================================
   MODIFIER CLASSES  (stack on top of any glow class)
   Example: class="glow-pulse glow-rose glow-lift glow-slow"
================================================================ */

/* — Speed — */
.glow-slow   { animation-duration: 8s  !important; }
.glow-slower { animation-duration: 14s !important; }
.glow-fast   { animation-duration: 1.4s !important; }

/* — Hover motion — */
.glow-lift  { transition: transform 0.35s cubic-bezier(0.34,1.3,0.64,1); }
.glow-lift:hover  { transform: translateY(-7px); }

.glow-scale { transition: transform 0.35s cubic-bezier(0.34,1.3,0.64,1); }
.glow-scale:hover { transform: scale(1.04); }

/* — Pause glow on hover — */
.glow-pause:hover,
.glow-pause:hover::before,
.glow-pause:hover::after {
  animation-play-state: paused !important;
}

/* — Opacity — */
.glow-dim::before   { opacity: 0.32 !important; }
.glow-vivid::before { opacity: 1    !important; }

/* ─────────────────────────────────────────────
   COLOR OVERRIDES for glow-pulse
   Usage: class="glow-pulse glow-rose"
         class="glow-pulse glow-gold"
         class="glow-pulse glow-green"
         class="glow-pulse glow-blue"
         class="glow-pulse glow-red"
───────────────────────────────────────────── */
.glow-rose.glow-pulse  { border-color: rgba(255, 77, 109, 0.22); animation-name: _glowPulseRose; }
.glow-gold.glow-pulse  { border-color: rgba(255,195,  55, 0.22); animation-name: _glowPulseGold; }
.glow-green.glow-pulse { border-color: rgba( 55,225, 120, 0.22); animation-name: _glowPulseGreen; }
.glow-blue.glow-pulse  { border-color: rgba( 60,160, 255, 0.22); animation-name: _glowPulseBlue; }
.glow-red.glow-pulse   { border-color: rgba(255,  60,  60, 0.22); animation-name: _glowPulseRed; }

@keyframes _glowPulseRose {
  0%,100% { box-shadow: 0 0 12px rgba(255, 77,109,0.18), 0 0 36px rgba(255, 77,109,0.07); }
  50%      { box-shadow: 0 0 32px rgba(255, 77,109,0.55), 0 0 75px rgba(255, 77,109,0.18); }
}
@keyframes _glowPulseGold {
  0%,100% { box-shadow: 0 0 12px rgba(255,195, 55,0.18), 0 0 36px rgba(255,195, 55,0.07); }
  50%      { box-shadow: 0 0 32px rgba(255,195, 55,0.52), 0 0 75px rgba(255,195, 55,0.16); }
}
@keyframes _glowPulseGreen {
  0%,100% { box-shadow: 0 0 12px rgba( 55,225,120,0.18), 0 0 36px rgba( 55,225,120,0.07); }
  50%      { box-shadow: 0 0 32px rgba( 55,225,120,0.52), 0 0 75px rgba( 55,225,120,0.16); }
}
@keyframes _glowPulseBlue {
  0%,100% { box-shadow: 0 0 12px rgba( 60,160,255,0.18), 0 0 36px rgba( 60,160,255,0.07); }
  50%      { box-shadow: 0 0 32px rgba( 60,160,255,0.52), 0 0 75px rgba( 60,160,255,0.16); }
}
@keyframes _glowPulseRed {
  0%,100% { box-shadow: 0 0 12px rgba(255, 60, 60,0.18), 0 0 36px rgba(255, 60, 60,0.07); }
  50%      { box-shadow: 0 0 32px rgba(255, 60, 60,0.52), 0 0 75px rgba(255, 60, 60,0.16); }
}

/* ─────────────────────────────────────────────
   COLOR OVERRIDES for glow-neon
   Usage: class="glow-neon glow-neon-violet"
         class="glow-neon glow-neon-rose"
         class="glow-neon glow-neon-gold"
───────────────────────────────────────────── */
.glow-neon-violet {
  border-color: rgba(160, 140, 255, 0.32) !important;
  animation-name: _neonViolet;
}
@keyframes _neonViolet {
  0%,18%,20%,22%,79%,81%,100% {
    box-shadow:
      0 0  5px rgba(160,140,255,0.45),
      0 0 18px rgba(160,140,255,0.28),
      0 0 48px rgba(160,140,255,0.13);
    border-color: rgba(160,140,255,0.32);
  }
  19%,21% { box-shadow: none; border-color: rgba(160,140,255,0.04); }
}

.glow-neon-rose {
  border-color: rgba(255, 77, 109, 0.32) !important;
  animation-name: _neonRose;
}
@keyframes _neonRose {
  0%,18%,20%,22%,79%,81%,100% {
    box-shadow:
      0 0  5px rgba(255, 77,109,0.45),
      0 0 18px rgba(255, 77,109,0.28),
      0 0 48px rgba(255, 77,109,0.13);
    border-color: rgba(255,77,109,0.32);
  }
  19%,21% { box-shadow: none; border-color: rgba(255,77,109,0.04); }
}

.glow-neon-gold {
  border-color: rgba(255, 195, 55, 0.32) !important;
  animation-name: _neonGold;
}
@keyframes _neonGold {
  0%,18%,20%,22%,79%,81%,100% {
    box-shadow:
      0 0  5px rgba(255,195, 55,0.45),
      0 0 18px rgba(255,195, 55,0.28),
      0 0 48px rgba(255,195, 55,0.13);
    border-color: rgba(255,195,55,0.32);
  }
  19%,21% { box-shadow: none; border-color: rgba(255,195,55,0.04); }
}

/* ─────────────────────────────────────────────
   BORDER RADIUS HELPERS
   Use to match your Elementor container shape
───────────────────────────────────────────── */
.glow-sharp   { border-radius: 0  !important; }
.glow-sharp   ::before, .glow-sharp  ::after { border-radius: 0 !important; }
.glow-round8  { border-radius: 8px !important; }
.glow-round12 { border-radius: 12px !important; }
.glow-round20 { border-radius: 20px !important; }
.glow-round24 { border-radius: 24px !important; }
.glow-pill    { border-radius: 100px !important; }

/* ─────────────────────────────────────────────
   ACCESSIBILITY — respects user preferences
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [class*="glow-"],
  [class*="glow-"]::before,
  [class*="glow-"]::after {
    animation: none !important;
    transition: none !important;
  }
}/* End custom CSS */