@import url(https://fonts.googleapis.com/css?family=Raleway:200);
:root {
  --pic-size: max(8vw, 100px);
}
html {
  overflow-x: hidden;
}
h4,
.h4 {
  font-size: 2.1rem;
  font-weight: normal;
}

.about-container {
  width: 80vw;
  margin-top: 100px;
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem;
  font-weight: 100;
  margin: 0 auto;
}

.about-container {
  padding-left: 15px;
  padding-right: 15px;
}

.team_member {
  /* Center horizontally*/
  margin: 0 auto;
  min-width: max(25vw, 200px);
  border: 1px solid rgba(133, 133, 133, 0.15);
  background-color: #f7f7f7;
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.09);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.09);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.09);
  float: left;
  border-radius: 25px;
}
.teamimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: -100px;
  width: 170px;
  height: 170px;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.09);
  overflow: hidden;
  border: 0.8rem solid #2f42a8;
  border-radius: 50%;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.teamsocial {
  height: 48px;
  background-color: #ffffff;
  position: relative;
  bottom: -14px;
  left: 0;
  border-radius: 0px 0px 25px 25px;
}

.facebook-team {
  float: left;
  width: 48px;
  height: 48px;
  color: #d1cfcf;
  display: block;
  font-size: 30px;
  padding: 7px;
}

.twitter-team {
  float: left;
  width: 48px;
  height: 48px;
  color: #d1cfcf;
  display: block;
  font-size: 30px;
  padding: 7px;
}

.google-team {
  float: left;
  width: 48px;
  height: 48px;
  color: #d1cfcf;
  display: block;
  font-size: 30px;
  padding: 7px;
}

.pinterest-team {
  float: left;
  width: 48px;
  height: 48px;
  color: #d1cfcf;
  display: block;
  font-size: 30px;
  padding: 7px;
}

.facebook-team:hover {
  color: #3b5998;
}

.twitter-team:hover {
  color: #29b3e1;
}

.google-team:hover {
  color: #de5845;
}

.pinterest-team:hover {
  color: #c51c23;
}

.person-minidescription {
  margin-top: -20px;
  margin-bottom: -8px;
  padding: 10px 23px;
  font-size: 1.6rem;
  text-align: justify;
  text-align-last: left;
  /*height: 70px;  Add a fixed height here */
  overflow: hidden; /* Hide overflowing content */
}

.person-fulldescription {
  padding-top: 10px;
  margin-bottom: -8px;
  padding: 10px 23px;
  font-size: 1.3rem;
  text-align: justify;
  display: none;
  text-align-last: left;
  transition: all 0.9s ease 0s;
}

.title {
  text-align: center;
  margin: 16px;
}

.team_member {
  /*padding: 30px 0 40px;*/
  margin-bottom: 30px;
  background-color: #f7f7f7;
  text-align: center;
  position: relative;
}

.team_member_content {
  margin-bottom: 10px;
}

.team_member_picture {
  display: inline-block;
  height: var(--pic-size);
  width: var(--pic-size);
  margin-top: calc(var(--pic-size) / -2);
  margin-bottom: 10px;
  z-index: 2;
  position: relative;
}

.aboutus {
  padding-top: 100px;
}
.team_member:hover {
  background-color: #ffffff;
  color: #000000;
}

.team_member .team_member_picture::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #0041af;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.team_member .team_member_picture img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  transform: scale(1);
  transition: all 0.9s ease 0s;
}

.team_member:hover .team_member_picture img {
  box-shadow: 0 0 0 14px #ffffff;
  transform: scale(0.7);
}

.team_member .title {
  display: block;
  font-size: 15px;
  color: #4e5052;
  text-transform: capitalize;
}
/* ... Your existing CSS code ... */

/* ... Your existing CSS code ... */

.team_member .social {
  width: 100%;
  padding: 0;
  margin: 0;
  background: linear-gradient(
    135deg,
    #0041af 79.5%,
    #fff 79.51%,
    #fff 81%,
    #0041af 81.01%,
    #0041af 82.5%,
    #fff 82.51%,
    #fff 83.5%,
    #0041af 83.51%,
    #0041af 84%,
    #fff 84.01%,
    #fff 86%
  );
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 25px 25px;
  transition: all 0.5s ease 0s;
}

/* ... Your existing CSS code ... */

/* ... Your existing CSS code ... */

.team_member .social li {
  display: inline-block;
}

.team_member .social li a {
  display: block;
  padding: 10px;
  font-size: 17px;
  color: white;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}

.team_member .social li a:hover {
  color: #1369ce;
  background-color: #ffffff;
}

.flap-container {
  margin-top: 50px;
  border-radius: 0px 0px 25px 25px;
}

/* Add styles for the "Read more" section */
.card-flap {
  padding: 20px;
  font-size: 14px; /* Adjust font size as needed */
  line-height: 1.6;
  text-align: justify;
  background-color: #ffffff;
  border-radius: 0 0 25px 25px;
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  display: none; /* Initially hide the description */
}

.card-flap.active {
  display: block; /* Show the description when active */
}

/* Style the "Read more" link */
.read-more-link {
  margin-top: 10px;
  display: inline-block;
  font-size: 14px; /* Adjust font size as needed */
  font-weight: 600;
  color: #0041af;
  text-decoration: underline;
  cursor: pointer;
}
.read-more-btn {
  color: #0041af;
  border-radius: 25px;
  padding: 5px;
  margin: 10px;
  margin-top: 20px;
  font-size: 1.4rem;
  font-style: bold;
  font-weight: 600;
  text-decoration: none;
}
.read-more-btn:hover {
  color: #0a8354;
}

/* Add this CSS rule for card expansion */
.team_member.expanded .person-fulldescription {
  display: block;
}

/* Add this CSS rule to ensure proper card layout */
.cards {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  row-gap: 2em;
}

.team_member.card {
  flex: 1;
  margin: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
  max-width: calc(33.33% - 20px); /* Distribute cards evenly */
  transition: max-height 0.3s ease-in-out; /* Add transition effect */
  padding-bottom: 55px; /* reserve space for the pinned LinkedIn bar */
}
@media screen and (max-width: 556px) {
  .team_member.card {
    max-width: 100%; /* Distribute cards evenly */
  }
}

.person-fulldescription {
  transition: max-height 0.3s ease-in-out; /* Add transition effect */
}

.cancerribbon-container {
  position: absolute;
  left: 12%;
  margin-top: 20px;
  z-index: -1000;
}
.cancerribbon {
  width: max(6vw, 100px);
}
@media screen and (max-width: 979px) {
  .cancerribbon-container {
    position: absolute;
    left: 1%;
  }
}

@media screen and (max-width: 1280px) {
  .cancerribbon-container {
    position: absolute;
    left: 1%;
  }
}

.cards-executive {
  align-items: flex-start;
}