/* Wrapper */
.kl-features-01 {
  width: 100%;
  padding: 60px 20px;
  background-color: F5F5F5;
}


/* Grid Layout */
.kl-features-01__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 cols desktop */
  max-width: 1400px;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .kl-features-01__grid {
    grid-template-columns: repeat(2, 1fr); /* stays 2 across on desktop */
  }
}

@media (max-width: 768px) {
  .kl-features-01__grid {
    grid-template-columns: 1fr; /* stack on mobile */
  }
}

/* Card */
.kl-features-01__card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
  margin: 0 !important;
}

.kl-features-01__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

/* Image/Icon */
.kl-features-01__image {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px sollid #f5f5f5;
  background: #f5f5f5;
}

.kl-features-01__image img,
.kl-features-01__image svg {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Preheader (colored label above title) */
.kl-features-01__preheader {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  display: block;
  color: #ff6a1a; /* adjust per card via module */
}

/* Title */
.kl-features-01__title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #000; !important;
}

/* Description */
.kl-features-01__desc {
  font-size: 14px !important;
  line-height: 1.6;
  font-weight: 400 !important;
  color: #666 !important;
}

/* Grid like kl-card-grid (4 cards total → 2x2 by default) */
.kl-features-01__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; /* spacing is controlled by wrapper padding */
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Card wrapper padding comes from inline style (spacing), normalize otherwise */
.kl-features-01__card-wrapper { padding: 26px; }

/* Card */
.kl-features-01__card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden; /* keep image corners rounded */
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* IMAGE: same behavior as kl-card-grid (cover the slot) */
/* IMAGE wrapper should define the space */

.kl-features-01__image--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}
.kl-features-01__image--icon svg { width: 64px; height: 64px; }

/* Content */
.kl-features-01__content { padding: 22px 22px 24px; }
.kl-features-01__title {
  color: #101010 !important;    /* override old white rule */
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0 10px;
}
.kl-features-01__desc { color: #555; line-height: 1.6; }

/* 4-card grid responsive behavior */
@media (min-width: 1000px) {
  .kl-features-01__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2x2 */
}
@media (max-width: 767px) {
  .kl-features-01__row { grid-template-columns: 1fr; } /* stack on mobile */
}

/* If a rogue indent appears on a specific card, nuke rogue margins */
.kl-features-01__card,
.kl-features-01__card-wrapper { margin: 0 !important; padding: 10px !important;}

/* Grey background for the entire card */
.kl-features-01__card {
  background: #f5f5f5;     /* light grey container background */
  border-radius: 12px;
  padding: 10px;
}

/* Image wrapper: adds border around the image */
.kl-features-01__image {
  border-radius: 10px;
  overflow: hidden;        /* keeps image corners rounded */
  margin-bottom: 18px;
}

/* Make the image fill the wrapper fully */
.kl-features-01__image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: cover;       /* crop if needed */
}