/* ============================================================
   Unified Spacing System — Saral Groups
   Consistent section spacing across all pages.
   ============================================================ */

:root {
  /* --- Primary spacing scale (8px base) --- */
  --space-1: 0.5rem;   /*  8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 5rem;     /* 80px */
  --space-8: 6rem;     /* 96px */

  /* --- Section defaults --- */
  --section-padding-y: var(--space-7);   /* 80px top/bottom */
  --section-padding-x: 5%;              /* responsive sides */
  --section-gap: var(--space-4);         /* 32px between sections */
  --section-max-width: 1320px;

  /* --- Content padding --- */
  --content-card-padding: var(--space-4);
  --content-container-padding: var(--space-5);
}

/* Standard section spacing */
section:not(.home-section):not(#footer):not(#faq) {
  padding: var(--section-padding-y) var(--section-padding-x);
  max-width: 100%;
  box-sizing: border-box;
}

/* Constrained wrapper */
.section--contained {
  max-width: var(--section-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Content wrapper */
.content-wrapper {
  max-width: var(--section-max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* FAQ section */
#faq .faq-container,
.faq-container {
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* Contact us */
.contact-us-section {
  padding-top: calc(var(--header-height, 150px) + var(--space-5));
  padding-bottom: var(--space-7);
}

/* Footer */
#footer {
  padding: 0;
}

/* Card padding standard */
.card,
.offering-content,
.our-content-container,
.testimonials-content,
.inner-contents {
  padding: var(--content-card-padding);
}

/* Responsive */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: var(--space-6);
    --section-padding-x: 4%;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding-y: var(--space-5);
    --section-padding-x: 5%;
    --content-card-padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --section-padding-y: var(--space-4);
    --section-padding-x: 4%;
    --content-card-padding: 1.25rem;
  }
}