/*slide up*/
    .slide-up {
      transform: translateY(100%);
      opacity: 0;
      transition: all 1.0s ease-out;
    }
    .slide-up.show {
      transform: translateY(0);
      opacity: 1;
      animation: slideUp 2s ease-in-out 0.00001s forwards;
    }

    @keyframes slideUp {
      0% {
        opacity: 0;
        transform: translateY(100%);
      }
      100% {
        opacity: 1;
        transform: translateY(0%);
      }
    }

header {
  height: 125px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
header div {
  display: flex;
  justify-content: center;
}
header div h1 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: blue;
}

#hero {
  margin: 0px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: 2px solid green;
}
#hero-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
#hero-img img {
  width: 200px;
  border: 2px solid #D5D5D5;
  border-radius: 20%;
}
#hero-img span {
  width: 20px;
  height: 20px;
  position: relative;
  top: 30px;
  right: 10px;
  background: #5EDD06;
  border-radius: 50%;
  border: 2px solid #D5D5D5;
}
#hero-text {
  width: 600px;
  border: 2px solid red;
}

 /* Teams */
 #theTeam {
   margin: 80px 0px;
 }
 .teams-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 30px;
 }
 .team-card {
   background: white;
   border-radius: 8px;
   padding: 25px 25px 20px 25px;
   box-shadow: 0 5px 15px rgba(0,0,0,0.05);
   border: 1px solid var(--light-gray);
   overflow: hidden;
   transition: transform 0.3s, box-shadow 0.3s;
 }
 .team-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0,0,0,0.2);
 }
 .team-member {
   display: flex;
   align-items: center;
 }
 .member-id {
   padding: 0px 0px 0px 10px;
 }
 .member-avatar {
   height: 100px;
   width: 100px;
   overflow: hidden;
 }
 .member-avatar img {
   height: 100px;
   overflow: hidden;
   border-radius: 0px 10px 10px 10px;
 }

 .member-connect {
   display: flex;
   justify-content: center;
   margin-top: 15px;
 }
 
 .icon {
   color: #515151;
   font-size: 22px;
   line-height: 0;
   margin-right: 15px;
   transition: transform 0.5s, box-shadow 0.3s;
 }
 .icon:hover {
   color: #000;
   transform: translateY(-8px);
   font-size: 30px;
 }