/* Team Section */

.page-content {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    background-size: 100% 100%;
}

.team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}

.team-section {
    padding-top: 10em;
}

.team-section h3 {
    font-size: 1.5em;
    color: #ffffff;
    text-align: center; /* Centers the text */
    width: 100%; /* Ensures the title takes up the full width */
    margin: 0 auto 1em auto; /* Centers the element and adds space below */
}

.member {
    text-align: center;
    width: 180px; /* Adjusted width to match larger portraits */
    position: relative;
}

.member img {
    width: 150px; /* Increased from 100px */
    height: 150px; /* Increased from 100px */
    border-radius: 50%; /* Make the image circular */
    object-fit: cover; /* Crop the image to fit the circular area */
    transition: transform 0.3s ease; /* Smooth scaling transition */
}

.member:hover img {
    transform: scale(1.1); /* Slightly enlarge on hover */
}
.member h3 {
    margin: 0.5em 0;
    font-size: 1.1em;
    color: #ffffff;
}

.member p {
    font-size: 0.9em;
    color: #ffffff;
}

.member a {
    color: #0066cc;
    text-decoration: none;
    font-size: 0.9em;
}

.member a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .team-section {
        padding-top: 5px;
    }
    
    .team-section h3 {
        font-size: 16px;
        color: #ffffff;
        text-align: center; /* Centers the text */
        width: 100%; /* Ensures the title takes up the full width */
        margin: 0 auto 1em auto; /* Centers the element and adds space below */
    }

    .member h3 {
        margin: 0.5em 0;
        font-size: 12px;
        text-align: center; /* Centers the text */
        color: #ffffff;
    }
    
    .member p {
        font-size: 12px;
        color: #ffffff;
        text-align: center; /* Centers the text */
    }
    
    .member a {
        color: #0066cc;
        text-decoration: none;
        font-size: 12px;
    }

    .member {
        text-align: center;
        width: 100px; /* Adjusted width to match larger portraits */
        position: relative;
    }
    
    .member img {
        width: 70px; /* Increased from 100px */
        height: 70px; /* Increased from 100px */
        border-radius: 50%; /* Make the image circular */
        object-fit: cover; /* Crop the image to fit the circular area */
        transition: transform 0.3s ease; /* Smooth scaling transition */
    }
}