/* wrapper that centers content and gives consistent gutters */
.site-container {
  max-width: 1200px;      /* adjust as needed */
  margin: 0 auto;         /* equal left/right margins */
  padding: 0 20px;        /* horizontal gutter */
  box-sizing: border-box;
}

/* ensure each section's internal container fills the wrapper width */
.site-container section {
  width: 100%;
  box-sizing: border-box;
}

/* common selector: if your sections use inner .secX-con elements, make them full width */
.site-container section > div[class$="-con"] {
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* responsive tweaks */
/* ...existing code... */
/* Responsive additions */
@media (max-width: 1200px) {
  .site-container { max-width: 1000px; padding: 0 16px; }
}

@media (max-width: 900px) {
  .site-container { max-width: 760px; padding: 0 14px; }
  .site-container section > div[class$="-con"] { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 520px) {
  .site-container { max-width: 100%; padding: 0 12px; }
  .site-container section > div[class$="-con"] { padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 375px) {
  .site-container {
    max-width: 100%;
    padding: 0 8px;
  }

  /* tighter inner gutters so section content doesn't cause horizontal scroll */
  .site-container section > div[class$="-con"] {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* small safety: ensure children can shrink instead of forcing width */
  .site-container, .site-container * {
    box-sizing: border-box;
  }
}