/* Base Styles (optional improvements for consistency) */
.header-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-container img {
    max-height: 50px;
    width: auto;
}

.nav-links {
    display: flex;
    flex-wrap: nowrap;       /* prevent wrapping */
    align-items: center;
    justify-content: center; /* center items horizontally */
    gap: 10px;
    width: 100%;             /* take full width */
    margin-top: 20px;        /* some space below govt-text */
}


/* Mobile Styles */
@media (max-width: 767.98px) {

    .container.d-flex {
    flex-direction: column;
    align-items: center;  /* center horizontally */
    gap: 10px;
}

.header-container {
    display: flex;
    flex-direction: column;  /* stack vertically */
    align-items: center;     /* center horizontally */
    justify-content: flex-start;
}
.header-container img {
    width: 80px;
    height: auto;
    margin-right: 20px;
    
}
.header-container br {
    display: none;  /* hide those <br> tags */
}


.iti-text{
    margin-left: 80px;
    font-size: 1rem; 
    margin-top: -80px;     /* your existing font size */   
}
 .gov-text {
    display: block;        /* Make it block to apply text-align */
    text-align: center;    /* Center the text inside the block */
    margin: 0 auto;        /* Optional: center the block itself if it has fixed width */
    width: 100%;           /* Make sure it takes full width */
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: -110px;
}

.nav-links br {
    display: none;  /* Hide breaks to not affect flex */
}

.nav-links a,
.nav-links button {
    flex: none;
    text-align: center;
    white-space: nowrap;
}

.nav-links form {
    flex: 1 1 300px;
    max-width: 400px;
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;  /* small spacing on mobile */
    margin-left: 35px;
}

.search-box {
    flex: 1;
    min-width: 200px;
    font-size: 15px;
    margin-top: -10px;
}

.search-button {
    flex: none;
    margin-top: -12px;
}

.form-control search-box{
 margin-right: 10px;

}

/* Optional: reduce bottom margin on buttons */
#decrease-font,
#default-font,
#increase-font,
#toggle-theme {
    font-size: 1rem;          /* Increase font size */
    padding: 8px 12px;        /* Bigger button padding */
    min-height: 38px;         /* Taller buttons */
    min-width: 38px;          /* Optional: wider buttons for square size */
    margin-bottom: 0;
    line-height: 1.2;         /* Keep text vertically aligned */
}

.navbar-toggler {
    margin-left: 0 !important;
    margin-right: auto;
}


 
  .tab-container {
    display: flex;           /* Arrange buttons in a row */
    flex-wrap: nowrap;       /* Prevent wrapping to next line */
    overflow-x: auto;        /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    gap: 4px;                /* Space between buttons */
    padding-bottom: 2px;     /* Add some padding below */
  }

  .tab-container button {
    flex: 0 0 auto;          /* Prevent buttons from shrinking */
    min-width: 0px;         /* Minimum width for buttons */
    padding: 4px 6px;       /* Comfortable padding */
    font-size: 8px;         /* Readable font size */
    white-space: nowrap;     /* Prevent text wrapping inside buttons */
  }
}