.progress_indicator {
  position: fixed;
  bottom: 20px;
  right: 120px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: none; /* Hidden by default */
  border-radius: 50%; /* Make it circular */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow */
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
}

.progress_indicator.active-progress {
  display: block; /* Show when active */
}

.progress-circle {
  transform: rotate(-90deg);
  width: 80%; /* Adjust size of the circle */
  height: 80%;
}

.progress-circle path {
  fill: none;
  stroke: #007bff; /* Progress color */
  stroke-width: 2;
}

.pointer {
  position: absolute; /* Position the pointer absolutely */
  font-size: 24px; /* Size of the pointer */
  color: #007bff; /* Color of the pointer */
  font-weight: bold; /* Make it bold */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact centering */
}

.quotes {
  font-style: italic;
  font-family: thin;
  font-size: 1rem;
  color: green; /* Corrected color syntax */
  display: inline-block;
  animation: shake 6.5s infinite;
}

.jumping-emoji {
  margin-right: 10px; /* Space between the image and the text */
  animation: jump 1s infinite alternate; /* Jumping animation */
}

.emoji-image {
  width: 34px; /* Adjust the size of the image */
  height: 34px; /* Adjust the size of the image */
  vertical-align: middle; /* Align the image properly */
}

@keyframes jump {
  0% {
    transform: translateY(0); /* Start position */
  }
  100% {
    transform: translateY(-10px); /* Jump height */
  }
}

.scrolling-message-container {
  background-color: darkgreen;
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4px;
  margin: 80px 0 0 0; /* Adds space outside the container (top and bottom) */
}

.scrolling-message-container i {
  flex-shrink: 0;
  margin: 0 10px;
}

.scrolling-message-wrapper {
  display: flex;
  overflow: hidden;
  width: 60%;
}

.scrolling-message {
  white-space: nowrap;
  display: inline-block;
  animation: scroll-text 60s linear infinite;
}

.water-icon {
  color: #00aaff;
  font-size: 30px;
  animation: drop 1s infinite alternate;
}

@keyframes drop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}

@keyframes scroll-text {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Media Queries */
@media (max-width: 768px) {
  .progress_indicator {
    right: 130px; /* Move closer to the edge on smaller screens */
    width: 40px; /* Reduce size */
    height: 40px;
  }

  .pointer {
    font-size: 18px; /* Reduce pointer size */
  }

  .quotes {
    font-size: 0.8rem; /* Adjust font size */
  }

  .jumping-emoji {
    margin-right: 5px; /* Reduce margin */
  }

  .emoji-image {
    width: 28px; /* Reduce image size */
    height: 28px;
  }

  .scrolling-message-container {
    height: 30px; /* Reduce height */
    font-size: 3px; /* Adjust font size */
    margin: 70px 0 0 0; /* Adjust margin */
	
  }

  .scrolling-message-wrapper {
    width: 80%; /* Increase width for better visibility */
  }

  .water-icon {
    font-size: 24px; /* Reduce icon size */
  }
}

@media (max-width: 480px) {
  .progress_indicator {
    right: 130px; /* Move even closer to the edge */
    width: 30px; /* Further reduce size */
    height: 30px;
  }

  .pointer {
    font-size: 14px; /* Further reduce pointer size */
  }

  .quotes {
    font-size: 0.7rem; /* Further adjust font size */
  }

  .jumping-emoji {
    margin-right: 3px; /* Further reduce margin */
  }

  .emoji-image {
    width: 22px; /* Further reduce image size */
    height: 20px;
  }

  .scrolling-message-container {
    height: 25px; /* Further reduce height */
    font-size: 2px; /* Further adjust font size */
    margin: 60px 0 0 0; /* Further adjust margin */
  }

  .scrolling-message-wrapper {
    width: 90%; /* Increase width for better visibility */
  }

  .water-icon {
    font-size: 16px; /* Further reduce icon size */
  }
}