/* Optional: attach this file after your main CSS */
.byb-hero-headline {
  position: relative;
}

/* Container that masks the sliding text */
.byb-rotating-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  /* Lock the height to avoid layout shift */
  line-height: 1.2;
}

/* The actual rotating word/phrase */
.byb-rotating-word {
  display: inline-block;
  white-space: nowrap;
  word-break: break-all;
  color: #FFD700;
  /* color: black; */
  /* background-color: #FFD700; */
  border-radius: 5px;
}

@media (max-width: 600px){
  .byb-rotating-wrapper{
    max-width: 100%;
    min-width: 0;            /* important if any parent is flex */
  }

  .byb-rotating-word{
    white-space: normal;     /* allow wrapping */
    overflow-wrap: anywhere; /* prevent overflow on long phrases */
    word-break: normal;      /* don't chop words like "visibili…" */
    max-width: 100%;
    display: inline-block;
  }
}