/* Vision Point Education - Modern Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --primary-navy: #0f172a;
  --primary-blue: #1e40af;
  --accent-gold: #f59e0b;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --text-dark: #0f172a;
  --text-muted: #475569;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-dark);
  background-color: #f8fafc;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* Custom Glassmorphism Header */
.glass-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

/* -------------------------------------------------------------------------- */
/* DEEP RICH HERO GRADIENTS (High Contrast Dark Backgrounds for White Text) */
/* -------------------------------------------------------------------------- */
.hero-gradient {
  background: linear-gradient(135deg, #0b1329 0%, #1e3a8a 50%, #0f172a 100%) !important;
  color: #ffffff !important;
}

.masters-hero {
  background: linear-gradient(135deg, #090d16 0%, #1e1b4b 50%, #0f172a 100%) !important;
  color: #ffffff !important;
  border-bottom: 3px solid #f59e0b;
}

.bachelors-hero {
  background: linear-gradient(135deg, #042f2e 0%, #065f46 50%, #0f172a 100%) !important;
  color: #ffffff !important;
  border-bottom: 3px solid #10b981;
}

.accent-gradient-text {
  background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-text {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -------------------------------------------------------------------------- */
/* UNIFIED PREMIUM HORIZONTAL SPLIT CARDS (Master's & Bachelor's Degrees) */
/* -------------------------------------------------------------------------- */
.masters-card, .bachelors-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 5px solid #1e3a8a;
  transition: all 0.35s ease-in-out;
}

.bachelors-card {
  border-left-color: #059669;
}

.masters-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 30px -10px rgba(30, 58, 138, 0.15);
  border-left-color: #f59e0b;
}

.bachelors-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 30px -10px rgba(16, 185, 129, 0.15);
  border-left-color: #06b6d4;
}

.masters-badge {
  background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.bachelors-badge {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  color: #a7f3d0;
  border: 1px solid rgba(167, 243, 208, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Tab Buttons Active States */
.tab-btn.active {
  background-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

/* Nav link pulse-on-hover: Master's Degrees pulses neon blue,
   Bachelor's Degrees pulses green. Applied only on :hover so the
   link looks normal until the user's cursor is actually over it. */
@keyframes pulse-blue-glow {
  0%, 100% { text-shadow: 0 0 0px rgba(37, 99, 235, 0); color: inherit; }
  50% { text-shadow: 0 0 10px rgba(59, 130, 246, 0.9), 0 0 18px rgba(59, 130, 246, 0.6); color: #3b82f6; }
}
@keyframes pulse-green-glow {
  0%, 100% { text-shadow: 0 0 0px rgba(16, 185, 129, 0); color: inherit; }
  50% { text-shadow: 0 0 10px rgba(16, 185, 129, 0.9), 0 0 18px rgba(16, 185, 129, 0.6); color: #10b981; }
}
.nav-link-masters:hover {
  animation: pulse-blue-glow 1s ease-in-out infinite;
}
.nav-link-bachelors:hover {
  animation: pulse-green-glow 1s ease-in-out infinite;
}