#carouselButtons{
	color:#1D7399;
}

 #carouselButtons{
   position: relative;
   bottom: 90px;
 }


#carouselCoulumn1Neutral {
  padding-left: 40px;
  padding-top: auto;
  padding-right: 20px;
  padding-bottom: auto;
}

#carouselAboutNeutral {
  background-color: lightgrey;
  padding: 115px;
}

#carouselImagesNeutral {
  max-length: 50%;
  max-height: 100%;
  border-radius: 10px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 50px;
    width: 50px;
    outline: black;
    background-color: rgba(0, 0, 0, 0.7);
    background-size: 100%, 100%;
    border-radius: 50%;
    border: 0px solid black;
}

.carousel-indicators button
{ 
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
}

.carousel-indicators .active {
  background-color: #068; /* Example active color */
}

.carousel-indicators > button:hover {
  background-color: #07B; /* Change color on hover */
}

/* Initially hide the hint */
.play-hint {
    display: none;
}


#playButton {
    position: relative; /* Needed for positioning the absolute hint */
    display: inline-block; /* Adjust as needed */
}
#pauseButton {
    position: relative; /* Needed for positioning the absolute hint */
    display: inline-block; /* Adjust as needed */
}

/* Show the hint when the container is hovered */
#playButton:hover .play-hint {
    display: block; /* Or another display value */
}
#pauseButton:hover .play-hint {
    display: block; /* Or another display value */
}

.play-hint {
    display: none;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    bottom: 125%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    white-space: nowrap; /* Prevent text wrapping */
    z-index: 1; /* Ensure hint is on top */
}