/* Center text for h5 within card-body */
.circle-cards .card-body h5 {
    text-align: center;
	padding-top: 12px;
	padding-bottom: 6px;
}


.circle-cards a {
    color: #07A1D8; 
}



.circle-cards .card-img-top {
  max-width: 220px; /* Set maximum image width */
  width: 100%; /* Make width responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 50%;
  transition: transform .3s ease, opacity .3s ease; /* Smooth transition for hover effect */

}


.circle-cards:hover .card-img-top {
  opacity: 0.5; /* Dim the image on hover */
  background-color: #24d1e5; /* This won't be visible since the image isn't transparent, consider an overlay div instead */
}




.owl-carousel .owl-nav {
  text-align: center; /* Center align the buttons */
  position: relative; /* Position relative to the carousel */
  margin-top: 20px; /* Space between the carousel items and the buttons */
 
}

.owl-carousel .owl-prev, .owl-carousel .owl-next {
  position: absolute;
}

.owl-carousel .owl-prev {
  left: 5px; /* Adjust as necessary to move the button outside or inside the carousel area */
}

.owl-carousel .owl-next {
  right: 5px; /* Adjust as necessary to move the button outside or inside the carousel area */
}




/* Responsive adjustments */
@media (max-width: 768px) {
  .owl-carousel .owl-prev, .owl-carousel .owl-next {
    left: 10px; /* Closer to the edge on smaller screens */
    right: 10px; /* Closer to the edge on smaller screens */ 
  }

  /* Smaller buttons on smaller screens */
  .owl-carousel .owl-prev img, .owl-carousel .owl-next img {
    width: 65px;  
	
  }
}

@media (max-width: 480px) {
  .owl-carousel .owl-prev, .owl-carousel .owl-next { 
    left: 10px; /* Even closer on very small screens */
    right: 10px; /* Even closer on very small screens */
  }

  /* Adjust if you need even smaller buttons on very small screens */
  .owl-carousel .owl-prev img, .owl-carousel .owl-next img {
    width: 65px;  
  }
}