*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-jakarta: 'Plus Jakarta Sans', sans-serif;
  --font-poppins: 'Poppins', sans-serif;
  --font-montserrat: 'Montserrat', sans-serif;

  --color-hero-bg:   #090e1c;
  --color-section2:  #0c122f;
  --color-blue:      #0292bf;
  --color-cta-from:  #ff6a00;
  --color-cta-to:    #ffb124;
  --color-card-from: #a53f76;
  --color-card-to:   #400fa2;
}

#explore {
    scroll-margin-top: 150px;
}
 
ol.lpu-list-ol {
  padding: 0;
  margin: 0;
}
ol.lpu-list-ol li {
  list-style-position: inside;
}
ul.lpu-list,
ul.career-pros-list {
  list-style: none;
  padding: 0;
  margin: 0;
  list-style-position: inside;
}
ul.lpu-list li {
  background-image: url(https://www.lpu.in/lpu-assets/images/icons/lpu-list-arrow.svg);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position-y: 6px;
  padding-left: 20px;
  padding-bottom: 10px;
}
ul.career-pros-list li {
background-image: url(https://www.lpu.in/lpu-assets/images/icons/lpu-list-arrow.svg);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position-y: 6px;
  padding-left: 20px;
}
ul.arrow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  list-style-position: inside;
}
ul.arrow-list li {
background-image: url(https://www.lpu.in/lpu-assets/images/icons/lpu-list-arrow.svg);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position-y: 6px;
  padding-left: 20px;
  padding-bottom: 10px;
}
.slick-slide {
  margin: 0 10px; /* gap between cards */
}

.slick-list {
  margin: 0 -10px; /* fix outer spacing */
}

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-hero-bg);
  background-image: url('images/hero.webp');
  background-size: cover;
  background-position: right;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}


/* --- Inner layout --- */
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;

  padding: 150px 0 80px 0;
  max-width: 1600px;
  margin: 0 auto;
}

/* --- Content column (left) --- */
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 677px;
  flex-shrink: 0;
}

/* ---- Logo badge ---- */
.hero-badge {
  position: relative;
  width: 262px;
}

.hero-badge__bg {
  position: absolute;
  inset: 0;
  background: rgba(2, 146, 191, 0.23);
  width: 262px;
  height: 77px;
}

.hero-badge__inner {
  position: relative;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-badge__logo-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hero-badge__vector {
  height: 18px;
  width: auto;
}

.hero-badge__edrev {

  width: auto;
  margin-left: 2px;
}

.hero-badge__stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.hero-badge__stars img {
  width: 18px;
  height: 18px;
}

.hero-badge__label-wrap {
  position: relative;
  background: #0a2132;
  height: 31px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  width: 230px;
}

.hero-badge__label-img {
  height: 18px;
  width: auto;
}

/* ---- Heading ---- */
.hero-heading {
  font-family: var(--font-jakarta);
  font-weight: 800;
  font-size: 50px;
  line-height: 1.2;
  color: #fff;
}

.hero-heading__blue {
  color: #0292bf;
}

.hero-heading__gradient {
  background: linear-gradient(to right, #00aaab 18.75%, #f27300 37%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-heading__white {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* ---- Sub-text ---- */
.hero-subtext {
  font-family: var(--font-poppins);
  font-size: 20px;
  line-height: 31px;
  font-weight: 400;
  color: #fff;
  max-width: 636px;
  margin-top: -30px; /* compensate gap already set on flex parent */
}

/* ---- CTA button ---- */
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 127px;
  height: 48px;
  background: linear-gradient(to right, #ff6a00, #ffb124 79.33%);
  color: #000;
  font-family: var(--font-montserrat);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.65;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 5px 10px 30px 0 rgba(47, 27, 9, 0.3);
  transition: opacity 0.2s;
}

.hero-cta:hover {
  opacity: 0.88;
  color: #000;
}

/* --- Robot image (right, mix-blend-mode: lighten) --- */
.hero-robot {
  position: absolute;
  right: 0;
  top: 111px;
  width: 1384px;
  height: 934px;
  left: 481px;
  background-image: url('https://www.figma.com/api/mcp/asset/ddc67194-10ee-49c3-a490-82e7d1fa3b0b');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  mix-blend-mode: lighten;
  opacity: 0.26;
  transform: scaleY(-1) rotate(180deg);
  pointer-events: none;
}

/* ============================================================
   SECTION 2 — EDUCATION REVOLUTION
   ============================================================ */
.edu-section {
  position: relative;
  background: var(--color-section2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0px;

}


.edu-inner {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-end;
  overflow: visible;
}

/* Top row: "Welcome to the new era of" (left) + outlined title (right) */
.edu-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.edu-welcome-label {
  font-family: var(--font-jakarta);
  font-weight: 500;
  font-size: 30px;
  color: #fff;
}

/* Big outlined title block (right side, 848px wide) */
.edu-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  line-height: 1;
}

.edu-title {
  font-family: var(--font-jakarta);
  font-weight: 800;
  color: transparent;
  text-align: right;
  width: 100%;
  line-height: 0.88;
}

.edu-title--big {
  font-size: 110px;
  -webkit-text-stroke: 2px rgba(216, 112, 50, 0.85);
  text-stroke: 2px rgba(216, 112, 50, 0.85);
}

.edu-title--medium {
  font-size: 101px;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.22);
  text-stroke: 2px rgba(255, 255, 255, 0.22);
}

/* --- 2×2 cards grid (848px wide, right-aligned) --- */
.edu-cards {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 30px;


}

.edu-card-row {
  display: flex;
  gap: 22px;
  flex: 1 0 0;
}

.edu-card {
  flex: 1 1 0;
  background: linear-gradient(to right, #a53f76, #400fa2);
  border: 1px solid rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:  20px;
  justify-content: center;
}

.edu-card__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.edu-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.edu-card__text {
  font-family: var(--font-jakarta);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.88px;
  color: #fff;
   margin-bottom: 0;}

.edu-student-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   SECTION 3 — STATS (EDUCATION THAT DELIVERS)
   ============================================================ */
.stats-section {
  position: relative;
  background: #d1d9ff;
  padding: 60px 0;
  overflow: hidden;
}

/* Abstract decorative bg shape at top */
.stats-bg-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 443px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.stats-bg-deco img {
  position: absolute;
  top: -27%;
  left: -6.32%;
  width: 113%;
  height: 154%;
  object-fit: cover;
  display: block;
}

/* Trophy icon — lower-right decorative */
.stats-trophy {
  position: absolute;
  left: 79.21%;
  top: 51.94%;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 1;
}

/* Inner content wrapper */
.stats-content-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 65px;
  align-items: center;

  margin: 0 auto;
}

/* Heading block */
.stats-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  width: 820px;
  max-width: 100%;
}

.stats-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.stats-heading__black {

  font-weight: 700;
  font-size: 35px;
  line-height: 1.1;
  color: #090909;
  display: block;
  text-align: center;
}

.stats-heading__gradient {
  font-family: var(--font-jakarta);
  font-weight: 800;
  font-size: 35px;
  line-height: 1.2;
  background: linear-gradient(to right, #00aaab 18.75%, #f27300 37%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  text-align: center;
}

.stats-subtitle {

  font-weight: 500;
  font-size: 20px;
  line-height: 1.56;
  color: #252525;
  width: 728px;
  max-width: 100%;
  text-align: center;
  margin: 0;
}

/* --- 3 Stat Cards --- */
.stats-cards {
  display: flex;
  gap: 17px;
  width: 100%;
  justify-content: center;
}

.stats-card {

  background: #0b1527;
  border: 1.5px solid #00c1ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  gap: 14px;
  text-align: center;
}

.stats-card:hover {
transform: translateY(-4px);
 box-shadow: 0 0 0 1.5px rgba(103, 197, 230, 0.9), 0 0 18px rgba(103, 197, 230, 0.55), 0 0 45px rgba(0, 193, 255, 0.30), 0 0 90px rgba(0, 193, 255, 0.12);
}

/* Icon: circle with smaller icon overlaid */
.stats-card__icon-wrap {
  position: relative;
  width: 85px;
  height: 85px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #0E273E 0%, #0E273E 100%);
}

.stats-card__circle {
  width: 85px;
  height: 85px;
  display: block;
}

.stats-card__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  object-fit: contain;
}

/* Stat number */
.stats-card__number {

  font-weight: 700;
  font-size: 36px;
  line-height: 1.06;
  color: #fff;
  text-align: center;
  margin: 0;
}

/* Description */
.stats-card__desc {
  font-family: var(--font-jakarta);
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  max-width: 380px;
  margin: 0;
}

/* ============================================================
   SECTION 4 — HOW EDUCATION REVOLUTION INTRO
   ============================================================ */
.how-intro-section {
  position: relative;
  background: #d1d9ff;
  overflow: hidden;
}

/* Full-width lab photo */
.how-intro__img-wrap {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.how-intro__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Text area below image */
.how-intro__text-wrap {
  position: relative;
 padding: 20px;

  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(189, 204, 255, 0.7) 0%, rgba(220, 230, 255, 0.9) 100%);
}

/* Decorative hard-light blend overlay */
.how-intro__blend-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: hard-light;
  opacity: 0.83;
  z-index: 0;
}

.how-intro__blend-overlay img {
  width: 115%;
  height: 555%;
  object-fit: cover;
  position: absolute;
  left: -2%;
  top: -434%;
}

.how-intro__text-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-align: center;
  max-width: 1266px;
  margin: 0 auto;
}

.how-intro__heading {

  font-weight: 700;
  font-size: 35px;
  line-height: 1.1;
  color: #232933;
  text-align: center;
  margin: 0;
}

.how-intro__subtitle {

  font-weight: 500;
  font-size: 16px;
  line-height: 1.72;
  color: #232933;
  opacity: 0.8;
  text-align: center;
  margin: 0;
}

/* ============================================================
   SECTION 5 — REVENUE GENERATION
   ============================================================ */
.rev-section {
  position: relative;
  background: #0c122f;
  padding: 60px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('images/revenue-generation-bg.webp');
  background-size: cover;
  background-position: center;

}

/* Decorative bg overlay */
.rev-bg-deco {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.rev-bg-deco img {
  position: absolute;
  top: -11.22%; left: -6.32%;
  width: 113%; height: 122%;
  object-fit: cover;
  opacity: 0.5;
}

/* Inner container — 1488px wide centred */
.rev-inner {
  position: relative;
  z-index: 1;


  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── Top row ── */
.rev-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* Left text column — 531px */
.rev-left {
  width: 531px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rev-icon {
  width: 41px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.rev-tagline { display: flex; flex-direction: column; gap: 0; }

.rev-tagline__title {

  font-weight: 500;
  font-size: 32px;
  line-height: 39px;
  color: #67c5e6;
  margin: 15px 0;
}
.rev-tagline__sub {

  font-weight: 500;
  font-size: 22px;
  line-height: 39px;
  color: #67c5e6;
  margin-bottom: 15px;
}

.rev-body { display: flex; flex-direction: column; }

.rev-body p {
  font-family: var(--font-jakarta);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: #bdbdbd;
  margin: 0 0 1.1em;
}
.rev-body p:last-child { margin-bottom: 0; }

.rev-sub-heading {

  font-weight: 500;
  font-size: 22px;
  line-height: 39px;
  color: #67c5e6;
  margin: 0;
}

/* Right: app mockup image — 696 × 630px fixed */
.rev-mockup {
  width: 696px;
  height: 630px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.rev-mockup img {
  width: 100%;
  height: 110.48%;   /* matches Figma h-[110.48%] */
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ═══════════════════════════════════
   CARDS ROW — 4 cards, 6px gap
   ═══════════════════════════════════ */
.rev-cards-row {
  /* Bootstrap row handles flex layout */
}

/* ── Single card ── */
.rev-card {
  position: relative;
  width: 100%;         /* fills Bootstrap column */
  height: 396px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
  /* smooth glow transition */
  transition: box-shadow 0.35s ease;
}

/* ── Two background layers: normal and glow ── */
.rev-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.rev-card__bg-img {
  position: absolute;
  top: 5.25%;    /* inset top: 5.25% of 396px = 20.8px */
  left: 0;
  right: 0;
  bottom: 0.16%; /* inset bottom: 0.16% = ~0.6px */
  width: 100%;
  height: 94.59%;
  object-fit: fill;
  display: block;
  transition: opacity 0.35s ease;
}

/* Normal state: normal bg visible, glow bg hidden */
.rev-card__bg-img--normal { opacity: 1; }
.rev-card__bg-img--glow   { opacity: 0; }

/* Hover & active: swap bg images */
.rev-card:hover .rev-card__bg-img--normal,
.rev-card--active .rev-card__bg-img--normal {
  opacity: 0;
}
.rev-card:hover .rev-card__bg-img--glow,
.rev-card--active .rev-card__bg-img--glow {
  opacity: 1;
}

/* Glow box-shadow on hover / active */


/* ── Card title — absolute positioned ── */
.rev-card__title {
  position: absolute;
  /* Figma inset: top 17.62%, left 12.75%, right 24.62% */
  top:   20.62%;   /* 396 × 0.1762 ≈ 69.8px  */
  left:  12.75%;   /* 366 × 0.1275 ≈ 46.8px  */
  right: 10.62%;   /* 366 × 0.2462 ≈ 90.2px  */

  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  z-index: 1;

}

/* ── Card description — scrollable area ── */
.rev-card__desc-wrap {
  position: absolute;
  /* Figma inset: top 43.18%, left 13.98%, right 15.3%, bottom 17.42% */
  top:    43.18%;  /* 396 × 0.4318 ≈ 171px */
  left:   13.98%;  /* 366 × 0.1398 ≈ 51px  */
  right:  15.30%;  /* 366 × 0.153  ≈ 56px  */
  bottom: 17.42%;  /* 396 × 0.1742 ≈ 69px  — gives consistent scroll area */
  z-index: 1;
  overflow-y: auto;
  /* ── slim custom scrollbar ── */
  scrollbar-width: thin;
  scrollbar-color: rgba(103, 197, 230, 0.55) transparent;
}
/* WebKit slim scrollbar */
.rev-card__desc-wrap::-webkit-scrollbar        { width: 3px; }
.rev-card__desc-wrap::-webkit-scrollbar-track  { background: transparent; }
.rev-card__desc-wrap::-webkit-scrollbar-thumb  {
  background: rgba(103, 197, 230, 0.55);
  border-radius: 2px;
}
.rev-card__desc-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(103, 197, 230, 0.85);
}

.rev-card__desc {

  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #bdbdbd;
  margin: 0;
}

/* ============================================================
   SECTION 6 — GAMIFIED LEARNING
   ============================================================ */
.gam-section {
  position: relative;
  background-image: url('images/gamified-learning-bg.webp');
  background-size: cover;
  background-position: center;
  padding: 60px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Background: soft gradient image + pastel blob ── */
.gam-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.gam-bg__img {
  position: absolute;
  left: -202px;
  top: -21px;
  width: 2236px;
  height: 1184px;
  object-fit: cover;
  pointer-events: none;
}

/* Pastel gradient blob — top-right corner */
.gam-bg__blob {
  position: absolute;
  left: 1572px;
  top: -225px;
  width: 771px;
  height: 771px;
  background: linear-gradient(
    -56deg,
    rgba(255, 183, 153, 0.5)  8.19%,
    rgba(210, 174, 255, 0.5) 52.43%,
    rgba(169, 240, 255, 0.5) 85.12%
  );
  border-radius: 192px;
  transform: rotate(45deg);
  opacity: 0.7;
}

/* ── Inner 1488px container ── */
.gam-inner {
  position: relative;
  z-index: 1;
  width: 1488px;
  max-width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  gap: 55px;
  padding: 60px 0;
}

/* ── Top row ── */
.gam-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}


/* ── Right text column — 539px ── */
.gam-text {
  width: 539px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gam-icon {
  width:  50px;
  height: 51px;
  object-fit: contain;
  display: block;
}

.gam-tagline { display: flex; flex-direction: column; }

.gam-tagline__title {

  font-weight: 500;
  font-size: 32px;
  line-height: 38px;
  color: #020202;
  margin: 15px 0;
}
.gam-tagline__sub {

  font-weight: 500;
  font-size: 22px;
  line-height: 38px;
  color: #020202;
  margin-bottom: 15px;
}

.gam-body { display: flex; flex-direction: column; }

.gam-body p {
  font-family: var(--font-jakarta);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: #202020;
  margin: 0;
}

/* Bold-italic run inside body */
.gam-body strong em,
.gam-body em strong {
  font-family: var(--font-jakarta);
  font-weight: 700;
  font-style: italic;
}

/* ══════════════════════════════════════
   3 CARDS (fixed 482 × 312 px)
   ══════════════════════════════════════ */
.gam-cards-row {
  /* Bootstrap row handles layout; no custom flex needed */
}

/* ── Single card ── */
.gam-card {
  position: relative;
  width: 100%;
  height: 312px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* Card background image — fills card exactly */
.gam-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.gam-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: fill;   /* frame art must stretch to exact card bounds */
  display: block;
}

/* ── Hover glow (cyan-purple blend matching card palette) ── */
.gam-card:hover {
  transform: translateY(-4px);

}

/* ── Card title — pixel-perfect from Figma ── */
.gam-card__title {
  position: absolute;
  top:   60.69px;   /* Figma: mt-[60.69px] from card top */
  left:  62px;      /* Figma: ml-[62px] */
  width: 312px;     /* widest title width across 3 cards */

  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  z-index: 1;
}

/* ── Card description — slim scrollable area ── */
.gam-card__desc-wrap {
  position: absolute;
  top:    108.69px;   /* Figma: mt-[108.69px] */
  left:   62px;
  right:  65px;       /* 482.5 − 62 − 355 = 65.5px */
  bottom: 24px;       /* keep clear of bottom frame decoration */
  z-index: 1;
  overflow-y: auto;
  /* slim scrollbar — Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 220, 255, 0.6) transparent;
}

/* slim scrollbar — WebKit */
.gam-card__desc-wrap::-webkit-scrollbar        { width: 3px; }
.gam-card__desc-wrap::-webkit-scrollbar-track  { background: transparent; }
.gam-card__desc-wrap::-webkit-scrollbar-thumb  {
  background: rgba(110, 220, 255, 0.6);
  border-radius: 2px;
}
.gam-card__desc-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 220, 255, 0.9);
}

.gam-card__desc {

  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.84);
  margin: 0;
}

/* ============================================================
   SECTION 7 — CAREER (NOT JUST DEGREE)
   bg: #0c122f | flex | pl:216px pr:201px | h:755px
   ============================================================ */
.career-section {
  position: relative;
  background: #0c122f;
  padding: 60px 0;

  overflow: hidden;
  display: flex;
  align-items: center;
    background-image: url('images/revenue-generation-bg.webp');
  background-size: cover;
  background-position: center;
}

/* Flipped abstract deco overlay — bottom-right quadrant */
.career-bg-deco {
  position: absolute;
  left:   647px;
  top:    310px;
  width:  965px;
  height: 429px;
  pointer-events: none;
  z-index: 0;
  transform: scaleY(-1) rotate(180deg);
  overflow: hidden;
}
.career-bg-deco img {
  position: absolute;
  top: -28%; left: -12.43%;
  width: 124.86%; height: 156%;
  object-fit: cover;
  opacity: 0.55;
}

/* Inner flex row: left + gap + right */
.career-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 60px 0;
  margin: 0 auto;
}

/* Left column — 531px */
.career-left {
  width: 531px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.career-icon {
  width:  46px;
  height: 53px;
  object-fit: contain;
  display: block;
}

/* Tagline */
.career-tagline { display: flex; flex-direction: column; }
.career-tagline__title {

  font-weight: 500;
  font-size: 32px;
  line-height: 39px;
  color: #67c5e6;
  margin: 15px 0;
}
.career-tagline__sub {

  font-weight: 500;
  font-size: 22px;
  line-height: 39px;
  color: #67c5e6;
  margin-bottom: 15px;
}

/* Content block */
.career-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.career-body-text {
  font-family: var(--font-jakarta);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: #bdbdbd;
  margin: 0;
}

.career-pathways-label {
  font-family: var(--font-jakarta);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.8;
  color: #6edcff;
  margin: 0;
}

/* 2-column pathway grid */
.career-pathways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 10px;
  column-gap: 16px;
}

.career-pathway-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.career-pathway-item__icon {
  width:  18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.career-pathway-item span {
  font-family: var(--font-jakarta);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: #bdbdbd;
  white-space: nowrap;
}

/* Right: 630×630 image with cyan border */
.career-img-wrap {
  position: relative;
  width:  630px;
  height: 630px;
  flex-shrink: 0;
  border: 3px solid #6edcff;
  overflow: hidden;
}
.career-img-wrap img {
  position: absolute;
  inset: 0;
  width:  100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   SECTION 8 — STUDENTS IN DECISION MAKING
   Prismatic gradient bg | flex | pl:138px pr:230px | h:828px
   ============================================================ */
.decision-section {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #f0f4ff; /* fallback if image doesn't load */
}

/* Full-bleed gradient background image */
.decision-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.decision-bg img {
  position: absolute;
  left: 0;
  top:  -4.45%;
  width: 100%;
  height: 111.28%;
  object-fit: cover;
  pointer-events: none;
}

/* Inner flex row */
.decision-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 210px;
  padding: 60px 230px 60px 138px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* Left: image 763×504 with cyan border */
.decision-img-wrap {
  position: relative;
  width:  763px;
  height: 504px;
  flex-shrink: 0;
  border: 3px solid #6edcff;
  overflow: hidden;
}
.decision-img {
  position: absolute;
  left: 0;
  top:  -26.18%;    /* Figma: top-[-26.18%] */
  width: 100%;
  height: 151.48%;  /* Figma: h-[151.48%] — tall parallax crop */
  object-fit: cover;
  display: block;
}

/* Right column — 559px */
.decision-right {
  width: 559px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 53px;
}

.decision-header {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.decision-icon {
  width:  54px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.decision-tagline { display: flex; flex-direction: column; }
.decision-tagline__title {

  font-weight: 500;
  font-size: 32px;
  line-height: 39px;
  color: #231f20;

  margin: 15px 0;
}
.decision-tagline__sub {

  font-weight: 500;
  font-size: 22px;
  line-height: 39px;
  color: #231f20;
  margin-bottom: 15px;
}

/* Bullet list */
.decision-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.decision-list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.decision-list li img {
  width:  18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 3px; /* optical alignment with text */
}

.decision-list li p {
  font-family: var(--font-jakarta);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: #231f20;
  margin: 0;
  flex: 1;
}


/* ============================================================
   SECTION 9 — STUDENTS LIVING THE EDUCATION REVOLUTION
   bg: #0c122f | inner: #0a1224 (1539px) | h:946px
   ============================================================ */
.students-section {
  position: relative;
  background: #0c122f;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 0;
  
}

/* Decorative overlay */
.students-bg-deco {
  position: absolute;
  left: 7px;
  top: -73px;
  width: 1845px;
  height: 919px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.students-bg-deco img {
  position: absolute;
  top:  -17.82%; left: -8.88%;
  width: 119.07%; height: 138.28%;
  object-fit: cover;
  opacity: 0.6;
}

/* Inner dark card container */
.students-inner {
  position: relative;
  z-index: 1;
  background: #0a1224;

  max-width: calc(100% - 60px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 53px 44px 37px;
  gap: 48px;
}

/* Heading block */
.students-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;

  max-width: 100%;
}

.students-heading {
  font-family: var(--font-jakarta);
  font-weight: 800;
  font-size: 35px;
  line-height: 1;
  color: #fff;
  text-align: center;
  margin: 0;
}

.students-heading__gradient {
  background: linear-gradient(90deg, #00aaab 50%, #f27300 78.37%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.students-subtext {

  font-weight: 500;
  font-size: 21px;
  line-height: 32.42px;
  color: #90a5ba;
  text-align: center;
  margin: 0;
}

/* ── Horizontal scroll card row ── */
.students-cards-wrap {
  width: 100%;
  overflow: hidden; /* Slick handles the carousel */
}


/* Single student card */
.stud-card {
  width: 100%;

  border: 1.7px solid #0e3a53;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  position: relative;
}

/* Card top: avatar + info stacked */
.stud-card__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* Circular avatar — 177×177px with overflow crop */
.stud-avatar {
  position: relative;
  width:  177px;
  height: 177px;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  background: #1a2540; /* fallback */

}
/* img inside avatar is absolutely positioned (inline style per card) */

/* Student info */
.stud-info {
  display: flex;
  flex-direction: column;
  gap: 21px;
  text-align: center;
  width: 100%;
}

.stud-name {

    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    text-align: center;

}

.stud-degree {

  font-weight: 400;
  font-size: 18px;
  line-height: 34px;
  color: #90a5ba;
  margin: 0;
  text-align: center;
}

/* Achievement box — border #6e3722, h:120px */
.stud-achievement {
  border: 1.5px solid #6e3722;
  border-radius: 4px;
  height: 120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 20px;
}

.stud-achievement__label {

  font-weight: 300;
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}

.stud-achievement__value {

  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #ff8b16;
  margin: 0;
}

/* ============================================================
   SECTION 10 — FAQ
   bg: #f9fafc | centered accordion | 6 items | first open
   ============================================================ */
.faq-section {
  background: #f9fafc;
  padding: 80px 24px;
  overflow: hidden;
}

.faq-inner {
  max-width: 740px;
  margin: 0 auto;
}

.faq-heading {

  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  color: #1a1a2e;
  text-align: center;
  margin-bottom: 14px;
}

.faq-subtitle {

  font-weight: 400;
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom: 52px;
}

.faq-item {
  border-bottom: 1px solid #e0e0e0;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
}

.faq-question__text {

  font-weight: 600;
  font-size: 15px;
  color: #1a1a2e;
  line-height: 1.5;
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  color: #333;
  line-height: 1;
}

.faq-icon::after {
  content: '+';
}

.faq-question[aria-expanded="true"] .faq-icon::after {
  content: '−';
}

.faq-answer {

  font-weight: 400;
  font-size: 14px;
  color: #555;
  line-height: 1.75;
  padding: 0 0 20px 0;
  margin: 0;
}

.faq-answer ul li {

  font-weight: 400;
  font-size: 14px;
  color: #555;
  line-height: 1.75;
  padding: 0 0 20px 0;
  margin: 0;
}


/* ============================================================
   SECTION 11 — CTA
   bg: #0c122f | soft-light overlay | 64px heading | wide btn
   ============================================================ */
.cta-section {
  position: relative;
  background: #0c122f;  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0px;
  overflow: hidden;  
  background-image: url(images/cta-bg.webp);
  
}

/* Soft-light texture overlay */
.cta-overlay {
  position: absolute;
  inset: 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

.cta-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Decorative sparkles / geometric at top */
.cta-deco {
  position: absolute;
  left: 8.5px;
  top: 0.29px;
  width: calc(100% - 8.5px);
  height: 179.53px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.cta-deco img {
  position: absolute;
  top: -66.84%;
  left: -6.32%;
  width: 112.64%;
  height: 233.68%;
  max-width: none;
  display: block;
}

/* Content */
.cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.cta-heading {

  font-weight: 700;
  font-size: 35px;
  line-height: 1.1;
  color: #fff;

  text-align: center;
  margin: 0;
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #ff6a00, #99722b);
  max-width: 100%;
  padding: 0 28px;

  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 5px 10px 30px 0px rgba(47, 27, 9, 0.3);
  flex-shrink: 0;
  transition: opacity 0.2s ease;
  padding: 12px 28px;
}

.cta-btn:hover {
  color: #fff;
  opacity: 0.92;
  text-decoration: none;
}


/* ============================================================
   RESPONSIVE — scale down gracefully on smaller viewports
   ============================================================ */
@media (max-width: 1600px) {
  .hero-inner { padding: 200px 120px 80px; }

  .edu-title--big  { font-size: 110px; }
  .edu-title--medium { font-size: 100px; }
  .edu-cards { width: 660px; height: auto; }


  /* Stats */

  .stats-cards { gap: 14px; }
  .stats-card { flex: 0 0 390px; padding: 32px 40px; }



  /* How intro */
  .how-intro__text-wrap {
        position: absolute;
        bottom: 20px;
        width: 100%; }



  /* Revenue */
  .rev-inner { max-width: calc(100% - 120px); }
  .rev-mockup { width: 560px; height: 506px; }
  .rev-left { width: 460px; }
  .rev-card { max-width: 310px; }

  /* Gamified */
  .gam-inner { max-width: calc(100% - 120px); }
  .gam-collage { width: 640px; height: 448px; }
 .gam-collage__img{ width: 100%; }
  .gam-text { width: 460px; }
  .gam-card { height: 252px; }

  /* Career */

  .career-img-wrap { width: 520px; height: 520px; }

  /* Decision */
  .decision-inner { gap: 80px; padding: 60px 120px; }
  .decision-img-wrap { width: 580px; height: 384px; }
  .decision-right { width: 460px; }

  /* Students */
  .students-inner { width: calc(100% - 120px); }
  .students-heading { font-size: 44px; }


}

@media (max-width: 1300px) {
  .hero-inner { padding: 180px 80px 80px; }
  .hero-heading { font-size: 56px; }


  .edu-title--big  { font-size: 88px; }
  .edu-title--medium { font-size: 80px; }


  .edu-welcome-label { font-size: 30px; }
  .edu-student-wrap { left: 40px; width: 280px; height: 500px; }

  /* Stats */

  .stats-card { flex: 0 0 320px; height: auto; padding: 28px 24px; }
  .stats-heading__black { font-size: 50px; }
  .stats-heading__gradient { font-size: 56px; }

  /* How intro */



  .how-intro__img-wrap { height: 480px; }

  /* Revenue */
  .rev-top-row { flex-direction: column; gap: 32px; }
  .rev-left { width: 100%; }
  .rev-mockup { width: 100%; height: 420px; }


  /* Gamified */
  .gam-top-row { flex-direction: column; gap: 32px; }
  .gam-collage { width: 100%; max-width: 640px; height: 448px; }
  .gam-text { width: 100%; }
  .gam-card { height: 280px; }

  /* Career */

  .career-left { width: 100%; }
  .career-img-wrap { width: 100%; max-width: 630px; height: 400px; }

  /* Decision */
  .decision-inner { flex-direction: column; gap: 48px; padding: 60px 80px; }
  .decision-img-wrap { width: 100%; height: 380px; }
  .decision-right { width: 100%; }

  /* Students */
  .students-inner { width: calc(100% - 80px); min-height: auto; padding: 40px 24px; }

  .students-heading { font-size: 36px; }




}

@media (max-width: 1100px) {
  .hero-section { min-height: auto; }
  .hero-inner {
    padding: 140px 60px 80px;
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
  }
  #explore {
    scroll-margin-top: 60px;
}
  .hero-content { gap: 36px; max-width: 100%; }
  .hero-heading { font-size: 44px; }
  .hero-subtext { font-size: 18px; max-width: 100%; }
  .hero-robot { display: none; }



  .edu-inner { padding: 40px 0; gap: 40px; align-items: flex-start; }
  .edu-top-row { flex-direction: column; gap: 24px; }
  .edu-title-block { width: 100%; }
  .edu-cards { width: 100%; height: auto; }
  .edu-student-wrap { position: static; width: 300px; height: 400px; margin-bottom: 24px; }
  .edu-welcome-label { white-space: normal; }
  .edu-title--big  { font-size: 64px; }
  .edu-title--medium { font-size: 58px; }

  /* Stats */

  .stats-cards { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .stats-card { flex: 0 0 calc(50% - 10px); height: auto; }
  .stats-card:last-child { flex: 0 0 60%; }
  .stats-header { width: 100%; }
  .stats-subtitle { width: 100%; }

  /* How intro */




  .how-intro__img-wrap { height: 380px; }

  /* Revenue */
  .rev-inner { max-width: calc(100% - 60px); }
  .rev-top-row { flex-direction: column; }
  .rev-left { width: 100%; }
  .rev-mockup { width: 100%; height: 360px; }
  .rev-tagline__title { font-size: 24px; }
  .rev-tagline__sub { font-size: 18px; }


  /* Gamified */
  .gam-inner { max-width: calc(100% - 60px); }
  .gam-collage { max-width: 100%; }
  .gam-card { height: 300px; }
  .gam-tagline__title { font-size: 26px; }

  /* Career */

  .career-tagline__title { font-size: 26px; }
  .career-img-wrap { height: 360px; }

  /* Decision */
  .decision-inner { padding: 60px 40px; }
  .decision-img-wrap { height: 300px; }
  .decision-tagline__title { font-size: 26px; }
  .decision-tagline__sub  { font-size: 18px; line-height: 1.4; }

  /* Students */
  .students-heading { font-size: 28px; }
  .students-subtext { font-size: 16px; }
  .stud-card { padding: 28px 24px 40px; }
  .stud-name  { font-size: 20px; }
  .stud-degree { font-size: 15px; line-height: 1.5; }
  .stud-achievement__label,
  .stud-achievement__value { font-size: 17px; }

  /* FAQ */
  .faq-heading { font-size: 34px; }



  .cta-btn { width: 100%; max-width: 600px; font-size: 20px; white-space: normal; height: auto; padding: 18px 24px; text-align: center; }
}

@media (max-width: 768px) {
  .hero-section {
    height: auto;
    min-height: 100svh;
    background-image: url('images/hero.webp');
    background-size: cover;
    background-position: left;
  }
  
#explore {
    scroll-margin-top: 60px;
}
  .hero-video-bg { display: none; }
  .hero-inner { padding: 120px 24px 60px; }
  .hero-heading { font-size: 34px; }
  .edu-card-row { flex-direction: column; height: auto; }
  .edu-title--big  { font-size: 44px; }
  .edu-title--medium { font-size: 40px; }
  .edu-welcome-label { font-size: 22px; }
  .edu-card__text { font-size: 18px; }
  .edu-card { padding: 28px 20px; }

  /* Stats */

  .stats-card { flex: 0 0 100%; }
  .stats-card:last-child { flex: 0 0 100%; }
  .stats-heading__black { font-size: 38px; }
  .stats-heading__gradient { font-size: 42px; }


  /* How intro */



  .how-intro__subtitle { font-size: 16px; }
  .how-intro__img-wrap { height: 280px; }

  /* Revenue */
  .rev-inner { max-width: calc(100% - 32px); }
  .rev-card { height: 360px; }
  .rev-body p { font-size: 16px; }

  /* Gamified */
  .gam-inner { max-width: calc(100% - 32px); }
  .gam-card { height: 260px; }
  .gam-tagline__title { font-size: 24px; }
  .gam-tagline__sub   { font-size: 18px; }
  .gam-body p { font-size: 16px; }

  /* Career */

  .career-pathways { grid-template-columns: 1fr; }
  .career-img-wrap { width: 100%; height: 300px; }

  /* Decision */
  .decision-inner { padding: 50px 24px; }
  .decision-list li p { font-size: 16px; }

  /* Students */
  .students-inner { width: calc(100% - 32px); padding: 32px 16px; }
  .students-heading { font-size: 24px; }
  .stud-card { padding: 24px 16px 32px; }

  /* FAQ */
  .faq-section { padding: 60px 16px; }
  .faq-heading { font-size: 28px; }
  .faq-subtitle { font-size: 15px; margin-bottom: 36px; }
  .faq-question__text { font-size: 14px; }

  /* CTA */
  .cta-section { padding: 60px 24px; }

  .cta-btn { font-size: 17px; padding: 16px 20px; }
}