/* =====================================
   ICON BOX STYLING
===================================== */
.icon-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
}

.icon-box .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.icon-box .icon img {
  max-width: 90px;
  height: auto;
}

/* =====================================
   RESPONSIVE IMAGES
===================================== */
.img-fluid {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* =====================================
   CARD STYLING
===================================== */
.card.h-100 {
  height: auto !important;
  max-width: 90%;
  margin: auto;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb; /* Light border for visual structure */
  background-color: #fff;
}

/* Desktop adjustment */
@media (min-width: 992px) {
  .card.h-100 {
    max-width: 85%;
  }
}

/* Inner column padding */
.card .col-4,
.card .col-8 {
  padding: 0.75rem !important;
}

/* Heading style */
.card h4 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

/* Paragraph text */
.card p {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 0.75rem;
}

/* Button size */
.card .btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 4px;
}

/* Optional: give cards a slight hover lift */
.card.h-100:hover {
  transform: translateY(-2px);
  transition: transform 0.15s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* =====================================
   RESPONSIVE SPACING
===================================== */
.row.g-4 > [class^="col-"] {
  margin-bottom: 1rem;
}