.services-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  position: relative;
}

.services-carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.service-box {
  flex: 0 0 250px;
  height: 350px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  scroll-snap-type: none;
}

.service-box:hover {
  transform: translateY(-10px);
}

.service-box img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Changed from 'cover' to 'contain' to preserve aspect ratio */
}

.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: #424242;
  border-radius: 50%;
  cursor: crosshair;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #ad0089;
  width: 14px;
  height: 14px;
}

/* For mobile devices - prevent auto-scrolling behavior being triggered by hover */
@media (max-width: 768px) {
  .services-carousel {
    scroll-snap-type: x mandatory;
  }
  
  .service-box {
    flex: 0 0 85%;
    scroll-snap-align: center;
    height: auto; /* Allow height to adjust based on content */
    max-height: 350px; /* Set a max height instead */
  }
  
  .service-box img {
    object-fit: contain; /* Ensure aspect ratio is maintained */
    max-height: 100%; /* Ensure the image doesn't exceed its container */
  }
}