.profile-wrapper {
      position: relative;
      right:15px;
    width: 100%;
      max-width: 350px;
      margin: auto;
    margin-top:30px;
    padding:15px;
      transition: transform 0.3s ease;
 
    }

    .profile-image {
      width: 100%;
        margin: 12px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      overflow: hidden;
/*      border: 10px solid #00a3e0;*/
      transition: filter 0.3s ease;
    }

    .profile-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
    }

    .name-circle {
      position: absolute;
      bottom: 40px;
      right: 15px;;
      transform: translate(30%, 30%);
      background-color:#00A3DE;
      color: white;
      border: 6px solid white;
      border-radius: 50%;
     min-width: 8.5em;
      aspect-ratio: 1 / 1;
        padding: 0.5em;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
        font-family: "Comfortaa";
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 700;
	line-height: 1.4;
    letter-spacing: 0.04em;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }


.person-card{
    color:white;
      background-color:#0077B2;
    padding-top:10px;
    padding-left: 20px;
    padding-right: 25px;
    padding-bottom:15px;
    margin: 10px;
    min-height: 750px;
}
 .person-text {
      margin-top: 1.6rem;
      text-align: center;
    }
    .person-card:hover .profile-image {
      filter: brightness(1.09);transform: scale(1.01);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .person-card:hover .name-circle  {
      transform: translate(30%, 30%) scale(1.02);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }