/*==========================================
  Why Choose Us - Kids Section (custom)
==========================================*/
.hk-why {
  position: relative;
  padding: 20px 0 100px;
  overflow: hidden;
}

.hk-why__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}

.hk-why__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(140, 191, 65, 0.14);
  color: #4e7a1f;
  font-family: var(--vs-body-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 18px;
}

.hk-why__title {
  font-family: var(--vs-title-font);
  font-weight: 800;
  font-size: clamp(1.9rem, 2.6vw + 0.8rem, 2.8rem);
  line-height: 1.25;
  color: #063173;
  margin-bottom: 14px;
}

.hk-why__desc {
  font-family: var(--vs-body-font);
  font-size: 16px;
  color: #56607a;
  line-height: 1.7;
}

.hk-why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.hk-why__card {
  position: relative;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 34px 26px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(6, 49, 115, 0.08);
  border: 2px solid #1a2352;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hk-why__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(6, 49, 115, 0.14);
}

/* Each card gets its own accent color on hover */
.hk-why__grid .hk-why__card:nth-child(1):hover { border-color: #2196c9; box-shadow: 0 18px 34px rgba(33, 150, 201, 0.3); }
.hk-why__grid .hk-why__card:nth-child(1):hover .hk-why__icon i { color: #2196c9; }

.hk-why__grid .hk-why__card:nth-child(2):hover { border-color: #f5b52c; box-shadow: 0 18px 34px rgba(245, 181, 44, 0.3); }
.hk-why__grid .hk-why__card:nth-child(2):hover .hk-why__icon i { color: #f5b52c; }

.hk-why__grid .hk-why__card:nth-child(3):hover { border-color: #e8558d; box-shadow: 0 18px 34px rgba(232, 85, 141, 0.3); }
.hk-why__grid .hk-why__card:nth-child(3):hover .hk-why__icon i { color: #e8558d; }

.hk-why__grid .hk-why__card:nth-child(4):hover { border-color: #17b2a3; box-shadow: 0 18px 34px rgba(23, 178, 163, 0.3); }
.hk-why__grid .hk-why__card:nth-child(4):hover .hk-why__icon i { color: #17b2a3; }

.hk-why__grid .hk-why__card:nth-child(5):hover { border-color: #f0762c; box-shadow: 0 18px 34px rgba(240, 118, 44, 0.3); }
.hk-why__grid .hk-why__card:nth-child(5):hover .hk-why__icon i { color: #f0762c; }

.hk-why__grid .hk-why__card:nth-child(6):hover { border-color: #8c5fd4; box-shadow: 0 18px 34px rgba(140, 95, 212, 0.3); }
.hk-why__grid .hk-why__card:nth-child(6):hover .hk-why__icon i { color: #8c5fd4; }

.hk-why__grid .hk-why__card:nth-child(7):hover { border-color: #4e9a3f; box-shadow: 0 18px 34px rgba(78, 154, 63, 0.3); }
.hk-why__grid .hk-why__card:nth-child(7):hover .hk-why__icon i { color: #4e9a3f; }

.hk-why__grid .hk-why__card:nth-child(8):hover { border-color: #2196c9; box-shadow: 0 18px 34px rgba(33, 150, 201, 0.3); }
.hk-why__grid .hk-why__card:nth-child(8):hover .hk-why__icon i { color: #2196c9; }

.hk-why__icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #ffffff;
  margin: 0 auto 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.hk-why__card-title {
  font-family: var(--vs-title-font);
  font-weight: 700;
  font-size: 19px;
  color: #1c2b52;
  margin-bottom: 10px;
}

.hk-why__card-desc {
  font-family: var(--vs-body-font);
  font-size: 14.5px;
  color: #6c7691;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 991px) {
  .hk-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .hk-why__grid {
    grid-template-columns: 1fr;
  }

  .hk-why__card {
    padding: 28px 22px;
  }
}