/* Navigation Buttons using CSS Grid for uniform layout */
.nav-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 buttons per row on large screens */
    gap: 1.25rem; /* Consistent gap between buttons */
    justify-content: center; /* Center the grid */
    width: 90%;

    padding: 1.5rem;
    background-color: #192e40;
    border-radius: 0;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 5%;
}

/* General Button Styling */
.nav-btn, .dropdown-item {
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    background-color: #1e3a5f;
    color: white !important;
    text-align: center;
    border: 0.1rem solid #ffffff !important;
    border-radius: 0.5rem;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
    letter-spacing: 0.1rem;
   
    height: 100%;
}

/* Specific Dropdown Button */
.nav-btn.dropdown-toggle {
    padding: 0.75rem 1.5rem; /* Matching padding to other buttons */
    background-color: #1e3a5f;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
    height: 100%;
}

#nav-container{ background-color: #192e40 !important;}

/* Dropdown Caret Styling */
.dropdown-toggle::after {
    content: "\25BC"; /* Caret arrow */
    font-size: 0.75rem;
    margin-left: 0.5rem;
    color: white;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Hover and Active States */
.nav-btn:hover, .dropdown-item:hover {
    background-color: #706a9b !important;
    color: #1e3a5f !important;
    border-color: white;
}

.nav-btn.active, .dropdown-item.active {
    background-color: #ff9179 !important;
    color: black !important;
    border: 0.125rem solid white !important;
    border-radius: 0.5rem;
}

/* Dropdown Menu Styling */
.nav-buttons .dropdown-menu {
    background-color: #1e3a5f;
    border-radius: 0.625rem;
    border: 0.125rem solid #192e40;
    margin-top: 0.3125rem;
    padding: 1rem 1.5rem;
    min-width: 15.625rem;
text-align:left;
}

.dropdown-item {
    padding:  0.8rem !important;
    margin-bottom: 0.5rem;
    color: white !important;
    border-radius: 0.5rem;
    text-align: center;
    background-color: #1e3a5f;
    border: 0.1rem solid white !important;
font-size:85% !important;
}

/* MEDIA QUERIES */

/* For extra small screens (below 480px) - 1 button per row */
@media (max-width: 479px) {
    .nav-buttons {
        grid-template-columns: 1fr; /* 1 button per row on small screens */
    }
.bio-container {padding: 0rem !important;}
.outputdata_default{width:100% !important; 
padding-right:0% !important;
padding-left:0% !important;
padding-top:5% !important;
padding-bottom:0 !important;
}
.header-image{width:80% !important; }
#header-container {width: 100% !important;}
#footerlowerbar {width: 100% !important;}
}

/* For small screens (480px to 767px) - 2 buttons per row */
@media (min-width: 480px) and (max-width: 767px) {
    .nav-buttons {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 buttons per row */
    }
.bio-container {padding: 0rem !important;}
.outputdata_default{width:100% !important; 
padding-right:0% !important;
padding-left:0% !important;
padding-top:5% !important;
padding-bottom:0 !important;
}
.header-image{width:80% !important; }

#header-container {width: 100% !important;}
#footerlowerbar {width: 100% !important;}
}

/* For medium screens (768px and above) - 3 buttons per row */
@media (min-width: 768px) {
    .nav-buttons {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 buttons per row */
    }
.bio-container {padding: 0rem !important;}
.outputdata_default{width:100% !important; 
padding-right:5% !important;
padding-left:5% !important;
padding-top:3% !important;
padding-bottom:0 !important;
}
#header-container {width: 90% !important;}
#footerlowerbar {width: 90% !important;}
}

/* For large screens (1440px and above) */
@media (min-width: 1000px) {
    .nav-buttons {
        grid-template-columns: repeat(4, 1fr); /* Maintain 3 buttons per row for large screens */
    }
}