* { margin: 0; padding: 0; box-sizing: border-box; }

#people{

    padding-top: 70px;
    padding-bottom: 100px;
    height: auto;
    

    h1{text-align: center;
        text-decoration: underline;
        font-size: 30px;
    margin-bottom: 50px;}
}
.member-list {
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 35px;
    }

    


    .member-card {
      overflow: hidden;  
      display: flex;
      align-items: center;
      background-color: #ffffff;
      border-radius: 100px;
      padding: 10px;
      transition: transform 0.2s ease, box-shadow 0.3s ease;
      position: relative;
      z-index: 0;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }
    .member-card:hover {
      overflow: hidden;  
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
    }
    
    /* Removed the member-card::before pseudo-element as the image now has the gradient border */

    .member-info {
      display: flex;
      align-items: center;
      flex-grow: 1;
      padding-left: 20px;
    }
    /* This is the container for the image with the gradient border */
    .member-image {
        width: 150px;
        height: 150px;
        border-radius: 100%;
        padding: 5px; /* Creates the border space */
        background: #004D40;
        margin-right: 20px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .member-image img {
      width: 100%;
      height: 100%;
      border-radius: 50%; /* Ensures the image is a circle */
      object-fit: cover;
      display: block;
    }

    .member-details {
      text-align: left;
    }
    .member-details h3 {
      font-size: 1.30rem;
      font-weight: 600;
      color: var(--title-color);
      margin: 0;
    }

    .member-details p {
      font-size: 1rem;
      color: var(--subtitle-color);
      margin: 0;
    }

    /* NEW: The dark green circular slider that appears on hover */
    .member-details-hover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #004D40;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        padding-left: 160px;
        box-sizing: border-box;
        transform: translateX(-100%);
        transition: transform 0.4s ease-in-out;
        z-index: -1; 
        /* Place it below the image but above the card background */
          display: flex;
        flex-direction: column;

        i{color: #ffffff;scale: 1.2;margin: 7px;    }
    }

    .member-details-hover-design {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #004d4086;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
        transform: translateX(-100%);
        transition: transform 0.2s ease-in-out;
        z-index: -1; /* Place it below the image but above the card background */
      
    }    


    /* NEW: The hover effect to reveal the slider */
    .member-card:hover .member-details-hover {
        transform: translatex(0);
    }
    
    .member-details-hover 
    p {
        font-size: 1.1rem;
        color: #ffffff;
        text-align: center;
        opacity: 0;
        transition: opacity 0.3s ease 0.2s; /* Delay the text fade-in */
    }
    

    .member-card:hover .member-details-hover p {
        opacity: 1;
    }
    /* NEW: Adjust the z-index of the member-info on hover so it appears above the slider */
    .member-card:hover .member-info {
        color: #ffffff;
        z-index: -2;
    }