/* =============================================================
   services.css — Inner page styles for Services Page
   Extends: css/index.css (shared design system)
   ============================================================= */

/* ── 1. Page Hero Banner ──────────────────────────────────────
   Inherits base page hero banner styling from css/index.css.
   ─────────────────────────────────────────────────────────── */

/* ── 2. Services main content section ───────────────────────── */
.services-main {
    position: relative;
    padding: 7rem 0;
    background-color: var(--bg-light);
    background-image: url('../assets/images/Background-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Swiper Container Adjustments on Inner Page */
.services-main .services-swiper-container {
    padding: 2rem 0;
}

/* Ensure mobile styling is center aligned */
@media (max-width: 768px) {
    .services-main .exp-header h2,
    .services-main .exp-header p {
        text-align: center;
    }
}