.elementor-10470 .elementor-element.elementor-element-b58bb15{--display:flex;}.elementor-10470 .elementor-element.elementor-element-6dc7c96 > .elementor-widget-container{background-color:#2E484B;}@media(max-width:767px){.elementor-10470 .elementor-element.elementor-element-6dc7c96 > .elementor-widget-container{padding:6px 6px 6px 6px;}}/* Start custom CSS for html, class: .elementor-element-6dc7c96 */.zodo-home .home-hero { padding: 60px 20px; }
.zodo-home .home-hero__inner{ max-width: 1140px; margin: 0 auto; }

/* Row 1 */
/* ===== Base (Desktop default) ===== */

.zodo-home .home-hero__overlap{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  position: relative;
  min-height: 400px;          /* was 360; makes hero feel balanced */
}

.zodo-home .home-hero__left{
  flex: 0 0 60%;
  max-width: 60%;
  position: relative;
  z-index: 3;
  margin-right: -18%;

  /* KEY: match the row height */
  background: rgba(46, 68, 65, 0.55);
  backdrop-filter: blur(4px);
  border-radius: 18px;
  /* a bit more vertical breathing room */
  padding: 18px 20px;

  display: flex;
  align-items: center;
}

.zodo-home .home-hero__left h2{ margin: 0; }

.zodo-home .home-hero__right{
  flex: 0 0 40%;
  max-width: 40%;
  position: relative;
  z-index: 1;
  min-height: 360px;
}

.zodo-home .zodiac-stage{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, 60vw);
  aspect-ratio: 1 / 1;
  z-index: 1;
}

.zodo-home .zodo-spinner{
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Row 2 */
.zodo-home .home-hero__bottom{ margin-top: 18px; }
.zodo-home .home-hero__bottom{ margin: 0; max-width: 70ch; }
.zodo-home .home-hero__bottom{
  padding: 10px 4px 8px 4px;  /* top right bottom left */
}

/* Mobile tuning: STILL L->R, just adjust proportions */
/* ===== Tablet landscape (roughly iPad landscape) ===== */
@media (max-width: 1024px){
  .zodo-home .home-hero__overlap{ min-height: 360px; }
  .zodo-home .home-hero__right{ min-height: 360px; }
  .zodo-home .zodiac-stage{ width: min(340px, 60vw); }
  .zodo-home .home-hero__left{ padding: 22px 20px; }
}

/* ===== Tablet portrait (your “sweet spot”) ===== */
@media (max-width: 900px){
  .zodo-home .home-hero__overlap{ min-height: 320px; }
  .zodo-home .home-hero__left{
    flex-basis: 72%;
    max-width: 72%;
    margin-right: -22%;
    padding: 16px 16px;       /* keep it tight since you like this look */
  }
  .zodo-home .home-hero__right{
    flex-basis: 28%;
    max-width: 28%;
    min-height: 320px;
  }
  .zodo-home .zodiac-stage{ width: min(260px, 65vw); }
}

/* ===== Mobile portrait: LH currently too tall → tighten ===== */
@media (max-width: 420px){

  /* Make the section itself tight */
  .zodo-home .home-hero{
    padding: 12px 12px;            /* tight but not cramped */
  }

  /* Row 1 should still be full width */
  .zodo-home .home-hero__overlap{
    min-height: 220px;             /* enough room for wheel */
  }

  .zodo-home .home-hero__right{
    min-height: 220px;
  }

  /* LH should FEEL like ~1/3 of row width, but still overlap */
  .zodo-home .home-hero__left{
    flex: 0 0 52%;                 /* actual box width */
    max-width: 52%;
    margin-right: -19%;            /* overlap -> visible footprint ~33% */
    padding: 10px 12px;            /* compact */
  }

  /* RH about half the row */
  .zodo-home .home-hero__right{
    flex: 0 0 48%;
    max-width: 48%;
  }

  /* Wheel: keep it big enough, centered, not top:2% */
  .zodo-home .zodiac-stage{
    top: 50%;
    left: 55%;                     /* push wheel slightly right */
    transform: translate(-50%, -50%);
    width: min(220px, 58vw);
  }

  /* Tighten space between row 1 and row 2 */
  .zodo-home .home-hero__bottom{
    margin-top: 6px;
  }

  .zodo-home .home-hero__bottom p{
    margin: 0;                     /* kills theme default margin */
    padding: 0;
  }
}/* End custom CSS */