hr {
  border: 0;
  height: 1px;
  margin: 24px 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(57,110,90,0.0),
    rgba(57,110,90,0.65),
    rgba(57,110,90,0.0),
    transparent
  );
}

/* =====================================================
   PHONE LOGO SWAP + CENTER + NO HORIZONTAL SCROLL
   ===================================================== */

@media (max-width: 768px) {

  /* 1) Kill horizontal overflow on mobile */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 2) Hide the 2nd logo column */
  #toprowcolumn2 { display: none !important; }

  /* 3) Remove the "mystery offset" (padding/margins) that shifts centering */
  #toprow,
  #toprow > .inner,
  #toprowcolumn1,
  #toprowcolumn1 > .inner,
  #toprowcolumn1 #logo {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;

    float: none !important;
    box-sizing: border-box !important;
  }

  /* 4) Center the logo container */
  #toprowcolumn1 #logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* 5) Swap logo image using the inner div as a background */
  #toprowcolumn1 #logo .inner {
    display: block !important;

    width: 150px !important;
    height: 111px !important;

    background-image: url("https://cyberstreet.com/images/cyberstreet/cyberstreet_logo_transparent.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; /* IMPORTANT: center the graphic */
    background-size: contain !important;

    margin: 0 auto !important;  /* center the box even if flex gets overridden */
    padding: 0 !important;

    overflow: visible !important;
  }

  /* 6) Hide the desktop logo image on mobile */
  #toprowcolumn1 #logo img.tck-logo-img {
    display: none !important;
  }
}

/* =====================================================
   TABLET (iPad) LOGO SWAP + CENTER + NO HORIZONTAL SCROLL
   ===================================================== */

/* =====================================================
   iPAD (keep both logos, scale logo2 to 260, no clipping)
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Kill horizontal scroll without chopping content */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;   /* better than hidden on modern browsers */
  }

  /* fallback if clip isn't supported somewhere */
  @supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
  }

  *, *::before, *::after { box-sizing: border-box; }

  /* Make sure the row + inners are not creating offset */
  #toprow,
  #toprow > .inner,
  #toprow .tck-container,
  #toprow .container,
  #toprow .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    overflow: visible !important;  /* <-- IMPORTANT: prevents clipping */
  }

  /* Two columns side-by-side, but NEVER allow cropping */
  #toprowcolumn1,
  #toprowcolumn2 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;  /* <-- IMPORTANT: prevents clipping */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Center both logo blocks inside their columns */
  #toprowcolumn1 #logo,
  #toprowcolumn2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Main logo (column 1) */
  #toprowcolumn1 #logo img.tck-logo-img {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;   /* adjust if you want */
    height: auto !important;
    margin: 0 !important;
  }
  /* Nudge logo1 slightly to the right on iPad */
  #toprowcolumn1 #logo img.tck-logo-img {
  margin-left: 40px !important;    /* try 8–20px */
  }
  /* Side logo (column 2) — your requested max width */
  #toprowcolumn2 img {
    display: block !important;
    width: 100% !important;
    max-width: 260px !important;   /* your value */
    height: auto !important;
    margin: 0 !important;

    /* hard reset in case template is shifting it */
    position: static !important;
    transform: none !important;
  }
}