.bg-dark {
    background-color: #333;
    color: #fff;
 
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   
  }

  .col-lg-4 {
    flex: 1 0 calc(25% - 20px); 
    box-sizing: border-box;
    margin-bottom: 20px;
  }

  .col-lg-4 img {
    width: 100%;
    height: 200px; 
    object-fit: cover; 
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }


  .col-lg-4 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, opacity 0.3s ease, border 0.3s ease; /* Added transition for the border */
    border: 4px solid transparent; /* Initial transparent border */
  }
  
  .col-lg-4 img:hover {
    transform: scale(1.05);
    opacity: 0.9;
    border-color: #ffcc00; /* Change border color on hover */
  }
  

  @media (max-width: 1200px) {
    .col-lg-4 {
      flex: 1 0 calc(33.333% - 20px); 
    }
  }

  @media (max-width: 768px) {
    .col-lg-4 {
      flex: 1 0 calc(50% - 20px); 
    }
  }

  @media (max-width: 576px) {
    .col-lg-4 {
      flex: 1 0 calc(100% - 20px); 
    }
  }