.card p {
    margin: 0;
    padding: 0;
  }

  .card {
    position:relative;
    width: 240px;
    height: 220px;
    border-radius: 10px;
    box-shadow: 0px 5px 2px black;
    transition: 0.4s;
    padding: 20px 6px;
    cursor: pointer;
    margin: 0;
  }

  .card:hover {
    height: 280px;
  }

  .imgbox {
    position: relative;
    width:180px;
    height:220px;
    z-index: 99;
    margin-left: 23px;
    align-items: center;
    padding: 0;
  }

  .Designation {
    position: relative;
    transform: translateY(-70px);
    z-index: 99;
    margin: 0;
    padding: 0;
   font-size: 1rem;
  
   
  }


  .card img {
    border-radius: 10px;
    box-shadow: 0px 5px 20px black;
    transform:translateY(-80px);
  }

  
  .content {
    font-size: 1.1rem;
    opacity: 0;
    margin-top: 5px;

  
  }

  .card:hover > .content {
    opacity: 1;
    transform: translateY(-70px);
  }
  
.row {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap: 10px;
 height: auto;
}


  .col-1 {
      margin-top: 50px;
      margin-bottom:50px;
     /* border: 2px solid rgb(12, 211, 12);*/
      display: grid;
   
    

  }

  /*.col-1 {
    border: 2px solid rgb(12, 211, 12);
  }*/


  @media screen and (max-width:400px) {
    
    .row{
      margin-left: 0;
      padding-left: 0;
    }

    .col-1 { 
      margin-left: 10vw;
      padding-left: 0;
      justify-content: left;

    }

    .card { 
      width: 60vw;
      height: 67vw;  
    }


    .imgbox {
      width: 45vw;
      margin-left: 6vw;
    }

    .Designation {
      font-size: 4vw;
      
     }
    .content {
      font-size: 4.2vw;
    }

    

    
  

  }


  @media screen and (max-width:500px) {
    
    #mbheading  {
      font-size:3vw;
    }


  }

  @media screen and (min-width:500px) and (max-width:800px) {
    #mbheading  {
      font-size:3vw;
    
    }
  }