/* =========================================================
   Services Page (services.html)
   Hero banner, service category lists, imagery layout
   ========================================================= */

/* ---------- Hero Section ---------- */
.services-hero {
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-light) 100%);
  padding: 4rem 0;
}

.services-hero .display-3 {
  font-weight: 300;
}

/* ---------- Service Lists ---------- */
.body-services .display-5,
.facial-services .display-5,
.selfcare-services .display-5 {
  font-size: 4rem;
  font-family: "Rische", serif;
}

.body-services .container,
.facial-services .container,
.selfcare-services .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* ---------- Layout Helpers ---------- */
.facial {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10rem;
}

.facial-services .img-fluid {
  width: 17rem;
  z-index: 2;
}

.meia-lua-facial .img-fluid,
.meia-lua-self {
  width: 31rem;
}

/* ---------- Responsive Behaviour ---------- */
@media (max-width: 991.98px) {

  .facial {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }

  .selfcare-services .facial {
    flex-direction: column-reverse;
  }

  .facial-services .img-fluid,
  .meia-lua-facial .img-fluid,
  .meia-lua-self,
  .selfcare-services .img-fluid {
   
    margin: 0 auto;
  }
}