/*  Your Custom CSS Code Goes Here */

.custom-scroller {
  overflow-y: auto; 
  scrollbar-width: thin; 
  scrollbar-color: #5bb9ec #f3f4f6;
  padding-right: 12px;
}

.custom-scroller::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scroller::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

.custom-scroller::-webkit-scrollbar-thumb {
  background-color: #8b5cf6; 
  border-radius: 10px;
  border: 2px solid #f3f4f6;
}

.custom-scroller::-webkit-scrollbar-thumb:hover {
  background-color: #6b21a8;
}

.cloud {
      position: relative;
      width: 200px;
      height: 200px;
    
      border-radius: 50%;
      box-shadow:
        /* Create overlapping circles to form the cloud shape */
        -60px -30px 0 0 #f5a623,
        60px -30px 0 0 #f5a623,
        -60px 30px 0 0 #f5a623,
        60px 30px 0 0 #f5a623,
        0 60px 0 0 #f5a623,
        0 -60px 0 0 #f5a623,
        -30px 0 0 0 #f5a623,
        30px 0 0 0 #f5a623;
    }


 .bubble {
  position: absolute;
  border-radius: 50%;
  z-index: 5; /* Ensure visibility above background */
  animation: float 8s infinite ease-in-out;
  will-change: transform; /* Optimize animation performance */
}
.bubble-1 {
  width: 60px;
  height: 60px;
  top: 10%;
  left: 15%;
  animation: float 6s infinite ease-in-out;
}
.bubble-2 {
  width: 80px;
  height: 80px;
  top: 60%;
  left: 30%;
  animation: float 9s infinite ease-in-out 0.5s;
}
.bubble-3 {
  width: 50px;
  height: 50px;
  top: 40%;
  left: 70%;
  animation: float 5s infinite ease-in-out 0.3s;
}
.bubble-4 {
  width: 70px;
  height: 70px;
  top: 80%;
  left: 85%;
  animation: float 10s infinite ease-in-out 0.7s;
}
@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(70px, -120px); /* Increased movement for visibility */
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes float {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(70px, -120px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media (max-width: 768px) {
  .bubble {
    display: none; /* Hide bubbles on smaller screens */
  }
}