.elementor-25 .elementor-element.elementor-element-63efcc7{width:100%;max-width:100%;}.elementor-25 .elementor-element.elementor-element-56a0d7c0{--display:flex;--justify-content:center;--overlay-opacity:0.5;}.elementor-25 .elementor-element.elementor-element-56a0d7c0:not(.elementor-motion-effects-element-type-background), .elementor-25 .elementor-element.elementor-element-56a0d7c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zodastro.com/wp-content/uploads/2026/07/purplezodiac.jpg");}.elementor-25 .elementor-element.elementor-element-56a0d7c0::before, .elementor-25 .elementor-element.elementor-element-56a0d7c0 > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-56a0d7c0 > .e-con-inner > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-56a0d7c0 > .elementor-background-slideshow::before, .elementor-25 .elementor-element.elementor-element-56a0d7c0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-25 .elementor-element.elementor-element-56a0d7c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#20062B;--background-overlay:'';}.elementor-25 .elementor-element.elementor-element-25038a43{width:100%;max-width:100%;}.elementor-25 .elementor-element.elementor-element-25038a43.elementor-element{--align-self:center;}@media(min-width:1025px){.elementor-25 .elementor-element.elementor-element-56a0d7c0:not(.elementor-motion-effects-element-type-background), .elementor-25 .elementor-element.elementor-element-56a0d7c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for html, class: .elementor-element-63efcc7 *//* ============================================================
     Scoped under .vh-section — own variables, vh- prefixed classes.
     NOTE: No background image or wheel image included on purpose —
     both are left as empty slots for you to add manually. See the
     two spots marked "ADD YOUR IMAGE HERE" below.
     ============================================================ */
 
  .vh-section{
    --vh-fallback-bg:#12102b;   /* shows until you add your background image */
    --vh-gold:#f0a63c;
    --vh-gold-light:#f7c96e;
    --vh-cream:#f5efe0;
    --vh-pill-border:rgba(240,193,75,0.4);
 
    all:initial;
    display:block;
    box-sizing:border-box;
  font-family: "poppins";
    width:100%;
  }
 
  .vh-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:inherit;
  }
 
  .vh-banner{
    position:relative;
    width:100%;
    max-width:1600px;
    margin:0 auto;
    aspect-ratio:1920/430;
    overflow:hidden;
  
 
    /* ============================================================
       ADD YOUR IMAGE HERE (1 of 2): background image
       Uncomment and set your image path:
 
       background-image:url('your-background.jpg');
       background-size:cover;
       background-position:center;
       ============================================================ */
  }
 
  .vh-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    height:100%;
    width:100%;
  }
 
  .vh-left{
    flex:0 0 56%;
    padding:0 2% 0 15%;
    color:var(--vh-cream);
  }
 
  .vh-eyebrow{
    font-size:1.1em;
    letter-spacing:0.1em;
    color:#eae4f5;
    font-weight:600;
    margin-bottom:0.3em;
    display:block;
  }
 
  .vh-headline-gold{
  font-family: "poppins";
    font-size:2em;
    font-weight:700;
    line-height:1.05;
    color:var(--vh-gold-light);
    background:linear-gradient(180deg,#fbe08a,#e0a93f);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:0.05em;
    display:block;
  }
 
  .vh-headline-white{
    font-family: "poppins";
    font-size:1.6em;
    font-weight:700;
    color:#f6f3ea;
    margin-bottom:0.5em;
    display:block;
  }
 
  .vh-tagline{
    display:flex;
    align-items:center;
    gap:0.6em;
    font-size:0.95em;
    color:#e9e4f5;
    margin-bottom:1.1em;
    flex-wrap:wrap;
  }
  .vh-tagline .vh-dot{
    color:var(--vh-gold);
    font-size:0.9em;
  }
 
  .vh-pills{
    display:flex;
    flex-wrap:wrap;
    gap:0.7em;
  }
  .vh-pill{
    display:inline-flex;
    align-items:center;
    gap:0.45em;
    border:1.5px solid var(--vh-pill-border);
    background:rgba(255,255,255,0.02);
    color:#f0e9d2;
    padding:0.5em 1.1em;
    border-radius:24px;
    font-size:0.85em;
    font-weight:600;
    white-space:nowrap;
  }
  .vh-pill .vh-pill-icon{
    font-size:1.05em;
  }
 
  /* right side — wheel image slot */
  .vh-right{
    flex:1;
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
 
  .vh-wheel-slot{
    position:relative;
    width:min(85%, 480px);
    aspect-ratio:1/1;
 
    /* ============================================================
       ADD YOUR IMAGE HERE (2 of 2): zodiac wheel image
       Option A — CSS background:
         background-image:url('your-wheel.png');
         background-size:contain;
         background-position:center;
         background-repeat:no-repeat;
 
       Option B — swap this div for an <img> tag:
         <img class="vh-wheel-slot" src="your-wheel.png" alt="Zodiac wheel">
       ============================================================ */
  }
 
  @media (max-width:900px){
    .vh-banner{aspect-ratio:4/5;}
    .vh-content{flex-direction:column;}
    .vh-left{flex:none;padding:8% 6% 2%;text-align:center;}
    .vh-headline-gold{font-size:2.1em;}
    .vh-headline-white{font-size:1.4em;}
    .vh-tagline{justify-content:center;}
    .vh-pills{justify-content:center;}
    .vh-right{flex:none;padding-bottom:6%;}
    .vh-wheel-slot{width:65%;}
  }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-25038a43 */font-family: "poppins";/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d28e7fa *//* ============================================================
     Scoped under .fq-section — own variables, fq- prefixed classes.
     Safe to drop alongside your other Zodastro sections.
     ============================================================ */
 
  .fq-section{
    --fq-bg-deep:#0a0a1f;
    --fq-bg-mid:#160f2e;
    --fq-item-bg:#150f28;
    --fq-border:rgba(212,168,83,0.28);
    --fq-border-open:rgba(212,168,83,0.65);
    --fq-gold:#e8a13c;
    --fq-gold-light:#f0c46e;
    --fq-heading:#f3ead9;
    --fq-body-text:#b7b2c9;
    --fq-question-text:#a29cb8;
 
    all:initial;
    display:block;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
    background:var(--fq-bg-deep);
    width:100%;
  }
 
  .fq-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:inherit;
  }
 
  .fq-container{
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:3.5em 2em 4em;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(140,80,190,0.16) 0%, transparent 50%),
      linear-gradient(180deg, var(--fq-bg-mid) 0%, var(--fq-bg-deep) 55%);
  }
 
  .fq-heading-wrap{
    text-align:center;
    margin-bottom:2.4em;
  }
 
  .fq-eyebrow{
    display:inline-block;
    font-size:0.8em;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--fq-gold);
    margin-bottom:0.7em;
  }
 
  .fq-heading{
    font-family:'Poppins', sans-serif;
    font-weight:800;
    font-size:2.3em;
    color:var(--fq-heading);
    margin-bottom:0.6em;
    line-height:1.2;
  }
 
  .fq-subheading{
    font-size:0.95em;
    color:var(--fq-body-text);
    max-width:34em;
    margin:0 auto;
    line-height:1.6;
  }
 
  .fq-list{
    display:flex;
    flex-direction:column;
    gap:1em;
  }
 
  .fq-item{
    background:var(--fq-item-bg);
    border:1px solid var(--fq-border);
    border-radius:16px;
    overflow:hidden;
    transition:border-color 0.25s ease;
  }
 
  .fq-item.fq-open{
    border-color:var(--fq-border-open);
  }
 
  .fq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.2em;
    width:100%;
    background:none;
    border:none;
    text-align:left;
    padding:1.3em 1.6em;
    cursor:pointer;
    font-size:1.05em;
    font-weight:600;
    color:var(--fq-question-text);
    transition:color 0.25s ease;
  }
 
  .fq-item.fq-open .fq-question,
  .fq-question:hover{
    color:var(--fq-heading);
  }
 
  .fq-icon{
    flex:0 0 auto;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1.5px solid var(--fq-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    transition:transform 0.3s ease, background 0.3s ease;
  }
 
  .fq-icon::before{
    content:"+";
    color:var(--fq-gold-light);
    font-size:1.3em;
    font-weight:400;
    line-height:1;
  }
 
  .fq-item.fq-open .fq-icon{
    background:rgba(232,161,60,0.15);
    transform:rotate(45deg);
  }
 
  .fq-answer-wrap{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease;
  }
 
  .fq-answer{
    padding:0 1.6em 1.5em;
    font-size:0.9em;
    line-height:1.7;
    color:var(--fq-body-text);
  }
 
  @media (max-width:600px){
    .fq-heading{font-size:1.6em;}
    .fq-container{padding:2.5em 1.2em 3em;}
    .fq-question{font-size:0.95em; padding:1.1em 1.2em;}
    .fq-icon{width:28px; height:28px;}
  }/* End custom CSS */