.elementor-31 .elementor-element.elementor-element-4261e90{width:100%;max-width:100%;}.elementor-31 .elementor-element.elementor-element-2ed5e7fd{--display:flex;--justify-content:center;--overlay-opacity:0.5;}.elementor-31 .elementor-element.elementor-element-2ed5e7fd:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-2ed5e7fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zodastro.com/wp-content/uploads/2026/07/purplezodiac.jpg");background-position:center center;background-size:cover;}.elementor-31 .elementor-element.elementor-element-2ed5e7fd::before, .elementor-31 .elementor-element.elementor-element-2ed5e7fd > .elementor-background-video-container::before, .elementor-31 .elementor-element.elementor-element-2ed5e7fd > .e-con-inner > .elementor-background-video-container::before, .elementor-31 .elementor-element.elementor-element-2ed5e7fd > .elementor-background-slideshow::before, .elementor-31 .elementor-element.elementor-element-2ed5e7fd > .e-con-inner > .elementor-background-slideshow::before, .elementor-31 .elementor-element.elementor-element-2ed5e7fd > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#20062B;--background-overlay:'';}@media(min-width:1025px){.elementor-31 .elementor-element.elementor-element-2ed5e7fd:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-2ed5e7fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for html, class: .elementor-element-4261e90 *//* ============================================================
     Scoped under .fh-section — own variables, fh- prefixed classes.
     NOTE: No background image or face/illustration 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.
     ============================================================ */
 
  .fh-section{
    --fh-fallback-bg:#12102b;   /* shows until you add your background image */
    --fh-gold:#f0a63c;
    --fh-gold-light:#f7c96e;
    --fh-cream:#f5efe0;
    --fh-pill-border:rgba(240,193,75,0.4);
 
    all:initial;
    display:block;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
    width:100%;
  }
 
  .fh-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:inherit;
  }
 
  .fh-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;
       ============================================================ */
  }
 
  .fh-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    height:100%;
    width:100%;
  }
 
  .fh-left{
    flex:0 0 56%;
    padding:0 2% 0 15%;
    color:var(--fh-cream);
  }
 
  .fh-eyebrow{
    font-size:1.1em;
    letter-spacing:0.1em;
    color:#eae4f5;
    font-weight:600;
    margin-bottom:0.3em;
    display:block;
  }
 
  .fh-headline-gold{
     font-family:'Poppins', sans-serif;
    font-size:2em;
    font-weight:700;
    line-height:1.05;
    color:var(--fh-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;
  }
 
  .fh-headline-white{
    font-family:'Poppins', sans-serif;
    font-size:1.6em;
    font-weight:700;
    color:#f6f3ea;
    margin-bottom:0.5em;
    display:block;
  }
 
  .fh-tagline{
    display:flex;
    align-items:center;
    gap:0.6em;
    font-size:0.95em;
    color:#e9e4f5;
    margin-bottom:1.1em;
    flex-wrap:wrap;
  }
  .fh-tagline .fh-dot{
    color:var(--fh-gold);
    font-size:0.9em;
  }
 
  .fh-pills{
    display:flex;
    flex-wrap:wrap;
    gap:0.7em;
  }
  .fh-pill{
    display:inline-flex;
    align-items:center;
    gap:0.45em;
    border:1.5px solid var(--fh-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;
  }
  .fh-pill .fh-pill-icon{
    font-size:1.05em;
  }
 
  /* right side — face / forehead illustration slot */
  .fh-right{
    flex:1;
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
 
  .fh-image-slot{
    position:relative;
    width:min(85%, 480px);
    aspect-ratio:1/1;
 
    /* ============================================================
       ADD YOUR IMAGE HERE (2 of 2): forehead / face reading image
       Option A — CSS background:
         background-image:url('your-face-image.png');
         background-size:contain;
         background-position:center;
         background-repeat:no-repeat;
 
       Option B — swap this div for an <img> tag:
         <img class="fh-image-slot" src="your-face-image.png" alt="Forehead reading illustration">
       ============================================================ */
  }
 
  @media (max-width:900px){
    .fh-banner{aspect-ratio:4/5;}
    .fh-content{flex-direction:column;}
    .fh-left{flex:none;padding:8% 6% 2%;text-align:center;}
    .fh-headline-gold{font-size:2.1em;}
    .fh-headline-white{font-size:1.4em;}
    .fh-tagline{justify-content:center;}
    .fh-pills{justify-content:center;}
    .fh-right{flex:none;padding-bottom:6%;}
    .fh-image-slot{width:65%;}
  }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-750d5a2 *//* ============================================================
     Scoped under .pq-section — own variables, pq- prefixed classes.
     Safe to drop alongside your other Zodastro sections.
     ============================================================ */
 
  .pq-section{
    --pq-bg-deep:#0a0a1f;
    --pq-bg-mid:#160f2e;
    --pq-item-bg:#150f28;
    --pq-border:rgba(212,168,83,0.28);
    --pq-border-open:rgba(212,168,83,0.65);
    --pq-gold:#e8a13c;
    --pq-gold-light:#f0c46e;
    --pq-heading:#f3ead9;
    --pq-body-text:#b7b2c9;
 
    all:initial;
    display:block;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
    width:100%;
  }
 
  .pq-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:inherit;
  }
 
  .pq-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(--pq-bg-mid) 0%, var(--pq-bg-deep) 55%);
  }
 
  .pq-heading-wrap{
    text-align:center;
    margin-bottom:2.2em;
  }
 
  .pq-eyebrow{
    display:inline-block;
    font-size:0.78em;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--pq-gold);
    margin-bottom:0.6em;
  }
 
  .pq-heading{
     font-family:'Poppins', sans-serif;
    font-weight:700;
    font-size:2em;
    color:var(--pq-heading);
    margin-bottom:0.5em;
  }
 
  .pq-subheading{
    font-size:0.9em;
    color:var(--pq-body-text);
    max-width:36em;
    margin:0 auto;
    line-height:1.5;
  }
 
  .pq-list{
    display:flex;
    flex-direction:column;
    gap:0.8em;
  }
 
  .pq-item{
    background:var(--pq-item-bg);
    border:1px solid var(--pq-border);
    border-radius:12px;
    overflow:hidden;
    transition:border-color 0.25s ease;
  }
 
  .pq-item.pq-open{
    border-color:var(--pq-border-open);
  }
 
  .pq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1em;
    width:100%;
    background:none;
    border:none;
    text-align:left;
    padding:1.1em 1.3em;
    cursor:pointer;
    font-size:0.95em;
    font-weight:600;
    color:var(--pq-heading);
  }
 
  .pq-question:hover{
    color:var(--pq-gold-light);
  }
 
  .pq-icon{
    flex:0 0 auto;
    width:22px;
    height:22px;
    border-radius:50%;
    border:1.5px solid var(--pq-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    transition:transform 0.3s ease, background 0.3s ease;
  }
 
  .pq-icon::before,
  .pq-icon::after{
    content:"";
    position:absolute;
    background:var(--pq-gold-light);
    transition:transform 0.3s ease, opacity 0.3s ease;
  }
  .pq-icon::before{
    width:10px;
    height:1.5px;
  }
  .pq-icon::after{
    width:1.5px;
    height:10px;
  }
 
  .pq-item.pq-open .pq-icon{
    background:rgba(232,161,60,0.15);
  }
  .pq-item.pq-open .pq-icon::after{
    opacity:0;
    transform:rotate(90deg);
  }
 
  .pq-answer-wrap{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease;
  }
 
  .pq-answer{
    padding:0 1.3em 1.2em;
    font-size:0.85em;
    line-height:1.65;
    color:var(--pq-body-text);
  }
 
  @media (max-width:600px){
    .pq-heading{font-size:1.5em;}
    .pq-container{padding:2.5em 1.2em 3em;}
  }/* End custom CSS */