<style>
  /* Main Container */
  .icon-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Ensures even spacing */
    gap: 10px; /* Reduce space between items */
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
  }

/* Adjust wrapper spacing */
.icon-grid-item-wrapper {
    width: calc(33.333% - 10px); /* Ensures three columns with reduced spacing */
    box-sizing: border-box;
}

  /* Row Wrapper */
  .icon-grid-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 50px;
  }

  /* Grid Item */
  .icon-grid-item {
    flex: 1;
    max-width: 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all content */
    justify-content: center;
  }

  .icon-grid-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
  }

  /* Circular Icon Background */
  .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f7f9fc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: background-color 0.3s ease;
  }

  .icon-grid-item:hover .icon-circle {
    transform: scale(1.1); /* Slightly increase size */
    background-color: #45d62e; /* Fill with green */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Enlarge the image inside the circle on hover */
.icon-grid-item:hover .icon-circle img {
    transform: scale(1.1); /* Slightly increase size */
    transition: transform 0.3s ease;
}

  /* Icon Image */
  .icon-circle img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
  }

  /* Title Styling */
  .icon-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    text-align: center;
  }

  /* Responsive: Two items per row on tablets */
  @media (max-width: 768px) {
    .icon-grid-row {
      flex-wrap: wrap;
      gap: 20px;
    }

    .icon-grid-item {
      flex: 1 1 45%;
      max-width: 45%;
    }
  }

  /* Responsive: One item per row on mobile */
  @media (max-width: 480px) {
    .icon-grid-item {
      flex: 1 1 100%;
      max-width: 100%;
    }
    .icon-grid-row{
      padding-top: 10px;
      padding-bottom: 10px
  }
</style>
