/* responsive.css
   Make the desktop layout fit on narrow screens
   (no cropping, nice margins around content & social icons)
*/

@media (max-width: 1200px) {

  /* Safety: no sideways cropping */
  html,
  body {
    overflow-x: auto;
  }

  /* Let the main containers use full width with side padding */
  .myContainer,
  .myContainer-85 {
    width: 100%;
    max-width: 1200px;
    padding: 0 16px;     /* this is your side margin */
    margin: 0 auto;
  }

  /* SOCIAL ICONS: shrink & wrap nicely, always centered */
  .social {
    width: 100%;
    max-width: 420px;    /* keeps them from stretching too wide */
    margin: 1.5rem auto;
    padding: 0.5rem 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;     /* allow wrapping if needed */
    gap: 0.75rem;
  }

  .social div {
    width: 6rem;
    height: 6rem;
  }

  .social img {
    width: 4rem;
    height: 4rem;
  }

  /* Optional: keep that "text + image" block sane on small screens */
  .bdlTac3 .nth-2 {
    position: static;
    width: 100%;
    transform: none;
    margin: 1.5rem 0 0;
  }
}