/* Container for the entire brotherhood data */
#brotherhood-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Horizontally center all child elements */
    align-items: flex-start; /* Align items to the top */
    max-width: 2000px; /* Increase the width to allow more brothers per row */
    width: 100%; /* Set to 100% of the available space */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Add padding to create some space around it */
}

/* Container for brothers in each year */
.members-container {
    display: flex;
    flex-wrap: wrap; /* Ensure the brothers are arranged in rows */
    justify-content: space-evenly; /* Distribute space between brothers */
    gap: 20px; /* Adjust spacing between brother entries */
    align-items: stretch;
}

.brother-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Ensure even spacing between the image and the text */
    flex-grow: 1;/* Allow content to stretch and fill available space */
    align-items: center;
    padding: 00px;
    max-width: 100%;
    background: #e8e8e8;
}

/* Each brother entry */

.brother-entry {
    display: flex;
    flex-direction: column; /* Stack the content vertically (image on top, text below) */
    align-items: center; /* Center-align the content inside each entry */
    width: 300px; /* Keep the fixed width for each entry */
    margin-bottom: 20px; /* Space below each brother entry */
    background-color: #fff; /* Add a white background like a card */
    border-radius: 10px; /* Slight border radius for a card effect */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    overflow: hidden; /* Ensure no overflow from children */
    max-width: 300px; /* Ensure no card exceeds this width */
    max-height: 700px;
}


/* Year section styling */
.year-section {
    margin-bottom: 40px; /* Adds space between different class years */
    padding: 10px 0; /* Add padding for better spacing */
    background-color: #ffffff; /* Light gray background for the whole section */
    border-radius: 8px; /* Rounded corners for a softer look */
}

.year-header {
    font-size: 48px; /* Adjust the size to be more readable */
    margin-bottom: 20px; /* Align the header better with the section */
    text-align: center;
    padding: 25px 20px; /* Add padding to create space around the text */
    background-color: #7093da; /* Blue background for the header */
    color: #ffffff; /* White text for contrast */
    border-radius: 8px; /* Match the rounded corners */
    font-family: 'Montserrat', sans-serif; /* Change to a modern and clean font */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for a floating effect */
    letter-spacing: 1px; /* Slightly increase letter spacing for better readability */
}

/* Responsive style for smaller screens */
@media screen and (max-width: 768px) {
    .year-header {
        font-size: 32px; /* Reduce font size on smaller screens */
        padding: 10px 15px;
        line-height: 1.2; /* Add line height to prevent overlap */
    }
}

/* Brother image styling */
.brother-image {
    width: 100%; /* Ensure the image fills the entire card width */
    height: 100%;
    max-height: 400px;
    max-width: 400px;
    object-fit: cover; /* Cover the entire image space */
}

/* Brother info text */
.brother-info {
    text-align: center; /* Center the text inside the brother-info div */
    max-width: 100%;
    line-height: 1.2;
    /* pull the text to the top */

    padding: 10px;
    word-wrap: break-word; /* Wrap long words to prevent overflowing */
    overflow-wrap: break-word; /* Ensures text breaks within words if too long */
}

.brother-info h3 {
    font-size: 1.2em; /* Slightly smaller than the default */
    margin: 5px 0;
    color: #333;
}
.brother-info .brother-subtitle {
    font-size: 14px; /* Adjust this as needed to be between the h3 and span sizes */
    margin: 5px 0; /* Adjust the margin for spacing above and below the text */
    color: #555; /* A slightly lighter color for distinction */
    text-align: center; /* Align it similarly to other text */
}

/*Officers section*/

.officers-table {
    width: 100%;
    margin-top: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif; /* Use a modern sans-serif font */
    color: #333;
}

.officers-table h2 {
    font-size: 2.5em;
    margin-bottom: 0;
    color: #2c3e50; /* Darker shade for the heading */
}

.officers-table h3 {
    font-size: 1.4em;
    color: #7f8c8d; /* Light gray for sub-heading */
    margin-bottom: 20px;
}

.officers-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    max-width: 900px; /* Adjust width for better centering */
    background: #ffffff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); /* Smoother shadow */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Apply rounded corners to table */
}



.officers-table th, .officers-table td {
    width: 33.33%; /* Ensures all columns take up equal space */
    padding: 10px 5px;
    border: 1px solid #ececec;
    text-align: center;
    font-size: 1em;
}

.officers-table th {
    background: #ecf0f1; /* Light gray background for the header */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1em;
    color: #34495e; /* Darker shade for header text */
    border-bottom: 3px solid #2c3e50; /* Strong dark line under header */
    text-align: center;
}


.officers-table tr {
    transition: background-color 0.2s ease;
}

.officers-table tr:hover {
    background-color: #f7f9fa; /* Light background on hover */
}

.officers-table tr:nth-child(even) {
    background: #f4f6f7; /* Light gray for even rows */
}

.officers-table tr:nth-child(odd) {
    background: #ffffff; /* White for odd rows */
}