.d-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .container1 {
    max-width: 90%;
    margin: 3rem auto;
    font-family: Roboto;
    column-count:4;
  }
  .containerupdate{
    max-width: 90%;
    margin: 3rem auto;
    font-family: Roboto;
    display: grid;
    grid-template-rows: 3;
    grid-template-columns: 4; 
    gap: 28px;
  }
  .container1 .card {
    color: #fff;
    background: rgba(69, 65, 65, 0.2);
    box-shadow: 0 0 20px #5c5959;
    width: 14rem;
    height: 22rem;
    border-radius: 8px;
    overflow: hidden;
    margin: 28px;
  }
  
  .container1 .card .card-img .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  
  .card-img{
    height: 17rem;
    overflow: hidden;
  }
  
  
  .card-img img:hover {
    transform: scale(1.1); 
  }
  
  .card-img img{
    transition: all .5s ease-in-out;
  
  }
  
  
  .container1 .card .card-img img {
    width: 100%;
    height: 17rem;
    object-fit: cover;
    object-position: top;
  }
  .container1 .card .card-body {
    padding: 1rem;
  }
  .container1 .card .card-body h3 {
    margin: 0;
  }
  .container1 .card .card-body small {
    opacity: 0.6;
    margin-bottom: 0;
  }
  .support-link {
    color: white;
    text-decoration: none;
    font-size: 14px;
    margin-left: 1rem;
  }
  
  @media only screen and (max-width: 500px) {
    .container1 {
      max-width: 80%;
      margin:  auto;
      padding: 14px;
      font-family: Roboto;
      column-count: 1;
  }
  
  
  .container1 .card {
    color: #fff;
    background: rgba(69, 65, 65, 0.2);
    box-shadow: 0 0 20px #5c5959;
    width: 14rem;
    height: 22rem;
    border-radius: 12px;
    margin: 17px;
    overflow: hidden;
  }
  }
  .social-media:hover{
    cursor: pointer;
  }
  
    
       .social-media {
        margin-left: 167px;
        margin-top: -31px;
        }

        .ba2021{
            text-align: center;
            font-family: 'Times New Roman', Times, serif;
            
            
        }
    .nametext{
            margin: auto;
        }
        @media only screen and (min-width: 500px) and (max-width: 900px)
        {
            .container1 {
                max-width: 80%;
                margin: 9rem auto;
                padding: 14px;
                font-family: Roboto;
                column-count: 2;
            }
        }
        @media only screen and (min-width: 900px) and (max-width: 1024px)
        {
            .container1 {
                max-width: 90%;
                margin: 9rem auto;
                padding: 14px;
                font-family: Roboto;
                column-count: 2;
            }
            .container1 .card {
                color: #fff;
                background: rgba(69, 65, 65, 0.2);
                box-shadow: 0 0 20px #5c5959;
                width: 18rem;
                height: 22rem;
                border-radius: 8px;
                overflow: hidden;
                margin: 28px;
              }
        }