.aa{
    border: 3px solid black;
    width: 200px;   /* Adjust the width */
    height: 200px;  /* Adjust the height */
    border-radius:    50%; 
    /* object-fit: cover;   */
}

.acard{
    border: none;
    align-items: center !important ;
    text-align: center;
}

.bb{
    text-decoration: underline;
}

.xx{
    text-decoration: underline;
}
.vv{
    width: 320px;
    height:350px;
}

.ard-container {
    display: flex; /* Aligns the cards horizontally */
    gap: 20px; /* Adds space between the cards */
    justify-content: center; /* Centers the cards horizontally */
    margin-top: 20px;
  }

  .ard {
    width: 300px; /* Set the width of each card */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .ard img {
    width: 100%; /* Makes the image fill the card width */
    border-bottom: 1px solid #ccc;
  }

  .ard-body {
    padding: 10px;
  }

  .ard-title {
    font-size: 1.2em;
    font-weight: bold;
  }

  .ard-text {
    font-size: 0.9em;
    color: #555;
  }






  /* Adjust the width and height of the images */
.card-img-top {
    width: 100%; /* Make the images take up the full width of their container */
    height: 400px; /* Set a fixed height for the images (adjust as needed) */
    object-fit: cover; /* Ensure the images are scaled correctly without distortion */
    transition: 4s;

  }
  .card-img-top:hover{
    transform: scale(1.2);
    transition: 3s;
    z-index: 0;
  }
  
  /* Optional: Adjust the card container size if needed */
  .ard {
    width: 350px; /* Increase the width of the container */
    margin: 10px; /* Add some space between containers */
    border-radius: 10px; /* Optional: add rounded corners to the container */
    overflow: hidden; /* Ensures the content doesn't overflow the container */
  }