body {
    padding: 0;
    margin: 0;
    
    ;
  }
  
  
  
  .teamWrapper {
      margin-top: 50px;
  }
  .container {
    --container: 1160px;
    max-width: var(--container);
    margin: auto;
  }
  .teamGrid {
      display: grid;
      grid-template-columns: 32.33% 32.33% 32.33%;
      column-gap: 6%;
      margin-top: 100px;
  }
  .avatar {
      position: absolute;
      left: 0;
      right: 0;
      top: -80px;
      text-align: center;
  }
  .teamcolinner {
      position: relative;
  }
  
  .teamcolinner {
      position: relative;
      border: 1px dashed #ddd;
      min-height: 100px;
      background: #fff;
      z-index: 9;
  }
  .teamcol {
      padding: 15px;
      background:#b0b30f1a;
      border-radius: 10px;
      position: relative;
      transition: transform 1s ease-in-out;
  }

  .teamcol  a {
    
    color: rgb(14, 14, 7);
    
}
  .teamcol:hover {
      transform: translateY(-30px);
      box-shadow: 0px 3px 10px 3px rgb(170 170 173 / 0.5);
      transition: transform 1s ease-in-out;
  }
  .teamcol:before {
      content: "";
      width: 50%;
      height: 50%;
      position: absolute;
      right: 0;
      top: 0;
      background: -webkit-linear-gradient(#ffbf00, #ffa000);
      border-top-right-radius: 10px;
      transition: width 1s ease-in-out;
  }
  .teamcol:after {
      content: "";
      width: 50%;
      height: 50%;
      position: absolute;
      left: 0;
      bottom: 0;
      background: -webkit-linear-gradient(#0052cc, #005fec);
      border-bottom-left-radius: 10px;
      transition: width 1s ease-in-out;
  }
  .teamcol:hover::before, .teamcol:hover::after {
      width: 100%;
      transition: width 1s ease-in-out;
  }
  .member-name {
      margin-top: 20px;
  }
  .member-info {
      padding: 10px 20px;
  }
  
  list-group {
      display: flex;
      flex-direction: column;
      padding-left: 0;
      margin-bottom: 0;
      border-radius: 0.25rem;
  
  }
  
  .list-group-item {
      position: relative;
      display: block;
      padding: 0.5rem 1rem;
      color: #560cf3;
      text-decoration: none;
      background-color: #fff;
      border: 1px solid rgb(241 229 229 / 13%);
  }
  
  .list-group-item a {
      color: #560cf3;
  
  }
  .list-group-item a:hover {
      text-decoration: underline;
    }
  
  /*Added 11-10-2022*/
    @media screen and (min-device-width: 320px)
    and (-webkit-min-device-pixel-ratio: 2) {
      .teamGrid {
          display: grid;
          grid-template-columns: 100%;
          column-gap: 6%;
          margin-top: 100px;
      }
      
    } 

    @media screen and (min-device-width: 320px)
    and (-webkit-min-device-pixel-ratio: 2) {
      .teamGrid {
          display: grid;
          grid-template-columns: 100%;
          column-gap: 6%;
          margin-top: 100px;
      }
      
    } 



    @media screen and (min-device-width: 360px)
    and (-webkit-min-device-pixel-ratio: 2) {
      .teamGrid {
          display: grid;
          grid-template-columns: 100%;
          column-gap: 6%;
          margin-top: 100px;
      }
      
    } 

    @media screen and (min-device-width: 600px)
    and (-webkit-min-device-pixel-ratio: 2) {
      .teamGrid {
          display: grid;
          grid-template-columns: 100%;
          margin-top: 100px;
      }
      
    } 
    @media screen and (min-device-width: 384px)
    and (-webkit-min-device-pixel-ratio: 2) {
      .teamGrid {
          display: grid;
          grid-template-columns: 100%;
          margin-top: 100px;
      }
      
    } 

    @media (max-device-height: 640px) and (max-device-width: 384px)
and (-webkit-max-device-pixel-ratio: 3) {

    .teamGrid {
        display: grid;
        grid-template-columns: 100%;
        margin-top: 100px;
}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .teamGrid {
        display: grid;
        grid-template-columns: 32.33% 32.33% 32.33%;
        column-gap: 3%;
        margin-top: 100px;
    }
   
    
  }