@media screen and (max-width: 780px) {
#buttonspan {
    display: block !important;
    visibility: visible !important;
  }

  /* Stack columns vertically and center their contents on small devices */
  .column {
    flex: 0 0 auto;
    width: 30%;
    min-height: 0; /* allow height to collapse to content  */
    padding: 12px 0;
    align-items: center; /* center content inside stacked columns */
  }

  /* Force images to be 80% of the viewport width on small devices and center them */
  .column img {
    width: 20vw !important;
    max-width: 20vw;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* Hide the side navigation on phones for better UX */
  .sidenav,
  #mySidenav,
  .mySidenav {
    /* display: none !important;
    visibility: hidden !important; */
  }

  /* Also hide the left-side nav frame/column and its iframe on small screens */
  #yellow,
  #leftframe,
  iframe[name="leftframe"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }

  
}


/* Removed an overly-broad 3800px media rule that forced desktop columns to full-width
  This caused wrapped rows to appear centered or stacked. Keep only the small-device
  (780px) media query above. */

  @media screen and (max-width: 3780px) {
#leftnavbanner {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 60px !important;
  }

    /* Force images to be 70% of the viewport width on large devices and center them */
  img {
    width: 70vw !important;
    max-width: 80vw;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  }