body {
  background: radial-gradient(circle at top, #1f1f3a, #0f0f18);
}

/* HERO */
.hero {
  text-align: center;
  padding: 120px 20px 0 20px;
}

.hero h1 {
  font-size: 3rem;
  background: linear-gradient(90deg, #00f5c4, #5b8cff);
  background-clip: text;
  color: transparent;
}

@media (max-width: 650px) {
  .hero h1 {
    font-size: 2.2rem;
  }
}

.hero p {
  opacity: 0.7;
  margin-top: 15px;
}

/* SLIDER */
.swiper {
  width: 85%;
  margin: 80px auto;
  margin-top: 24px;
  border-radius: 20px;
}

.swiper-slide img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 20px;
}

/* SERVICES */
.services {
  width: 100%;
  gap: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.service-card {
  cursor: move;
  width: 400px;
}

.atropos-scale {
  padding: 20px;
}

.service-content {
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  text-align: center;
}

.service-content i {
  font-size: 40px;
  color: #00f5c4;
}

.service-content h3 {
  margin: 15px 0;
}