/* Benefits Cards Widget Styles */

.oc-benefits {
  margin: 3rem auto; /* my-12 */
  border: 1px solid #D1D5DB; /* border-gray-300 */
  border-radius: 0.5rem; /* rounded-lg */
  background-color: #ffffff; /* bg-white */
  overflow: hidden;
}

/* Inner flex container */
.oc-benefits__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem; /* gap-10 (40px) */
  padding: 2.5rem 2rem; /* py-10 px-8 */
}

@media (min-width: 768px) {
  .oc-benefits__inner {
    flex-direction: row; /* md:flex-row */
    align-items: center; /* md:items-center */
    justify-content: space-between;
    gap: 0; /* md:gap-0 */
  }
}

/* Individual card */
.oc-benefits__card {
  display: flex;
  align-items: center; /* center icons vertically */
  gap: 1.5rem; /* gap-6 (24px) */
}

/* Make icon wrapper stretch and center icon */
.oc-benefits__icon {
  display: flex;
  align-items: center;
}

.oc-benefits__icon img {
  width: 3.5rem; /* w-14 (56px) */
  height: 3.5rem; /* h-14 (56px) */
  /* Ensure icon keeps aspect ratio and can grow if needed */
  height: auto;
  max-height: 100%;
}

/* Title */
.oc-benefits__title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 700; /* font-bold */
  text-transform: uppercase;
  color: #1F2937; /* text-gray-900 */
  margin-bottom: 0.25rem; /* mb-1 (4px) */
}

@media (min-width: 768px) {
  .oc-benefits__title {
    font-size: 1.25rem; /* md:text-xl */
  }
}

/* Description */
.oc-benefits__text {
  font-size: 0.875rem; /* text-sm */
  color: #4B5563; /* text-gray-600 */
}

@media (min-width: 768px) {
  .oc-benefits__text {
    font-size: 1rem; /* md:text-base */
  }
}