/* ---- Specialization Section (Static Grid) ---- */
.spec-section {
  padding: 80px 0;
}

/* Grid container instead of scrolling track */
.spec-inf-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px 0 16px;
}

/* Individual card – same design, no overflow/transform tricks */
.spec-inf-card {
  position: relative;
  background: #fff;
  border: 1px solid #a9aaad;
  border-radius: 20px;
  padding: 34px 28px;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.68, 0, 1.2),
    box-shadow 0.35s ease,
    border-color 0.25s;
}

/* Hover highlight “tick” effect – a coloured top border and check‑like glow */
.spec-inf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(79, 99, 210, 0.12);
  border-color: transparent;
}

/* “Tick” accent on hover: a small gradient border at the top */
.spec-inf-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 20px 20px 0 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.spec-inf-card:hover::after {
  opacity: 1;
}

/* Background gradient on hover (kept from original) */
.spec-inf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.spec-inf-card.sc-a::before {
  background: linear-gradient(135deg, #ede9fe, #f0f9ff);
}
.spec-inf-card.sc-b::before {
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
}
.spec-inf-card.sc-c::before {
  background: linear-gradient(135deg, #fff7ed, #fef9c3);
}
.spec-inf-card.sc-d::before {
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
}
.spec-inf-card:hover::before {
  opacity: 1;
}

/* Big faded background number – kept */
.spec-inf-num {
  position: absolute;
  top: 10px;
  right: 18px;
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.07;
  transition: opacity 0.3s;
  user-select: none;
  pointer-events: none;
}
.sc-a .spec-inf-num {
  color: #4f63d2;
}
.sc-b .spec-inf-num {
  color: #059669;
}
.sc-c .spec-inf-num {
  color: #d97706;
}
.sc-d .spec-inf-num {
  color: #db2777;
}

/* Icon box */
.spec-inf-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.sc-a .spec-inf-icon {
  background: linear-gradient(135deg, #4f63d2, #7c3aed);
}
.sc-b .spec-inf-icon {
  background: linear-gradient(135deg, #059669, #10b981);
}
.sc-c .spec-inf-icon {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}
.sc-d .spec-inf-icon {
  background: linear-gradient(135deg, #db2777, #ec4899);
}

.spec-inf-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tag label */
.spec-inf-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 7px;
  position: relative;
}
.sc-a .spec-inf-tag {
  color: #4f63d2;
}
.sc-b .spec-inf-tag {
  color: #059669;
}
.sc-c .spec-inf-tag {
  color: #d97706;
}
.sc-d .spec-inf-tag {
  color: #db2777;
}

/* Title */
.spec-inf-card .spec-inf-title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}
/* Description */
.spec-inf-card .spec-inf-desc {
  position: relative;
  font-size: 17px;
  line-height: 1.8;
  color: #5e5e5e;
  margin: 0 0 22px;
}

/* Read‑more link */
.spec-inf-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: gap 0.2s;
}
.sc-a .spec-inf-link {
  color: #4f63d2 !important;
}
.sc-b .spec-inf-link {
  color: #059669 !important;
}
.sc-c .spec-inf-link {
  color: #d97706 !important;
}
.sc-d .spec-inf-link {
  color: #db2777 !important;
}

.spec-inf-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
.spec-inf-link:hover {
  gap: 10px;
}
.spec-inf-link:hover svg {
  transform: translateX(3px);
}

/* Hide previous/next buttons (no longer needed) */
.spec-inf-nav {
  display: none;
}

/* Responsive: 2 cards on tablets, 1 on mobile */
@media (max-width: 991px) {
  .spec-inf-track {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .spec-inf-track {
    grid-template-columns: 1fr;
  }
}