.services {
  padding: 6rem 9%;
  color: #fff;
  font-family: 'Exo 2', sans-serif;
}

.services{
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 4rem;
}

.section-title{
  font-size: 4rem;
  margin-bottom: 3rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
}

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  margin-top:0rem;
}

.service-card {
 --c-ink:#ffffff;
  --c-accent:#6633FF;
  --c-bg:#0a0a0a;
  --c-edge:#1a1a1a;

  background: radial-gradient(120% 120% at 0% 0%, rgba(102,51,255,0.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
  border: 1px solid var(--c-edge);
  border-radius: 16px;
  padding: 2rem;
  color: var(--c-ink);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  max-width: 900px;
  margin: 0 auto;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: #6633FF;
  box-shadow: 0 0 20px rgba(102, 51, 255, 0.4);
}

.service-card i {
  font-size: 3.5rem;
  color: #6633FF;
  margin-bottom: 1.5rem;
}

.service-card h3 {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 700;
}

.service-card p {
  font-size:1.5rem;
  color: #ccc;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .service-card {
    padding: 2rem 1.5rem;
  }

  .service-card i {
    font-size: 3rem;
  }

  .services-container {
    margin-top:2rem;
}
}