/* Global reusable highlight card component
   Requirements (exact):
     - Background: #ffffff
     - Border: 3px solid #16A34A
     - Border-radius: 24px
     - Padding: 32px (vertical) 36px (horizontal)
     - box-shadow: 0 20px 60px rgba(22, 163, 74, 0.15)
     - No gradients inside the card
     - Subtle hover interaction (translateY(-4px) and slightly stronger glow)
     - Icon container: 48x48, radius 14px, bg #EEF2FF, center aligned, margin-bottom 20px
*/

.highlight-box {
  background: #ffffff; /* pure white */
  border: 3px solid #fd7e14; /* exact green */
  border-radius: 24px; /* large smooth corners */
  padding: 32px 36px; /* vertical | horizontal */
  box-shadow: 0 20px 60px rgb(253, 126, 20); /* soft ambient green glow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth and professional */
  color: inherit;
  text-decoration: none; /* if used on anchors */
  /* Ensure no internal gradients leak in */
  background-image: none !important;
}

/* Hover (optional interaction) */
.highlight-box:hover,
.highlight-box:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 26px 78px rgba(22, 163, 74, 0.18); /* slightly stronger but still subtle */
}

/* Icon container */
.highlight-box__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #EEF2FF; /* exact color */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #fd7e14; /* icon tint */
  flex-shrink: 0;
}

/* Typography utilities inside the box */
.highlight-box h3 {
  margin: 0 0 8px 0;
  color: #0B2641; /* dark heading color for contrast */
}

.highlight-box p,
.highlight-box li,
.highlight-box .card-sub {
  margin: 0;
  color: #475569; /* muted body color */
  font-size: 14px;
}

/* Ensure anchor buttons or links inside keep the look clean */
.highlight-box .btn-link { margin-top: 12px; display: inline-block; }

/* Small responsive tweak to preserve padding on small screens */
@media (max-width: 480px) {
  .highlight-box { padding: 24px 20px; }
}