/* ============================================
   HINDRAT TECHNOLOGIES - Services Page Styles
   ============================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.service-card {
  background: var(--gradient-card);
  border: 1px solid rgba(0, 102, 255, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
  transform-style: preserve-3d;
}

.service-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: var(--shadow-3d);
  border-color: rgba(0, 212, 255, 0.35);
}

.service-card-header {
  height: 160px;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 212, 255, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.service-card-header .icon-large {
  font-size: 4rem;
  color: var(--cyan-400);
  opacity: 0.9;
  transition: var(--transition-base);
}

.service-card:hover .icon-large {
  transform: scale(1.15) rotateY(20deg);
}

.service-card-body {
  padding: 1.75rem;
}

.service-card-body h3 {
  margin-bottom: 0.75rem;
}

.service-card-body p {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.service-features span {
  padding: 0.3rem 0.75rem;
  background: rgba(0, 102, 255, 0.12);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  color: var(--primary-300);
}

.services-cta {
  background: linear-gradient(135deg, rgba(0,102,255,0.1) 0%, rgba(0,212,255,0.05) 100%);
}