/* ===============================
   SECTION
================================ */
.bloom-devops-outcomes {
  background: #2D94ED;
}

.bloom-do-heading {
  text-align: center;
  color: #ffffff !important;
  font-family: ProximaNova-Bold;
  margin-bottom: 60px;
}

/* ===============================
   FLEX GRID (MAIN MAGIC)
================================ */
.bloom-do-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* 🔥 LAST ROW AUTO CENTER */
  gap: 28px;
}

/* ===============================
   CARD (3 per row desktop)
================================ */
.bloom-do-card {
  background: #ffffff;
  padding: 28px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  text-align: left;

  /* 3 cards per row */
  flex: 0 0 calc(33.333% - 19px);
  max-width: calc(33.333% - 19px);
}

/* ===============================
   ICON / TEXT
================================ */
.bloom-do-icon img {
  width: 27px;
  height: 27px;
  margin-bottom: 14px;
}

.bloom-do-title {
  color: #000;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 20px;
  font-family: ProximaNova-semiBold;
}

.bloom-do-text {
	color: #000;
	font-size: 16px;
	line-height: 1.4;
}

/* ===============================
   TABLET (2 per row)
================================ */
@media (max-width: 1024px) {
  .bloom-do-card {
    flex: 0 0 calc(50% - 14px);
    max-width: calc(50% - 14px);
  }
}

/* ===============================
   MOBILE (1 per row)
================================ */
@media (max-width: 640px) {
  .bloom-do-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .bloom-do-heading {
    font-size: 28px;
  }
}