/* General body style */
body {
    background-color: #1e1e1e; /* Dark background */
    color: #dcdcdc; /* Light gray text */
}

/* Header and Navbar styling */
h1 {
    text-align: center;
    color: #ffffff; /* White text for the title */
}

.navbar {
    background-color: #2a2a2a; /* Dark gray navbar */
}

.navbar-brand {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #f8f9fa; /* Off-white for brand text */
}

.navbar-nav .nav-link {
    color: #dcdcdc; /* Light gray for nav links */
}

.navbar-nav .nav-link:hover {
    color: #ffffff; /* Brighter hover effect */
}

.team-row {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between the team members */
    margin-top: 30px;
}

.team-member {
    position: relative;
    width: 200px;
    height: 220px;
}

.team-member img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid #444444;
}

.team-member .description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    padding: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.team-member:hover .description {
    opacity: 1;
}

/* Styling for headings and paragraphs */
h2 {
    color: #f0f0f0; /* Slightly brighter gray for headings */
}

p {
    color: #dcdcdc; /* Soft gray text for paragraphs */
}

/* Button styling */
.btn {
    background-color: #3e3e3e; /* Dark gray buttons */
    color: #ffffff; /* White text */
}

.btn:hover {
    background-color: #5e5e5e; /* Slightly lighter gray on hover */
}

/* Featurette images styling */
.featurette-image {
    width: 200px;
    height: 220px;
    object-fit: cover;
    border: 2px solid #444444; /* Subtle border around images */
}

/* Divider lines */
.featurette-divider {
    border-top: 1px solid #444444; /* Gray divider lines */
}

/* Footer styling */
footer {
    background-color: #2a2a2a; /* Dark gray footer */
    color: #f0f0f0; /* Light text */
    padding: 1rem 0;
}

footer a {
    color: #f0f0f0; /* Footer links in light gray */
}

footer a:hover {
    color: #ffffff; /* Footer links hover effect */
}

/* Adjust spacing between featurettes and committee members */
.featurette {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.featurette .col-md-6 {
    flex: 0 0 45%;
    max-width: 45%;
}

/* Committee section images */
.committee-image {
    width: 100px; 
    height: 100px; 
    border-radius: 50%; /* Circular images */
    object-fit: cover;
    border: 2px solid #444444;
}

/* Navbar custom style */
.navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.navbar-nav {
    display: flex;
    gap: 15rem; /* Adds spacing between Home and Documents */
}