/* ==========================================================================
   6-MONTHS-INDUSTRIAL-TRAINING-IN-MOHALI.CSS
   Selectors used exclusively on this page.
   Prefix: smt- (Six Months Training)
   Accent: teal (kept distinct from the violet default, and from the blue
   used on the MERN / Java training pages) so this flagship page reads as
   its own program. Scoped to .smt-page so site-wide --primary/--gradient-
   primary (navbar, footer, other pages) stays untouched.
   Reuses global.css tokens + components (.section-label, .section-title,
   .faq-item, .hero-stats, .badge-free) wherever possible instead of
   redefining them here. The lead-capture form is the shared
   includes/lead-form.php + assets/css/lead-form.css component.
   ========================================================================== */

.smt-page {
  --smt-solid: #0D9488;
  --smt-grad: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
  --smt-badge-bg: rgba(13, 148, 136, 0.12);
}

/* Re-theme the reusable lead-form component, only on this page. */
.smt-page .lf-card::before { background: var(--smt-grad); }
.smt-page .lf-card-icon { background: var(--smt-grad); }
.smt-page .lf-submit-btn { background: var(--smt-grad); }
.smt-page .lf-form .form-control:focus,
.smt-page .lf-form .form-select:focus {
  border-color: var(--smt-solid);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}
.smt-page .lf-note i { color: var(--smt-solid); }

/* Re-theme shared global.css section label accent, only on this page. */
.smt-page .section-label::before { background: var(--smt-grad); }

/* ------------------------------------------------------------------------
   SECTION DIVIDER (thin gradient line + centered icon badge)
   ------------------------------------------------------------------------ */

.smt-section-divider {
  position: relative;
  height: 1px;
  max-width: 1100px;
  margin: 18px auto 38px;
  background: linear-gradient(90deg, transparent 0%, var(--border-color) 15%, var(--border-color) 85%, transparent 100%);
}

.smt-section-divider-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--smt-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: var(--shadow-md);
  border: 4px solid var(--bg-main);
}

/* ------------------------------------------------------------------------
   SECTION 1 · HERO (compact - reuses the shared .bl-hero* component from
   global.css, same structure/height as industrial-training-in-mohali.php's
   hero, themed teal here via scoped overrides. The lead-capture form now
   lives in the second CTA section near the bottom of the page instead of
   in the hero, to match that reference design.)
   ------------------------------------------------------------------------ */

.smt-page .bl-hero-badge {
  background: var(--smt-badge-bg);
  border-color: rgba(13, 148, 136, 0.22);
  color: var(--smt-solid);
}

.smt-page .bl-hero-badge-dot { background: var(--smt-solid); }
.smt-page .bl-hero-chip i { color: var(--smt-solid); }
.smt-page .bl-floating-tag i { color: var(--smt-solid); }

/* Right-side visual: a slow pulse on the icon + a spinning dashed ring
   behind it - a different, simple animation from the plain float used
   on industrial-training-in-mohali.php's hero. */
.smt-page .bl-hero-icon-wrap {
  background: var(--smt-grad);
  box-shadow: 0 24px 64px rgba(13, 148, 136, 0.35);
  animation: smtIconPulse 4s ease-in-out infinite;
}

.smt-page .bl-hero-visual::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 2px dashed var(--smt-solid);
  border-radius: 50%;
  opacity: 0.35;
  animation: smtRingSpin 18s linear infinite;
}

@keyframes smtIconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes smtRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------------
   SECTION 2 · WHY 6-MONTHS TRAINING (large translucent number + icon)
   ------------------------------------------------------------------------ */

.smt-reason-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 24px 26px;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.smt-reason-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(13, 148, 136, 0.35);
}

.smt-reason-number {
  position: absolute;
  top: -6px;
  right: 10px;
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--smt-solid);
  opacity: 0.08;
  pointer-events: none;
}

.smt-reason-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--smt-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.smt-reason-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  position: relative;
}

.smt-reason-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  position: relative;
}

/* ------------------------------------------------------------------------
   SECTION 3 · TRAINING FEATURES (spotlight hover grid)
   ------------------------------------------------------------------------ */

.smt-feature-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px 18px;
  text-align: center;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.smt-feature-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--smt-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.smt-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.smt-feature-card:hover::after { transform: scaleX(1); }

.smt-feature-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--smt-badge-bg);
  color: var(--smt-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: var(--transition);
}

.smt-feature-card:hover .smt-feature-icon {
  background: var(--smt-grad);
  color: #fff;
  transform: scale(1.08);
}

.smt-feature-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.smt-feature-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ------------------------------------------------------------------------
   SECTION 4 · COURSES (new "spotlight" card design - distinct from the
   .itm-course-card grid used on industrial-training-in-mohali.php)
   ------------------------------------------------------------------------ */

.smt-course-card2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  height: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.smt-course-card2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--sc2-solid, var(--smt-solid)) 0%, transparent 55%);
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
}

.smt-course-card2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--sc2-solid, var(--smt-solid)) 35%, var(--border-color));
}

.smt-course-card2:hover::before { opacity: 0.07; }

.smt-course-card2-logo {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex-shrink: 0;
  position: relative;
}

.smt-course-card2-logo img { width: 100%; height: 100%; object-fit: contain; }

.smt-course-card2-logo--icon {
  background: var(--sc2-grad, var(--smt-grad));
  border: none;
  color: #fff;
  font-size: 1.2rem;
}

/* Top bar - soft teal-to-sky gradient (light) / deep teal-to-navy gradient (dark), holds the domain name */
.smt-course-card2-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 22px;
  background: linear-gradient(90deg, #CCFBF1 0%, #E0F2FE 100%);
  border-bottom: 1px solid rgba(13, 148, 136, 0.22);
  color: #0F5E57;
}

[data-theme="dark"] .smt-course-card2-bar {
  background: linear-gradient(90deg, #042F2E 0%, #0C3B5E 100%);
  border-bottom-color: rgba(94, 234, 212, 0.18);
  color: #CCFBF1;
}

.smt-course-card2-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc2-solid, var(--smt-solid));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc2-solid, var(--smt-solid)) 22%, transparent);
  flex-shrink: 0;
}

.smt-course-card2-main {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  flex: 1;
}

.smt-course-card2-body { position: relative; min-width: 0; }

.smt-course-card2-domain {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: inherit;
}

.smt-course-card2-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.smt-course-card2-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 12px;
}

.smt-course-card2-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sc2-solid, var(--smt-solid));
}

.smt-course-card2-link i {
  transition: var(--transition);
}

.smt-course-card2:hover .smt-course-card2-link i { transform: translateX(3px); }

/* Domain color mapping - matched to each technology's real brand colors,
   same palette already used on industrial-training-in-mohali.php so both
   pages stay visually consistent with each other. */
.smt-course-card2[data-domain="mern"]      { --sc2-solid: #47A248; --sc2-grad: linear-gradient(135deg, #4FAA41 0%, #3FA037 100%); }
.smt-course-card2[data-domain="java"]      { --sc2-solid: #EA2D2E; --sc2-grad: linear-gradient(135deg, #EA2D2E 0%, #0074BD 100%); }
.smt-course-card2[data-domain="python"]    { --sc2-solid: #306998; --sc2-grad: linear-gradient(135deg, #306998 0%, #FFD43B 100%); }
.smt-course-card2[data-domain="testing"]   { --sc2-solid: #FF6B6B; --sc2-grad: linear-gradient(135deg, #FF6B6B 0%, #ff8e53 100%); }
.smt-course-card2[data-domain="webdesign"] { --sc2-solid: #f5576c; --sc2-grad: var(--gradient-warm); }
.smt-course-card2[data-domain="digital"]   { --sc2-solid: #fda085; --sc2-grad: var(--gradient-gold); }


/* ------------------------------------------------------------------------
   SECTION 4B · QUICK CONTACT STRIP (compact, full-width, Call + WhatsApp -
   placed right after the Courses section)
   ------------------------------------------------------------------------ */

.smt-quick-contact {
  padding: 26px 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.smt-quick-contact-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}

.smt-quick-contact-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.smt-quick-contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--smt-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.smt-quick-contact-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
  line-height: 1.3;
}

.smt-quick-contact-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.smt-quick-contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.smt-quick-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
  border: none;
}

.smt-quick-contact-btn--call {
  background: var(--smt-grad);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.smt-quick-contact-btn--call:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #fff;
}

.smt-quick-contact-btn--whatsapp {
  background: #047e3d;
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.smt-quick-contact-btn--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #fff;
  filter: brightness(1.08);
}

@media (max-width: 767px) {
  .smt-quick-contact { padding: 22px 0; }
  .smt-quick-contact-inner { flex-direction: column; text-align: center; }
  .smt-quick-contact-left { flex-direction: column; text-align: center; }
  .smt-quick-contact-actions { width: 100%; flex-direction: column; }
  .smt-quick-contact-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------------
   SECTION 5 · WHO WE TRAIN YOU FOR (company-type audience cards)
   ------------------------------------------------------------------------ */

/* Black section background; heading text lightened so it stays readable in both themes */
.smt-who { background: #000; }
.smt-who .section-title { color: #fff; }
.smt-who .section-subtitle { color: rgba(255, 255, 255, 0.75); }

.smt-audience-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  height: 100%;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.smt-audience-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(13, 148, 136, 0.35);
}

.smt-audience-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--smt-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.smt-audience-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.smt-audience-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .smt-course-card2-bar { padding: 7px 18px; }
  .smt-course-card2-main { padding: 18px; }
  .smt-reason-number { font-size: 3.4rem; }
}


/* PHP domain card colour */
.smt-course-card2[data-domain="php"]      { --sc2-solid: #777BB3; --sc2-grad: linear-gradient(135deg, #8993BE 0%, #4F5B93 100%); }