.ourProduct {
  padding: 0.8rem 5vw;
  margin: auto;
}

.ourProduct h2 {
  margin-bottom: 10px;
}

/* ✅ Use Grid for consistent columns */
.ProductCatelog {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 columns on large screens */
  gap: 10px;
}

.CatelogItem {
  text-align: center;
  background-color: #3cb3721f;
  padding: 0.8rem 0;
}

.catelogImg img {
  width: 150px;
  max-width: 100%;
}

.catelogCaption {
  text-align: center;
}

.ourServices {
  padding: 3vw 5vw;
  min-height: 300px;
  margin: auto;
}

/* ✅ Grid layout for services too */
.serviceCatelog {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.serviceItem {
  text-align: center;
  background-color: #3cb3721f;
  padding: 0.8rem 0;
}

.serviceImg img {
  width: 80px;
  max-width: 100%;
}

.serviceHeading {
  font-size: 16px;
  text-align: center;
}

.serviceDescription {
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

/* 🌐 Responsive Breakpoints */

/* Medium Devices (≤ 1024px): 3 items per row */
@media (max-width: 1024px) {
  .ProductCatelog,
  .serviceCatelog {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Small Devices (≤ 768px): 2 items per row */
@media (max-width: 768px) {
  .ProductCatelog,
  .serviceCatelog {
    grid-template-columns: repeat(2, 1fr);
  }

  .catelogImg img {
    width: 120px;
  }

  .serviceImg img {
    width: 70px;
  }

  .serviceHeading {
    font-size: 15px;
  }

  .serviceDescription {
    font-size: 13px;
  }
}

/* Extra Small Devices (≤ 480px): 1 item per row */
@media (max-width: 300px) {
  .ProductCatelog,
  .serviceCatelog {
    grid-template-columns: 1fr;
  }

  .catelogImg img {
    width: 100px;
  }

  .serviceImg img {
    width: 60px;
  }

  .serviceHeading {
    font-size: 14px;
  }

  .serviceDescription {
    font-size: 12px;
  }
}