.tooltip-container {
  position: relative; /* Required for absolute positioning of the tooltip text */
  display: inline-block; /* Allows the container to wrap the text naturally */
  border-bottom: 1px dotted black; /* Optional: adds a visual cue */
}

.tooltip-text {
  visibility: hidden; /* Hides the element by default */
  opacity: 0; /* Ensures instant appearance/disappearance without transition delay */
  width: 400px;
  background-color: #333;
  color: #fff;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute; /* Positions the text relative to the container */
  z-index: 1;
  bottom: 125%; /* Positions the tooltip above the text */
  left: 50%;
  margin-left: -60px; /* Centers the tooltip horizontally */
  white-space: pre-wrap; /* Allows text to wrap */
}

.tooltip-container:hover .tooltip-text {
  visibility: visible; /* Makes the text visible on hover */
  opacity: 1; /* Makes it fully opaque immediately */
}
/* 
* {
  margin: 0;
  padding: 0;
} */