body {
    background-color: #000000;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

h2 {
    text-align: center;
    color: #00f0ff; /* Neon Blue */
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 items per row */
    gap: 20px;
    padding: 20px;
    justify-items: center; /* Align the grid items to the center */
    max-width: 1200px;
}

.member {
    background-color: #1c2331;
    border: 7px outset #fd349c; /* Neon border */
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column; /* Stack the content vertically */
    transition: transform 0.3s ease; /* Hover effect */
    width: 300px; /* Width of each member card */
    min-height: 200px; /* Consistent height */
}

.member:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
    border-color: #fd349c; /* Neon on hover */
}

.member img {
    width: 100px; /* Avatar width */
    height: 100px; /* Avatar height */
    border-radius: 50%; /* Circular avatar */
    margin-bottom: 15px; /* Spacing below avatar */
    border: 3px solid #00f0ff; /* Neon blue border */
    transition: transform 0.3s ease; /* Hover effect */
}

.member img:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

.member-info {
    color: #ffffff;
    display: flex;
    flex-direction: column; /* Stack text vertically */
    align-items: center; /* Center-align text */
    text-align: center; /* Center-align text inside the container */
}

.member-info span {
    display: block;
    margin: 5px 0;
    color: #F535AA; /* Neon Pink for text */
}

.member-info strong {
    color: #00f0ff; /* Neon Blue for labels */
}