#pk_flex_content .flex_layout.logos_grid .heading{
    text-align: center;
    margin-bottom: 50px;
}


/* Base styles */
#pk_flex_content .flex_layout.logos_grid .logos-wrapper {
  display: grid;
  gap: 2rem;
  padding: 1rem;
}

#pk_flex_content .flex_layout.logos_grid .logos-wrapper-featured {
  display: grid;
  gap: 2rem;
  padding: 1rem;
}

/* Mobile: 2 logos per row */
@media (max-width: 767px) {
  #pk_flex_content .flex_layout.logos_grid .logos-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  
  #pk_flex_content .flex_layout.logos_grid .logos-wrapper-featured {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Tablet: 3 logos per row */
@media (min-width: 768px) and (max-width: 1023px) {
  #pk_flex_content .flex_layout.logos_grid .logos-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  
  #pk_flex_content .flex_layout.logos_grid .logos-wrapper-featured {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 4 logos per row */
@media (min-width: 1024px) {
  #pk_flex_content .flex_layout.logos_grid .logos-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
  
  #pk_flex_content .flex_layout.logos_grid .logos-wrapper-featured {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Set a fixed height and responsive behavior for each logo */
#pk_flex_content .flex_layout.logos_grid .logo-single {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px; /* Make all logos equal in height */
  padding: 1rem;
  box-sizing: border-box;
}

#pk_flex_content .flex_layout.logos_grid .logos-wrapper-featured .logo-single {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px; /* Make all logos equal in height */
  padding: 1rem;
  box-sizing: border-box;
}

/* Ensure the images scale to fit the container without stretching */
#pk_flex_content .flex_layout.logos_grid .logo-single img {
  max-height: 80%;
  max-width: 90%;
  height: auto;
  width: auto;
  object-fit: contain;
}