.elementor-966 .elementor-element.elementor-element-c83e54c{width:100%;max-width:100%;}.elementor-966 .elementor-element.elementor-element-1757081.elementor-element{--order:-99999 /* order start hack */;}/* Start custom CSS for html, class: .elementor-element-c83e54c *//* ============================================================
     Everything scoped under .hb-section — no :root vars, no bare
     .banner/.left/.right/.btn/etc so this can't collide with any
     other section's CSS on the same page.
     ============================================================ */
 
  .hb-section{
    --hb-navy-deep:#0a0e2a;
    --hb-navy-mid:#1a1245;
    --hb-purple-glow:#4a2a7a;
    --hb-gold:#f0c14b;
    --hb-gold-light:#f7d878;
    --hb-gold-dim:#c9a04e;
    --hb-cream:#f5efe0;
    --hb-panel-border:rgba(240,193,75,0.35);
 
    all:initial;
    display:block;
    box-sizing:border-box;
    width:100%;
    font-family: "poppins";
  }
 
  .hb-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
 
  .hb-banner{
    position:relative;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    aspect-ratio:960/350;
    overflow:hidden;
    background:
      radial-gradient(ellipse at 78% 45%, rgba(120,80,180,0.35) 0%, rgba(74,42,122,0.15) 35%, transparent 60%),
      linear-gradient(180deg, #050515 0%, #100a30 40%, #1b1040 70%, #2a1550 100%);
  }
 
  /* stars */
  .hb-stars{
    position:absolute;
    inset:0;
    background-image:
      radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent),
      radial-gradient(1px 1px at 22% 40%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 33% 8%, #fff, transparent),
      radial-gradient(1px 1px at 45% 25%, #fff, transparent),
      radial-gradient(2px 2px at 60% 12%, #fff, transparent),
      radial-gradient(1px 1px at 70% 30%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 85% 18%, #fff, transparent),
      radial-gradient(1px 1px at 5% 60%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 15% 80%, #fff, transparent),
      radial-gradient(1px 1px at 38% 70%, #fff, transparent),
      radial-gradient(1px 1px at 55% 85%, #fff, transparent),
      radial-gradient(2px 2px at 90% 60%, #fff, transparent),
      radial-gradient(1px 1px at 95% 85%, #fff, transparent);
    background-repeat:repeat;
    background-size:400px 400px;
    opacity:0.8;
  }
 
  /* shooting star */
  .hb-shooting-star{
    position:absolute;
    top:14%;
    right:20%;
    width:90px;
    height:2px;
    background:linear-gradient(90deg, rgba(255,200,150,0.9), transparent);
    transform:rotate(20deg);
    border-radius:2px;
  }
  .hb-shooting-star::after{
    content:'';
    position:absolute;
    right:0;
    top:-1.5px;
    width:5px;
    height:5px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 0 8px 2px rgba(255,220,180,0.9);
  }
 
  /* mountains */
  .hb-mountains{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:22%;
    background:linear-gradient(180deg, transparent 0%, #1a1030 100%);
  }
  .hb-mountains svg{
    width:100%;
    height:100%;
    display:block;
  }
 
  /* content layout */
  .hb-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    height:100%;
    width:100%;
  }
 
  .hb-left{
    flex:0 0 54%;
    padding:0 3.5% 0 4.5%;
    color:var(--hb-cream);
  }
 
  .hb-eyebrow{
    font-size:1.1em;
    letter-spacing:0.12em;
    color:#eae4f5;
    font-weight:600;
    margin-bottom:0.3em;
    display:block;
  }
 
  .hb-headline{
    font-size:2.6em;
    line-height:1.05;
    margin-bottom:0.15em;
  }
  .hb-headline .hb-accent{
    color:var(--hb-gold-light);
    background:linear-gradient(180deg,#fbe08a,#e0a93f);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    display:block;
  }
  .hb-headline .hb-white-line{
    color:#f6f3ea;
    font-weight:700;
    display:block;
    font-size:0.72em;
    margin-top:0.1em;
  }
 
  .hb-tagline{
    margin-top:0.8em;
    font-size:0.85em;
    color:#d9d3ea;
    letter-spacing:0.02em;
    display:block;
  }
 
  .hb-pills{
    display:flex;
    flex-wrap:wrap;
    gap:0.5em;
    margin-top:1em;
  }
  .hb-pill{
    display:inline-flex;
    align-items:center;
    gap:0.4em;
    border:1px solid var(--hb-panel-border);
    background:rgba(255,255,255,0.03);
    color:#f0e9d2;
    padding:0.35em 0.9em;
    border-radius:20px;
    font-size:0.72em;
    white-space:nowrap;
  }
 
  .hb-desc{
    margin-top:1em;
    font-size:0.78em;
    color:#c9c2dc;
    line-height:1.5;
    max-width:34em;
    display:block;
  }
 
  .hb-cta-row{
    display:flex;
    gap:0.8em;
    margin-top:1.3em;
  }
  .hb-btn{
    padding:0.7em 1.5em;
    border-radius:6px;
    font-size:0.82em;
    font-weight:700;
    letter-spacing:0.01em;
    cursor:pointer;
    border:none;
  }
  .hb-btn-primary{
    background:linear-gradient(180deg,#f5cf6b,#dba832);
    color:#241505;
  }
  .hb-btn-secondary{
    background:transparent;
    color:#f2ecd8;
    border:1px solid rgba(240,236,216,0.5);
  }
 
  .hb-trust{
    display:flex;
    align-items:center;
    gap:0.6em;
    margin-top:1.4em;
  }
  .hb-avatars{
    display:flex;
  }
  .hb-avatars span{
    width:1.7em;
    height:1.7em;
    border-radius:50%;
    border:2px solid #1b1040;
    margin-left:-0.5em;
    background:linear-gradient(135deg,#d9b26a,#8a6a3c);
    display:inline-block;
  }
  .hb-avatars span:first-child{margin-left:0;}
  .hb-trust-text{
    font-size:0.7em;
    color:#cfc8e0;
  }
 
  /* zodiac wheel — now an <img>, not inline SVG */
  .hb-right{
    flex:1;
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
 
  .hb-wheel-wrap{
    position:relative;
    width:min(78%, 340px);
    aspect-ratio:1/1;
  }
 
  .hb-wheel-img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 0 40px rgba(240,193,75,0.25));
  }
 
  @media (max-width:700px){
    .hb-banner{aspect-ratio:4/5;}
    .hb-content{flex-direction:column;}
    .hb-left{flex:none;padding:6% 6% 2%;text-align:center;}
    .hb-headline{font-size:1.8em;}
    .hb-pills{justify-content:center;}
    .hb-cta-row{justify-content:center;}
    .hb-trust{justify-content:center;}
    .hb-right{flex:none;padding-bottom:6%;}
    .hb-wheel-wrap{width:60%;}
  }
  
  /* ============================================================
   ROTATING + GLOWING WHEEL EFFECT
   Add this to your existing .hb-section <style> block.
   ============================================================ */

.hb-wheel-wrap{
  /* keeps the glow from getting clipped by any overflow:hidden
     on parent elements */
  overflow:visible;
}

.hb-wheel-img{
  animation:
    hb-wheel-spin 50s linear infinite,
    hb-wheel-glow 3.5s ease-in-out infinite;
  will-change: transform, filter;
  border-radius:50%;   /* safe even if the image is already circular */
}

@keyframes hb-wheel-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes hb-wheel-glow{
  0%, 100%{
    filter:
      drop-shadow(0 0 18px rgba(240,193,75,0.45))
      drop-shadow(0 0 38px rgba(240,193,75,0.22));
  }
  50%{
    filter:
      drop-shadow(0 0 32px rgba(240,193,75,0.75))
      drop-shadow(0 0 60px rgba(240,193,75,0.4));
  }
}

/* Optional: pause the spin on hover, glow keeps going */
.hb-wheel-img:hover{
  animation-play-state: paused, running;
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce){
  .hb-wheel-img{
    animation: hb-wheel-glow 3.5s ease-in-out infinite;
  }
}/* End custom CSS */