/* Services Page Specific Styles */

.hero-services {
  padding-top: 10rem;
}

.down-arrow {
  display: block;
}

.services-arch-front {
  width: 60%;
  aspect-ratio: 3/4;
  position: relative;
}
.services-arch-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-arch-back {
  width: 50%;
  aspect-ratio: 4/5;
  background-color: var(--accent-yellow);
}
.services-arch-back img {
  opacity: 0.9;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-stamp {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  bottom: 10%;
  left: 10%;
  border: 4px solid var(--bg-primary);
}

.service-row {
  margin-bottom: 2rem;
}

.service-details {
  padding: 4rem;
}

.service-image {
  height: 500px;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-bullets {
  list-style: disc;
}
.service-bullets li {
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.testimonial-card,
.contact-cta-card {
  padding: 3rem;
}

@media (max-width: 900px) {
  .hero-services .grid-cols-2 {
    grid-template-columns: 1fr;
  }
  .services-arch-front { width: 80%; }
  .services-arch-back { width: 70%; top: -20px; right: -10px; }
  .down-arrow { display: none; }
  .hero-services { padding-top: 6rem; }

  .service-row.grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* On mobile, reorder the middle item so image is on top or bottom consistently */
  .service-row:nth-child(2) .service-image {
    order: -1;
  }
  .service-image {
    height: 300px;
  }
  .service-details {
    padding: 2rem;
  }
}