.service-card,
.services-card,
.service-box,
[class*="service"] > div,
.service-item {
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.service-card:hover,
.services-card:hover,
.service-box:hover,
[class*="service"] > div:hover,
.service-item:hover {
  transform: translateY(-8px) scale(1.02);
  border: 2px solid #00a8ff;
  box-shadow: 
    0 8px 24px rgba(0, 168, 255, 0.2),
    0 0 20px rgba(0, 168, 255, 0.3),
    0 0 40px rgba(0, 168, 255, 0.1);
  background: linear-gradient(to bottom, #ffffff, #f8fcff);
}

.pricing-card,
.price-card,
.plan-card,
[class*="pricing"] > div,
.pricing-item {
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pricing-card:hover,
.price-card:hover,
.plan-card:hover,
[class*="pricing"] > div:hover,
.pricing-item:hover {
  transform: translateY(-8px) scale(1.02);
  border: 2px solid #00a8ff;
  box-shadow: 
    0 8px 24px rgba(0, 168, 255, 0.2),
    0 0 20px rgba(0, 168, 255, 0.3),
    0 0 40px rgba(0, 168, 255, 0.1);
  background: linear-gradient(to bottom, #ffffff, #f8fcff);
}

.service-card button,
.pricing-card button,
.service-card a,
.pricing-card a,
[class*="service"] button,
[class*="pricing"] button {
  transition: all 0.3s ease;
}

.service-card:hover button,
.pricing-card:hover button,
.service-card:hover a,
.pricing-card:hover a {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 168, 255, 0.3);
}

/*Reduce effect on mobile*/
@media (max-width: 768px) {
  .service-card:hover,
  .services-card:hover,
  .pricing-card:hover,
  .price-card:hover {
    transform: translateY(-5px) scale(1.01);
  }
  
  .service-card::before,
  .pricing-card::before {
    display: none; /* Remove glow ring on mobile for performance */
  }
}
/*Remove hocer effect on touch devices*/
@media (hover: none) {
  .service-card:hover,
  .services-card:hover,
  .pricing-card:hover,
  .price-card:hover {
    transform: none;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}