/* ============================================
   UTBCS Landing Page — styles.css
   Font scale reference (matching Figma exactly):
   - nav links: 14px / 500
   - section headings: 32–36px serif
   - hero h1/h2: 36px serif
   - body text: 14–15px
   - career/icon labels: 14px bold
   - phase NEST/FLY/SOAR: 44px serif
   - framework heading: 38px serif
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange: #E8920A;
  --orange-hover: #c97808;
  --dark-bg: #1E1E1E;
  --white: #FFFFFF;
  --light-bg: #F5F5F5;
  --grey-card: #E2E2E2;
  --text-dark: #1A1A1A;
  --text-mid: #444;
  --text-light: #666;
  --border: #DEDEDE;
  --font: 'DM Sans', sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --max-w: 1200px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text-dark);
  background: #fff;
  line-height: 1.6;
  font-size: 15px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 48px; }

/* ============================================================
   NAVBAR
============================================================ */
.navbar {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  position: sticky;
  top: 0;
  z-index: 500;
}
.navbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 48px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.navbar-logo img { height: 50px; width: auto; }
.navbar-nav { display: flex; align-items: center; gap: 32px; }
/* Match Figma nav: 14px, medium weight, dark grey */
.navbar-nav a {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  letter-spacing: 0;
  transition: color .2s;
}
.navbar-nav a:hover { color: var(--orange); }
.btn-nav-cta {
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background .2s;
  letter-spacing: 0;
}
.btn-nav-cta::after { content: '›'; font-size: 16px; line-height: 1; }
.btn-nav-cta:hover { background: var(--orange-hover); }

/* ============================================================
   HERO — ONE image, text overlaid as two columns
============================================================ */
.hero {
  position: relative;
  width: 100%;
  line-height: 0; /* prevent gap under image */
}
.mob-01{display: none;}
.mob-02{display: none;}
.hero-btn-area{display: none;}
.clear {
	clear: both;
}

/*Popus CSS Start*/
.overlay {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}
.popup-content {
  position: absolute; font-size: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  background-color: white;
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
}
.pop-left{width: 30%; display: inline-block; margin: 0 5% 0 0; vertical-align: top;}
.pop-left figure{width:100%; display:block; margin:0 0 1.5vw 0;}
.pop-left figcaption{font-size: 1.3vw; color: #333366; font-weight: 600; margin: 0 0 1vw 0; text-align: center;}
.pop-left figcaption span{display: block; font-size: 0.9vw; color: #666; font-weight: 400;}

.pop-right{width: 65%; display: inline-block; vertical-align: top; font-size: 1vw; line-height: 1.5vw;}
.pop-right p{margin: 0 0 2vw 0;}
.pop-right ul{margin: 1vw 0 2vw 0;}
.pop-right li{list-style-image: url("../images/blt2.gif"); padding: 0 0 0 5px; margin: 0 0 0.6vw 1.2vw;}

.pop-head{color: #ff5421; font-size: 1vw; font-weight: 600;}
.close-x {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}
.close-x:hover {color: red;}
/*Popus CSS End*/

/* The single full-width image */
.hero-bg-img {
  width: 100%;
  height: auto;
  display: block;
  min-height: 460px;
  object-fit: cover;
  object-position: center center;
}

/* Full-size overlay split into two columns */
.hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Left text panel — sits over the dark left half of the image */
.hero-left-text {
  padding: 52px 48px 52px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Subtle gradient only where text is, to ensure readability */
  background: linear-gradient(to right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.0) 100%);
  line-height: 1.5;
}

.hero-left-text h1 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 1.22;
  margin-bottom: 24px;
}
.hero-left-text h1 span { color: var(--orange); }

/* Right text panel — sits over the bright right half of the image */
.hero-right-text {
  padding: 52px 56px 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.5;
}

.hero-right-text h2 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.22;
  margin-bottom: 24px;
}
.hero-right-text h2 span { color: var(--orange); }

/* Pain list — left side */
.hero-pain { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.hero-pain li {
  display: flex; align-items: flex-start; gap: 10px;
  color: rgba(255,255,255,0.92); font-size: 14px; line-height: 1.45;
}
.icon-x {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 3px;
}

/* Benefit list — right side */
.hero-benefits { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.hero-benefits li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--text-dark); font-size: 14px; line-height: 1.45;
}
.icon-check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--orange); color: var(--orange);
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 3px;
}

/* Shared hero CTA button */
.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: #fff;
  padding: 12px 24px; border-radius: 6px;
  font-size: 14px; font-weight: 700; font-family: var(--font);
  border: none; cursor: pointer; width: fit-content;
  transition: background .2s; line-height: 1;
}
.btn-hero::after { content: '›'; font-size: 18px; }
.btn-hero:hover { background: var(--orange-hover); }

/* ============================================================
   CAREER RETURNS
============================================================ */
.career-returns { padding: 64px 0; background: #fff; text-align: center; }
/* Heading: ~36px serif, matches Figma */
.career-returns h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 52px;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.career-returns h2 span { color: var(--orange); font-weight: 700; }
.career-grid { display: flex; justify-content: center; gap: 0; }
.career-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 12px; }
.career-item img { width: 52px; height: 52px; object-fit: contain; }
/* Bold, ~14-15px, matching design */
.career-item p { font-size: 15px; font-weight: 700; color: var(--text-dark); text-align: center; line-height: 1.35; }

/* ============================================================
   INTRODUCING UT
   Left ~40% text, right ~60% image flush to right edge
============================================================ */
.intro-ut { background: #fff; overflow: hidden; }

/* Full-width flex row — NOT constrained to max-width so image bleeds right */
.intro-ut-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Text column: fixed 520px, padded to align with main container */
.intro-ut-text {
  flex: 0 0 520px;
  /* Left padding aligns with container (max 1200px centred + 48px padding) */
  padding: 52px 52px 0 calc((100vw - 1200px) / 2 + 48px);
  padding-left: max(48px, calc((100vw - 1200px) / 2 + 48px));
  display: flex;
  flex-direction: column;
}

.intro-label { font-size: 14px; color: var(--text-light); margin-bottom: 16px; }
.ut-logo-img { width: 90px; height: auto; margin-bottom: 20px; }
.intro-ut-text h2 { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; line-height: 1.4; }
.intro-ut-text p { font-size: 15px; color: var(--text-mid); line-height: 2; margin-bottom: 8px; }
.tagline-orange {
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
  color: var(--orange);
  font-weight: 400;
  line-height: 1.3;
  padding-bottom: 44px;
}

/* Image: fills all remaining space, flush to right edge */
.intro-ut-image {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.intro-ut-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
/* Fade left edge of image into white background */
.intro-ut-image::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, #fff 0%, transparent 20%);
  z-index: 1; pointer-events: none;
}

/* Orange badge bar — full viewport width */
.ut-badge-bar {
  background: var(--orange);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ut-badge-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 16px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.25); gap: 4px;
}
.ut-badge-cell:last-child { border-right: none; }
/* Badge values: serif, matches original large UT / 3 / CEFR / Cambridge */
.ut-badge-cell .val { font-family: var(--serif); font-size: 26px; font-weight: 700; color: #fff; line-height: 1; }
.ut-badge-cell .lbl { font-size: 12px; color: rgba(255,255,255,0.85); line-height: 1.4; }

/* ============================================================
   WHO IS THIS FOR + FOUR SKILLS
   Headings: ~32px serif (not 42px)
============================================================ */
.who-skills { padding: 72px 0; background: #fff; }
.who-skills .container { display: flex; gap: 0; align-items: flex-start; }

.who-col {
  flex: 0 0 46%;
  padding-right: 60px;
  border-right: 1px solid #E8E8E8;
}
/* Figma: "Who is this for?" — centered, light-weight serif, NOT bold */
.who-col h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 48px;
  line-height: 1.2;
}
.who-col h2 span { color: var(--orange); }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; }
.who-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.who-card img { width: 44px; height: 44px; object-fit: contain; }
.who-card h4 { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.who-card p { font-size: 13px; color: var(--text-light); line-height: 1.6; }

.skills-col { flex: 1; padding-left: 60px; }
/* "Modular training across" then "four skills" on new line in orange — light-weight serif */
.skills-col h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 36px; text-align: center;
  line-height: 1.25;
}
.skills-col h2 span { color: var(--orange); display: block; }
/* New per-item icon layout — each skill has its own icon as a bullet */
.skills-list { display: flex; flex-direction: column; gap: 28px; }
.skill-item { display: flex; align-items: flex-start; gap: 18px; }
.skill-icon { width: 42px; height: 42px; object-fit: contain; object-position: center top; flex-shrink: 0; margin-top: 4px; }
.skill-body { flex: 1; }
.skill-body h4 { font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; line-height: 1.25; }
.skill-body p { font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* ============================================================
   THREE PHASES
   "Three Phases," ~40px serif. NEST/FLY/SOAR ~44px
============================================================ */
.three-phases { padding: 72px 0; background: #fff; text-align: center; }
.phase-eyebrow { font-size: 13px; color: var(--text-light); margin-bottom: 10px; }
.three-phases h2 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 56px;
  line-height: 1.15;
}
.three-phases h2 span { color: var(--orange); }
.phases-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 32px; }
.phase-card { padding: 0 32px 28px; text-align: center; }
.phase-num { font-size: 13px; color: var(--text-light); margin-bottom: 18px; }
.phase-icon { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 20px; }
/* NEST/FLY/SOAR: 44px serif bold */
.phase-card h3 {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
  line-height: 1;
}
.phase-card h4 { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.phase-card > p { font-size: 14px; color: var(--text-light); line-height: 1.7; margin-bottom: 20px; }
.phase-pills { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.phase-pill {
  border: 1.5px solid #C0C0C0; border-radius: 30px;
  padding: 5px 16px; font-size: 13px; color: var(--text-mid); font-weight: 500;
}
.phase-audience { font-size: 13px; color: var(--text-dark); font-weight: 700; border: 1.5px solid #C0C0C0; border-radius: 30px; width: 70%; padding: 0.2vw; margin: 0 auto; display: block; }
.phases-note { font-size: 14px; color: var(--text-light); margin-bottom: 22px; }
.btn-phases {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: #fff;
  padding: 13px 32px; border-radius: 6px;
  font-size: 14px; font-weight: 700; transition: background .2s;
}
.btn-phases::after { content: '›'; font-size: 18px; }
.btn-phases:hover { background: var(--orange-hover); }

/* ============================================================
   UT.4X FRAMEWORK
   Heading: "The UT.4X Framework" ~36px serif
============================================================ */
.framework { background: var(--orange); padding: 64px 0; }
.framework .container { text-align: center; }
.framework h2 {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
  line-height: 1.2;
}
.framework h2 em { color: #fff; font-style: italic; }
.framework-sub { font-size: 15px; color: rgba(0,0,0,0.55); margin-bottom: 44px; }
.framework-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fw-card {
  background: var(--grey-card);
  border-radius: 8px;
  padding: 40px 24px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .25s, border-radius .25s;
}
.fw-card:hover { background: #fff; border-radius: 20px; }
.fw-front { text-align: center; transition: opacity .2s; }
.fw-front h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 10px;
}
.fw-front p { font-size: 14px; color: var(--text-mid); }
.fw-back {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0;
  transition: opacity .25s; text-align: center;
}
.fw-back p { font-size: 15px; color: var(--text-dark); line-height: 1.55; }
.fw-card:hover .fw-front { opacity: 0; }
.fw-card:hover .fw-back { opacity: 1; }

/* ============================================================
   ASSESSMENT PARTNER
============================================================ */
.assessment { padding: 72px 0; background: #fff; text-align: center; }
.assessment h2 {
  font-family: var(--serif); font-size: 34px; font-weight: 700;
  color: var(--text-dark); margin-bottom: 24px;
}
.assessment h2 span { color: var(--orange); }
.cambridge-logo { height: 68px; width: auto; margin: 0 auto 18px; }
.assessment-desc {
  font-size: 15px; color: var(--text-mid);
  max-width: 660px; margin: 0 auto 32px; line-height: 1.8;
}
.btn-assessment {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: #fff;
  padding: 13px 28px; border-radius: 6px;
  font-size: 14px; font-weight: 600; transition: background .2s;
}
.btn-assessment:hover { background: var(--orange-hover); }

/* ============================================================
   GET CERTIFIED
============================================================ */
.get-certified { padding: 72px 0; background: #fff; }
.get-certified .container { display: flex; gap: 72px; align-items: center; }
.certified-text { flex: 1; }
.certified-text h2 {
  font-family: var(--serif); font-size: 36px; font-weight: 700;
  color: var(--text-dark); margin-bottom: 18px; line-height: 1.18;
}
.certified-text h2 span { color: var(--orange); }
.certified-text p { font-size: 15px; color: var(--text-mid); line-height: 1.8; }
.certified-img { flex: 0 0 270px; }
.certified-img img { width: 100%; border: 1.5px solid #ddd; border-radius: 4px; box-shadow: 0 8px 28px rgba(0,0,0,.1); }

/* ============================================================
   WHY CHOOSE LINGUASKILL
============================================================ */
.why-ling { padding: 72px 0; background: #fff; text-align: center; }
.why-ling h2 {
  font-family: var(--serif); font-size: 34px; font-weight: 700;
  color: var(--text-dark); margin-bottom: 52px; line-height: 1.2;
}
.why-ling h2 span { color: var(--orange); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat-item { text-align: center; }
.stat-item img { width: 46px; height: 46px; object-fit: contain; margin: 0 auto 14px; }
.stat-val { font-size: 24px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.stat-desc { font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* ============================================================
   LOGO CAROUSEL
============================================================ */
.recognised { padding: 56px 0; background: #fff; text-align: center; overflow: hidden; }
.recognised h2 {
  font-family: var(--serif); font-size: 32px; font-weight: 700;
  color: var(--text-dark); margin-bottom: 36px;
}
.recognised h2 span { color: var(--orange); }
.carousel-wrap { position: relative; overflow: hidden; }
.carousel-wrap::before,
.carousel-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
}
.carousel-wrap::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.carousel-wrap::after  { right: 0; background: linear-gradient(to left, #fff, transparent); }
.carousel-track {
  display: flex; gap: 64px; align-items: center;
  width: max-content; animation: marquee 36s linear infinite; padding: 8px 0;
}
.carousel-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.carousel-track img { height: 38px; width: auto; object-fit: contain; flex-shrink: 0; opacity: 0.75; transition: opacity .2s; }
.carousel-track img:hover { opacity: 1; }

/* ============================================================
   MENTORS
============================================================ */
.mentors { padding: 72px 0; background: #fff; text-align: center; }
.mentors-pre { font-size: 17px; font-weight: 400; color: var(--text-dark); margin-bottom: 2px; }
.mentors-title {
  font-family: var(--serif); font-size: 32px; font-weight: 700;
  color: var(--orange); margin-bottom: 44px; display: block;
}
.mentors-grid {
  display: block;
}
.mentor-card { text-align: center; cursor: pointer; padding: 0 0.5vw; }
.mentor-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 10px; border: 1px solid #eee; }
.mentor-card h4 { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; line-height: 1.35; }
.mentor-card p { font-size: 12px; color: var(--text-light); line-height: 1.5; }

/* ============================================================
   STAY CONSISTENT
============================================================ */
.stay-consistent { background: var(--dark-bg); padding: 56px 0; }
.stay-consistent .container { text-align: center; }
.stay-consistent h2 {
  font-family: var(--serif); font-size: 32px; font-weight: 700;
  color: #fff; margin-bottom: 40px;
}
.stay-consistent h2 span { color: var(--orange); }
.consistent-row { display: flex; align-items: flex-start; }
.consistent-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 0 16px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.consistent-item:last-child { border-right: none; }
.consistent-item img { width: 36px; height: 36px; object-fit: contain; }
.consistent-item span { font-size: 13px; color: rgba(255,255,255,.85); text-align: center; line-height: 1.45; font-weight: 500; }

/* ============================================================
   BATCH BANNER
============================================================ */
.batch-banner { background: var(--orange); padding: 56px 0; text-align: center; }
.batch-banner h2 { font-family: var(--serif); font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.batch-banner p  { font-family: var(--serif); font-size: 20px; color: rgba(255,255,255,.9); margin-bottom: 28px; }
.btn-apply {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dark-bg); color: #fff;
  padding: 13px 32px; border-radius: 6px;
  font-size: 15px; font-weight: 700; font-family: var(--font);
  border: none; cursor: pointer; transition: background .2s;
}
.btn-apply::after { content: '›'; font-size: 18px; }
.btn-apply:hover { background: #000; }

/* ============================================================
   TESTIMONIALS
============================================================ */
.testimonials { padding: 72px 0; background: #fff; text-align: center; }
.testimonials h2 {
  font-family: var(--serif); font-size: 34px; font-weight: 700;
  color: var(--text-dark); margin-bottom: 48px;
}
.testimonials h2 span { color: var(--orange); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-card { background: var(--light-bg); border-radius: 10px; padding: 28px; text-align: left; }
.quote-img { width: 28px; height: auto; margin-bottom: 14px; }
.testi-card p { font-size: 14px; color: var(--text-mid); line-height: 1.75; margin-bottom: 20px; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testi-author h4 { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.testi-author span { font-size: 12px; color: var(--text-light); }

/* ============================================================
   EXPLORE CTA — dark
============================================================ */
.explore-cta { background: var(--dark-bg); padding: 64px 0; text-align: center; }
.explore-cta h2 {
  font-family: var(--serif); font-size: 34px; font-weight: 700;
  margin-bottom: 28px; line-height: 1.2;
}
.explore-cta h2 .c-orange { color: var(--orange); }
.explore-cta h2 .c-white { color: #fff; }
.btn-brochure {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: #fff;
  padding: 13px 32px; border-radius: 6px;
  font-size: 14px; font-weight: 700; transition: background .2s;
}
.btn-brochure:hover { background: var(--orange-hover); }

/* ============================================================
   FINAL CTA — orange
============================================================ */
.final-cta { background: var(--orange); padding: 60px 0; }
.final-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.final-cta-text h2 {
  font-family: var(--serif); font-size: 34px; font-weight: 700;
  color: #fff; line-height: 1.2; margin-bottom: 12px;
}
.final-cta-text p { font-size: 15px; color: rgba(255,255,255,.9); line-height: 1.7; max-width: 500px; }
.btn-expert {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dark-bg); color: #fff;
  padding: 13px 32px; border-radius: 6px;
  font-size: 15px; font-weight: 700; font-family: var(--font);
  border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .2s;
}
.btn-expert:hover { background: #000; }

/* ============================================================
   FOOTER
============================================================ */
.footer { background: var(--dark-bg); padding: 52px 0 24px; }
.footer-top { display: grid; grid-template-columns: 240px 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-brand img { height: 44px; width: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-brand-desc { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.75; margin-bottom: 10px; }
.footer-tagline { font-size: 13px; color: var(--orange); }
.footer-col h4 { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col ul li a { font-size: 14px; color: rgba(255,255,255,.65); transition: color .2s; }
.footer-col ul li a:hover { color: var(--orange); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; display: flex; justify-content: space-between; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.3); }
.footer-powered { font-size: 12px; color: rgba(255,255,255,.3); }
.footer-powered a { color: var(--orange); }

/* ============================================================
   POPUP MODAL
============================================================ */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.popup-overlay.open { opacity: 1; pointer-events: all; }
.popup-box {
  background: #fff; border-radius: 12px;
  width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto;
  padding: 40px; position: relative;
  transform: translateY(24px); transition: transform .25s;
}
.popup-overlay.open .popup-box { transform: translateY(0); }
.popup-close {
  position: absolute; top: 14px; right: 18px;
  font-size: 24px; color: var(--text-light);
  cursor: pointer; background: none; border: none; line-height: 1; transition: color .2s;
}
.popup-close:hover { color: var(--orange); }
.popup-box h3 { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.popup-sub { font-size: 14px; color: var(--text-light); margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 14px; font-family: var(--font); color: var(--text-dark);
  outline: none; transition: border-color .2s; background: #fff;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--orange); }
.form-field textarea { resize: vertical; min-height: 76px; }
.captcha-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; background: #f9f9f9;
  padding: 11px 14px; border-radius: 8px; border: 1.5px solid var(--border);
}
.captcha-q { font-size: 15px; font-weight: 700; color: var(--text-dark); flex: 1; }
.captcha-input { width: 64px !important; text-align: center; margin-bottom: 0 !important; }
.captcha-refresh {
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: var(--text-light); line-height: 1; padding: 4px; transition: color .2s;
}
.captcha-refresh:hover { color: var(--orange); }
.form-msg { font-size: 13px; padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; display: none; }
.form-msg.success { background: #e6f7ee; color: #1a7a45; display: block; }
.form-msg.error   { background: #fde8e8; color: #b91c1c; display: block; }
.btn-submit {
  width: 100%; background: var(--orange); color: #fff;
  border: none; padding: 13px; border-radius: 6px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: var(--font); transition: background .2s;
}
.btn-submit:hover { background: var(--orange-hover); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .intro-ut-wrap { padding-left: 32px; }
  .intro-ut-text { flex: 0 0 420px; }
}
@media (max-width: 960px) {
  .hero-bg-img { min-height: 320px; }
  .hero-overlay { position: relative; grid-template-columns: 1fr; }
  .hero { line-height: normal; }
  .hero-bg-img { display: none; }
  .hero-left-text {
    min-height: 360px;
    background: #111;
    padding: 44px 32px;
  }
  .hero-right-text {
    min-height: 360px;
    background: #f5ede0;
    padding: 44px 32px;
  }
  .intro-ut-image { display: none; }
  .intro-ut-wrap { padding-left: 0; }
  .intro-ut-text { flex: none; width: 100%; padding: 40px 48px 0; }
  .who-skills .container { flex-direction: column; }
  .who-col { flex: none; width: 100%; border-right: none; padding-right: 0; border-bottom: 1px solid #eee; padding-bottom: 48px; }
  .skills-col { flex: none; width: 100%; padding-left: 0; }
  .phases-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .get-certified .container { flex-direction: column; }
  .final-cta .container { flex-direction: column; text-align: center; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .framework-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .container { padding: 0 24px; }
  .navbar-inner { padding: 0 24px; }
  .navbar-nav a:not(.btn-nav-cta) { display: none; }
  .career-grid { flex-wrap: wrap; }
  .career-item { flex: 0 0 40%; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .framework-grid { grid-template-columns: 1fr 1fr; }
  .consistent-row { flex-wrap: wrap; }
  .consistent-item { flex: 0 0 calc(33% - 10px); border-right: none; margin-bottom: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .popup-box { padding: 24px 18px; }
  .three-phases h2 { font-size: 30px; }
  .phase-card h3 { font-size: 36px; }
  .hero-left-text { padding: 40px 28px; }
  .hero-right-text { padding: 40px 28px; }
  .intro-ut-text { padding: 36px 24px 0 !important; }
  .tagline-orange { font-size: 22px; }
.fw-front h4 {font-size: 20px;}
	
.hero {display: none;}	
.mob-01{width: 100%; display: block; position: relative;}
.mob-01 figure{display: block;}
.mob-01 figcaption{position:absolute; top:5vw; left:5.5vw; display: block; width: 52%;}
.mob-01 figcaption h2{font-family: var(--serif); color: #fff; font-size:5vw; line-height:6vw; margin: 0 0 5vw 0;}	
.mob-01 figcaption h2 span{color: var(--orange);}


.mob-02{width: 100%; display: block; position: relative;}
.mob-02 figure{display: block;}
.mob-02 figcaption{position:absolute; top:5vw; right:3vw; display: block; width: 45%;}
.mob-02 figcaption h2{font-family: var(--serif); color: #000; font-size:5vw; line-height:6vw; margin: 0 0 5vw 0;}	
.mob-02 figcaption h2 span{color: var(--orange);}
.hero-btn-area{width: 100%; display: block; background: #fef0e3; padding: 5vw 0; text-align: center;}
.certified-text h2{text-align: center;}
	.consistent-item span {font-size: 12px;}
	
	/*Popus CSS Start*/
.popup-content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; height: 90%;
  padding: 4vw;
  border-radius: 3vw; overflow: scroll;
}
.pop-left{width: 100%; display: block; margin: 0 0 7vw 0;  text-align: center;}
.pop-left figure{width:100%; display:block; margin:0 0 4vw 0;}
.pop-left figcaption{font-size: 5vw; margin: 0 0 5vw 0;}
.pop-left figcaption span{font-size: 4vw;}
.pop-left .social-icns{margin: 0 0 2vw -5vw;}
	
.pop-right{width: 100%; display: block; font-size: 3.5vw; line-height: 5vw;}
.pop-right p{margin: 0 0 4vw 0;}
.pop-right ul{margin: 4vw 0 5vw 0;}
.pop-right li{margin: 0 0 2vw 5vw;}

.pop-head{font-size: 3.5vw;}
/*Popus CSS End*/
}


/* ============================================================
   Figma match corrections - desktop focussed
   Keeps content and section order unchanged
============================================================ */
@media (min-width: 961px) {
  :root { --max-w: 1200px; }

  .navbar-inner{
    height:74px;
    padding:0 48px;
  }
  .navbar-logo img{height:54px;}
  .navbar-nav{gap:28px;}
  .btn-nav-cta{padding:12px 26px;border-radius:7px;}

  .hero{
    height:480px;
    overflow:hidden;
    line-height:normal;
  }
  .hero-bg-img{
    height:100%;
    min-height:0;
    object-fit:cover;
    object-position:center center;
  }
  .hero-overlay{
    grid-template-columns:50% 50%;
  }
  .hero-left-text{
    padding:0 0 0 clamp(52px, 8.2vw, 150px);
    justify-content:center;
    background:linear-gradient(to right, rgba(0,0,0,.38) 0%, rgba(0,0,0,.12) 56%, rgba(0,0,0,0) 100%);
  }
  .hero-left-text h1{
    max-width:390px;
    font-size:37px;
    line-height:1.14;
    margin-bottom:23px;
  }
  .hero-pain{
    max-width:350px;
    gap:13px;
    margin-bottom:26px;
  }
  .hero-pain li{font-size:15px;line-height:1.32;}
  .hero-right-text{
    padding:0 0 0 clamp(300px, 26vw, 520px);
    justify-content:center;
    align-items:flex-start;
  }
  .hero-right-text h2{
    max-width:330px;
    font-size:36px;
    line-height:1.14;
    margin-bottom:18px;
  }
  .hero-benefits{
    max-width:300px;
    gap:14px;
    margin-bottom:28px;
  }
  .hero-benefits li{font-size:15px;line-height:1.24;}
  .btn-hero{padding:13px 26px;font-size:14px;}

  /* ============================================================
     CAREER RETURNS (icons row) — desktop
     Figma: 34px serif italic heading, 48px orange icons, 15px bold labels
  ============================================================ */
  .career-returns { padding: 64px 0 56px; }
  .career-returns h2 {
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 48px;
    line-height: 1.2;
  }
  .career-returns h2 span { color: var(--orange); font-weight: 700; }
  .career-grid {
    display: flex;
    justify-content: center;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
  }
  .career-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
  }
  .career-item img { width: 48px; height: 48px; object-fit: contain; }
  .career-item p {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    line-height: 1.35;
  }

  /* ============================================================
     INTRODUCING UT — desktop
     Figma: text left ~45%, image flush right
     - "Introducing" label small (~15px)
     - UT logo ~85px
     - BCS heading bold 18px
     - Body 15px, line-height 2
     - Tagline large orange italic ~32px
     - Badge bar values ~28px serif white
  ============================================================ */
  .intro-ut-wrap {
    height: 480px;
    align-items: stretch;
  }
  .intro-ut-text {
    flex: 0 0 45%;
    padding: 56px 40px 0 clamp(48px, 7vw, 130px);
    justify-content: flex-start;
  }
  .intro-label { font-size: 15px; color: var(--text-light); margin-bottom: 18px; }
  .ut-logo-img { width: 85px; height: auto; margin-bottom: 24px; }
  .intro-ut-text h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 16px;
    max-width: 520px;
  }
  .intro-ut-text p {
    font-size: 15px;
    line-height: 2;
    max-width: 560px;
    color: var(--text-mid);
    margin-bottom: 8px;
  }
  .tagline-orange {
    font-family: var(--serif);
    font-size: 32px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.25;
    color: var(--orange);
    margin-top: 18px;
    padding-bottom: 0;
    max-width: 640px;
  }
  .intro-ut-image {
    flex: 1;
    position: relative;
    overflow: hidden;
  }
  .intro-ut-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
  }
  .intro-ut-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      #fff 0%,
      rgba(255,255,255,0.95) 10%,
      rgba(255,255,255,0.55) 26%,
      rgba(255,255,255,0) 45%
    );
    z-index: 1;
    pointer-events: none;
  }
  .ut-badge-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--orange);
  }
  .ut-badge-cell {
    padding: 22px 16px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.25);
  }
  .ut-badge-cell:last-child { border-right: none; }
  .ut-badge-cell .val {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    display: block;
    margin-bottom: 2px;
  }
  .ut-badge-cell .lbl {
    font-size: 14px;
    color: #fff;
    line-height: 1.25;
    display: block;
  }

  /* ============================================================
     WHO IS THIS FOR + FOUR SKILLS — desktop
     Figma: ~36px serif light-weight headings (NOT bold)
     - Cards: 44px icons, bold 15px titles, 14px gray body
     - Skill items: bold 22px h4, 15px body
     - Vertical divider between columns
  ============================================================ */
  .who-skills { padding: 72px 0 80px; }
  .who-skills .container {
    max-width: 1180px;
    padding: 0 40px;
    display: flex;
    align-items: flex-start;
    gap: 0;
  }
  .who-col {
    flex: 0 0 50%;
    padding-right: 64px;
    border-right: 1px solid #E0E0E0;
  }
  .skills-col {
    flex: 0 0 50%;
    padding-left: 64px;
  }
  .who-col h2,
  .skills-col h2 {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.18;
    color: var(--text-dark);
    margin-bottom: 56px;
  }
  .who-col h2 { text-align: center; }
  .who-col h2 span { color: var(--orange); }
  .skills-col h2 {
    text-align: center;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 44px;
  }
  .skills-col h2 span { color: var(--orange); display: block; }

  .who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px 32px;
  }
  .who-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .who-card img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-bottom: 4px;
  }
  .who-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
  }
  .who-card p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.65;
    max-width: 240px;
  }

  /* New per-item icon layout: each skill gets its own icon as a bullet */
  .skills-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .skill-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
  .skill-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
    object-position: center top;
    flex-shrink: 0;
    margin-top: 4px;
  }
  .skill-body { flex: 1; }
  .skill-body h4 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 6px;
  }
  .skill-body p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-light);
    max-width: 480px;
  }
}

/* ============================================================
   TABLET (961–1280px) — proportional scaling
============================================================ */
@media (min-width: 961px) and (max-width: 1280px) {
  .career-grid { max-width: 950px; }
  .career-item img { width: 44px; height: 44px; }
  .career-item p { font-size: 14px; }

  .intro-ut-wrap { height: 440px; }
  .intro-ut-text { flex: 0 0 48%; padding-left: clamp(36px, 5vw, 70px); }
  .intro-label { font-size: 14px; }
  .ut-logo-img { width: 78px; }
  .intro-ut-text h2 { font-size: 17px; }
  .intro-ut-text p { font-size: 14px; line-height: 1.85; }
  .tagline-orange { font-size: 26px; }
  .intro-ut-image, .intro-ut-image { min-height: 440px; height: 440px; }
  .ut-badge-cell .val { font-size: 24px; }
  .ut-badge-cell .lbl { font-size: 13px; }

  .who-skills .container { max-width: 1000px; padding: 0 32px; }
  .who-col { padding-right: 48px; }
  .skills-col { padding-left: 48px; }
  .who-col h2, .skills-col h2 { font-size: 32px; margin-bottom: 44px; }
  .who-grid { gap: 44px 28px; }
  .who-card img { width: 40px; height: 40px; }
  .who-card h4 { font-size: 14px; }
  .who-card p { font-size: 13px; }
  .skill-icon { width: 38px; height: 38px; }
  .skill-body h4 { font-size: 20px; }
  .skill-body p { font-size: 14px; }
}