/* 
   SPOXTALE POIE - Premium Landing Page Stylesheet
   Design system utilizing CSS custom properties, smooth transitions, and premium layouts.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Color Palette */
  --primary-blue: #00a2e8;
  --primary-blue-hover: #008cc9;
  --dark-navy: #151c2d;
  --light-slate: #60687a;
  --border-cyan: #5cd0d3;

  --bg-gradient-start: #fffcf9;
  --bg-gradient-end: #ffffff;

  --card-bg: #ffffff;
  --card-shadow: 0 20px 40px -15px rgba(21, 28, 45, 0.08), 0 1px 3px rgba(21, 28, 45, 0.02);
  --card-shadow-hover: 0 30px 60px -15px rgba(21, 28, 45, 0.15), 0 5px 15px rgba(0, 162, 232, 0.06);

  /* Typography */
  --font-headings: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Global Font Sizes - Desktop */
  --size-h1: 2.25rem; /* 36px */
  --size-h2: 1.75rem; /* 28px */
  --size-h3: 1.5rem;  /* 24px */
  --size-h4: 1.25rem; /* 20px */
  --size-h5: 1rem;    /* 16px */
  --size-h6: 0.875rem; /* 14px fallback */
  --size-p-large: 1rem; 
  --size-p-base: 0.875rem; /* 14px */
  --size-p-small: 0.75rem; /* 12px caption */
}

/* Global Font Sizes - Mobile */
@media (max-width: 991px) {
  :root {
    --size-h1: 1.75rem; /* 28px */
    --size-h2: 1.5rem;  /* 24px */
    --size-h3: 1.25rem; /* 20px */
    --size-h4: 1.125rem; /* 18px */
    --size-h5: 1rem;    /* 16px */
    --size-h6: 0.875rem;
    --size-p-large: 1rem;
    --size-p-base: 0.875rem; /* 14px */
  }
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-gradient-end);
  color: var(--dark-navy);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Standard Heading & Paragraph Typography */
h1, .h1-style { font-size: var(--size-h1); font-family: var(--font-headings); font-weight: 700; line-height: 1.2; }
h2, .h2-style { font-size: var(--size-h2); font-family: var(--font-headings); font-weight: 600; line-height: 1.3; }
h3, .h3-style { font-size: var(--size-h3); font-family: var(--font-headings); font-weight: 600; line-height: 1.4; }
h4, .h4-style { font-size: var(--size-h4); font-family: var(--font-headings); font-weight: 500; line-height: 1.4; }
h5, .h5-style { font-size: var(--size-h5); font-family: var(--font-headings); font-weight: 500; line-height: 1.4; }
h6, .h6-style { font-size: var(--size-h6); font-family: var(--font-headings); font-weight: 500; line-height: 1.4; }
p, .p-style { font-size: var(--size-p-base); font-family: var(--font-body); font-weight: 400; line-height: 1.6; }

/* Header / Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  background-color: #ffffff;
  border-top: 5px solid #ff4c8b;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.logo {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.5px;
  color: var(--dark-navy);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hamburger-icon {
  width: 20px;
  height: 20px;
  stroke: var(--dark-navy);
  display: inline-block;
  cursor: pointer;
  margin-right: 4px;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 32px;
  align-items: center;
}

nav ul li a {
  text-decoration: none;
  color: var(--light-slate);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: var(--dark-navy);
}

.header-cta {
  text-decoration: none;
  background-color: var(--primary-blue);
  color: #ffffff !important;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 15px rgba(0, 162, 232, 0.2);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.header-cta:hover {
  background-color: var(--primary-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 162, 232, 0.3);
}

/* Main Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  background: white;
  padding: 0 0 100px 0;
}

/* Left Content Area */
.hero-content {
  padding: 160px 8% 80px 14%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.hero-title {
  font-family: var(--font-headings);
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 24px;
  text-transform: uppercase;
  color: var(--dark-navy);
}

/*.hero-title {*/
/*  font-family: var(--font-headings);*/
/*  font-size: 3.8rem;*/
/*  font-weight: 900;*/
/*  line-height: 1.1;*/
/*  letter-spacing: -1px;*/
/*  margin-bottom: 24px;*/
/*  text-transform: uppercase;*/
/*  color: var(--dark-navy);*/
/*}*/

.hero-title .blue-text {
  color: var(--primary-blue);
}

.hero-description {
  font-family: var(--font-body);
  font-size: var(--size-p-large);
  color: var(--light-slate);
  margin-bottom: 40px;
  max-width: 480px;
  line-height: 1.6;
}

/* Action Area */
.hero-action {
  display: flex;
  align-items: center;
  gap: 36px;
}

.cta-btn {
  background-color: var(--primary-blue);
  color: white;
  border: none;
  padding: 16px 36px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 162, 232, 0.25);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cta-btn:hover {
  background-color: var(--primary-blue-hover);
  box-shadow: 0 12px 28px rgba(0, 162, 232, 0.4);
  transform: translateY(-2px);
}

.cta-btn:active {
  transform: translateY(0);
}

.experience-counter {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.experience-number {
  font-family: var(--font-headings);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--dark-navy);
}

.experience-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--light-slate);
  margin-top: 4px;
}

/* Right Image Area */
.hero-image-container {
  height: 100%;
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Top accent bar in cyan */
.hero-image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: var(--border-cyan);
  z-index: 10;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

/* =====================================================
   GLOBAL CONTAINER WIDTH CONSTRAINT & ALIGNMENT
===================================================== */
.cards-container,
.excellence-container,
.entry-cards-container,
.timeline-container,
.services-deck-container,
.pathways-deck-container,
.about-program-container,
.admissions-flow-container,
.admissions-pathway-container,
.news-blog-container,
.journey-form-container,
.footer-container {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
}

/* Overlapping Cards Section */
.cards-section {
  position: relative;
  background-color: #ffffff;
  padding: 0 8% 20px 8%;
  z-index: 5;

}

.cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: -80px;
  /* Overlap effect */
}

/* Single Card */
.info-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 36px 28px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(21, 28, 45, 0.03);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Individual Premium Card Color Tints matching screenshots */
#card-recognition {
  background-color: #fff9f9;
  border-color: rgba(255, 208, 0, 0.15);
}

#card-pathway {
  background-color: #fffdf5;
  border-color: rgba(255, 208, 0, 0.15);
}

#card-learning {
  background-color: #f7fdfa;
  border-color: rgba(92, 208, 211, 0.2);
}

#card-progression {
  background-color: #f5fafd;
  border-color: rgba(0, 162, 232, 0.15);
}

/* Top decorative hover line */
.info-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--primary-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.info-card:hover {
  /* Static card, no movement or translation on hover */
}

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

/* Icons */
.card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon svg {
  width: 100%;
  height: 100%;
}

/* Card Content */
.card-title {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--dark-navy);
}

.card-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--light-slate);
}

/* Micro-animations and interaction details */
.info-card .card-icon svg path {
  transition: stroke 0.3s ease, fill 0.3s ease;
}

.info-card:hover .card-icon svg .stroke-accent {
  stroke: var(--primary-blue);
}

.info-card:hover .card-icon svg .fill-accent {
  fill: var(--primary-blue);
}


/* Excellence Section Styles */
.excellence-section {
  padding: 60px 8%;
  position: relative;
  overflow: hidden;

}

.excellence-container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  /* Adjusted column proportions to match screenshot width ratios */
  gap: 60px;
  /* Aligned horizontal gaps */
  align-items: center;
  width: 100%;
}

/* Left Side: Pink/Magenta Card & Waves */
.excellence-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.wave-bg-img {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 420%;
  height: 420%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  object-fit: contain;
}

.excellence-card {
  background: url('assets/Group 296.png') no-repeat right -250px top -40px / 140% auto, linear-gradient(135deg, #ec3b83 0%, #a82062 100%);
  width: 100%;
  max-width: 520px;
  padding: 56px 40px 48px 40px;
  border-radius: 16px;
  /* High fidelity exact rounded corner */
  box-shadow: 0 30px 60px -20px rgba(168, 32, 98, 0.35);
  position: relative;
  z-index: 2;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow: hidden;
}

.card-hero-num {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.num-large {
  font-family: var(--font-headings);
  font-size: 7.5rem;
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -2px;
}

.num-text {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 12px;
}

.card-subhead {
  font-family: var(--font-headings);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  margin-top: 16px;
  line-height: 1.1;
}

.card-tagline {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  opacity: 0.8;
  margin-top: 4px;
}

.excellence-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-box {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.25) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.stat-box:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.stat-num {
  font-family: var(--font-headings);
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 2px;
}

/* Right Side: Narrative Details */
.excellence-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}

.excellence-title {
  font-family: var(--font-headings);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--dark-navy);
  margin-bottom: 24px;
}

.excellence-desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--light-slate);
  line-height: 1.8;
  margin-bottom: 36px;
  max-width: 600px;
}

.excellence-btn {
  background-color: var(--primary-blue);
  /* Light cyan button matching screenshot */
  color: white;
  border: none;
  padding: 16px 36px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0;
  /* Modern square corner */
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(104, 210, 214, 0.2);
  transition: all 0.3s ease;
}

.excellence-btn:hover {
  background-color: #1c90bd;
  box-shadow: 0 10px 20px rgba(104, 210, 214, 0.35);
  transform: translateY(-2px);
}

.excellence-btn:active {
  transform: translateY(0);
}


/* Section 1: Three Colored Cards Styles */
.entry-cards-section {
  padding: 80px 8%;
  background-color: #ffffff;
}

.entry-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.entry-card {
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  /* Modern square corner */
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(21, 28, 45, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(21, 28, 45, 0.12);
}

.entry-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  width: 100%;
}

.entry-icon {
  width: 48px;
  height: 48px;
  stroke: #ffffff;
}

.entry-num {
  font-family: var(--font-headings);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
  color: transparent;
}

.entry-title {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  color: #ffffff;
}

.entry-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* Specific background styles for Section 1 */
.bg-pink {
  background: linear-gradient(135deg, #ec3b83 0%, #a82062 100%);
}

.bg-yellow {
  background: linear-gradient(135deg, #ffd700 0%, #eeb902 100%);
}

.bg-teal {
  background: linear-gradient(135deg, #1aa495 0%, #0e7066 100%);
}

/* Dark text adaptations for yellow card */
.bg-yellow .entry-icon {
  stroke: #151c2d;
}

.bg-yellow .entry-title {
  color: #151c2d;
}

.bg-yellow .entry-desc {
  color: rgba(21, 28, 45, 0.85);
}

.bg-yellow .entry-num {
  -webkit-text-stroke: 1.5px rgba(21, 28, 45, 0.4);
}


/* Section 2: Journey Milestones Styles */
.milestones-section {
  padding: 80px 8%;
  background-color: #ffffff;
}

.section-heading {
  font-family: var(--font-headings);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--dark-navy);
  margin-bottom: 56px;
  text-align: center;
}

.timeline-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
  width: 100%;
}

.timeline-line {
  position: absolute;
  top: 30px;
  /* Centered with 60px circle */
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background-color: #e2e8f0;
  z-index: 1;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  position: relative;
}

.timeline-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--dark-navy);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headings);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--dark-navy);
  margin-bottom: 24px;
  transition: all 0.3s ease;
  z-index: 3;
}

.timeline-step:hover .timeline-circle {
  background-color: var(--dark-navy);
  color: #ffffff;
}

.timeline-title {
  font-family: var(--font-headings);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--dark-navy);
}

.timeline-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--light-slate);
  max-width: 160px;
  margin: 0 auto;
}


/* Section 3: Educational Excellence Cards (Services Deck) Styles */
.services-deck-section {
  padding: 80px 8%;
  background-color: #f8fafc;
  /* Subtle contrast background */
}

.services-deck-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.service-deck-card {
  background-color: #ffffff;
  border: 1px solid rgba(21, 28, 45, 0.05);
  border-radius: 12px;
  /* Modern sharp square corner */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(21, 28, 45, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.service-deck-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(21, 28, 45, 0.08);
}

.card-header-bg {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 100%;
}

.service-card-icon {
  width: 48px;
  height: 48px;
  stroke: #ffffff;
}

.card-body-content {
  padding: 28px 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.service-card-title {
  font-family: var(--font-headings);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.service-card-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--light-slate);
}

/* Service Card Titles color settings matching screenshots */
.color-teal {
  color: #0e7066;
}

.color-pink {
  color: #a82062;
}

.color-yellow {
  color: #d97706;
  /* Accessible contrast dark amber/yellow */
}

.color-pink-dark {
  color: #a82062;
}

/* Header background helper classes */
.bg-pink-dark {
  background-color: #a82062;
}

/* Active Highlight outline for Student Transport card */
.service-deck-card.active-card {
  border: 2px solid var(--primary-blue);
  box-shadow: 0 15px 35px rgba(0, 162, 232, 0.15);
}


/* Section 4: Progression Pathways Styles */
.pathways-deck-section {
  padding: 80px 8%;
  background-color: #ffffff;
  
}

.pathways-deck-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.pathway-card {
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  /* Modern square corner */
  box-shadow: 0 15px 35px rgba(21, 28, 45, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  justify-content: center;
  height: 100%;
}

.pathway-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(21, 28, 45, 0.12);
}

/* Card 1 Graduate Admissions Specifics */
.pathway-card.bg-teal {
  background-color: #0e7066;
  color: #ffffff;
  text-align: center;
}

.pathway-card.bg-teal .pathway-card-icon {
  stroke: #ffffff;
}

/* Card 2 Business/IT Stack Specifics - Double Stacked Cards */
.pathways-center-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  width: 100%;
}

.pathway-sub-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
  border-radius: 12px;
  background-color: #eeb902;
  /* Solid primary yellow matches other BTEC pages */
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
  width: 100%;
  box-shadow: 0 15px 35px rgba(21, 28, 45, 0.05);
}

.pathway-sub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(21, 28, 45, 0.15);
}

.pathway-sub-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.pathway-sub-icon {
  width: 42px;
  height: 42px;
  stroke: #ffffff;
  flex-shrink: 0;
}

.pathway-sub-title {
  font-family: var(--font-headings), sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  text-align: left;
}

.pathway-arrow-icon {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.pathway-sub-card:hover .pathway-arrow-icon {
  transform: translate(3px, -3px);
}

/* Card 3 Skills Based Education Specifics */
.pathway-card.bg-pink {
  background-color: #db2777;
  /* Vibrant pink brand color */
  color: #ffffff;
  text-align: center;
}

.pathway-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px auto;
  flex-shrink: 0;
}

.stamp-text {
  font-family: var(--font-headings);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
}

.pathway-card-title {
  font-family: var(--font-headings);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.3;
}

.pathway-card-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.9;
}



/* Section: About The Program Styles */
.about-program-section {
  padding: 80px 8%;
  background-color: #ffffff;
}

.about-program-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  width: 100%;
}

.about-column {
  display: flex;
  flex-direction: column;
}

.about-heading {
  font-family: var(--font-headings);
  font-size: 2.2rem;
  font-weight: 900;
  /* Reinstated bold heading weight as preferred */
  line-height: 1.2;
  color: var(--dark-navy);
  margin-bottom: 24px;
}

.about-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--light-slate);
}

.highlights-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.highlight-check {
  width: 20px;
  height: 20px;
  stroke: var(--light-slate);
  flex-shrink: 0;
  margin-top: 4px;
}

.highlight-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--light-slate);
}


/* Section: Unmatched Offers and Packages Styles */
.offers-packages-section {
  position: relative;
  padding: 120px 8%;
  background-image: url('assets/offers_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  width: 100%;
}

.offers-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(21, 28, 45, 0.92) 0%, rgba(14, 112, 102, 0.85) 100%);
  z-index: 1;
}

.offers-container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.offers-title {
  font-family: var(--font-headings);
  font-size: 2.5rem;
  font-weight: 900;
  /* Reinstated bold heading weight as preferred */
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.offers-subtitle {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 24px;
  opacity: 0.95;
  color: #ffffff;
}

.offers-desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.85;
  margin-bottom: 36px;
  max-width: 680px;
  color: #ffffff;
}

.offers-btn {
  display: inline-block;
  border: 2px solid #ffffff;
  color: #ffffff;
  text-decoration: none;
  padding: 14px 40px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0;
  /* Square edges! */
  transition: all 0.3s ease;
  background-color: transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.offers-btn:hover {
  background-color: #ffffff;
  color: var(--dark-navy) !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.offers-btn:active {
  transform: translateY(0);
}


/* Section: Admissions Process Flow Styles */
.admissions-flow-section {
  padding: 80px 8%;
  background-color: #ffffff;
  width: 100%;
}

.admissions-flow-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.admissions-flow-card {
  background-color: #ffffff;
  border: 1px solid rgba(21, 28, 45, 0.05);
  border-radius: 12px;
  /* Smooth rounded corners matching screenshot */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(21, 28, 45, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  width: calc((100% - 100px) / 2);
  /* accounts for arrows */
  height: auto;
}

.admissions-flow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(21, 28, 45, 0.08);
}

.admissions-flow-header {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 100%;
}

.admissions-flow-icon {
  width: 48px;
  height: 48px;
  stroke: #ffffff;
}

.admissions-flow-body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.admissions-flow-title {
  font-family: var(--font-headings);
  font-size: 1.15rem;
  font-weight: 800;
  /* Premium bold weight reinstated */
  margin-bottom: 8px;
}

.admissions-flow-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--light-slate);
}

.admissions-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.admissions-flow-arrow svg {
  width: 24px;
  height: 24px;
}

/* Section: Admissions Process pathway Styles */
.admissions-pathway-section {
  padding: 80px 8%;
  background-color: #ffffff;
  width: 100%;
}

.admissions-pathway-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.admissions-pathway-card {
  background-color: #ffffff;
  border: 1px solid rgba(21, 28, 45, 0.05);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(21, 28, 45, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  width: calc((100% - 80px) / 2);
  height: auto;
}

.admissions-pathway-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(21, 28, 45, 0.08);
}

.admissions-pathway-header {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 100%;
}

.admissions-pathway-icon {
  width: 48px;
  height: 48px;
  stroke: #ffffff;
}

.admissions-pathway-body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.admissions-pathway-title {
  font-family: var(--font-headings);
  font-size: 1.15rem;
  font-weight: 800;
  /* Premium bold weight reinstated */
  margin-bottom: 8px;
}

.admissions-pathway-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--light-slate);
}

.admissions-pathway-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-grow: 0;
  width: 80px;
  height: 30px;
  flex-shrink: 0;
}
.admissions-pathway-arrow svg {
  width: 100%;
  height: 32px;
}
/*.admissions-pathway-arrow {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  color: #cbd5e1;*/
/*  width: 30px;*/
/*  height: 30px;*/
/*  flex-shrink: 0;*/
/*}*/
/*.admissions-pathway-arrow svg {*/
/*  width: 24px;*/
/*  height: 24px;*/
/*}*/



/* Section: Latest News & Blogs Styles */
.news-blog-section {
  padding: 80px 8% 100px 8%;
  background-color: #ffffff;
  width: 100%;
}

.news-blog-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.news-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 30px;
  width: 100%;
}

.news-column-featured {
  display: flex;
  flex-direction: column;
}

.news-column-stacked {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.news-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(21, 28, 45, 0.04);
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(21, 28, 45, 0.08);
}

.news-card-image-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.featured-card .news-card-image-wrapper {
  height: 380px;
}

.sub-card .news-card-image-wrapper {
  height: 180px;
}

.news-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.news-card:hover .news-card-image {
  transform: scale(1.03);
}

.news-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.news-card-title {
  font-family: var(--font-headings);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--dark-navy);
  margin-bottom: 16px;
}

.featured-card .news-card-title {
  font-size: 1.35rem;
  line-height: 1.3;
}

.news-card-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  margin-top: auto;
}

.news-card-link:hover {
  color: var(--primary-blue);
  text-decoration: underline;
}


/* Section: Journey Lead Form Styles (Split-Grid Design) */
.journey-form-section {
  padding: 80px 8% 100px 8%;
  background-color: #151c2d;
  /* Premium deep dark navy */
  width: 100%;
}

.journey-form-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.journey-card {
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 0;
  align-items: stretch;
  box-shadow: 0 30px 60px rgba(21, 28, 45, 0.15);
  position: relative;
}

.journey-circle {
  display: none;
  /* Decorative circles hidden in split image layout */
}

.journey-branding {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(to bottom, rgba(21, 28, 45, 0.9) 0%, rgba(21, 28, 45, 0.45) 50%, rgba(21, 28, 45, 0.1) 100%), url('assets/apply_students.png');
  background-size: cover;
  background-position: center;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 540px;
  color: #ffffff;
}

.journey-tag {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: #eed756;
  /* Brand golden highlight color */
  display: block;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.journey-heading {
  font-family: var(--font-headings);
  font-size: 3rem;
  /* font-weight: 900; */
  line-height: 0.95;
  color: #ffffff;
  margin-bottom: 44px;
  text-transform: uppercase;
  /* letter-spacing: -2px; */
}

.journey-subtext {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  max-width: 320px;
  line-height: 1.6;
}

.journey-form-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
}

.form-title {
  font-family: var(--font-headings);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dark-navy);
  margin-bottom: 25px;
}

.lead-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  width: 100%;
  margin-bottom: 20px;
}

.form-row-2 .form-group {
  margin-bottom: 0;
}

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form textarea {
  width: 100%;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark-navy);
  transition: all 0.3s ease;
}

.lead-form textarea {
  resize: none;
}

.lead-form input:focus,
.lead-form textarea:focus {
  background-color: #ffffff;
  border-color: var(--primary-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 162, 232, 0.08);
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.submit-form-btn {
  width: 100%;
  background-color: var(--dark-navy);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 18px 30px;
  font-family: var(--font-headings);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(21, 28, 45, 0.1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.submit-form-btn:hover {
  background-color: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(0, 162, 232, 0.2);
}

.submit-form-btn:active {
  transform: translateY(0);
}


/* Responsive Adaptations */

@media (max-width: 1200px) {
  .hero-title {
    font-size: 3.2rem;
  }

  .hero-content {
    padding: 140px 6% 80px 8%;
  }

  .cards-container {
    gap: 16px;
    margin-top: -100px;
  }

  .info-card {
    padding: 28px 20px;
  }

  .excellence-title {
    font-size: 2.2rem;
  }

  .excellence-container {
    gap: 40px;
  }

  .entry-cards-section,
  .milestones-section,
  .services-deck-section,
  .pathways-deck-section,
  .about-program-section,
  .admissions-pathway-section,
  .admissions-flow-section {
    padding: 60px 6%;
  }

  .news-blog-section {
    padding: 60px 6% 80px 6%;
  }

  .journey-branding {
    padding: 50px 40px;
    min-height: 480px;
  }

  .journey-heading {
    font-size: 3.6rem;
  }

  .journey-form-wrapper {
    padding: 50px 40px;
  }
}

@media (max-width: 992px) {
  header {
    padding: 20px 5%;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .hero-content {
    padding: 120px 5% 60px 5%;
    text-align: center;
    align-items: center;
  }

  .hero-description {
    max-width: 600px;
  }

  .hero-action {
    justify-content: center;
    width: 100%;
  }

  .hero-image-container {
    height: 480px;
    width: 100%;
  }

  .cards-section {
    padding: 0 5% 60px 5%;
  }

  .cards-container {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -50px;
  }

  .excellence-container {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }

  .excellence-left {
    order: 1;
  }

  .excellence-right {
    order: 2;
    align-items: center;
    text-align: center;
  }

  .excellence-title {
    font-size: 2.2rem;
  }

  .excellence-section {
    padding: 60px 5%;
  }

  /* Responsive Bottom Sections */
  .entry-cards-section,
  .milestones-section,
  .services-deck-section,
  .pathways-deck-section,
  .about-program-section,
  .admissions-pathway-section,
  .admissions-flow-section {
    padding: 50px 5%;
  }

  .entry-cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .services-deck-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .pathways-deck-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-program-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .admissions-flow-container {
    flex-direction: column;
    gap: 30px;
  }

  .admissions-flow-card {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  .admissions-flow-arrow {
    transform: rotate(90deg);
    /* Points arrow downwards on tablet/mobile */
    margin: -10px auto;
  }
  .admissions-pathway-container {
    flex-direction: column;
    gap: 30px;
  }

  .admissions-pathway-card {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  .admissions-pathway-arrow {
    transform: rotate(90deg);
    /* Points arrow downwards on tablet/mobile */
    margin: -10px auto;
  }


  .news-blog-section {
    padding: 50px 5% 70px 5%;
  }

  .news-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .featured-card .news-card-image-wrapper {
    height: 320px;
  }

  .sub-card .news-card-image-wrapper {
    height: 200px;
  }

  .journey-form-section {
    padding: 60px 5%;
  }

  .journey-card {
    grid-template-columns: 1fr;
  }

  .journey-branding {
    padding: 50px 40px;
    min-height: 400px;
  }

  .journey-heading {
    font-size: 3rem;
  }

  .journey-form-wrapper {
    padding: 40px;
  }
}

@media (max-width: 768px) {
  nav {
    display: none;
    /* Hide desktop nav menu on mobile/tablet */
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-action {
    flex-direction: column;
    gap: 20px;
  }

  .cta-btn {
    width: 100%;
    max-width: 300px;
  }

  .experience-counter {
    align-items: center;
  }

  .hero-image-container {
    height: 380px;
  }

  /* Vertical Timeline Flow on Mobile/Tablet */
  .timeline-container {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-left: 20px;
  }

  .timeline-line {
    top: 30px;
    bottom: 30px;
    left: 50px;
    /* Centered exactly behind the timeline circles */
    width: 2px;
    height: auto;
    right: auto;
  }

  .timeline-step {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    column-gap: 24px;
    text-align: left;
  }

  .timeline-circle {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    margin-right: 0;
    align-self: center;
  }

  .timeline-title {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 4px;
  }

  .timeline-desc {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    max-width: 100%;
  }

  .offers-title {
    font-size: 2rem;
  }

  .offers-subtitle {
    font-size: 1.2rem;
  }

  .offers-packages-section {
    padding: 80px 6%;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2rem;
  }

  .cards-container {
    grid-template-columns: 1fr;
    margin-top: -30px;
  }

  .info-card {
    padding: 30px 24px;
  }

  .num-large {
    font-size: 5.5rem;
  }

  .excellence-card {
    padding: 40px 24px;
    gap: 30px;
  }

  .stat-box {
    padding: 12px 6px;
  }

  .stat-num {
    font-size: 1.2rem;
  }

  /* Responsive adjustments for entry and services at 576px */
  .entry-cards-container {
    grid-template-columns: 1fr;
  }

  .services-deck-container {
    grid-template-columns: 1fr;
  }

  .entry-card {
    padding: 36px 24px;
  }

  .pathway-card {
    padding: 36px 24px;
  }

  .pathway-sub-card {
    padding: 30px 20px;
  }

  .pathway-sub-title {
    font-size: 1.05rem;
  }

  .pathway-sub-icon {
    width: 32px;
    height: 32px;
  }

  .section-heading {
    font-size: 1.8rem;
    margin-bottom: 36px;
  }

  .offers-title {
    font-size: 1.6rem;
  }

  .offers-subtitle {
    font-size: 1.1rem;
  }

  .about-heading {
    font-size: 1.8rem;
  }

  .news-blog-section {
    padding: 50px 5%;
  }

  .featured-card .news-card-image-wrapper {
    height: 240px;
  }

  .news-card-body {
    padding: 20px;
  }

  .featured-card .news-card-title {
    font-size: 1.15rem;
  }

  .journey-form-section {
    padding: 50px 5%;
  }

  .journey-branding {
    padding: 40px 20px;
    min-height: 320px;
  }

  .journey-heading {
    font-size: 2.4rem;
  }

  .journey-form-wrapper {
    padding: 30px 20px;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lead-form input[type="text"],
  .lead-form input[type="email"],
  .lead-form input[type="tel"],
  .lead-form textarea {
    padding: 14px 16px;
  }

  .submit-form-btn {
    padding: 16px 24px;
  }
}

/* =====================================================
   ABOUT PEARSON BTEC PAGE
===================================================== */

/* Main page spacing */
.btec-page {
  padding-top: 95px;
  background: #ffffff;
}


/* =====================================================
   HERO SECTION
===================================================== */

.btec-hero {
  padding: 40px 8%;
  margin-bottom: -50px;
}

/* Main Heading */
.btec-hero h1 {
  font-family: var(--font-headings);
  font-size: 42px;
  font-weight: 900;
  color: var(--dark-navy);
  line-height: 1.1;
}

/* Blue Text */
.btec-hero h1 span {
  color: var(--primary-blue);
}

/* Description */
.btec-hero p {
  margin-top: 14px;
  max-width: 850px;
  color: var(--light-slate);
}


/* =====================================================
   ABOUT + PINK CARD SECTION
===================================================== */

.btec-info-section {
  padding: 20px 8%;
  display: grid;

  /* 2 Column Layout */
  grid-template-columns: 1.1fr 0.9fr;

  gap: 35px;
  align-items: center;
}

/* Left Content */
.btec-info-left h2 {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 15px;
}

.btec-info-left p {
  color: var(--light-slate);
}

.btec-info-left ul {
  margin-top: 20px;
  padding-left: 20px;
}

.btec-info-left ul li {
  margin-bottom: 10px;
  color: var(--light-slate);
}


/* Pink Card */
.btec-superiority-card {
  background: linear-gradient(135deg, #ec3b83 0%, #c2185b 100%);

  color: white;

  border-radius: 18px;

  padding: 60px 50px;

  min-height: 350px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  box-shadow: var(--card-shadow);
}

/* Large Number */
.btec-num {
  font-size: 90px;
  font-weight: 300;
  line-height: 1;
}


/* =====================================================
   YELLOW SECTION
===================================================== */

.btec-yellow-block {
  padding: 20px 8%;
  margin-top: -60px;
  display: grid;
  grid-template-columns: 0.7fr 1.2fr;
  min-height: 320px;

  gap: 80px;
  align-items: center;
}

.btec-content-right h2 {
  font-size: 42px;
  font-weight: 900;
  margin-bottom: 18px;
}

.btec-content-right p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.btec-benefits-list li {
  position: relative;
  padding-left: 0;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.8;
  color: #000000;
}

/* Yellow Card */
/* Yellow Graduate Admission Card */

.btec-yellow-card {
  background: #f5c400;
  color: #071225;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 0.78;
  padding: 55px 45px;
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--card-shadow);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.yellow-icon-circle {
  width: 72px;
  height: 72px;
  border: 2px solid #071225;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.yellow-icon-circle i {
  font-size: 34px;
  color: #071225;
}

.btec-yellow-card h3 {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 24px;
  color: #071225;
}

.btec-yellow-card p {
  font-size: 17px;
  line-height: 1.8;
  color: #071225;
}

/* =====================================================
   COURSE OUTLINE
===================================================== */

/* =====================================================
   COURSE OUTLINE - IMAGE STYLE
===================================================== */

.btec-course-outline {
  padding: 30px 8%;
}

.btec-course-outline h2 {
  font-family: var(--font-headings);
  font-size: 36px;
  font-weight: 900;
  color: var(--dark-navy);
  margin-bottom: 6px;
}

.btec-course-outline>p {
  color: var(--light-slate);
  font-size: 15px;
  margin-bottom: 22px;
}

.btec-outline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.btec-outline-card {
  background: #ffffff;
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(21, 28, 45, 0.05);
  padding: 0;
  min-height: 210px;
}

.btec-outline-icon {
  height: 135px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.btec-outline-icon i {
  font-size: 44px;
  color: #ffffff;
}

.btec-outline-content {
  background: #ffffff;
  padding: 18px 18px 22px;
  text-align: center;
}

.btec-outline-content h4 {
  font-family: var(--font-headings);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 5px;
}

.btec-outline-content p {
  font-size: 13px;
  color: var(--light-slate);
  line-height: 1.4;
}

.btec-outline-icon.teal {
  background: linear-gradient(135deg, #0f8f83 0%, #054d48 100%);
}

.btec-outline-icon.pink {
  background: linear-gradient(135deg, #f0438c 0%, #a82964 100%);
}

.btec-outline-icon.yellow {
  background: linear-gradient(135deg, #ffd800 0%, #b69600 100%);
}

/* title colors */
.btec-outline-card:nth-child(1) h4 {
  color: #078f80;
}

.btec-outline-card:nth-child(2) h4,
.btec-outline-card:nth-child(4) h4 {
  color: #cf2b78;
}

.btec-outline-card:nth-child(3) h4 {
  color: #c59f00;
}

/* Grid Layout */
.btec-outline-grid {
  margin-top: 25px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;
}


/* Individual Cards */
.btec-outline-card {
  padding: 28px 22px;

  border-radius: 16px;

  color: white;

  min-height: 140px;

  box-shadow: var(--card-shadow);
}

/* Card Title */
.btec-outline-card h4 {
  margin-bottom: 10px;
}

/* Card Description */
.btec-outline-card p {
  color: rgba(255, 255, 255, 0.9);
}


/* =====================================================
   DISCOVER COURSES
===================================================== */

.btec-discover {
  padding: 30px 8%;
}

/* 3 Column Grid */
.btec-course-grid {
  margin-top: 25px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
}

/* Course Card */
.btec-course-card {
  min-height: 140px;

  border-radius: 16px;

  padding: 25px;

  display: flex;
  align-items: flex-end;

  font-weight: 700;

  box-shadow: var(--card-shadow);
}


/* =====================================================
   FULL WIDTH BANNER
===================================================== */

.btec-banner {

  margin-top: 35px;

  padding: 90px 8%;

  text-align: center;

  color: white;

  background:
    linear-gradient(rgba(21, 28, 45, 0.78),
      rgba(21, 28, 45, 0.78)),
    url("assets/offers_bg.png");

  background-size: cover;
  background-position: center;
}

.btec-banner h2 {
  font-size: 36px;
  font-weight: 900;
}


/* =====================================================
   CONTACT SECTION
===================================================== */

.contact-section-btec {
  padding: 40px 8%;
}

/* Grid */
.contact-grid-btec {
  margin-top: 25px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;
}

/* /* Contact Card */
.contact-mini-card {
  padding: 35px 25px;
  border-radius: 16px;
  color: white;
  text-align: center;
  min-height: 180px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-mini-card::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -35px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  z-index: 1;
}

.contact-mini-card::before {
  content: "";
  position: absolute;
  right: 38px;
  bottom: 30px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  z-index: 1;
}

.contact-mini-card .contact-icon-circle,
.contact-mini-card h3,
.contact-mini-card p {
  position: relative;
  z-index: 2;
}

.contact-icon-circle {
  width: 54px;
  height: 54px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: all 0.3s ease;
}

.contact-icon-circle i {
  font-size: 22px;
}


/* =====================================================
   COMMON COLORS
 ===================================================== */

.teal {
  background: linear-gradient(135deg, #0f8f83 0%, #054d48 100%);
}

.pink {
  background: linear-gradient(135deg, #f0438c 0%, #a82964 100%);
}

.yellow {
  background: linear-gradient(135deg, #ffd800 0%, #b69600 100%);
  color: #ffffff;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 992px) {

  .btec-info-section,
  .btec-yellow-block {
    grid-template-columns: 1fr;
  }

  .btec-outline-grid,
  .contact-grid-btec {
    grid-template-columns: repeat(2, 1fr);
  }

  .btec-course-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {

  .btec-hero h1 {
    font-size: 30px;
  }

  .btec-outline-grid,
  .contact-grid-btec {
    grid-template-columns: 1fr;
  }

  .btec-num {
    font-size: 65px;
  }
}

/* =====================================================
   SITE FOOTER (PREMIUM DARK AESTHETIC)
===================================================== */
.site-footer {
  background-color: #111318;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-body), sans-serif;
  padding: 80px 0 0 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px 20px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
  gap: 48px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.branding-col .branding-text {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.contact-item i {
  color: var(--primary-blue, #00a2e8);
  font-size: 0.95rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-decoration: none;
  font-size: 0.9rem;
}

.social-link:hover {
  background-color: var(--primary-blue, #00a2e8);
  border-color: var(--primary-blue, #00a2e8);
  transform: translateY(-3px);
  color: #ffffff;
}

.footer-title {
  font-family: var(--font-headings), sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  text-align: left;
  letter-spacing: 0.5px;
}

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

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: #ffffff;
  padding-left: 6px;
}

.posts-col .footer-post {
  margin-bottom: 20px;
  width: 100%;
  text-align: left;
}

.posts-col .footer-post:last-child {
  margin-bottom: 0;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  margin-bottom: 6px;
}

.post-meta i {
  font-size: 0.8rem;
}

.post-title {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  display: block;
  transition: color 0.3s ease;
}

.post-title:hover {
  color: var(--primary-blue, #00a2e8);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 20px;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* Footer Responsive styles */
@media (max-width: 992px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 576px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }

  .footer-title {
    margin-bottom: 16px;
  }
}

.graduate-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 800;
}

.graduate-title i {
  font-size: 32px;
}

/* Pearson BTEC Features */

.btec-features {
  list-style: none;
  padding: 0;
  margin: -10px 0 0;
}

.btec-features li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 18px;
  color: #6b6b7d;
  font-size: 18px;
  line-height: 1.7;
}

.btec-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1b1b2f;
  font-size: 16px;
  font-weight: 600;
}

/* Accommodation Details Section */

.accommodation-details-section {
  width: 100%;
  padding: 70px 0 0;
  background: #fff;
  overflow: hidden;
}

/* Top content area */
.accommodation-details-container {
  max-width: 1200px;
  margin: 0 auto 55px;
  padding: 0 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  position: relative;
}

/* Left title */
.accommodation-content h2 {
  font-size: 48px;
  line-height: 1.15;
  font-weight: 800;
  color: #111326;
  margin-bottom: 22px;
}

/* Left paragraph */
.accommodation-content p {
  font-size: 17px;
  line-height: 1.8;
  color: #6b6b7d;
  max-width: 580px;
}

/* Right points */
.accommodation-points {
  border-left: 1px solid #e6e6e6;
  padding-left: 90px;
  position: relative;
}

.accommodation-points::before,
.accommodation-points::after {
  content: "";
  position: absolute;
  left: -8px;
  width: 16px;
  height: 2px;
  background: #ff2caf;
}

.accommodation-points::before {
  top: -40px;
}

.accommodation-points::after {
  bottom: -40px;
}

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

.accommodation-points li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 22px;
  font-size: 17px;
  color: #6b6b7d;
}

.accommodation-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #111326;
  font-size: 15px;
}

/* Table */
.accommodation-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.accommodation-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  text-align: center;
}

.accommodation-table thead {
  background: #09a6d8;
}

.accommodation-table th {
  padding: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.accommodation-table td {
  padding: 18px 16px;
  border: 1px solid #eee;
  font-size: 14px;
  font-weight: 700;
  color: #101022;
}

.accommodation-table tbody tr:hover {
  background: #f8fdff;
}

/* Responsive */
@media(max-width:900px) {
  .accommodation-details-container {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 0 25px;
  }

  .accommodation-content h2 {
    font-size: 36px;
  }

  .accommodation-points {
    border-left: none;
    padding-left: 0;
  }

  .accommodation-points::before,
  .accommodation-points::after {
    display: none;
  }
}

/* Program Cards Section */

.program-card-section {
  max-width: 1100px;
  margin: 50px auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items: center;
  gap: 25px;
}

/* Card */
.program-card {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 18px;
  overflow: hidden;
  min-height: 270px;
}

/* Top Color Area */
.program-card-top {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 60px;
  border-radius: 18px;
}

/* Card Body */
.program-card-body {
  padding: 22px 20px;
}

.program-card-body h4 {
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 6px;
  font-weight: 700;
}

.program-card-body p {
  font-size: 17px;
  line-height: 1.25;
  color: #2c2c38;
}

/* Arrows Between Cards */
.card-arrow {
  text-align: center;
  font-size: 22px;
  color: #111;
}

/* Colors */
.pink-card-bg {
  background: linear-gradient(135deg, #ef4b96, #9c275a);
}

.gold-card-bg {
  background: linear-gradient(135deg, #f4d000, #a78900);
}

.green-card-bg {
  background: linear-gradient(135deg, #008d7e, #00685f);
}

.pink-text {
  color: #ef3f92;
}

.gold-text {
  color: #d5ad00;
}

.green-text {
  color: #007c74;
}

/* Mobile */
@media(max-width:900px) {
  .program-card-section {
    grid-template-columns: 1fr;
  }

  .card-arrow {
    transform: rotate(90deg);
  }
}

/* Transport Section */

.transport-section {
  max-width: 1350px;
  margin: 50px auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: 1.1fr .95fr;
  gap: 20px;
  align-items: stretch;
}

/* Map Image */
.transport-map {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.transport-map img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}

/* Right Cards */
.transport-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.transport-card {
  min-height: 105px;
  border-radius: 8px;
  padding: 28px 32px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.transport-card::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -20px;
  width: 120px;
  height: 160px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
}

.transport-card h4 {
  font-size: 20px;
  margin-bottom: 10px;
}

.transport-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
  margin: 0;
}

/* Box Colors */
.pink-box {
  background: linear-gradient(135deg, #ef4b96, #98265b);
}

.yellow-box {
  background: linear-gradient(135deg, #ffd400, #c4a000);
}

.green-box {
  background: linear-gradient(135deg, #008d7e, #00685f);
}

/* Mobile */
@media(max-width:900px) {
  .transport-section {
    grid-template-columns: 1fr;
  }

  .transport-map img {
    min-height: 260px;
  }
}

/* =====================================================
   ABOUT PEARSON BTEC PAGE — MOBILE RESPONSIVE
   Fixes for all sections on about-pearson-btec.html
===================================================== */

/* === BTEC Section Padded (replaces inline 8% padding) === */
.btec-section-padded {
  padding-left: 8%;
  padding-right: 8%;
}

/* === BTEC vs A Levels Comparison Grid === */
.btec-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}

/* === BTEC Hero — mobile adjustments === */
@media (max-width: 768px) {
  .btec-hero {
    padding: 30px 5%;
    margin-bottom: -20px;
  }

  .btec-hero h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  .btec-hero p {
    font-size: 0.95rem;
  }

  /* BTEC Yellow Block — reduce huge gap when stacked */
  .btec-yellow-block {
    gap: 32px;
    margin-top: -20px;
    padding: 30px 5%;
  }

  .btec-yellow-card {
    max-width: 100%;
    aspect-ratio: unset;
    padding: 40px 28px;
  }

  .btec-content-right h2 {
    font-size: 28px;
  }

  .btec-content-right p {
    font-size: 16px;
  }

  /* BTEC vs A Levels — stack on mobile */
  .btec-vs-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .btec-course-outline {
    padding: 30px 5%;
  }

  .btec-course-outline h2 {
    font-size: 26px;
  }

  /* Section padding on mobile */
  .btec-section-padded {
    padding-left: 5%;
    padding-right: 5%;
  }

  /* Contact section on mobile */
  .contact-section-btec {
    padding: 30px 5%;
  }

  .contact-section-btec h2 {
    font-size: 1.5rem;
  }

  .contact-section-btec > p {
    font-size: 0.9rem;
  }
}

/* === Tablet breakpoint (768px – 992px) === */
@media (max-width: 992px) {
  .btec-yellow-block {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 6%;
  }

  .btec-yellow-card {
    max-width: 100%;
  }

  .btec-section-padded {
    padding-left: 6%;
    padding-right: 6%;
  }

  .btec-course-outline {
    padding: 30px 6%;
  }

  .btec-vs-grid {
    gap: 20px;
  }
}

/* === Small mobile (max 480px) === */
@media (max-width: 480px) {
  .btec-hero {
    padding: 24px 4%;
    margin-bottom: 0;
  }

  .btec-hero h1 {
    font-size: 24px;
  }

  .btec-yellow-block {
    padding: 24px 4%;
    gap: 24px;
    margin-top: 0;
  }

  .btec-yellow-card {
    padding: 32px 20px;
  }

  .btec-yellow-card h3 {
    font-size: 20px;
  }

  .btec-content-right h2 {
    font-size: 24px;
  }

  .btec-content-right p {
    font-size: 15px;
  }

  .btec-benefits-list li {
    font-size: 14px;
  }

  .btec-course-outline {
    padding: 24px 4%;
  }

  .btec-course-outline h2 {
    font-size: 22px;
  }

  .btec-vs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Card padding reduced on very small screens */
  .btec-vs-grid > div {
    padding: 24px 20px !important;
  }

  .btec-section-padded {
    padding-left: 4%;
    padding-right: 4%;
  }

  .contact-section-btec {
    padding: 24px 4%;
  }
}