@import "tailwindcss";

.tooltip-wrapper {
  position: relative;
  display: inline-block;
  margin: 0 10px;
}

/* Tooltip box */
.tooltip-text {
  visibility: hidden;
  opacity: 0;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 8px 12px;
  border-radius: 6px;
  position: absolute;
  z-index: 0;
  top: 5%;
  left: 200%;
  transform: translateX(5%);
  white-space: normal; /* allow wrapping */
  min-width: max-content;
  max-width: 260px; /* to avoid huge box */
  box-sizing: border-box;
  transition: opacity 0.3s;
  pointer-events: none; /* default, changed below */
}

/* Show on hover over wrapper OR tooltip */
.tooltip-wrapper:hover .tooltip-text,
.tooltip-text:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto; /* allow hover over the tooltip */
}

/* For click behavior */
.tooltip-text.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  
}

.bubble-container {
    position: relative;
    /* Increased height to provide more vertical space for bubbles */
    height: 700px;
    /* Adjust as needed */
    width: 100%;
}

.bubble {
    position: absolute;
    background-color: #e0e0e0;
    /* A light grey for placeholder */
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    /* Makes it a perfect circle */
    overflow: hidden;
    /* Ensures the image stays within the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    text-align: center;
    border: 2px solid rgba(198, 15, 211, 0.52);
    /* Subtle border */
}

.bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the bubble area */
}

/* Define specific sizes and positions for each bubble for larger screens (md and up) */
/* Bubble 1 (Largest) */
.bubble-1 {
    width: 25vw; /* Using viewport width for responsiveness */
    height: 25vw;
    max-width: 280px; /* Maximum size */
    max-height: 280px;
    top: 5%;
    left: 57%;
    transform: translateX(-50%);
    z-index: 3;
}

/* Bubble 2 */
.bubble-2 {
    width: 12vw;
    height: 12vw;
    max-width: 150px;
    max-height: 150px;
    top: 10%;
    left: 14%;
    z-index: 2;
}

/* Bubble 3 */
.bubble-3 {
    width: 10vw;
    height: 10vw;
    max-width: 120px;
    max-height: 120px;
    top: 33%;
    right: 10%;
    z-index: 1;
}

/* Bubble 4 (Smaller, lower) */
.bubble-4 {
    width: 10vw;
    height: 10vw;
    max-width: 120px;
    max-height: 120px;
    bottom: 20%;
    left: 33%;
    z-index: 0;
}

/* Bubble 5 (Smallest, right side) */
.bubble-5 {
    width: 18vw;
    height: 18vw;
    max-width: 160px;
    max-height: 160px;
    bottom: 30%;
    right: 30%;
    z-index: 0;
}

/* New Bubble 6 */
.bubble-6 {
    width: 18vw; /* Using viewport width for responsiveness */
    height: 18vw;
    max-width: 220px; /* Maximum size */
    max-height: 220px;
    top: 32%;
    left: 32%;
    transform: translateX(-50%);
    z-index: 2;
}

/* Media query for smaller screens (max-width of md breakpoint) */
@media (max-width: 767px) {
    .bubble-container {
        height: 500px; /* Adjust height for mobile */
    }

    /* Hide bubbles on small screens */
    .bubble-1,
    .bubble-2,
    .bubble-3,
    .bubble-4,
    .bubble-5,
    .bubble-6 {
        display: none;
    }

    
}