.custom-footer-wrapper {
  background-color: #F2F1FC;
  padding-left: 20px;
  padding-right: 20px;
  padding-top:20px;
  padding-bottom:0px;
  color: #36194C;
}

.custom-footer-columns {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  /* For desktop, prevent wrapping */
  flex-wrap: nowrap; 
}

.footer-col {
  font-size: 0.9em; /* 14px equivalent */
}

/* Desktop Styles (Default) */
.col-1 {
  width: 40%;
}

.col-2,
.col-3,
.col-4 {
  width: 20%;
  padding:20px;
  padding-top:0px;
}

.col-4 a {
  text-decoration:underline;
}

.col-4 a:hover {
  text-decoration:none;
}

.footer-logo {
  width: 100px;
  display: block;
  margin-bottom: 10px;
}

.footer-content p {
  margin: 0 0 1em;
}

/* --- Mobile Portrait Breakpoint (e.g., < 478px) for 1x4 (Stacked) layout --- */

@media (max-width: 477px) {
  .custom-footer-columns {
    /* Allow columns to wrap to the next line */
    flex-wrap: wrap; 
    /* Remove gap for items that are now 100% width */
    gap: 0; 
  }
  
  .footer-col {
    /* Set all columns to 100% width to stack them vertically */
    width: 100%; 
    padding: 0; /* Remove padding to ensure full width */
    margin-bottom: 0px; /* Add vertical spacing between stacked columns */
  }

  /* Reset padding for the smaller screen size and remove bottom margin from the last item */
  .col-2,
  .col-3,
  .col-4 {
    padding: 0;
  }
  
  /* Remove margin from the last column for cleaner bottom padding */
  .custom-footer-columns .footer-col:last-child {
    margin-bottom: 0;
  }
}