/* Navigation Icon Style */
.carousel-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    padding-left: 10px; /* Add padding to the left for spacing */
}

.nav-icon {
    font-size: 24px;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
    color: #007bff; /* Set the default color of the icon */
}

.nav-icon:hover {
    color: #0056b3; /* Darken the color on hover */
}

/* Custom styles for Member Carousel */
#boardMemberCarousel {
    display: flex;
    justify-content: flex-start; /* Align items to the start */
    align-items: center; /* Align items vertically center */
    position: relative;
}

.carousel-images {
    display: inline-flex; /* Ensure images and icon are displayed inline */
    white-space: nowrap; /* Prevent wrapping to keep images in a single line */
    width: 50%; /* Set to 60% of the container width */
    overflow-x: auto; /* Allow horizontal scrolling if images overflow */
    align-items: center;
}

.carousel-images .member-image-wrapper {
    display: inline-flex; /* Display images inline */
    width: 100%; /* Each image wrapper takes 100% of its container */
    margin-right: 10px; /* Space between images */
    justify-content: space-around;
}

.carousel-images img {
    width: 100%; /* Make the image take up the full width of its wrapper */
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
    border: 3px solid transparent;
    opacity: 0.5; /* Fade out the images by default */
}

.carousel-images img.active {
    opacity: 1; /* Highlight the selected image */
    border-color: #007bff; /* Add a border color for the selected image */
    transform: scale(1.05); /* Slight zoom for the selected image */
}

.carousel-description {
    width: 50%; /* Set to 40% of the container width */
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 400px; /* Ensure consistent height for the description area */
}

.description-item {
    display: none;
}

.description-item.active {
    display: block;
    color: #fff;
}

label.role-position {
    margin-bottom: 20px;
}

div#member-name-role h3, div#member-name-role label {
    display: block;
}

div#member-name-role {
    width: 100%;
}