/* Grid for products */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 350px); /* 4 products per row */
    gap: 20px; /* Space between products */
    margin-bottom: 40px;
  }
  a {
    text-decoration: none;
    color: inherit; /* Optional: keep text color consistent */
  }
  #product1 {
    text-align: center;
  }
  
  #product1 .pro-container {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    flex-wrap: wrap;
  }
  
  #product1 .pro {
    width: 23%;
    min-width: 250px;
    padding: 10px 12px;
    /*padding format is first top&bottom then left&right*/
    border: 1px solid #cce7d0;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 20px 20px 30px rgb(0, 0, 0, 0.3);
    margin: 15px 0;
    transition: 0.2s ease;
    position: relative;
  }
  
  #product1 .pro:hover {
    box-shadow: 20px 20px 30px rgb(0, 0, 0, 0.3);
  }
  
  #product1 .pro img {
    width: 100%;
    border-radius: 20px;
  }
  
  #product1 .pro .des {
    text-align: start;
    padding: 10px 0;
  }
  
  #product1 .pro .des span {
    color: #606060;
    font-size: 12px;
  }
  
  #product1 .pro .des h5 {
    padding-top: 7px;
    color: #1a1a1a;
    font-size: 14px;
  }
  
  #product1 .pro .des i {
    font-size: 12px;
    color: rgb(243, 181, 25);
  }
  
  #product1 .pro .des h4 {
    padding-top: 7px;
    font-size: 15px;
    font-weight: 700;
    color: #088178;
  }
  
  #pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  
  #pagination a {
    text-decoration: none;
    background-color: #088178;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    font-weight: 600;
    margin: 0 10px;
  }
  
  #pagination a i {
    font-size: 16px;
    font-weight: 600;
  }
  
  /* Responsive behavior */
  @media (max-width: 768px) {
    .product-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 products per row for smaller screens */
    }
  }
  
  @media (max-width: 480px) {
    .product-grid {
      grid-template-columns: 1fr; /* 1 product per row for mobile screens */
    }
  }