@media (max-width: 1024px) {
    #main-footer .row>div[class*="col-"] {
        flex: 0 0 100%;
        /* Two columns on screens up to 1024px */
    }
}

@media (max-width: 768px) {
    #main-footer .row>div[class*="col-"] {
        flex: 0 0 100%;
        /* Full width for all columns on screens up to 768px */
        text-align: center;
        /* Center align text */
    }
}
  /* Define your custom CSS here */
  #main-footer .social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  @media (max-width: 400px) {
    #main-footer .social-icons {
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }