body {
     
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px 20px;
    } 
h1 {
      margin-bottom: 40px;
      font-size: 2.5rem;
      color: #333;
    }

    .card-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      width: 100%;
    }

    .card {
     
      border-radius: 16px;
      overflow: hidden;
      width: 250px;
      text-align: center;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
    }

    .card:hover {
      transform: scale(1.03);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    .card img {
      width: 100%;
      object-fit: cover;
    }

    .card h2 {
      font-size: 1.4rem;
      padding: 5px;
      color: #fff;
    }
    
@media screen and (max-width: 992px) {
 .card {
  width:180px;
  }
    .card-container {
    margin-top:50px;
    }
}

@media screen and (min-width: 993px) {
 /*.card {
  width:180px;
  }*/
    .card-container {
     flex-direction: row;
     margin-top: 15%;
    }
}