.kt_header{
  text-align:center;
  margin-bottom: 36px;
  margin-top: 150px;
}

.kt_title{
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: .4px;
  margin: 0 0 20px;
  font-weight: 500;
  color: #000;
}

.kt_subtitle{
  margin: 0 auto;
  max-width: 860px;
  color: #737373;
  font-size: clamp(14px, 1.25vw, 18px);
  margin-bottom: 100px;
}

.kt_grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 18px;
  margin-bottom: 60px;
  column-gap: 0px;
}

/* 6 cards, 3 columns on desktop, 2 on tablet, 1 on mobile */
.kt-card{
  grid-column: span 3;
  background:rgba(194, 217, 255, 0.12);
  border-radius: 30px;
  padding: 16px 16px 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.05);
  transition: transform 3s ease, background 1.2s ease, border-color 3s ease, box-shadow 1s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: 320px;
  margin-inline: auto;
  width: 100%;
}

.kt-card::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(240px 120px at 16% -10%, rgba(59,130,246,.18), transparent 60%);
  opacity:.65;
  z-index:0;
}

.kt-card:hover{
  transform: translateY(-3px);
  background: radial-gradient(circle at 70% 30%, rgba(128, 0, 128, 0.1), transparent 40%),
                        radial-gradient(circle at 30% 70%, rgba(0, 0, 255, 0.1), transparent 40%);
  border-color: rgba(59,130,246,.25);
  box-shadow: 0 10px 18px rgba(0,0,0,.20);
}

.kt-card__icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #cfe0ff;
  font-size: 26px;
  margin-bottom: 14px;
  position: relative;
  z-index:1;
  border: 1px solid rgba(59,130,246,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  transition: background 1s ease, 
    transform 1.5s ease, 
    box-shadow 0.3s ease;
}

.kt-card:hover .kt-card__icon i{
  color: #ffffff !important;
}

.kt-card:hover .kt-card__icon {
  background: #0a69e7 !important;
  transform: scale(1.1) rotate(5deg); /* subtle zoom + tilt */
  box-shadow: 0 8px 20px rgba(10, 105, 231, 0.4); /* glowing shadow */
}

.kt-card__title{
  font-size: 18px;
  margin: 2px 0 8px;
  font-weight: 700;
  letter-spacing:.2px;
  position: relative;
  z-index:1;
  color: #000;
}

.kt-card__desc{
  margin: 0;
  color: #737373;
  font-size: 15px;
  line-height: 1.55;
  position: relative;
  z-index:1;
}

/* Responsiveness */
@media (max-width: 992px){
  .kt-card{ grid-column: span 6; }
}

@media (max-width: 640px){
  /* spacing between cards on mobile */
  
  .kt_grid{
    gap: 10px;          /* adjust as needed: 8–12px works well */
    margin-top: 10px;   /* optional: tighter top spacing */
    margin-bottom: 32px;/* optional: tighter bottom spacing */
  }

  .kt-card{
    padding: 14px 14px 16px;
    margin-inline: 0;   /* avoid extra side space that can fight gap */
    /* if you previously centered with auto margins, keep a tiny one instead */
    /* margin-inline: 4px; */
  }

  .kt-card__icon{ width: 44px; height: 44px; font-size: 22px; }
  .kt-card__title{ font-size: 18px; margin: 2px 0 6px; }
  .kt-card__desc{ font-size: 14px; }
}