/************************************************
 +      🦶🦶🦶       FOOTER STUFF      🥾🥾🥾     +
 +        These are the government links        +
 ***********************************************/
footer {
  background-color: #f0f0f0;
  font-family: sans-serif;
  height: 200px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-column {
  flex: 1 1 250px; /* allows columns to shrink or grow */
  margin: 1rem;
  min-width: 200px;
}

.footer-column h4 {
  margin: 0;
  margin-top: 10px;
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #505050;
}

.footer-column p {
  margin-right: 50px;
  font-size: 10px;
  color: #505050;
  line-height: 1.5;
}

.footer-column ul {
  list-style: none;
  margin: 0;
}

.footer-column ul li {
  margin: -5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

.footer-column ul li a {
  text-decoration: none;
  font-size: 10px;
  color: #505050;
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

.footer-seal {
  display: block;        /* ensures it's treated as a block for margin auto centering */
  margin: 0 auto;        /* centers horizontally within its container */
  height: 150px;         /* increase as needed, e.g., 150px or more */
}

/* MOBILE VIEW as always 🤷‍♂️ */
@media (max-width: 768px) {
footer {
height: auto; /* Allow footer to expand based on content */
padding: 20px 0;
}

.footer-container {
flex-direction: column;
align-items: center;
}

.footer-column {
max-width: 100%;
text-align: center;
margin: 0.5rem 0; 
flex: 1 1 0px; /* Reduce vertical spacing between columns */
}

.footer-column p {
margin-right: 0;
}

.footer-seal {
height: 120px; /* Usob sa size sa seal sa mobile view */
}

/* Para naay page break sa mobile view after "...structure," 
because I am OCD -.- */
.mobile-break {
    display: none; /* Hide by default */
}

@media (max-width: 768px) {
    .mobile-break {
        display: block; /* Show only on mobile */
    }
}
}