/* =========================================================
   PhysioEdvance — Public Pages CSS (Edufast LMS Layout Style)
   ========================================================= */

/* Color Palette Utilities for Hero Feature Cards */
.bg-purple-subtle { background-color: #f3e8ff !important; }
.text-purple { color: #9333ea !important; }
.bg-indigo-subtle { background-color: #e0e7ff !important; }
.text-indigo { color: #4f46e5 !important; }
.bg-teal-subtle { background-color: #ccfbf1 !important; }
.text-teal { color: #0d9488 !important; }
.bg-orange-subtle { background-color: #ffedd5 !important; }
.text-orange { color: #ea580c !important; }

/* --- Logo --- */
.pe-logo-img{height:2.75rem;width:auto;display:block;}
.pe-logo-badge{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:0.3rem 0.4rem;}
.pe-logo-img-footer{height:2.25rem;width:auto;display:block;}
.pe-brand-text{font-family:var(--pe-font-display);font-weight:800;font-size:1.25rem;letter-spacing:-0.01em;}

/* --- Leadership Card --- */
.pe-leadership-card {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.pe-leadership-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 36px rgba(10, 93, 194, 0.16) !important;
}

.pe-badge-btn {
  transition: all 0.25s ease !important;
}
.pe-badge-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  background: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
}

/* =========================================================
   NAVBAR — Ultra-Modern Executive Glassmorphism Header
   ========================================================= */
.pe-navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
  padding: 0.48rem 0 !important;
  min-height: 68px;
  box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.25s ease;
  width: 100%;
  z-index: 1030;
}

.pe-nav-container {
  max-width: 1540px !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  margin: 0 auto;
}

.pe-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.2rem 0;
  text-decoration: none;
  flex-shrink: 0;
}

.pe-brand-text {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
  line-height: 1;
}

.pe-logo-img {
  height: 2.35rem;
  width: auto;
  transition: transform 0.25s ease;
}

.pe-navbar .navbar-brand:hover .pe-logo-img {
  transform: scale(1.05);
}

.pe-nav-links {
  gap: 0.25rem;
  margin: 0 auto;
}

.pe-navbar .nav-link {
  color: #475569;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.45rem 0.8rem !important;
  border-radius: 50px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  letter-spacing: -0.01em;
}

.pe-navbar .nav-link:hover {
  color: #0a5dc2;
  background: rgba(10, 93, 194, 0.06);
  transform: translateY(-1px);
}

.pe-navbar .nav-link.active {
  color: #0a5dc2 !important;
  background: rgba(10, 93, 194, 0.08) !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(10, 93, 194, 0.15);
}

/* Nav Caret */
.pe-nav-caret {
  font-size: 0.92rem;
  color: #94a3b8;
  transition: transform 0.25s ease, color 0.2s ease;
  margin-left: 0.12rem;
  line-height: 1;
}

.pe-navbar .nav-link:hover .pe-nav-caret,
.pe-navbar .nav-link.active .pe-nav-caret {
  color: #0a5dc2;
}

.pe-navbar .dropdown.show .pe-nav-caret {
  transform: rotate(180deg);
  color: #0a5dc2;
}

/* Remove default bootstrap arrow if any */
.pe-navbar .dropdown-toggle::after,
.pe-navbar .dropdown-toggle::before,
.pe-user-pill::after,
.pe-user-pill::before {
  display: none !important;
  content: none !important;
}

/* Live Pulse Badge */
.pe-live-pulse-badge {
  font-size: 0.62rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  padding: 0.15rem 0.45rem;
  border-radius: 50px;
  letter-spacing: 0.04em;
  margin-left: 0.35rem;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  animation: pePulseLive 1.8s infinite;
}

@keyframes pePulseLive {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Dropdown Menu styling */
.pe-navbar .dropdown-menu {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.14), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
  padding: 0.6rem;
  animation: peDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes peDropdownFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.pe-navbar .dropdown-item {
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.55rem 0.9rem;
  color: #334155;
  transition: all 0.18s ease;
}

.pe-navbar .dropdown-item:hover {
  background: rgba(10, 93, 194, 0.08);
  color: #0a5dc2;
  transform: translateX(3px);
}

.pe-dropdown-icon-pill {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Nav Auth & User Capsule */
.pe-nav-auth {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.pe-nav-dash-btn {
  background: rgba(10, 93, 194, 0.08);
  color: #0a5dc2;
  border: 1.5px solid rgba(10, 93, 194, 0.22);
  border-radius: 50px;
  padding: 0.44rem 1.15rem;
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none !important;
  transition: all 0.22s ease;
}

.pe-nav-dash-btn:hover {
  background: #0a5dc2;
  color: #ffffff !important;
  border-color: #0a5dc2;
  box-shadow: 0 4px 14px rgba(10, 93, 194, 0.25);
  transform: translateY(-1px);
}

.pe-user-pill {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 50px;
  padding: 0.25rem 0.75rem 0.25rem 0.32rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: all 0.22s ease;
  cursor: pointer;
}

.pe-user-pill:hover {
  border-color: #0a5dc2;
  box-shadow: 0 4px 14px rgba(10, 93, 194, 0.12);
  transform: translateY(-1px);
}

.pe-user-avatar-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pe-user-avatar-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #0a5dc2;
}

.pe-user-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #ffffff;
}

.pe-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.pe-user-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

.pe-user-role-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #e0f2fe;
  color: #0284c7;
  padding: 0.1rem 0.45rem;
  border-radius: 50px;
  margin-top: 1px;
}

.pe-user-caret {
  font-size: 0.95rem;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.dropdown.show .pe-user-caret {
  transform: rotate(180deg);
  color: #0a5dc2;
}

.pe-nav-login-btn {
  background: #f8fafc;
  color: #334155;
  border: 1.5px solid #cbd5e1;
  border-radius: 50px;
  padding: 0.44rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.pe-nav-login-btn:hover {
  background: #ffffff;
  border-color: #0a5dc2;
  color: #0a5dc2;
  box-shadow: 0 4px 12px rgba(10, 93, 194, 0.1);
  transform: translateY(-1px);
}

.pe-nav-signup-btn {
  background: linear-gradient(135deg, #0a5dc2 0%, #0284c7 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 50px;
  padding: 0.46rem 1.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(10, 93, 194, 0.25);
  transition: all 0.25s ease;
}

.pe-nav-signup-btn:hover {
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(10, 93, 194, 0.35);
}

/* Mobile & Tablet viewports (< 992px) */
@media (max-width: 991.98px) {
  .pe-navbar .navbar-collapse {
    background: #191b20;
    border-radius: 24px;
    padding: 1.25rem 1rem;
    margin-top: 0.75rem;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    max-height: 85vh;
    overflow-y: auto;
  }
  .pe-navbar .nav-link {
    font-size: 0.98rem;
    font-weight: 600;
    color: #e2e8f0;
    padding: 0.7rem 1.1rem !important;
    width: 100%;
    margin-bottom: 0.35rem;
    border-radius: 50px;
    justify-content: space-between;
    transition: all 0.2s ease;
  }
  .pe-navbar .nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
  }
  .pe-navbar .nav-link.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  }
  .pe-navbar .nav-link .pe-nav-caret {
    color: #94a3b8;
  }
  .pe-nav-links {
    gap: 0.2rem;
  }
  .pe-nav-auth {
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .pe-nav-login-btn {
    background: transparent;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  .pe-nav-login-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff !important;
  }
  .pe-nav-signup-btn {
    background: linear-gradient(135deg, #023880 0%, #0a5dc2 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 50px;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0.72rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(10, 93, 194, 0.4);
    transition: all 0.25s ease;
  }
  .pe-nav-signup-btn:hover {
    box-shadow: 0 6px 22px rgba(10, 93, 194, 0.5);
  }
  .pe-nav-dash-btn,
  .pe-user-pill {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
  }
  .pe-user-name {
    color: #ffffff !important;
  }
  .pe-user-role-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #38bdf8;
  }
}

/* Compact Laptop Screens (992px to 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pe-nav-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .pe-navbar .nav-link {
    font-size: 0.81rem !important;
    padding: 0.35rem 0.48rem !important;
  }
  .pe-nav-links {
    gap: 0.1rem !important;
  }
  .pe-nav-auth {
    gap: 0.4rem !important;
  }
  .pe-nav-dash-btn,
  .pe-nav-login-btn,
  .pe-nav-signup-btn {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  .pe-brand-text {
    font-size: 1.15rem;
  }
}

/* Standard Laptops & Desktops (1200px to 1399.98px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .pe-navbar .nav-link {
    font-size: 0.855rem !important;
    padding: 0.38rem 0.65rem !important;
  }
  .pe-nav-links {
    gap: 0.22rem !important;
  }
  .pe-nav-auth {
    gap: 0.6rem !important;
  }
}

/* Large Screens & Monitors (1400px+) */
@media (min-width: 1400px) {
  .pe-navbar .nav-link {
    font-size: 0.885rem;
    padding: 0.44rem 0.82rem !important;
  }
  .pe-nav-links {
    gap: 0.35rem;
  }
  .pe-nav-auth {
    gap: 0.85rem;
  }
}

/* =========================================================
   SUBNAV ROTATABLE TRUST & VALUE BAR (Below Main Navbar)
   ========================================================= */
.pe-subnav-trust-bar {
  background: linear-gradient(90deg, #eaf2fd 0%, #f1f7ff 50%, #eaf2fd 100%);
  border-bottom: 1px solid #d4e4fa;
  padding: 0.48rem 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1020;
}

.pe-trust-slider {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: flex;
}

.pe-trust-track {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
  animation: peTrustTickerScroll 55s linear infinite;
  will-change: transform;
}

.pe-trust-track:hover {
  animation-play-state: paused;
}

.pe-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #0a5dc2;
  font-size: 0.865rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  padding: 0.15rem 0.35rem;
  user-select: none;
  transition: all 0.2s ease;
}

.pe-trust-item:hover {
  color: #0369a1;
}

.pe-trust-item i {
  font-size: 1.1rem;
  color: #0a5dc2;
  flex-shrink: 0;
}

.pe-trust-divider {
  width: 1px;
  height: 14px;
  background-color: rgba(10, 93, 194, 0.25);
  flex-shrink: 0;
}

@keyframes peTrustTickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333333%); }
}

/* =========================================================
   HERO ADMIN SEGMENTED TABS
   ========================================================= */
.pe-hero-nav-tabs-container {
  background: #ffffff;
  padding: 0.45rem;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 18px rgba(0, 30, 60, 0.04);
}

.pe-hero-segmented-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.pe-hero-segmented-tabs .nav-link {
  color: #475569;
  font-weight: 600;
  font-size: 0.895rem;
  padding: 0.62rem 1.35rem;
  border-radius: 12px;
  border: none;
  transition: all 0.2s ease;
  background: transparent;
  display: inline-flex;
  align-items: center;
}

.pe-hero-segmented-tabs .nav-link:hover {
  color: #0a5dc2;
  background: rgba(10, 93, 194, 0.06);
}

.pe-hero-segmented-tabs .nav-link.active {
  background: #0a5dc2 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(10, 93, 194, 0.25);
}

.pe-hero-segmented-tabs .nav-link.active .badge {
  background: #ffffff !important;
  color: #0a5dc2 !important;
}

/* =========================================================
   HERO — Ultra-Modern Premium Banner Style
   ========================================================= */
.pe-promo-banner {
  background: linear-gradient(135deg, #0a5dc2 0%, #0284c7 100%);
  position: relative;
  overflow: hidden;
  padding: 2.25rem 0 2.5rem;
}
.pe-promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(0, 168, 255, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 10% 80%, rgba(72, 52, 212, 0.2) 0%, transparent 45%);
  pointer-events: none;
}
.pe-promo-banner::after {
  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='none' fill-rule='evenodd'%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/g%3E%3C/svg%3E");
  pointer-events: none;
}

.pe-hero-content-box {
  position: relative;
  z-index: 2;
}

.pe-hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.pe-hero-title {
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 0.85rem;
  letter-spacing: -0.02em;
}

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

.pe-hero-subtext {
  color: rgba(241, 245, 249, 0.92);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 560px;
}

.pe-hero-cta-group {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  flex-wrap: wrap;
}

.pe-hero-btn {
  border-radius: 50px;
  padding: 0.75rem 1.65rem;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.pe-promo-search {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  padding: 0.35rem 0.35rem 0.35rem 1.25rem;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.pe-promo-search input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 0.95rem;
  background: transparent;
  color: #0f172a;
  min-width: 0;
}
.pe-promo-search input::placeholder {
  color: #94a3b8;
}
.pe-promo-search button {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 0.65rem 1.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.pe-promo-search button:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: scale(1.02);
}

/* Right Side Image Visual & Showcase */
.pe-hero-visual-wrapper {
  position: relative;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pe-hero-img-container {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.45), 0 0 30px rgba(56, 189, 248, 0.25);
  border: 4px solid rgba(255, 255, 255, 0.35);
  background: rgba(15, 23, 42, 0.6);
  display: block;
  transition: all 0.35s ease;
}

.pe-hero-main-img {
  width: 100%;
  height: 490px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pe-hero-img-container:hover .pe-hero-main-img {
  transform: scale(1.03);
}

.pe-hero-img-overlay {
  display: none;
}

.pe-glass-badge {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 0.75rem 1rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 5;
  animation: heroFloat 4s ease-in-out infinite alternate;
}

.pe-float-badge-1 {
  top: -10px;
  left: -20px;
}

.pe-float-badge-2 {
  bottom: 30px;
  left: -25px;
  animation-delay: -1.5s;
}

.pe-float-badge-3 {
  top: 40%;
  right: -20px;
  animation-delay: -3s;
}

@keyframes heroFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

.pe-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.pe-badge-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.pe-badge-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

/* 5 Feature Cards Grid */
.pe-hero-features-grid {
  position: relative;
  z-index: 3;
}

.pe-feature-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  text-decoration: none !important;
  color: #0f172a;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
}

.pe-feature-card:hover {
  background: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.pe-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.pe-feature-title {
  font-weight: 800;
  font-size: 0.9rem;
  color: #0f172a;
  line-height: 1.2;
}

.pe-feature-desc {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 0.15rem;
}

@media (max-width: 991px) {
  .pe-float-badge-1, .pe-float-badge-2, .pe-float-badge-3 {
    position: static;
    margin-bottom: 0.75rem;
    animation: none;
  }
  .pe-hero-visual-wrapper {
    margin-top: 2rem;
  }
}


/* =========================================================
   COURSE CARDS — Edufast style
   ========================================================= */
.pe-course-card{border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);background:#fff;transition:var(--pe-transition);overflow:hidden;}
.pe-course-card:hover{box-shadow:var(--pe-shadow-md);transform:translateY(-4px);}
.pe-course-card-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.pe-course-card-body{padding:1.1rem 1.25rem 1.25rem;}
.pe-course-card-cat{font-size:0.75rem;font-weight:700;color:var(--pe-primary);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.4rem;}
.pe-course-card-title{font-size:1rem;font-weight:700;color:var(--pe-heading);line-height:1.35;margin-bottom:0.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pe-course-card-instructor{font-size:0.8125rem;color:var(--pe-text-muted);}
.pe-course-card-meta{display:flex;gap:1rem;font-size:0.8rem;color:var(--pe-text-muted);margin-top:0.6rem;}
.pe-course-card-footer{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.25rem;border-top:1px solid var(--pe-border);}
.pe-price{font-size:1.1rem;font-weight:800;color:var(--pe-heading);}
.pe-price-strike{font-size:0.85rem;color:var(--pe-text-muted);text-decoration:line-through;margin-left:0.3rem;}

/* =========================================================
   TEAM CARDS
   ========================================================= */
.pe-team-card{text-align:center;border-radius:var(--pe-radius-lg);padding:2rem 1.5rem;border:1px solid var(--pe-border);background:#fff;transition:var(--pe-transition);}
.pe-team-card:hover{box-shadow:var(--pe-shadow-md);transform:translateY(-4px);}
.pe-team-avatar{width:6rem;height:6rem;border-radius:50%;object-fit:cover;border:3px solid var(--pe-primary-light);margin:0 auto 1rem;}
.pe-team-name{font-weight:700;font-size:1.05rem;color:var(--pe-heading);}
.pe-team-role{font-size:0.8125rem;color:var(--pe-primary);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;}

/* =========================================================
   PROFILE AVATAR UPLOAD
   ========================================================= */
.pe-avatar-upload{position:relative;display:inline-block;cursor:pointer;width:6rem;height:6rem;}
.pe-avatar-upload img{width:100%;height:100%;}
.pe-avatar-upload-icon{position:absolute;bottom:-2px;right:-2px;width:1.85rem;height:1.85rem;background:var(--pe-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.9rem;border:2px solid #fff;}
.pe-avatar-upload:hover .pe-avatar-upload-icon{background:var(--pe-primary-dark);}

/* =========================================================
   SUBJECT / CATEGORY CARDS
   ========================================================= */
.pe-subject-card{border-radius:var(--pe-radius-lg);padding:1.5rem;border:1px solid var(--pe-border);background:#fff;transition:var(--pe-transition);cursor:pointer;}
.pe-subject-card:hover{border-color:var(--pe-primary);box-shadow:var(--pe-shadow-md);}
.pe-category-icon{width:3rem;height:3rem;border-radius:var(--pe-radius-lg);background:var(--pe-primary-light);color:var(--pe-primary);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:0.85rem;}

/* =========================================================
   SERVICE CARDS (homepage features)
   ========================================================= */
.pe-service-card{border-radius:var(--pe-radius-lg);padding:1.75rem;border:1px solid var(--pe-border);background:#fff;height:100%;transition:var(--pe-transition);}
.pe-service-card:hover{border-color:var(--pe-primary);box-shadow:var(--pe-shadow-md);}
.pe-service-icon{width:3.5rem;height:3.5rem;border-radius:var(--pe-radius-lg);background:var(--pe-primary-light);color:var(--pe-primary);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem;}

/* =========================================================
   BLOG CARDS
   ========================================================= */
.pe-blog-card{border-radius:var(--pe-radius-lg);overflow:hidden;border:1px solid var(--pe-border);background:#fff;transition:var(--pe-transition);}
.pe-blog-card:hover{box-shadow:var(--pe-shadow-md);transform:translateY(-3px);}
.pe-blog-card-body{padding:1.25rem;}

/* =========================================================
   INSTRUCTOR PROFILE
   ========================================================= */
.pe-instructor-card{border-radius:var(--pe-radius-lg);overflow:hidden;border:1px solid var(--pe-border);background:#fff;transition:var(--pe-transition);}
.pe-instructor-avatar{width:5rem;height:5rem;border-radius:50%;object-fit:cover;border:3px solid var(--pe-primary-light);}

/* =========================================================
   LEARN PAGE (lesson player)
   ========================================================= */
.pe-learn-layout{display:grid;grid-template-columns:1fr 320px;gap:0;min-height:calc(100vh - 64px);}
.pe-learn-main{padding:1.5rem;border-right:1px solid var(--pe-border);}
.pe-learn-sidebar{height:calc(100vh - 64px);overflow-y:auto;position:sticky;top:64px;padding:1rem;}
.pe-video-wrapper{position:relative;background:#000;border-radius:var(--pe-radius-lg);overflow:hidden;aspect-ratio:16/9;}
.pe-video-wrapper iframe,.pe-video-wrapper video{width:100%;height:100%;border:none;display:block;}
.pe-lesson-item{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0.75rem;border-radius:var(--pe-radius);cursor:pointer;transition:var(--pe-transition);font-size:0.875rem;}
.pe-lesson-item:hover{background:var(--pe-primary-light);}
.pe-lesson-item.active{background:var(--pe-primary-light);color:var(--pe-primary);font-weight:600;}
@media(max-width:991px){.pe-learn-layout{grid-template-columns:1fr;}.pe-learn-sidebar{height:auto;position:static;}}

/* =========================================================
   FOOTER — dark navy Edufast style
   ========================================================= */
.pe-footer{background:var(--pe-secondary);color:#b9cce3;padding:3.5rem 0 1.5rem;}
.pe-footer h5,.pe-footer h6{color:#fff;font-weight:700;margin-bottom:1.1rem;}
.pe-footer a{color:#b9cce3;font-size:0.9rem;transition:var(--pe-transition);}
.pe-footer a:hover{color:#fff;}
.pe-footer-divider{border-color:rgba(255,255,255,.1);}
.pe-footer-copy{color:#6a7a90;font-size:0.8125rem;}
.pe-social-links{display:flex;gap:0.6rem;flex-wrap:wrap;}
.pe-social-link{width:2.25rem;height:2.25rem;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#b9cce3;transition:var(--pe-transition);}
.pe-social-link:hover{background:var(--pe-primary);color:#fff;}

/* =========================================================
   MISC
   ========================================================= */
.pe-brand{display:flex;align-items:center;gap:0.65rem;font-weight:800;font-size:1.2rem;text-decoration:none;}
.pe-divider{border:none;border-top:1px solid var(--pe-border);margin:2rem 0;}
.pe-empty-state{text-align:center;padding:3rem 2rem;color:var(--pe-text-muted);}
.pe-empty-state i{font-size:3rem;opacity:.4;margin-bottom:1rem;}

/* =========================================================
   SECTION HEADING PATTERN (Edufast)
   ========================================================= */
.pe-section-head{margin-bottom:2.5rem;}
.pe-section-head .pe-section-label{margin-bottom:0.5rem;}
.pe-section-head h2{margin-bottom:0.6rem;}
.pe-section-head p{color:var(--pe-text-muted);font-size:1rem;max-width:560px;}

/* =========================================================
   LIVE CLASS / EVENT CARDS
   ========================================================= */
.pe-live-badge{background:rgba(240,93,93,.12);color:var(--pe-danger);font-size:0.7rem;font-weight:700;border-radius:var(--pe-radius-pill);padding:0.2em 0.7em;text-transform:uppercase;letter-spacing:0.04em;}

/* =========================================================
   AUTH PAGES
   ========================================================= */
.pe-auth-card{max-width:460px;width:100%;margin:auto;padding:2.5rem;border-radius:var(--pe-radius-lg);box-shadow:var(--pe-shadow-md);background:#fff;}
.pe-auth-card h3{font-weight:800;margin-bottom:0.25rem;}

/* =========================================================
   DASHBOARD / STUDENT AREA
   ========================================================= */
.pe-stat-card{border-radius:var(--pe-radius-lg);padding:1.5rem;background:#fff;border:1px solid var(--pe-border);box-shadow:var(--pe-shadow);}
.pe-stat-icon{width:3rem;height:3rem;border-radius:var(--pe-radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.4rem;}

/* =========================================================
   NAVBAR — mega-menu + nav-search
   ========================================================= */
/* Nav search */
.pe-nav-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: #F4F6F9;
  border: 1px solid #E2E8F0;
  border-radius: 100px;
  padding: 0.28rem 0.28rem 0.28rem 0.85rem;
  min-width: 160px;
  max-width: 210px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pe-nav-search:focus-within {
  background: #FFFFFF;
  border-color: var(--pe-primary);
  max-width: 240px;
  box-shadow: 0 0 0 3.5px rgba(10, 93, 194, 0.12);
}
.pe-nav-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pe-heading);
  flex: 1;
  width: 100%;
}
.pe-nav-search input::placeholder {
  color: #94A3B8;
  font-weight: 400;
}
.pe-nav-search .pe-search-btn {
  border: none;
  background: var(--pe-primary);
  color: #ffffff;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.pe-nav-search .pe-search-btn:hover {
  background: var(--pe-primary-dark);
  transform: scale(1.05);
}
.pe-nav-search .pe-search-btn i {
  color: #ffffff !important;
  font-size: 0.9rem;
}
.pe-nav-search .pe-search-icon {
  color: var(--pe-text-muted);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Mega menu */
.pe-mega-parent{position:static!important;}
.pe-mega-arrow{transition:transform .25s ease;font-size:.85rem;}
.pe-mega-parent:hover .pe-mega-arrow{transform:rotate(-180deg);}
.pe-mega-menu{
  display:none;position:fixed;left:0;right:0;top:100%;z-index:999;
  background:#fff;border-top:3px solid var(--pe-primary);
  box-shadow:0 20px 60px rgba(0,30,60,.12);padding:2rem 0;
}
.pe-mega-parent:hover .pe-mega-menu,.pe-mega-menu:hover{display:block;}
.pe-mega-inner{display:flex;gap:0;max-width:1200px;margin:0 auto;padding:0 1.5rem;}
.pe-mega-col{flex:1;padding:0 1.25rem;border-right:1px solid var(--pe-border);}
.pe-mega-col:last-child{border-right:none;}
.pe-mega-col-other{background:var(--pe-body-bg);border-radius:var(--pe-radius-lg);}
.pe-mega-year-head{margin-bottom:1rem;}
.pe-mega-year-badge{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--pe-primary);color:#fff;font-weight:800;font-size:.8rem;}
.pe-mega-year-badge-other{background:var(--pe-text-muted);}
.pe-mega-year-sub{display:block;font-size:.7rem;color:var(--pe-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:.25rem;}
.pe-mega-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.15rem;}
.pe-mega-list a{display:block;padding:.4rem .5rem;color:var(--pe-text);font-size:.875rem;border-radius:var(--pe-radius);transition:var(--pe-transition);}
.pe-mega-list a:hover{background:var(--pe-primary-light);color:var(--pe-primary);padding-left:.85rem;}

/* =========================================================
   COURSE HERO — dark navy bg so white text is visible (fix #8)
   ========================================================= */
.pe-course-hero{background:linear-gradient(135deg,#00264d 0%,#0a5dc2 100%);padding:3rem 0 2.5rem;}
.pe-course-hero .badge-soft-info{background:rgba(255,255,255,.15);color:#fff;}

/* =========================================================
   FEATURED COURSES SWIPER CARDS (fix #4)
   ========================================================= */
.pe-fc-card{background:#fff;border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);overflow:hidden;display:flex;flex-direction:column;height:100%;transition:box-shadow .3s ease,transform .3s ease;}
.pe-fc-card:hover{box-shadow:var(--pe-shadow-md);transform:translateY(-6px);}
.pe-fc-thumb{height:160px;background:linear-gradient(135deg,var(--pe-primary) 0%,var(--pe-info) 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.pe-fc-thumb-bg{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M20 0L40 20L20 40L0 20Z'/%3E%3C/g%3E%3C/svg%3E");}
.pe-fc-play-icon{position:relative;z-index:1;width:3.5rem;height:3.5rem;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.75rem;transition:transform .3s ease,background .3s ease;}
.pe-fc-card:hover .pe-fc-play-icon{transform:scale(1.15);background:rgba(255,255,255,.35);}
.pe-fc-level{position:absolute;top:.75rem;left:.75rem;background:rgba(0,0,0,.35);color:#fff;font-size:.7rem;font-weight:700;border-radius:var(--pe-radius-pill);padding:.2em .7em;letter-spacing:.04em;}
.pe-fc-body{padding:1.1rem 1.25rem;flex:1;}
.pe-fc-cat{font-size:.7rem;font-weight:700;color:var(--pe-primary);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:.35rem;}
.pe-fc-title{font-size:1rem;font-weight:700;color:var(--pe-heading);line-height:1.35;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pe-fc-instructor{font-size:.8125rem;color:var(--pe-text-muted);display:flex;align-items:center;gap:.35rem;margin-bottom:.5rem;}
.pe-fc-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--pe-text-muted);}
.pe-fc-meta .ri-star-fill{color:var(--pe-warning);}
.pe-fc-footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid var(--pe-border);}
.pe-fc-free{color:var(--pe-success);font-weight:700;font-size:.875rem;display:flex;align-items:center;gap:.3rem;}

/* =========================================================
   TEAM CAROUSEL CARDS (fix #2 & #7)
   ========================================================= */
.pe-team-swiper{padding:1rem .5rem 3rem;}
.pe-team-slide-card{background:#fff;border:1px solid var(--pe-border);border-radius:var(--pe-radius-lg);overflow:hidden;box-shadow:var(--pe-shadow);transition:box-shadow .3s,transform .3s;text-align:center;}
.pe-team-slide-card:hover{box-shadow:var(--pe-shadow-md);transform:translateY(-4px);}
.pe-team-slide-img-wrap{position:relative;overflow:hidden;aspect-ratio:1/1;max-width:200px;margin:1.5rem auto 0;}
.pe-team-slide-img-wrap img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid var(--pe-primary-light);transition:transform .4s ease;}
.pe-team-slide-card:hover .pe-team-slide-img-wrap img{transform:scale(1.05);}
.pe-team-slide-overlay{position:absolute;inset:0;border-radius:50%;background:rgba(10,93,194,.85);opacity:0;display:flex;align-items:center;justify-content:center;padding:1rem;transition:opacity .35s ease;}
.pe-team-slide-card:hover .pe-team-slide-overlay{opacity:1;}
.pe-team-slide-bio{color:#fff;font-size:.8rem;line-height:1.5;font-weight:500;}
.pe-team-slide-info{padding:1.25rem 1.25rem 1.5rem;}

/* =========================================================
   SWIPER SHARED CONTROLS
   ========================================================= */
/* Numbered Swiper Pagination for Courses */
.pe-courses-swiper .pe-swiper-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  bottom: 0 !important;
  margin-top: 1.25rem !important;
}
.pe-courses-swiper .pe-swiper-pagination .swiper-pagination-bullet {
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  text-align: center !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: #e2e8f0 !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
  margin: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.pe-courses-swiper .pe-swiper-pagination .swiper-pagination-bullet:hover {
  background: #cbd5e1 !important;
  transform: translateY(-2px) !important;
}
.pe-courses-swiper .pe-swiper-pagination .swiper-pagination-bullet-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  transform: scale(1.15) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4) !important;
}

.pe-swiper-pagination .swiper-pagination-bullet{background:var(--pe-primary);opacity:.3;width:.6rem;height:.6rem;}
.pe-swiper-pagination .swiper-pagination-bullet-active{opacity:1;width:1.5rem;border-radius:1rem;}
.pe-swiper-prev,.pe-swiper-next{width:2.5rem!important;height:2.5rem!important;background:var(--pe-primary)!important;border-radius:50%!important;color:#fff!important;}
.pe-swiper-prev::after,.pe-swiper-next::after{font-size:.85rem!important;font-weight:900!important;}
.pe-swiper-prev{left:0!important;}
.pe-swiper-next{right:0!important;}

/* =========================================================
   CTA SECTION (fix #1 & #3)
   ========================================================= */
.pe-cta-section{background:linear-gradient(120deg,var(--pe-secondary) 0%,var(--pe-primary) 60%,var(--pe-info) 130%);padding:5rem 0;}
.pe-cta-inner{position:relative;z-index:1;}
.pe-cta-title{font-size:clamp(1.75rem,4vw,3rem);font-weight:800;color:#fff;line-height:1.15;margin-bottom:.75rem;}
.pe-cta-sub{color:rgba(255,255,255,.8);font-size:1.05rem;max-width:520px;margin:0 auto;}
.pe-cta-btn{background:#fff;color:var(--pe-primary);border:none;font-weight:700;}
.pe-cta-btn:hover{background:var(--pe-primary-light);color:var(--pe-primary-dark)!important;transform:translateY(-2px);}
.pe-cta-note{color:rgba(255,255,255,.6);font-size:.8125rem;}
.btn-outline-light:hover{background:rgba(255,255,255,.15)!important;color:#fff!important;border-color:rgba(255,255,255,.4)!important;}

/* =========================================================
   SUBJECTS PAGE (fix #6)
   ========================================================= */
.pe-subjects-hero{background:linear-gradient(120deg,var(--pe-secondary) 0%,var(--pe-primary) 100%);padding:3rem 0 2.5rem;color:#fff;}
.pe-subjects-hero h1{color:#fff;}
.pe-subjects-search{display:flex;align-items:center;gap:.5rem;background:#fff;border-radius:var(--pe-radius-pill);padding:.4rem .4rem .4rem 1.1rem;}
.pe-subjects-search i{color:var(--pe-text-muted);}
.pe-subjects-search input{border:none;outline:none;flex:1;font-size:.9375rem;}

.pe-year-tabs{display:flex;gap:.5rem;flex-wrap:wrap;background:#fff;padding:.75rem;border-radius:var(--pe-radius-lg);border:1px solid var(--pe-border);box-shadow:var(--pe-shadow);}
.pe-year-tab{display:flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;border:1.5px solid var(--pe-border);border-radius:var(--pe-radius-pill);background:#fff;cursor:pointer;font-size:.875rem;font-weight:600;color:var(--pe-text);transition:var(--pe-transition);}
.pe-year-tab:hover{border-color:var(--pe-primary);color:var(--pe-primary);}
.pe-year-tab.active{background:var(--pe-primary);color:#fff;border-color:var(--pe-primary);}
.pe-year-tab small{font-size:.7rem;opacity:.75;font-weight:500;}
.pe-year-num{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--pe-primary-light);color:var(--pe-primary);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;}
.pe-year-tab.active .pe-year-num{background:rgba(255,255,255,.25);color:#fff;}

.pe-year-group-badge{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--pe-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;flex-shrink:0;}

.pe-subj-card{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;background:#fff;border:1.5px solid var(--pe-border);border-radius:var(--pe-radius-lg);transition:all .25s ease;cursor:pointer;}
.pe-subj-card:hover{border-color:var(--pe-primary);box-shadow:var(--pe-shadow-md);transform:translateY(-2px);}
.pe-subj-card:hover .pe-subj-card-arrow{opacity:1;transform:translateX(4px);}
.pe-subj-card-icon{width:2.75rem;height:2.75rem;border-radius:var(--pe-radius-lg);background:var(--pe-primary-light);color:var(--pe-primary);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;transition:var(--pe-transition);}
.pe-subj-card:hover .pe-subj-card-icon{background:var(--pe-primary);color:#fff;}
.pe-subj-card-body{flex:1;min-width:0;}
.pe-subj-card-name{font-size:.875rem;font-weight:700;color:var(--pe-heading);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pe-subj-card-count{font-size:.75rem;color:var(--pe-text-muted);display:flex;align-items:center;gap:.25rem;}
.pe-subj-card-arrow{color:var(--pe-primary);font-size:1rem;opacity:0;transition:all .25s ease;flex-shrink:0;}

/* =========================================================
   EYEBROW / SECTION HEADING HELPERS
   ========================================================= */
.pe-eyebrow{display:inline-block;color:var(--pe-primary);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem;}
.pe-section-title{font-size:clamp(1.4rem,3vw,2.25rem);font-weight:800;color:var(--pe-heading);line-height:1.15;}
.pe-section-sub{color:var(--pe-text-muted);font-size:1rem;}

/* =========================================================
   PROFILE (fix #11) — clear avatar upload button
   ========================================================= */


/* =========================================================
   ANIMATIONS (fix #12 & #13)
   ========================================================= */
@keyframes peSlideUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes peFadeIn{from{opacity:0;}to{opacity:1;}}
.pe-animate-up{animation:peSlideUp .5s ease both;}
.pe-animate-fade{animation:peFadeIn .5s ease both;}

/* Card hover lift for general cards */
.card{transition:box-shadow .3s ease,transform .3s ease;}
.card:hover{box-shadow:var(--pe-shadow-md);transform:translateY(-2px);}

/* =========================================================
   RESPONSIVENESS (fix #12)
   ========================================================= */
@media(max-width:991px){
  .pe-mega-menu{position:static!important;display:none!important;}
  .pe-mega-parent.show .pe-mega-menu{display:block!important;}
  .pe-mega-inner{flex-direction:column;gap:1rem;}
  .pe-mega-col{border-right:none;border-bottom:1px solid var(--pe-border);padding-bottom:1rem;}
  .pe-mega-col:last-child{border-bottom:none;}
  .pe-year-tabs{gap:.35rem;}
  .pe-year-tab small{display:none;}
}
@media(max-width:576px){
  .pe-subj-card-arrow{display:none;}
  .pe-promo-card{max-width:100%;}
  .pe-cta-title{font-size:1.6rem;}
}

/* =========================================================
   SUBJECTS DROPDOWN — nested submenus (fix)
   ========================================================= */
.pe-subjects-menu {
  min-width: 240px;
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius-lg);
  box-shadow: 0 10px 40px rgba(0,30,60,.12);
  padding: .5rem;
}
.pe-subjects-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: var(--pe-radius);
  font-weight: 600;
  font-size: .875rem;
  padding: .55rem .9rem;
  color: var(--pe-text);
  transition: var(--pe-transition);
}
.pe-subjects-menu .dropdown-item:hover,
.pe-subjects-menu .dropdown-item:focus {
  background: var(--pe-primary-light);
  color: var(--pe-primary);
}
.pe-year-dot {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pe-subjects-menu small { font-size: .7rem; font-weight: 500; opacity: .7; margin-left: .25rem; }
.pe-subjects-menu .ri-arrow-right-s-line { margin-left: auto; opacity: .5; font-size: 1rem; }

/* Nested submenu */
.dropdown-submenu { position: relative; }
.pe-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 240px;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.14);
  padding: .6rem;
  background: #fff;
  z-index: 1060;
  animation: peDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Show submenu on hover (desktop) */
@media (min-width: 992px) {
  .dropdown-submenu:hover > .pe-submenu { display: block; }
  .pe-submenu-trigger:hover ~ .pe-submenu { display: block; }
}
/* Mobile: open submenu on click via JS class */
.dropdown-submenu.open > .pe-submenu { display: block; }

.pe-submenu .dropdown-item {
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem .85rem;
  border-radius: 8px;
}
.pe-submenu .dropdown-item:hover {
  background: rgba(10, 93, 194, 0.08);
  color: #0a5dc2;
  transform: translateX(3px);
}

/* On small screens, flip submenu to left if near right edge */
@media (max-width: 1200px) {
  .pe-submenu { left: auto; right: 100%; }
}
@media (max-width: 991px) {
  .pe-submenu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 3px solid rgba(10, 93, 194, 0.2);
    border-radius: 0;
    margin-left: 1rem;
    padding: .25rem 0;
  }
  .pe-subjects-menu { min-width: 100%; }
}

/* =========================================================
   AUTH PAGES — tabs, face recognition UI
   ========================================================= */
.pe-auth-wrapper { min-height: calc(100vh - 120px); display: flex; align-items: center; padding: 2rem 0; background: var(--pe-body-bg); }
.pe-auth-card { background: #fff; border-radius: var(--pe-radius-lg); box-shadow: var(--pe-shadow-md); padding: 2.5rem; }

.pe-auth-tabs { display: flex; gap: .5rem; background: var(--pe-body-bg); border-radius: var(--pe-radius-pill); padding: .35rem; }
.pe-auth-tab { flex: 1; border: none; background: transparent; border-radius: var(--pe-radius-pill); padding: .55rem 1rem; font-size: .875rem; font-weight: 600; color: var(--pe-text-muted); cursor: pointer; transition: var(--pe-transition); display: flex; align-items: center; justify-content: center; gap: .4rem; }
.pe-auth-tab.active { background: var(--pe-primary); color: #fff; box-shadow: 0 2px 8px rgba(10,93,194,.3); }
.pe-auth-tab:hover:not(.active) { color: var(--pe-primary); }

/* Password toggle button */
.pe-pwd-toggle { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--pe-text-muted); cursor: pointer; padding: .25rem; font-size: 1rem; }

/* Face camera box */
.pe-face-box { background: var(--pe-body-bg); border-radius: var(--pe-radius-lg); padding: 1.25rem; border: 1.5px solid var(--pe-border); }
.pe-face-cam-wrap { position: relative; width: 100%; aspect-ratio: 4/3; max-height: 280px; background: #000; border-radius: var(--pe-radius-lg); overflow: hidden; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.pe-face-cam-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.pe-face-cam-wrap canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Animated scanning frame */
.pe-face-frame { position: absolute; inset: 12%; border: 2.5px solid var(--pe-primary); border-radius: 50%; animation: peFacePulse 2s ease-in-out infinite; pointer-events: none; }
@keyframes peFacePulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 6px rgba(10,93,194,.15); } }

/* Status bar */
.pe-face-status { position: absolute; bottom: 0; left: 0; right: 0; padding: .5rem .75rem; font-size: .8rem; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; gap: .4rem; background: rgba(0,0,0,.55); color: #fff; }
.pe-face-success { background: rgba(47,167,95,.85) !important; }
.pe-face-error   { background: rgba(240,93,93,.85) !important; }
.pe-face-info    { background: rgba(10,93,194,.8)  !important; }

/* Face register section */
.pe-face-register-section { border: 1.5px solid var(--pe-border); border-radius: var(--pe-radius-lg); padding: 1rem 1.25rem; background: var(--pe-body-bg); }

/* Spin animation for loader icon */
.pe-spin { display: inline-block; animation: peSpin 1s linear infinite; }
@keyframes peSpin { to { transform: rotate(360deg); } }

/* Login result flash area */
#faceLoginResult { font-size: .875rem; font-weight: 600; text-align: center; }

/* =========================================================
   SUBJECTS NESTED DROPDOWN (Bootstrap submenu pattern)
   ========================================================= */
.pe-subjects-menu {
  min-width: 260px;
  padding: 0.5rem 0;
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius-lg);
  box-shadow: 0 8px 30px rgba(0,30,60,.12);
}
.pe-subjects-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--pe-text);
  border-radius: 0;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
}
.pe-subjects-menu .dropdown-item:hover {
  background: var(--pe-primary-light);
  color: var(--pe-primary);
  padding-left: 1.4rem;
}
.pe-year-dot {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pe-submenu-trigger small { font-size: 0.7rem; margin-left: 0.3rem; }
.pe-submenu-trigger .ri-arrow-right-s-line { margin-left: auto; font-size: 1rem; transition: transform 0.2s; }
.pe-submenu-trigger:hover .ri-arrow-right-s-line,
.dropdown-submenu.open > .pe-submenu-trigger .ri-arrow-right-s-line { transform: rotate(90deg); }

/* Submenu panel */
.dropdown-submenu { position: relative; }
.pe-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 220px;
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius-lg);
  box-shadow: 0 8px 30px rgba(0,30,60,.12);
  background: #fff;
  z-index: 9999;
  padding: 0.4rem 0;
}
/* Show submenu on hover (desktop) */
@media (min-width: 992px) {
  .dropdown-submenu:hover > .pe-submenu,
  .dropdown-submenu.open > .pe-submenu { display: block; }
  .pe-submenu { left: 100%; top: -4px; }
}
/* Mobile: submenu opens inline below */
@media (max-width: 991px) {
  .pe-submenu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--pe-primary-light);
    margin-left: 1rem;
    margin-top: 0.25rem;
    border-radius: 0;
    padding-left: 0.5rem;
  }
}

/* =========================================================
   GENERIC PAGE HERO — used on About and similar pages
   (gradient banner consistent with Home/Team hero styling)
   ========================================================= */
.pe-hero {
  background: linear-gradient(135deg, #00264d 0%, #0a5dc2 100%);
  padding: 4.5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.pe-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='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%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/g%3E%3C/svg%3E");
}
.pe-hero > .container { position: relative; z-index: 1; }
.pe-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,.14); color: #fff;
  border-radius: var(--pe-radius-pill); padding: 0.35rem 1rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.pe-hero h1 { color: #fff; }
.pe-hero p.lead { color: rgba(255,255,255,.9); font-size: 1.1rem; }

/* Small gradient hero strip variant (Blog, Live Classes, etc.) */
.pe-hero-strip {
  background: linear-gradient(120deg, var(--pe-secondary) 0%, var(--pe-primary) 100%);
  padding: 3rem 0 2.5rem;
  color: #fff;
}
.pe-hero-strip h1 { color: #fff; }
.pe-hero-strip p { color: rgba(255,255,255,.85); }

/* =========================================================
   ABOUT PAGE — polished icon tiles & value cards
   ========================================================= */
.pe-about-step {
  background: #fff; border: 1px solid var(--pe-border); border-radius: var(--pe-radius-lg);
  padding: 2rem 1.5rem; height: 100%; transition: var(--pe-transition);
  box-shadow: var(--pe-shadow);
}
.pe-about-step:hover { box-shadow: var(--pe-shadow-md); transform: translateY(-4px); }
.pe-about-icon-gradient {
  width: 3.25rem; height: 3.25rem; border-radius: var(--pe-radius-lg);
  background: linear-gradient(135deg, var(--pe-primary) 0%, var(--pe-info) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 1rem; box-shadow: 0 6px 16px rgba(10,93,194,.25);
  transition: transform .3s ease;
}
.pe-about-step:hover .pe-about-icon-gradient { transform: scale(1.08) rotate(-4deg); }
.pe-value-card {
  border: 1px solid var(--pe-border); border-radius: var(--pe-radius-lg);
  background: linear-gradient(180deg, #fff 0%, var(--pe-primary-light) 130%);
  box-shadow: var(--pe-shadow); transition: var(--pe-transition);
}
.pe-value-card:hover { box-shadow: var(--pe-shadow-md); transform: translateY(-4px); }

/* =========================================================
   BLOG — polished filter pills & post cards
   ========================================================= */
.pe-blog-card {
  border: 1px solid var(--pe-border); border-radius: var(--pe-radius-lg);
  background: #fff; box-shadow: var(--pe-shadow); overflow: hidden;
  transition: var(--pe-transition); position: relative;
}
.pe-blog-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--pe-primary), var(--pe-info));
  opacity: 0; transition: opacity .3s ease;
}
.pe-blog-card:hover { box-shadow: var(--pe-shadow-md); transform: translateY(-6px); }
.pe-blog-card:hover::before { opacity: 1; }
.pe-blog-type-badge{ background: var(--pe-primary-light); color: var(--pe-primary); }


.pe-team-hero {
  background: linear-gradient(135deg, #00264d 0%, #0a5dc2 100%);
  padding: 4rem 0 3rem;
}
.pe-team-hero .pe-section-label { background: rgba(255,255,255,.14); color: #fff; }
.pe-team-hero h1 { color: #fff; }
.text-white-75 { color: rgba(255,255,255,.92) !important; }
.pe-team-hero p.text-white-75 { color: rgba(255,255,255,.92) !important; font-size: 1.05rem; }
.pe-team-hero p.text-white-75 em { color: #fff; font-weight: 600; }
.pe-pro-card {
  background: #fff;
  border: 1px solid var(--pe-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--pe-shadow);
  transition: box-shadow 0.3s, transform 0.3s;
  height: 100%;
}
.pe-pro-card:hover { box-shadow: var(--pe-shadow-md); transform: translateY(-6px); }
.pe-pro-card-top {
  position: relative;
  background: linear-gradient(135deg, var(--pe-primary-light) 0%, #dce8f8 100%);
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
}
.pe-pro-img-wrap {
  width: 7rem; height: 7rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(10,93,194,.2);
}
.pe-pro-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.pe-pro-img-sm { width: 5.5rem; height: 5.5rem; }
.pe-pro-badge {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  background: var(--pe-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--pe-radius-pill);
  padding: 0.25em 0.75em;
  display: flex; align-items: center; gap: 0.3rem;
}
.pe-pro-badge-advisory { background: var(--pe-success); }
.pe-pro-card-body { padding: 1.25rem 1.5rem 1.5rem; text-align: center; }
.pe-pro-name { font-size: 1.05rem; font-weight: 700; color: var(--pe-heading); margin-bottom: 0.2rem; }
.pe-pro-role { font-size: 0.8rem; font-weight: 600; color: var(--pe-primary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.pe-pro-qual { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--pe-primary-light); color: var(--pe-primary); font-size: 0.72rem; font-weight: 600; border-radius: var(--pe-radius-pill); padding: 0.2em 0.75em; margin-bottom: 0.75rem; }
.pe-pro-bio { font-size: 0.82rem; color: var(--pe-text-muted); line-height: 1.55; margin-top: 0.5rem; margin-bottom: 0; }
.pe-mini-card { background: #fff; border: 1px solid var(--pe-border); border-radius: var(--pe-radius-lg); padding: 1.5rem 1rem; transition: var(--pe-transition); }
.pe-mini-card:hover { box-shadow: var(--pe-shadow-md); transform: translateY(-3px); }
.pe-mini-avatar { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--pe-primary-light); }

/* =========================================================
   SUBJECT DETAIL — Hero with gradient (fix green circle area)
   ========================================================= */
.pe-subject-hero {
  background: linear-gradient(120deg, #00264d 0%, #0a5dc2 55%, #1a7fd4 100%);
  padding: 3rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.pe-subject-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.04'%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");
}
.pe-subject-hero-icon {
  width: 4rem; height: 4rem;
  border-radius: var(--pe-radius-lg);
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.75rem;
  flex-shrink: 0;
}
.pe-subject-hero-year {
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: var(--pe-radius-pill);
  padding: 0.2em 0.85em;
  margin-bottom: 0.5rem;
}
.pe-breadcrumb {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: rgba(255,255,255,.7);
}
.pe-breadcrumb a { color: rgba(255,255,255,.85); }
.pe-breadcrumb a:hover { color: #fff; }
.pe-subject-stats {
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.pe-subject-stat {
  display: flex; align-items: center; gap: 0.45rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--pe-radius-pill);
  padding: 0.35rem 1rem;
  color: rgba(255,255,255,.9);
  font-size: 0.82rem;
}
.pe-subject-stat i { font-size: 0.95rem; opacity: 0.8; }

/* =========================================================
   CONTENT PROTECTION (right-click, copy, share disable)
   ========================================================= */
.pe-protected {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Screenshot overlay — semi-transparent grid that appears only in screenshots */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  background: transparent;
  mix-blend-mode: difference;
}

/* =========================================================
   COURSE DETAIL — Subject banner in enrollment card (fix #1)
   ========================================================= */
.pe-course-subject-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(120deg, #00264d 0%, #0a5dc2 100%);
  padding: 1.25rem 1.5rem;
}
.pe-course-subject-icon {
  width: 3rem; height: 3rem;
  border-radius: var(--pe-radius-lg);
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.35rem; flex-shrink: 0;
}
.pe-course-subject-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,.65); margin: 0;
}
.pe-course-subject-name {
  font-size: 1rem; font-weight: 800; color: #fff; margin: 0.1rem 0;
}
.pe-course-subject-year {
  display: inline-block;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  font-size: 0.68rem; font-weight: 700;
  border-radius: var(--pe-radius-pill);
  padding: 0.15em 0.65em;
}

/* =========================================================
   AUTH TAB — "Recommended" badge
   ========================================================= */
.pe-auth-tab { position: relative; }
.pe-auth-tab-badge {
  position: absolute;
  top: -8px; right: -4px;
  background: var(--pe-success);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  border-radius: var(--pe-radius-pill);
  padding: 0.15em 0.5em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =========================================================
   TEAM CARDS — fixed uniform image size (fix #4)
   ========================================================= */
.pe-pro-img-fixed {
  width: 6rem !important;
  height: 6rem !important;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(10,93,194,.15);
  flex-shrink: 0;
}
.pe-pro-img-fixed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* =========================================================
   CUSTOM SWIPER ARROWS < > (fix #4)
   ========================================================= */
.pe-swiper-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  z-index: 10;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pe-border);
  box-shadow: var(--pe-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--pe-transition);
  color: var(--pe-primary);
  font-size: 1.4rem;
}
.pe-swiper-arrow:hover {
  background: var(--pe-primary);
  color: #fff;
  border-color: var(--pe-primary);
  box-shadow: var(--pe-shadow-md);
}
.pe-swiper-arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pe-swiper-arrow-prev { left: -1rem; }
.pe-swiper-arrow-next { right: -1rem; }

/* Make section relative for arrow positioning */
.pe-founding-swiper,
.pe-advisory-swiper,
.pe-legal-swiper {
  position: relative;
  padding: 0 2rem 3rem;
}

/* =========================================================
   2FA AUTH — Step bar, notices, input icons
   ========================================================= */

/* Step progress bar */
.pe-step-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--pe-body-bg);
  border-radius: var(--pe-radius-lg);
  padding: 1rem 1.5rem;
  border: 1px solid var(--pe-border);
}
.pe-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.pe-step-num {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--pe-border);
  color: var(--pe-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700;
  transition: var(--pe-transition);
}
.pe-step.active .pe-step-num {
  background: var(--pe-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--pe-primary-light);
}
.pe-step.done .pe-step-num {
  background: var(--pe-success);
  color: #fff;
}
.pe-step span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pe-step.active span { color: var(--pe-primary); }
.pe-step.done span   { color: var(--pe-success); }

.pe-step-line {
  flex: 1;
  height: 2px;
  background: var(--pe-border);
  margin: 0 0.5rem;
  margin-bottom: 1rem;
  border-radius: 2px;
  transition: background 0.4s;
}
.pe-step-line-done { background: var(--pe-success); }

/* 2FA info notice */
.pe-2fa-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--pe-primary-light);
  border: 1px solid rgba(10,93,194,.15);
  border-left: 4px solid var(--pe-primary);
  border-radius: var(--pe-radius-lg);
  padding: 1rem 1.1rem;
  font-size: 0.875rem;
}
.pe-2fa-notice i {
  font-size: 1.35rem;
  color: var(--pe-primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.pe-2fa-notice p { color: var(--pe-text-muted); }

.pe-2fa-notice-face {
  background: rgba(47,167,95,.08);
  border-color: rgba(47,167,95,.15);
  border-left-color: var(--pe-success);
}
.pe-2fa-notice-face i { color: var(--pe-success); }

.pe-2fa-info {
  background: var(--pe-body-bg);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  padding: 0.65rem 1rem;
  font-size: 0.8125rem;
  color: var(--pe-text-muted);
}

/* Input with leading icon */
.pe-input-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pe-text-muted);
  font-size: 1rem;
  pointer-events: none;
  z-index: 4;
}
.pe-input-padded { padding-left: 2.5rem !important; }

/* Step info row */
.pe-step-info {
  background: var(--pe-body-bg);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--pe-text);
}

/* =========================================================
   THERAPY TYPES MARQUEE / TICKER STRIP (Single Line Fix)
   ========================================================= */
.pe-therapy-slider-section {
  background: linear-gradient(90deg, #002244 0%, #0a5dc2 50%, #001e3c 100%);
  padding: 0.85rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.pe-therapy-slider {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: flex;
}
.pe-therapy-track {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
  animation: peTickerScroll 110s linear infinite;
  will-change: transform;
}
.pe-therapy-track:hover {
  animation-play-state: paused;
}
.pe-therapy-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-size: 0.94rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  padding: 0.48rem 1.2rem;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: all 0.25s ease;
  user-select: none;
}
.pe-therapy-pill i {
  font-size: 1.05rem;
}
.pe-therapy-pill:hover {
  background: #ffffff !important;
  color: #0a5dc2 !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

@keyframes peTickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333333%); }
}

/* =========================================================
   COMPREHENSIVE RESPONSIVENESS SYSTEM (Mobile, Tablet, Laptop, 4K)
   ========================================================= */

/* Base Overflow & Image Safety */
html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Touch Targets: minimum 44px x 44px for mobile accessibility */
button, input, select, textarea, .btn, .nav-link, .dropdown-item {
  min-height: 44px;
}

/* Restores natural inline display for links inside prose */
p a, span a, td a, li a, .pe-breadcrumb a, .nav-link, .dropdown-item {
  min-height: auto;
}

/* ---------------------------------------------------------
   1. ULTRA WIDE & LARGE DESKTOPS (1441px+)
   --------------------------------------------------------- */
@media (min-width: 1441px) {
  .container, .container-lg, .container-xl {
    max-width: 1380px !important;
  }
  .pe-section {
    padding: 5.5rem 0;
  }
  .pe-promo-card h1 {
    font-size: 3.5rem;
  }
}

/* ---------------------------------------------------------
   2. DESKTOPS & LAPTOPS (1025px - 1440px)
   --------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1440px) {
  .pe-promo-card h1 {
    font-size: clamp(2rem, 3.2vw, 3rem);
  }
  .pe-section {
    padding: 4.5rem 0;
  }
}

/* ---------------------------------------------------------
   3. SMALL LAPTOPS & TABLETS (769px - 1024px)
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .pe-section {
    padding: 3.5rem 0;
  }
  .pe-promo-banner {
    padding: 2rem 0;
  }
  .pe-hero-title {
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    line-height: 1.18;
  }
  .pe-hero-subtext {
    font-size: 0.98rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
  }
  .pe-hero-main-img {
    height: 380px;
    object-fit: cover;
    object-position: center top;
  }
  .pe-nav-search {
    max-width: 100%;
    width: 100%;
    margin-top: 0.5rem;
  }
  .pe-subjects-menu {
    width: 100%;
  }
  .pe-fc-thumb {
    height: 140px;
  }
  .pe-pro-card-top {
    padding: 1.5rem 1rem 1rem;
  }
}

/* ---------------------------------------------------------
   4. TABLETS & LARGE PHONES (481px - 768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .pe-section {
    padding: 2.5rem 0;
  }
  .pe-promo-banner {
    padding: 1.25rem 0 1.75rem;
  }
  .pe-hero-badge-pill {
    font-size: 0.75rem !important;
    padding: 0.32rem 0.85rem !important;
    margin-bottom: 0.6rem !important;
  }
  .pe-hero-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 0.65rem !important;
  }
  .pe-hero-subtext {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Symmetrical Side-by-Side CTA Buttons */
  .pe-hero-cta-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.65rem !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
  }
  .pe-hero-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
  
  /* Search Bar */
  .pe-promo-search {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.28rem 0.28rem 0.28rem 0.95rem !important;
  }
  .pe-promo-search input {
    font-size: 0.86rem !important;
  }
  .pe-promo-search button {
    padding: 0.5rem 1.1rem !important;
    font-size: 0.84rem !important;
  }

  /* Responsive Hero Image */
  .pe-hero-visual-wrapper {
    margin-top: 1rem !important;
    padding: 0 !important;
  }
  .pe-hero-img-container {
    border-radius: 18px !important;
    border-width: 3px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28) !important;
  }
  .pe-hero-main-img {
    height: auto !important;
    max-height: 250px !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
  }

  /* Feature cards */
  .pe-hero-features-grid {
    margin-top: 1.25rem !important;
    padding-top: 0 !important;
  }
  .pe-feature-card {
    padding: 0.65rem 0.75rem !important;
    border-radius: 12px !important;
  }

  .pe-pro-img-wrap {
    width: 5.5rem;
    height: 5.5rem;
  }
  .pe-subject-hero {
    padding: 2.5rem 0 2rem;
    text-align: center;
  }
  .pe-subject-hero .d-flex {
    justify-content: center;
  }
  .pe-subject-stats {
    justify-content: center;
  }
  .pe-course-subject-banner {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------------------------------------------------------
   5. MOBILE PHONES & COMPACT SCREENS (up to 480px)
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .pe-section {
    padding: 2rem 0;
  }
  .pe-promo-banner {
    padding: 1rem 0 1.35rem;
  }
  .pe-hero-badge-pill {
    font-size: 0.7rem !important;
    padding: 0.28rem 0.65rem !important;
    margin-bottom: 0.45rem !important;
  }
  .pe-hero-title {
    font-size: clamp(1.35rem, 5.8vw, 1.75rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 0.45rem !important;
  }
  .pe-hero-subtext {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.8rem !important;
  }
  .pe-hero-cta-group {
    gap: 0.45rem !important;
    margin-bottom: 0.75rem !important;
  }
  .pe-hero-btn {
    padding: 0.52rem 0.45rem !important;
    font-size: 0.8rem !important;
  }
  .pe-promo-search {
    padding: 0.22rem 0.22rem 0.22rem 0.8rem !important;
  }
  .pe-promo-search input {
    font-size: 0.8rem !important;
  }
  .pe-promo-search button {
    padding: 0.42rem 0.85rem !important;
    font-size: 0.78rem !important;
  }
  .pe-hero-main-img {
    max-height: 200px !important;
  }
  .pe-feature-card {
    padding: 0.5rem 0.6rem !important;
    gap: 0.45rem !important;
  }
  .pe-feature-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
  }
  .pe-feature-title {
    font-size: 0.78rem !important;
  }
  .pe-feature-desc {
    font-size: 0.68rem !important;
  }
  .pe-section-title {
    font-size: 1.4rem;
  }
  .pe-section-sub {
    font-size: 0.85rem;
  }
  .container-fluid.px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .pe-therapy-pill {
    font-size: 0.75rem;
    padding: 0.22rem 0.65rem;
  }
  .pe-auth-card {
    padding: 1.25rem 1rem;
  }
  .pe-auth-tabs {
    flex-direction: column;
    gap: 0.3rem;
  }
  .table-responsive {
    border: none !important;
  }
  .pe-card-bg {
    padding: 1rem;
  }
}

/* =========================================================
   PHYSIOTHERAPY SERVICE CARDS (CLICKABLE)
   ========================================================= */
.pe-service-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--pe-radius-lg, 16px);
  padding: 1.75rem 1.5rem;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  position: relative;
  height: 100%;
}

.pe-service-card:hover {
  border-color: var(--pe-primary, #0284c7);
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(2, 132, 199, 0.12);
}

.pe-service-card h6 {
  font-weight: 800;
  color: var(--pe-heading, #0f172a);
  font-size: 1.05rem;
  transition: color 0.2s ease;
}

.pe-service-card:hover h6 {
  color: var(--pe-primary, #0284c7);
}

.pe-service-item-link {
  display: inline-block;
  transition: all 0.2s ease;
  padding: 0.1rem 0;
}

.pe-service-item-link:hover {
  color: var(--pe-primary, #0284c7) !important;
  transform: translateX(4px);
}

.btn-light-primary {
  background: rgba(2, 132, 199, 0.08);
  color: var(--pe-primary, #0284c7);
  border: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.pe-service-card:hover .btn-light-primary {
  background: var(--pe-primary, #0284c7);
  color: #ffffff;
  transform: scale(1.1);
}

/* =========================================================
   ABOUT PAGE — ULTRA MODERN STYLING
   ========================================================= */
.pe-about-hero {
  background: linear-gradient(135deg, #071931 0%, #0d3b66 50%, #0284c7 100%);
  color: #ffffff;
  padding: 5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}

.pe-about-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.pe-about-hero-title {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pe-about-hero-sub {
  font-size: 1.15rem;
  color: #cbd5e1;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.65;
}

.pe-tag-pill-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Learning Paradigm Cards */
.pe-paradigm-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
  height: 100%;
}

.pe-paradigm-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(2, 132, 199, 0.12);
  border-color: #38bdf8;
}

.pe-paradigm-step {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-uppercase: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.8rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.pe-paradigm-quote {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.pe-paradigm-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #0284c7;
  height: 100%;
}

/* Philosophy Quote Section */
.pe-philosophy-quote-card {
  background: linear-gradient(135deg, #091e3a 0%, #10376d 100%);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(9, 30, 58, 0.3);
}

.pe-philosophy-quote-card::after {
  content: '“';
  position: absolute;
  right: 20px;
  bottom: -40px;
  font-size: 14rem;
  font-family: Georgia, serif;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  line-height: 1;
}

.pe-quote-text {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.7;
  color: #f1f5f9;
  font-style: italic;
}

/* Vision & Mission Gradient Cards */
.pe-vm-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 2.25rem;
  height: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

.pe-vm-card:hover {
  transform: translateY(-4px);
  border-color: #0284c7;
  box-shadow: 0 15px 35px rgba(2, 132, 199, 0.1);
}

.pe-vm-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3);
}

/* Founder Profile Box */
.pe-founder-card {
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 24px;
  padding: 2.5rem;
  transition: all 0.3s ease;
}

.pe-founder-card:hover {
  border-color: #0284c7;
  border-style: solid;
  box-shadow: 0 15px 35px rgba(2, 132, 199, 0.08);
}

.pe-founder-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #0284c7;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.25);
}

/* ============ CLINICAL SPECIALTIES EXECUTIVE CARDS ============ */
.pe-clinical-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.pe-clinical-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0a5dc2, #38bdf8);
  transition: all 0.35s ease;
}

.pe-clinical-card.pe-theme-success::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.pe-clinical-card.pe-theme-warning::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.pe-clinical-card.pe-theme-danger::before {
  background: linear-gradient(90deg, #ef4444, #f87171);
}
.pe-clinical-card.pe-theme-info::before {
  background: linear-gradient(90deg, #06b6d4, #38bdf8);
}
.pe-clinical-card.pe-theme-purple::before {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.pe-clinical-card:hover {
  transform: translateY(-8px);
  border-color: #cbd5e1;
  box-shadow: 0 20px 40px rgba(10, 93, 194, 0.12);
}

.pe-clinical-icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: transform 0.3s ease;
}

.pe-clinical-card:hover .pe-clinical-icon-badge {
  transform: scale(1.1) rotate(-3deg);
}

.pe-clinical-arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.pe-clinical-card:hover .pe-clinical-arrow-btn {
  background: #0a5dc2;
  color: #ffffff;
  transform: translateX(4px);
}

.pe-clinical-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.pe-clinical-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pe-clinical-item a {
  color: #475569;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.pe-clinical-item a:hover {
  color: #0a5dc2;
}

/* ============ SUBJECTS BY YEAR EXECUTIVE STYLES ============ */
.pe-year-nav-pills {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: nowrap !important;
}

.pe-year-nav-pills .nav-link {
  color: #475569;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  white-space: nowrap !important;
}

.pe-year-nav-pills .nav-link:hover {
  color: #0a5dc2;
  background: rgba(10, 93, 194, 0.06);
}

.pe-year-nav-pills .nav-link.active {
  background: #0a5dc2 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(10, 93, 194, 0.3);
}

.pe-year-nav-pills .nav-link.active .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.pe-subject-box-inner {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.pe-subject-box:hover .pe-subject-box-inner {
  transform: translateY(-8px);
  border-color: #0a5dc2 !important;
  box-shadow: 0 20px 35px rgba(10, 93, 194, 0.12);
}

.pe-subject-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px !important;
  transition: transform 0.3s ease;
}

.pe-subject-box:hover .pe-subject-icon {
  transform: scale(1.1) rotate(-4deg);
}

.pe-subject-arrow-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.pe-subject-box:hover .pe-subject-arrow-btn {
  background: #0a5dc2;
  color: #ffffff;
  transform: translateX(4px);
}

/* ============ LEADERSHIP SWIPER NUMBERED BULLETS ============ */
.pe-stmt-pagination {
  margin-top: 1rem !important;
}

.pe-stmt-pagination .swiper-pagination-bullet {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #0a5dc2 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  border: 1px solid #cbd5e1 !important;
  margin: 0 4px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.pe-stmt-pagination .swiper-pagination-bullet:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

.pe-stmt-pagination .swiper-pagination-bullet-active {
  background: #0a5dc2 !important;
  color: #ffffff !important;
  border-color: #0a5dc2 !important;
  box-shadow: 0 4px 12px rgba(10, 93, 194, 0.35) !important;
  transform: scale(1.1) !important;
}

/* ============ SUBJECTS NAVBAR DROPDOWN HOVER & DIRECT CLICK ============ */
@media (min-width: 992px) {
  .pe-subjects-dropdown:hover > .dropdown-menu {
    display: block !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* =========================================================
   GLOBAL UNIFIED HERO BANNER GRADIENT (100% COLOR HARMONY)
   ========================================================= */
.pe-promo-banner,
.pe-hero-strip,
.pe-subject-hero,
.pe-about-hero,
.pe-team-hero,
.pe-contact-hero,
.pe-course-hero,
.pe-subjects-hero {
  background: linear-gradient(135deg, #0a5dc2 0%, #0284c7 100%) !important;
}

/* Desktop hover dropdown for The Team */
@media (min-width: 992px) {
  .pe-team-dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
    animation: fadeIn 0.2s ease-in-out;
  }
}

/* =========================================================
   MOBILE RESPONSIVE & TAB SCROLL FIX (100% CROSS-DEVICE)
   ========================================================= */
.pe-year-tabs-scroll-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.pe-year-nav-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important;  /* IE/Edge */
  scroll-snap-type: x proximity;
  padding: 6px 12px !important;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.pe-year-nav-pills::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
}

/* On Desktop (≥992px) center the tabs */
@media (min-width: 992px) {
  .pe-year-nav-pills {
    justify-content: center !important;
    width: fit-content !important;
  }
}

/* On Tablets & Mobile Devices (<992px) start left so Year 1 is 100% visible */
@media (max-width: 991.98px) {
  .pe-year-nav-pills {
    justify-content: flex-start !important;
    width: 100% !important;
    border-radius: 16px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .pe-year-nav-pills .nav-item {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .pe-year-nav-pills .nav-link {
    font-size: 0.85rem !important;
    padding: 8px 14px !important;
  }
}

/* =========================================================
   HOMEPAGE 5-YEAR INTERACTIVE CARDS & SUBJECT SECTION
   ========================================================= */
.pe-year-cards-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 1199.98px) {
  .pe-year-cards-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767.98px) {
  .pe-year-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
}

@media (max-width: 480px) {
  .pe-year-cards-row {
    grid-template-columns: 1fr;
  }
}

.pe-year-card-btn {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.5rem 1.15rem 1.4rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 2px solid transparent;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: relative;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.pe-year-card-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.pe-year-card-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
  margin-bottom: 0.85rem;
}

/* Card 1 - First Year (Blue) */
.pe-year-card-1, .pe-year-card-primary {
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
  border-color: #d0e3fa;
}
.pe-year-card-1 .pe-year-card-tag, .pe-year-card-primary .pe-year-card-tag {
  background: rgba(10, 93, 194, 0.12);
  color: #0a5dc2;
}
.pe-year-card-1 .pe-year-card-icon, .pe-year-card-primary .pe-year-card-icon {
  color: #0284c7;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(10, 93, 194, 0.14);
  border: 1px solid #d0e3fa;
}
.pe-year-card-1 .pe-year-card-title, .pe-year-card-primary .pe-year-card-title {
  color: #0a5dc2;
}
.pe-year-card-1 .pe-year-card-arrow, .pe-year-card-primary .pe-year-card-arrow {
  background: linear-gradient(135deg, #0a5dc2 0%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(10, 93, 194, 0.25);
}
.pe-year-card-1:hover, .pe-year-card-1.active, .pe-year-card-primary:hover, .pe-year-card-primary.active {
  border-color: #0a5dc2 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(10, 93, 194, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-1.active .pe-year-card-arrow, .pe-year-card-primary.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(10, 93, 194, 0.45);
}

/* Card 2 - Second Year (Emerald Green) */
.pe-year-card-2, .pe-year-card-success {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #bbf7d0;
}
.pe-year-card-2 .pe-year-card-tag, .pe-year-card-success .pe-year-card-tag {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.pe-year-card-2 .pe-year-card-icon, .pe-year-card-success .pe-year-card-icon {
  color: #16a34a;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.14);
  border: 1px solid #bbf7d0;
}
.pe-year-card-2 .pe-year-card-title, .pe-year-card-success .pe-year-card-title {
  color: #15803d;
}
.pe-year-card-2 .pe-year-card-arrow, .pe-year-card-success .pe-year-card-arrow {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.pe-year-card-2:hover, .pe-year-card-2.active, .pe-year-card-success:hover, .pe-year-card-success.active {
  border-color: #16a34a !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(22, 163, 74, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-2.active .pe-year-card-arrow, .pe-year-card-success.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.45);
}

/* Card 3 - Third Year (Crimson / Rose) */
.pe-year-card-3, .pe-year-card-danger {
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
  border-color: #fecdd3;
}
.pe-year-card-3 .pe-year-card-tag, .pe-year-card-danger .pe-year-card-tag {
  background: rgba(225, 29, 72, 0.12);
  color: #be123c;
}
.pe-year-card-3 .pe-year-card-icon, .pe-year-card-danger .pe-year-card-icon {
  color: #e11d48;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.14);
  border: 1px solid #fecdd3;
}
.pe-year-card-3 .pe-year-card-title, .pe-year-card-danger .pe-year-card-title {
  color: #be123c;
}
.pe-year-card-3 .pe-year-card-arrow, .pe-year-card-danger .pe-year-card-arrow {
  background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
}
.pe-year-card-3:hover, .pe-year-card-3.active, .pe-year-card-danger:hover, .pe-year-card-danger.active {
  border-color: #e11d48 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(225, 29, 72, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-3.active .pe-year-card-arrow, .pe-year-card-danger.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.45);
}

/* Card 4 - Fourth Year (Amber / Golden Orange) */
.pe-year-card-4, .pe-year-card-warning {
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  border-color: #fde68a;
}
.pe-year-card-4 .pe-year-card-tag, .pe-year-card-warning .pe-year-card-tag {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}
.pe-year-card-4 .pe-year-card-icon, .pe-year-card-warning .pe-year-card-icon {
  color: #d97706;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.14);
  border: 1px solid #fde68a;
}
.pe-year-card-4 .pe-year-card-title, .pe-year-card-warning .pe-year-card-title {
  color: #b45309;
}
.pe-year-card-4 .pe-year-card-arrow, .pe-year-card-warning .pe-year-card-arrow {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}
.pe-year-card-4:hover, .pe-year-card-4.active, .pe-year-card-warning:hover, .pe-year-card-warning.active {
  border-color: #d97706 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(217, 119, 6, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-4.active .pe-year-card-arrow, .pe-year-card-warning.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.45);
}

/* Card 5 - Other Subjects (Royal Purple / Violet) */
.pe-year-card-other, .pe-year-card-purple {
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%);
  border-color: #ddd6fe;
}
.pe-year-card-other .pe-year-card-tag, .pe-year-card-purple .pe-year-card-tag {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
}
.pe-year-card-other .pe-year-card-icon, .pe-year-card-purple .pe-year-card-icon {
  color: #7c3aed;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.14);
  border: 1px solid #ddd6fe;
}
.pe-year-card-other .pe-year-card-title, .pe-year-card-purple .pe-year-card-title {
  color: #6d28d9;
}
.pe-year-card-other .pe-year-card-arrow, .pe-year-card-purple .pe-year-card-arrow {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
.pe-year-card-other:hover, .pe-year-card-other.active, .pe-year-card-purple:hover, .pe-year-card-purple.active {
  border-color: #7c3aed !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(124, 58, 237, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-other.active .pe-year-card-arrow, .pe-year-card-purple.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45);
}
.pe-year-card-1 .pe-year-card-tag {
  background: rgba(10, 93, 194, 0.12);
  color: #0a5dc2;
}
.pe-year-card-1 .pe-year-card-icon {
  color: #0284c7;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(10, 93, 194, 0.14);
  border: 1px solid #d0e3fa;
}
.pe-year-card-1 .pe-year-card-title {
  color: #0a5dc2;
}
.pe-year-card-1 .pe-year-card-arrow {
  background: linear-gradient(135deg, #0a5dc2 0%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(10, 93, 194, 0.25);
}
.pe-year-card-1:hover, .pe-year-card-1.active {
  border-color: #0a5dc2 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(10, 93, 194, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-1.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(10, 93, 194, 0.45);
}

/* Card 2 - Second Year (Emerald Green) */
.pe-year-card-2 {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #bbf7d0;
}
.pe-year-card-2 .pe-year-card-tag {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.pe-year-card-2 .pe-year-card-icon {
  color: #16a34a;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.14);
  border: 1px solid #bbf7d0;
}
.pe-year-card-2 .pe-year-card-title {
  color: #15803d;
}
.pe-year-card-2 .pe-year-card-arrow {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.pe-year-card-2:hover, .pe-year-card-2.active {
  border-color: #16a34a !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(22, 163, 74, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-2.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.45);
}

/* Card 3 - Third Year (Crimson / Rose) */
.pe-year-card-3 {
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
  border-color: #fecdd3;
}
.pe-year-card-3 .pe-year-card-tag {
  background: rgba(225, 29, 72, 0.12);
  color: #be123c;
}
.pe-year-card-3 .pe-year-card-icon {
  color: #e11d48;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.14);
  border: 1px solid #fecdd3;
}
.pe-year-card-3 .pe-year-card-title {
  color: #be123c;
}
.pe-year-card-3 .pe-year-card-arrow {
  background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
}
.pe-year-card-3:hover, .pe-year-card-3.active {
  border-color: #e11d48 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(225, 29, 72, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-3.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.45);
}

/* Card 4 - Fourth Year (Amber / Golden Orange) */
.pe-year-card-4 {
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  border-color: #fde68a;
}
.pe-year-card-4 .pe-year-card-tag {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}
.pe-year-card-4 .pe-year-card-icon {
  color: #d97706;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.14);
  border: 1px solid #fde68a;
}
.pe-year-card-4 .pe-year-card-title {
  color: #b45309;
}
.pe-year-card-4 .pe-year-card-arrow {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}
.pe-year-card-4:hover, .pe-year-card-4.active {
  border-color: #d97706 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(217, 119, 6, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-4.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.45);
}

/* Card 5 - Other Subjects (Royal Purple / Violet) */
.pe-year-card-other {
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%);
  border-color: #ddd6fe;
}
.pe-year-card-other .pe-year-card-tag {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
}
.pe-year-card-other .pe-year-card-icon {
  color: #7c3aed;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.14);
  border: 1px solid #ddd6fe;
}
.pe-year-card-other .pe-year-card-title {
  color: #6d28d9;
}
.pe-year-card-other .pe-year-card-arrow {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
.pe-year-card-other:hover, .pe-year-card-other.active {
  border-color: #7c3aed !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(124, 58, 237, 0.2) !important;
  transform: translateY(-6px);
}
.pe-year-card-other.active .pe-year-card-arrow {
  transform: scale(1.15) rotate(-45deg);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45);
}

/* Common Year Card Elements */
.pe-year-card-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 0.85rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pe-year-card-btn:hover .pe-year-card-icon {
  transform: scale(1.12);
}
.pe-year-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 0.35rem;
}
.pe-year-card-sub {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.45;
  margin-bottom: 1.15rem;
  font-weight: 500;
  min-height: 2.4rem;
}
.pe-year-card-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Year Header Banner Bar Styling */
.pe-year-banner-header {
  border-radius: 20px;
  padding: 1.25rem 1.6rem;
  transition: all 0.3s ease;
}

/* Subject Grid Box Styling */
.pe-subject-box {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.pe-subject-box-inner {
  border: 1px solid rgba(226, 232, 240, 0.95);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.pe-subject-box:hover {
  transform: translateY(-5px);
}
.pe-subject-box:hover .pe-subject-box-inner {
  border-color: #0a5dc2;
  box-shadow: 0 14px 30px rgba(10, 93, 194, 0.1);
}
.pe-subject-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.pe-subject-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6rem;
  line-height: 1.35;
  font-weight: 700;
  color: #1e293b;
  transition: color 0.2s ease;
}
.pe-subject-box:hover .pe-subject-title {
  color: #0a5dc2;
}

/* =========================================================
   LEGAL & POLICY PAGES (Privacy Policy, Terms of Use, etc.)
   ========================================================= */
.pe-legal-hero {
  background: linear-gradient(135deg, #0a5dc2 0%, #0369a1 50%, #0284c7 100%) !important;
  position: relative;
  overflow: hidden;
  padding: 3rem 0 2.5rem;
}
.pe-legal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(56, 189, 248, 0.15) 0%, transparent 45%);
  pointer-events: none;
}
.pe-legal-hero::after {
  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='none' fill-rule='evenodd'%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/g%3E%3C/svg%3E");
  pointer-events: none;
}

.pe-legal-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  font-size: 0.82rem;
  backdrop-filter: blur(8px);
}

.pe-doc-switcher {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.3rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
}
.pe-doc-switcher .pe-doc-btn {
  padding: 0.4rem 1.15rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pe-doc-switcher .pe-doc-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.pe-doc-switcher .pe-doc-btn.active {
  background: #ffffff;
  color: #0a5dc2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pe-legal-sidebar {
  position: sticky;
  top: 95px;
  z-index: 10;
}

.pe-legal-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pe-legal-nav .pe-legal-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.65rem;
  color: #475569;
  font-size: 0.865rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.pe-legal-nav .pe-legal-link:hover {
  background: #f1f5f9;
  color: #0a5dc2;
  border-left-color: #94a3b8;
}

.pe-legal-nav .pe-legal-link.active {
  background: #eef6ff;
  color: #0a5dc2;
  font-weight: 700;
  border-left-color: #0a5dc2;
  box-shadow: 0 2px 8px rgba(10, 93, 194, 0.08);
}

.pe-legal-nav .pe-legal-link i {
  font-size: 1.05rem;
  flex-shrink: 0;
  color: #64748b;
  transition: color 0.2s ease;
}

.pe-legal-nav .pe-legal-link.active i,
.pe-legal-nav .pe-legal-link:hover i {
  color: #0a5dc2;
}

.pe-legal-card {
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.pe-legal-section {
  scroll-margin-top: 100px;
  position: relative;
}

.pe-legal-sec-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #eef6ff;
  color: #0a5dc2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pe-legal-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}

.pe-legal-highlight-box {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-left: 4px solid #0a5dc2;
  border-radius: 0.85rem;
  padding: 1.25rem 1.5rem;
}

.pe-legal-feature-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 1.25rem;
  height: 100%;
  transition: all 0.25s ease;
}
.pe-legal-feature-card:hover {
  background: #ffffff;
  border-color: #0a5dc2;
  box-shadow: 0 8px 20px rgba(10, 93, 194, 0.08);
  transform: translateY(-2px);
}

.pe-legal-anchor {
  opacity: 0;
  color: #94a3b8;
  margin-left: 0.5rem;
  font-size: 0.95rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.pe-legal-section:hover .pe-legal-anchor {
  opacity: 1;
}
.pe-legal-anchor:hover {
  color: #0a5dc2;
}

@media print {
  .pe-navbar, .pe-subnav-trust-bar, .pe-footer, .pe-legal-sidebar, .pe-doc-switcher, .pe-print-btn, .pe-legal-hero .badge {
    display: none !important;
  }
  .pe-legal-hero {
    background: none !important;
    color: #000 !important;
    padding: 1rem 0 !important;
  }
  .pe-legal-hero h1, .pe-legal-hero p {
    color: #000 !important;
  }
  .pe-legal-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .col-lg-9 {
    width: 100% !important;
  }
}

/* =========================================================
   LEARNING JOURNEY 5-PILLAR SECTION (Below Hero)
   ========================================================= */
.pe-learning-journey-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}

.pe-journey-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1200px) {
  .pe-journey-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .pe-journey-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 520px) {
  .pe-journey-grid {
    grid-template-columns: 1fr;
  }
}

.pe-journey-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 2.2rem 1.4rem 1.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-decoration: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.pe-journey-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: #0a5dc2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pe-journey-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.pe-journey-card:hover::before {
  opacity: 1;
}

.pe-journey-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1.25rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.pe-journey-card:hover .pe-journey-icon {
  transform: scale(1.1) rotate(2deg);
}

.pe-journey-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.pe-journey-desc {
  font-size: 0.885rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.pe-journey-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #ffffff;
}

.pe-journey-card:hover .pe-journey-arrow {
  transform: scale(1.1);
  color: #ffffff !important;
}

/* Color theme mappings */
.pe-journey-primary .pe-journey-icon { background: #eef6ff; color: #0a5dc2; }
.pe-journey-primary .pe-journey-arrow { color: #0a5dc2; }
.pe-journey-primary::before { background: #0a5dc2; }
.pe-journey-primary:hover { border-color: #0a5dc2; }
.pe-journey-primary:hover .pe-journey-title { color: #0a5dc2; }
.pe-journey-primary:hover .pe-journey-icon { background: #0a5dc2; color: #ffffff; }
.pe-journey-primary:hover .pe-journey-arrow { background: #0a5dc2; border-color: #0a5dc2; }

.pe-journey-info .pe-journey-icon { background: #e0f2fe; color: #0284c7; }
.pe-journey-info .pe-journey-arrow { color: #0284c7; }
.pe-journey-info::before { background: #0284c7; }
.pe-journey-info:hover { border-color: #0284c7; }
.pe-journey-info:hover .pe-journey-title { color: #0284c7; }
.pe-journey-info:hover .pe-journey-icon { background: #0284c7; color: #ffffff; }
.pe-journey-info:hover .pe-journey-arrow { background: #0284c7; border-color: #0284c7; }

.pe-journey-success .pe-journey-icon { background: #dcfce7; color: #16a34a; }
.pe-journey-success .pe-journey-arrow { color: #16a34a; }
.pe-journey-success::before { background: #16a34a; }
.pe-journey-success:hover { border-color: #16a34a; }
.pe-journey-success:hover .pe-journey-title { color: #16a34a; }
.pe-journey-success:hover .pe-journey-icon { background: #16a34a; color: #ffffff; }
.pe-journey-success:hover .pe-journey-arrow { background: #16a34a; border-color: #16a34a; }

.pe-journey-danger .pe-journey-icon { background: #ffe4e6; color: #e11d48; }
.pe-journey-danger .pe-journey-arrow { color: #e11d48; }
.pe-journey-danger::before { background: #e11d48; }
.pe-journey-danger:hover { border-color: #e11d48; }
.pe-journey-danger:hover .pe-journey-title { color: #e11d48; }
.pe-journey-danger:hover .pe-journey-icon { background: #e11d48; color: #ffffff; }
.pe-journey-danger:hover .pe-journey-arrow { background: #e11d48; border-color: #e11d48; }

.pe-journey-warning .pe-journey-icon { background: #fef3c7; color: #d97706; }
.pe-journey-warning .pe-journey-arrow { color: #d97706; }
.pe-journey-warning::before { background: #d97706; }
.pe-journey-warning:hover { border-color: #d97706; }
.pe-journey-warning:hover .pe-journey-title { color: #d97706; }
.pe-journey-warning:hover .pe-journey-icon { background: #d97706; color: #ffffff; }
.pe-journey-warning:hover .pe-journey-arrow { background: #d97706; border-color: #d97706; }

.pe-journey-purple .pe-journey-icon { background: #ede9fe; color: #7c3aed; }
.pe-journey-purple .pe-journey-arrow { color: #7c3aed; }
.pe-journey-purple::before { background: #7c3aed; }
.pe-journey-purple:hover { border-color: #7c3aed; }
.pe-journey-purple:hover .pe-journey-title { color: #7c3aed; }
.pe-journey-purple:hover .pe-journey-icon { background: #7c3aed; color: #ffffff; }
.pe-journey-purple:hover .pe-journey-arrow { background: #7c3aed; border-color: #7c3aed; }

/* =========================================================
   FACULTY & CURRICULUM TRUST BANNER (Executive Modern Design)
   ========================================================= */
.pe-faculty-trust-section {
  background: #ffffff;
  position: relative;
}

.pe-faculty-trust-box {
  background: linear-gradient(135deg, #ffffff 0%, #f9fbfe 50%, #f0f7ff 100%);
  border: 1.5px solid rgba(10, 93, 194, 0.12);
  border-radius: 28px;
  padding: 3rem 2.75rem;
  box-shadow: 0 20px 45px -15px rgba(10, 93, 194, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  position: relative;
  overflow: hidden;
}

.pe-faculty-trust-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #0a5dc2 0%, #06b6d4 100%);
  border-radius: 28px 0 0 28px;
}

.pe-trust-bg-glow {
  position: absolute;
  top: -40%;
  right: -15%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(10, 93, 194, 0.03) 60%, transparent 80%);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
}

.pe-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(10, 93, 194, 0.08);
  border: 1px solid rgba(10, 93, 194, 0.18);
  color: #0a5dc2;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
}

.pe-trust-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a5dc2;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(10, 93, 194, 0.7);
  animation: pePulseDot 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pePulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(10, 93, 194, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(10, 93, 194, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(10, 93, 194, 0); }
}

.pe-faculty-heading {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 800;
  color: #091e3a;
  line-height: 1.28;
  letter-spacing: -0.025em;
}

.pe-heading-gradient {
  background: linear-gradient(135deg, #0a5dc2 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pe-faculty-subtext {
  font-size: 0.94rem;
  color: #475569;
  line-height: 1.62;
}

.pe-trust-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pe-trust-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.03);
}

.pe-trust-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
}

@media (max-width: 991px) {
  .pe-faculty-trust-box {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 600px) {
  .pe-trust-cards-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}

.pe-trust-card {
  background: #ffffff;
  border: 1.5px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  padding: 1.35rem 1.25rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
  position: relative;
  display: flex;
  flex-direction: column;
}

.pe-trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 93, 194, 0.28);
  box-shadow: 0 16px 32px -8px rgba(10, 93, 194, 0.12);
}

.pe-trust-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.pe-trust-card:hover .pe-trust-icon-box {
  transform: scale(1.08) rotate(-3deg);
}

.pe-trust-icon-cyan {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
}

.pe-trust-icon-blue {
  background: linear-gradient(135deg, #0a5dc2 0%, #6366f1 100%);
}

.pe-trust-icon-purple {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.pe-trust-icon-rose {
  background: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
}

.pe-trust-pill {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.65rem;
  border-radius: 9999px;
}

.pe-pill-cyan {
  background: #e0f2fe;
  color: #0369a1;
}

.pe-pill-blue {
  background: #e0e7ff;
  color: #3730a3;
}

.pe-pill-purple {
  background: #f3e8ff;
  color: #6b21a8;
}

.pe-pill-rose {
  background: #ffe4e6;
  color: #9f1239;
}

.pe-trust-card-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.3rem;
  line-height: 1.35;
}

.pe-trust-card-desc {
  font-size: 0.79rem;
  color: #64748b;
  line-height: 1.45;
  margin-bottom: 0;
}