.pop-ups-container {
  position: absolute;
  top: 16%;
  left: 0%;
  width: 100%;
  height: 15%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px; /* Add some padding to prevent text touching edges */
  box-sizing: border-box;
}

.pop-ups-container,
.pop-ups-container * {
  font-size: 70px !important; /* base size for large screens */
  line-height: 1.2; /* Slightly increased for better readability */
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto; /* Enable automatic hyphenation */
  white-space: normal; /* Allow text to wrap */
  max-width: 100%; /* Ensure content doesn't exceed container width */
  word-break: break-word; /* Break long words if necessary */
}

/* Classes for different text lengths */
.pop-ups-container.short-text *{
  font-size: 70px !important;
  white-space: nowrap; /* Short text can stay on one line */
}

.pop-ups-container.medium-text *{
  font-size: 60px !important;
  white-space: normal; /* Allow wrapping for medium text */
}

.pop-ups-container.long-text *{
  font-size: 50px !important;
  white-space: normal; /* Allow wrapping for long text */
}

.pop-ups-container.very-long-text *{
  font-size: 35px !important;
  white-space: normal; /* Allow wrapping for very long text */
}

/* Responsive scaling by screen width */
@media (max-width: 1000px) {
  .pop-ups-container.short-text *{
    font-size: 60px !important;
  }
  
  .pop-ups-container.medium-text *{
    font-size: 40px !important;
  }
  
  .pop-ups-container.long-text *{
    font-size: 35px !important;
  }
  
  .pop-ups-container.very-long-text *{
    font-size: 25px !important;
  }
}

@media (max-width: 500px) {
  .pop-ups-container.short-text *{
    font-size: 25px !important;
    white-space: normal; /* Allow wrapping on small screens even for short text */
  }
  
  .pop-ups-container.medium-text *{
    font-size: 20px !important;
  }
  
  .pop-ups-container.long-text *{
    font-size: 18px !important;
  }
  
  .pop-ups-container.very-long-text *{
    font-size: 15px !important;
  }
}


.pop-ups-container p {
  /* default fallback colors */
  --color1: rgba(255, 230, 130, 0.9);
  --color2: rgba(255, 120, 60, 0.6);
  --color3: rgba(255, 40, 20, 0.3);
}

.pop-ups-container p::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    var(--color1, rgba(255, 230, 130, 0.9)) 0%,
    var(--color2, rgba(255, 120, 60, 0.6)) 25%,
    var(--color3, rgba(255, 40, 20, 0.3)) 55%,
    rgba(0, 0, 0, 0) 90%
  );
  filter: blur(18px);
  border-radius: inherit;
  z-index: -1;
  transition: background 1s ease;
}