/* =========================================================
   Universal Learning Connections (ULC) — Design System
   Bootstrap 5.3.x | Plus Jakarta Sans | 8px spacing
   ========================================================= */

/* ---------- Local Plus Jakarta Sans Font Family ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans/PlusJakartaSans-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design Tokens ---------- */
:root {
  --primary-blue: #1D69A1;
  --primary-teal: #2FB4A9;
  --accent-orange: #F4825B;
  --dark-text: #171D1C;
  --body-text: #666666;
  --light-bg: #f7f8fa;
  --border-color: #DFDFDF;
  --white:#ffffff;
  --light-bg:#F9F9FF;
  --footer-bg: #171D1C;
  --shadow-soft: 0 8px 30px rgba(34, 34, 34, 0.06);
  --shadow-card: 0 12px 40px rgba(34, 34, 34, 0.08);
  --shadow-hover: 0 18px 48px rgba(37, 99, 235, 0.14);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --container-max: 90%;
  --section-gap: 80px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--body-text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition), opacity var(--transition);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--dark-text);
  line-height: 1.25;
  margin: 0;
}

h1 { font-size: 48px; font-weight: 700; }
h2 { font-size: 40px; font-weight: 700; }
h3 { font-size: 28px; font-weight: 700; }
h4 { font-size: 22px; font-weight: 600; }

p {
  margin: 0;
}

/* ---------- Layout ---------- */
.container-ulc {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

.section {
  padding-block: var(--section-gap);
}

.section-sm {
  padding-block: var(--space-8);
}

.section-light {
  background: var(--light-bg);
}

/* ---------- Color Utility Classes ---------- */
.text-primary-blue { color: var(--primary-blue) !important; }
.text-primary-teal { color: var(--primary-teal) !important; }
.text-accent-orange { color: var(--accent-orange) !important; }
.text-dark-ulc { color: var(--dark-text) !important; }
.text-body-ulc { color: var(--body-text) !important; }
.text-white-ulc { color: var(--white) !important; }
.text-muted-ulc { color: #8a929c !important; }

.bg-primary-blue { background-color: var(--primary-blue) !important; }
.bg-primary-teal { background-color: var(--primary-teal) !important; }
.bg-accent-orange { background-color: var(--accent-orange) !important; }
.bg-light-ulc { background-color: var(--light-bg) !important; }
.bg-white-ulc { background-color: var(--white) !important; }
.bg-footer { background-color: var(--footer-bg) !important; }

.border-ulc { border: 1px solid var(--border-color) !important; }

/* ---------- Typography Helpers ---------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-orange);
  margin-bottom:15px;
  letter-spacing: 0.02em;
}

.section-label .label-dot,
.section-label i {
  font-size: 12px;
}

.heading-highlight {
  color: var(--primary-teal);
}

.text-small {
  font-size: 14px;
}

.text-body 
{
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-text);
}

/* ---------- Buttons ---------- */
.btn-ulc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
    background-color var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.btn-ulc:hover {
  transform: translateY(-2px);
}

.btn-ulc:focus-visible {
  outline: 2px solid var(--primary-teal);
  outline-offset: 3px;
}

.btn-primary-ulc {
  background: var(--primary-blue);
  color: var(--white);
}

.btn-primary-ulc:hover {
  background:var(--primary-blue);
  color: var(--white);
}

.btn-accent-ulc {
  background: var(--accent-orange);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(255, 131, 87, 0.35);
}

.btn-accent-ulc:hover {
  background: #f06f42;
  color: var(--white);
}

.btn-outline-ulc {
  background: transparent;
  color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.btn-outline-ulc:hover {
  background: var(--primary-blue);
  color: var(--white);
}

.btn-white-ulc {
  background: var(--white);
  color: var(--primary-blue);
}

.btn-white-ulc:hover {
  background: var(--light-bg);
  color: var(--primary-blue);
}

.btn-icon-circle {
  width: 44px;
  height: 44px;
  border-radius:var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--white);
  color: var(--primary-teal);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.btn-icon-circle:hover {
  transform: translateY(-2px) scale(1.05);
  background: var(--primary-teal);
  color: var(--white);
}

.btn-icon-circle.btn-nav {
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary-blue);
  width: 48px;
  height: 48px;
}

.btn-icon-circle.btn-nav:hover {
  background: var(--primary-blue);
  color: var(--white);
}

/* ---------- Cards / Glass ---------- */
.card-ulc {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card-ulc:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.glass-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(34, 34, 34, 0.12);
}

.img-rounded {
  border-radius: var(--radius-lg);
  object-fit: cover;
  width: 100%;
}

.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary-blue);
  font-size: 20px;
}

.icon-circle.teal {
  background: rgba(39, 194, 196, 0.12);
  color: var(--primary-teal);
}

.icon-circle.orange {
  background: rgba(255, 131, 87, 0.12);
  color: var(--accent-orange);
}

.icon-circle.sm {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  padding: 16px 0;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  transition: padding var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
  padding: 12px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.navbar-ulc {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  border: none;
}


.navbar-brand-ulc {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.navbar-brand-ulc .brand-logo-img {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
}

.nav-ulc {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f6f8fc;
  border: 1px solid #e3e8f0;
  border-radius:var(--radius-sm);
  padding: 5px 6px;
}

.nav-ulc li {
  display: flex;
  align-items: center;
}

.nav-ulc .nav-link-ulc {
  font-size: 16px;
  font-weight: 500;
  color:var(--dark-text);
  padding: 10px 22px;
  border-radius:var(--radius-sm);
  transition: all 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.nav-ulc .nav-link-ulc:hover {
  color: var(--primary-blue);
  background: rgba(29, 105, 161, 0.06);
}

.nav-ulc .nav-link-ulc.active {
  background:var(--accent-orange);
  color: var(--white);
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(242, 116, 83, 0.25);
}

/* .navbar-actions .btn-primary-ulc {
  background: var(--primary-blue);
  color: var(--white);
  padding: 12px 26px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition);
} */

.navbar-actions .btn-primary-ulc:hover {
  background: #165684;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(29, 105, 161, 0.25);
}

.navbar-toggler-ulc {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--white);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 24px;
  color: var(--dark-text);
}

.navbar-toggler-ulc .menu-icon {
  display: block;
}

.navbar-toggler-ulc .close-icon {
  display: none;
}

.navbar-toggler-ulc.open .menu-icon {
  display: none;
}

.navbar-toggler-ulc.open .close-icon {
  display: block;
}

/* ---------- Hero ---------- */
.hero-section {
  padding-top: var(--space-3);
  padding-bottom: var(--section-gap);
}

.hero-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height:80vh;
  max-height:80vh;
  box-shadow: var(--shadow-card);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  background-size: cover;
  background-position: center;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(20, 28, 45, 0.35) 0%,
    rgba(20, 28, 45, 0.12) 45%,
    rgba(20, 28, 45, 0.05) 100%
  );
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  min-height:80vh;
  max-height:80vh;
}

.hero-content-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 48px;
}

.hero-glass {
  max-width: 480px;
  padding: 36px 32px;
  animation: fadeUp 0.8s ease both;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-glass .btn-ulc 
{
width: max-content;
}

.hero-glass h1 {
  margin-bottom: var(--space-2);
}

.hero-glass .text-body {
  margin-bottom: var(--space-3);
  color: var(--dark-text);
}

.hero-quote {
  border-left: 4px solid var(--teal-primary);
  padding-left: var(--space-4);
  margin: 0 0 var(--space-3) 0;
  font-style: italic;
}

.hero-quote p {
  font-size: 1.5rem;
  line-height: 1.6;
  margin-bottom: var(--space-2);
  color: var(--dark-text);
  font-weight: 500;
}

.hero-quote cite {
  font-style: normal;
  font-size: 0.95rem;
  color: var(--teal-primary);
  font-weight: 600;
  display: block;
}

.hero-controls {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  gap: 12px;
}

/* ---------- Programs ---------- */
.programs-header {
  margin-bottom: var(--space-5);
}

.program-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  min-height: 420px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

.program-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.program-card .program-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.program-card:hover .program-img {
  transform: scale(1.06);
}

.program-card .program-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 20, 30, 0.1) 0%,
    rgba(15, 20, 30, 0.35) 40%,
    rgba(15, 20, 30, 0.88) 100%
  );
  z-index: 1;
}

.program-card .program-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.program-card:hover .program-arrow {
  background: var(--primary-teal);
  color: var(--white);
  transform: rotate(-45deg);
}

.program-card .program-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 28px 24px;
  color: var(--white);
}

.program-card .program-body h3 {
  color: var(--white);
  font-size: 24px;
  margin-bottom: 8px;
}

.program-card .program-body p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  margin-bottom: 16px;
}

.program-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.program-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.program-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-orange);
}

/* ---------- About ---------- */
.about-feature {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.about-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.about-feature h4 {
  font-size: 16px;
  margin-bottom: 4px;
}

.about-feature p {
  font-size: 16px;
  color: var(--body-text);
  line-height: 1.5;
}

.about-portrait {
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.about-side-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-orange);
  line-height: 1.35;
  margin-bottom: var(--space-2);
}

.about-side-img {
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  height: 200px;
  width: 100%;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}

/* ---------- Why Choose ---------- */
.why-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  padding: 60px 40px 100px;
}

.why-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(15, 22, 35, 0.35) 0%,
    rgba(15, 22, 35, 0.55) 55%,
    rgba(15, 22, 35, 0.72) 100%
  );
}

.why-banner-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--white);
  max-width: 640px;
  margin-inline: auto;
  padding-bottom: 40px;
}

.why-banner-inner h2 {
  color: var(--white);
  margin-bottom: 12px;
}

.why-cards {
  position: relative;
  z-index: 2;
  margin-top: -80px;
}

.why-card {
  height: 100%;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.why-card h4 {
  margin: 14px 0 8px;
  font-size: 18px;
}

.why-card p {
  font-size: 16px;
  color: var(--body-text);
}

/* ---------- Learning Approach ---------- */
.approach-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.approach-media img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.floating-dashboard {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 220px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.8);
  animation: floatY 4s ease-in-out infinite;
}

.floating-dashboard .dash-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 12px;
}

.dash-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--light-bg);
  margin-bottom: 10px;
  overflow: hidden;
}

.dash-bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary-teal), var(--primary-blue));
}

.dash-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.dash-stats div {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  background: var(--light-bg);
  border-radius: 8px;
}

.dash-stats strong {
  display: block;
  font-size: 16px;
  color: var(--primary-blue);
}

.dash-stats small {
  font-size: 10px;
  color: var(--body-text);
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 8px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--border-color);
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 20px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item.active {
  border-color: var(--primary-teal);
  box-shadow: 0 8px 28px rgba(39, 194, 196, 0.15);
}

.timeline-item:hover {
  transform: translateX(4px);
}

.timeline-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  background: var(--light-bg);
  color: var(--body-text);
  border: 2px solid var(--border-color);
  z-index: 1;
}

.timeline-item.active .timeline-num {
  background: var(--primary-teal);
  color: var(--white);
  border-color: var(--primary-teal);
}

.timeline-content h4 {
  font-size: 18px;
  margin-bottom: 6px;
}

.timeline-content p {
   font-size: 16px;
  color: var(--body-text);
}

.timeline-icon {
  margin-left: auto;
  color: var(--primary-teal);
  font-size: 20px;
  align-self: center;
}

/* ---------- Learning Approach Interactive Section ---------- */
.learning-approach-section {
  padding-block: var(--section-gap);
  background: var(--white);
  position: relative;
}

.approach-main-heading {
  font-size: 38px;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 16px;
  line-height: 1.25;
}

.approach-main-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--body-text);
  max-width: 680px;
  margin: 0 auto;
}

/* Left Media Container */
.approach-image-wrapper {
  position: relative;
  width: 100%;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.approach-bg-shape {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 88%;
  height: 96%;
  background: #ebf7f6;
  border-radius: 36px;
  z-index: 1;
  transform: rotate(-3deg);
  transition: transform 0.5s ease;
}

.approach-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              visibility 0.5s ease;
  z-index: 2;
}

.approach-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  position: relative;
  z-index: 3;
}

.approach-img {
  width: 88%;
  height: 420px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* Floating badge overlay card on image */
.floating-badge-card {
  position: absolute;
  bottom: -20px;
  right: 15px;
  background: var(--white);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  border: 1px solid #f1f5f9;
  z-index: 4;
  min-width: 230px;
  animation: floatY 4s ease-in-out infinite;
}

.badge-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.badge-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-text);
}

.badge-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  color: var(--white);
}
.badge-pill.bg-teal { background: #2fb4a9; }
.badge-pill.bg-orange { background: #f27453; }

.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.badge-grid-item {
  background: #f8fafc;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.badge-box {
  width: 14px;
  height: 14px;
  background: #cbd5e1;
  border-radius: 3px;
}

.badge-line {
  width: 100%;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
}

.badge-stats-row {
  display: flex;
  gap: 20px;
}

.badge-stat {
  display: flex;
  flex-direction: column;
}

.badge-stat strong {
  font-size: 18px;
  color: #2fb4a9;
  font-weight: 800;
}

.badge-stat span {
  font-size: 11px;
  color: var(--body-text);
}

/* Right Steps Timeline */
.approach-steps-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-left: 20px;
}

.timeline-vertical-line {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 46px;
  width: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.timeline-progress-bar {
  width: 100%;
  height: 0%;
  background: #2fb4a9;
  transition: height 0.4s ease;
}

.approach-step-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.approach-step-card:hover {
  background: #f8fafc;
}

.step-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #f8fafc;
  color: var(--body-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.step-content {
  flex-grow: 1;
}

.step-title {
  font-size: 20px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.step-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-text);
  margin: 0;
}

/* Active Step Styling */
.approach-step-card.active {
  background: var(--white);
}

.approach-step-card.active .step-icon-box {
  background: #2fb4a9;
  color: var(--white);
  border-color: #2fb4a9;
  box-shadow: 0 8px 20px rgba(47, 180, 169, 0.35);
  transform: scale(1.05);
}

.approach-step-card.active .step-title {
  color: #2fb4a9;
}

.approach-step-card.active .step-desc {
  color: #334155;
}

/* ---------- CTA & Footer ---------- */
.footer-wrapper {
  position: relative;
  padding-top: 40px;
  padding-bottom: 60px;
  background: var(--white);
}

.cta-floating-card {
  position: relative;
  z-index: 10;
  background: #1f6ba3;
  border-radius: 36px;
  padding: 60px 40px 52px;
  max-width: 94%;
  margin: 0 auto -100px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(31, 107, 163, 0.22);
}

.cta-blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.cta-blob-1 {
  width: 280px;
  height: 280px;
  top: -90px;
  left: -80px;
}

.cta-blob-2 {
  width: 320px;
  height: 320px;
  bottom: -110px;
  right: -70px;
  background: rgba(255, 255, 255, 0.09);
}

.cta-card-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.cta-card-title {
  color: var(--white);
  font-size: 44px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.cta-card-desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 620px;
  font-weight: 400;
}

.btn-cta-orange {
  background:var(--accent-orange);
  color:var(--white);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 34px;
  min-height:50px;
  border-radius:var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(242, 116, 83, 0.3);
  text-decoration: none;
}

.btn-cta-orange:hover {
  background:var(--accent-orange);
  color:var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(242, 116, 83, 0.4);
}

/* Footer Card */
.site-footer-card {
  background-color: #141817;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  border-radius: 36px;
  padding: 145px 56px 40px;
  color: #cbd5e1;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.footer-brand-logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom:8px;
}

.footer-logo-stacked {
  display: flex;
  flex-direction: column;
}

.logo-letters {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 2px;
  display: flex;
  gap: 3px;
}

.logo-letters .let-u { color: var(--accent-orange); }
.logo-letters .let-l { color: #2fb4a9; }
.logo-letters .let-c { color: #27c2c4; }

.logo-subtext {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-top: 6px;
  line-height: 1.25;
}

.logo-subtext .sub-u { color: #f27453; display: block; }
.logo-subtext .sub-l { color: #2fb4a9; display: block; }
.logo-subtext .sub-c { color: #27c2c4; display: block; }

.footer-brand-desc {
  color:var(--white);
  font-size: 16px;
  line-height: 1.65;
  margin-top: 10px;
  display:grid
}

.footer-heading {
  color: var(--accent-orange);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 22px;
  letter-spacing: 0.2px;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-menu a {
  color: var(--white);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-menu a:hover {
  color: var(--white);
  padding-left: 4px;
}

.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-contact-list li {
  color:var(--white);
  font-size: 16px;
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}
.footer-contact-list li a 
{
  display:flex;
}

.footer-contact-list  svg
{
  width:20px;
  height:20px;
}
.footer-icon
{
  width:20px;
  height:20px;
  margin-right: 10px;
}
.footer-bottom-row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 50px;
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 16px;
  color:var(--white);
}

.highlight-orange {
  color:var(--accent-orange);
  font-weight: 500;
}

/* ---------- Page Hero (inner pages) ---------- */
.page-hero {
  padding: 60px 0 40px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, transparent 100%);
}

.page-hero h1 {
  margin-bottom: 12px;
}

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Utilities ---------- */
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

.equal-height {
  height: 100%;
}

/* ---------- About Us Page Specific Styles ---------- */
.about-hero-section {
  position: relative;
  padding: 110px 0 90px;
  background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 1;
}

.about-hero-glass-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
  padding: 52px 40px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.about-hero-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 16px;
  line-height: 1.2;
}

.about-hero-desc {
  font-size: 16px;
  line-height: 1.65;
  color: #475569;
  max-width: 660px;
  margin: 0 auto;
}

/* Our Story Section */
.our-story-section {
  padding-block: var(--section-gap);
  background: var(--white);
}

.story-grid-card {
  background: #f8fafc;
  border-radius: 24px;
  padding: 32px 28px;
  height: 100%;
  border: 1px solid #e2e8f0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.06);
}

.story-img-card {
  border-radius: 24px;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  width: 100%;
}

.story-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}

.story-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 10px;
}

.story-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-text);
  margin: 0;
}

.story-purple-card {
  background: #f4f3ff;
  border-color: #e0e0fc;
}

.avatar-stack-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.avatar-group {
  display: flex;
}

.avatar-group img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -10px;
  object-fit: cover;
}

.avatar-group img:first-child {
  margin-left: 0;
}

.avatar-label {
  font-size: 12px;
  font-weight: 600;
  color: #4338ca;
  line-height: 1.3;
}

/* Why Choose ULC Banner Section */
.why-choose-card-section {
  background: var(--primary-blue);
  border-radius: 36px;
  padding: 64px 56px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  margin-block: 40px;
}

.why-choose-header {
  margin-bottom: 40px;
}

.why-stat-num {
  font-size: 38px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

.why-stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6px;
}

.why-pill-card {
  background: var(--white);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.why-pill-card:hover {
  transform: translateX(4px);
}

.why-pill-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f27453;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.why-pill-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 4px;
}

.why-pill-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--body-text);
  margin: 0;
}

.why-educator-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-circle-backdrop {
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: #2fb4a9;
  position: absolute;
  z-index: 1;
}

.why-educator-img {
  position: relative;
  z-index: 2;
  max-height: 420px;
  object-fit: contain;
}

/* ---------- Unified Inner Pages Hero & Breadcrumb ---------- */
.inner-hero-wrapper {
  padding-top: 24px;
  padding-bottom: 20px;
}

.inner-hero-banner {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center 30%;
  padding: 72px 24px 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.inner-hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.18);
  z-index: 1;
}

.inner-hero-glass-card {
  position: relative;
  z-index: 2;
  background: rgb(255 255 255 / 87%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
  padding: 44px 40px;
  /* max-width: 900px; */
  margin: 0 auto;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);
}
.inner-hero-glass-card i 
{
  color: var(--dark-text);
}
.hero-breadcrumb-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 15px;
}

.hero-breadcrumb-nav a {
  color: var(--dark-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero-breadcrumb-nav a:hover {
  color: var(--primary-blue);
}

.hero-breadcrumb-nav .sep {
  color: #94a3b8;
  font-size: 14px;
}

.hero-breadcrumb-nav .current {
  color: #f27453;
  font-weight: 600;
}

.inner-hero-title {
  font-size:34px;
  font-weight: 800;
  color: var(--dark-text);
  margin-bottom:10px;
  line-height: 1.2;
}

.inner-hero-desc {
  font-size: 16px;
  line-height: 1.65;
  color:var(--dark-text);
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Contact Page UI Components ---------- */
.contact-grid-section {
  padding-block: 40px 40px;
}

.contact-form-card {
  background: var(--white);
  border-radius: 28px;
  padding: 44px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  height: 100%;
}

.form-label-ulc {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-text);
  margin-bottom: 8px;
  display: block;
}

.form-control-ulc {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 12px 16px;
  font-size: 16px;
  color: var(--dark-text);
  background: var(--white);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  font-family: inherit;
}

.form-control-ulc:focus {
  border-color: #2fb4a9;
  box-shadow: 0 0 0 4px rgba(47, 180, 169, 0.15);
}

.btn-submit-contact {
  background: var(--primary-blue);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(29, 105, 161, 0.22);
}

.btn-submit-contact:hover {
  background:var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(29, 105, 161, 0.32);
}

.hotline-card {
  background: var(--primary-blue);
  border-radius: 28px;
  padding: 44px 38px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 14px 40px rgba(29, 105, 161, 0.25);
}

.hotline-blob-1 {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.hotline-blob-2 {
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.hotline-card-content {
  position: relative;
  z-index: 2;
}

.hotline-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #f27453;
  margin-bottom: 16px;
}

.hotline-title {
  color: var(--white);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
}

.hotline-desc {
  color:var(--white);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.btn-hotline-speaker {
  background:var(--accent-orange);
  color:var(--white);
  border-radius:var(--radius-sm);
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block: 16px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(242, 116, 83, 0.35);
  transition: all 0.3s ease;
}

.btn-hotline-speaker:hover {
  background:var(--accent-orange);
  color:var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(242, 116, 83, 0.45);
}

.hotline-check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.hotline-check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color:var(--white);
}

.check-icon-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Contact Info 4-Cards Grid */
.contact-info-grid-section {
  padding-block: 20px 40px;
}

.contact-info-card {
  background: var(--white);
  border-radius: 20px;
  padding: 26px 22px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}

.contact-info-label {
  font-size: 14px;
  font-weight: 600;
  color:var(--accent-orange);
  margin-bottom: 6px;
}

.contact-info-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 4px;
  line-height: 1.35;
}

.contact-info-sub {
  font-size: 13px;
  color: var(--body-text);
  margin: 0;
}

/* Location Map Section */
.location-section {
  padding-block: 20px 80px;
}

.map-card-wrapper {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  background: var(--white);
  height: 100%;
  min-height: 440px;
}

.map-card-wrapper iframe {
  width: 100%;
  height: 100%;
  min-height: 440px;
  border: 0;
}

.find-us-card {
  background:var(--light-bg);
  border-radius:var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.find-us-heading {
  font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 20px;
}

.find-us-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--body-text);
  margin-bottom: 0;
}
.find-us-text strong 
{
  color: var(--primary-teal);
}

.find-us-text--secondary {
  margin-top: 20px;
}


.btn-ulc.btn-primary-ulc.btn-ulc.btn-primary-ulc.btn-find-us{
  width: fit-content;
  margin-top:15px;
}




@media (max-width: 991.98px) {
  .find-us-card {
    padding: 24px;
  }

  .find-us-heading {
    font-size: 26px;
  }

  .map-card-wrapper {
    min-height: 360px;
  }

  .map-card-wrapper iframe {
    min-height: 360px;
  }
}

/* ---------- Parent Information Page Styles (Matching Mockup Screenshots) ---------- */

/* Section 1: Guidance & Strategies Cards */
.guidance-strategies-section {
  background: var(--white);
}

.article-guide-card {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 28px 24px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  min-height: 50px;
}

.article-guide-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 180, 169, 0.35);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
}
.article-guide-card a 
{
  width:100%;
  background-color: var(--white);
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  min-height: 45px;
  border-radius: var(--radius-sm);
}
.badge-tag-teal {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: var(--primary-teal);
  color: var(--white);
  border-radius: 11px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 400;
}

.article-card-title {
  color: var(--dark-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.28;
  margin-bottom: 10px;
}

.article-meta-size {
  color: var(--body-text);
  font-size: 12px;
  font-weight: 600;
}

.article-card-desc {
  color: var(--dark-text);
  font-size: 14px;
  line-height: 1.62;
  margin-bottom: 0;
}

.btn-read-article {
  border: 1.5px solid var(--primary-blue);
  color: var(--primary-blue);
  background: var(--white);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease;
}

.btn-read-article:hover {
  background: var(--primary-blue);
  color: var(--white);
  transform: translateY(-2px);
}

/* Legacy insight cards */
.insight-card {
  background: var(--white);
  border-radius: 24px;
  padding: 36px 32px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.07);
}

.insight-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.insight-pill-badge {
  background: #2fb4a9;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 30px;
  display: inline-block;
}


.insight-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--dark-text);
  margin-bottom: 12px;
  line-height: 1.3;
}

.insight-subtitle {
  font-size: 14px;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 20px;
}

.key-actions-box {
  background: var(--white);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  margin-block: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.key-actions-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 14px;
}

.key-actions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.key-actions-list li {
  font-size: 14px;
  color: #475569;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

.key-actions-list li::before {
  content: "•";
  color: #f27453;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}

.insight-card-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.65;
}

.insight-card-desc p {
  margin-bottom: 12px;
}

.insight-card-desc p:last-child {
  margin-bottom: 0;
}

/* Section 2: Downloadable Resources Section */
.resource-section-wrapper {
  background: #f0fdfa;
  border-radius: 36px;
  padding: 64px 40px;
  margin-block: 40px;
  border: 1px solid #ccfbf1;
  position: relative;
  overflow: hidden;
}

.resource-card {
  background: var(--white);
  border-radius: 20px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.resource-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.pdf-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff1f2;
  color: #f43f5e;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffe4e6;
}

.resource-tag-teal {
  color: #2fb4a9;
  font-size: 13px;
  font-weight: 600;
}

.resource-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--dark-text);
  margin-bottom: 6px;
  line-height: 1.35;
}

.resource-file-size {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 14px;
}

.resource-card-desc {
  font-size: 13px;
  color: var(--body-text);
  line-height: 1.55;
}

.btn-resource-download {
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  width: 100%;
  margin-top: 20px;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(29, 105, 161, 0.2);
}

.btn-resource-download:hover {
  background: #165684;
  color: var(--white);
  transform: translateY(-2px);
}

/* Section 3: Workshop Cards (Horizontal) */
.workshop-card {
  background: var(--white);
  border-radius: 24px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  height: 100%;
  display: flex;
  gap: 20px;
  align-items: stretch;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.workshop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

.workshop-img-wrap {
  width: 42%;
  flex-shrink: 0;
  min-height: 250px;
  border-radius: 18px;
  overflow: hidden;
}

.workshop-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workshop-content {
  width: 58%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.workshop-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--dark-text);
  margin-bottom: 10px;
  line-height: 1.35;
}

.workshop-desc {
  font-size: 13px;
  color: var(--body-text);
  line-height: 1.55;
  margin-bottom: 16px;
}

.workshop-meta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workshop-meta-list li {
  font-size: 12px;
  color:var(--dark-text);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.workshop-meta-list i {
  color: var(--primary-teal);
  font-size: 16px;
}

.workshop-host {
  font-size: 13px;
  color: var(--body-text);
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  margin: 0;
}

.workshop-host strong {
  color: var(--dark-text);
}

/* Section 4: Weekly Timetable UI */
.timetable-card-container {
  background: var(--white);
  border-radius: 28px;
  padding: 32px 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04);
  overflow-x: auto;
  margin-top: 36px;
}

.timetable-grid {
  display: grid;
  grid-template-columns: 60px repeat(6, 1fr);
  gap: 12px;
  min-width: 1000px;
}

.time-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 48px;
}

.time-label {
  font-size: 11px;
  color: #94a3b8;
  text-align: right;
  padding-right: 8px;
  font-weight: 500;
  height: 22px;
}

.day-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.day-header {
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 12px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  color: var(--dark-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================
   WEEKLY TIMETABLE SCHEDULE TABLE
   Extends .pricing-directory-table theme
   ============================================================ */

.timetable-schedule-table th:first-child {
  width: 18%;
}

.timetable-schedule-table th:not(:first-child) {
  width: 13.66%;
}

/* Time column */
.timetable-time {
  font-weight: 700;
  color: var(--dark-text);
  font-size: 14px;
  white-space: nowrap;
  padding: 16px 20px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}

/* Empty cells */
.timetable-empty {
  text-align: center;
  color: #cbd5e1;
  font-size: 14px;
  padding: 16px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}

/* Session badges */
.timetable-session {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

.timetable-sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-style: italic;
  opacity: 0.8;
  line-height: 1.3;
}

/* Session colors */
.timetable-session--mint {
  background: #e6fffa;
  color: #0d9488;
  border: 1px solid #b2f5ea;
}

.timetable-session--blue {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #e0f2fe;
}

.timetable-session--peach {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #ffedd5;
}

.timetable-session--yellow {
  background: #fefce8;
  color: #a16207;
  border: 1px solid #fef08a;
}

.timetable-session--navy {
  background: var(--primary-blue);
  color: var(--white);
  border: 1px solid #165684;
}

/* Row hover — highlight session cells only */
.timetable-row:hover td {
  background-color: #f8fafc;
  transition: background-color 0.2s ease;
}

.timetable-row:hover .timetable-time {
  background-color: #eef2f6;
}

/* Alternating row stripe */
.timetable-row:nth-child(even) td {
  background-color: #fafafa;
}

.timetable-row:nth-child(even) .timetable-time {
  background-color: #f1f5f9;
}

/* Responsive */
@media (max-width: 991px) {
  .timetable-time {
    font-size: 13px;
    padding: 12px 14px;
  }

  .timetable-session {
    font-size: 12px;
    padding: 6px 10px;
  }
}

@media (max-width: 767px) {
  .timetable-time {
    font-size: 12px;
    padding: 10px 12px;
  }

  .timetable-empty {
    font-size: 12px;
    padding: 10px 8px;
  }

  .timetable-session {
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 14px;
  }

  .timetable-sub {
    font-size: 10px;
  }
}

/* ==========================================================================
   REDESIGNED SERVICES SECTION & SERVICE MODAL STYLES (MATCHING DESIGN)
   ========================================================================== */

/* ============================================================
   WEEKLY TIMETABLE VISUAL TABLE
   ============================================================ */

.weekly-schedule-table-wrap {
  overflow-x: auto;
}

.weekly-schedule-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 8px 8px;
  table-layout: fixed;
}

.weekly-schedule-table th {
  background: #07938f;
  border: 0;
  border-radius: 4px;
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.45px;
  line-height: 1;
  padding: 11px 8px;
  text-align: center;
}

.weekly-schedule-table td {
  border: 1px solid #dddddd;
  border-radius: 8px;
  height: 635px;
  padding: 8px;
  vertical-align: top;
}

.weekly-schedule-cell {
  height: 100%;
  position: relative;
  background:
    linear-gradient(to bottom, transparent 0, transparent 35.8%, #dddddd 35.8%, #dddddd calc(35.8% + 1px), transparent calc(35.8% + 1px)),
    linear-gradient(to bottom, transparent 0, transparent 55.1%, #dddddd 55.1%, #dddddd calc(55.1% + 1px), transparent calc(55.1% + 1px)),
    linear-gradient(to bottom, transparent 0, transparent 77.4%, #dddddd 77.4%, #dddddd calc(77.4% + 1px), transparent calc(77.4% + 1px)),
    var(--white);
}

.weekly-schedule-cell--saturday {
  background:
    linear-gradient(to bottom, transparent 0, transparent 18.6%, #dddddd 18.6%, #dddddd calc(18.6% + 1px), transparent calc(18.6% + 1px)),
    linear-gradient(to bottom, transparent 0, transparent 33.5%, #dddddd 33.5%, #dddddd calc(33.5% + 1px), transparent calc(33.5% + 1px)),
    linear-gradient(to bottom, transparent 0, transparent 51.1%, #dddddd 51.1%, #dddddd calc(51.1% + 1px), transparent calc(51.1% + 1px)),
    var(--white);
}

.schedule-block {
  align-items: center;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  padding: 12px 14px;
  position: absolute;
  right: 0;
  text-align: center;
}

.schedule-title {
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.schedule-subtitle {
  color: inherit;
  font-size: 10px;
  font-style: italic;
  line-height: 1.3;
  margin-top: 8px;
  opacity: 0.88;
}

.schedule-time {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: inherit;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  margin-top: 10px;
  min-height: 22px;
  padding: 4px 12px;
  white-space: nowrap;
}

.schedule-block--blue {
  background: #cfe8f3;
  color: #082562;
}

.schedule-block--mint {
  background: #9ad8d5;
  color: #073957;
}

.schedule-block--yellow {
  background: #ffe16d;
  color: #050505;
}

.schedule-block--peach {
  background: #ffc99f;
  color: #050505;
}

.schedule-block--navy {
  background: #2473a9;
  color: var(--white);
}

.schedule-block--navy .schedule-time {
  background: rgba(255, 255, 255, 0.32);
  color: var(--white);
}

.schedule-block--assessment {
  height: 214px;
  top: 0;
}

.schedule-block--phonics {
  height: 100px;
  top: 235px;
}

.schedule-block--literacy {
  height: 128px;
  top: 354px;
}

.schedule-block--maths {
  height: 115px;
  top: 501px;
}

.schedule-block--eal {
  height: 104px;
  top: 0;
}

.schedule-block--homework {
  height: 79px;
  top: 124px;
}

.schedule-block--readiness {
  height: 82px;
  top: 224px;
}

@media (max-width: 767px) {
  .weekly-schedule-table {
    min-width: 1120px;
  }
}

/* Header badge & title accents */
.section-label-star {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-orange);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
}

.heading-highlight-teal {
  color: var(--primary-teal);
}

/* Redesigned Service Card */
.service-card-ulc {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.service-card-ulc:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22);
}

.service-card-ulc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 30, 0.05) 0%,
    rgba(15, 23, 30, 0.35) 45%,
    #131b1e 80%,
    #131b1e 100%
  );
  z-index: 1;
  transition: opacity 0.35s ease;
}

.service-card-ulc:hover::before {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 30, 0.1) 0%,
    rgba(15, 23, 30, 0.45) 40%,
    #0f1719 75%,
    #0f1719 100%
  );
}

.service-card-content {
  position: relative;
  z-index: 2;
  padding: 28px 24px 24px;
  color: var(--white);
  display: flex;
  flex-direction: column;
}

.service-card-title {
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
}

.service-card-desc {
  color:var(--white);
  line-height: 1.55;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size:16px;
}

.service-card-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  margin-bottom: 20px;
  width: 100%;
}
.service-card-content .btn-ulc
{
      width: fit-content;
}

.btn-read-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-blue);
  color: var(--white) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(29, 105, 161, 0.3);
}

.btn-read-more:hover {
  background: #15527f;
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(29, 105, 161, 0.45);
}

.btn-read-more i {
  font-size: 16px;
  transition: transform 0.25s ease;
}

.btn-read-more:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   SERVICE MODAL POPUP DIALOG (MATCHING IMAGE 3 EXACTLY)
   ========================================================================== */

.ulc-service-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
}

.ulc-service-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.ulc-service-modal-card {
  position: relative;
  background: var(--white);
  border-radius: 24px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ulc-service-modal-card-inner {
  padding: 40px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.ulc-service-modal-backdrop.is-open .ulc-service-modal-card {
  transform: scale(1) translateY(0);
}

.modal-close-btn-circle {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius:var(--radius-sm);
  background: #f0715d;
  color: var(--white);
  border: none;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(240, 113, 93, 0.35);
  transition: all 0.2s ease;
  z-index: 10;
}

.modal-close-btn-circle:hover {
  background: #e35a44;
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 8px 20px rgba(240, 113, 93, 0.5);
}

.modal-service-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 20px;
  padding-right: 48px;
  line-height: 1.25;
}

.modal-service-p {
  color: #475569;
  font-size: 15px;
  line-height: 1.68;
  margin-bottom: 16px;
}

.modal-service-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-blue);
  margin-top: 28px;
  margin-bottom: 18px;
}

.modal-service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
}

.modal-service-item {
  margin-bottom: 16px;
}

.modal-item-title {
  font-weight: 700;
  color: var(--dark-text);
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
}

.modal-item-desc {
  color: var(--body-text);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* Info Pills Grid */
.modal-pills-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 32px;
}

.modal-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px 18px;
  font-size: 14px;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.modal-pill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.modal-pill i {
  color: #05a3a4;
  font-size: 20px;
  flex-shrink: 0;
}

.modal-pill-label {
  color: #05a3a4;
  font-weight: 600;
  margin-right: 4px;
}

.modal-pill-value {
  font-weight: 500;
  color: var(--dark-text);
}

/* Modal Footer Action Buttons */
.modal-footer-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 16px 40px;
  border-top: 1px solid #f1f5f9;
  background: var(--white);
  position: sticky;
  bottom: 0;
  border-radius: 0 0 24px 24px;
  z-index: 10;
}

.btn-modal-close {
  background:var(--white);
  border: 1.5px solid var(--primary-blue);
  color:var(--primary-blue);
  padding: 10px 24px;
  gap: 5;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}



.btn-modal-book {
  background:var(--primary-blue);
  border: none;
  color: var(--white) !important;
  padding: 11px 26px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.btn-modal-book:hover {
  background: #15527f;
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(29, 105, 161, 0.5);
}


/* ==========================================================================
   COMPLETE SERVICE DIRECTORY & PRICING TABLE SECTION
   ========================================================================== */

.pricing-directory-section {
  padding: 80px 0;
  background-color: var(--white);
}

.pricing-directory-header {
  text-align: center;
  margin-bottom: 48px;
}

.pricing-badge-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #f27453;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
}

.pricing-directory-title {
  font-size: 38px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.pricing-directory-desc {
  color: var(--body-text);
  font-size: 15px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
}

/* Table Card Container */
.pricing-directory-table-container {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.pricing-directory-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.pricing-table-head {
  background: var(--primary-blue);
}

.pricing-table-head th {
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  padding: 18px 24px;
  text-align: left;
  border: none;
}

.pricing-table-head th:nth-child(2),
.pricing-table-head th:nth-child(3) {
  width: 25%;
}

/* Category Subheader Rows */
.pricing-cat-row td {
  background-color: var(--light-bg);
  color: var(--primary-blue);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 24px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.pricing-cat-title {
  color: var(--primary-blue);
  font-weight: 600;
}

/* Data Rows */
.pricing-data-row td {
  padding: 16px 24px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.pricing-data-row:hover td {
  background-color: var(--light-bg);
}

.pricing-data-row:last-child td {
  border-bottom: none;
}

/* Specific Columns Styling */
.col-program {
  color: var(--dark-text);

}

.col-program .fmt-bold {
  font-weight: 700;
  color: var(--dark-text);
}

.col-program .fmt-muted {
  font-weight: 500;
  color: var(--body-text);
}

.col-package {
  font-weight: 700;
  color: var(--dark-text);
  font-size: 14px;
}

.col-rate {
  font-weight: 700;
  color: var(--accent-orange);
  font-size: 14px;
}

.col-dash {
  color: var(--accent-orange);
  font-weight: 700;
}

/* Responsive Tweaks */


/* ==========================================================================
   LEARNING APPROACH SECTION (MATCHING EXACT DESIGN)
   ========================================================================== */

.learning-approach-section {
  padding: 90px 0;
  background-color: var(--white);
}

.approach-main-heading {
  font-size: 42px;
  font-weight: 800;
  color: var(--dark-text);
  line-height: 1.25;
  margin-top: 10px;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.approach-main-desc {
  color: var(--body-text);
  font-size: 15px;
  line-height: 1.65;
  max-width: 740px;
  margin: 0 auto;
}

/* Left Graphic Layout */
.approach-image-container {
  position: relative;
  padding: 20px 20px 30px 10px;
  display: inline-block;
  width: 100%;
}

.approach-bg-blob {
  position: absolute;
  top: 15px;
  left: 0;
  width: 82%;
  height: 92%;
  background: linear-gradient(135deg, #e6f7f7 0%, #edfafd 100%);
  border-radius: 40% 60% 65% 35% / 45% 55% 45% 55%;
  z-index: 1;
}

.approach-main-img {
  position: relative;
  z-index: 2;
  width: 78%;
  border-radius: 28px;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
  display: block;
}

/* Floating Test Kits Card */
.test-kits-floating-card {
  position: absolute;
  bottom: 0px;
  right: 25px;
  z-index: 3;
  background: var(--white);
  border-radius: 20px;
  padding: 18px 20px 14px;
  width: 270px;
  box-shadow: 0 22px 50px -10px rgba(15, 23, 42, 0.16);
  border: 1px solid #f1f5f9;
}

.test-kits-title {
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 14px;
}

.test-kits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.test-kit-item {
  background: #f8fafc;
  border-radius: 10px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid #f1f5f9;
}

.test-kit-icon-box {
  width: 20px;
  height: 18px;
  background: #e2e8f0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 11px;
}

.test-kit-line-1 {
  width: 75%;
  height: 2.5px;
  background: #cbd5e1;
  border-radius: 2px;
}

.test-kit-line-2 {
  width: 50%;
  height: 2px;
  background: #e2e8f0;
  border-radius: 2px;
}

.test-kits-bottom-pill {
  width: 44px;
  height: 5px;
  background: #cbd5e1;
  border-radius: 6px;
  margin: 0 auto;
}

/* Right Steps Timeline */
.approach-steps-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.approach-step-item {
  position: relative;
  padding-left: 24px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.step-left-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px;
  background: #e2e8f0;
  transition: background-color 0.3s ease;
}

.approach-step-item.active .step-left-bar {
  background: #05a3a4;
}

.step-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  background: var(--white);
  border: 1.5px solid #e2e8f0;
  color: var(--dark-text);
  transition: all 0.3s ease;
}

.approach-step-item.active .step-icon-box {
  background: #05a3a4;
  border-color: #05a3a4;
  color: var(--white);
  box-shadow: 0 8px 20px rgba(5, 163, 164, 0.3);
}

.step-info {
  flex: 1;
}

.step-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--dark-text);
  transition: color 0.3s ease;
}

.approach-step-item.active .step-title {
  color: #05a3a4;
}

.step-desc {
  color: var(--body-text);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Dynamic Slide Toggle */
.approach-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.approach-slide.active {
  display: block;
  opacity: 1;
}

.approach-main-img {
  position: relative;
  z-index: 2;
  width: 78%;
  max-height: 380px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
  display: block;
}

/* Mobile Stacked Grid Styles (< 992px) */
.mobile-approach-grid {
  margin-top: 30px;
}

.mobile-approach-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.mobile-approach-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.mobile-approach-content {
  padding: 24px 20px;
}

.mobile-step-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
}

.mobile-step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-text);
}

.mobile-step-desc {
  color: var(--body-text);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 0;
}


/* ==========================================================================
   OUR STORY SECTION (EXACT DESIGN MATCH)
   ========================================================================== */

.story-header-desc {
  color: #475569;
  font-size: 15px;
  line-height: 1.7;
}

.story-card-img-wrapper {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.story-card-img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 20px;
}

.story-feature-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 30px 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

.story-icon-box {
  width: 52px;
  height: 52px;
  background: var(--primary-blue);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 24px;
  margin-bottom: 24px;
}

.story-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 12px;
}

.story-card-desc {
  color: var(--body-text);
  font-size: 13.5px;
  line-height: 1.6;
}

.avatar-stack-group {
  display: flex;
  align-items: center;
}

.avatar-stack-group img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  margin-right: -10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.story-orange-title {
  color: #f27453;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* ==========================================================================
   WHY CHOOSE ULC SECTION (EXACT DESIGN MATCH)
   ========================================================================== */

.why-choose-main-card {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #165b8c 100%);
  border-radius: 32px;
  padding: 50px 48px;
  color: var(--white);
  box-shadow: 0 20px 50px rgba(29, 105, 161, 0.25);
  position: relative;
  overflow: hidden;
}

.why-badge-tag {
  color: #7dd3fc;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.why-main-heading {
  font-size: 38px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.25;
  margin-top: 8px;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.why-main-desc {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 520px;
}

.why-stats-container {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 20px 24px;
  backdrop-filter: blur(8px);
}

.why-stat-number {
  font-size: 32px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
}

.why-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin-top: 4px;
}

.why-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 12px;
}

.why-feature-pill-card {
  background: var(--white);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-feature-pill-card:hover {
  transform: translateX(6px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.why-orange-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff8357 0%, #f27453 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(242, 116, 83, 0.3);
}

.why-pill-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.why-pill-desc {
  font-size: 13.5px;
  color: var(--body-text);
  line-height: 1.55;
  margin: 0;
}

/* Right Educator Circular Backdrop Graphic */
.why-graphic-container {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-top: 30px;
}

.why-circular-rings {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 380px;
  pointer-events: none;
}

.ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1995AD;
  opacity: 0.85;
}

.ring-inner {
  position: absolute;
  inset: 35px;
  border-radius: 50%;
  background: #40C4AA;
  opacity: 0.95;
}

.why-educator-photo {
  position: relative;
  z-index: 2;
  max-height: 420px;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}



/* ==========================================================================
   ABOUT ULC WHITE SECTION (EXACT DESIGN MATCH)
   ========================================================================== */

.about-ulc-white-section {
  background: var(--white);
}

.section-title-h2 {
  font-size: 44px;
  font-weight: 800;
  color: var(--dark-text);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom:10px;
}

.about-white-desc {
  color: var(--body-text);
  font-size: 14.5px;
  line-height: 1.65;
}

.about-white-pill-card {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-white-pill-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.about-blue-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:var(--primary-blue);
  color:var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.about-blue-icon svg 
{
  width:28px;
}

.about-pill-title {
  font-size: 18px;
  font-weight: 700;
  color:var(--dark-text);
  margin-bottom: 4px;
}

.about-pill-desc {
  font-size: 13px;
  color:var(--dark-text);
  line-height: 1.5;
  margin: 0;
}

.about-white-middle-img-wrap {
  border-radius: 28px;
  overflow: hidden;
}

.about-white-middle-img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  border-radius: 28px;
}


.about-right-subheading {
  color: #ff7a59;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.about-right-desc {
  color: #94a3b8;
  font-size: 14.5px;
  line-height: 1.65;
}

.btn-blue-pill {
  background: var(--primary-blue);
  color: var(--white) !important;
  border-radius: 30px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btn-blue-pill:hover {
  background: #155b8c;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(29, 105, 161, 0.4);
}

.btn-red-pill {
  background: #ef5b45;
  color: var(--white) !important;
  border-radius: 30px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ef5b45;
  transition: all 0.3s ease;
}

.btn-red-pill:hover {
  background: #d94731;
  border-color: #d94731;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(239, 91, 69, 0.32);
}

.about-right-img-wrap {
  border-radius: 20px;
  overflow: hidden;
  height:-webkit-fill-available;
}

.about-right-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* ==========================================================================
   GUIDANCE BANNER SECTION WITH 4 FLOATING CARDS
   ========================================================================== */

.guidance-banner-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

.guidance-banner-img-wrap {
  width: 100%;
  height: 480px;
  overflow: hidden;
}

.guidance-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guidance-floating-cards-bar {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.guidance-pill-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.guidance-circle-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background:var(--primary-blue);
  color:var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.guidance-circle-icon svg 
{
  width:24px;
}

.guidance-item-title {
  font-size: 18px;
  font-weight: 700;
  color:var(--dark-text);
  margin-bottom: 4px;
}

.guidance-item-desc {
  font-size: 14px;
  color: var(--dark-text);
  line-height: 1.5;
  margin: 0;
}

/* Responsive adjustments */

/* ---------- New Learning Approach Cycle ---------- */
.new-learning-approach {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
}
.new-learning-approach-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #e0e0e0;
  z-index: 1;
}
.approach-cycle-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 30px;
  position: relative;
  z-index: 2;
  border: 1px solid #e3e8f0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cycle-step-num {
  width: 45px;
  height: 45px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 20px;
}
.cycle-title {
  font-size:20px;
  font-weight: 700;
  margin-bottom: 20px;
  color:var(--dark-text);
}
.cycle-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cycle-list li {
  display: flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font-size: 16px;
  color: var(--dark-text);
}
.cycle-arrow-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cycle-arrow {
  width: 40px;
  height: 40px;
  background-color: #f27b53;
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.mdi-check-circle:before
{
  font-size:20px;
}
.ceo-icon
{
  width: 44px;
  height: 44px;
  background-color: var(--accent-orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  border-radius: 12px;
}
    
.ceo-icon svg 
{
  width:24px;
}
.ceo-text p 
{
  font-size:16px;
}
.ceo-message-section
{
  background-color: var(--primary-blue);
  position: relative;
}
.decorative-shape
{
position: absolute; 
top: 0; 
left: 0; 
width: 400px; 
height: 400px; 
background: rgba(39, 194, 196, 0.1); 
border-radius: 50%; 
transform: translate(-30%, -30%);
}
.ceo-message-container
{
  padding:50px 0px;
}
/* ==========================================================================
   CEO MESSAGE SECTION (ABOUT US PAGE)
   ========================================================================== */

.ceo-message-section {
  background-color: #1a6aa0;
  position: relative;
  overflow: hidden;
  color: white;
}

.ceo-decorative-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: rgba(39, 194, 196, 0.1);
  border-radius: 50%;
  transform: translate(-30%, -30%);
}

.ceo-container {
  z-index: 2;
}

.ceo-label {
  opacity: 0.9;
  color: white !important;
}

.ceo-title {
  font-size: 40px;
  line-height: 1.2;
}

.ceo-text-wrapper {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.9;
}

.ceo-card {
  background: white;
  color: var(--dark-text);
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ceo-card-icon {
  width: 44px;
  height: 44px;
  background-color: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.ceo-card-icon svg {
  width: 24px;
}

.ceo-card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ceo-card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
  margin: 0;
}

.ceo-image-wrapper {
  position: relative;
  text-align: center;
}

.ceo-circle-backdrop-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 450px;
  background: #1382b6;
  border-radius: 50%;
  z-index: 1;
}

.ceo-circle-backdrop-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  background: #28c3c6;
  border-radius: 50%;
  z-index: 1;
}

.ceo-image {
  position: relative;
  z-index: 2;
  border-radius: 20px;
  object-fit: cover;
  max-height: 700px;
  mask-image: radial-gradient(ellipse at center, white 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at top, white 60%, transparent 100%);
}

/* ==========================================================================
   SELECT2 OVERRIDES — Polished, modern redesign
   ========================================================================== */

/* --- Container & trigger --- */
.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  width: 100%;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: var(--white) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--dark-text) !important;
  min-height: 52px !important;
  position: relative !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #2fb4a9 !important;
  box-shadow: 0 0 0 4px rgba(47, 180, 169, 0.15) !important;
  outline: none !important;
}

/* --- Single select rendered text --- */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 40px 0 16px !important;
  line-height: 52px !important;
  color: var(--dark-text) !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* --- Multi-select rendered area --- */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 6px 40px 6px 10px !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-height: 40px !important;
  width: 100% !important;
}

/* --- Hide native arrow --- */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none !important;
}

/* --- Custom dropdown arrow with rotation animation --- */
.select2-container--default .select2-selection--single::after,
.select2-container--default .select2-selection--multiple::after {
  content: '\F0140';
  font-family: 'Material Design Icons';
  font-size: 18px;
  color:var(--body-text);
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform 0.25s ease;
  line-height: 1;
}

.select2-container--default.select2-container--open .select2-selection--single::after,
.select2-container--default.select2-container--open .select2-selection--multiple::after {
  transform: translateY(-50%) rotate(180deg);
}

/* --- Placeholder text --- */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94a3b8 !important;
  font-size: 14px;
}

/* --- Inline search field --- */
.select2-container--default .select2-search--inline .select2-search__field {
  font-family: inherit !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  height: 28px !important;
  min-width: 120px !important;
  line-height: 28px !important;
  color: var(--dark-text) !important;
}

/* --- Selected chips --- */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #f0fdfa !important;
  background: linear-gradient(135deg, #f0fdfa 0%, #e5f6f5 100%) !important;
  border: 1px solid #99d6d1 !important;
  border-radius: 8px !important;
  padding: 2px 0 2px 10px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #0d4f4b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  line-height: 1.5 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #5eead4 !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 8px 0 2px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.15s !important;
  cursor: pointer !important;
  background: transparent !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #cc4444 !important;
}

/* --- Clear all button --- */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
  display: none !important;
}

/* ==========================================================================
   DROPDOWN PANEL — Floating card
   ========================================================================== */

.select2-dropdown {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  font-size: 14px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  z-index: 1060 !important;
  animation: select2FadeIn 0.2s ease both;
}

@keyframes select2FadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.select2-dropdown--below { margin-top: 8px !important; }
.select2-dropdown--above { margin-top: -8px !important; }

/* --- Search box inside dropdown --- */
.select2-search--dropdown {
  padding: 8px 10px !important;
  background: #fff !important;
}

.select2-search--dropdown .select2-search__field {
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: #2fb4a9 !important;
  box-shadow: 0 0 0 3px rgba(47, 180, 169, 0.12) !important;
}

/* --- Option list padding --- */
.select2-results__options {
  padding: 6px !important;
}

/* --- Individual options --- */
.select2-container--default .select2-results__option {
  padding: 12px 16px !important;
  border-radius: 8px !important;
  margin: 2px 0 !important;
  font-size: 14px !important;
  transition: background 0.15s, color 0.15s !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* --- Hover state --- */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #e5f6f5 !important;
  color: var(--dark-text) !important;
}

/* --- Selected state --- */
.select2-container--default .select2-results__option--selected {
  background-color: #d2f0ed !important;
  color: #0d4f4b !important;
  font-weight: 600 !important;
}

.select2-container--default .select2-results__option--selected::after {
  content: '\F012C';
  font-family: 'Material Design Icons';
  font-size: 16px;
  float: right;
  color: #0d9488;
}

/* --- Disabled options --- */
.select2-container--default .select2-results__option--disabled {
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
}

/* --- Focus / keyboard navigation --- */
.select2-container--default .select2-results__option--highlighted:focus,
.select2-container--default .select2-results__option[aria-selected="true"]:focus {
  outline: 2px solid #2fb4a9;
  outline-offset: -2px;
}

/* --- No results message --- */
.select2-container--default .select2-results__message {
  padding: 14px 16px !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
}

/* --- Prevent dropdown from overlapping submit button --- */
.select2-container--open {
  z-index: 1100 !important;
}

.select2-container--open + .select2-container--open {
  z-index: 1101 !important;
}

/* --- Ensure dropdown is contained within viewport on mobile --- */
.select2-container--default.select2-container--open .select2-dropdown--below,
.select2-container--default.select2-container--open .select2-dropdown--above {
  max-height: 60vh;
  overflow-y: auto;
}

/* --- Responsive: full-width dropdown on small screens --- */
@media (max-width: 575.98px) {
  .select2-dropdown {
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: 12px !important;
    padding: 2px 0 2px 8px !important;
  }
}

/* ========== INLINE FIELD VALIDATION ERRORS ========== */

.field-error {
  color: #DC2626;
  font-size: 13px;
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.4;
}

input.input-error,
select.input-error,
textarea.input-error {
  border-color: #DC2626 !important;
}

/* Live clear: hide error when user types a valid value */
input.input-error:valid:not(:placeholder-shown) + .field-error,
input.input-error:focus:not(:placeholder-shown) + .field-error {
  display: none;
}

.js-field-error-hidden {
  display: none;
}

/* ==========================================================================
   LEGAL PAGES — Terms & Conditions, Privacy Policy
   ========================================================================== */
.legal-content {
  color: #64748b;
  font-size: 16px;
  line-height: 1.8;
}

.legal-content h3 {
  color: #171d1c;
  margin-top: 30px;
  margin-bottom: 15px;
}

.legal-content h4 {
  color: #171d1c;
  margin-top: 20px;
  font-size: 18px;
}

.legal-content ul {
  margin-left: 20px;
  margin-bottom: 15px;
  list-style-type: disc;
}

.legal-email-link {
  color: #0f766e;
}

.legal-email-link:hover {
  color: #0d6b63;
}

/* ============================================================ */
.footer-logo-stacked img 
{
  width:120px;
}
.hotline-card-content
{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height:100%;
}
.hotline-bottom-content .divider
{
  height:1px;
  background-color: var(--white);
}

/* ============================================================
   ACADEMIC TERM DATES TABLE
   Extends .pricing-directory-table theme
   ============================================================ */

.term-dates-table {
  min-width: 720px;
}

.term-dates-table .pricing-table-head {
  background: #236fa5;
}

.term-dates-table .pricing-table-head th {
  padding: 20px 24px;
}

.term-dates-table .pricing-table-head th:nth-child(2) {
  text-align: right;
}

.term-dates-table .term-data-row td,
.term-dates-table .term-break-row td {
  padding: 18px 24px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
  font-size: 16px;
  line-height: 1.45;
}

.term-dates-table .term-data-row td {
  background-color: var(--white);
  color: var(--dark-text);
  font-weight: 500;
}

.term-dates-table .term-data-row td:first-child {
  font-weight: 600;
}

.term-dates-table .term-data-row td:last-child,
.term-dates-table .term-break-row td:last-child {
  text-align: right;
}

.term-dates-table .term-data-row:hover td {
  background-color: var(--light-bg);
}

.term-dates-table .term-break-row td {
  color: var(--dark-text);
  font-weight: 700;
  border-bottom-color: rgba(15, 23, 42, 0.05);
}

.term-dates-table .term-break-row strong {
  font-weight: 700;
}

.term-dates-table .term-break-row.term-break--green td {
  background-color: #dcf4df;
}

.term-dates-table .term-break-row.term-break--blue td {
  background-color: #dff0fb;
}

.term-dates-table .term-break-row.term-break--peach td {
  background-color: #fbe6d8;
}

.term-dates-table .term-divider-row td {
  padding: 0;
  height: 30px;
  border: none;
  background-color: var(--white);
}

/* Focus ring for keyboard accessibility */
.pricing-directory-table tbody tr:focus-within {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
}

/* Footnote */
.term-dates-note {
  font-size: 14px;
  color: var(--body-text);
  margin-top: 16px;
  font-style: italic;
}

/* Responsive */
@media (max-width: 991px) {
  .term-data-row td,
  .term-break-row td {
    padding: 14px 18px;
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .term-data-row td,
  .term-break-row td {
    padding: 12px 16px;
    font-size: 14px;
  }

  .term-dates-note {
    font-size: 13px;
  }
}


.about-caption 
{
  font-size:18px;
  color: var(--dark-text);
  font-weight:600;
}

.about-caption span 
{
  color: var(--accent-orange);
  margin-top:15px;
}