/* ============================================================
	   JSPM LATUR CENTRAL PORTAL — style.css
	   Global shared styles (works with any theme1-10.css)
	   ============================================================ */
	
	/* ── Reset & Base ─────────────────────────────────────────── */
	*, *::before, *::after { box-sizing: border-box; }
	
	html { scroll-behavior: smooth; }
	
	body {
	  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
	  background: var(--bg-page, #f4f6fb);
	  color: var(--text-primary, #0f1c3a);
	  min-height: 100vh;
	  display: flex;
	  flex-direction: column;
	  transition: background-color .3s ease, color .3s ease;
	}
	
	main { flex: 1; }
	
	img { max-width: 100%; display: block; }
	
	a { transition: color .2s ease; }
	
	/* ── Typography ───────────────────────────────────────────── */
	.section-eyebrow {
	  display: inline-block;
	  font-size: .72rem;
	  font-weight: 800;
	  letter-spacing: .14em;
	  text-transform: uppercase;
	  color: var(--accent);
	  margin-bottom: .4rem;
	}
	
	.section-heading {
	  font-family: var(--font-display, 'Playfair Display', serif);
	  color: var(--text-primary);
	  font-size: clamp(1.5rem, 3vw, 2rem);
	  font-weight: 700;
	  margin-bottom: .5rem;
	}
	
	.section-divider {
	  width: 52px;
	  height: 4px;
	  background: linear-gradient(90deg, var(--primary), var(--accent));
	  border-radius: 2px;
	  margin-bottom: 1.75rem;
	}
	
	/* ── Page Hero ────────────────────────────────────────────── */
	.page-hero {
	  background: var(--bg-hero);
	  padding: 3.5rem 0 2.5rem;
	  position: relative;
	  overflow: hidden;
	}
	
	.page-hero::before {
	  content: '';
	  position: absolute;
	  inset: 0;
	  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
	  pointer-events: none;
	}
	
	.page-hero h1 {
	  font-family: var(--font-display);
	  color: #ffffff;
	  font-size: clamp(1.8rem, 4vw, 2.8rem);
	  font-weight: 700;
	  margin-bottom: .75rem;
	}
	
	.page-hero .breadcrumb-item a {
	  color: var(--accent-light, #e0b840);
	  text-decoration: none;
	}
	
	.page-hero .breadcrumb-item.active {
	  color: rgba(255,255,255,.6);
	}
	
	.page-hero .breadcrumb-item + .breadcrumb-item::before {
	  color: rgba(255,255,255,.4);
	}
	
	/* ── Cards ────────────────────────────────────────────────── */
	.card-premium {
	  background: var(--bg-card);
	  border: 1px solid var(--border-color);
	  border-radius: var(--border-radius-md, 14px);
	  box-shadow: var(--shadow-sm);
	  transition: var(--transition, all .28s ease);
	}
	
	.card-premium:hover {
	  box-shadow: var(--shadow-md);
	  transform: translateY(-3px);
	}
	
	/* ── Buttons ──────────────────────────────────────────────── */
	.btn-primary-theme {
	  display: inline-flex;
	  align-items: center;
	  gap: .5rem;
	  padding: .75rem 1.75rem;
	  border-radius: 50px;
	  background: var(--primary);
	  color: var(--text-on-primary, #fff);
	  font-weight: 700;
	  font-size: .92rem;
	  border: 2px solid transparent;
	  text-decoration: none;
	  transition: var(--transition, all .28s ease);
	  cursor: pointer;
	}
	
	.btn-primary-theme:hover {
	  background: var(--primary-light);
	  color: var(--text-on-primary, #fff);
	  box-shadow: var(--shadow-md);
	  transform: translateY(-2px);
	}
	
	.btn-accent-theme {
	  display: inline-flex;
	  align-items: center;
	  gap: .5rem;
	  padding: .75rem 1.75rem;
	  border-radius: 50px;
	  background: var(--accent);
	  color: var(--text-on-accent, #0f1c3a);
	  font-weight: 700;
	  font-size: .92rem;
	  border: 2px solid transparent;
	  text-decoration: none;
	  transition: var(--transition, all .28s ease);
	  cursor: pointer;
	}
	
	.btn-accent-theme:hover {
	  background: var(--accent-dark);
	  color: var(--text-on-accent, #0f1c3a);
	  box-shadow: var(--shadow-glow);
	  transform: translateY(-2px);
	}
	
	.btn-outline-theme {
	  display: inline-flex;
	  align-items: center;
	  gap: .5rem;
	  padding: .7rem 1.65rem;
	  border-radius: 50px;
	  background: transparent;
	  color: var(--primary);
	  font-weight: 700;
	  font-size: .92rem;
	  border: 2px solid var(--primary);
	  text-decoration: none;
	  transition: var(--transition, all .28s ease);
	  cursor: pointer;
	}
	
	.btn-outline-theme:hover {
	  background: var(--primary);
	  color: var(--text-on-primary, #fff);
	  box-shadow: var(--shadow-md);
	  transform: translateY(-2px);
	}
	
	/* ── Pill Tabs ────────────────────────────────────────────── */
	.tab-pill-bar {
	  display: flex;
	  gap: .5rem;
	  overflow-x: auto;
	  padding-bottom: .5rem;
	  scrollbar-width: none;
	}
	
	.tab-pill-bar::-webkit-scrollbar { display: none; }
	
	.tab-pill {
	  display: inline-flex;
	  align-items: center;
	  gap: .5rem;
	  padding: .55rem 1.35rem;
	  border-radius: 50px;
	  font-size: .88rem;
	  font-weight: 600;
	  white-space: nowrap;
	  cursor: pointer;
	  border: 2px solid transparent;
	  transition: var(--transition, all .28s ease);
	  background: var(--tab-inactive-bg);
	  color: var(--tab-inactive-text);
	  text-decoration: none;
	}
	
	.tab-pill:hover {
	  border-color: var(--primary);
	  color: var(--primary);
	  background: var(--bg-card);
	}
	
	.tab-pill.active {
	  background: var(--tab-active-bg);
	  color: var(--tab-active-text);
	  border-color: transparent;
	  box-shadow: var(--shadow-md);
	}
	
	/* ── Programme Tabs (dark bar style — MIT-WPU) ────────────── */
	.prog-tab-bar {
	  background: var(--primary);
	  border-radius: 60px;
	  padding: .45rem .5rem;
	  display: flex;
	  gap: .3rem;
	  overflow-x: auto;
	  scrollbar-width: none;
	  max-width: 860px;
	  margin: 0 auto 2.5rem;
	}
	
	.prog-tab-bar::-webkit-scrollbar { display: none; }
	
	.ptab {
	  flex: 1;
	  min-width: 70px;
	  padding: .6rem .9rem;
	  border-radius: 50px;
	  font-size: .82rem;
	  font-weight: 700;
	  cursor: pointer;
	  white-space: nowrap;
	  border: none;
	  outline: none;
	  background: transparent;
	  color: rgba(255,255,255,.78);
	  transition: all .25s ease;
	}
	
	.ptab:hover {
	  background: rgba(255,255,255,.18);
	  color: #ffffff;
	}
	
	.ptab.active-tab {
	  background: #ffffff;
	  color: var(--primary);
	}
	
	/* ── Programme Cards (image style) ───────────────────────── */
	.prog-card-inner {
	  position: relative;
	  border-radius: 20px;
	  overflow: hidden;
	  height: 280px;
	  cursor: pointer;
	  box-shadow: 0 8px 28px rgba(0,0,0,.18);
	  transition: transform .28s ease, box-shadow .28s ease;
	}
	
	.prog-card-inner:hover {
	  transform: translateY(-6px);
	  box-shadow: 0 20px 50px rgba(0,0,0,.28);
	}
	
	.prog-card-inner:hover .arrow-circle {
	  background: var(--primary) !important;
	}
	
	.prog-card-inner:hover .arrow-circle i {
	  color: #fff !important;
	}
	
	.arrow-circle {
	  width: 36px;
	  height: 36px;
	  border-radius: 50%;
	  background: #fff;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  transition: background .2s ease;
	}
	
	/* ── Step Items ───────────────────────────────────────────── */
	.step-item {
	  display: flex;
	  align-items: flex-start;
	  gap: 1rem;
	  padding: 1rem 1.25rem;
	  background: var(--bg-card);
	  border: 1px solid var(--border-color);
	  border-radius: var(--border-radius-md, 14px);
	  box-shadow: var(--shadow-sm);
	  transition: var(--transition, all .28s ease);
	}
	
	.step-item:hover {
	  box-shadow: var(--shadow-md);
	  border-color: var(--accent);
	  transform: translateX(4px);
	}
	
	.step-number {
	  width: 42px;
	  height: 42px;
	  border-radius: 50%;
	  background: var(--step-number-bg, var(--primary));
	  color: var(--step-number-text, var(--accent));
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-weight: 800;
	  font-size: .95rem;
	  flex-shrink: 0;
	  box-shadow: var(--shadow-sm);
	}
	
	.step-icon {
	  width: 42px;
	  height: 42px;
	  border-radius: 10px;
	  background: var(--bg-card-alt);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: var(--primary);
	  flex-shrink: 0;
	  font-size: 1.1rem;
	}
	
	/* ── Badges ───────────────────────────────────────────────── */
	.theme-badge {
	  display: inline-flex;
	  align-items: center;
	  gap: .35rem;
	  padding: .3rem .75rem;
	  border-radius: 50px;
	  background: var(--badge-bg, rgba(201,162,39,.15));
	  color: var(--badge-text, #a07d10);
	  font-size: .78rem;
	  font-weight: 700;
	  letter-spacing: .04em;
	}
	
	/* ── Fee Row ──────────────────────────────────────────────── */
	.fee-row {
	  padding: .6rem .75rem;
	  border-radius: 8px;
	  background: var(--bg-card-alt);
	  margin-bottom: .5rem;
	  font-size: .82rem;
	  transition: var(--transition, all .28s ease);
	}
	
	.fee-row:hover { box-shadow: var(--shadow-sm); }
	
	/* ── Alert Banner ─────────────────────────────────────────── */
	.alert-banner {
	  background: linear-gradient(135deg, var(--primary), var(--primary-light));
	  color: #fff;
	  border-radius: var(--border-radius-md, 14px);
	  padding: 1.25rem 1.5rem;
	  display: flex;
	  align-items: center;
	  gap: 1rem;
	  box-shadow: var(--shadow-md);
	}
	
	.alert-banner .alert-icon {
	  color: var(--accent);
	  font-size: 1.75rem;
	  flex-shrink: 0;
	}
	
	/* ── CTA Section ──────────────────────────────────────────── */
	.cta-section {
	  background: var(--bg-hero);
	  border-radius: var(--border-radius-lg, 22px);
	  padding: 3rem 2rem;
	  text-align: center;
	  position: relative;
	  overflow: hidden;
	}
	
	/* ── Coming Soon Card ─────────────────────────────────────── */
	.coming-soon-card {
	  text-align: center;
	  padding: 4rem 2rem;
	  background: var(--bg-card);
	  border: 2px dashed var(--border-color);
	  border-radius: var(--border-radius-lg, 22px);
	}
	
	.cs-icon {
	  font-size: 3.5rem;
	  margin-bottom: 1rem;
	  display: block;
	  animation: pulse 2s ease-in-out infinite;
	}
	
	/* ── Animations ───────────────────────────────────────────── */
	@keyframes fadeInUp {
	  from { opacity: 0; transform: translateY(24px); }
	  to   { opacity: 1; transform: translateY(0); }
	}
	
	@keyframes pulse {
	  0%, 100% { transform: scale(1);   opacity: 1; }
	  50%       { transform: scale(1.1); opacity: .8; }
	}
	
	.fade-in-up             { animation: fadeInUp .55s ease both; }
	.delay-1                { animation-delay: .1s; }
	.delay-2                { animation-delay: .2s; }
	.delay-3                { animation-delay: .3s; }
	.delay-4                { animation-delay: .4s; }
	.delay-5                { animation-delay: .5s; }
	
	/* ── Utility ──────────────────────────────────────────────── */
	.py-section { padding: 4rem 0; }
	
	.text-accent   { color: var(--accent); }
	.text-primary-theme { color: var(--primary); }
	.bg-primary-theme   { background: var(--primary); }
	.bg-accent-theme    { background: var(--accent); }
	.border-theme  { border-color: var(--border-color) !important; }
	
	/* ── Responsive ───────────────────────────────────────────── */
	@media (max-width: 768px) {
	  .py-section { padding: 2.5rem 0; }
	
	  .prog-card-inner { height: 220px; }
	
	  .ptab { font-size: .75rem; padding: .5rem .7rem; min-width: 60px; }
	
	  .cta-section { padding: 2rem 1.25rem; }
	
	  .step-item { padding: .85rem 1rem; }
	}
	
	@media (max-width: 480px) {
	  .prog-card-inner { height: 200px; }
	  .section-heading { font-size: 1.4rem; }
	}
	
	/* ── Programme Tab Bar (MIT-WPU style) ───────────────────── */
	.prog-tab-bar {
	  background: var(--primary);
	  border-radius: 60px;
	  padding: .45rem .5rem;
	  display: flex;
	  gap: .3rem;
	  overflow-x: auto;
	  -webkit-overflow-scrolling: touch;
	  scrollbar-width: none;
	  max-width: 860px;
	  margin: 0 auto 2.5rem;
	}
	.prog-tab-bar::-webkit-scrollbar { display: none; }
	
	.ptab {
	  flex: 0 0 auto;
	  padding: .65rem 1.4rem;
	  border-radius: 50px;
	  font-size: .88rem;
	  font-weight: 700;
	  cursor: pointer;
	  white-space: nowrap;
	  border: none;
	  outline: none;
	  background: transparent;
	  color: rgba(255,255,255,.78);
	  transition: all .25s ease;
	  font-family: inherit;
	  -webkit-tap-highlight-color: transparent;
	}
	.ptab:hover    { background: rgba(255,255,255,.18); color: #fff; }
	.ptab.active-tab { background: #fff; color: var(--primary); }
	
	/* ── Page Hero (home) ────────────────────────────────────── */
	.page-hero {
	  background: var(--bg-hero);
	  padding: 4rem 0 3rem;
	  position: relative;
	  overflow: hidden;
	}
	
	/* ── Buttons (home) ──────────────────────────────────────── */
	.btn-accent-theme {
	  display: inline-flex;
	  align-items: center;
	  gap: .5rem;
	  padding: .75rem 1.75rem;
	  border-radius: 50px;
	  background: var(--accent);
	  color: var(--text-on-accent, #0f1c3a);
	  font-weight: 700;
	  font-size: .92rem;
	  border: none;
	  text-decoration: none;
	  transition: all .28s ease;
	  cursor: pointer;
	}
	.btn-accent-theme:hover {
	  background: var(--accent-dark);
	  transform: translateY(-2px);
	  box-shadow: var(--shadow-glow);
	}
	
	/* ── Programme Cards ─────────────────────────────────────── */
	.prog-card-inner {
	  position: relative;
	  border-radius: 20px;
	  overflow: hidden;
	  height: 280px;
	  cursor: pointer;
	  box-shadow: 0 8px 28px rgba(0,0,0,.18);
	  transition: transform .28s ease, box-shadow .28s ease;
	  display: block;
	}
	.prog-card-inner:hover {
	  transform: translateY(-6px);
	  box-shadow: 0 20px 50px rgba(0,0,0,.28);
	}
	.prog-card-inner:hover .arrow-circle { background: var(--primary) !important; }
	.prog-card-inner:hover .arrow-circle i { color: #fff !important; }
	
	.arrow-circle {
	  width: 36px; height: 36px;
	  border-radius: 50%;
	  background: #fff;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  transition: background .2s ease;
	  flex-shrink: 0;
	}
	
	/* ── Mobile: vertical tab list ───────────────────────────── */
	@media (max-width: 767px) {
	  .prog-tab-bar {
	    border-radius: 16px !important;
	    padding: .5rem !important;
	    flex-direction: column !important;
	    gap: .2rem !important;
	    max-width: 100% !important;
	    margin-bottom: 1.5rem !important;
	    overflow-x: hidden !important;
	    overflow-y: visible !important;
	  }
	  .ptab {
	    width: 100% !important;
	    text-align: left !important;
	    padding: .85rem 1.25rem !important;
	    border-radius: 10px !important;
	    font-size: .92rem !important;
	    white-space: normal !important;
	  }
	  .ptab.active-tab {
	    background: #fff !important;
	    color: var(--primary) !important;
	  }
	  .prog-card-inner { height: 230px; }
	}
	
	@media (max-width: 400px) {
	  .prog-card-inner { height: 200px; }
	}
	
	
	
	/* ── MIT-WPU Tab Bar ── */
.mitwpu-tabs {
  background: #1a2e5e;
  background: var(--primary, #1a2e5e);
  border-radius: 60px;
  padding: 6px;
  display: flex;
  align-items: stretch;
  max-width: 900px;
  margin: 0 auto 2.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mitwpu-tabs::-webkit-scrollbar { display: none; }

.mtab {
  flex: 1;
  min-width: 90px;
  padding: .9rem 1.1rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(255,255,255,.78);
  transition: all .25s ease;
  font-family: inherit;
  text-align: center;
  line-height: 1.3;
  white-space: normal;
  -webkit-tap-highlight-color: transparent;
}
.mtab:hover { color: #fff; background: rgba(255,255,255,.12); }
.mtab.active {
  background: #ffffff;
  color: #1a2e5e;
  color: var(--primary, #1a2e5e);
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

@media (max-width: 768px) {
  .mitwpu-tabs {
    border-radius: 16px;
    flex-direction: column;
    overflow-x: hidden;
    padding: 5px;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
  .mtab {
    border-radius: 12px;
    text-align: left;
    padding: .85rem 1.2rem;
    font-size: .92rem;
    white-space: normal;
    min-width: unset;
    flex: none;
    width: 100%;
  }
  .mtab.active { border-radius: 12px; }
}
	
	
	
	
	
	
	/* ============================================================
   CONTACT PAGE STYLES (ADD-ON)
   ============================================================ */

/* HERO icon override (optional accent control) */
.page-hero h1 i {
  color: var(--accent) !important;
}

/* LEFT info cards */
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e6e8ef);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: all .25s ease;
}

.contact-info-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

/* icon box */
.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(201,162,39,.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* labels */
.contact-info-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  margin-bottom: .15rem;
}

.contact-info-value {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

/* RIGHT form card */
.contact-form-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e6e8ef);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: all .25s ease;
}

.contact-form-card:hover {
  box-shadow: var(--shadow-md);
}

/* form fields */
.contact-form-card .form-control,
.contact-form-card .form-select {
  border-radius: 10px;
  border: 1px solid var(--border-color);
  padding: .75rem 1rem;
  font-size: .9rem;
  transition: all .2s ease;
  background: var(--bg-page);
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,162,39,.15);
  outline: none;
}

/* submit button override */
.contact-form-card .btn-submit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.8rem;
  border-radius: 50px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .25s ease;
}

.contact-form-card .btn-submit:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* breadcrumb tweak */
.page-hero .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
}

.page-hero .breadcrumb-item {
  font-size: .85rem;
}

/* mobile spacing fix */
@media (max-width: 768px) {
  .contact-form-card {
    padding: 1.25rem;
  }

  .contact-info-card {
    padding: .9rem 1rem;
  }
}