/* ===================== Design tokens ===================== */
:root {
  --pp-blue: #1559ED;
  --pp-blue-dark: #0f45c4;
  --pp-ink: #101622;
  --pp-muted: #000000;
  --pp-bg: #ffffff;
  --pp-soft: #EFF7FF;
  --pp-radius: 16px;
  --pp-shadow: 0 18px 40px -18px rgba(31, 59, 214, .35);

  /* ---- merged from style2.css ---- */
  --blue: #1559ED;
  --blue-dark: #1f3fc9;
  --blue-light: #eef1ff;
  --purple-light: #f2ecfe;
  --green-light: #e8f9ef;
  --green: #1fa971;
  --orange-light: #fdeee0;
  --orange: #e88a2e;
  --pink-light: #fdeaf0;
  --pink: #e05a86;
  --yellow-light: #fdf3d8;
  --ink: #171b2e;
  --gray: #6b7280;
  --gray-light: #9aa1b3;
  --line: #eef0f5;
  --panel: #eef1f8;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --darkblue: #004795;
  --lightGray: #F8FAFC;
  --whiteColor: #ffffff;
  --greenColor: #059669;
  --fontInter: 'Inter', sans-serif;
  --icon-blue: #94b3f2;
  --icon-bg: #eef7fe;
  --text-dark: #1f2937;
  --text-gray: #424751;
  --bg-page: #ffffff;
  --icon-bg-dark: #D7E2FF;
  --lightBlack: #111C2D;
  --color-blue: #2563eb;
  --color-green: #16a34a;
  --color-orange: #ea580c;
  --color-purple: #7c3aed;
  --color-pink: #ec4899;
  --color-cyan: #06b6d4;
  --color-red: #dc2626;
  --text-muted: #6b7280;
  --bg-light: #f8fafc;
  --border-light: #e5e7eb;
  --color-navy: #1e3a5f;
  --color-dark-blue: #1e40af;
  --color-primary: #2563eb;
  --color-bg-card: #f8f9fc;
  --color-bg-light: #eef2ff;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-green-bg: #f0fdf4;
  --border-color: #e5e7eb;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  --bg-card: #ffffff;

  /* Actual rendered height of .site-header, kept in sync by JS (common.js)
     so the mobile/tablet nav overlay always starts exactly below it. */
  --header-h: 76px;
}

* { box-sizing: border-box; }
img {
    width: 100%;
}
html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--pp-ink);
  background: var(--pp-bg);
  overflow-x: hidden;
  max-width: 100%;
}
/* Astra paints blog posts with its own light page background (.ast-separate-container), which showed
   as a coloured strip in the gap between the post hero and the article */
body.ast-separate-container,
body.single { background-color: var(--pp-bg); }
.header-logo {
    max-width: 70px;
}

.p-80{
  padding: 80px 0;
}


/* ===================== Header ===================== */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
}

.navbar { padding: 1rem 0; }

.brand-logo {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-blue), #6b7bff);
}

.brand-name {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.5px;
  color: var(--pp-blue);
}

.navbar-nav .nav-link {
  font-weight: 600;
  font-size: .95rem;
  color: var(--pp-ink);
  padding: .4rem .9rem;
  transition: color .2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus { color: var(--pp-blue); outline: none !important; }

.dropdown-menu {
  border: 0;
  border-radius: 12px;
  padding: .5rem;
  box-shadow: 0 16px 40px -16px rgba(16, 22, 34, .25);
}
.dropdown-item {
  border-radius: 8px;
  font-weight: 500;
  padding: .55rem .75rem;
}
.dropdown-item:hover { background: var(--pp-soft); color: var(--pp-blue); }

.btn-sign-in {
  font-weight: 600;
  padding: .55rem 1.5rem;
  border-radius: 10px;
}

/* Mobile/tablet hamburger toggle — Bootstrap's default focus/active state
   renders as a heavy, ungainly box-shadow block. Replace it with a subtle
   branded ring so focus/active/focus-within all look intentional. */
.navbar-toggler {
  background: #fff;
  border: 1.5px solid rgba(16, 22, 34, .15);
  border-radius: 10px;
  padding: .45rem .6rem;
  box-shadow: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.navbar-toggler:hover {
  border-color: rgba(47, 85, 255, .35);
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-within {
  background: #fff;
  border-color: var(--pp-blue);
  box-shadow: 0 0 0 3px rgba(47, 85, 255, .25);
  outline: none;
}

/* ===================== Mega menu ===================== */
.has-mega { position: static; }            /* anchor menu to the navbar, not the item */

.mega-toggle .chev {
  font-size: .7rem;
  transition: transform .25s ease;
  margin-left: .15rem;
}
.has-mega:hover .mega-toggle .chev { transform: rotate(180deg); }
.has-mega:hover .mega-toggle { color: var(--pp-blue); }

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: min(1152px, 94vw);
  padding-top: 0px;                       /* invisible hover bridge */
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 60;
}
/* .has-mega:hover .mega-menu, */
.has-mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.25rem;
  background: #fff;
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: 0 30px 70px -24px rgba(16, 22, 34, .35);
  border: 1px solid rgba(16, 22, 34, .06);
}

/* Left tabs */
.mega-tabs { display: flex; flex-direction: column; gap: .35rem; }
.mega-tab {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  text-align: left;
  background: transparent;
  color: #000;
  border: 0;
  background: #fff;
  border-left: 3px solid transparent;     /* left accent bar */
  border-radius: 10px;
  padding: .75rem .8rem;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.mega-tab:hover { background: var(--pp-soft);  color:  var(--pp-blue); border-left-color: rgba(47, 85, 255, .35); }
.mega-tab.active { background: #eef2ff !important; border-left-color: var(--pp-blue); }
.mega-tab:focus { background: #eef2ff !important; border-left-color: var(--pp-blue); color: #000; }
.mega-tab .mt-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 1rem;
  flex-shrink: 0;
}
.ico-pte   { color: #2f55ff; background: #e7ecff; }
.ico-ielts { color: #e0457b; background: #fde7ef; }
.ico-toefl { color: #f59e0b; background: #fef3dc; }
.mega-tab .mt-text strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
}
.mega-tab.active .mt-text strong { color: var(--pp-blue); }
.mega-tab .mt-text small {
  display: block;
  color: var(--pp-muted);
  font-size: .72rem;
  line-height: 1.35;
  margin-top: .15rem;
}
.mega-tab .mt-arrow {
  margin-left: auto;
  align-self: center;
  font-size: .8rem;
  color: var(--pp-muted);
}
.mega-tab.active .mt-arrow { color: var(--pp-blue); }

/* Right content */
.mega-panel { display: none; }
.mega-panel.active { display: block; animation: megaFade .25s ease; }
@keyframes megaFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mega-pills { display: flex; gap: .6rem; margin-bottom: 1rem; }
.mega-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .9rem;
  padding: .6rem 1.3rem;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(16, 22, 34, .12);
  color: var(--pp-ink);
  text-decoration: none;
  transition: all .2s ease;
}
.mega-pill:hover { border-color: var(--pp-blue) !important; background: #fff; color: var(--pp-blue) !important; }
.mega-pill.active {
  background: var(--pp-blue);
  border-color: var(--pp-blue);
  color: #fff !important;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
.mega-card {
  display: flex;
  flex-direction: column;
  align-items: center;          /* center content */
  justify-content: center;
  text-align: center;
  gap: .65rem;
  padding: 1.1rem .85rem;
  border-radius: 14px;
  background: #fafbfe;
  border: 1px solid rgba(16, 22, 34, .05);
  font-weight: 600;
  font-size: .86rem;
  color: var(--pp-ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mega-card:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 85, 255, .25);
  box-shadow: 0 12px 24px -14px rgba(16, 22, 34, .3);
}
.mc-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  font-size: 1.1rem;
}
.mc-title { line-height: 1.25; }

/* heading bottom color bar */
.mc-bar {
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--pp-blue);
}
.bar-blue   { background: #2f55ff; }
.bar-pink   { background: #e0457b; }
.bar-teal   { background: #0fa3a3; }
.bar-orange { background: #f59e0b; }
.bar-green  { background: #16a34a; }

.c-blue   { color: #2f55ff; background: #e7ecff; }
.c-pink   { color: #e0457b; background: #fde7ef; }
.c-teal   { color: #0fa3a3; background: #dcf5f4; }
.c-orange { color: #f59e0b; background: #fef3dc; }
.c-green  { color: #16a34a; background: #ddf5e4; }

/* promo card spans remaining columns */
.mega-promo {
  grid-column: span 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(120deg, #eef2ff, #f6f8ff);
  border: 1px solid rgba(47, 85, 255, .12);
}
.mega-promo strong { font-size: 1rem; font-weight: 800; }
.mega-promo p { margin: .25rem 0 0; font-size: .8rem; color: var(--pp-muted); max-width: 320px; }
.promo-btn {
  white-space: nowrap;
  font-weight: 600;
  border-radius: 10px;
  padding: .65rem 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Mobile/tablet-only accordion layout (see @media 991.98px below for its
   actual styling and for what hides/shows it vs. the desktop .mega-inner). */
.mega-accordion { display: none; }

/* ===================== Magnetic button ===================== */
.btn {
  transition: transform 0.18s cubic-bezier(.22,.68,0,1.4),
              background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
  will-change: transform;
}

/* ===================== Buttons ===================== */
.btn-primary {
  --bs-btn-bg: var(--pp-blue);
  --bs-btn-border-color: var(--pp-blue);
  --bs-btn-hover-bg: var(--pp-blue-dark);
  --bs-btn-hover-border-color: var(--pp-blue-dark);
  --bs-btn-active-bg: var(--pp-blue-dark);
  --bs-btn-active-border-color: var(--pp-blue-dark);
}
.btn-primary:focus
{
  color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--pp-blue);
  --bs-btn-border-color: rgba(47, 85, 255, .35);
  --bs-btn-hover-bg: var(--pp-blue);
  --bs-btn-hover-border-color: var(--pp-blue);
  --bs-btn-active-bg: var(--pp-blue);
}

.btn-hero {
  font-weight: 600;
  padding: .85rem 2rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.btn-hero .bi { transition: transform .2s ease; }
.btn-hero:hover .bi { transform: translateX(4px); }

/* ===================== Hero ===================== */
.hero {
  position: relative;
  padding: 200px 0 2rem;
  z-index: 1;
  overflow: hidden;            /* keep circle pattern from causing scroll */
}

/* decorative circle patterns */
.circle-pattern {
  position: absolute;
  width: auto;                 /* override global img { width:100% } */
  pointer-events: none;
  user-select: none;
  opacity: .8;
  z-index: 0;
}
/* left column anchors the circle behind the heading */
.hero-copy { position: relative; }
.hero-copy > *:not(.circle-left) { position: relative; z-index: 1; }

.circle-left {
  top: 33%;
  left: 18%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-width: none;
  z-index: 0;
  animation: rotateRingl 20s linear infinite;
  transform-origin: center center;
}
@keyframes rotateRingl {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.circle-right {
  bottom: -140px;
  right: -160px;
  width: 520px;
    animation: rotateRing 20s linear infinite;
    transform-origin: center center;
}
@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* keep content above the pattern */
.hero .container { position: relative; z-index: 1; }

.hero-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pp-blue);
  margin-bottom: 1.25rem;
}

.hero-title {
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.07;
  letter-spacing: -1.5px;
  margin-bottom: 1.25rem;
}
.highlight { color: var(--pp-blue); }
.text-accent { color: var(--pp-blue); }

.hero-sub {
  color: var(--pp-muted);
  font-size: 1.02rem;
  max-width: 360px;
  line-height: 1.6;
}

/* ===================== Hero visual ===================== */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
}

.hero-blob {
  position: absolute;
  inset: 12% 14% 6% 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #3f63ff, var(--pp-blue));
  overflow: hidden;
  box-shadow: var(--pp-shadow);
}
.hero-photo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* decorative rings */
.ring {
  position: absolute;
  border: 1px solid rgba(47, 85, 255, .14);
  border-radius: 50%;
  pointer-events: none;
}
.ring-1 { inset: -6%; }
.ring-2 { inset: 8%;  border-color: rgba(47, 85, 255, .10); }
.ring-3 {
  width: 55%; height: 55%;
  right: -18%; bottom: -10%;
  border-color: rgba(47, 85, 255, .12);
}

/* floating stat cards */
.stat-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .65rem;
  background: #fff;
  padding: .7rem .9rem;
  border-radius: 14px;
  box-shadow: 0 14px 34px -14px rgba(16, 22, 34, .28);
}
.stat-card strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}
.stat-card small {
  color: var(--pp-muted);
  font-size: .72rem;
}
.stat-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--pp-blue);
  background: var(--pp-soft);
  font-size: 1.05rem;
}

.stat-courses { top: 30%; left: -4%; }
.stat-online  { top: 4%;  right: 2%; flex-direction: column; align-items: flex-start; gap: .3rem; }
.stat-tutors  { bottom: 18%; right: -2%; }

.donut {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    conic-gradient(var(--pp-blue) 0 78%, #e6eaf5 78% 100%);
  -webkit-mask: radial-gradient(circle 12px at center, transparent 98%, #000 100%);
          mask: radial-gradient(circle 12px at center, transparent 98%, #000 100%);
}

/* ===================== Trusted strip =====================
   A highlighted "Trusted by" badge on the left, with the partner-logo
   marquee to its right reading as a continuous stream that emerges from
   behind that badge: the marquee's left mask-fade starts right at the
   badge's edge (see .logo-marquee), so logos appear to slide out from
   underneath it rather than just fading in mid-air. One flex row at every
   breakpoint — the badge only shrinks its own font/padding on very small
   phones, it never drops to a separate stacked line, so the same concept
   reads the same way on mobile, tablet and desktop. */
.trusted-strip {
  margin-top: 3rem;
  padding: 1.1rem 1.25rem;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--pp-soft) 0%, rgba(239,247,255,.35) 60%, transparent 100%);
  border: 1px solid rgba(47,85,255,.08);
}
.trusted-strip-inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.trusted-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  color: var(--pp-blue);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
  padding: .75rem 1.35rem;
  border-radius: 100px;
  box-shadow: 0 8px 20px -8px rgba(47,85,255,.4);
  border: 1.5px solid rgba(47,85,255,.2);
  white-space: nowrap;
}
.trusted-badge-ico {
  font-size: 1.1rem;
  color: var(--pp-blue);
  flex-shrink: 0;
}

/* sliding logo marquee */
.logo-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 92%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2.75rem;
  animation: logoSlide 22s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }

@keyframes logoSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: .95rem;
  color: var(--pp-ink);
  opacity: .75;
  transition: opacity .2s;
  white-space: nowrap;
}
.logo-item:hover { opacity: 1; }

.logo-ico {
  font-size: 1.15rem;
}

.logo-item img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
}

/* ===================== Scroll reveal ===================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.55s cubic-bezier(.22,.68,0,1.2),
    transform 0.55s cubic-bezier(.22,.68,0,1.2);
  transition-delay: var(--rd, 0s);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===================== Magnetic button ===================== */
.btn {
  transition: transform 0.18s cubic-bezier(.22,.68,0,1.4),
              background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  will-change: transform;
}

/* ===================== Skills / About section ===================== */
.skills-section {
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

/* decorative cap images */
.skills-cap {
  position: absolute;
  width: auto;
  pointer-events: none;
  user-select: none;
  opacity: .9;
}
.skills-cap-left {
  left: -10px;
  top: 50%;
  transform: translateY(-50%) rotate(-20deg);
  width: 110px;
}
.skills-cap-right {
  right: -10px;
  top: 40%;
  transform: translateY(-50%) rotate(15deg) scaleX(-1);
  width: 110px;
}

/* ===================== Features section ===================== */
.features-section {
  position: relative;
  padding: 60px 0;
  background-image: url('../images/smarter-way-bg.png');
  background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* scattered watermark doodles */
.feat-doodle {
  position: absolute;
  color: #b0b8d4;
  opacity: .35;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* section heading */
.feat-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.2;
  margin-bottom: .9rem;
}
.feat-sub {
  color: var(--pp-muted);
  font-size: .92rem;
  line-height: 1.65;
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: 0;
}

/* feature cards */
.feat-card {
  height: 100%;
  border: 2px dashed #2B2B71;
  border-radius: 20px;
  padding: 3rem 1.4rem 3rem;
  background: #fff;
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.feat-card:hover {
  transform: translateY(-6px);
  background: var(--pp-blue);
  border-color: var(--pp-blue);
  border-style: solid;
  box-shadow: 0 24px 48px -16px rgba(47, 85, 255, .5);
}
.feat-card:hover .feat-card-title,
.feat-card:hover .feat-card-body { color: #fff; }
.feat-card:hover .feat-ico-wrap {
  background: #fff;
  color: var(--pp-blue);
}

/* active (blue) card */
.feat-card--active {
  background: var(--pp-blue);
  border-color: var(--pp-blue);
  border-style: solid;
  box-shadow: 0 24px 48px -16px rgba(47, 85, 255, .5);
}
.feat-card--active .feat-card-title,
.feat-card--active .feat-card-body { color: #fff; }
.feat-card--active .feat-ico-wrap {
  background: #fff;
  color: var(--pp-blue);
}

/* icon circle — dark navy for default cards */
.feat-ico-wrap {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #1a2068;
  color: #fff;
  font-size: 1.55rem;
  margin-bottom: 1.3rem;
}

.feat-card-title {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--pp-ink);
  margin-bottom: .75rem;
}
.feat-card-body {
  font-size: .84rem;
  color: var(--pp-muted);
  line-height: 1.6;
  margin: 0;
}

/* Dot indicators for the mobile/tablet feature-cards carousel (hidden on
   desktop via the d-lg-none class in the markup) */
.feat-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.feat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(43, 43, 113, .2);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.feat-dot.active {
  width: 22px;
  border-radius: 5px;
  background: var(--pp-blue);
}

@media (max-width: 991.98px) {
  /* Feature cards ("A smarter way to prepare...") become a swipeable
     carousel instead of a tall stack — cards keep their exact desktop
     look, just laid out in a horizontally-scrolling, snap-aligned strip
     with a peek of the next card so it reads clearly as swipeable. */
  .feat-cards-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .25rem;
    justify-content: flex-start !important;  /* override Bootstrap's .justify-content-center:
                                                 with overflowing nowrap content, a centered flex
                                                 row starts scrolled to the middle card with both
                                                 edges clipped instead of starting at card 1 */
  }
  .feat-cards-row::-webkit-scrollbar { display: none; }
  .feat-cards-row > [class*="col-"] {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: start;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .feat-cards-row > [class*="col-"] { flex: 0 0 52%; max-width: 52%; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .feat-cards-row > [class*="col-"] { flex: 0 0 36%; max-width: 36%; }
}

/* --- collage layout --- */
.skills-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
  max-width: 100%;
}

.sc-photo { border-radius: 18px; overflow: hidden; }
.sc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: top;}

.sc-photo-1 {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 500px;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0);    box-shadow: 0 14px 34px -14px rgba(16,22,34,.18); }
  50%       { transform: translateY(-7px); box-shadow: 0 22px 40px -14px rgba(47,85,255,.22); }
}
.sc-badge {
  grid-column: 2;
  grid-row: 1;
  background: #fff;
  border: 1px solid rgba(16,22,34,.07);
  border-radius: 18px;
  box-shadow: 0 14px 34px -14px rgba(16,22,34,.18);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: badgeFloat 3.2s ease-in-out infinite;
  gap: .5rem;
  max-width: 250px;
}
.sc-badge-donut { position: relative; width: 110px; height: 110px; }
.sc-donut-svg { width: 110px; height: 110px; }
.sc-badge-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--pp-ink);
}
.sc-badge-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--pp-muted);
  margin: 0;
  text-align: center;
}

.sc-photo-2 {
  grid-column: 2;
  grid-row: 2;
  height: 403px;
}

/* --- copy --- */
.skills-title {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  margin-bottom: 1.1rem;
}
.skills-body {
  color: var(--pp-muted);
  font-size: .97rem;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 1.75rem;
}
.skills-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.sf-title {
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: .35rem;
}
.sf-body {
  color: var(--pp-muted);
  font-size: .84rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 575.98px) {
  .skills-features { grid-template-columns: 1fr; }
  /* .sc-photo-1/.sc-photo-2 heights are set by the mobile collage
     redesign further down (max-width: 767.98px), which also covers this
     narrower range. */
}

.scroll-dot {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c5cbdb;
  margin-top: 1.5rem;
}

/* ===================== How It Works ===================== */
/* ===================== SKILL CARDS SECTION ===================== */
.skill-cards-section {
  padding: 60px 0;
  background: #fff;
}

/* Left text col — vertically centered against the card group */
.skill-cards-left {
    max-width: 700px;
}

.skill-cards-title {
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.3px;
  margin-bottom: 1.2rem;
}

.skill-cards-sub {
  font-size: .88rem;
  color: var(--pp-muted);
  line-height: 1.8;
}

/* Staggered card row — cards rise left→right */
.sk-cards-row {
  display: flex;
  gap: .85rem;
  align-items: stretch;
}

.sk-card {
  flex: 1;
  background: var(--sk-bg, #4bbecb);
  border-radius: 24px;
  padding: 1.6rem 1.3rem 1.2rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-top: var(--sk-top, 0);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

.sk-card:hover {
  transform: translateY(-8px);
}

/* Solid card colour behind all the text, then a soft white shade (the colour mixed ~35% with white)
   along the bottom edge only, so the card never fades out to plain white */
.sk-card.blue   { --sk-bg: linear-gradient(180deg, #53A4C0 72%, #8FC4D6 100%); }
.sk-card.pink   { --sk-bg: linear-gradient(180deg, #FFA2B6 72%, #FFC3D0 100%); }
.sk-card.pink .sk-body { color: #fff; }
.sk-card.green  { --sk-bg: linear-gradient(180deg, #066168 72%, #5D989D 100%); }
.sk-card.purple { --sk-bg: linear-gradient(180deg, #1559ED 72%, #6893F3 100%); }
.sk-card.orange { --sk-bg: linear-gradient(180deg, #ED8315 72%, #F3AE67 100%); }

/* Icon circle — white semi-transparent with ring border */
.sk-ico-wrap {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  color: #fff;
  margin-bottom: 35px;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
  margin-top: 25px;
}

.sk-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #fff;
}

.sk-body {
  font-size: .78rem;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  margin-bottom: 1rem;
  flex: 1;
}

.sk-link {
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  opacity: .9;
  margin-bottom: 2.5rem;
}
.sk-link:hover { opacity: 1; color: #fff; }

/* Large faded number bottom-right of card */
.sk-num {
  position: absolute;
  bottom: -.5rem;
  right: .9rem;
  font-size: 5rem;
  font-weight: 900;
  color: #fff;
  opacity: .2;
  line-height: 1;
  letter-spacing: -3px;
  pointer-events: none;
  user-select: none;
}

/* ===================== HOW IT WORKS ===================== */
.how-section { padding: 60px 0; background: #fff; }

.how-title {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.4px;
}
.how-sub {
  color: var(--pp-muted);
  font-size: .93rem;
  line-height: 1.65;
  margin: 0;
}

/* Steps column */
.how-steps {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  overflow: visible;
}

.how-step {
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  align-items: center;
}

/* Odd: num in col1, card in col2, col3 empty */
.how-step--odd .how-num  { grid-column: 1; grid-row: 1; }
.how-step--odd .how-card { grid-column: 2; grid-row: 1; margin-left: -22px; }

/* Even: col1 empty, card in col2, num in col3 */
.how-step--even .how-card { grid-column: 2; grid-row: 1; }
.how-step--even .how-num  { grid-column: 3; grid-row: 1; text-align: center; }

/* Large faded number */
.how-num {
  font-size: 6.5rem;
  font-weight: 900;
  color: #dde1ee;
  line-height: 1;
  user-select: none;
  letter-spacing: -4px;
  position: relative;
  z-index: 0;
}

/* Card base */
.how-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  border: 1px solid rgba(16,22,34,.07);
  border-radius: 16px;
  padding: .95rem 1.2rem;
  box-shadow: 0 2px 18px -6px rgba(16,22,34,.1);
  transition: box-shadow .22s ease, transform .22s ease;
  min-height: 64px;
  position: relative;
  z-index: 1;
}
.how-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(47,85,255,.15);
}

/* Expanded (step 01) card */
.how-card--active {
  align-items: flex-start;
  padding: 1.15rem 1.3rem;
  box-shadow: 0 4px 22px -8px rgba(47,85,255,.18);
  border-color: rgba(47,85,255,.1);
}
.how-card--active .how-ico { margin-top: .1rem; }

/* Coloured icon circle */
.how-ico {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ico-bg, #eef0ff);
  color: var(--ico-clr, #5c6ef8);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.how-card-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--pp-ink);
  margin: 0;
  line-height: 1.3;
}
.how-card-body {
  font-size: .8rem;
  color: var(--pp-muted);
  line-height: 1.6;
  margin: .4rem 0 0;
}

/* Image collage */
.how-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: .9rem;
  align-items: start;
}
.how-img { border-radius: 18px; overflow: hidden; }
.how-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.how-img-1 { height: 280px; align-self: center; }
.how-img-2 { height: 380px; }

/* Floating badge */
.how-badge {
  position: absolute;
  bottom: 18px;
  left: 8px;
  background: #fff;
  border-radius: 14px;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: 0 10px 30px -10px rgba(16,22,34,.22);
  animation: floatCard 3.4s ease-in-out infinite;
}
.how-badge strong { display: block; font-size: .95rem; font-weight: 800; color: var(--pp-ink); line-height: 1; }
.how-badge small  { color: var(--pp-muted); font-size: .72rem; }
.how-badge-avatars { display: flex; }
.how-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-left: -8px;
}
.how-avatar:first-child { margin-left: 0; }

/* ===================== Responsive ===================== */
@media (max-width: 991.98px) {
  .navbar-nav { text-align: center; }
  .btn-sign-in { width: 100%; }
  .hero-sub { max-width: 100%; }
  .hero-visual { margin-top: 1rem; }
  .stat-courses { left: 2%; }
  .stat-tutors  { right: 2%; }

  /* Larger touch targets for collapsed nav links */
  .navbar-nav .nav-link {
    padding: .75rem .9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Neutralize the default mobile-browser tap/focus highlight on every
     tappable control in the collapsed nav, so only our own active/open
     styling shows (see .ma-header below for the specific bug this fixes). */
  .navbar-nav .nav-link,
  .mega-toggle,
  .mega-pill,
  .mega-card {
    -webkit-tap-highlight-color: transparent;
  }
  .mega-toggle:focus,
  .mega-toggle:focus-visible { outline: none; }
  /* The collapsed nav becomes a full-height overlay panel anchored right
     below the fixed header, with its own independent scroll region — this
     is what fixes the old "opens below and gets clipped, can't scroll to
     see the rest of the menu" problem: no matter how much the Courses
     accordion expands, it scrolls inside this panel, which always spans
     the full remaining viewport height. --header-h is kept in sync with
     the real header height by JS (common.js), so this stays correct even
     if the header's height ever changes (logo size, font, etc).

     Open/close is opacity + transform only — the box itself is ALWAYS
     full height, in both states. This is what makes the transition
     smooth: there is nothing else to animate (no height/max-height
     changing, no Bootstrap collapse height-step), so there's no jump or
     snap partway through, just one continuous fade + slide.
     #mainNav is no longer wired to Bootstrap's collapse plugin (no
     data-bs-toggle/data-bs-target on the button, see header.php) —
     common.js toggles `.nav-open` directly, which is what these rules key
     off. The ID selector is needed to reliably out-rank Bootstrap's own
     `.collapse:not(.show) { display: none }`. */
  #mainNav.navbar-collapse {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100dvh - var(--header-h));
    margin: 0;
    padding: 1rem 1rem 1.25rem;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;         /* safety net: never let inner content push page into horizontal scroll */
    box-shadow: 0 -8px 0 0 #fff, 0 24px 48px -28px rgba(16, 22, 34, .35);
    z-index: 45;                /* below .site-header (z-index 50), above page content */
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
  }
  #mainNav.navbar-collapse.nav-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .32s ease, transform .32s ease;
  }

  /* While the overlay is open, lock the page behind it so the only thing
     that scrolls is the nav itself (JS toggles this on <body>). */
  body.mobile-nav-open { overflow: hidden; }

  /* Fix: flex/grid items refuse to shrink below their text content's width by
     default (min-width:auto), which pushed mega-tab/mega-card text past the
     viewport edge and caused the whole mobile menu to overflow horizontally. */
  .mega-accordion,
  .ma-item,
  .ma-header,
  .mega-card { width: 100%; min-width: 0; }
  .mega-card {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .mega-card .mc-title { white-space: normal; }
  .mega-promo { min-width: 0; }
  .mega-promo p { overflow-wrap: break-word; }

  /* Bootstrap dropdowns (Compare Exams / Resources) inline instead of floating */
  .navbar-nav .dropdown-menu {
    position: static;
    box-shadow: none;
    width: 100%;
    text-align: center;
    background: var(--pp-soft, #f5f7ff);
    margin-top: .25rem;
  }
  .navbar-nav .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mega menu is collapsed by default and only opens when "Courses" is
     tapped (JS toggles .mega-open on the parent <li class="has-mega">).
     :focus-within is intentionally NOT used to show/hide on mobile/tablet
     (that caused it to always appear open). The selector is repeated here
     to match/beat the desktop ".has-mega:focus-within .mega-menu" rule's
     specificity — otherwise, tapping an accordion button inside .mega-menu
     triggers :focus-within on .has-mega, and that higher-specificity
     desktop rule wins and re-applies its translateX(-50%) transform,
     shifting the whole mobile menu sideways off-screen. */
  .mega-menu,
  .has-mega:focus-within .mega-menu {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    padding-top: 0;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .has-mega.mega-open .mega-menu {
    display: block;
    padding-top: .5rem;
  }
  .mega-toggle .chev { transition: transform .25s ease; }
  .has-mega.mega-open .mega-toggle .chev { transform: rotate(180deg); }
  .has-mega.mega-open .mega-toggle { color: var(--pp-blue); }
  .has-mega:hover .mega-toggle .chev { transform: none; }

  /* The desktop split-column layout never renders on mobile/tablet — the
     accordion below (.mega-accordion) is the only mobile/tablet layout. */
  .mega-inner { display: none; }
  .mega-accordion { display: block; }

  /* ---- Mobile/tablet mega-menu: stacked accordion ----
     Each exam is a full-width row; tapping it expands its courses inline,
     directly beneath that row, and collapses whichever other exam was
     open. This replaces the old tabs+side-panel pattern, which required
     switching panels out of view and auto-scrolling to follow — here
     everything stays in normal document flow inside the scrollable
     overlay above, so the user can always just scroll to see it all. */
  .mega-accordion { border: 1px solid rgba(16, 22, 34, .08); border-radius: 12px; overflow: hidden; margin-bottom: .5rem; }
  .ma-item { border-bottom: 1px solid rgba(16, 22, 34, .08); background: #fff; }
  .ma-item:last-child { border-bottom: 0; }

  /* Explicit focus/active states — without these, unstyled buttons can
     pick up a browser/OS default "pressed" fill (seen as a solid opaque
     blue block covering the whole row on some mobile browsers) instead of
     our intended light-blue "open" tint. -webkit-tap-highlight-color kills
     the flash-on-tap highlight some mobile browsers add on top of that. */
  .ma-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .7rem;
    text-align: left;
    background: transparent;
    border: 0;
    padding: .75rem .8rem;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ma-item.ma-open .ma-header,
  .ma-header:focus,
  .ma-header:focus-visible,
  .ma-header:active {
    background: #eef2ff;
    outline: none;
  }
  .ma-ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    background: #e7ecff;
  }
  .ma-text { flex: 1 1 auto; min-width: 0; }
  .ma-text strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pp-ink);
  }
  .ma-item.ma-open .ma-text strong { color: var(--pp-blue); }
  .ma-text small {
    display: block;
    color: var(--pp-muted);
    font-size: .72rem;
    line-height: 1.35;
    margin-top: .15rem;
    overflow-wrap: break-word;
  }
  .ma-chevron {
    flex-shrink: 0;
    font-size: .8rem;
    color: var(--pp-muted);
    transition: transform .2s ease, color .2s ease;
  }
  .ma-item.ma-open .ma-chevron { transform: rotate(180deg); color: var(--pp-blue); }

  .ma-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .ma-panel-inner {
    padding: 1rem .9rem 1.25rem;
    border-top: 1px solid rgba(16, 22, 34, .07);
  }
  .ma-panel-inner .mega-pills { margin-bottom: 1rem; }

  /* Reuses the same .mega-pills/.mega-pill/.mega-grid/.mega-card/.mega-promo
     look as desktop — only the grid column count needs a mobile override. */
  .ma-panel-inner .mega-grid { grid-template-columns: repeat(2, 1fr); }
  .ma-panel-inner .mega-promo { grid-column: span 2; flex-direction: column; align-items: flex-start; }
  .ma-panel-inner .mega-card { min-height: 44px; }

  /* Hide a variant-pill row when it only has a single, already-implied option */
  .mega-pills:has(> .mega-pill:only-child) { display: none; }
}

/* ===================== Mobile-only heading alignment consistency =====================
   A number of "two-column text + visual" sections (hero, testimonials header, skill
   cards, mission & vision, blog headings, contact info, get-in-touch, partner-with-us,
   AI-scoring-advantage, book-a-free-demo) never had a responsive override, so their
   heading/intro text stayed left-aligned (plain block flow) even once the layout
   collapses to a single stacked column on phones — sitting right next to the many
   other sections that already center their heading+intro (Why Choose, Pricing, FAQ,
   CTA, "Section-header" pattern, etc.), which is what read as "no consistent pattern".
   This brings those into the same centered convention, on phones only (max-width:
   767.98px — true mobile, not the 768–991px tablet band, which keeps its original
   two-column left-aligned look, same as desktop).
   Only the heading/intro text itself is centered — nested icon+text feature rows
   (.pwu-feature, .asa-feat), the CF7 contact form, and pill/badge grids are left
   exactly as they render today: centering multi-line body copy next to an icon, or
   form fields, reads worse than left-aligned and isn't part of what was reported. */
@media (max-width: 767.98px) {
  /* Scoped to ".hero .hero-title"/".hero .hero-sub" (the home hero section),
     not the bare class — ".hero-card .hero-title" is an unrelated icon+title
     component reused on other pages and must not be touched here. */
  .hero .hero-title,
  .hero .hero-sub,
  .testi-title,
  .testi-sub,
  .skill-cards-title,
  .skill-cards-sub,
  .mv-title,
  .mv-intro,
  .blg-heading,
  .ci-heading,
  .git-heading,
  .git-sub,
  .pwu-heading,
  .pwu-sub,
  .asa-title,
  .asa-desc,
  .bfd-heading,
  .bfd-sub,
  .articles-title,
  .articles-sub {
    text-align: center;
  }

  /* These three carry their own max-width narrower than the column, so centering
     their text alone isn't enough — the box itself needs to be re-centered too. */
  .hero .hero-sub,
  .testi-sub,
  .git-sub {
    margin-inline: auto;
  }

  /* Small standalone marker/badge above a heading: switch from inline-block
     (positioned by the old left-aligned flow) to a centered block so it lines
     up with the now-centered heading beneath it. */
  .hero-dot,
  .asa-badge {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }

  /* Hero's primary/secondary CTA buttons: center the group under the now-centered
     heading instead of hugging the left edge (this is a flex row, so text-align
     on an ancestor wouldn't affect it — needs justify-content directly). */
  .hero-cta-row {
    justify-content: center;
  }
}

@media (max-width: 359.98px) {
  /* Very small phones: single-column mega menu grid */
  .mega-grid,
  .ma-panel-inner .mega-grid { grid-template-columns: 1fr; }
  .mega-promo,
  .ma-panel-inner .mega-promo { grid-column: span 1; }
}

@media (max-width: 575.98px) {
    
    section.feature-cards-section
 {
    padding-top: 3rem;
    padding-left: 15px;
    padding-right: 15px;
}
  .mega-grid,
  .ma-panel-inner .mega-grid { grid-template-columns: 1fr 1fr; }
  .mega-promo,
  .ma-panel-inner .mega-promo { grid-column: span 2; }
  .whyMockTest-sec {
    padding-top: 3rem;
    }
    .academicCore {
        margin-top: 3rem;
    }
        .compare-row {
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
    }
    .need-to-succeed {
        padding: 3rem 0 0px !important;
    }
    .scoring-section {
        padding: 3rem 15px 0px !important;
    }
    
    .scores-section {
        padding: 3rem 0 0px !important;
    }

  /* smaller decorative circles on phones */
  .circle-left  { width: 300px; }
  .circle-right { width: 280px; right: -110px; bottom: -90px; }
}

@media (max-width: 575.98px) {
  .stat-card small { font-size: .68rem; }
  .stat-courses { top: 26%; }
}

/* ===================== WHY CHOOSE US ===================== */
.why-section {
  padding: 60px 0;
  background: #fff;
}

.why-title {
  text-align: center;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--pp-ink);
  margin-bottom: .25rem;
}

.why-sub {
  text-align: center;
  font-size: .92rem;
  color: var(--pp-muted);
  line-height: 1.75;
  max-width: 520px;
  margin: .5rem auto 0;
}

.why-item {
  text-align: center;
  padding: 1.75rem 1rem;
  border-radius: 20px;
  background: #fff;
  border: 1.5px solid #edf0f9;
  box-shadow: 0 8px 24px -16px rgba(16, 22, 34, .12);
  transition: background .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .25s ease;
  cursor: default;
}

.why-item:hover {
  background: #fff;
  border-color: rgba(21, 89, 237, .18);
  box-shadow: 0 16px 48px -14px rgba(21, 89, 237, .22);
  transform: translateY(-6px);
}

.why-ico {
  display: inline-grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 18px;
  background: var(--wi-bg, #f4f6fb);
  color: var(--wi-clr, var(--pp-blue));
  font-size: 1.8rem;
  margin-bottom: 40px;
  overflow: hidden;
}
.why-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-item-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--pp-ink);
  margin-bottom: .4rem;
  transition: color .25s ease;
}
.why-item:hover .why-item-title {
  color: var(--pp-blue);
}

.why-item-body {
  font-size: .84rem;
  color: var(--pp-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 220px;
  margin-inline: auto;
}

@media (max-width: 991.98px) {
  /* Why Choose Us: the fixed 40px icon gap and generous card padding were
     sized for a roomy 4-column desktop grid — they look bloated once
     cards drop to 1–2 columns, leaving huge gaps between icon/title/body. */
  .why-section { padding: 3rem 0 1rem; }
  .why-item { padding: 1.1rem 1rem; }
  .why-ico { margin-bottom: 1rem; }
}

@media (max-width: 575.98px) {
  /* Single column: switch each item to a compact horizontal row (icon
     left, text right) instead of a tall centered card — reads as a
     scannable feature list instead of a stack of mostly-empty panels,
     and uses roughly half the vertical space of the old layout. */
  .why-item {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 1rem;
    padding: 1rem;
    border-radius: 16px;
    border-color: rgba(16, 22, 34, .08);
  }
  .why-item:hover { transform: none; }
  .why-ico {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .why-item-title { font-size: 1rem; margin-bottom: .25rem; }
  .why-item-body { max-width: none; margin-inline: 0; }
}

/* ===================== TESTIMONIALS SECTION ===================== */
.testi-section {
  padding: 60px 0;
  background: var(--pp-soft);
}

.testi-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.3px;
  margin-bottom: .5rem;
}

.testi-sub {
  font-size: .9rem;
  color: var(--pp-muted);
  line-height: 1.7;
  max-width: 420px;
  margin: 0;
}

/* Nav buttons */
.testi-nav {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(47,85,255,.25);
  background: #6293FF;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1rem;
  cursor: pointer;
  padding: 0px;
  transition: background .2s, color .2s;
}
.testi-nav--active,
.testi-nav:hover {
  background: var(--pp-blue);
  color: #fff;
  border-color: var(--pp-blue);
}

@media (max-width: 991.98px) {
  /* On tablet the header row also stacks (heading/sub full-width, then
     the prev/next controls on their own line) — center them instead of
     leaving them left-hugging and disconnected from the card below. */
  .testi-header-actions { justify-content: center; margin-top: 1.25rem; }
}

/* Slider viewport */
.testi-viewport {
  overflow: hidden;
  cursor: grab;
}
.testi-viewport:active { cursor: grabbing; }

.testi-track {
  display: flex;
  gap: 1.25rem;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Individual card */
.testi-card {
  flex: 0 0 calc((100% - 3 * 1.25rem) / 3.2);
  background: #fff;
  border: 1px solid rgba(16,22,34,.07);
  border-radius: 18px;
  padding: 1.8rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .5em;
  box-shadow: 0 2px 16px -8px rgba(16,22,34,.08);
  transition: box-shadow .22s ease, transform .22s ease;
}
.testi-card:hover {
  box-shadow: 0 12px 32px -12px rgba(47,85,255,.15);
  transform: translateY(-4px);
}

/* Big quote mark */
.testi-quote {
  font-size: 3.5rem;
  line-height: .8;
  font-weight: 900;
  color: var(--pp-blue);
  font-family: Georgia, serif;
  display: block;
}

.testi-text {
  font-size: .84rem;
  color: var(--pp-muted);
  line-height: 1.75;
  margin: 0;
  flex: 1;
}

/* Author row */
.testi-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
}

.testi-avatar {
  width: 42px !important;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* CSS initials avatar (used when no image is available) */
.testi-avatar-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--av-bg, #e0e7ff);
  color: var(--av-clr, #4f46e5);
  font-size: .95rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.testi-name {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--pp-ink);
  line-height: 1.2;
}

.testi-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .6rem;
  border-radius: 20px;
  margin-top: .2rem;
}
.testi-badge--teacher  { background: #d1fae5; color: #065f46; }
.testi-badge--institute { background: #dbeafe; color: #1d4ed8; }
.testi-badge--student  { background: #d1fae5; color: #065f46; }


/* ===================== PRICING SECTION ===================== */
.pricing-section {
  padding: 60px 0;
  background: var(--pp-bg);
}

.pricing-segment-label {
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-blue);
  margin-bottom: 1rem;
}

/* Segment tabs — underline style */
.pricing-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid #e5e9f0;
  padding: 0;
  width: fit-content;
  margin: 0 auto 2.5rem;
}

.pricing-tab {
  border: none;
  border-bottom: 2.5px solid transparent;
  background: transparent;
  padding: .65rem 2rem;
  font-size: .95rem;
  font-weight: 600;
  color: #9ca3af;
  cursor: pointer;
  text-align: center;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}

.pricing-tab.active {
  color: var(--pp-blue);
  border-bottom-color: var(--pp-blue);
  background: transparent;
}
.pricing-tab:hover {
  color: #9ca3af !important;
  border-bottom-color: 2.5px solid transparent !important;
  background: transparent;
  border-color:#9ca3af !important;
}

/* Heading */
.pricing-title {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: .75rem;
}

.pricing-sub {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  color: #6b7280;
  font-size: .95rem;
  line-height: 1.7;
}

/* Billing toggle */
.pricing-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  background: #fff;
  border: 1.5px solid #d0d8f0;
  border-radius: 100px;
  padding: 4px;
  margin: 0 auto 2.5rem;
  /* fixed width so the container never shifts between Monthly/Yearly states */
  width: 240px;
}

.ptog-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: .45rem 1rem;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 600;
  color: #9ca3af;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
  text-align: center;
  white-space: nowrap;
}

.ptog-btn.active {
  background: var(--pp-blue);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(21, 89, 237, .45);
}

/* Cards row wrapper — light lavender background tray */
.pricing-cards {
  background: #EFF7FF;
  border-radius: 24px;
  padding: 2rem 1.5rem;
  align-items: center !important;
}

/* Base card */
.p-card {
  background: transparent;
  border: none;
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.5rem;
  position: relative;
  transition: box-shadow .3s, transform .3s, background .3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.p-card:not(.p-card--featured):hover {
  background: #1c3282;
  box-shadow: 0 20px 50px -10px rgba(28, 50, 130, .45);
  transform: translateY(-6px);
}

/* Hover — flip text colours for non-featured cards */
.p-card:not(.p-card--featured):hover .p-price,
.p-card:not(.p-card--featured):hover .p-name,
.p-card:not(.p-card--featured):hover .p-features li {
  color: #fff;
}

.p-card:not(.p-card--featured):hover .p-period {
  color: #a5b4fc;
}

.p-card:not(.p-card--featured):hover .p-badge {
  background: rgba(255,255,255,.15);
  color: #fff;
}

.p-card:not(.p-card--featured):hover .p-features li {
  border-bottom-color: rgba(255,255,255,.1);
}

.p-card:not(.p-card--featured):hover .p-btn {
  background: var(--pp-blue);
  color: #fff;
  border-color: var(--pp-blue);
}

/* Featured card */
.p-card.p-card--featured {
  background: #1c3282 !important;
  border: none;
  color: #fff;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

/* Most popular badge — centered top */
.p-popular {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #22c55e;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28rem 1rem;
  border-radius: 20px;
  white-space: nowrap;
}

/* Price */
.p-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 1rem;
  line-height: 1.1;
}

.p-card--featured .p-price {
  color: #fff;
}

.p-period {
  font-size: .82rem;
  font-weight: 500;
  color: #6b7280;
}

/* Academic badge */
.p-badge {
  display: inline-block;
  align-self: flex-start;
  background: #1c3282;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .22rem .85rem;
  border-radius: 6px;
  margin-bottom: .85rem;
}

.p-badge--light {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* Plan name */
.p-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 1rem;
}

.p-card--featured .p-name {
  color: #fff;
}

/* Feature list */
.p-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}

.p-features li {
  font-size: .88rem;
  color: #374151;
  padding: .38rem 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid #e5e9f5;
}

.p-features li:last-child {
  border-bottom: none;
}

.p-card--featured .p-features li {
  color: #c7d3f5;
  border-bottom-color: rgba(255,255,255,.09);
}

.p-features .bi-check-circle-fill {
  color: #22c55e;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Buy button — light blue pill for normal cards */
.p-btn {
  border: none;
  color: var(--pp-blue);
  background: #dde5ff;
  border-radius: 100px;
  font-weight: 700;
  font-size: .92rem;
  padding: .65rem 0;
  transition: background .2s, color .2s;
  margin-top: auto;
  text-align: center;
  text-decoration: none;
  display: block;
}

.p-btn:hover {
  background: var(--pp-blue);
  color: #fff;
}

/* Featured buy button — solid blue */
.p-btn--featured {
  background: var(--pp-blue);
  color: #fff;
}

.p-btn--featured:hover {
  background: var(--pp-blue-dark);
  color: #fff;
}

/* ===================== COMPARE PLANS ===================== */
.btn-compare-plans {
  background: var(--pp-blue);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: .7rem 2rem;
  border-radius: 100px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background .2s, transform .2s;
}
.btn-compare-plans:hover {
  background: var(--pp-blue-dark);
  color: #fff;
  transform: translateY(-2px);
}
.btn-compare-plans i {
  transition: transform .3s;
}

/* Collapsible compare wrap */
.compare-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .6s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  opacity: 0;
  margin-top: 0;
}
.compare-wrap--open {
  max-height: 1200px;
  opacity: 1;
  margin-top: 3rem;
}

.compare-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 2.5rem 1rem 0;
  background: linear-gradient(180deg, #eef2ff 0%, #fff 100%);
  border-radius: 20px 20px 0 0;
}
.compare-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
}
.compare-sub {
  color: #6b7280;
  font-size: .9rem;
  max-width: 560px;
  margin: .5rem auto 0;
}

.compare-table-wrap {
  overflow-x: auto;
  border-radius: 0 0 20px 20px;
  border: 1px solid #e8ecf5;
  border-top: none;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.compare-table thead tr {
  background: #fff;
}
.compare-table thead th {
  padding: 1.2rem 1rem;
  text-align: center;
  border-bottom: 1px solid #e8ecf5;
  vertical-align: bottom;
}
.compare-table thead th.ct-feature-col {
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #6b7280;
  text-transform: uppercase;
  width: 220px;
}
.ct-plan-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: .25rem;
}
.ct-name--blue { color: #2f55ff; }
.ct-name--red  { color: #ef4444; }
.ct-name--gold { color: #92400e; }
.ct-plan-sub {
  font-size: .78rem;
  color: #9ca3af;
  margin-bottom: .6rem;
}
.ct-plan-bar {
  height: 3px;
  border-radius: 3px;
  width: 60%;
  margin: 0 auto;
}
.ct-bar--gray { background: #d1d5db; }
.ct-bar--blue { background: #2f55ff; }
.ct-bar--red  { background: #ef4444; }
.ct-bar--gold { background: #d97706; }

/* Body rows */
.compare-table tbody td {
  padding: .85rem 1rem;
  text-align: center;
  border-bottom: 1px solid #f0f3fa;
  color: var(--pp-ink);
}
.compare-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: #374151;
}
.compare-table tbody tr:hover td { background: #fafbff; }

/* Group header rows */
.ct-group-row td {
  background: #E5EEFF !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280 !important;
  padding: .6rem 1rem !important;
  border-bottom: 1px solid #e8ecf5 !important;
}

/* Value colours */
.ct-val--blue { color: #2f55ff; font-weight: 700; }
.ct-val--red  { color: #ef4444; font-weight: 700; }
.ct-val--gold { color: #d97706; font-weight: 700; }
.ct-val--bold { font-weight: 800; }

/* Check / cross icons */
.ct-yes { color: #2f55ff; font-size: 1.1rem; }
.ct-no  { color: #ef4444; font-size: 1.1rem; }

/* NEW badge */
.ct-new-badge {
  display: inline-block;
  background: #22c55e;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 1px 6px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: .3rem;
}

/* CTA row */
.ct-cta-row td {
  padding: 1.2rem 1rem !important;
  border-bottom: none !important;
  background: #fff !important;
}
.ct-btn {
  font-size: .82rem;
  font-weight: 700;
  padding: .55rem 1.1rem;
  border-radius: 10px;
  white-space: nowrap;
}
.ct-btn--gray { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.ct-btn--gray:hover { background: #e5e7eb; color: #111; }
.ct-btn--blue { background: #2f55ff; color: #fff; }
.ct-btn--blue:hover { background: var(--pp-blue-dark); color: #fff; }
.ct-btn--red  { background: #ef4444; color: #fff; }
.ct-btn--red:hover  { background: #dc2626; color: #fff; }
.ct-btn--gold { background: #92400e; color: #fff; }
.ct-btn--gold:hover { background: #78350f; color: #fff; }

/* ===================== LATEST ARTICLES SECTION ===================== */
.articles-section {
  padding: 60px 0;
  background: #fff;
}
.cta-section.home-cta-section
 {
    padding-top: 60px;
}
/* Header */
.articles-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}

.articles-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: .4rem;
  line-height: 1.2;
}

.articles-sub {
  color: #6b7280;
  font-size: .95rem;
  margin: 0;
}

.articles-see-all {
  white-space: nowrap;
  border: 1.5px solid #d0d8f0;
  color: var(--pp-ink);
  background: #fff;
  border-radius: 100px;
  font-weight: 600;
  font-size: .88rem;
  padding: .55rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.articles-see-all::after {
  content: '→';
  font-size: 1rem;
  transition: transform .2s;
}

.articles-see-all:hover {
  border-color: var(--pp-blue);
  color: #fff;
  background: var(--pp-blue);
  box-shadow: 0 4px 16px rgba(47,85,255,.3);
}

.articles-see-all:hover::after {
  transform: translateX(3px);
}

/* Card — works as <a> tag */
.art-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8ecf5;
  box-shadow: 0 10px 30px -16px rgba(16,22,34,.16);
  transition: box-shadow .25s, transform .25s, border-color .25s;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.art-card:hover {
  box-shadow: 0 22px 46px -14px rgba(47, 85, 255, .26);
  transform: translateY(-6px);
  color: inherit;
  text-decoration: none;
  border-color: rgba(47,85,255,.25);
}

/* Meta row */
.art-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid #eef1f8;
}

.art-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e0e7ff;
  color: var(--pp-blue);
  display: grid;
  place-items: center;
  font-size: .95rem;
  flex-shrink: 0;
}

.art-author-info {
  display: flex;
  flex-direction: column;
  gap: .05rem;
}

.art-author-name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--pp-ink);
  line-height: 1.2;
}

.art-time {
  font-size: .68rem;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: .04em;
}

.art-time .bi { margin-right: .2rem; }

.art-meta-clock {
  color: #c4cad8;
  font-size: .95rem;
}

/* Image area */
.art-img-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.art-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: transform .3s ease;
}
.art-card:hover .art-img {
  transform: scale(1.03);
}

/* Placeholder gradient backgrounds per card */
.art-img--1 {
    background: url(../images/article-card1.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
}

.art-img--2 {
    background: url(../images/article-card2.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
}

.art-img--3 {
    background: url(../images/article-card3.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
}

/* Overlay label at bottom of image */
.art-img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1rem .75rem;
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Card title */
.art-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pp-ink);
  margin: 0;
  padding: .9rem 1rem 1.1rem;
  line-height: 1.45;
  border-radius: 15px;
  text-decoration: none;
 
}

/* ===================== SINGLE BLOG HERO ===================== */
.cta-section.single-blog-cta {
    padding: 40px 0 40px;
}
.sb-hero {
  background: #f4f6fb;
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.sb-hero::before,
.sb-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(47,85,255,.08);
  pointer-events: none;
}
.sb-hero::before { width: 420px; height: 420px; top: -160px; left: -120px; }
.sb-hero::after  { width: 300px; height: 300px; bottom: -100px; right: -80px; }

.sb-hero-inner { max-width: 840px; margin: 0 auto; }

.sb-tag {
  display: inline-block;
  background: var(--pp-blue);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .3rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}

.sb-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.35;
  margin-bottom: 1.5rem;
  text-decoration: underline;
  text-decoration-color: rgba(47,85,255,.25);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration: none;
}

.sb-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: #6b7280;
  justify-content: center;
}
.sb-avatar {
  font-size: 1.6rem;
  color: #9ca3af;
  line-height: 1;
}
.sb-author { font-weight: 600; color: var(--pp-ink); }
.sb-sep    { color: #d1d5db; }
.sb-date   { color: #9ca3af; }

/* ===================== SINGLE BLOG BODY ===================== */
.sb-body { padding: 40px 0 40px; background: #fff; }

/* Three-column layout: TOC | Article | Popular Posts */
.sb-layout { display: grid; grid-template-columns: 220px 1fr 240px; gap: 1rem; align-items: start; }

/* Table of Contents */
.sb-toc { position: sticky; top: 90px; }
.sb-toc-box { border: 1.5px solid #e8ecf5; border-radius: 16px; padding: 1.1rem 1.2rem; background: #fff; }
.sb-toc-label { display: block; text-align: center; font-size: .82rem; font-weight: 700; color: var(--pp-ink); background: #f3f4f6; border-radius: 8px; padding: .45rem 1rem; margin-bottom: 1rem; }
.sb-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.sb-toc-list li a { font-size: .8rem; line-height: 1.45; text-decoration: none; color: #9ca3af; display: block; transition: color .2s; }
.sb-toc-list li.active a { color: var(--pp-ink); font-weight: 700; }
.sb-toc-list li a:hover { color: var(--pp-blue); }

/* Article prose */
.sb-article p { font-size: .97rem; line-height: 1.85; color: #374151; margin-bottom: 1.35rem; }
.sb-article h2 { font-size: 1.2rem; font-weight: 800; color: var(--pp-ink); margin: 2rem 0 .75rem; }
.sb-article h3 { font-size: 1.05rem; font-weight: 700; color: var(--pp-ink); margin: 1.5rem 0 .6rem; }
.sb-article-img { border-radius: 16px; overflow: hidden; margin: 0 0 1.75rem; }
.sb-article-img img { width: 100%; height: 380px; object-fit: cover; display: block; }
.sb-article-img--mid { margin: 1.5rem 0; }
.sb-article-img--mid img { height: 300px; }

/* Pullquote */
.sb-quote { border: 1.5px solid #e8ecf5; border-radius: 14px; padding: 1.25rem 1.5rem; margin: 1.75rem 0; font-size: .95rem; font-style: italic; color: #374151; line-height: 1.75; }

/* Advertisement placeholder */
.sb-ad-box { border: 1.5px solid #e8ecf5; border-radius: 14px; padding: 1.1rem; text-align: center; margin: 1.5rem 0; background: #fafafa; }
.sb-ad-label { display: block; font-size: .7rem; color: #9ca3af; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35rem; }
.sb-ad-title { font-size: 1rem; font-weight: 700; color: var(--pp-ink); margin: 0 0 .2rem; }
.sb-ad-size  { font-size: .78rem; color: #9ca3af; }

/* Prev / Next nav */
.sb-post-nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-top: 1.5px solid #e8ecf5; }
.sb-nav-btn { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--pp-ink); text-decoration: none; padding: .55rem 1.1rem; border: 1.5px solid #e8ecf5; border-radius: 100px; transition: all .2s; }
.sb-nav-btn:hover { background: var(--pp-blue); color: #fff; border-color: var(--pp-blue); }

/* ── SIDEBAR ── */
.sb-sidebar { display: flex; flex-direction: column; gap: 1.75rem; }

/* Stay enrolled CTA */
.sb-cta-card { background: var(--pp-blue); border-radius: 20px; padding: 1.6rem 1.4rem; color: #fff; text-align: center; }
.sb-cta-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .5rem; }
.sb-cta-card p  { font-size: .82rem; opacity: .88; margin-bottom: 1.1rem; }
.sb-cta-card .sb-cta-btn { display: inline-block; background: #fff; color: var(--pp-blue); font-size: .82rem; font-weight: 700; padding: .55rem 1.4rem; border-radius: 100px; text-decoration: none; transition: opacity .2s; transform: none !important; box-shadow: none !important; }
.sb-cta-card .sb-cta-btn:hover { opacity: .88; color: var(--pp-blue); transform: none !important; }

/* Popular posts */
.sb-recent h4 { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; margin-bottom: 1rem; }
.sb-recent-list { display: flex; flex-direction: column; }
.sb-recent-item { display: flex; gap: .85rem; align-items: flex-start; text-decoration: none; padding: .9rem 0; border-bottom: 1px solid #e8ecf5; }
.sb-recent-item:last-child { border-bottom: none; }
.sb-recent-thumb { width: 72px; height: 60px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.sb-recent-info { flex: 1; }
.sb-recent-tag { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-blue); margin-bottom: .25rem; }
.sb-recent-info strong { display: block; font-size: .82rem; font-weight: 700; color: var(--pp-ink); line-height: 1.4; }
.sb-recent-item:hover .sb-recent-info strong { color: var(--pp-blue); }

/* Author card */
.sb-author-card { border: 1.5px solid #e8ecf5; border-radius: 18px; padding: 1.25rem; text-align: center; }
.sb-author-card h4 { font-size: .9rem; font-weight: 800; color: var(--pp-ink); margin: .6rem 0 .2rem; }
.sb-author-card p  { font-size: .78rem; color: #6b7280; margin: 0; }
.sb-author-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #e8ecf5; margin: 0 auto .1rem; display: block; }
.sb-author-socials { display: flex; justify-content: center; gap: .5rem; margin-top: .85rem; }
.sb-author-social { width: 32px; height: 32px; border-radius: 50%; background: #f3f4f6; display: inline-flex; align-items: center; justify-content: center; color: #6b7280; font-size: .8rem; text-decoration: none; transition: background .2s, color .2s; }
.sb-author-social:hover { background: var(--pp-blue); color: #fff; }

@media (max-width: 1100px) {
  .sb-layout { grid-template-columns: 1fr 260px; }
  .sb-toc { display: none; }
}
@media (max-width: 768px) {
    .keySkill {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    .evaluationReport {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
  .sb-layout { grid-template-columns: 1fr; }
  .graduation-cap.bottomSide {
        display: none;
    }
    section.countries {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    section.position-relative-wrap.accordingBlock {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
  
}

/* ===================== BLOG SECTION ===================== */
.blog-section { padding: 60px 0; background: #fff; }

.blg-heading {
  font-size: 24px;
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 1.25rem;
}
.blg-heading--latest { margin-top: 7rem; }

/* Tag */
.blg-tag {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: .35rem 1rem;
  border-radius: 6px;
  margin-bottom: .6rem;
}
.blg-tag--blue  { background: #edf0fb; color: #4f6ef7; }
.blg-tag--green { background: #dcfce7; color: #16a34a; }
.blg-tag--teal  { background: #ccfbf1; color: #0d9488; }
.blg-tag--red   { background: #fee2e2; color: #dc2626; }
.blg-tag--orange{ background: #ffedd5; color: #ea580c; }

/* Meta row */
.blg-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: #9ca3af;
  flex-wrap: wrap;
}
.blg-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pp-blue);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.blg-author-name { font-weight: 600; color: #374151; font-size: .78rem; }
.blg-dot         { color: #d1d5db; }
.blg-date        { font-size: .75rem; }

/* ── Featured card ── */
.blg-featured {
  display: block;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  position: relative;
  margin-bottom: .5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  transition: transform .22s ease, box-shadow .22s ease;
}
.blg-featured:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,0,0,.18); }

.blg-featured-img {
  height: 380px;
  background-size: cover;
  background-position: center top;
  position: relative;
  border-radius: 20px;
}
.blg-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,.08) 40%, rgba(0,0,0,.28) 100%);
}

/* White content box floating over bottom-left of image */
.blg-featured-content {
  position: absolute;
  bottom: -3.25rem;
  left: 3.75rem;
  width: 52%;
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem 1.4rem 1.1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
  z-index: 2;
}
.blg-featured-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.45;
  margin: .5rem 0 .85rem;
}
.blg-featured .blg-tag { background: #edf0fb; color: #4f6ef7; }
.blg-featured .blg-author-name { color: #374151; }
.blg-featured .blg-date        { color: #9ca3af; }

/* ── Latest post grid — 3 columns ── */
.blg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blg-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e8ecf5;
  box-shadow: 0 10px 30px -14px rgba(16,22,34,.14);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blg-card:hover {
  transform: translateY(-8px);
  border-color: rgba(21,89,237,.25);
  box-shadow: 0 24px 46px -14px rgba(21,89,237,.28);
  color: inherit;
}

.blg-card-img {
  height: 220px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border-radius: 14px;
  margin: .75rem .75rem 0;
  box-shadow: inset 0 -40px 40px -30px rgba(0,0,0,.18);
  transition: transform .3s ease;
}
.blg-card:hover .blg-card-img {
  transform: scale(1.015);
}
.blg-card-body {
  padding: 1rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
    align-items: flex-start;
}
.blg-card-body .blg-meta {
  margin-top: auto;
  padding-top: .75rem;
  width: 100%;
  border-top: 1px solid #eef1f8;
}
.blg-card-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--pp-ink);
  margin-bottom: .85rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Avatar — larger circle in cards */
.blg-card .blg-avatar {
  width: 32px;
  height: 32px;
  font-size: .78rem;
  border-radius: 50%;
}
.blg-card .blg-author-name { font-size: .82rem; color: #374151; }
.blg-card .blg-date { font-size: .78rem; color: #9ca3af; }

/* View All Post button */
.blg-view-all {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  background: var(--pp-blue);
  border: none;
  border-radius: 100px;
  padding: .75rem 2.25rem;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 6px 20px rgba(47,85,255,.3);
}
.blg-view-all::after {
  content: '→';
  font-size: 1rem;
  transition: transform .2s;
}
.blg-view-all:hover {
  background: var(--pp-blue-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(47,85,255,.4);
}
.blg-view-all:hover::after { transform: translateX(4px); }

/* ===================== INSTITUTE FEATURES ===================== */
.if-section { padding: 60px 0; background: #fff; }

.if-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.if-row.first-grid
{
  display: flex;
  flex-direction: column;
}
.if-row.first-grid .if-card.if-card--light
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.if-row.first-grid .if-card.if-card--light > div
{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.if-row:last-child { margin-bottom: 0; }

/* Base card */
.if-card {
  border-radius: 20px;
  padding: 1.75rem 1.6rem;
  border: 1.5px solid #e8ecf5;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.if-card--light { background: #fff; }
.if-card--blue  { background: var(--pp-blue); border-color: transparent; }

.if-card-ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: #edf0fb;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--pp-blue);
  margin-bottom: .25rem;
}
.if-card-ico--white { background: rgba(255,255,255,.2); color: #fff; }

.if-card-title { font-size: 1.05rem; font-weight: 800; color: var(--pp-ink); margin: 0; }
.if-card--blue .if-card-title { color: #fff; }
.if-card-desc  { font-size: .82rem; color: #6b7280; line-height: 1.65; margin: 0; }
.if-card--blue .if-card-desc  { color: rgba(255,255,255,.8); }

/* Checklist (blue card) */
.if-checklist { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.if-checklist li { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: #fff; }
.if-checklist li i { color: #a5f3fc; font-size: .9rem; }

/* ── Dashboard Mockup ── */
.if-mockup {
  background: #f8f9ff;
  border: 1.5px solid #e8ecf5;
  border-radius: 14px;
  overflow: hidden;
  margin-top: .75rem;
  flex: 1;
}
.if-mockup-header {
  background: #fff;
  border-bottom: 1.5px solid #e8ecf5;
  padding: 1rem 1.5rem 1rem;
  text-align: center;
}
.if-mockup-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--pp-blue);
  background: #edf0fb;
  border: 1px solid #c7d0f8;
  padding: .25rem .85rem;
  border-radius: 100px;
  margin-bottom: .55rem;
}
.if-mockup-heading {
  font-size: .95rem;
  font-weight: 800;
  color: var(--pp-ink);
  margin: 0 0 .3rem;
  line-height: 1.3;
}
.if-mockup-sub { font-size: .7rem; color: #9ca3af; margin: 0; line-height: 1.55; max-width: 480px; margin-inline: auto; }

.if-mockup-ui { display: flex; height: 220px; }

/* Mock sidebar */
.if-mock-sidebar {
  width: 40px;
  background: #0f1623;
  padding: .7rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex-shrink: 0;
}
.if-mock-sb-logo { width: 22px; height: 12px; background: var(--pp-blue); border-radius: 3px; margin-bottom: .5rem; }
.if-mock-sb-item { width: 100%; height: 7px; background: rgba(255,255,255,.12); border-radius: 3px; }
.if-mock-sb-item--active { background: var(--pp-blue); }

/* Mock main */
.if-mock-main { flex: 1; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .6rem; overflow: hidden; background: #f6f8ff; }

/* Stats row — shared outer border, no gap */
.if-mock-stats { display: flex; background: #fff; border: 1px solid #e8ecf5; border-radius: 8px; overflow: hidden; }
.if-mock-stat {
  flex: 1;
  padding: .45rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .08rem;
  border-right: 1px solid #e8ecf5;
}
.if-mock-stat:last-child { border-right: none; }
.if-mock-num { font-size: .68rem; font-weight: 800; color: var(--pp-ink); }
.if-mock-lbl { font-size: .52rem; color: #9ca3af; }

.if-mock-charts { display: flex; gap: .6rem; flex: 1; overflow: hidden; }

/* Bar chart */
.if-mock-chart-left {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e8ecf5;
  padding: .5rem .5rem .3rem;
  display: flex;
  align-items: flex-end;
}
.if-mock-bar-wrap { display: flex; align-items: flex-end; gap: .22rem; height: 100%; width: 100%; }
.if-mock-bar { flex: 1; background: var(--pp-blue); border-radius: 3px 3px 0 0; min-height: 6px; }

/* Inner white-label card (right of bar chart) */
.if-mock-chart-right { flex: 1.1; }
.if-mock-inner-card {
  background: var(--pp-blue);
  border-radius: 10px;
  padding: .65rem .75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.if-mock-inner-ico { font-size: .85rem; color: rgba(255,255,255,.85); margin-bottom: .05rem; }
.if-mock-inner-card strong { font-size: .65rem; color: #fff; font-weight: 800; line-height: 1.25; }
.if-mock-inner-card p  { font-size: .55rem; color: rgba(255,255,255,.78); margin: 0 0 .2rem; line-height: 1.4; }
.if-mock-checks { display: flex; flex-direction: column; gap: .18rem; }
.if-mock-checks span { font-size: .55rem; color: rgba(255,255,255,.92); display: flex; align-items: center; gap: .25rem; font-weight: 600; }
.if-mock-checks i { font-size: .6rem; color: #93c5fd; }
.if-mock-demo-btn {
  display: none; /* hidden at this scale */
}

/* ── LMS Card: side-by-side internal layout ── */
.if-card--lms {
  flex-direction: row !important;
  align-items: center;
  gap: 2rem;
}
.if-lms-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ── LMS Mockup animations ── */
@keyframes lmsBlockIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.95); }
  70%  { transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lmsBlockFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}
@keyframes lmsBlockShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── LMS Mockup ── */
.if-lms-mock {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: #eef1fb;
  border-radius: 16px;
  padding: 1rem;
}
.if-lms-row { display: flex; gap: .55rem; }
.if-lms-block {
  height: 68px;
  border-radius: 10px;
  flex: 1;
  opacity: 0;
  background: linear-gradient(120deg, #cdd5f5 30%, #dce3fb 50%, #cdd5f5 70%);
  background-size: 200% auto;
  animation:
    lmsBlockIn   .55s cubic-bezier(.34,1.56,.64,1) forwards,
    lmsBlockFloat 3.5s ease-in-out infinite,
    lmsBlockShimmer 3s linear infinite;
}

/* Staggered delays — entry + float offset per block */
.if-lms-mock > .if-lms-block:nth-child(1)          { animation-delay: .2s,  .8s,  .8s; }
.if-lms-mock > .if-lms-row > .if-lms-block:nth-child(1) { animation-delay: .38s, 1.1s, 1.0s; }
.if-lms-mock > .if-lms-row > .if-lms-block:nth-child(2) { animation-delay: .52s, 1.4s, 1.2s; }
.if-lms-mock > .if-lms-block:nth-child(3)          { animation-delay: .68s, 1.7s, 1.4s; }

.if-lms-block--wide { flex: 1.6; }
.if-lms-block--full { flex: 1; }

/* ── Domain card ── */
.if-domain-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #f4f6fb;
  border: 1.5px solid #e8ecf5;
  border-radius: 12px;
  padding: .85rem 1.1rem;
  margin-top: .75rem;
}
.if-domain-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #374151;
  flex-shrink: 0;
}
.if-domain-info { display: flex; flex-direction: column; gap: .1rem; }
.if-domain-info strong { font-size: .92rem; font-weight: 700; color: var(--pp-ink); }
.if-domain-info span  { font-size: .78rem; color: #9ca3af; }

@media (max-width: 991.98px) {
  .if-row { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  /* Checklist: one item per line on narrow phones instead of wrapping
     mid-word across 3 cramped columns */
  .if-checklist { flex-direction: column; gap: .5rem; }
}

/* ===================== TRUSTED BY LEADERS ===================== */
.tbl-wrap {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.tbl-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #9ca3af;
  margin: 0;
  text-transform: uppercase;
}
.tbl-logos {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.tbl-logo {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--pp-ink);
  letter-spacing: -.01em;
}
.tbl-ico {
  font-size: 1.1rem;
  color: var(--pp-blue);
}

/* ===================== CONTACT INFORMATION ===================== */
.ci-section {
  position: relative;
  padding: 60px 0;
  background: #f4f6fb;
  background-image: url("http://panaceaenglish.com/wp-content/uploads/2026/07/contact-information-bg-scaled.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* World map SVG watermark */

.ci-heading {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 2rem;
}

.ci-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ci-card {
  background: #fff;
  border-radius: 5px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  border: none;
  transition: box-shadow .25s, transform .25s;
}
.ci-card:hover {
  box-shadow: 0 8px 32px rgba(47,85,255,.12);
  transform: translateY(-4px);
}

.ci-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pp-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin: 0 auto 1.1rem;
}

.ci-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pp-ink);
  margin-bottom: .5rem;
}

.ci-card-text {
  font-size: .875rem;
  color: #6b7280;
  line-height: 1.7;
  margin: 0;
}
section.cta-section.contact-cta {
    padding: 60px 0;
}
@media (max-width: 768px) {
  .ci-grid { grid-template-columns: 1fr; }
  .blg-grid {
    grid-template-columns: repeat(2, 1fr);
    }
    .scoring-section .step-card {
        flex-direction: column !important;
    }
    .scoring-section {
        padding-left: 15px!important;
        padding-right: 15px!important;
    }
}

/* ===================== GET IN TOUCH ===================== */
.git-section {
  position: relative;
  padding: 60px 0;
  background: #fff;
  overflow: hidden;
}
.git-swirl {
  position: absolute;
  top: 20px; left: 20px;
  width: 130px; opacity: .7;
  pointer-events: none;
}
.git-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.git-heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: .75rem;
}
.git-sub {
  font-size: .9rem;
  color: #6b7280;
  line-height: 1.75;
  margin-bottom: 1.75rem;
  max-width: 420px;
}
.git-form { display: flex; flex-direction: column; gap: 1rem; }

/* Input wrapper — holds input + red asterisk */
.git-input-wrap { position: relative; }
.git-input-wrap > p {margin-bottom: 0px;}

.git-input {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid #e2e5ec;
  border-radius: 10px;
  font-size: .875rem;
  font-family: inherit;
  color: var(--pp-ink);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.git-input:focus {
  border-color: var(--pp-blue);
  box-shadow: 0 0 0 3px rgba(47,85,255,.1);
}
.git-input::placeholder { color: #adb5c6; font-size: .875rem; }

/* Fake placeholder with red asterisk */
.git-ph {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .875rem;
  color: #adb5c6;
  pointer-events: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.git-ph em { font-style: normal; color: #ef4444; }
.git-ph--ta { top: .9rem; transform: none; }

/* Hide fake placeholder on focus or when input has a value */
.git-input:focus ~ .git-ph,
.git-input:not(:placeholder-shown) ~ .git-ph { opacity: 0; }

.git-textarea { resize: none; min-height: 110px; padding-top: .85rem; }

/* Submit button */
.git-submit {
  width: 100%;
  padding: 1rem;
  background: var(--pp-blue);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .12em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
  margin-top: .25rem;
}
.git-submit:hover {
  background: var(--pp-blue-dark);
  box-shadow: 0 8px 24px rgba(47,85,255,.35);
  transform: translateY(-1px);
}
.git-map-col { position: relative; }

/* Outer wrapper — adds padding so blue bg can bleed right + bottom */
.git-map-outer {
  position: relative;
  padding: 44px 0px 60px 0; /* top/right/bottom space for blue to extend */
}

/* Blue rectangle: sits behind the map, offset to right & bottom */
.git-map-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 28%;                 /* starts ~28% from left so map overlaps on left */
  background: var(--pp-blue);
  border-radius: 16px;
  z-index: 0;
}

/* Map iframe: floats over the blue bg, offset upper-left */
.git-map-frame {
  position: relative;
  z-index: 1;
  width: 85%;               /* narrower than container — blue shows on right */
  height: 440px;
  border: none;
  border-radius: 14px;
  display: block;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
}

@media (max-width: 900px) {
  .git-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .git-map-outer { padding: 0; }
  .git-map-bg { display: none; }
  .git-map-frame { width: 100%; height: 320px; }
}

/* ===================== PARTNER SUCCESS STORIES ===================== */
.pss-section { padding: 60px 0; background: #fff; }

/* Header row */
.pss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.pss-heading {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin: 0 0 .4rem;
}
.pss-sub {
  font-size: .875rem;
  color: #6b7280;
  line-height: 1.65;
  margin: 0;
  max-width: 420px;
}
.pss-view-all {
  font-size: .85rem;
  font-weight: 700;
  color: var(--pp-blue);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
}
.pss-view-all:hover { color: var(--pp-blue-dark); }

/* Cards grid */
.pss-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* Individual card */
.pss-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 340px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: transform .3s;
}
.pss-card:hover { transform: translateY(-4px); }

/* Dark gradient overlay */
.pss-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,14,30,.15) 0%,
    rgba(10,14,30,.75) 60%,
    rgba(10,14,30,.92) 100%
  );
  border-radius: inherit;
}

/* Bottom row: body + arrow side by side */
.pss-card-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.25rem 1.4rem;
}

/* Card content */
.pss-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.pss-tag {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #ffffff;    
  background: rgb(255 255 255 / 9%);
  backdrop-filter: blur(8px);
  padding: .3rem .9rem;
  border-radius: 4px;
  align-self: flex-start;
}
.pss-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.pss-card-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.pss-card-quote {
  font-size: .78rem;
  color: rgba(255,255,255,.82);
  line-height: 1.65;
  margin: 0;
  margin-bottom: 50px;
}

/* ===================== Partner With Us ===================== */
.pwu-section {
  padding: 60px 0;
  background: #fff;
}
.pwu-inner {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 4rem;
  align-items: start;
}


/* Left */
.pwu-heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin: 0 0 .9rem;
}
.pwu-sub {
  font-size: .9rem;
  color: #6b7280;
  line-height: 1.7;
  margin: 0 0 2rem;
}

/* Feature list */
.pwu-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.pwu-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.pwu-feat-ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #eef1ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--pp-blue);
}
.pwu-feat-ico img
{
  width: 20px;
  height: 20px;
}
.pwu-feat-body { flex: 1; }
.pwu-feat-title {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--pp-blue);
  margin-bottom: .25rem;
}
.pwu-feat-desc {
  font-size: .84rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}
/* ===================== Partner With Us: application form card =====================
   The form markup comes from the Contact Form 7 form in the admin (pwu-form / pwu-row / pwu-field /
   pwu-label / pwu-input / pwu-domain-wrap / pwu-upload / pwu-submit); everything is scoped to
   .pwu-right so other forms are unaffected. */
.pwu-right {
  position: relative;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 24px;
  padding: 2.25rem 2.25rem 2rem;
  box-shadow: 0 30px 60px -32px rgba(21, 89, 237, .28), 0 2px 6px rgba(16, 22, 34, .04);
  overflow: hidden;
}
.pwu-right::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pp-blue), #6293ff);
}

/* Card header */
.pwu-card-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid #eef1f7;
}
.pwu-card-ico {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #eef2ff;
  color: var(--pp-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.pwu-card-title { font-size: 1.15rem; font-weight: 700; color: var(--pp-ink); margin: 0 0 .15rem; line-height: 1.3; }
.pwu-card-sub { font-size: .82rem; color: #6b7280; margin: 0; }

/* Layout */
.pwu-form { display: flex; flex-direction: column; gap: 1.15rem; }
.pwu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.pwu-field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.pwu-field > p { margin: 0; }
.pwu-right .pwu-form br { display: none; }
.pwu-right .wpcf7-form-control-wrap { display: block; }
.pwu-label { font-size: .8rem; font-weight: 600; color: var(--pp-ink); letter-spacing: .01em; }
.pwu-req { font-style: normal; color: #ef4444; }

/* Inputs */
.pwu-right .pwu-input {
  width: 100% !important;
  height: 50px !important;
  padding: 0 1rem !important;
  border: 1.5px solid #e3e8f2 !important;
  border-radius: 12px !important;
  background-color: #f8faff !important;
  color: var(--pp-ink) !important;
  font-family: inherit !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none !important;
  transition: border-color .2s, background-color .2s, box-shadow .2s !important;
}
.pwu-right .pwu-input::placeholder { color: #9aa6ba; font-weight: 400; }
.pwu-right .pwu-input:hover { border-color: #cdd6e8 !important; }
.pwu-right .pwu-input:focus {
  border-color: var(--pp-blue) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(21, 89, 237, .12) !important;
}

/* Field icons (Bootstrap Icons, grey at rest and brand blue while typing) */
.pwu-right .pwu-field--full .pwu-input[type="text"]:not(.pwu-domain-input),
.pwu-right .pwu-row .pwu-input[type="text"],
.pwu-right .pwu-input[type="email"],
.pwu-right .pwu-input[type="tel"],
.pwu-right .pwu-input[type="url"],
.pwu-right .pwu-domain-wrap .pwu-input {
  padding-left: 2.85rem !important;
  background-repeat: no-repeat !important;
  background-position: 1rem center !important;
  background-size: 17px 17px !important;
}
.pwu-right .pwu-field--full .pwu-input[type="text"]:not(.pwu-domain-input) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-field--full .pwu-input[type="text"]:not(.pwu-domain-input):focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231559ED'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-row .pwu-input[type="text"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-row .pwu-input[type="text"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231559ED'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-input[type="email"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-input[type="email"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231559ED'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-input[type="tel"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-input[type="tel"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231559ED'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-input[type="url"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-input[type="url"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231559ED'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-domain-wrap .pwu-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'/%3E%3C/svg%3E") !important; }
.pwu-right .pwu-domain-wrap .pwu-input:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231559ED'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'/%3E%3C/svg%3E") !important; }

/* Sub-domain: one input group with the .panacea.com tag inside */
.pwu-domain-wrap > p {
  display: flex;
  align-items: stretch;
  margin: 0;
  border: 1.5px solid #e3e8f2;
  border-radius: 12px;
  background: #f8faff;
  overflow: hidden;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.pwu-domain-wrap > p:hover { border-color: #cdd6e8; }
.pwu-domain-wrap > p:focus-within {
  border-color: var(--pp-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(21, 89, 237, .12);
}
.pwu-domain-wrap .wpcf7-form-control-wrap { flex: 1; min-width: 0; }
.pwu-right .pwu-domain-wrap .pwu-input,
.pwu-right .pwu-domain-wrap .pwu-input:hover,
.pwu-right .pwu-domain-wrap .pwu-input:focus {
  height: 47px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.pwu-domain-suffix {
  display: flex;
  align-items: center;
  margin: 6px;
  padding: 0 .9rem;
  border-radius: 8px;
  background: #eef2ff;
  color: var(--pp-blue);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Logo upload */
.pwu-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border: 1.5px dashed #c9d5ee;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  background: #f8faff;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, background-color .2s;
}
.pwu-upload:hover { border-color: var(--pp-blue); background: #f1f5ff; }
.pwu-upload-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eef2ff;
  color: var(--pp-blue);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  margin-bottom: .4rem;
  transition: background-color .2s, color .2s;
}
.pwu-upload:hover .pwu-upload-ico { background: var(--pp-blue); color: #fff; }
.pwu-upload-main { font-size: .9rem; font-weight: 600; color: var(--pp-ink); }
.pwu-upload-hint { font-size: .78rem; color: #8a94a6; }

/* Hide the dropzone once a file has been chosen; the preview row takes over. */
.pwu-upload.has-file { display: none; }

/* Uploaded-logo preview row: thumbnail + filename + remove ("x") button */
.pwu-upload-preview > p {
  display: none;
  align-items: center;
  gap: .85rem;
  margin: 0;
  border: 1.5px solid #dbe5fb;
  border-radius: 14px;
  padding: .8rem 1rem;
  background: #f5f8ff;
}
.pwu-upload-preview.show > p { display: flex; }
.pwu-upload-preview img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
  padding: 4px;
}
.pwu-upload-filename {
  flex: 1;
  min-width: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--pp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pwu-upload-remove {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #6b7280;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background .2s, color .2s;
}
.pwu-upload-remove:hover { background: #fee2e2; color: #dc2626; }
.pwu-upload-error {
  display: none;
  margin-top: .5rem;
  font-size: .8rem;
  color: #dc2626;
  font-weight: 600;
}

/* Submit */
.pwu-right .pwu-submit {
  width: 100%;
  height: 54px;
  padding: 0 1.5rem !important;
  border: none !important;
  border-radius: 14px !important;
  background: var(--pp-blue) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  margin-top: .4rem !important;
  box-shadow: 0 14px 28px -12px rgba(21, 89, 237, .55) !important;
  transition: background-color .2s, transform .2s, box-shadow .2s !important;
}
.pwu-right .pwu-submit:hover {
  background: var(--pp-blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -12px rgba(21, 89, 237, .6) !important;
}

/* Validation and response messages */
.pwu-right .pwu-input.wpcf7-not-valid { border-color: #ef4444 !important; background-color: #fff7f7 !important; }
.pwu-right .pwu-input.wpcf7-not-valid:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, .12) !important; }
.pwu-right .wpcf7-not-valid-tip { font-size: .75rem; font-weight: 500; color: #dc2626; margin-top: .4rem; }
.pwu-right .wpcf7-response-output {
  margin: 1.25rem 0 0 !important;
  padding: .85rem 1rem !important;
  border: 1px solid #dbe5fb !important;
  border-radius: 12px;
  background: #f5f8ff;
  font-size: .85rem;
  color: var(--pp-ink);
}
.pwu-right form:is(.invalid, .unaccepted, .payment-required) .wpcf7-response-output { border-color: #fde68a !important; background: #fffbeb; color: #92400e; }
.pwu-right form.sent .wpcf7-response-output { border-color: #bbf7d0 !important; background: #f0fdf4; color: #166534; }
.pwu-right form:is(.failed, .aborted, .spam) .wpcf7-response-output { border-color: #fecaca !important; background: #fef2f2; color: #991b1b; }

/* Legal line */
.pwu-legal {
  text-align: center;
  font-size: .7rem;
  letter-spacing: .06em;
  color: #9ca3af;
  margin: 0;
  text-transform: uppercase;
}
.pwu-legal a {
  color: var(--pp-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 991.98px) {
  .pwu-right { padding: 1.75rem 1.5rem 1.5rem; border-radius: 20px; }
}
@media (max-width: 575.98px) {
  .pwu-row { grid-template-columns: 1fr; }
  .pwu-right { padding: 1.5rem 1.1rem 1.25rem; }
  .pwu-card-head { padding-bottom: 1.1rem; margin-bottom: 1.25rem; }
}

/* ===================== FAQ ===================== */
.faq-section {
    padding: 60px 0;
}
.faq-heading {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 3rem;
}

/* 2-column grid */
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
}

/* Each item — card with shadow */
.faq-item {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 24.56px 32.74px -14.73px #95959540;
  padding: 1.3rem 1.4rem;
  width:  100%;
  transition: box-shadow .2s, border-color .2s;
}
.faq-item:hover {
  box-shadow: 0 4px 20px rgba(47, 85, 255, .08);
  border-color: #d8dcef;
}

/* Toggle button */
.faq-btn {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: none !important;
}
.faq-btn:hover,
.faq-btn:focus,
.faq-btn:active
{
  background: transparent;
}
/* +/- icon — plain, no background */
.faq-ico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 700;
  color: var(--pp-blue);
  transition: color .2s;
  background: none;
}
.faq-btn[aria-expanded="true"] .faq-ico {
  background: none;
  color: #e8970a;
}
/* Swap + to − when expanded */
.faq-btn[aria-expanded="true"] .faq-ico i::before {
  content: "\f2ea";
}

/* Question text */
.faq-q {
  font-size: .92rem;
  font-weight: 600;
  color: var(--pp-ink);
  line-height: 1.45;
  flex: 1;
}

/* Answer */
.faq-body { padding-left: calc(26px + .85rem); }
.faq-ans {
  font-size: .85rem;
  color: #6b7280 !important;
  line-height: 1.7;
  margin: .75rem 0 0;
  text-decoration: none;
}

/* ===================== Feature Tabs Section ===================== */
.ise-section { padding: 60px 0; background: #fff; }
.ise-header { margin-bottom: 2.5rem; }
.ise-heading { font-size: clamp(1.5rem,2.8vw,2rem); font-weight: 800; color: var(--pp-ink); line-height: 1.3; margin: 0 0 .9rem; }
.ise-sub { font-size: .9rem; color: #6b7280; line-height: 1.7; margin: 0; }
.ise-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 0; }
.ise-tab { background: none; border: none; padding: .75rem 1.4rem; font-size: .88rem; font-weight: 600; color: #6b7280; cursor: pointer; font-family: inherit; position: relative; transition: color .2s; white-space: nowrap; margin-bottom: 0; }
.ise-tab:hover,.ise-tab:focus,.ise-tab:active{ background-color: transparent; }
.ise-tab::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--pp-blue); transform: scaleX(0); transition: transform .2s; }
.ise-tab.active { color: var(--pp-blue); }
.ise-tab.active::after { transform: scaleX(1); }
.ise-tab:hover { color: var(--pp-blue); }
.ise-panels { margin-top: 0; }
.ise-panel { display: none; background: #EFF6FF; border-radius: 20px; padding: 2rem 2rem; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: center; margin-top: 30px; }
.ise-panel.active { display: grid; }
.ise-feat-badge {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--pp-blue);
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 32px rgba(47,85,255,.14);
  padding: 15px;
}
.ise-feat-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--pp-blue);
  margin: 0 0 .8rem;
  line-height: 1.25;
}
.ise-feat-desc {
  font-size: .875rem;
  color: #4b5563;
  line-height: 1.75;
  margin: 0 0 1.5rem;
}
.ise-checklist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .75rem;
}
.ise-checklist li {
  display: flex; align-items: center; gap: .65rem;
  font-size: .875rem; color: #374151; font-weight: 500;
}
.ise-checklist li i {
  color: var(--pp-blue); font-size: 1.1rem; flex-shrink: 0;
}
.ise-panel-img-placeholder { background: #EFF6FF; border-radius: 16px; height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--pp-blue); font-size: 3rem; }
.ise-panel-img-placeholder span { font-size: 1rem; font-weight: 700; color: var(--pp-blue); }
/* ── Dashboard Mockup ── */
.ise-mock-wrap {
  position: relative;
  padding: 1.5rem 1.5rem 2.5rem 1rem;
}

/* Decorative dots grid */
.ise-mock-dots {
  position: absolute;
  top: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  padding: .5rem;
}
.ise-mock-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #c7d0e8;
  display: block;
}

/* Main card */
.ise-mock {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(47,85,255,.12);
  overflow: hidden;
}
.ise-mock-body { padding: 1.1rem 1.1rem .9rem; }
.ise-mock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem;
}
.ise-mock-title { font-size: 1rem; font-weight: 700; color: var(--pp-ink); }
.ise-mock-addbtn {
  background: var(--pp-blue); color: #fff; border: none;
  border-radius: 8px; padding: .32rem .8rem;
  font-size: .7rem; font-weight: 700; font-family: inherit;
  cursor: default; display: flex; align-items: center; gap: .25rem;
}

/* Toolbar: search + filter */
.ise-mock-toolbar { display: flex; gap: .6rem; margin-bottom: .7rem; align-items: center; }
.ise-mock-search {
  display: flex; align-items: center; gap: .4rem;
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 8px; padding: .38rem .7rem;
  font-size: .7rem; color: #9ca3af; flex: 1;
}
.ise-mock-filter {
  display: flex; align-items: center; gap: .3rem;
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 8px; padding: .38rem .7rem;
  font-size: .7rem; font-weight: 600; color: #374151;
  white-space: nowrap;
}

/* Table */
.ise-mock-table { font-size: .7rem; }
.ise-mock-thead {
  display: grid;
  grid-template-columns: 2fr .7fr 1fr .8fr .5fr .7fr;
  color: #9ca3af; font-weight: 700;
  font-size: .6rem; letter-spacing: .05em;
  padding: .3rem 0;
  border-bottom: 1px solid #f0f1f4;
  margin-bottom: .2rem;
  line-height: 1.3;
}
.ise-mock-row {
  display: grid;
  grid-template-columns: 2fr .7fr 1fr .8fr .5fr .7fr;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid #f0f1f4;
  color: #374151;
  line-height: 1.3;
}
.ise-mock-row--hl { background: #f5f7ff; border-radius: 8px; }
.ise-mock-student { display: flex; align-items: center; gap: .5rem; }
.ise-mock-avatar--img {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #dbeafe;
  color: var(--pp-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.ise-mock-student strong { display: block; font-size: .7rem; font-weight: 600; color: var(--pp-ink); }
.ise-mock-student small { font-size: .6rem; color: #9ca3af; }
.ise-mock-badge { font-size: .6rem; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; display: inline-block; }
.ise-mock-badge--blue { background: #dbeafe; color: #2563eb; }
.ise-mock-status-pill {
  font-size: .62rem; font-weight: 700;
  color: #16a34a;
  background: #dcfce7;
  border-radius: 20px;
  padding: .15rem .5rem;
  display: inline-block;
}

/* Floating profile card */
.ise-float-profile {
  position: absolute;
  left: -10px;
  bottom: -10px;
  width: 185px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  padding: .95rem;
  font-size: .7rem;
  z-index: 3;
}
.ise-fp-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #f0f1f4;
}
.ise-fp-avatar { font-size: 1.8rem; color: var(--pp-blue); line-height: 1; }
.ise-fp-head strong { display: block; font-size: .72rem; font-weight: 700; color: var(--pp-ink); }
.ise-fp-head small { font-size: .6rem; color: #9ca3af; }
.ise-fp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .28rem 0;
  border-bottom: 1px solid #f5f6fa;
  color: #6b7280;
}
.ise-fp-row:last-of-type { border-bottom: none; }
.ise-fp-row strong { color: var(--pp-ink); }
.ise-fp-btn {
  width: 100%; margin-top: .65rem;
  padding: .4rem;
  background: var(--pp-blue); color: #fff;
  font-size: .68rem; font-weight: 700;
  border: none; border-radius: 8px;
  cursor: default; font-family: inherit;
}

/* Floating chart card */
.ise-float-chart {
  position: absolute;
  right: -10px;
  top: 10px;
  width: 185px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  padding: .85rem;
  z-index: 3;
}
.ise-fc-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .5rem;
}
.ise-fc-title { font-size: .68rem; font-weight: 700; color: var(--pp-ink); }
.ise-fc-chart svg { width: 100%; height: 60px; display: block; }
.ise-fc-labels {
  display: flex; justify-content: space-between;
  font-size: .55rem; color: #9ca3af; margin-top: .3rem;
}

/* ── Admin Access Mockup ── */
.adm-mock-wrap {
  position: relative;
  padding: 2.5rem 260px 1rem 0;
  min-height: 420px;
}
.adm-dots {
  position: absolute;
  top: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(3, 6px);
  gap: 5px;
}
.adm-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(47,85,255,.22);
  display: block;
}

/* Create Admin form card */
.adm-form-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(47,85,255,.13);
  padding: 1.1rem 1.2rem;
  width: 240px;
  font-size: .7rem;
  position: relative;
  z-index: 1;
}
.adm-form-head {
  font-size: .8rem;
  font-weight: 700;
  color: var(--pp-ink);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-left: .5rem;
  border-left: 3px solid var(--pp-blue);
}
.adm-form-head i { color: var(--pp-blue); }
.adm-field { margin-bottom: .5rem; }
.adm-field label {
  display: block;
  font-size: .57rem;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: .06em;
  margin-bottom: .18rem;
}
.adm-input {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: .38rem .6rem;
  font-size: .67rem;
  color: #c0c8d8;
  background: #fafbff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.adm-input i { color: #d1d5db; font-size: .7rem; }

.adm-perm-title { font-size: .72rem; font-weight: 700; color: var(--pp-ink); margin: .7rem 0 .4rem; }
.adm-perm-list { display: flex; flex-direction: column; gap: .3rem; }
.adm-perm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .28rem 0;
  border-bottom: 1px solid #f3f4f6;
}
.adm-perm-info strong { display: block; font-size: .66rem; font-weight: 600; color: var(--pp-ink); }
.adm-perm-info small { font-size: .57rem; color: #9ca3af; }
.adm-checkbox {
  width: 15px; height: 15px;
  border-radius: 4px;
  border: 1.5px solid #d1d5db;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.adm-checkbox--on {
  background: var(--pp-blue);
  border-color: var(--pp-blue);
  color: #fff;
  font-size: .62rem;
}
.adm-form-btns {
  display: flex;
  gap: .45rem;
  margin-top: .8rem;
  justify-content: flex-end;
}
.adm-btn-cancel {
  background: none; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: .32rem .7rem; font-size: .66rem; font-weight: 600;
  color: #6b7280; cursor: default; font-family: inherit;
}
.adm-btn-save {
  background: var(--pp-blue); border: none; border-radius: 8px;
  padding: .32rem .8rem; font-size: .66rem; font-weight: 700;
  color: #fff; cursor: default; font-family: inherit;
}

/* Team Members floating card */
.adm-team-card {
  position: absolute;
  right: 0;
  top: 40px;
  width: 260px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(47,85,255,.14);
  padding: .9rem 1rem;
  z-index: 2;
}
.adm-team-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem;
}
.adm-team-title { font-size: .8rem; font-weight: 700; color: var(--pp-ink); }
.adm-team-addbtn {
  background: var(--pp-blue); color: #fff;
  border: none; border-radius: 7px;
  padding: .22rem .6rem; font-size: .6rem; font-weight: 700;
  font-family: inherit; cursor: default;
  display: flex; align-items: center; gap: .2rem;
}
.adm-team-table { font-size: .63rem; }
.adm-team-thead {
  display: grid; grid-template-columns: 2fr 1fr 1fr .4fr;
  color: #9ca3af; font-weight: 700; font-size: .57rem;
  letter-spacing: .05em; padding: .22rem 0;
  border-bottom: 1px solid #f0f1f4; margin-bottom: .15rem;
}
.adm-team-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr .4fr;
  align-items: center; padding: .35rem 0;
  border-bottom: 1px solid #f5f6fa; color: #374151;
}
.adm-team-member { display: flex; align-items: center; gap: .4rem; }
.adm-team-member strong { display: block; font-size: .63rem; font-weight: 600; color: var(--pp-ink); line-height: 1.2; }
.adm-team-member small { display: block; font-size: .54rem; color: #9ca3af; }
.adm-team-av {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--pp-blue); color: #fff;
  font-size: .62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.adm-av--pink { background: #ec4899; }
.adm-av--green { background: #16a34a; }
.adm-av--orange { background: #f97316; }
.adm-av--purple { background: #7c3aed; }
.adm-status {
  font-size: .58rem; font-weight: 600;
  display: flex; align-items: center; gap: .25rem;
}
.adm-status i { font-size: .4rem; }
.adm-status--on { color: #16a34a; }
.adm-status--off { color: #9ca3af; }
.adm-action { color: #c4c9d6; font-size: .75rem; text-align: center; }

/* Blue checkmark badge */
.adm-check-badge {
  position: absolute;
  top: 10px; right: 230px;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--pp-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(47,85,255,.4);
  z-index: 4;
}

/* ── Performance & Reports Mockup ── */
.prf-mock-wrap {
  position: relative;
  padding-top: 1.5rem;
}
.prf-dots {
  position: absolute;
  top: 0; right: 0;
}
.prf-window {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(47,85,255,.16);
  background: #fff;
  min-height: 320px;
  font-size: .62rem;
}

/* Sidebar */
.prf-sidebar {
  width: 36px;
  background: #1a2a6c;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .7rem 0;
  gap: .5rem;
  flex-shrink: 0;
}
.prf-sb-logo { color: #fff; font-size: .9rem; margin-bottom: .4rem; }
.prf-sb-icons { display: flex; flex-direction: column; gap: .45rem; }
.prf-sb-icon { color: rgba(255,255,255,.45); font-size: .78rem; }
.prf-sb-icon--active { color: #fff; }

/* Main area */
.prf-main { flex: 1; padding: .85rem .9rem; display: flex; flex-direction: column; gap: .65rem; overflow: hidden; }

.prf-header { display: flex; align-items: flex-start; justify-content: space-between; }
.prf-page-title { font-size: .78rem; font-weight: 700; color: var(--pp-ink); }
.prf-page-sub { font-size: .57rem; color: #9ca3af; margin-top: .1rem; }
.prf-date-pill {
  background: #f0f4ff; color: var(--pp-blue);
  border-radius: 20px; padding: .2rem .55rem;
  font-size: .57rem; font-weight: 600;
  display: flex; align-items: center; gap: .25rem;
  white-space: nowrap;
}

/* Stats row */
.prf-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; }
.prf-stat {
  background: #f8faff;
  border-radius: 9px;
  padding: .5rem .55rem;
  display: flex; align-items: flex-start; gap: .4rem;
}
.prf-stat-icon {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; flex-shrink: 0; margin-top: .1rem;
}
.prf-stat-icon--blue   { background: #e8edff; color: var(--pp-blue); }
.prf-stat-icon--purple { background: #f3e8ff; color: #7c3aed; }
.prf-stat-icon--green  { background: #e6faf0; color: #16a34a; }
.prf-stat-icon--orange { background: #fff4e5; color: #f97316; }
.prf-stat-label { font-size: .54rem; color: #9ca3af; font-weight: 600; }
.prf-stat-val   { font-size: .78rem; font-weight: 800; color: var(--pp-ink); line-height: 1.2; }
.prf-stat-delta { font-size: .52rem; margin-top: .1rem; }
.prf-delta--up   { color: #16a34a; }
.prf-delta--down { color: #ef4444; }

/* Charts row */
.prf-charts { display: grid; grid-template-columns: 1.2fr 1fr; gap: .55rem; }
.prf-chart-card { background: #f8faff; border-radius: 10px; padding: .6rem .65rem; }
.prf-chart-title { font-size: .62rem; font-weight: 700; color: var(--pp-ink); margin-bottom: .45rem; }

/* Line chart */
.prf-line-chart { width: 100%; height: 62px; display: block; }
.prf-chart-labels { display: flex; justify-content: space-between; margin-top: .2rem; }
.prf-chart-labels span { font-size: .5rem; color: #9ca3af; }

/* Bar chart */
.prf-bars { display: flex; flex-direction: column; gap: .38rem; }
.prf-bar-row { display: flex; align-items: center; gap: .4rem; }
.prf-bar-lbl { width: 48px; font-size: .56rem; color: #6b7280; flex-shrink: 0; }
.prf-bar-track { flex: 1; height: 7px; background: #e9ecf5; border-radius: 4px; overflow: hidden; }
.prf-bar-fill { height: 100%; border-radius: 4px; }
.prf-bar--blue   { background: var(--pp-blue); }
.prf-bar--purple { background: #7c3aed; }
.prf-bar--green  { background: #16a34a; }
.prf-bar--orange { background: #f97316; }
.prf-bar-num { font-size: .56rem; font-weight: 700; color: var(--pp-ink); width: 20px; text-align: right; }

/* Bottom row */
.prf-bottom { display: grid; grid-template-columns: 1.1fr 1fr; gap: .55rem; }
.prf-bottom-card { background: #f8faff; border-radius: 10px; padding: .6rem .65rem; }
.prf-batch-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; font-size: .52rem; font-weight: 700; color: #9ca3af; letter-spacing: .04em; padding-bottom: .25rem; border-bottom: 1px solid #e9ecf5; margin-bottom: .2rem; }
.prf-batch-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; font-size: .56rem; color: #374151; padding: .22rem 0; border-bottom: 1px solid #f0f2f8; }
.prf-pass { color: #16a34a; font-weight: 700; }
.prf-view-all { display: block; font-size: .55rem; color: var(--pp-blue); font-weight: 700; margin-top: .4rem; text-decoration: none; }

/* Activity list */
.prf-activity-list { display: flex; flex-direction: column; gap: .35rem; }
.prf-activity-item { display: flex; align-items: flex-start; gap: .4rem; }
.prf-activity-item strong { display: block; font-size: .58rem; font-weight: 600; color: var(--pp-ink); line-height: 1.3; }
.prf-activity-item small  { font-size: .52rem; color: #9ca3af; }
.prf-act-av {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.prf-act-av--blue   { background: var(--pp-blue); }
.prf-act-av--green  { background: #16a34a; }
.prf-act-av--orange { background: #f97316; }

/* ── LMS Mockup ── */
.lms-mock-wrap {
  position: relative;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding-top: 1.5rem;
}
.lms-dots {
  position: absolute;
  top: 0; right: 0;
  grid-template-columns: repeat(4,6px);
}

/* Course player card */
.lms-player-card {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(47,85,255,.13);
  padding: 1rem 1.1rem 1rem;
  font-size: .63rem;
  min-width: 0;
}
.lms-course-label {
  font-size: .55rem; font-weight: 700;
  color: #9ca3af; letter-spacing: .07em;
  display: flex; align-items: center; gap: .3rem;
  margin-bottom: .25rem;
}
.lms-course-name { font-size: .82rem; font-weight: 700; color: var(--pp-ink); margin-bottom: .6rem; }

/* Progress */
.lms-prog-wrap { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.lms-prog-track { flex: 1; height: 7px; background: #e9ecf5; border-radius: 4px; overflow: hidden; }
.lms-prog-fill { height: 100%; background: var(--pp-blue); border-radius: 4px; }
.lms-prog-pct { font-size: .58rem; font-weight: 700; color: var(--pp-blue); line-height: 1.25; text-align: right; flex-shrink: 0; }
.lms-prog-pct small { font-size: .5rem; font-weight: 500; color: #9ca3af; display: block; }

.lms-lesson-title { font-size: .72rem; font-weight: 700; color: var(--pp-ink); text-align: center; margin-bottom: .65rem; }

/* Mic */
.lms-mic-wrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.lms-mic-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pp-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(47,85,255,.35);
}
.lms-mic-hint { font-size: .55rem; color: var(--pp-blue); font-weight: 600; }

/* Waveform */
.lms-waveform {
  display: flex; align-items: center; justify-content: center;
  gap: 3px; margin-bottom: .6rem; height: 28px;
}
.lms-waveform span {
  width: 3px; border-radius: 2px;
  background: var(--pp-blue); opacity: .45;
  display: block;
}

/* Nav buttons */
.lms-nav-row { display: flex; gap: .4rem; margin-bottom: .45rem; }
.lms-btn-prev {
  flex: 1; border: 1px solid #e5e7eb; background: #fff;
  border-radius: 8px; padding: .38rem; font-size: .62rem;
  font-weight: 600; color: #374151; font-family: inherit; cursor: default;
}
.lms-btn-next {
  flex: 1.3; background: var(--pp-blue); border: none;
  border-radius: 8px; padding: .38rem; font-size: .62rem;
  font-weight: 700; color: #fff; font-family: inherit; cursor: default;
}

/* Time row */
.lms-time-row { display: flex; align-items: center; gap: .4rem; }
.lms-time-row span { font-size: .53rem; color: #9ca3af; }
.lms-time-bar { flex: 1; height: 4px; background: #e9ecf5; border-radius: 2px; overflow: hidden; }
.lms-time-fill { height: 100%; background: var(--pp-blue); border-radius: 2px; }

/* Sidebar cards */
.lms-sidebar-cards { width: 175px; display: flex; flex-direction: column; gap: .6rem; flex-shrink: 0; }
.lms-content-card, .lms-library-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(47,85,255,.11);
  padding: .75rem .8rem;
}
.lms-card-title { font-size: .7rem; font-weight: 700; color: var(--pp-ink); margin-bottom: .5rem; }

/* Content list */
.lms-content-list { display: flex; flex-direction: column; gap: .35rem; }
.lms-content-item { display: flex; align-items: center; gap: .4rem; padding: .28rem .35rem; border-radius: 8px; }
.lms-content-item--active { background: #eef2ff; }
.lms-content-icon {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; flex-shrink: 0;
}
.lms-ci--done   { background: #f3f4f6; color: #9ca3af; }
.lms-ci--active { background: var(--pp-blue); color: #fff; }
.lms-content-info { flex: 1; min-width: 0; }
.lms-content-info strong { display: block; font-size: .6rem; font-weight: 700; color: var(--pp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lms-content-info small  { font-size: .53rem; color: #9ca3af; }
.lms-done-ico { color: #16a34a; font-size: .7rem; flex-shrink: 0; }
.lms-play-ico { color: var(--pp-blue); font-size: .75rem; flex-shrink: 0; }

/* Library grid */
.lms-library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.lms-lib-item { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; padding: .4rem .2rem; }
.lms-lib-item span  { font-size: .57rem; font-weight: 600; color: var(--pp-ink); line-height: 1.2; }
.lms-lib-item small { font-size: .5rem; color: #9ca3af; }
.lms-lib-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
}
.lms-lib-icon--orange { background: #fff4e5; color: #f97316; }
.lms-lib-icon--green  { background: #e6faf0; color: #16a34a; }
.lms-lib-icon--blue   { background: #e8edff; color: var(--pp-blue); }
.lms-lib-icon--purple { background: #f3e8ff; color: #7c3aed; }
.cta-section.pte-vs-ilets-cta {
    padding: 60px 0;
}
/* ===================== Quick Comparison Section ===================== */
.qc-section {
  padding: 60px 0;
  background: #f5f7ff;
}
.qc-heading {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 2.2rem;
}
.qc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.qc-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.75rem;
  box-shadow: 0 6px 28px rgba(47,85,255,.09);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: box-shadow .25s, transform .25s;
  cursor: default;
}
.qc-card:hover {
  box-shadow: 0 12px 40px rgba(21,89,237,.18);
  transform: translateY(-3px);
}
.qc-card:hover .qc-icon--blue {
  background: var(--pp-blue);
  color: #fff;
}
.qc-icon i {
  display: inline-flex;
  line-height: 1;
  transition: filter .25s;
}
.qc-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  transition: background .25s, color .25s;
}
.qc-icon--blue { background: #e8edff; color: var(--pp-blue); }
.qc-label {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pp-ink);
  margin: 0;
}
.qc-compare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .15rem;
}
.qc-side {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.qc-val {
  font-size: .85rem;
  font-weight: 700;
  color: var(--pp-ink);
  white-space: nowrap;
}
.qc-val--blue { color: var(--pp-blue); }
.qc-exam {
  font-size: .7rem;
  color: #9ca3af;
  font-weight: 500;
}
.qc-vs {
  font-size: .68rem;
  font-weight: 700;
  color: #c4cad8;
  flex-shrink: 0;
  padding-bottom: .8rem;
}

/* ===================== AI Scoring vs Human Scoring ===================== */
.aivh-section {
  padding: 60px 0;
  background: #fff;
}
.aivh-top { margin-bottom: 2.5rem; }
.aivh-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: .55rem;
}
.aivh-sub { font-size: .98rem; color: #6b7280; margin: 0; }
.aivh-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
  position: relative;
}
.aivh-card {
  border: 1.5px solid #e9ecf5;
  border-radius: 18px;
  padding: 1.75rem 1.6rem;
  background: #fff;
}
.aivh-card-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .65rem;
}
.aivh-badge {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.aivh-badge--blue { background: #e8edff; color: var(--pp-blue); }
.aivh-badge--gray { background: #f0f0f8; color: #7c7ca8; }
.aivh-card-name { font-size: 1.05rem; font-weight: 800; color: var(--pp-ink); }
.aivh-name--blue { color: var(--pp-blue); }
.aivh-card-sub { font-size: .82rem; font-weight: 700; color: var(--pp-ink); margin: 0 0 .9rem; }
.aivh-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.aivh-list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .88rem;
  color: #374151;
  line-height: 1.5;
}
.aivh-list li i { font-size: .95rem; flex-shrink: 0; margin-top: .15rem; }
.aivh-ico--blue { color: var(--pp-blue); }
.aivh-ico--gray { color: #9ca3af; }
.aivh-deco {
  position: absolute;
  top: -20px;
  right: -150px;
  width: 130px;
  pointer-events: none;
  transform: rotate(15deg);
}
.aivh-cap-svg { width: 100%; height: auto; }

/* ===================== Exam Format Comparison ===================== */
.efc-section {
  padding: 60px 0;
  background: #fff;
}
.efc-outer {
  background: #EFF6FF;
  border-radius: 24px;
  padding: 2.5rem 2rem 2rem;
}
.efc-top { margin-bottom: 2rem; }
.efc-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: .4rem;
}
.efc-sub { font-size: .95rem; color: #6b7280; margin: 0; }

/* 4-column skill cards */
.efc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.efc-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.4rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  box-shadow: 0 2px 8px rgba(21,89,237,.06);
  transition: box-shadow .25s, transform .25s;
  cursor: default;
}
.efc-card:hover {
  box-shadow: 0 12px 36px rgba(21,89,237,.16);
  transform: translateY(-4px);
}
.efc-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #e8edff;
  color: var(--pp-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: .35rem;
  transition: background .25s;
}
.efc-icon i {
  transition: filter .25s;
  display: inline-flex;
  line-height: 1;
}
.efc-skill { font-size: .9rem; font-weight: 800; color: var(--pp-ink); }
.efc-row  { font-size: .8rem; color: #374151; }
.efc-pte  { color: var(--pp-blue); font-weight: 700; }
.efc-ielts { color: #6b7280; }

/* ===================== Section-Wise Comparison ===================== */
.swc-section {
  padding: 60px 0;
  background: #fff;
}
.swc-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 2rem;
}
.swc-table {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e9ecf5;
}
.swc-thead {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  background: var(--pp-blue);
}
.swc-th {
  padding: .85rem 1.2rem;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .06em;
}
.swc-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  border-bottom: 1px solid #e9ecf5;
}
.swc-row--last { border-bottom: none; }
.swc-td {
  padding: 1rem 1.2rem;
  font-size: .85rem;
  color: #374151;
  line-height: 1.55;
}
.swc-td--section {
  font-weight: 700;
  color: var(--pp-ink);
  border-right: 1px solid #e9ecf5;
}
.swc-row:nth-child(odd) { background: #fafbff; }
.swc-row:nth-child(even) { background: #fff; }

@media (max-width: 991.98px) {
  /* Same fix as the Detailed Comparison Table above: a 140px+1fr+1fr grid
     left each PTE/IELTS answer squeezed into a narrow column, wrapping
     word-by-word. Each row becomes a stacked card instead — section name
     on top, then each exam's answer listed below with a small label
     (from data-exam) identifying which exam it belongs to. No scrolling. */
  .swc-table { display: block; border: none; border-radius: 0; overflow: visible; }
  .swc-thead { display: none; }
  .swc-row {
    display: block;
    background: #fff !important;
    border: 1px solid #e9ecf5;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: .85rem;
  }
  .swc-row--last { margin-bottom: 0; }
  .swc-td--section {
    border-right: none;
    border-bottom: 1px solid #eef1f7;
    padding: 0 0 .6rem;
    margin-bottom: .6rem;
    font-size: 1rem;
  }
  .swc-td:not(.swc-td--section) {
    padding: .55rem 0;
  }
  .swc-td:not(.swc-td--section):not(:last-child) {
    border-bottom: 1px dashed #eef1f7;
  }
  .swc-td:not(.swc-td--section)::before {
    content: attr(data-exam);
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pp-blue);
    margin-bottom: .2rem;
  }
}

/* ===================== Score Comparison Scale ===================== */
.scs-section { padding: 60px 0; background: #fff; }
.scs-wrap {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}
.scs-deco-left {
  position: absolute;
  left: -120px;
  top: -10px;
  width: 100px;
  pointer-events: none;
}
.scs-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 2rem;
}
.scs-bar-block { margin-bottom: 1.4rem; }
.scs-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .4rem;
}
.scs-bar-label { font-size: .85rem; font-weight: 700; }
.scs-label--blue { color: var(--pp-blue); }
.scs-label--red  { color: #e53e3e; }
.scs-bar-range { font-size: .82rem; font-weight: 700; }
.scs-range--blue { color: var(--pp-blue); }
.scs-range--red  { color: #e53e3e; }
.scs-track {
  height: 10px;
  background: #e9ecf5;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: .35rem;
}
.scs-fill { height: 100%; border-radius: 6px; }
.scs-fill--blue { background: var(--pp-blue); }
.scs-fill--red  { background: #e53e3e; }
.scs-bar-minmax {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: #9ca3af;
}

/* ===================== Why Students Prefer PTE ===================== */
.wsp-section { padding: 60px 0; background: #fff; }
.wsp-outer {
  background: #EFF6FF;
  border-radius: 24px;
  padding: 2.5rem 2rem 2rem;
}
.wsp-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 1.8rem;
}
.wsp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.wsp-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(21,89,237,.06);
  transition: box-shadow .25s, transform .25s;
  cursor: default;
}
.wsp-card:hover {
  box-shadow: 0 12px 36px rgba(21,89,237,.16);
  transform: translateY(-4px);
}
.wsp-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #e8edff;
  color: var(--pp-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: background .25s;
}
.wsp-card:hover .wsp-icon {
  background: var(--pp-blue);
}
.wsp-card:hover .wsp-icon i {
  filter: brightness(0) saturate(100%) invert(100%);
}
.wsp-title { font-size: .85rem; font-weight: 700; color: var(--pp-ink); }
.wsp-sub   { font-size: .75rem; color: #6b7280; }
.wsp-btn-wrap { margin-top: .5rem; }
.wsp-btn {
  background: var(--pp-blue);
  color: #fff;
  border-radius: 30px;
  padding: .7rem 2rem;
  font-size: .9rem;
  font-weight: 700;
  border: none;
}
.wsp-btn:hover { background: var(--pp-blue-dark); color: #fff; }

/* ===================== Detailed Comparison Table ===================== */
.dct-section { padding: 60px 0; background: #fff; position: relative; }
.dct-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 2rem;
}
.dct-table {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e9ecf5;
}
.dct-thead {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  background: var(--pp-blue);
}
.dct-th {
  padding: .85rem 1.2rem;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .06em;
}
.dct-row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  border-bottom: 1px solid #e9ecf5;
  transition: all .2s
}
.dct-row--last { border-bottom: none; }
.dct-td {
  padding: .9rem 1.2rem;
  font-size: .85rem;
  color: #374151;
  line-height: 1.5;
}
.dct-td--feat {
  font-weight: 700;
  color: var(--pp-ink);
  border-right: 1px solid #e9ecf5;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.dct-icon {
  width: 36px; height: 36px;
  border-radius: 50px;
  background: #eef1ff;
  color: var(--pp-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.dct-row:hover .dct-icon {
  background: var(--pp-blue);
  color: #fff;
}
.dct-icon--dark { background: var(--pp-blue); color: #fff; }
.dct-row:nth-child(odd)  { background: #fafbff; }
.dct-row:nth-child(even) { background: #fff; }
/* Split header: blue + dark navy */
.dct-thead--split { grid-template-columns: 160px 1fr 1fr; }
.dct-thead--split ~ .dct-row { grid-template-columns: 160px 1fr 1fr; }
.dct-th--dark { background: #1e2d6b; }
/* Blue feature label text */
.dct-td--blue { color: var(--pp-blue) !important; }
.dct-row:hover
{
  background: #dfe9ff;
}
.dct-deco-right {
  position: absolute;
  bottom: 20px;
  right: 0;
  width: 100px;
  pointer-events: none;
}

/* ===================== PTE vs TOEFL Quick Comparison ===================== */
.pvt-qc-section { padding: 60px 0; }
.pvt-qc-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 1rem;
}
.pvt-qc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.pvt-qc-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border: 1px solid #e8edff;
  transition: box-shadow .25s, transform .25s;
}
.pvt-qc-card:hover {
  box-shadow: 0 12px 40px rgba(21,89,237,.15);
  transform: translateY(-4px);
}
.pvt-qc-card:hover .pvt-qc-icon {
  background: var(--pp-blue);
  color: #fff;
}
.pvt-qc-card:hover .pvt-qc-icon i {
  filter: brightness(0) saturate(100%) invert(100%);
}
.pvt-qc-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #e8edff;
  color: var(--pp-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: background .25s, color .25s;
}
.pvt-qc-label {
  font-size: .95rem;
  font-weight: 700;
  color: var(--pp-ink);
}
.pvt-qc-desc {
  font-size: .82rem;
  color: #6b7280;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.pvt-qc-tag {
  display: inline-block;
  background: #e8edff;
  color: var(--pp-blue);
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: 20px;
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 991px) {
  .pvt-qc-grid { grid-template-columns: repeat(2, 1fr); }
  .ise-panel { grid-template-columns: 1fr; }
  .ise-panel-img-placeholder { height: 220px; }
}
@media (max-width: 767.98px) {
  .ise-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .ise-tabs::-webkit-scrollbar { display: none; }
  .ise-tab { flex: 0 0 auto; }
}
@media (max-width: 576px) {
    .bfd-section {
        padding: 3rem 0 0rem !important;
    }
    .cta-section.pricing-cta {
        padding-top: 0px;
    }
    .ise-tab {
        padding: .5rem 0.4rem;
        font-size: 12px;
    }
    .ise-panel.active {
        display: block;
    }
    .ran-section {
        padding: 3rem 0 0px;
    }
    .ise-section {
        padding: 3rem 0 0px;
    }
    .if-section {
        padding: 3rem 0 3rem;
    }
    .pss-section {
        padding: 0px 0 0rem;
    }
    .pwu-section {
        padding: 0px 0;
    }
    .pwu-inner {
        grid-template-columns: 1fr;
    }
    .pss-view-all {
        margin-left: 0;
        align-self: auto;
    }
    .pss-header {
        margin-bottom: 0rem;
    }
    .ci-section {
        padding: 3rem 0 3rem;
    }
    .git-section {
        padding: 3rem 0 3rem;
    }
  .pvt-qc-grid { 
        grid-template-columns: 1fr; 
    }
    section.cta-section.contact-cta {
        padding-top: 0px;
    }
   section.cta-section.contact-cta {
        padding-bottom: 3rem;
    }
}

/* ===================== Test Duration Comparison ===================== */
.tdc-section { padding: 60px 0; background: #fff; }
.tdc-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: .4rem;
}
.tdc-sub { font-size: .9rem; color: #9ca3af; margin-bottom: 2.5rem; }
.tdc-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}
.tdc-card {
  background: #fff;
  border: 1px solid #e8edff;
  border-radius: 18px;
  padding: 2rem 2rem 2rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.tdc-card:hover {
  box-shadow: 0 12px 36px rgba(21,89,237,.13);
  transform: translateY(-4px);
}
.tdc-card-deco {
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(21,89,237,.07);
  transition: transform .35s ease, opacity .35s ease;
}
.tdc-card:hover .tdc-card-deco {
  transform: scale(1.6);
  opacity: 1;
}
.tdc-card-deco--green { background: rgba(16,185,129,.07); }
.tdc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.tdc-icon--blue { background: #e8edff; color: var(--pp-blue); }
.tdc-icon--green { background: #d1fae5; color: #10b981; }
.tdc-exam-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; margin-bottom: .4rem; }
.tdc-exam-label--blue { color: var(--pp-blue); }
.tdc-exam-label--gray { color: #9ca3af; }
.tdc-time {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--pp-blue);
  line-height: 1.1;
  margin-bottom: .6rem;
}
.tdc-time--dark { color: var(--pp-ink); }
.tdc-desc { font-size: .82rem; color: #6b7280; line-height: 1.55; margin: 0; }
.tdc-vs {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--pp-ink);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin: 0 -1px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
@media (max-width: 767px) {
  .tdc-cards { grid-template-columns: 1fr; gap: 1rem; }
  .tdc-vs { margin: 0 auto; }
}

/* ===================== AI Scoring Advantage ===================== */
.asa-section { padding: 60px 0; }
.asa-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
/* Left compare cards */
.asa-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.asa-cmp-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  border: 1px solid #e8edff;
  height: 100%;
  transition: box-shadow .25s, transform .25s;
}
.asa-cmp-card--pte { border-left: 4px solid var(--pp-blue); }
.asa-cmp-card--toefl { border-left: 4px solid #e5e7eb; }
.asa-cmp-card:hover {
  box-shadow: 0 12px 36px rgba(21,89,237,.14);
  transform: translateY(-4px);
}
.asa-cmp-exam { font-size: .72rem; font-weight: 700; letter-spacing: .06em; margin-bottom: .3rem; }
.asa-cmp-exam--blue { color: var(--pp-blue); }
.asa-cmp-exam--gray { color: #9ca3af; }
.asa-cmp-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--pp-blue);
  line-height: 1.15;
  margin-bottom: .75rem;
}
.asa-cmp-title--dark { color: var(--pp-ink); }
.asa-cmp-kc-label { font-size: .62rem; font-weight: 700; color: #9ca3af; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .55rem; }
.asa-cmp-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .45rem;
}
.asa-cmp-list li { display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--pp-ink); }
.asa-cmp-list--gray li { color: #6b7280; }
.asa-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.asa-dot--blue { background: var(--pp-blue); }
.asa-dot--gray { background: #d1d5db; }
/* Right content */
.asa-badge {
  display: inline-block;
  background: var(--pp-blue);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .25rem .75rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}
.asa-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.asa-desc { font-size: .9rem; color: #6b7280; line-height: 1.7; margin-bottom: 1.75rem; }
.asa-feat {
  display: flex;
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.asa-feat-icon { color: var(--pp-blue); font-size: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.asa-feat-title { font-size: .92rem; font-weight: 700; color: var(--pp-ink); margin-bottom: .2rem; }
.asa-feat-sub { font-size: .8rem; color: #6b7280; line-height: 1.5; }
@media (max-width: 991px) {
  .asa-inner { grid-template-columns: 1fr; }
  .asa-left { grid-template-columns: 1fr; }
}

/* ===================== PTE vs TOEFL Section-Wise Comparison ===================== */
.pvt-swc-section { padding: 60px 0; background: #EFF6FF; }
.pvt-swc-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: .5rem;
}
.pvt-swc-sub { font-size: .9rem; color: #6b7280; margin-bottom: 2rem; }
.pvt-swc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.pvt-swc-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.6rem 1.5rem;
  border: 1px solid #e8edff;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: box-shadow .25s, transform .25s;
}
.pvt-swc-card:hover {
  box-shadow: 0 12px 36px rgba(21,89,237,.13);
  transform: translateY(-4px);
}
.pvt-swc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #e8edff;
  color: var(--pp-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  transition: background .25s, color .25s;
}
.pvt-swc-card:hover .pvt-swc-icon { background: var(--pp-blue); color: #fff; }
.pvt-swc-card:hover .pvt-swc-icon i { filter: brightness(0) saturate(100%) invert(100%); }
.pvt-swc-title { font-size: .95rem; font-weight: 700; color: var(--pp-ink); }
.pvt-swc-desc { font-size: .82rem; color: #6b7280; line-height: 1.6; margin: 0; }
@media (max-width: 767.98px) { .pvt-swc-grid { grid-template-columns: 1fr; } }

/* ===================== PTE vs TOEFL Global Scale Comparison ===================== */
.pvt-gsc-section { padding: 60px 0; background: #EFF6FF; }
.pvt-gsc-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 2.5rem;
}
.pvt-gsc-wrap {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem 2.5rem 1.75rem;
  border: 1px solid #e8edff;
  box-shadow: 0 8px 40px rgba(21,89,237,.10);
  max-width: 860px;
  margin: 0 auto;
}
.pvt-gsc-row { margin-bottom: 2rem; }
.pvt-gsc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .65rem;
}
.pvt-gsc-label { font-size: .85rem; font-weight: 700; color: var(--pp-ink); }
.pvt-gsc-label--blue { color: var(--pp-blue); }
.pvt-gsc-level { font-size: .75rem; font-weight: 600; }
.pvt-gsc-level--blue { color: var(--pp-blue); }
.pvt-gsc-level--gray { color: #6b7280; }
/* track + badge wrapper */
.pvt-gsc-track-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.pvt-gsc-track {
  flex: 1;
  background: #e9ecf5;
  border-radius: 30px;
  height: 32px;
  overflow: hidden;
}
.pvt-gsc-bar {
  height: 100%;
  border-radius: 30px;
  transition: width .8s ease;
}
.pvt-gsc-bar--blue { background: var(--pp-blue); }
.pvt-gsc-bar--dark { background: #374151; }
/* score badge that sits outside the track */
.pvt-gsc-badge {
  flex-shrink: 0;
  min-width: 42px;
  height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
}
.pvt-gsc-badge--blue { background: var(--pp-blue); }
.pvt-gsc-badge--dark { background: #374151; }
.pvt-gsc-scale {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  padding-top: .85rem;
  border-top: 1px solid #e9ecf5;
}
.pvt-gsc-scale span { font-size: .72rem; color: #9ca3af; font-weight: 500; }

/* ===================== IELTS Academic vs General Cards ===================== */
.iag-section { padding: 60px 0; background: #fff; position: relative; }
.iag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}
.iag-card {
  background: #fff;
  border: 1px solid #e8edff;
  border-radius: 20px;
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow .25s, transform .25s;
}
.iag-card:hover {
  box-shadow: 0 14px 44px rgba(21,89,237,.13);
  transform: translateY(-4px);
}
.iag-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.iag-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.iag-icon--blue { background: #e8edff; color: var(--pp-blue); }
.iag-icon--dark { background: #f1f3f5; color: #374151; }
.iag-tag {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .25rem .65rem;
  border-radius: 20px;
}
.iag-tag--blue { background: #e8edff; color: var(--pp-blue); }
.iag-tag--gray { background: #f1f3f5; color: #6b7280; }
.iag-title { font-size: 1.5rem; font-weight: 800; color: var(--pp-ink); margin: 0; }
.iag-desc { font-size: .85rem; color: #6b7280; line-height: 1.6; margin: 0; }
.iag-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .85rem;
  flex: 1;
}
.iag-list li { display: flex; align-items: flex-start; gap: .65rem; }
.iag-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #e8edff;
  color: var(--pp-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.iag-list strong { display: block; font-size: .83rem; font-weight: 700; color: var(--pp-ink); }
.iag-list span { font-size: .76rem; color: #9ca3af; }
.iag-btn {
  display: block;
  text-align: center;
  padding: .8rem 1.5rem;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.iag-btn:hover { opacity: .88; color:  #fff; }
.iag-btn--blue { background: var(--pp-blue); color: #fff; }
.iag-btn--dark { background: #1f2937; color: #fff; }
.iag-deco {
  position: absolute;
  bottom: 10px; right: 30px;
  width: 110px;
  pointer-events: none;
  opacity: .7;
  display: none;
}
@media (max-width: 767px) {
  .iag-grid { grid-template-columns: 1fr; }
}

/* ===================== IELTS Academic vs General – Comparison Table ===================== */
.ict-section { padding: 60px 0; background: #f7f9ff; }
.ict-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 2rem;
}
.ict-table {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e9ecf5;
  background: #fff;
  box-shadow: 0 4px 24px rgba(21,89,237,.07);
}
/* 3-col grid: feature col | mid blue col | right col */
.ict-row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}
.ict-row:not(.ict-row--head):not(.ict-row--last) {
  border-bottom: 1px solid #e9ecf5;
}
.ict-row:hover:not(.ict-row--head) .ict-cell--feat { background: #f5f7ff; }
.ict-cell {
  padding: 1rem 1.25rem;
  font-size: .84rem;
  color: #374151;
  line-height: 1.55;
  border-right: 1px solid rgba(255,255,255,.15);
}
/* Feature (left) column */
.ict-cell--feat {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 700;
  color: var(--pp-ink);
  border-right: 1px solid #e9ecf5;
  background: #fff;
  transition: background .2s;
}
/* Middle (blue) column */
.ict-cell--mid {
  background: var(--pp-blue);
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.18);
}
/* Header row */
.ict-row--head { background: #fff; }
.ict-head {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #9ca3af;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid #e9ecf5;
}
.ict-head.ict-cell--mid {
  color: #fff;
  background: var(--pp-blue);
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.ict-head.ict-cell--feat {
  color: #9ca3af;
  border-bottom: 1px solid #e9ecf5;
  background: #fff;
}
/* Icons – solid blue circle with white icon */
.ict-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--pp-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
    .qc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .efc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
  .ict-row { grid-template-columns: 1fr; }
  .ict-cell--feat { border-right: none; border-bottom: 1px solid #e9ecf5; }
  .ict-cell--mid { border-right: none; }
}


/* ===================== Who Should Take Which Test ===================== */
.wst-section { padding: 60px 0; background: #f7f9ff; }
.wst-heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--pp-ink);
  margin-bottom: 2rem;
}
.wst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
/* Shared card base */
.wst-card {
  border-radius: 20px;
  padding: 2.25rem 2rem 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Blue card */
.wst-card--blue { background: var(--pp-blue); }
/* White card */
.wst-card--white {
  background: #fff;
  border: 1px solid #e8edff;
  box-shadow: 0 4px 24px rgba(21,89,237,.07);
}
/* Decorative icon — top right */
.wst-deco-icon {
  position: absolute;
  top: 1.5rem; right: 1.75rem;
  font-size: 3.5rem;
  color: rgba(255,255,255,.18);
  line-height: 1;
  pointer-events: none;
}
.wst-deco-icon--gray { color: rgba(0,0,0,.07); }
/* Card title */
.wst-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.wst-card-title--dark { color: var(--pp-ink); }
/* Checklist */
.wst-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
}
.wst-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .85rem;
  color: rgba(255,255,255,.9);
  line-height: 1.5;
}
.wst-list li i { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; color: rgba(255,255,255,.85); }
.wst-list--dark li { color: #374151; }
.wst-list--dark li i { color: var(--pp-blue); }
/* Buttons */
.wst-btn {
  display: inline-block;
  padding: .65rem 1.5rem;
  border-radius: 50px;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
  border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.wst-btn--white {
  background: #fff;
  color: var(--pp-blue);
  border-color: #fff;
}
.wst-btn--white:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.wst-btn--outline {
  background: #fff;
  color: var(--pp-ink);
  border-color: #d1d5db;
}
.wst-btn--outline:hover {
  border-color: var(--pp-blue);
  color: var(--pp-blue);
}
@media (max-width: 767px) {
  .wst-grid { grid-template-columns: 1fr; }
}

/* ===================== Run Anywhere Section ===================== */
.ran-section {
  padding: 60px 0;
  background: #fff;
}
.ran-top { margin-bottom: 0rem; }
.ran-heading {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.2;
  margin-bottom: .8rem;
}
.ran-sub { font-size: 1rem; color: #6b7280; line-height: 1.7; margin: 0; }

/* 2-column inner */
.ran-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* Feature list */
.ran-list { display: flex; flex-direction: column; gap: 1.3rem; }
.ran-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid #e9ecf5;
}
.ran-item:last-child { border-bottom: none; padding-bottom: 0; }
.ran-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.ran-icon img { width: 22px; }
.ran-icon--blue   { background: #e8edff; color: var(--pp-blue); }
.ran-icon--green  { background: #e6faf0; color: #16a34a; }
.ran-icon--orange { background: #fff4e5; color: #f97316; }
.ran-icon--purple { background: #f3e8ff; color: #7c3aed; }
.ran-icon--red    { background: #fef2f2; color: #ef4444; }
.ran-item strong { display: block; font-size: .95rem; font-weight: 700; color: var(--pp-ink); margin-bottom: .15rem; }
.ran-item p { font-size: .85rem; color: #6b7280; margin: 0; line-height: 1.5; }

/* Right mockup */
.ran-mockup { position: relative; }
.ran-deco {
  position: absolute;
  top: -30px; right: -30px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,85,255,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Monitor */
.ran-monitor {
  background: #1a2a6c;
  border-radius: 14px 14px 0 0;
  padding: 8px;
  box-shadow: 0 20px 60px rgba(47,85,255,.22);
  position: relative;
}
.ran-screen {
  background: #f5f7ff;
  border-radius: 8px;
  overflow: hidden;
  min-height: 220px;
}
.ran-stand-neck {
  width: 60px; height: 18px;
  background: #2d3a6e;
  margin: 0 auto;
}
.ran-stand-base {
  width: 130px; height: 7px;
  background: #3a4880;
  border-radius: 4px;
  margin: 0 auto;
}

/* Dashboard inside screen */
.ran-dash { display: flex; height: 100%; font-size: .58rem; min-height: 210px; }

.ran-dash-sb {
  width: 32px;
  background: #1a2a6c;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem 0;
  gap: .5rem;
  flex-shrink: 0;
}
.ran-dsb-logo { color: #fff; font-size: .85rem; margin-bottom: .3rem; }
.ran-dsb-icons { display: flex; flex-direction: column; gap: .55rem; }
.ran-dsb-icons i { color: rgba(255,255,255,.4); font-size: .72rem; display: block; }

.ran-dash-main { flex: 1; padding: .65rem .75rem; display: flex; flex-direction: column; gap: .5rem; }

.ran-dash-topbar {
  display: flex; align-items: center; justify-content: space-between;
}
.ran-dash-title { font-size: .68rem; font-weight: 700; color: var(--pp-ink); }
.ran-dash-actions { display: flex; align-items: center; gap: .35rem; }
.ran-dash-pill {
  background: #eef2ff; color: var(--pp-blue);
  border-radius: 20px; padding: .15rem .45rem;
  font-size: .52rem; font-weight: 600;
}
.ran-dash-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5e7eb; }
.ran-dot--blue { background: var(--pp-blue); }

/* Stats */
.ran-dash-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem; }
.ran-ds-card { background: #fff; border-radius: 7px; padding: .4rem .45rem; }
.ran-ds-label { font-size: .5rem; color: #9ca3af; font-weight: 600; }
.ran-ds-val   { font-size: .72rem; font-weight: 800; color: var(--pp-ink); line-height: 1.2; }
.ran-ds-delta { font-size: .48rem; margin-top: .1rem; }
.ran-delta--up   { color: #16a34a; }
.ran-delta--down { color: #ef4444; }

/* Mini table */
.ran-dash-table { flex: 1; }
.ran-dt-head, .ran-dt-row { display: grid; grid-template-columns: 1.4fr 1.2fr .6fr .7fr; }
.ran-dt-head { font-size: .5rem; font-weight: 700; color: #9ca3af; letter-spacing: .04em; padding-bottom: .25rem; border-bottom: 1px solid #e9ecf5; margin-bottom: .15rem; }
.ran-dt-row  { font-size: .52rem; color: #374151; padding: .2rem 0; border-bottom: 1px solid #f3f4f6; align-items: center; }
.ran-st--pass { color: #16a34a; font-weight: 700; }
.ran-st--fail { color: #ef4444; font-weight: 700; }

/* Floating badge */
.ran-float-badge {
  position: absolute;
  bottom: 30px;
  left: -30px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(47,85,255,.18);
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  z-index: 3;
  min-width: 100px;
}
.ran-badge-ring { position: relative; width: 54px; height: 54px; }
.ran-ring-svg { width: 100%; height: 100%; }
.ran-badge-pct {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: .82rem; font-weight: 800; color: var(--pp-ink);
}
.ran-badge-label { font-size: .5rem; font-weight: 700; color: #9ca3af; letter-spacing: .05em; text-align: center; }

/* ===================== Book a Free Demo (institute-software standalone) ===================== */
.bfd-section {
  padding: 60px 0;
  background: #ffffff;
}
/* 2-column layout */
.bfd-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.bfd-right { width: 100%; }

/* Left side */
.bfd-heading {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.25;
  margin: 0 0 1rem;
}
.bfd-sub {
  font-size: .88rem;
  color: #6b7280;
  line-height: 1.75;
  margin: 0 0 1.75rem;
}
.bfd-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 2rem;
}
.bfd-pill {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #f5f7ff;
  border: 1px solid #e4e8fb;
  border-radius: 10px;
  padding: .65rem .9rem;
  font-size: .83rem;
  font-weight: 600;
  color: var(--pp-ink);
}
.bfd-pill-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #e4e8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: var(--pp-blue);
  flex-shrink: 0;
}
.bfd-pill-ico img
{
  width: 16px;
}
.bfd-expert {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: #f5f7ff;
  border: 1px solid #e4e8fb;
  border-radius: 12px;
  padding: .85rem 1.1rem;
  width: fit-content;
}
.bfd-expert-ico {
  font-size: 2rem;
  color: var(--pp-blue);
  line-height: 1;
}
.bfd-expert-ico img
{
  width: 30px;
}
.bfd-expert-label {
  display: block;
  font-size: .75rem;
  color: #6b7280;
  margin-bottom: .1rem;
}
.bfd-expert-phone {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--pp-ink);
  text-decoration: none;
}
.bfd-expert-phone:hover { color: var(--pp-blue); }

/* Right: card */
.bfd-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(47, 85, 255, .14);
  overflow: hidden;
}

/* Gradient header */
.bfd-card-head {
  background: linear-gradient(135deg, #1a3ad6 0%, #3d6aff 100%);
  padding: 1.6rem 2rem;
  text-align: center;
}
.bfd-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .35rem;
}
.bfd-card-sub {
  font-size: .83rem;
  color: rgba(255,255,255,.82);
  margin: 0;
}

/* Form */
.bfd-form {
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bfd-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.bfd-field { display: flex; flex-direction: column; gap: .35rem; }
.bfd-field > p {margin-bottom: 0px;}
.bfd-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--pp-ink);
}
.bfd-req { font-style: normal; color: #ef4444; }
.bfd-input {
  border: 1.5px solid #e2e5ea;
  border-radius: 8px;
  padding: .62rem .9rem;
  font-size: .84rem;
  color: var(--pp-ink);
  font-family: inherit;
  outline: none;
  background-color: #fff;
  width: 100%;
  transition: border-color .2s;
}
.bfd-input:focus,
.bfd-input:active
{
  border-style: solid !important;
  outline: none !important;
}
.marginb-0
{
  margin-bottom: 0px !important;
}
.marginb-0 > p
{
  margin-bottom:0px
}
.bfd-input:focus { border-color: var(--pp-blue); }
.bfd-input::placeholder { color: #c4cad8; }
textarea.bfd-input {height:80px; resize: vertical;}
/* Phone prefix */
.bfd-phone-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #e2e5ea;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .2s;
}
.bfd-phone-wrap:focus-within { border-color: var(--pp-blue); }
.bfd-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 .7rem;
  background: #f5f6fa;
  font-size: .82rem;
  font-weight: 600;
  color: #4b5563;
  border-right: 1.5px solid #e2e5ea;
  white-space: nowrap;
}
.bfd-phone-input {
  border: none;
  border-radius: 0;
  box-shadow: none !important;
  flex: 1;
}
.bfd-phone-input:focus { border-color: transparent; }

.bfd-select { cursor: pointer; }
.bfd-textarea { resize: none; }

/* Submit */
.bfd-submit {
  width: 100%;
  padding: .88rem !important;
  border-radius: 10px !important;
  background: var(--pp-blue) !important;
  color: #fff !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .2s !important;
  font-family: inherit !important;
  margin-top: .2rem !important;
}
.bfd-submit:hover { background: var(--pp-blue-dark); }

/* Legal */
.bfd-legal {
  text-align: center;
  font-size: .72rem;
  color: #9ca3af;
  margin: 0;
}
.bfd-legal a {
  color: var(--pp-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===================== Powerful Software + Demo Form ===================== */
.psd-section {
  padding: 60px 0;
  background: #fff;
}
.psd-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Left */
.psd-heading {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.25;
  margin: 0 0 1rem;
}
.psd-sub {
  font-size: .88rem;
  color: #6b7280;
  line-height: 1.75;
  margin: 0 0 1.75rem;
}

/* Feature pills */
.psd-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 2rem;
}
.psd-pill {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #f5f7ff;
  border: 1px solid #e4e8fb;
  border-radius: 10px;
  padding: .65rem .9rem;
  font-size: .83rem;
  font-weight: 600;
  color: var(--pp-ink);
}
.psd-pill-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #e4e8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: var(--pp-blue);
  flex-shrink: 0;
}

/* Expert contact */
.psd-expert {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: #f5f7ff;
  border: 1px solid #e4e8fb;
  border-radius: 12px;
  padding: .85rem 1.1rem;
  width: fit-content;
}
.psd-expert-ico {
  font-size: 2rem;
  color: var(--pp-blue);
  line-height: 1;
}
.psd-expert-label {
  display: block;
  font-size: .75rem;
  color: #6b7280;
  margin-bottom: .1rem;
}
.psd-expert-phone {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--pp-ink);
  text-decoration: none;
}
.psd-expert-phone:hover { color: var(--pp-blue); }

/* Right: card */
.psd-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(47, 85, 255, .13);
  overflow: hidden;
}
.psd-card-head {
  background: var(--pp-blue);
  padding: 1.4rem 1.6rem;
  text-align: center;
}
.psd-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .3rem;
}
.psd-card-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.8);
  margin: 0;
}

/* Form inside card */
.psd-form {
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.psd-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.psd-field { display: flex; flex-direction: column; gap: .35rem; }
.psd-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--pp-ink);
}
.psd-req { font-style: normal; color: #ef4444; }
.psd-input {
  border: 1.5px solid #e2e5ea;
  border-radius: 8px;
  padding: .6rem .85rem;
  font-size: .83rem;
  color: var(--pp-ink);
  font-family: inherit;
  outline: none;
  background: #fff;
  transition: border-color .2s;
  width: 100%;
  appearance: none;
}
.psd-input:focus { border-color: var(--pp-blue); }
.psd-input::placeholder { color: #c0c8d8; }

/* Phone prefix */
.psd-phone-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #e2e5ea;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .2s;
}
.psd-phone-wrap:focus-within { border-color: var(--pp-blue); }
.psd-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  background: #f5f6fa;
  font-size: .82rem;
  font-weight: 600;
  color: #4b5563;
  border-right: 1.5px solid #e2e5ea;
  white-space: nowrap;
}
.psd-phone-input {
  border: none;
  border-radius: 0;
  box-shadow: none !important;
}
.psd-phone-input:focus { border-color: transparent; }

.psd-select { cursor: pointer; color: #c0c8d8; }
.psd-select:valid,
.psd-select option:not([disabled]) { color: var(--pp-ink); }
.psd-textarea { resize: none; }

/* Submit */
.psd-submit {
  width: 100%;
  padding: .85rem;
  border-radius: 10px;
  background: var(--pp-blue);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  cursor: pointer;
  transition: background .2s;
  font-family: inherit;
}
.psd-submit:hover { background: var(--pp-blue-dark); }

/* Legal */
.psd-legal {
  text-align: center;
  font-size: .72rem;
  color: #9ca3af;
  margin: 0;
}
.psd-legal a {
  color: var(--pp-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===================== Scale Institute CTA ===================== */
.si-cta-section {
  padding: 60px 0;
  background: #f8faff;
}
.cta-section.institue-landing-cta {
    padding: 60px 0;
}
.si-cta-inner {
  background: var(--pp-blue);
  border-radius: 20px;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Icon circle */
.si-cta-icon {
  flex-shrink: 0;
  width: 68px;
  /* height: 68px; */
  border-radius: 50%;
  /* background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3); */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
}

/* Text block */
.si-cta-text {
  flex: 1;
  min-width: 0;
}
.si-cta-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .35rem;
}
.si-cta-sub {
  font-size: .875rem;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
  margin: 0;
}

/* Buttons */
.si-cta-btns {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.si-btn {
  font-size: .875rem;
  font-weight: 700;
  padding: .6rem 1.4rem;
  border-radius: 10px;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.si-btn--white {
  background: #fff;
  color: var(--pp-blue);
  border: 2px solid #fff;
}
.si-btn--white:hover {
  background: #eef1ff;
  border-color: #eef1ff;
  color: var(--pp-blue-dark);
}
.si-btn--outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.6);
}
.si-btn--outline:hover,
.si-btn--outline:focus
{
  background: rgba(255,255,255,.15);
  outline:  none !important;
  border-color: #fff;
  color: #fff;
}
.si-btn--outline:active
{
  background: rgba(255,255,255,.1) !important;
  border-color: #fff  !important;
  color: #fff !important;
}

/* Arrow button — white bg, blue icon */
.pss-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-blue);
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.pss-card:hover .pss-arrow {
  background: var(--pp-blue);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(47,85,255,.4);
}

/* Staggered CSS entrance — no JS reveal needed on cards */
@keyframes pssCardIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pss-card--1 { animation: pssCardIn .6s ease forwards .15s; opacity: 0; }
.pss-card--2 { animation: pssCardIn .6s ease forwards .3s;  opacity: 0; }

@media (max-width: 768px) {
  .pss-grid { grid-template-columns: 1fr; }
  .pss-header { flex-direction: column; align-items: flex-start; }
}

/* ===================== CTA BANNER SECTION ===================== */
.cta-section {
  padding: 60px 0;
  background: #fff;
}

.cta-inner {
  position: relative;
  background: var(--pp-blue);
  border-radius: 24px;
  padding: 45px 40px;
  text-align: center;
  overflow: hidden;
}

/* Decorative rings (top-right corner) */
.cta-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.15);
  pointer-events: none;
}

.cta-ring--1 {
  width: 260px;
  height: 260px;
  top: -80px;
  right: -60px;
}

.cta-ring--2 {
  width: 380px;
  height: 380px;
  top: -140px;
  right: -120px;
}

.cta-ring--3 {
  width: 500px;
  height: 500px;
  top: -200px;
  right: -180px;
}

.cta-title {
  position: relative;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.25;
  z-index: 1;
}

.cta-sub {
  position: relative;
  color: rgba(255,255,255,.82);
  font-size: .98rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 2rem;
  z-index: 1;
}

.cta-btns {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  z-index: 1;
}

.cta-btn {
  border-radius: 100px;
  font-weight: 700;
  font-size: .95rem;
  padding: .7rem 1.8rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .18s;
}

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

/* White filled button */
.cta-btn--white {
  background: #fff;
  color: var(--pp-blue);
  border: 2px solid #fff;
}

.cta-btn--white:hover {
  background: #eef2ff;
  border-color: #eef2ff;
  color: var(--pp-blue);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Outline button (white border, transparent bg) */
.cta-btn--outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.6);
}

.cta-btn--outline:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* ===================== NEWSLETTER SECTION ===================== */
.newsletter-section {
  padding: 60px 0;
  background: #fff;
}

.newsletter-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--pp-blue);
  margin-bottom: .75rem;
}

.newsletter-sub {
  color: #6b7280;
  font-size: .97rem;
  line-height: 1.7;
  max-width: 500px;
  margin: 0 auto 2.5rem;
}

.newsletter-form-wrap {
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-form {
  display: flex;
  align-items: center;
  background: #eef2ff;
  border-radius: 100px;
  padding: 6px 6px 6px 24px;
  gap: .5rem;
}

.newsletter-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  color: var(--pp-ink) !important;
  outline: none;
  box-shadow: none !important;
  padding: .5rem 0 !important;
  font-family: inherit;
}

.newsletter-input:focus,
.newsletter-input:active {
  box-shadow: none !important;
  outline: none !important;
}

.newsletter-input::placeholder {
  color: #9ca3af;
}

.newsletter-btn {
  flex-shrink: 0;
  background: var(--pp-blue)  !important;
  color: #fff   !important;
  border: none  !important;
  border-radius: 100px !important;
  font-size: .95rem  !important;
  font-weight: 700 !important;
  padding: .75rem 1.8rem  !important;
  cursor: pointer !important;
  font-family: inherit    !important;
  transition: background .2s, transform .18s, box-shadow .2s;
  white-space: nowrap  !important;
}

.newsletter-btn:hover {
  background: var(--pp-blue-dark);
  transform: translateX(2px);
  box-shadow: 0 6px 20px rgba(47,85,255,.35);
}

/* ===================== FOOTER ===================== */
.site-footer {
  background: #1a2560;
  color: #c5cde8;
  padding: 60px 0 0;
}

/* Top grid: 1 brand col + 3 nav cols */
.footer-top {
  display: grid;
  grid-template-columns: 280px repeat(1, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-links-wrapper
{
  display:  grid;
  gap: 2.5rem;
  grid-template-columns: repeat(3,1fr);
}
/* Brand col */
.footer-logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 1rem;
}

.footer-logo-img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-tagline {
  font-size: .85rem;
  line-height: 1.65;
  color: #a0aac8;
  margin-bottom: 1.5rem;
  max-width: 240px;
}

.footer-contact-heading {
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .75rem;
}

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

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  color: #a0aac8;
}

.footer-contact-list li a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.footer-contact-list li a:hover {
  color: #fff;
}

.footer-contact-list .bi {
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}

/* Nav cols */
.footer-nav-col { }

.footer-nav-heading {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .85rem;
}

.footer-nav-heading.mt-4 { margin-top: 2rem !important; }

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.footer-nav-list a {
  font-size: .85rem;
  color: #a0aac8;
  text-decoration: none;
  transition: color .2s;
}

.footer-nav-list a:hover {
  color: #fff;
}

/* Divider */
.footer-divider {
  border-top: 1px solid rgba(255,255,255,.1);
}

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0 2rem;
  flex-wrap: wrap;
}

.footer-bottom-left { flex: 1; }

.footer-copy {
  font-size: .8rem;
  color: #a0aac8;
  margin-bottom: .35rem;
}

.footer-disclaimer {
  font-size: .75rem;
  color: #6b7899;
  margin: 0;
  max-width: 520px;
  line-height: 1.6;
}

/* Social icons */
.footer-socials {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
}
.footer-socials a
{
  text-decoration: none;
}
.footer-socials i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: background .2s, transform .18s;
}

.footer-socials i:hover {
  background: var(--pp-blue);
  color: #fff;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 991px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575px) {
    
    .aivh-section {
        padding: 3rem 0 0px;
    }
    .efc-section {
        padding: 3rem 0;
    }
    .swc-section {
        padding: 0px 0;
    }
    .scs-section {
        padding: 3rem 0px;
    }
    .wsp-section {
        padding: 0px 0;
    }
    .wst-section {
        padding: 3rem 0 0px;
    }
    .tdc-section {
        padding: 3rem 0px;
    }
    .asa-section {
        padding: 0 0 3rem;
    }
    .asa-inner {
        gap: 1.5rem;
    }
    .pvt-gsc-section {
        padding: 0px 0 3rem;
    }
    .dct-deco-right {
        display: none;
    }
    .faq-heading {
        margin-bottom: 1rem;
    }
    .pvt-swc-section {
        padding: 3rem 0 3rem;
    }
    .faq-section {
        padding: 0px 0 3rem;
    }
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .iag-section {
    padding: 3rem 0 0px;
}
    .pvt-qc-section {
        padding: 3rem 0 0rem;
    }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .dct-section {
    padding: 3rem 0 0px;
    }
    .aivh-wrap {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575.98px) {

    .efc-grid {
        grid-template-columns: repeat(1, 1fr);
    }
        .qc-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* ===================== ABOUT US — HERO ===================== */
.about-hero {
  position: relative;
  background: #f4f6fb;
  padding: 200px 0 90px;
  overflow: hidden;
  background-image: url(../images/mainBanner-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 500px;
    display: flex;
    align-items: center;
}

/* Decorative wave SVG lines */
.about-hero-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.awave {
  position: absolute;
  width: 100%;
  height: 100%;
}

.awave--1 { top: 0; left: 0; opacity: .8; }
.awave--2 { top: 10%; left: 0; opacity: .6; }
.awave--3 { bottom: 0; left: 0; opacity: .5; }

/* Content */
.about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0 auto;
}

.about-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

.about-hero-sub {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto 2.25rem;
}

.about-hero-btns {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ===================== WHO WE ARE SECTION ===================== */
.who-section {
  padding: 60px 0;
  background: #fff;
}

/* Text block */
.who-text {
  max-width: 680px;
  margin: 0 auto 3.5rem;
}

.who-title {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--pp-blue);
  margin-bottom: 1rem;
}

.who-sub {
  color: #6b7280;
  font-size: .95rem;
  line-height: 1.8;
  margin-bottom: 1.75rem;
}

/* Image collage */
.who-collage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
}

.who-img {
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
}

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

/* Left — shorter, top-aligned */
.who-img--left {
  width: 28%;
  height: 384px;
}

/* Center — tallest, focal point */
.who-img--center {
  width: 34%;
  height: 512px;
  margin-top: 60px;
}
.who-collage {
    margin-top: -60px;
}

/* Right — shorter, top-aligned */
.who-img--right {
  width: 28%;
  height: 384px;
}

@media (max-width: 767px) {
  /* Simply stacking all 3 full-width, full-height (400px each) photos made
     this section sprawl over 1200px of scrolling. Instead, keep it reading
     as a proper photo collage — like the desktop version — by re-using a
     compact 2-column layout: one tall photo on the left, two smaller ones
     stacked on the right, so the whole thing fits in roughly a third of
     the space while still feeling like an intentional collage, not a list. */
  .who-collage {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: repeat(2, auto);
    gap: .65rem;
    align-items: stretch;
    margin-top: 0;   /* cancel the desktop -60px offset that compensated
                        for .who-img--center's own top margin, now removed */
  }
  .who-img--left {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    height: auto;
  }
  .who-img--center,
  .who-img--right {
    grid-column: 2;
    width: 100%;
    height: 175px;
    margin-top: 0;
  }
  .who-img--center { grid-row: 1; }
  .who-img--right  { grid-row: 2; }
}

/* ===================== MISSION & VISION SECTION ===================== */
.mv-section {
  padding: 60px 0;
  background: #fff;
}

/* ── M&V image animations ───────────────────────────────── */
@keyframes mvKenBurns {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1%, -1%); }
  100% { transform: scale(1)    translate(0, 0); }
}
@keyframes mvBadgePopR {
  0%   { opacity: 0; transform: translateX(32px) scale(.7); }
  65%  { transform: translateX(-5px) scale(1.05); }
  85%  { transform: translateX(3px)  scale(.98); }
  100% { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes mvBadgePopL {
  0%   { opacity: 0; transform: translateX(-32px) scale(.7); }
  65%  { transform: translateX(5px)  scale(1.05); }
  85%  { transform: translateX(-3px) scale(.98); }
  100% { opacity: 1; transform: translateX(0)     scale(1); }
}
@keyframes mvIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,85,255,.25); }
  50%       { box-shadow: 0 0 0 6px rgba(47,85,255,0); }
}
@keyframes mvIconPulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105,.25); }
  50%       { box-shadow: 0 0 0 6px rgba(5,150,105,0); }
}
@keyframes mvBadgeBob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* Image wrap */
.mv-img-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
}

.mv-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
  transform-origin: center center;
  animation: mvKenBurns 10s ease-in-out infinite;
}

/* Floating badges */
.mv-badge {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 130px;
  opacity: 0;
}

.mv-badge--top {
  top: 1.25rem;
  right: -1.5rem;
  animation:
    mvBadgePopR .7s cubic-bezier(.34,1.56,.64,1) .3s forwards,
    mvBadgeBob  3.6s ease-in-out 1.1s infinite;
}

.mv-badge--bottom {
  bottom: 1.5rem;
  left: -1rem;
  animation:
    mvBadgePopL .7s cubic-bezier(.34,1.56,.64,1) .5s forwards,
    mvBadgeBob  4s ease-in-out 1.4s infinite;
}

/* Icon glow pulse after badges appear */
.mv-badge--top .mv-badge-icon {
  animation: mvIconPulseGreen 2.5s ease-in-out 1.5s infinite;
}
.mv-badge--bottom .mv-badge-icon--blue {
  animation: mvIconPulse 2.5s ease-in-out 1.9s infinite;
}

.mv-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #d1fae5;
  color: #059669;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.mv-badge-icon--blue {
  background: #dbeafe;
  color: var(--pp-blue);
}

.mv-badge-num {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.1;
}

.mv-badge-label {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* Heading */
.mv-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.3;
  margin-bottom: 0;
}

.mv-intro {
  font-size: .88rem;
  color: #6b7280;
  line-height: 1.7;
  margin: 0;
}

/* Cards */
.mv-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 2rem;
}

.mv-card:last-child { margin-bottom: 0; }

/* Icon + title on same row */
.mv-card-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .65rem;
}

.mv-card-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.mv-card-ico--blue   { background: #dbeafe; color: var(--pp-blue); }
.mv-card-ico--orange { background: #ffedd5; color: #f97316; }

.mv-card-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pp-ink);
  margin: 0;
  line-height: 1.2;
}

.mv-card-body {
  font-size: .9rem;
  color: #6b7280;
  line-height: 1.75;
  margin: 0;
  padding-left: calc(52px + .9rem);
}
.about-sec {
    background-color: #F0F6F6;
}

/* Decorative student cap — Mission & Vision section */
.mv-deco-cap {
  position: absolute;
  top: -10px;
  right: 0;
  width: 110px;
  opacity: 1;
  pointer-events: none;
  transform: rotate(12deg);
  filter: drop-shadow(0 4px 12px rgba(47,85,255,.15));
}
.tbl-logo img {
    opacity: 60%;
    max-width: 100px;
}

/* =====================================================================
   GLOBAL RESPONSIVE — iPad (≤991px) & Mobile (≤767px / ≤575px)
   Does NOT override desktop styles (no min-width guards needed here
   because all rules are inside max-width media queries).
   ===================================================================== */
.skill-cards-section.about-sec {
    padding: 40px 0;
}
/* ── Tablet (≤991px) ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* Hero: reduce decorative circle sizes */
  .circle-left  { width: 380px; }
  .circle-right { width: 340px; right: -100px; bottom: -80px; }

  /* Hero stat cards: keep but pull inward */
  .stat-courses { left: 0; }
  .stat-tutors  { right: 0; }

  /* Skill cards: 2×2 grid, remove stagger offset */
  .sk-cards-row {
    flex-wrap: wrap;
  }
  .sk-card {
    flex: 0 0 calc(50% - .45rem);
    margin-top: 0 !important;
  }

  /* How-it-works steps: simplify grid to icon+card only */
  .how-step {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .how-num { display: none; }
  .how-step--odd .how-card  { grid-column: 1; margin-left: 0; }
  .how-step--even .how-card { grid-column: 1; }

  /* How-it-works collage: stack below steps */
  .how-collage {
    grid-template-columns: 1fr;
  }
  .how-img-1, .how-img-2 { height: 200px; }

  /* Why-Students-Prefer: 3 columns */
  .wsp-grid { grid-template-columns: repeat(3, 1fr); }

  .pvt-swc-section { overflow-x: auto; }

  /* Detailed comparison tables: dropped the horizontal-scroll table
     entirely — mobile/tablet visitors don't reach for a sideways swipe
     on a data table, they just miss the second column. Each row is now
     its own stacked card: the feature name up top, then each exam's
     value listed underneath with a small label (from the value's
     data-exam attribute) identifying which exam it belongs to. Nothing
     to scroll, nothing hidden off-screen. */
  .dct-table, .ict-table {
    display: block;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  .dct-thead, .ict-table thead { display: none; }
  .dct-row {
    display: block;
    background: #fff !important;
    border: 1px solid #e9ecf5;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: .85rem;
  }
  .dct-row--last { margin-bottom: 0; border-bottom: 1px solid #e9ecf5; }
  .dct-td--feat {
    border-right: none;
    border-bottom: 1px solid #eef1f7;
    padding: 0 0 .75rem;
    margin-bottom: .65rem;
  }
  .dct-td:not(.dct-td--feat) {
    display: block;
    padding: .55rem 0;
  }
  .dct-td:not(.dct-td--feat):not(:last-child) {
    border-bottom: 1px dashed #eef1f7;
  }
  .dct-td:not(.dct-td--feat)::before {
    content: attr(data-exam);
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pp-blue);
    margin-bottom: .2rem;
  }

  /* Forms side-by-side sections: stack */
  .bfd-inner,
  .psd-inner,
  .ran-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Scale Institute CTA: allow wrap */
  .si-cta-inner {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  .si-cta-btns { width: 100%; justify-content: flex-start; }

  /* Testimonials: show 1.2 cards at a time */
  .testi-card {
    flex: 0 0 calc(100% - 1.25rem * 0.4);
  }

  /* Pricing cards tray: allow vertical scroll */
  .pricing-cards { overflow-x: auto; }

  /* Floating badge on run-anywhere mockup */
  .ran-float-badge { left: 0; }

  /* Mission & vision floating badges: don't go off-screen */
  .mv-badge--top    { right: 0; }
  .mv-badge--bottom { left: 0; }

  /* Run-anywhere inner */
  .ran-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .p-card {
        background: #fff;
    }
}
/* ── iPad portrait & large phone landscape (≤767px) ─────────────── */
@media (max-width: 767.98px) {
    .cta-section.home-cta-section
 {
    padding-top: 0px;
}
.newsletter-section {
     padding-top: 0px;
     padding-bottom: 40px;
}

  /* Section paddings: slightly tighter */
  .skills-section,
  .how-section,
  .skill-cards-section,
  .why-section,
  .testi-section,
  .pricing-section,
  .articles-section,
  .features-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Hero: hide circle patterns on medium phones */
  .circle-left, .circle-right { display: none; }

  /* Hero stat cards: stack below the visual */
  .stat-card {
    position: static;
    margin: .5rem 0;
    width: fit-content;
  }
  .stat-courses, .stat-online, .stat-tutors {
    position: static;
  }

  /* Hero visual: allow natural height */
  .hero-visual { aspect-ratio: auto; max-width: 100%; }
  .hero-blob   { position: relative; inset: auto; border-radius: 20px; height: 260px; }

  /* Skills collage — simplified, mobile-native layout: the two photos sit
     side by side as a clean, evenly-cropped pair (each keeps its own
     rounded corners), and the experience badge is its own separate stat
     card centered underneath, in normal document flow. No overlapping,
     no absolutely-positioned badge pinned to a hand-measured seam between
     two arbitrary-height boxes — that approach kept fighting itself
     (nudging the badge or the photo heights to fix one problem kept
     breaking the crop or the placement of the other). This is simpler and
     robust to any source image's proportions. */
  .skills-collage {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .85rem;
    position: static;
  }
  .sc-photo-1,
  .sc-photo-2 {
    flex: 1 1 calc(50% - .425rem);
    height: 210px;
  }
  .sc-badge {
    position: static;
    flex: 1 1 100%;
    order: 3;
    width: 100%;
    max-width: none;
    flex-direction: row;
    justify-content: center;
    text-align: left;
    gap: .75rem;
    padding: .75rem 1.25rem;
    margin: .1rem 0 0;
    animation: none; /* calmer as a plain stat card than the desktop floaty bob */
  }
  .sc-badge-donut, .sc-donut-svg { width: 52px; height: 52px; flex-shrink: 0; }
  .sc-badge-num { font-size: 1rem; }
  .sc-badge-label { font-size: .8rem; text-align: left; margin: 0; }

  /* Skill cards: full width on phones, and re-proportioned — the 105px
     centered icon with 60px of margin above/below was sized for a wide
     desktop card sitting next to 3 others; stacked full-width on a phone
     it leaves a huge gap before the (left-aligned) text below it. Icon is
     now smaller and left-aligned to match the text, and the excess
     vertical spacing is trimmed so each card reads as one compact block
     instead of sprawling most of the screen. */
  .sk-card { flex: 0 0 100%; padding: 1.35rem 1.25rem 1.1rem; }
  .sk-ico-wrap {
    width: 60px;
    height: 60px;
    margin: 0 0 1rem;
    font-size: 1.1rem;
  }
  .sk-ico-wrap img { width: 60px; }
  .sk-title { font-size: 1.05rem; }
  .sk-link { margin-bottom: .5rem; }
  .sk-num { font-size: 3.5rem; }

  /* Why-Students-Prefer: 2 columns */
  .wsp-grid { grid-template-columns: repeat(2, 1fr); }

  /* Why choose us: 2 columns */
  .why-section .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }

  /* Testimonials: full-width single card */
  .testi-card { flex: 0 0 85vw; }

  /* Pricing toggle: allow wrap */
  .pricing-toggle { width: 220px; max-width: 220px; }

  /* Pricing tabs: allow horizontal scroll */
  .pricing-tabs { white-space: nowrap; width: 100%; border-bottom: none; border-right: none; }

  /* Articles header: stack, with the CTA as a clear full-width button
     instead of a small pill floating awkwardly under the heading */
  .articles-header { flex-direction: column; align-items: stretch; gap: .25rem; margin-bottom: 1.25rem; }
  .articles-see-all {
    justify-content: center;
    width: 100%;
    margin-top: .75rem;
    padding: .7rem 1.5rem;
  }
  /* The mobile-only duplicate of this button sits after the card grid
     (see common/blog-section.php) rather than under the header, so it
     needs its own clear gap from the last card above it. */
  .articles-see-all.articles-see-all--after-grid {
    margin-top: 1.5rem;
  }

  /* Article cards: let the image scale with card width instead of a
     fixed 250px height (looks oversized/cramped once the card narrows
     to a single mobile column), and tighten the text padding to match. */
  .art-img { height: auto; aspect-ratio: 16 / 10; }
  .art-meta { padding: .75rem .9rem; }
  .art-card-title { padding: .75rem .9rem 1rem; font-size: .95rem; }

  /* CTA inner: tighter padding */
  .cta-inner { padding: 40px 20px; }

  /* Newsletter form: keep inline pill on all screen sizes */
  .newsletter-form {
    flex-direction: row;
    align-items: center;
    padding: 6px 6px 6px 20px;
  }
  .newsletter-btn { width: auto; white-space: nowrap; }

  /* Form rows: single column */
  .bfd-row, .psd-row { grid-template-columns: 1fr; }

  /* Scale-CTA: vertical */
  .si-cta-inner { flex-direction: column; align-items: flex-start; padding: 20px; }
  .si-cta-icon  { display: none; }

  /* DCT / ICT tables: stacked-card layout (see the 991.98px block) —
     no min-width/scroll needed now that rows are full-width blocks. */

  /* PTE/IELTS comparison pages: section headings */
  .dct-heading,
  .wsp-heading,
  .pvt-qc-heading,
  .pvt-swc-heading,
  .pvt-gsc-heading,
  .iag-title,
  .ict-heading,
  .wst-heading {
    font-size: 1.3rem;
  }

  /* About us who-we-are collage: already handled in existing rule */

  /* Mission & vision image: shorter on mobile */
  .mv-img { height: 280px; }
  .mv-badge--top, .mv-badge--bottom { display: none; }

  /* Footer bottom: already handled */
}

/* ── Small phones (≤575px) ───────────────────────────────────────── */
@media (max-width: 575.98px) {
    .sb-body    {
        padding: 3rem 0;
    }
    .blog-section.blog-section-single-blog {
        padding: 0px;
    }
    .blg-grid {
    grid-template-columns: repeat(1, 1fr);
    }
    .who-collage {
    margin-top: 0px;
    }
    .newsletter-section {
        padding-top: 0px;
        padding-bottom: 3rem;
    }
    .who-section {
    padding: 3rem 0px;
    background: #fff;
    }
    .mv-section {
        padding: 3rem 0px;
    }
    .skill-cards-section.about-sec {
        padding: 3rem 0px;
    }
    .cta-section {
    padding: 3rem 0px;
    }

  /* Global container horizontal padding */
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* Hero */
  .hero { padding: 80px 0 3rem; }
  .hero-title { font-size: clamp(1.8rem, 7vw, 2.5rem); letter-spacing: -.5px; }
  .hero-sub   { font-size: .95rem; }

  /* Trusted strip: badge stays beside the marquee (not stacked above it —
     that's the whole point of the "logos slide out from the badge" look),
     it just shrinks its own padding/font so the marquee still gets most
     of the row's width on narrow phones. */
  .trusted-strip { padding: .85rem .9rem; border-radius: 14px; }
  .trusted-strip-inner { gap: .65rem; }
  .trusted-badge { font-size: .8rem; padding: .6rem 1rem; gap: .4rem; }
  .trusted-badge-ico { font-size: .95rem; }

  /* Skill cards: single column */
  .sk-cards-row { flex-direction: column; }
  .sk-card { flex: 0 0 100%; width: 100%; margin-top: 0 !important; }

  /* Why choose us: single column */
  .why-section .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

  /* Testimonial: full width */
  .testi-card { flex: 0 0 calc(100vw - 2rem); }

  /* Pricing: single card per row on very small phones */
  .pricing-cards .row > [class*="col-"] { margin-bottom: 1rem; }

  /* Features cards: full-width */
  .feat-card { padding: 2rem 1rem; }

  /* How-it-works: simpler cards */
  .how-card { padding: .85rem 1rem; }
  .how-card-title { font-size: .88rem; }

  /* Skills features grid: already 1col at 575px */

  /* Comparison pages: Why-prefer grid */
  .wsp-grid { grid-template-columns: repeat(2, 1fr); }

  /* AiSA inner already 1col at 991px */

  /* Quick comparison grid (PTE vs TOEFL): already 1col at 575px */

  /* IELTS section-wise grid: already 1col at 575px */

  /* Mega menu grid: ensure pills wrap */
  .mega-pills { flex-wrap: wrap; }
  .mega-pill  { font-size: .82rem; padding: .65rem .9rem; min-height: 44px; }

  /* Forms: pill features 1 col */
  .bfd-pills, .psd-pills { grid-template-columns: 1fr; }

  /* CTA section */
  .cta-inner { padding: 32px 16px; border-radius: 16px; }
  .cta-title  { font-size: 1.4rem; }
  .cta-btns   { flex-direction: column; align-items: center; }
  .cta-btn    { text-align: center; justify-content: center; max-width: 250px; width: 100%; }

  /* Scale CTA buttons: stack */
  .si-cta-btns { flex-direction: column; width: 100%; }
  .si-btn       { text-align: center; }

  /* Newsletter: keep inline pill, just shrink font */
  .newsletter-input { font-size: .82rem; }
  .newsletter-btn { font-size: .82rem; padding: .65rem 1.2rem; }

  /* Footer: already handled */

  /* About hero padding */
  .about-hero { padding: 100px 0 3rem; min-height: auto; }

  /* Blog single hero */
  .sb-hero { padding: 48px 0 40px; }

  /* Pricing tabs: wrap */
  .pricing-tab { padding: .65rem 1.2rem; font-size: .85rem; }

  /* How section: compact */
  .how-section { padding: 2.5rem 0; }

  /* Remove border-radius on full-width sections on phone */
  .features-section { border-radius: 0; }

  /* DCT/ICT table: add scroll wrapper */
  .dct-table-wrap, .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Testimonials: center the prev/next controls instead of leaving them
     left-hugging and disconnected from the card below, and keep them at
     a proper touch-target size (36px was under the 44px minimum). */
  .testi-header-actions { justify-content: center; margin-top: 1.25rem; }
  .testi-nav { width: 44px; height: 44px; font-size: 1rem; }

  /* Section headings are sized in the "Section headings (all pages)" block at the end of the file. */
  .iag-title {
    font-size: 1.625rem !important; /* 26px */
    line-height: 1.25 !important;
  }
}

@media (max-width: 425px) {
    .blg-grid {
        grid-template-columns: repeat(1, 1fr);
        }
    .blg-featured-content {
    left: 0.75rem;
    width: 82%;
    }
}

@media (min-width: 992px) {
  .iag-title {
    font-size: 2.1875rem !important; /* 35px */
    line-height: 1.2 !important;
  }
}


/* ===================== style2 additions ===================== */

.container-app {
    max-width: 1432px;
    padding: 0 1rem;
}

.h2 {
    font-family: var(--fontInter);
    font-weight: 800;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: 0px;
    vertical-align: middle;
}

.card-deck {
    gap: 40px;
    display: grid;
}

.cardSBlock {
    margin-top: 50px;
}
.cardSBlock .feature-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    height: 100%;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cardSBlock .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
}
.cardSBlock .feature-card .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.cardSBlock .feature-card .card-icon.icon-purple { background: #f5f3ff; color: var(--color-purple); }
.cardSBlock .feature-card .card-icon.icon-blue   { background: #eff6ff; color: var(--color-blue); }
.cardSBlock .feature-card .card-icon.icon-green  { background: #f0fdf4; color: var(--color-green); }
.cardSBlock .feature-card .card-icon.icon-orange { background: #fff7ed; color: var(--color-orange); }
.cardSBlock .feature-card .card-icon i { font-size: 1.25rem; }
.cardSBlock .feature-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); }
.cardSBlock .feature-card p  { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
@media (max-width: 767.98px) {
    .cardSBlock .feature-card { padding: 1.5rem 1rem; }
}

.grid-row-1 { grid-row: 1; }

.PteAcademic { padding: 80px 0 40px; }

.section-header {
    text-align: center;
    margin-bottom: 48px;
}
.section-header .section-title {
    font-size: 35px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
}
.section-header .section-title .highlight { color: var(--pp-blue); }
.section-header .section-subtitle {
    font-size: 16px;
    color: var(--gray);
    max-width: 630px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---------- Top pills ---------- */
.top-pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  max-width: max-content;
  margin: 0 auto 28px;
  padding: 6px;
  border-radius: 50px;
}
.pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    /* border: 1px solid var(--line); */
    background: transparent;
    color: var(--gray);
    transition: background 0.2s ease;
    cursor: pointer;
}
.pill.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.pill.active:hover { background: var(--blue); }
.pill .dot { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }

#promptTitle, #promptDesc { transition: opacity 0.25s ease, transform 0.25s ease; }
.slide-out { opacity: 0; transform: translateY(8px); }

/* ---------- Task tabs ---------- */
.task-tabs {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.task-tabs .task-tab {
    flex: 1 1 0;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #fff;
    border: 1.5px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all .25s ease;
}
.task-tabs .task-tab .task-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all .25s ease;
}
.task-tabs .task-tab .icon-speaking  { background: var(--blue-light); color: var(--blue); }
.task-tabs .task-tab .icon-writing   { background: var(--pink-light);  color: var(--pink); }
.task-tabs .task-tab .icon-reading   { background: var(--blue-light);  color: var(--blue); }
.task-tabs .task-tab .icon-listening { background: var(--orange-light);color: var(--orange); }
.task-tabs .task-tab .task-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.task-tabs .task-tab .task-sub   { font-size: 12px; color: var(--gray-light); }
.task-tabs .task-tab:hover {
    border-color: var(--pp-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.hero-card {
    padding: 48px;
    margin-bottom: 41px;
    border-radius: var(--radius-lg);
    background: linear-gradient(270deg, rgba(239,246,255,0.5) 0%, rgba(239,246,255,0) 100%);
    box-shadow: 0px 25px 50px -12px #00000026;
    position: relative;
}
.hero-card .dotsImage { width: 100%; max-width: 56px; position: absolute; top: 34px; }

/* Hero title with icon and underline */
.hero-card .hero-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
.hero-card .hero-title .icon-box {
    width: 44px;
    height: 44px;
    background: var(--pp-blue);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    flex-shrink: 0;
}
.hero-card .hero-title h2 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    position: relative;
    padding-bottom: 8px;
}
.hero-card .hero-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--pp-blue);
    border-radius: 2px;
}

@media (max-width: 767px) {
    .hero-card { padding: 15px; }
}

.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 26px;
    background: #f8fafc;
    border-radius: 20px;
}
.stat-row .stat-chip {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.stat-row .stat-chip:not(:last-child) {
    padding-right: 22px;
    margin-right: 22px;
}
.stat-row .stat-chip:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: #e8edf5;
}
.stat-row .stat-chip .stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-row .stat-chip .stat-icon i   { font-size: 18px; }
.stat-row .stat-chip .stat-icon svg { width: 18px; height: 18px; }
.stat-row .stat-chip:nth-child(1) .stat-icon { background: var(--blue-light);   color: var(--blue);   }
.stat-row .stat-chip:nth-child(2) .stat-icon { background: var(--green-light);  color: var(--green);  }
.stat-row .stat-chip:nth-child(3) .stat-icon { background: var(--orange-light); color: var(--orange); }
.stat-row .stat-chip .stat-value { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.stat-row .stat-chip .stat-label { margin-top: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: #9aa4b2; }
@media (max-width: 991px) {
    .stat-row { flex-wrap: wrap; gap: 18px; }
    .stat-row .stat-chip { flex: 0 0 calc(50% - 9px); margin: 0; padding: 0; }
    .stat-row .stat-chip::after { display: none; }
}
@media (max-width: 767px) {
    .stat-row { padding: 20px; gap: 16px; }
    .stat-row .stat-chip { flex: 0 0 100%; gap: 12px; padding: 0 !important; margin: 0 !important; }
    .stat-row .stat-chip .stat-icon { width: 42px; height: 42px; }
    .stat-row .stat-chip .stat-value { font-size: 16px; }
    .stat-row .stat-chip .stat-label { font-size: 10px; }
}
@media (max-width: 480px) {
    .stat-row { padding: 16px; }
    .stat-row .stat-chip .stat-icon { width: 38px; height: 38px; }
    .stat-row .stat-chip .stat-value { font-size: 15px; }
    .stat-row .stat-chip .stat-label { font-size: 9px; letter-spacing: .5px; }
}

.btn-practice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border: none;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(47, 87, 239, 0.28);
    transition: all 0.25s ease;
}
.btn-practice svg { transition: transform 0.25s ease; }
.btn-practice:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(47,87,239,0.35); }
.btn-practice:hover svg { transform: translateX(4px); }

.recorder-panel {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    height: 100%;
    min-height: 280px;
    /* overflow: hidden; */
    border-radius: 20px;
}
.recorder-panel .slider-nav {
    position: absolute;
    top: -14px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 999px;
    z-index: 1;
}
.recorder-panel .slider-nav .slider-count { min-width: 26px; padding: 0 4px; text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--gray); }
.recorder-panel .slider-nav .slider-btn { width: 32px; height: 32px; min-width: 0; padding: 0; flex-shrink: 0; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--blue-light); color: var(--blue); transition: all 0.2s ease; }
/* The theme's generic button padding squeezed these into ovals and the arrows to zero width */
.recorder-panel .slider-nav .slider-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.recorder-panel .slider-nav .slider-btn.primary { background: var(--blue); color: #fff; }
.recorder-panel .slider-nav .slider-btn:hover { transform: scale(1.05); }
.recorder-panel .slider-nav .slider-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.recorder-panel .mic-wrap { position: relative; width: 100%; height: 320px; display: flex; align-items: center; justify-content: center; max-width: 320px; }
.recorder-panel .mic-wrap .mic-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(47,87,239,0.18); }
.recorder-panel .mic-wrap .mic-ring.r1 { width: 320px; height: 320px; border: 1.5px dashed rgba(47,87,239,0.18); }
.recorder-panel .mic-wrap .mic-ring.r2 { width: 281px; height: 281px; }
.recorder-panel .mic-wrap .mic-bars { position: absolute; inset: 0; margin: auto; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
/* Mirrored waveform: four bars each side with a gap for the mic button, so no bar hides behind it */
.recorder-panel .mic-wrap .mic-bars span:nth-child(4) { margin-right: 146px; }
.recorder-panel .mic-wrap .mic-bars span { width: 3px; border-radius: 3px; background: #0047954D; animation: bar-pulse 1.4s ease-in-out infinite; }
.recorder-panel .mic-wrap .mic-circle { position: relative; z-index: 2; width: 128px; height: 128px; border-radius: 50%; background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: 0px 25px 50px -12px #00000040; border: 5px solid #f9f9f9; }
.recorder-panel .mic-wrap .mic-circle svg { width: 56px; height: 56px; }
@media (max-width: 767px) {
    .recorder-panel { padding-top: 50px; }
    .slider-nav { left: 50%; transform: translate(-50%, -50%); width: 100%; justify-content: center; }
}

@keyframes bar-pulse {
    0%, 100% { transform: scaleY(0.6); opacity: 0.5; }
    50%       { transform: scaleY(1);   opacity: 1; }
}
section.whyMockTest-sec {
    padding-top: 30px;
}
.feature-row { margin-bottom: 40px; }
.feature-row .feature-card {
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}
.feature-row .feature-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.feature-row .feature-card .f-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.feature-row .feature-card .f-icon img { width: 18px; height: 18px; object-fit: contain; }
.feature-row .feature-card h6 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.feature-row .feature-card p  { margin: 0; font-size: 14px; line-height: 1.4; color: var(--gray-light); }

.section-heading { text-align: center; margin-bottom: 60px; }
.section-heading h3 { font-size: 40px; font-weight: 800; color: var(--ink); margin-bottom: 16px; }
.section-heading h3 span { color: var(--pp-blue); }
.section-heading p  { max-width: 620px; margin: 0 auto; color: var(--gray-light); font-size: 16px; line-height: 1.7; }
@media (max-width: 767px) {
    .section-heading h3 { font-size: 30px; }
    .section-heading p  { font-size: 14px; }
}
.mokeTestBlock {margin-bottom: 20px;}
.mokeTestBlock .step-content .step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.mokeTestBlock .step-content .step-header .step-number { width: 64px; height: 64px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(21,89,237,.18); }
.mokeTestBlock .step-content .step-header .step-icon-badge { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--blue); }
.mokeTestBlock .step-content .step-header .step-icon-badge svg { width: 27px; height: 27px; }
.mokeTestBlock .step-content h4 { font-size: 32px; font-weight: 800; line-height: 1.2; color: var(--ink); max-width: 100%; margin-bottom: 20px; }
.mokeTestBlock .step-content p  { max-width: 420px; color: var(--gray); margin: 0; font-size: 16px; }
@media (max-width: 991px) {
    .mokeTestBlock .step-content { margin-bottom: 40px; }
    .mokeTestBlock .step-content h4 { font-size: 28px; }
}
@media (max-width: 767px) {
    .mokeTestBlock .step-content h4 { font-size: 22px; max-width: 100%; }
    .mokeTestBlock .step-content p  { max-width: 100%; }
}

.mock-card { background: #fff; border-radius: 24px; padding: 24px; border: 1px solid #F1F5F9; box-shadow: 0px 25px 50px -12px rgba(0,0,0,.10); }
.mock-card h6  { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.mock-card .sub { color: var(--gray-light); font-size: 13px; margin-bottom: 24px; }
.mock-card .mini-stat { border-radius: 14px; padding: 18px 10px; text-align: center; height: 100%; }
.mock-card .mini-stat .mini-icon { margin-bottom: 8px; }
.mock-card .mini-stat .mini-icon img { width: 18px; }
.mock-card .mini-stat .mini-value { font-size: 30px; font-weight: 800; line-height: 1; color: var(--ink); margin-bottom: 8px; }
.mock-card .mini-stat .mini-label { font-size: 10px; text-transform: uppercase; color: var(--gray-light); letter-spacing: .5px; line-height: 1.5; }
.mock-card .mock-table { width: 100%; border-collapse: collapse; }
.mock-card .mock-table thead tr th { padding: 14px 8px; font-size: 11px; font-weight: 600; color: var(--gray-light); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.mock-card .mock-table tbody tr:last-child td { border-bottom: none; }
.mock-card .mock-table tbody tr td { padding: 16px 8px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); vertical-align: middle; }
.mock-card .mock-table tbody tr td .skill-icons { display: flex; gap: 6px; color: var(--blue); }
.mock-card .mock-table tbody tr td .skill-icons svg { width: 14px; height: 14px; }
.mock-card .mock-table tbody tr td .badge-status { padding: 5px 12px; border-radius: 30px; font-size: 11px; font-weight: 700; display: block; text-align: center; line-height: normal; min-height: 25px; }
.mock-card .mock-table tbody tr td .badge-status.completed { background: var(--green-light); color: var(--green); }
.mock-card .mock-table tbody tr td .badge-status.progress   { background: var(--blue-light);  color: var(--blue); }
.mock-card .mock-table tbody tr td .review-link { color: var(--blue); font-size: 13px; font-weight: 700; text-decoration: none; }
.mock-card .mock-table tbody tr td .review-link:hover { color: var(--blue-dark); }
@media (max-width: 991px) { .mock-card { margin-top: 20px; } }
@media (max-width: 767px) {
    .mock-card { padding: 18px; }
    .mock-card .mini-stat .mini-value { font-size: 24px; }
    .mock-card .mini-stat .mini-label { font-size: 9px; }
    .mock-card .mock-table { font-size: 12px; }
    .mock-card .mock-table th, .mock-card .mock-table td { padding: 10px 5px; }
}

.main-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    max-width: 720px;
    margin: 0 auto;
}
.main-card .section-title    { font-size: 22px; font-weight: 700; color: var(--text-dark); line-height: 1.3; margin-bottom: 4px; }
.main-card .section-subtitle { font-size: 13px; color: var(--text-gray); line-height: 1.5; max-width: 180px; }
@media (max-width: 576px) { .main-card { padding: 20px; margin: 0 12px; } }

.tab-container { background: #f8f9fa; border-radius: 10px; padding: 4px; display: inline-flex; }
.tab-container .nav-pills .nav-link { color: #616871; font-size: 12px; font-weight: 500; padding: 8px 20px; border-radius: 8px; border: none; background: transparent; transition: all 0.2s ease; }
.tab-container .nav-pills .nav-link:hover { color: var(--text-dark); background: transparent; }
.tab-container .nav-pills .nav-link.active { background-color: var(--color-primary) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(24,74,226,0.25); }
@media (max-width: 576px) {
    .tab-container { width: 100%; justify-content: center; }
    .tab-container .nav-pills .nav-link { padding: 6px 14px; font-size: 12px; }
}

.progress-ring-container { display: flex; justify-content: center; gap: 48px; padding: 40px 0; flex-wrap: wrap; }
.progress-ring-container .progress-ring-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.progress-ring-container .progress-ring-item .progress-ring-wrapper { position: relative; width: 90px; height: 90px; }
.progress-ring-container .progress-ring-item .progress-ring-wrapper .progress-ring-svg { transform: rotate(-90deg); width: 90px; height: 90px; }
.progress-ring-container .progress-ring-item .progress-ring-wrapper .progress-ring-track { fill: none; stroke: var(--ring-track); stroke-width: 6; }
.progress-ring-container .progress-ring-item .progress-ring-wrapper .progress-ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.progress-ring-container .progress-ring-item .progress-ring-wrapper .progress-ring-fill.blue   { stroke: var(--ring-blue); }
.progress-ring-container .progress-ring-item .progress-ring-wrapper .progress-ring-fill.green  { stroke: var(--ring-green); }
.progress-ring-container .progress-ring-item .progress-ring-wrapper .progress-ring-fill.orange { stroke: var(--ring-orange); }
.progress-ring-container .progress-ring-item .progress-ring-wrapper .progress-ring-fill.purple { stroke: var(--ring-purple); }
.progress-ring-container .progress-ring-item .progress-ring-wrapper .progress-ring-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; font-weight: 700; color: var(--text-dark); }
.progress-ring-container .progress-ring-item .progress-ring-label { font-size: 13px; color: var(--text-light); font-weight: 500; }
@media (max-width: 576px) { .progress-ring-container { gap: 24px; } }

.stats-section { background: var(--bg-section); border-radius: 16px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.stats-section .stat-item { display: flex; flex-direction: column; gap: 4px; }
.stats-section .stat-item .stat-label { font-size: 12px; color: var(--text-light); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
.stats-section .stat-item .stat-value { font-size: 16px; font-weight: 700; color: var(--text-dark); }
.stats-section .stat-item .stat-value.blue { color: var(--primary-blue-light); }
.stats-section .status-badge { background: var(--badge-bg); color: var(--badge-text); font-size: 13px; font-weight: 600; padding: 8px 20px; border-radius: 20px; }
@media (max-width: 576px) { .stats-section { flex-direction: column; align-items: flex-start; gap: 16px; } }

.feature-list { margin-top: 12px; }
.feature-list .feature-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; }
.feature-list .feature-item .feature-icon-wrap {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 10px;
    background-color: var(--pp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.feature-list .feature-item .feature-icon-wrap i { font-size: 24px; color: #ffffff; }
.feature-list .feature-item .feature-title    { font-size: 15px; font-weight: 700; color: #111827; line-height: 1.3; margin: 0; }
.feature-list .feature-item .feature-subtitle { font-size: 13px; color: #6b7280; margin: 4px 0 0 0; line-height: normal; }

/* Feature card — base definition */
.feature-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e8ecf5;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(21,89,237,0.10);
    border-color: #d0d9f0;
}
.feature-card .feature-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.feature-card .feature-icon-wrap i {
    font-size: 20px;
    color: var(--pp-blue);
}
.feature-card .feature-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    line-height: 1.35;
}
.feature-card .feature-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
}

.top-badge { display: inline-block; background-color: #4ca5e8; color: #ffffff; font-size: 12px; font-weight: 600; padding: 6px 16px; border-radius: 20px; text-decoration: none; }

.academicCore { margin-top: 80px; }
.academicCore .section-header { text-align: center; margin-bottom: 40px; }
.academicCore .section-header .section-title { font-size: 2.25rem; font-weight: 700; color: var(--pp-blue); margin-bottom: 12px; }
.academicCore .section-header .section-title .highlight { color: #000000; }
.academicCore .section-header .section-title .pteCore { color: var(--greenColor); }
.academicCore .section-header .section-subtitle { font-size: 15px; color: var(--text-gray); max-width: 520px; margin: 0 auto; line-height: 1.6; }

.need-to-succeed { padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%); }
.need-to-succeed .section-title { font-size: 2.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.75rem; }
.need-to-succeed .section-title .highlight { color: var(--color-blue); }
.need-to-succeed .section-subtitle { font-size: 1rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem; }

/* ---- need-to-succeed feature cards (scoped) ---- */
.need-to-succeed .feature-card {
    background: #ffffff;
    border: 1px solid #e8ecf4;
    border-radius: 16px;
    padding: 28px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.need-to-succeed .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.09);
}

/* Colored corner triangle */
.need-to-succeed .feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 48px 48px 0 0;
    border-color: transparent transparent transparent transparent;
}
.need-to-succeed .feature-card:has(.icon-wrapper.icon-blue)::before   { border-color: var(--color-blue)   transparent transparent transparent; }
.need-to-succeed .feature-card:has(.icon-wrapper.icon-green)::before  { border-color: var(--color-green)  transparent transparent transparent; }
.need-to-succeed .feature-card:has(.icon-wrapper.icon-orange)::before { border-color: var(--color-orange) transparent transparent transparent; }
.need-to-succeed .feature-card:has(.icon-wrapper.icon-purple)::before { border-color: var(--color-purple) transparent transparent transparent; }
.need-to-succeed .feature-card:has(.icon-wrapper.icon-pink)::before   { border-color: var(--color-pink)   transparent transparent transparent; }
.need-to-succeed .feature-card:has(.icon-wrapper.icon-cyan)::before   { border-color: var(--color-cyan)   transparent transparent transparent; }

/* Icon wrapper */
.need-to-succeed .feature-card .icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
/* Reset the generic ::before diagonal stripe */
.need-to-succeed .feature-card .icon-wrapper::before { display: none; }
.need-to-succeed .feature-card .icon-wrapper.icon-blue   { background: rgba(37,99,235,0.10);  color: var(--color-blue); }
.need-to-succeed .feature-card .icon-wrapper.icon-green  { background: rgba(16,185,129,0.10); color: var(--color-green); }
.need-to-succeed .feature-card .icon-wrapper.icon-orange { background: rgba(234,88,12,0.10);  color: var(--color-orange); }
.need-to-succeed .feature-card .icon-wrapper.icon-purple { background: rgba(124,58,237,0.10); color: var(--color-purple); }
.need-to-succeed .feature-card .icon-wrapper.icon-pink   { background: rgba(236,72,153,0.10); color: var(--color-pink); }
.need-to-succeed .feature-card .icon-wrapper.icon-cyan   { background: rgba(6,182,212,0.10);  color: var(--color-cyan); }

/* Feature title */
.need-to-succeed .feature-card .feature-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

/* Accent line */
.need-to-succeed .feature-card .accent-line {
    width: 28px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 1rem;
}
.need-to-succeed .feature-card .accent-line.accent-blue   { background: var(--color-blue); }
.need-to-succeed .feature-card .accent-line.accent-green  { background: var(--color-green); }
.need-to-succeed .feature-card .accent-line.accent-orange { background: var(--color-orange); }
.need-to-succeed .feature-card .accent-line.accent-purple { background: var(--color-purple); }
.need-to-succeed .feature-card .accent-line.accent-pink   { background: var(--color-pink); }
.need-to-succeed .feature-card .accent-line.accent-cyan   { background: var(--color-cyan); }

/* Description */
.need-to-succeed .feature-card .feature-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 767px) {
    .need-to-succeed .feature-card { padding: 20px; }
    .need-to-succeed .feature-card .icon-wrapper { width: 52px; height: 52px; font-size: 1.2rem; }
    .need-to-succeed .feature-card .feature-title { font-size: 0.95rem; }
}

.scoring-section { padding: 60px 0; }
.scoring-section .section-header { text-align: center; margin-bottom: 3rem; }
.scoring-section .section-header .section-title { font-size: 1.75rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.75rem; }
.scoring-section .section-header .section-title .highlight { color: var(--color-blue); }
.scoring-section .section-header .section-subtitle { font-size: 0.9rem; color: var(--text-muted); max-width: 520px; margin: 0 auto; line-height: 1.6; }
.scoring-section .step-card { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.75rem; border-radius: 16px; background: #ffffff; border: 1px solid var(--border-light); height: 100%; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.scoring-section .step-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.06); transform: translateY(-3px); }
.scoring-section .step-card .main-icon-wrapper { position: relative; width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; }
.scoring-section .step-card .main-icon-wrapper .outer-ring { position: absolute; width: 108px; height: 108px; border-radius: 50%; border: 3px solid rgba(37,99,235,0.2); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.scoring-section .step-card .main-icon-wrapper .middle-ring { position: absolute; width: 96px; height: 96px; border-radius: 50%; background: rgba(37,99,235,0.04); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.scoring-section .step-card .main-icon-wrapper .inner-ring  { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgb(0 80 255 / 17%); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.scoring-section .step-card .main-icon-wrapper .icon-square { position: relative; z-index: 2; width: 64px; height: 64px; background: var(--color-blue); border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.scoring-section .step-card .main-icon-wrapper .icon-square .icon-text { font-size: 20px; font-weight: 600; color: #ffffff; letter-spacing: 2px; }
.scoring-section .step-card .main-icon-wrapper .icon-square .icon-text img { width: 30px; }
.scoring-section .step-card .main-icon-wrapper.greenCard .icon-square { border-radius: 50%; background: var(--whiteColor); }
.scoring-section .step-card .main-icon-wrapper.greenCard .icon-square .icon-text { color: var(--color-green); }
.scoring-section .step-card .main-icon-wrapper.greenCard .outer-ring { border-color: #D1FAE5; }
.scoring-section .step-card .main-icon-wrapper.greenCard .inner-ring { background: #D1FAE5; }
.scoring-section .step-card .main-icon-wrapper.icon-orange .icon-square { border-radius: 50%; background: #FFEDD5; }
.scoring-section .step-card .main-icon-wrapper.icon-orange .icon-square .icon-text { color: #EA580C; }
.scoring-section .step-card .main-icon-wrapper.icon-orange .outer-ring { border-color: #FFEDD5; }
.scoring-section .step-card .main-icon-wrapper.icon-orange .inner-ring { background: #FFF7ED; }
.scoring-section .step-card .main-icon-wrapper.icon-purple .icon-square { border-radius: 50%; background: #F3E8FF; }
.scoring-section .step-card .main-icon-wrapper.icon-purple .icon-square .icon-text { color: #9333EA; }
.scoring-section .step-card .main-icon-wrapper.icon-purple .outer-ring { border-color: #F3E8FF; }
.scoring-section .step-card .main-icon-wrapper.icon-purple .inner-ring { background: #FAF5FF; }
.scoring-section .step-card .step-content { flex: 1; padding-top: 0.25rem; }
.scoring-section .step-card .step-content .step-badge { max-width: 38px; min-width: 22px; height: 22px; border-radius: 30px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: #ffffff; padding: 0 6px; }
.scoring-section .step-card .step-content .step-badge.badge-blue   { background: var(--color-blue); }
.scoring-section .step-card .step-content .step-badge.badge-green  { background: var(--color-green); }
.scoring-section .step-card .step-content .step-badge.badge-orange { background: var(--color-orange); }
.scoring-section .step-card .step-content .step-badge.badge-purple { background: var(--color-purple); }
.scoring-section .step-card .step-content .step-title { font-size: 1rem; font-weight: 600; margin: 7px 0; }
.scoring-section .step-card .step-content .step-title.title-blue   { color: #1E40AF; }
.scoring-section .step-card .step-content .step-title.title-green  { color: #065F46; }
.scoring-section .step-card .step-content .step-title.title-orange { color: #9A3412; }
.scoring-section .step-card .step-content .step-title.title-purple { color: #6B21A8; }
.scoring-section .step-card .step-content .step-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.7; margin: 0; }
@media (max-width: 767px) {
    .scoring-section { padding: 2.5rem 0; }
    .scoring-section .section-header { margin-bottom: 2rem; }
    .scoring-section .section-header .section-title { font-size: 1.4rem; }

    /* Redesigned as a compact icon-left / text-right row instead of a
       tall stack with an oversized centered icon — the large 108px ring
       icon made sense next to a wide text column on desktop, but stacked
       full-size on a phone it eats most of the card for decoration alone.
       Shrinking it and placing it beside the text keeps every card
       compact and consistent with the rest of the mobile page. */
    .scoring-section .step-card {
        display: flex;
        flex-direction: row !important;
        align-items: flex-start;
        gap: .9rem;
        padding: 1.1rem;
    }
    .scoring-section .step-card .main-icon-wrapper {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
    }
    .scoring-section .step-card .main-icon-wrapper .outer-ring  { width: 64px; height: 64px; }
    .scoring-section .step-card .main-icon-wrapper .middle-ring { width: 56px; height: 56px; }
    .scoring-section .step-card .main-icon-wrapper .inner-ring  { width: 52px; height: 52px; }
    .scoring-section .step-card .main-icon-wrapper .icon-square { width: 38px; height: 38px; border-radius: 10px; }
    .scoring-section .step-card .main-icon-wrapper .icon-square .icon-text { font-size: 12px; }
    .scoring-section .step-card .main-icon-wrapper .icon-square .icon-text img { width: 18px; }

    .scoring-section .step-card .step-content { padding-top: 0; }
    .scoring-section .step-card .step-content .step-badge { margin-bottom: .35rem; }
    .scoring-section .step-card .step-content .step-title { font-size: 0.95rem; margin: 0 0 .3rem; }
    .scoring-section .step-card .step-content .step-desc  { font-size: 0.8rem; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .recorder-panel .slider-nav {
        top: 0px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .scoring-section .section-header .section-title { font-size: 1.6rem; }
}

.scores-section { padding: 60px 0; }

/* Carousel container styles for responsive slider */
.scores-section .row.g-4 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
    width: 100%;
    gap: 16px;
    margin: 0 !important;
    max-width: 100%;
}

.scores-section .row.g-4 > div {
    flex-shrink: 0 !important;
    width: calc(25% - 12px) !important;
    max-width: none !important;
}

/* Tablet: 2 cards (769px to 991px) */
@media (min-width: 769px) and (max-width: 991px) {
    .scores-section .row.g-4 > div {
        width: calc(50% - 8px) !important;
    }
}

/* Mobile & small tablet: 1 card full width (up to 768px) */
@media (max-width: 768px) {
    .scores-section .row.g-4 {
        gap: 0 !important;
    }

    .scores-section .row.g-4 > div {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.scores-section .section-header { text-align: center; margin-bottom: 3rem; }
.scores-section .section-header .section-title { font-size: 1.75rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.75rem; line-height: 1.4; }
.scores-section .section-header .section-title .highlight { color: var(--color-blue); }
.scores-section .section-header .section-subtitle { font-size: 0.9rem; color: var(--text-muted); max-width: 480px; margin: 0 auto; line-height: 1.6; }
.scores-section .student-card { background: #ffffff; border-radius: 20px; padding: 1.25rem 1.25rem 0; height: 100%; transition: box-shadow 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 24px rgba(0,0,0,0.08); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.scores-section .student-card:hover { transform: translateY(-4px); }
.scores-section .student-card .card-header-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.scores-section .student-card .card-header-row .student-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.scores-section .student-card .card-header-row .student-info .student-name { font-size: 0.95rem; font-weight: 600; color: var(--text-dark); margin: 0; line-height: 1.3; }
.scores-section .student-card .card-header-row .student-info .student-location { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.25rem; margin: 0; }
.scores-section .student-card .score-comparison { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding: 0 0.5rem; }
.scores-section .student-card .score-comparison .score-box { text-align: center; flex: 1; }
.scores-section .student-card .score-comparison .score-box .score-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem; }
.scores-section .student-card .score-comparison .score-box .score-value { font-size: 1.6rem; font-weight: 700; }
.scores-section .student-card .score-comparison .score-box .score-value.score-green  { color: var(--color-green); }
.scores-section .student-card .score-comparison .score-box .score-value.score-blue   { color: var(--color-blue); }
.scores-section .student-card .score-comparison .score-box .score-value.score-orange { color: var(--color-orange); }
.scores-section .student-card .score-comparison .score-box .score-value.score-cyan   { color: var(--color-cyan); }
.scores-section .student-card .score-comparison .score-box:nth-child(1) .score-value { color: #000000; }
.scores-section .student-card .score-comparison.greenScore .score-box { border-radius: 12px; background: #ECFDF5; }
.scores-section .student-card .score-comparison.blueScore .score-box  { border-radius: 12px; background: #EFF6FF; }
.scores-section .student-card .score-comparison.orangeScore .score-box{ border-radius: 12px; background: #FFF7ED; }
.scores-section .student-card .skill-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.scores-section .student-card .skill-row .skill-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; border-radius: 50%; }
.scores-section .student-card .skill-row .skill-icon.icon-green  { color: var(--color-green);  background: rgba(16,185,129,0.08); }
.scores-section .student-card .skill-row .skill-icon.icon-blue   { color: var(--color-blue);   background: rgba(37,99,235,0.08);  }
.scores-section .student-card .skill-row .skill-icon.icon-orange { color: var(--color-orange); background: rgba(249,115,22,0.08); }
.scores-section .student-card .skill-row .skill-icon.icon-cyan   { color: var(--color-cyan);   background: rgba(6,182,212,0.08);  }
.scores-section .student-card .skill-row .skill-name { font-size: 0.8rem; color: var(--text-muted); width: 55px; flex-shrink: 0; }
.scores-section .student-card .skill-row .skill-bar-wrapper { flex: 1; height: 5px; background: #f3f4f6; border-radius: 3px; overflow: hidden; }
.scores-section .student-card .skill-row .skill-bar-wrapper .skill-bar { height: 100%; border-radius: 3px; transition: width 0.8s ease; }
.scores-section .student-card .skill-row .skill-bar-wrapper .skill-bar.bar-green  { background: var(--color-green); }
.scores-section .student-card .skill-row .skill-bar-wrapper .skill-bar.bar-blue   { background: var(--color-blue); }
.scores-section .student-card .skill-row .skill-bar-wrapper .skill-bar.bar-orange { background: var(--color-orange); }
.scores-section .student-card .skill-row .skill-bar-wrapper .skill-bar.bar-cyan   { background: var(--color-cyan); }
.scores-section .student-card .skill-row .skill-score { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); width: 24px; text-align: right; flex-shrink: 0; }
.scores-section .student-card .improvement-badge { display: flex; align-items: center; gap: 0.6rem; padding: 0.875rem 1.25rem; margin: auto -1.25rem 0; }
.scores-section .student-card .improvement-badge.badge-green-bg  { background: rgba(16,185,129,0.08); }
.scores-section .student-card .improvement-badge.badge-blue-bg   { background: rgba(37,99,235,0.08); }
.scores-section .student-card .improvement-badge.badge-orange-bg { background: rgba(249,115,22,0.08); }
.scores-section .student-card .improvement-badge.badge-cyan-bg   { background: #F0FDFA; }
.scores-section .student-card .improvement-badge .improvement-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; background: #ffffff !important; }
.scores-section .student-card .improvement-badge .improvement-icon.icon-green  { color: var(--color-green); }
.scores-section .student-card .improvement-badge .improvement-icon.icon-blue   { color: var(--color-blue); }
.scores-section .student-card .improvement-badge .improvement-icon.icon-orange { color: var(--color-orange); }
.scores-section .student-card .improvement-badge .improvement-icon.icon-cyan   { color: var(--color-cyan); }
.scores-section .student-card .improvement-badge .improvement-text .improvement-label { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
.scores-section .student-card .improvement-badge .improvement-text .improvement-value { font-size: 0.95rem; font-weight: 700; margin: 0; line-height: 1.3; }
.scores-section .student-card .improvement-badge .improvement-text .improvement-value.text-green  { color: var(--color-green); }
.scores-section .student-card .improvement-badge .improvement-text .improvement-value.text-blue   { color: var(--color-blue); }
.scores-section .student-card .improvement-badge .improvement-text .improvement-value.text-orange { color: var(--color-orange); }
.scores-section .student-card .improvement-badge .improvement-text .improvement-value.text-cyan   { color: var(--color-cyan); }
.scores-section .student-card .improvement-badge .improvement-text .improvement-message { font-size: 0.7rem; color: var(--text-muted); margin: 0; line-height: 1.3; }

/* Step badge — colored number chip at top-left */
.scores-section .student-card .step-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 33px;
    height: 26px;
    border-radius: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    z-index: 2;
}
.scores-section .student-card .step-badge.badge-green  { background: var(--color-green); }
.scores-section .student-card .step-badge.badge-blue   { background: var(--color-blue); }
.scores-section .student-card .step-badge.badge-orange { background: var(--color-orange); }
.scores-section .student-card .step-badge.badge-cyan   { background: var(--color-cyan); }

/* Quote icon */
.scores-section .student-card .quote-icon {
    margin-left: auto;
    font-size: 2rem;
    color: #e2e8f0;
    line-height: 1;
    flex-shrink: 0;
}

/* Avatar — larger */
.scores-section .student-card .card-header-row .student-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    flex-shrink: 0;
}

/* Flag icon */
.scores-section .student-card .flag-icon { font-size: 0.85rem; }

/* Score comparison — side-by-side boxes with arrow */
.scores-section .student-card .score-comparison {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}
.scores-section .student-card .score-comparison .score-box {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    background: #f8fafc;
}
/* Only the After (last) box gets the theme color */
.scores-section .student-card .score-comparison.greenScore  .score-box:last-child { background: #ECFDF5; }
.scores-section .student-card .score-comparison.blueScore   .score-box:last-child { background: #EFF6FF; }
.scores-section .student-card .score-comparison.orangeScore .score-box:last-child { background: #FFF7ED; }
.scores-section .student-card .score-comparison.cyanScore   .score-box:last-child { background: #F0FDFA; }
.scores-section .student-card .score-comparison .score-label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--text-muted);
    margin: 0 0 6px;
    letter-spacing: 0.3px;
}
.scores-section .student-card .score-comparison .score-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: #111827;
}
/* After box score value gets theme color */
.scores-section .student-card .score-comparison.greenScore  .score-box:last-child .score-value { color: var(--color-green); }
.scores-section .student-card .score-comparison.blueScore   .score-box:last-child .score-value { color: var(--color-blue); }
.scores-section .student-card .score-comparison.orangeScore .score-box:last-child .score-value { color: var(--color-orange); }
.scores-section .student-card .score-comparison.cyanScore   .score-box:last-child .score-value { color: var(--color-cyan); }
.scores-section .student-card .score-comparison .score-arrow {
    flex-shrink: 0;
    color: #cbd5e1;
    font-size: 1rem;
}

/* Breakdown title */
.scores-section .student-card .breakdown-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* Skill row layout */
.scores-section .student-card .skill-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.scores-section .student-card .skill-row .skill-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.scores-section .student-card .skill-row .skill-name {
    font-size: 0.78rem;
    color: var(--text-muted);
    width: 60px;
    flex-shrink: 0;
}
.scores-section .student-card .skill-row .skill-score {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dark);
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}
.scores-section .student-card .skill-row .skill-bar-wrapper {
    flex: 1;
    height: 5px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}
.scores-section .student-card .skill-row .skill-bar { height: 100%; border-radius: 3px; }
.scores-section .student-card .skill-row .bar-green  { background: var(--color-green); }
.scores-section .student-card .skill-row .bar-blue   { background: var(--color-blue); }
.scores-section .student-card .skill-row .bar-orange { background: var(--color-orange); }
.scores-section .student-card .skill-row .bar-cyan   { background: var(--color-cyan); }

/* Improvement badge — pinned to bottom */
.scores-section .student-card .improvement-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    margin: auto -1.25rem 0;
    border-radius: 0 0 20px 20px;
}
.scores-section .student-card .improvement-badge .improvement-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.scores-section .student-card .improvement-badge .improvement-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0;
}
.scores-section .student-card .improvement-badge .improvement-value {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
.scores-section .student-card .improvement-badge .improvement-message {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
}
@media (max-width: 767px) {
    .scores-section { padding: 2.5rem 0; }
    .scores-section .section-header { margin-bottom: 2rem; }
    .scores-section .section-header .section-title { font-size: 1.4rem; }
    .scores-section .student-card { padding: 1.25rem 1.25rem 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .scores-section .section-header .section-title { font-size: 1.6rem; }
}

/* Feature card — enhanced version */
.feature-card .icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    overflow: hidden;
    position: relative;
}
.feature-card .icon-wrapper::before { content: ''; position: absolute; top: -12px; left: -6px; width: 20px; height: 36px; transform: rotate(45deg); }
.feature-card .icon-wrapper.icon-blue   { background: rgba(37,99,235,0.08); }
.feature-card .icon-wrapper.icon-blue::before   { background: var(--color-blue); }
.feature-card .icon-wrapper.icon-blue i         { color: var(--color-blue); }
.feature-card .icon-wrapper.icon-green  { background: rgba(16,185,129,0.08); }
.feature-card .icon-wrapper.icon-green::before  { background: var(--color-green); }
.feature-card .icon-wrapper.icon-green i        { color: var(--color-green); }
.feature-card .icon-wrapper.icon-orange { background: rgba(249,115,22,0.08); }
.feature-card .icon-wrapper.icon-orange::before { background: var(--color-orange); }
.feature-card .icon-wrapper.icon-orange i       { color: var(--color-orange); }
.feature-card .icon-wrapper.icon-purple { background: rgba(139,92,246,0.08); }
.feature-card .icon-wrapper.icon-purple::before { background: var(--color-purple); }
.feature-card .icon-wrapper.icon-purple i       { color: var(--color-purple); }
.feature-card .icon-wrapper.icon-pink   { background: rgba(236,72,153,0.08); }
.feature-card .icon-wrapper.icon-pink::before   { background: var(--color-pink); }
.feature-card .icon-wrapper.icon-pink i         { color: var(--color-pink); }
.feature-card .icon-wrapper.icon-cyan   { background: rgba(6,182,212,0.08); }
.feature-card .icon-wrapper.icon-cyan::before   { background: var(--color-cyan); }
.feature-card .icon-wrapper.icon-cyan i         { color: var(--color-cyan); }
.feature-card .accent-line { width: 28px; height: 3px; border-radius: 2px; margin-bottom: 1rem; }
.feature-card .accent-line.accent-blue   { background: var(--color-blue); }
.feature-card .accent-line.accent-green  { background: var(--color-green); }
.feature-card .accent-line.accent-orange { background: var(--color-orange); }
.feature-card .accent-line.accent-purple { background: var(--color-purple); }
.feature-card .accent-line.accent-pink   { background: var(--color-pink); }
.feature-card .accent-line.accent-cyan   { background: var(--color-cyan); }

.header-card { border-radius: 16px; padding: 24px; display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.header-card.academic { background-color: var(--pp-blue); }
.header-card.core     { background-color: var(--greenColor); }
.header-card.academic .header-icon-wrap,
.header-card.core     .header-icon-wrap,
.header-card.academic .header-title,
.header-card.core     .header-title { color: var(--whiteColor); }
.header-card .header-icon-wrap { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; background-color: rgb(255 255 255 / 20%); }
.header-card .header-title    { font-size: 24px; font-weight: 700; margin: 0 0 4px 0; }
.header-card .header-subtitle { font-size: 16px; color: var(--whiteColor); margin: 0; }
@media (max-width: 576px) {
    .header-card { padding: 18px; }
    .header-card .header-icon-wrap { width: 40px; height: 40px; font-size: 18px; }
    .header-card .header-title { font-size: 16px; }
}

.compare-row { display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--row-divider, #eee); }
.compare-row:last-child { border-bottom: none; }
.compare-row .compare-left { flex: 1; display: flex; align-items: flex-start; gap: 12px; box-shadow: 0px 1px 2px 0px #0000000D; padding: 16px; border-left: 4px solid var(--pp-blue); }
.compare-row .compare-left .row-icon { color: var(--pp-blue); font-size: 16px; margin-top: 2px; flex-shrink: 0; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; background: #EEF2FF; border-radius: 10px; }
.compare-row .compare-left .row-text { font-size: 14px; color: var(--text-dark); line-height: 1.5; margin: 0; }
.compare-row .compare-center { width: 170px; flex-shrink: 0; text-align: center; }
.compare-row .compare-center .row-label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #334155; transition: background 0.2s ease; }
.compare-row .compare-center .row-label:hover { background-color: #f1f5f9; }
.compare-row .compare-center .row-label i { font-size: 12px; color: #64748B; }
.compare-row .compare-right { flex: 1; display: flex; align-items: flex-start; gap: 12px; justify-content: flex-end; text-align: right; box-shadow: 0px 1px 2px 0px #0000000D; padding: 16px; border-right: 4px solid var(--greenColor); }
.compare-row .compare-right .row-text  { font-size: 14px; color: var(--primary-green, #059669); line-height: 1.5; margin: 0; }
.compare-row .compare-right .row-icon  { color: #059669; font-size: 16px; margin-top: 2px; flex-shrink: 0; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; background: #ECFDF5; border-radius: 10px; }
@media (max-width: 767px) {
    .compare-row { flex-wrap: wrap; gap: 12px; display: grid; margin-bottom: 35px; border-bottom: 1px solid #e3e3e3; padding-bottom: 35px; }
    .compare-row .compare-center { width: 100%; order: -1; }
    .compare-row .compare-center .row-label { width: 100%; justify-content: center; }
    .compare-row .compare-left  { width: 100%; padding-right: 0; }
    .compare-row .compare-right { width: 100%; padding-left: 0; justify-content: flex-start; text-align: left; }
    .compare-row .compare-right .row-text { text-align: right; width: 100%; }
    .centerCard { flex-direction: column-reverse; }
}

.countries { position: relative; padding-top: 70px; }

.country-card { background: #ffffff; border-radius: 16px; padding: 2rem; height: 100%; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0px 4px 20px -2px #0000000D; }
.country-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.country-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 16px 0 0 16px; }
.country-card.australia::before   { background-color: var(--color-blue); }
.country-card.canada::before      { background-color: var(--color-red); }
.country-card.new-zealand::before { background-color: var(--color-purple); }
.country-card.united-kingdom::before { background-color: var(--color-orange); }
.country-card.united-states::before  { background-color: var(--color-green); }
.country-card .country-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.country-card .country-header .flag-circle { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.country-card .country-header .flag-circle img { width: 100%; height: 100%; object-fit: cover; }
.country-card .country-header .country-info h3 { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--text-dark); }
.country-card .country-header .country-info .badge-custom { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 20px; margin-top: 0.25rem; }
.country-card .country-header .country-info .badge-custom.badge-blue   { background-color: #eff6ff; color: var(--color-blue); }
.country-card .country-header .country-info .badge-custom.badge-red    { background-color: #fef2f2; color: var(--color-red); }
.country-card .country-header .country-info .badge-custom.badge-purple { background-color: #f5f3ff; color: var(--color-purple); }
.country-card .country-header .country-info .badge-custom.badge-orange { background-color: #fff7ed;  color: var(--color-orange); }
.country-card .country-header .country-info .badge-custom.badge-green  { background-color: #f0fdf4; color: var(--color-green); }
.country-card .country-desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.25rem; }
.country-card .learn-more { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: gap 0.2s ease; }
.country-card .learn-more:hover { gap: 0.75rem; }
.country-card .learn-more.learn-more-blue   { color: var(--color-blue); }
.country-card .learn-more.learn-more-red    { color: var(--color-red); }
.country-card .learn-more.learn-more-purple { color: var(--color-purple); }
.country-card .learn-more.learn-more-orange { color: var(--color-orange); }
.country-card .learn-more.learn-more-green  { color: var(--color-green); }
@media (max-width: 767px) { .country-card { padding: 1.5rem; } }

.graduation-cap { position: absolute; bottom: -105px; left: 10%; width: 126px; height: 126px; }
.graduation-cap svg { width: 126px; height: 126px; }
.graduation-cap.bottomSide { left: unset; right: -8%; bottom: 11%; }

.accordingBlock { padding-top: 40px; position: relative; }
.accordingBlock .section-header { text-align: center; margin-bottom: 2.5rem; padding-top: 2rem; }
.accordingBlock .section-header h2 { font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; }
.accordingBlock .section-header h2 .highlight-pte,
.accordingBlock .section-header h2 .highlight-ielts,
.accordingBlock .section-header h2 .highlight-toefl { color: var(--pp-blue); }
.accordingBlock .section-header p { color: var(--text-muted); font-size: 0.9rem; max-width: 500px; margin: 0 auto; line-height: 1.5; }
.accordingBlock .comparison-table { padding: 0; overflow: hidden; }
.accordingBlock .comparison-table .table-header { display: flex; align-items: center; padding: 1rem 1.5rem; background: #eef2ff; border-bottom: 1px solid #dbe4ff; }
.accordingBlock .comparison-table .table-header .header-label { flex: 0 0 20%; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dark); }
.accordingBlock .comparison-table .table-header .header-exam { flex: 1; text-align: center; font-size: 0.8rem; font-weight: 600; }
.accordingBlock .comparison-table .table-header .header-exam.pte   { color: var(--color-blue); }
.accordingBlock .comparison-table .table-header .header-exam.ielts { color: var(--color-orange); }
.accordingBlock .comparison-table .table-header .header-exam.toefl { color: var(--color-blue); }
.accordingBlock .accordion-section { margin: 0.75rem 0; background: var(--bg-light); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.accordingBlock .accordion-section:not(.collapsed) { background-color: #F6F9FF; }
.accordingBlock .accordion-section .accordion-header-custom { position: relative;display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
.accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap { display: flex; align-items: center; gap: 0.75rem; }
.accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .icon-box { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .icon-box.icon-purple { background: #f3f0ff; color: #7c3aed; }
.accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .icon-box.icon-orange { background: #fff7ed; color: #ea580c; }
.accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .icon-box.icon-blue   { background: #eff6ff; color: #2563eb; }
.accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .icon-box.icon-green  { background: #f0fdf4; color: #16a34a; }
.accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .icon-box i { font-size: 1rem; }
.accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .title-text h4 { font-size: 20px; font-weight: 700; margin: 0; color: var(--text-dark); }
.accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .title-text span { font-size: 14px; color: var(--text-muted); }
.accordingBlock .accordion-section .accordion-header-custom .accordion-chevron { color: var(--text-muted); font-size: 0.9rem; transition: transform 0.3s ease; }
.accordingBlock .accordion-section .accordion-header-custom[aria-expanded="true"] .accordion-chevron { transform: rotate(0deg); }
.accordingBlock .accordion-section .accordion-body-custom { padding: 0 1.5rem 1.5rem 1.5rem; overflow: hidden; max-height: 1000px; opacity: 1; visibility: visible; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
.accordingBlock .accordion-section.collapsed .accordion-body-custom {padding: 0;}
.accordingBlock .accordion-section .accordion-body-custom .comparison-row { display: flex; align-items: center; padding: 1rem 0; border-top: 1px solid #f1f5f9; }
.accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-label { flex: 0 0 20%; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dark); }
.accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-value { flex: 1; text-align: center; font-size: 0.8rem; font-weight: 500; color: var(--text-dark); }
.accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-value.value-pte   { color: var(--color-blue);   font-weight: 600; }
.accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-value.value-ielts { color: var(--color-orange); font-weight: 600; }
.accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-value.value-toefl { color: var(--color-blue);   font-weight: 600; }
.accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-value .value-box { border-radius: 10px; padding: 0.6rem 0.5rem; font-size: 0.75rem; line-height: 1.4; min-height: 74px; display: flex; align-items: center; justify-content: center; background: #fff; color: #374151; max-width: 250px; margin: auto; }
.accordingBlock .accordion-section.collapsed .accordion-body-custom { max-height: 0; opacity: 0; visibility: hidden; }
.accordingBlock .graduation-cap-deco { position: absolute; bottom: 20px; right: 20px; width: 100px; height: 100px; opacity: 0.08; pointer-events: none; }
.accordingBlock .graduation-cap-deco svg { width: 100%; height: 100%; }
.accordingBlock .position-relative-wrap { position: relative; }
/* Tablet: 768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {
    .accordingBlock { padding-top: 60px; }
    .accordingBlock .section-header h2 { font-size: 1.6rem; }
    .accordingBlock .section-header { margin-bottom: 2rem; padding-top: 1.5rem; }
    .accordingBlock .comparison-table .table-header { padding: 0.9rem 1.2rem; }
    .accordingBlock .comparison-table .table-header .header-label { flex: 0 0 22%; font-size: 0.6rem; }
    .accordingBlock .comparison-table .table-header .header-exam { font-size: 0.75rem; }
    .accordingBlock .accordion-section { margin: 0.6rem 0; }
    .accordingBlock .accordion-section .accordion-header-custom { padding: 1rem 1.2rem; position: relative; }
    .accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .icon-box { width: 32px; height: 32px; }
    .accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .title-text h4 { font-size: 18px; }
    .accordingBlock .accordion-section .accordion-body-custom { padding: 0 1.2rem 1rem 1.2rem; }
    .accordingBlock .accordion-section .accordion-body-custom .comparison-row { padding: 0.8rem 0; }
    .accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-label { flex: 0 0 22%; font-size: 0.6rem; }
    .accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-value { font-size: 0.75rem; }
    .accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-value .value-box { min-height: 60px; padding: 0.5rem 0.4rem; font-size: 0.7rem; }
}

/* Mobile: up to 767px */
@media (max-width: 767px) {
    .accordingBlock { padding-top: 40px; }
    .accordingBlock .section-header h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
    .accordingBlock .section-header p { font-size: 0.85rem; }
    .accordingBlock .section-header { margin-bottom: 1.5rem; padding-top: 1rem; }

    .accordingBlock .comparison-table { padding: 0; }
    .accordingBlock .comparison-table .table-header {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 0;
        padding: 0.8rem;
        background: transparent;
        border: none;
    }
    .accordingBlock .comparison-table .table-header .header-label { display: none; }
    .accordingBlock .comparison-table .table-header .header-exam {
        font-size: 0.9rem;
        padding: 0.5rem;
        border-radius: 8px;
        background: rgba(0,0,0,0.02);
    }

    .accordingBlock .accordion-section {
        margin: 0.6rem 0;
        background: #fff;
        border: 1px solid #e5e7eb;
    }
    .accordingBlock .accordion-section:not(.collapsed) { background-color: #f9fafb; }

    .accordingBlock .accordion-section .accordion-header-custom {
        padding: 0.9rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap {
        width: 100%;
        gap: 0.5rem;
    }
    .accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .icon-box {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
    .accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .title-text h4 {
        font-size: 14px;
        font-weight: 600;
    }
    .accordingBlock .accordion-section .accordion-header-custom .accordion-title-wrap .title-text span {
        font-size: 12px;
    }
    .accordingBlock .accordion-section .accordion-header-custom .accordion-chevron {
        position: absolute;
        right: 0.9rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .accordingBlock .accordion-section .accordion-body-custom {
        padding: 0.8rem;
    }
    /* Fix: this was a 2-column grid holding 3 exam values (PTE/IELTS/TOEFL),
       so the 3rd value wrapped onto its own row and no longer lined up
       under the PTE/IELTS/TOEFL pills above — that's the "messed up"
       layout. Grid now matches the 3 exam columns, and the row label is
       kept as a small caption above each trio of values instead of being
       hidden, so it's still clear whether you're looking at Format,
       Duration, etc. */
    .accordingBlock .accordion-section .accordion-body-custom .comparison-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.35rem 0.5rem;
        padding: 0.75rem 0;
        border: none;
        border-bottom: 1px solid #f1f5f9;
        align-items: start;
    }
    .accordingBlock .accordion-section .accordion-body-custom .comparison-row:last-child {
        border-bottom: none;
    }
    .accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-label {
        display: block;
        grid-column: 1 / -1;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }
    .accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-value {
        font-size: 0.72rem;
        text-align: center;
        padding: 0.4rem .25rem;
    }
    .accordingBlock .accordion-section .accordion-body-custom .comparison-row .row-value .value-box {
        min-height: 50px;
        padding: 0.4rem;
        font-size: 0.65rem;
        line-height: 1.3;
        max-width: 100%;
    }

    .accordingBlock .graduation-cap-deco { display: none; }
}

.evaluationReport { padding: 40px 0; }

/* Feature panel inside keySkill */
.keySkill .feature-panel { background: var(--color-bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 1.75rem; height: 100%; }
.keySkill .feature-panel .panel-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.keySkill .feature-panel .panel-header .header-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.keySkill .feature-panel .panel-header .header-icon i { color: #ffffff; font-size: 1.1rem; }
.keySkill .feature-panel .panel-header h3 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--color-text); }
.keySkill .skill-list .skill-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid #f1f5f9; }
.keySkill .skill-list .skill-item:last-child { border-bottom: none; }
.keySkill .skill-list .skill-item .skill-info { display: flex; align-items: center; gap: 0.875rem; }
.keySkill .skill-list .skill-item .skill-info .skill-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-bg-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.keySkill .skill-list .skill-item .skill-info .skill-icon  img { width: 20px; }
.keySkill .skill-list .skill-item .skill-info .skill-icon i { color: var(--color-primary); font-size: 1rem; }
.keySkill .skill-list .skill-item .skill-info .skill-text h4 { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.15rem 0; color: var(--color-text); }
.keySkill .skill-list .skill-item .skill-info .skill-text p  { font-size: 0.78rem; color: var(--color-muted); margin: 0; line-height: 1.4; }
.keySkill .skill-list .skill-item .check-icon { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid #22C55E; }
.keySkill .skill-list .skill-item .check-icon i { color: var(--color-green); font-size: 0.85rem; font-weight: 700; }
.keySkill .advantage-list { display: flex; flex-direction: column; gap: 1rem; }
.keySkill .advantage-list .advantage-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 14px; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow); }
.keySkill .advantage-list .advantage-card .advantage-info { display: flex; align-items: center; gap: 0.875rem; }
.keySkill .advantage-list .advantage-card .advantage-info .advantage-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-bg-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.keySkill .advantage-list .advantage-card .advantage-info .advantage-icon  img { width: 20px;}
.keySkill .advantage-list .advantage-card .advantage-info .advantage-icon i { color: var(--color-primary); font-size: 1rem; }
.keySkill .advantage-list .advantage-card .advantage-info .advantage-text h4 { font-size: 0.9rem; font-weight: 700; margin: 0 0 0.15rem 0; color: var(--color-text); }
.keySkill .advantage-list .advantage-card .advantage-info .advantage-text p  { font-size: 0.78rem; color: var(--color-muted); margin: 0; line-height: 1.4; }
.keySkill .advantage-list .advantage-card .check-icon { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid #22C55E; }
.keySkill .advantage-list .advantage-card .check-icon i { color: var(--color-green); font-size: 0.85rem; font-weight: 700; }
@media (max-width: 767.98px) {
    .keySkill .feature-panel { padding: 1.25rem; margin-bottom: 1.5rem; }
    .keySkill .feature-panel .panel-header h3 { font-size: 0.95rem; }
    .keySkill .skill-list .skill-item { padding: 0.875rem 0; }
    .keySkill .skill-list .skill-item .skill-info .skill-text h4 { font-size: 0.85rem; }
    .keySkill .skill-list .skill-item .skill-info .skill-text p  { font-size: 0.72rem; }
    .keySkill .advantage-list .advantage-card { padding: 1rem 1.25rem; }
    .keySkill .advantage-list .advantage-card .advantage-info .advantage-text h4 { font-size: 0.85rem; }
    .keySkill .advantage-list .advantage-card .advantage-info .advantage-text p  { font-size: 0.72rem; }
}

/* Feature card — Strategies page version */
.feature-card .card-number { position: absolute; top: 0; right: 0; width: 55px; height: 55px; border-radius: 0 15px 0 53px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #ffffff; }
.feature-card .card-number.num-purple { background: var(--color-purple); }
.feature-card .card-number.num-orange { background: var(--color-orange); }
.feature-card .card-number.num-blue   { background: var(--color-blue); }
.feature-card .card-number.num-green  { background: var(--color-green); }
.feature-card .card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.feature-card .card-icon.icon-purple { background: #f5f3ff; color: var(--color-purple); }
.feature-card .card-icon.icon-orange { background: #fff7ed; color: var(--color-orange); }
.feature-card .card-icon.icon-blue   { background: #eff6ff; color: var(--color-blue); }
.feature-card .card-icon.icon-green  { background: #f0fdf4; color: var(--color-green); }
.feature-card .card-icon i { font-size: 1.25rem; }
.feature-card .card-title { font-size: 20px; font-weight: 400; margin-bottom: 0.5rem; line-height: 1.3; }
.feature-card .card-title.title-purple { color: var(--color-purple); }
.feature-card .card-title.title-orange { color: var(--color-orange); }
.feature-card .card-title.title-blue   { color: var(--color-blue); }
.feature-card .card-title.title-green  { color: var(--color-green); }
.feature-card .title-underline { width: 40px; height: 2px; border-radius: 2px; margin-bottom: 1rem; }
.feature-card .title-underline.line-purple { background: var(--color-purple); }
.feature-card .title-underline.line-orange { background: var(--color-orange); }
.feature-card .title-underline.line-blue   { background: var(--color-blue); }
.feature-card .title-underline.line-green  { background: var(--color-green); }
.feature-card .card-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem; border-bottom: 1px dashed #E2E8F0; padding-bottom: 30px; min-height: 91px; }
.feature-card .feature-list { list-style: none; padding: 0; margin: 0; }
.feature-card .feature-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: #334155; margin-bottom: 0.6rem; }
.feature-card .feature-list li:last-child { margin-bottom: 0; }
.feature-card .feature-list li .list-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-card .feature-list li .list-icon.icon-purple { background: var(--color-purple); color: white; }
.feature-card .feature-list li .list-icon.icon-orange { background: var(--color-orange); color: white; }
.feature-card .feature-list li .list-icon.icon-blue   { background: var(--color-blue);   color: white; }
.feature-card .feature-list li .list-icon.icon-green  { background: var(--color-green);  color: white; }
.feature-card .feature-list li .list-icon i { font-size: 0.7rem; font-weight: 700; }
@media (max-width: 767px) { .feature-card { padding: 1.5rem; margin-bottom: 20px; } }

.costsPolicies { padding: 30px 0 0; }
.costsPolicies .policy-card { background: var(--bg-card); border-radius: 20px; padding: 28px; box-shadow: 0px 10px 40px -10px #00479514; margin-bottom: 40px; }
.costsPolicies .policy-card .policy-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.costsPolicies .policy-card .policy-header .header-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.costsPolicies .policy-card .policy-header .header-icon  img { width: 20px; }
.costsPolicies .policy-card .policy-header .header-icon i { color: #ffffff; font-size: 1.1rem; }
.costsPolicies .policy-card .policy-header h3 { font-size: 24px; font-weight: 700; margin: 0; color: var(--text-dark); }
.costsPolicies .policy-list { list-style: none; padding: 0; margin: 0; }
.costsPolicies .policy-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.82rem; color: var(--text-dark); line-height: 1.5; padding: 16px 0; border-bottom: 1px dashed #E2E8F0; }
.costsPolicies .policy-list li:last-child { border-width: 0; }
.costsPolicies .policy-list li p { font-size: 16px; color: #475569; margin: 0; }
.costsPolicies .policy-list li .list-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.1rem; }
.costsPolicies .policy-list li .list-icon.icon-green { background: #f0fdf4; color: var(--color-green); }
.costsPolicies .policy-list li .list-icon.icon-red   { background: #fef2f2; color: var(--color-red); }
.costsPolicies .policy-list li .list-icon.icon-blue  { background: #eff6ff; color: var(--color-blue); }
.costsPolicies .policy-list li .list-icon i { font-size: 0.7rem; font-weight: 700; }
.costsPolicies .policy-list li a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.costsPolicies .policy-list li a:hover { text-decoration: underline; }
.costsPolicies .illustration-img { max-width: 480px; height: 100%; display: block; width: 100%; object-fit: contain; margin: 0 auto; }
.costsPolicies .retake-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.costsPolicies .retake-grid .retake-item { display: flex; align-items: flex-start; gap: 0.75rem; background: #F8FAFC80; padding: 24px; border: 1px solid #F1F5F9; border-radius: 16px; }
.costsPolicies .retake-grid .retake-item .retake-icon { width: 36px; height: 36px; border-radius: 10px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.costsPolicies .retake-grid .retake-item .retake-icon i { color: var(--color-primary); font-size: 0.9rem; }
.costsPolicies .retake-grid .retake-item .retake-text h4 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.25rem 0; color: var(--text-dark); }
.costsPolicies .retake-grid .retake-item .retake-text p  { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.costsPolicies .retake-grid .retake-item .retake-text p a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.costsPolicies .retake-grid .retake-item .retake-text p a:hover { text-decoration: underline; }
@media (max-width: 767px) { .costsPolicies .policy-card { padding: 1.5rem; } .costsPolicies .retake-grid { grid-template-columns: 1fr; } }
@media (max-width: 576px)  { .costsPolicies .retake-grid { grid-template-columns: 1fr; } }

.refundPolicy-section .refund-card { background: var(--bg-card); border-radius: 20px; padding: 2rem 1.5rem; height: 100%; text-align: center; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.refundPolicy-section .refund-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.refundPolicy-section .refund-card .card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; box-shadow: 0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A;
 }
.refundPolicy-section .refund-card .card-icon.icon-blue      { background: var(--color-primary); }
.refundPolicy-section .refund-card .card-icon.icon-orange    { background: var(--color-orange); }
.refundPolicy-section .refund-card .card-icon.icon-navy      { background: var(--color-navy); }
.refundPolicy-section .refund-card .card-icon.icon-dark-blue { background: var(--color-dark-blue); }
.refundPolicy-section .refund-card .card-icon i { color: #ffffff; font-size: 1.4rem; }
.refundPolicy-section .refund-card h3 { font-size: 24px; font-weight: 700; margin-bottom: 0.875rem; line-height: 1.35; color: var(--color-primary); }
.refundPolicy-section .refund-card p  { color: #5C5F61; line-height: 1.65; margin: 0; }
@media (max-width: 767px) { .refundPolicy-section .refund-card { padding: 1.75rem 1.25rem; } }

@media screen and (width <= 526px) {
    .container-app { padding: 0; }
}
.bottom-row-bg { padding: 1.5rem 0.5rem; }

/* ===== Autoplay animations for "How Platform Works" images ===== */
.mokeTestBlock .mock-card_,
.mokeTestBlock .main-card_ {
    opacity: 0;
    animation: slideInImage 0.8s ease-out forwards;
}

/* Step content text animation */
.mokeTestBlock .step-content {
    opacity: 0;
    animation: slideInContent 0.8s ease-out forwards;
}

/* Image slides in from right (odd blocks) */
.mokeTestBlock:nth-of-type(odd) .mock-card_,
.mokeTestBlock:nth-of-type(odd) .main-card_ {
    animation-name: slideInRight;
}

/* Image slides in from left (even blocks) */
.mokeTestBlock:nth-of-type(even) .mock-card_,
.mokeTestBlock:nth-of-type(even) .main-card_ {
    animation-name: slideInLeft;
}

/* Stagger animations based on block order */
.mokeTestBlock:nth-of-type(1) .mock-card_,
.mokeTestBlock:nth-of-type(1) .step-content { animation-delay: 0.1s; }

.mokeTestBlock:nth-of-type(2) .mock-card_,
.mokeTestBlock:nth-of-type(2) .step-content { animation-delay: 0.3s; }

.mokeTestBlock:nth-of-type(3) .main-card_,
.mokeTestBlock:nth-of-type(3) .step-content { animation-delay: 0.5s; }

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInImage {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* ===== Student Cards Slider Navigation ===== */
.scores-slider-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
    padding: 0 16px;
}

.scores-slider-nav .slider-btn-prev,
.scores-slider-nav .slider-btn-next {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--pp-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.scores-slider-nav .slider-btn-prev:hover,
.scores-slider-nav .slider-btn-next:hover {
    background: #1245d0;
    transform: scale(1.08);
}

.scores-slider-nav .slider-btn-prev:disabled,
.scores-slider-nav .slider-btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.scores-slider-nav .slider-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 100px;
    justify-content: center;
}

.scores-slider-nav .slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scores-slider-nav .slider-dots .dot.active {
    background: var(--pp-blue);
    width: 28px;
    border-radius: 5px;
}

.scores-slider-nav .slider-dots .dot:hover {
    background: #bfdbfe;
}

.scores-slider-nav .slider-dots .dot.active:hover {
    background: var(--pp-blue);
}

@media (max-width: 768px) {
    .scores-slider-nav {
        gap: 16px;
        margin-top: 24px;
    }

    .scores-slider-nav .slider-btn-prev,
    .scores-slider-nav .slider-btn-next {
        width: 36px;
        height: 36px;
    }

    .scores-slider-nav .slider-btn-prev svg,
    .scores-slider-nav .slider-btn-next svg {
        width: 16px;
        height: 16px;
    }
}


.aboutExam section.scoring-section {padding-bottom: 60px;}
.fee_registration section.scoring-section {padding: 60px 0;}

section.refundPolicy-section{padding: 60px 0;}
@media screen and (width < 767.98px){
  .PteAcademic {padding: 3rem 1rem;}
  .feature-row{margin:0}
  .mokeTestBlock {padding: 0 1rem 3rem;overflow: hidden;margin-bottom: 0;}
  .card-deck {gap: 0px; display: grid;}
  section.whyMockTest-sec { padding-top: 0px;}
  .academicCore {margin-top:3rem;}
  .recorder-panel .slider-nav {top: 0px;}
  .evaluationReport {padding: 3rem 0;}
  .skill-cards-section{margin-bottom: 0!important;}
  html body.fee_registration section.scoring-section{padding: 1.5rem 0;}
  .refundCards {overflow: hidden; padding: 0 15px;}
  .footer-links-wrapper
  {
    grid-template-columns: repeat(2,1fr);
    grid-gap: 1.5rem;
  }
  
  .feature-card .card-desc{min-height: 1px;}
}

@media screen and (width < 991.98px){
  .graduation-cap.bottomSide {display: none;}
  .centerCard {flex-direction: column-reverse;}
}


.sb-article h1,
.sb-article h2,
.sb-article h3,
.sb-article h4,
.sb-article h5,
.sb-article h6
{
  scroll-margin-top: 75px;
}

.coming-pricing{
    padding: 40px 0;
    background:#fff;
}

.cp-card{
    max-width:940px;
    margin:auto;
    padding:40px 45px;
    text-align:center;
    border-radius:32px;
    border:1px solid #e9edf8;
    background:#fff;
    box-shadow:0 25px 70px rgba(18,52,112,.08);
    position:relative;
    overflow:hidden;
}

.cp-card::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    background:#2F5EFF;
    opacity:.08;
    border-radius:50%;
    top:-120px;
    right:-120px;
}

.cp-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:40px;
    background:#EEF4FF;
    color:#2F5EFF;
    font-weight:600;
    margin-bottom:28px;
}

.cp-icon{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#2F5EFF,#5A7CFF);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    margin-bottom:30px;
}

.cp-title{
    font-size:48px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;
}

.cp-title span{
    color:#2F5EFF;
}

.cp-desc{
    max-width:560px;
    margin:auto;
    color:#6d7280;
    font-size:18px;
    line-height:1.8;
}

.cp-actions{
    display:flex;
    justify-content:center;
    gap:18px;
    margin:25px 0;
    flex-wrap:wrap;
}

.cp-actions .btn{
    min-width:180px;
    border-radius:50px;
    padding:14px 32px;
    font-weight:600;
}

.cp-features{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    padding-top: 15px;
    border-top:1px solid #edf0f5;
}

.cp-item{
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:600;
}

.cp-item i{
    color:#2F5EFF;
}

/* This "Coming Soon" pricing card had no responsive rules at all — the
   title's fixed 48px font-size was wrapping across 3-4 lines on tablet
   and phone widths instead of scaling down, and the fixed card/icon
   sizing left too little breathing room. Desktop (≥992px, where the
   940px max-width card already fits comfortably) is untouched below. */
@media (max-width: 991.98px) {
    .cp-card { padding: 32px 24px; }
    .cp-icon { width: 72px; height: 72px; font-size: 32px; margin-bottom: 20px; }
    .cp-title { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .cp-desc { font-size: 1rem; }
    .cp-actions .btn { min-width: 0; }
    .cp-features { gap: .75rem 1.5rem; }
    .if-card--lms { flex-direction: column !important }
}

@media (max-width: 575.98px) {
    .cp-card { padding: 28px 18px; border-radius: 24px; }
    .cp-card::before { width: 160px; height: 160px; top: -80px; right: -80px; }
    .cp-badge { margin-bottom: 18px; font-size: .8rem; padding: 6px 14px; }
    .cp-icon { width: 64px; height: 64px; font-size: 28px; margin-bottom: 16px; }
    .cp-title { font-size: clamp(1.4rem, 8vw, 2rem); margin-bottom: 12px; }
    .cp-desc { font-size: .92rem; }
    .cp-actions { flex-direction: column; align-items: stretch; gap: .75rem; margin: 18px 0; }
    .cp-actions .btn { width: 100%; padding: 12px 24px; }
    .cp-features { justify-content: center; gap: .6rem 1.25rem; }
    .cp-item { font-size: .85rem; }
}

#institute-features
{
  scroll-margin-top: 100px;
}
#primary
{
  margin: 0px;
}
.mc4wp-alert.mc4wp-success
{
  text-align: center;
  padding: 5px  20px;
  margin-top: 20px;
}
.mc4wp-alert.mc4wp-success > p
{
  display: inline-block;
  padding: 5px 20px;
  color: #1559ed;
  border-radius: 40px;
  background: #edf2ff;
}
.policy-section
{
  padding: 40px 0;
}

/* ===================== BLOG PAGINATION ===================== */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  margin: 0 4px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e3e9f5;
  color: var(--pp-ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  transition: all .2s ease;
  vertical-align: middle;
}
a.page-numbers:hover {
  background: var(--pp-soft);
  border-color: var(--pp-blue);
  color: var(--pp-blue);
  transform: translateY(-2px);
}
.page-numbers.current {
  background: linear-gradient(135deg, var(--pp-blue), var(--pp-blue-dark));
  border-color: var(--pp-blue);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(21, 89, 237, .5);
}
.page-numbers.dots {
  border: none;
  background: transparent;
  color: #9aa5b8;
  min-width: auto;
  padding: 0 4px;
}
a.page-numbers.next,
a.page-numbers.prev {
  padding: 0 20px;
  font-weight: 700;
  color: var(--pp-blue);
  background: var(--pp-soft);
  border-color: transparent;
}
a.page-numbers.next:hover,
a.page-numbers.prev:hover {
  background: var(--pp-blue);
  border-color: var(--pp-blue);
  color: #fff;
}

.sb-post-share
{
  padding: 1.5rem 0;
  margin-top: 2rem;
  border-top: 1.5px solid #e8ecf5;
  display: flex;
  align-items: center;
  gap: 20px;
}
.sb-post-share h4
{
  font-size: 18px;
  font-weight: 700;
}
.sb-post-share .sb-author-socials
{
  margin-top: 0px;
}

@media only screen and (max-width: 768px)
{
  .sb-post-share
  {
    flex-direction: column;
  }
}

/* ===================== Uniform section spacing (all pages) =====================
   Must stay last: overrides the many per-section and per-breakpoint paddings above.
   Each section adds 60px only ABOVE itself, never below, so any two neighbouring sections
   sit exactly 60px apart without depending on margin collapsing (which wrappers can break).
   Sections with their own background also keep 60px inner padding so content clears the coloured band.
   Hero sections (.hero, .about-hero, .sb-hero) keep their own spacing. */
section:not(.hero, .about-hero, .sb-hero) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 60px !important;
  margin-bottom: 0 !important;
}
section:is(.features-section, .testi-section, .ci-section, .wst-section, .pvt-swc-section,
           .pvt-gsc-section, .si-cta-section, .need-to-succeed, .about-sec) {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
/* A coloured band that directly follows a hero or another coloured band butts up against it (no white strip). */
:is(.hero, .about-hero, .sb-hero, .features-section, .testi-section, .ci-section, .wst-section, .pvt-swc-section,
    .pvt-gsc-section, .si-cta-section, .need-to-succeed, .about-sec)
  + section:is(.features-section, .testi-section, .ci-section, .wst-section, .pvt-swc-section,
               .pvt-gsc-section, .si-cta-section, .need-to-succeed, .about-sec) { margin-top: 0 !important; }
section.pvt-swc-section + section.pvt-gsc-section { padding-top: 0 !important; }
.site-footer { margin-top: 60px; }
.accordingBlock .section-header { padding-top: 0 !important; }
/* Without padding, overflow:hidden would crop card shadows at the top/bottom edge; only the side decorations need clipping. */
.skills-section,
.git-section { overflow: visible; overflow-x: clip; }

/* ===================== Button states (all pages) =====================
   Must stay last. Generic theme/Bootstrap rules (a:focus, button:focus, input[type=submit]:focus,
   .btn:active) outrank the single-class button rules above and recolour a button once it is clicked.
   Each button lists its resting look for :focus/:visited first, then its hover look for :hover/:active,
   so a clicked button returns to normal and a hovered one still shows its hover colour. */

/* Blue filled (.btn-primary: hero, header sign-in, mega-menu promo, pricing) */
.btn-primary:is(:focus, :visited) { color: #fff !important; background-color: var(--pp-blue) !important; border-color: var(--pp-blue) !important; }
.btn-primary:is(:hover, :active) { color: #fff !important; background-color: var(--pp-blue-dark) !important; border-color: var(--pp-blue-dark) !important; }

/* Blue outline (.btn-outline-primary: hero, pricing) */
.btn-outline-primary:is(:focus, :visited) { color: var(--pp-blue) !important; background-color: transparent !important; border-color: rgba(47, 85, 255, .35) !important; }
.btn-outline-primary:is(:hover, :active) { color: #fff !important; background-color: var(--pp-blue) !important; border-color: var(--pp-blue) !important; }

/* Footer CTA (blue banner) */
.cta-btn--white:is(:focus, :visited) { color: var(--pp-blue) !important; background: #fff !important; border-color: #fff !important; }
.cta-btn--white:is(:hover, :active) { color: var(--pp-blue) !important; background: #eef2ff !important; border-color: #eef2ff !important; }
.cta-btn--outline:is(:focus, :visited) { color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.6) !important; }
.cta-btn--outline:is(:hover, :active) { color: #fff !important; background: rgba(255,255,255,.12) !important; border-color: #fff !important; }

/* Institute landing CTA */
.si-btn--white:is(:focus, :visited) { color: var(--pp-blue) !important; background: #fff !important; border-color: #fff !important; }
.si-btn--white:is(:hover, :active) { color: var(--pp-blue-dark) !important; background: #eef1ff !important; border-color: #eef1ff !important; }
.si-btn--outline:is(:focus, :visited) { color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.6) !important; }
.si-btn--outline:is(:hover, :active) { color: #fff !important; background: rgba(255,255,255,.15) !important; border-color: #fff !important; }

/* PTE Academic vs Core cards */
.wst-btn--white:is(:focus, :visited) { color: var(--pp-blue) !important; background: #fff !important; border-color: #fff !important; }
.wst-btn--white:is(:hover, :active) { color: #fff !important; background: transparent !important; border-color: #fff !important; }
.wst-btn--outline:is(:focus, :visited) { color: var(--pp-ink) !important; background: #fff !important; border-color: #d1d5db !important; }
.wst-btn--outline:is(:hover, :active) { color: var(--pp-blue) !important; background: #fff !important; border-color: var(--pp-blue) !important; }

/* IELTS Academic vs General cards (hover dims via opacity) */
.iag-btn--blue:is(:focus, :visited, :hover, :active) { color: #fff !important; background: var(--pp-blue) !important; }
.iag-btn--dark:is(:focus, :visited, :hover, :active) { color: #fff !important; background: #1f2937 !important; }

/* Solid blue buttons that darken on hover */
.wsp-btn:is(:focus, :visited),
.btn-compare-plans:is(:focus, :visited),
.git-submit:focus { color: #fff !important; background: var(--pp-blue) !important; }
.wsp-btn:is(:hover, :active),
.btn-compare-plans:is(:hover, :active),
.git-submit:is(:hover, :active),
.pwu-submit:is(:hover, :active),
.bfd-submit:is(:hover, :active),
.newsletter-btn:is(:hover, :active) { color: #fff !important; background: var(--pp-blue-dark) !important; }
.btn-practice:is(:focus, :hover, :active) { color: #fff !important; background: var(--blue) !important; }

/* Pricing plan buttons */
.p-btn:is(:focus, :visited) { color: var(--pp-blue) !important; background: #dde5ff !important; }
.p-btn:is(:hover, :active),
.p-card:not(.p-card--featured):hover .p-btn { color: #fff !important; background: var(--pp-blue) !important; }
.p-btn--featured:is(:focus, :visited) { color: #fff !important; background: var(--pp-blue) !important; }
.p-btn--featured:is(:hover, :active) { color: #fff !important; background: var(--pp-blue-dark) !important; }

/* Pricing tabs and toggles: the selected one stays highlighted even while hovered/focused */
.pricing-tab:is(:focus, :hover, :active) { color: #9ca3af !important; background: transparent !important; }
.pricing-tab.active,
.pricing-tab.active:is(:focus, :hover, :active) { color: var(--pp-blue) !important; background: transparent !important; }
.ptog-btn:is(:focus, :hover, :active) { color: #9ca3af !important; background: transparent !important; }
.ptog-btn.active,
.ptog-btn.active:is(:focus, :hover, :active) { color: #fff !important; background: var(--pp-blue) !important; }

/* Institute software feature tabs */
.ise-tab:is(:focus, :active) { color: #6b7280 !important; background: transparent !important; }
.ise-tab:hover,
.ise-tab.active,
.ise-tab.active:is(:focus, :active) { color: var(--pp-blue) !important; background: transparent !important; }

/* Mega-menu exam variant pills */
.mega-pill:is(:focus, :visited) { color: var(--pp-ink) !important; background: #fff !important; border-color: rgba(16, 22, 34, .12) !important; }
.mega-pill:is(:hover, :active) { color: var(--pp-blue) !important; background: #fff !important; border-color: var(--pp-blue) !important; }
.mega-pill.active,
.mega-pill.active:is(:focus, :hover, :active) { color: #fff !important; background: var(--pp-blue) !important; border-color: var(--pp-blue) !important; }

/* Header dropdown items (Bootstrap's default :active is its own blue, not the brand blue) */
.dropdown-item:is(:focus, :active) { color: var(--pp-blue) !important; background: var(--pp-soft) !important; }

/* Testimonial arrows and feature-card slider dots */
.testi-nav:is(:focus, :visited) { color: #fff !important; background: #6293FF !important; border-color: rgba(47,85,255,.25) !important; }
.testi-nav:is(:hover, :active),
.testi-nav.testi-nav--active,
.testi-nav.testi-nav--active:is(:focus, :hover, :active) { color: #fff !important; background: var(--pp-blue) !important; border-color: var(--pp-blue) !important; }
.feat-dot:is(:focus, :hover, :active) { background: rgba(43, 43, 113, .2) !important; }
.feat-dot.active,
.feat-dot.active:is(:focus, :hover, :active) { background: var(--pp-blue) !important; }

/* Text-style links that act as buttons */
.articles-see-all:is(:focus, :visited) { color: var(--pp-ink) !important; background: #fff !important; border-color: #d0d8f0 !important; }
.articles-see-all:is(:hover, :active) { color: #fff !important; background: var(--pp-blue) !important; border-color: var(--pp-blue) !important; }
.sb-nav-btn:is(:focus, :visited) { color: var(--pp-ink) !important; background: transparent !important; border-color: #e8ecf5 !important; }
.sb-nav-btn:is(:hover, :active) { color: #fff !important; background: var(--pp-blue) !important; border-color: var(--pp-blue) !important; }
.sb-cta-card .sb-cta-btn:is(:focus, :visited, :hover, :active) { color: var(--pp-blue) !important; background: #fff !important; }
.pss-view-all:is(:focus, :visited) { color: var(--pp-blue) !important; }
.pss-view-all:is(:hover, :active) { color: var(--pp-blue-dark) !important; }
.sk-link:is(:focus, :visited, :hover, :active) { color: #fff !important; }
.footer-nav-list a:is(:focus, :visited) { color: #a0aac8 !important; }
.footer-nav-list a:is(:hover, :active) { color: #fff !important; }

/* ===================== Section headings (all pages) =====================
   Must stay last. Every section's main heading (heroes excluded) gets the home-page look:
   700 weight, black with blue accent words, 35px on desktop stepping down on tablet/phone.
   "Who we are" and the newsletter heading stay fully blue; headings on blue CTA banners stay white. */
:root { --section-heading-size: 35px; }
@media (max-width: 991.98px) { :root { --section-heading-size: 30px; } }
@media (max-width: 767.98px) { :root { --section-heading-size: 26px; } }

:is(.skills-title, .feat-title, .how-title, .skill-cards-title, .testi-title, .why-title, .articles-title,
    .faq-heading, .pricing-title, .cp-title, .blg-heading, .who-title, .mv-title, .newsletter-title,
    .ci-heading, .git-heading, .pwu-heading, .ise-heading, .ran-heading, .bfd-heading,
    .aivh-heading, .efc-heading, .swc-heading, .scs-heading, .wsp-heading, .dct-heading, .pvt-qc-heading,
    .tdc-heading, .asa-title, .pvt-swc-heading, .pvt-gsc-heading, .wst-heading,
    .section-header .section-title, .need-to-succeed .section-title, .section-heading h3,
    .countries .section-header h2, .accordingBlock .section-header h2,
    .cta-title, .si-cta-title) {
  font-size: var(--section-heading-size) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.3px !important;
  text-transform: none !important;
}

:is(.skills-title, .feat-title, .how-title, .skill-cards-title, .testi-title, .why-title, .articles-title,
    .faq-heading, .pricing-title, .cp-title, .blg-heading, .mv-title,
    .ci-heading, .git-heading, .pwu-heading, .ise-heading, .ran-heading, .bfd-heading,
    .aivh-heading, .efc-heading, .swc-heading, .scs-heading, .wsp-heading, .dct-heading, .pvt-qc-heading,
    .tdc-heading, .asa-title, .pvt-swc-heading, .pvt-gsc-heading, .wst-heading,
    .section-header .section-title, .need-to-succeed .section-title, .section-heading h3,
    .countries .section-header h2, .accordingBlock .section-header h2) { color: var(--pp-ink) !important; }

:is(.who-title, .newsletter-title) { color: var(--pp-blue) !important; }

:is(.skills-title, .feat-title, .how-title, .skill-cards-title, .testi-title, .why-title, .articles-title,
    .faq-heading, .pricing-title, .cp-title, .blg-heading, .who-title, .mv-title, .newsletter-title,
    .ci-heading, .git-heading, .pwu-heading, .ise-heading, .ran-heading, .bfd-heading,
    .aivh-heading, .efc-heading, .swc-heading, .scs-heading, .wsp-heading, .dct-heading, .pvt-qc-heading,
    .tdc-heading, .asa-title, .pvt-swc-heading, .pvt-gsc-heading, .wst-heading,
    .section-header .section-title, .need-to-succeed .section-title, .section-heading h3,
    .countries .section-header h2, .accordingBlock .section-header h2) span { color: var(--pp-blue) !important; }

/* ===================== Contact Form 7 =====================
   The hidden "sending" spinner otherwise wraps onto its own line under full-width submit buttons and,
   with the paragraph margin around the button, adds ~45px of empty space under every form.
   It now sits inside the button instead. */
.wpcf7-form :has(> .wpcf7-submit) { position: relative; margin-bottom: 0; }
.wpcf7-form .wpcf7-spinner { position: absolute; top: 50%; right: 16px; margin: -12px 0 0; }

/* ===================== Section heading spacing (all pages) =====================
   Must stay last. The same space under every section title: 16px to its subtitle, and 40px from the
   title block (title, or title + subtitle) to the section's content. Header wrappers and Bootstrap
   utility margins that used to add their own space are neutralised below. */
:root { --title-sub-gap: 16px; --title-content-gap: 40px; }

/* Title → subtitle, or title → content when there is no subtitle */
:is(.skills-title, .feat-title, .how-title, .skill-cards-title, .testi-title, .why-title, .articles-title,
    .faq-heading, .pricing-title, .cp-title, .blg-heading, .who-title, .mv-title, .newsletter-title,
    .ci-heading, .git-heading, .pwu-heading, .ise-heading, .ran-heading, .bfd-heading,
    .aivh-heading, .efc-heading, .swc-heading, .scs-heading, .wsp-heading, .dct-heading, .pvt-qc-heading,
    .tdc-heading, .asa-title, .pvt-swc-heading, .pvt-gsc-heading, .wst-heading,
    .section-header .section-title, .need-to-succeed .section-title, .section-heading h3,
    .countries .section-header h2, .accordingBlock .section-header h2, .cta-title, .si-cta-title) {
  margin-bottom: var(--title-sub-gap) !important;
}
:is(.skills-title, .feat-title, .how-title, .skill-cards-title, .testi-title, .why-title, .articles-title,
    .faq-heading, .pricing-title, .cp-title, .blg-heading, .who-title, .newsletter-title,
    .ci-heading, .git-heading, .pwu-heading, .ise-heading, .ran-heading, .bfd-heading,
    .aivh-heading, .efc-heading, .swc-heading, .scs-heading, .wsp-heading, .dct-heading, .pvt-qc-heading,
    .tdc-heading, .asa-title, .pvt-swc-heading, .pvt-gsc-heading, .wst-heading,
    .section-header .section-title, .need-to-succeed .section-title, .section-heading h3,
    .countries .section-header h2, .accordingBlock .section-header h2):not(:has(+ :is(p, [class*="-sub"], [class*="-desc"]))) {
  margin-bottom: var(--title-content-gap) !important;
}

/* Subtitle → content */
:is(.skills-title, .feat-title, .how-title, .skill-cards-title, .why-title,
    .pricing-title, .cp-title, .who-title, .newsletter-title,
    .git-heading, .pwu-heading, .ise-heading, .ran-heading, .bfd-heading,
    .aivh-heading, .efc-heading, .pvt-qc-heading, .tdc-heading, .asa-title, .pvt-swc-heading,
    .section-header .section-title, .need-to-succeed .section-title, .section-heading h3,
    .countries .section-header h2, .accordingBlock .section-header h2)
  + :is(p, [class*="-sub"], [class*="-desc"]):not(.ai-eval-sub) {
  margin-top: 0 !important;
  margin-bottom: var(--title-content-gap) !important;
}

/* Header wrappers no longer add their own space (the subtitle's margin carries the 40px) */
:is(.section-header, .section-heading, .aivh-top, .efc-top, .ise-header, .ran-top) { margin-bottom: 0 !important; }
.how-section .row.mb-5 { margin-bottom: 0 !important; }
.coming-pricing .cp-actions { margin-top: 0 !important; }

/* Content rows that pushed themselves further down with an mt-2 utility: back to the plain grid gutter */
.features-section .feat-cards-row,
.why-section .row.mt-2,
.articles-section .row.mt-2,
.scores-section .row.g-4 { margin-top: calc(-1 * var(--bs-gutter-y)) !important; }
.ai-eval-sub > p:last-child { margin-bottom: 0; }
/* AI evaluation: text and image sit side by side; once they stack, the row gap is the 40px */
@media (max-width: 991.98px) { .evaluationReport .row { --bs-gutter-y: var(--title-content-gap); } }
/* Mock-test step rows: their columns are m-0, so the row's negative gutter offset pulled each step 48px up
   over the subtitle / previous step */
.mokeTestBlock > .row { margin-top: 0; }

/* Title blocks that share a row with side items (slider arrows, "See all" button, intro column):
   the row carries the 40px so those side items stay aligned with the text */
.testi-section .testi-sub,
.articles-section .articles-sub,
.mv-section .mv-intro { margin-top: 0 !important; margin-bottom: 0 !important; }
.mv-section .mv-title { margin-bottom: 0 !important; }
.testi-section .testi-header,
.articles-section .articles-header,
.mv-section .row.mb-4 { margin-bottom: var(--title-content-gap) !important; }

/* Banners: title → subtitle follows the 16px rule; their buttons keep the banner's own layout */
.si-cta-section .si-cta-sub { margin-top: 0 !important; }


/* ============================================
   SIDEBAR DOWNLOAD CTA
============================================ */

.sb-download-cta {
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    overflow: hidden;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(18, 31, 57, .09);
    font-family: "Plus Jakarta Sans", sans-serif;
    box-sizing: border-box;
}

.sb-download-cta *,
.sb-download-cta *::before,
.sb-download-cta *::after {
    box-sizing: border-box;
}

.sb-download-cta-body {
    padding: 16px 15px 14px;
}

.sb-download-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f0ff;
    border-radius: 12px;
    font-size: 24px;
}

.sb-download-cta .sb-download-title {
    margin: 0 0 20px;
    color: #071b40;
    text-align: center;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.15px;
}

.sb-download-title span {
    color: #5a4ff3;
    font-weight: 500;
}

.sb-download-highlight {
    margin-bottom: 14px;
    padding: 10px 9px;
    background: #fff5ec;
    border-left: 3px solid #ff7c2a;
    border-radius: 5px;
    color: #a84b28;
    font-size: 10px;
    line-height: 1.7;
}

.sb-download-highlight strong {
    color: #a3411e;
    font-weight: 800;
}

.sb-download-benefits {
    list-style: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.sb-download-benefits li {
    position: relative;
    margin: 0 0 9px !important;
    padding: 0 0 0 16px !important;
    color: #3d5273;
    font-size: 10px;
    line-height: 1.6;
}

.sb-download-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #16b66b;
    font-size: 13px;
    font-weight: 800;
}

.sb-download-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 39px;
    padding: 10px;
    border-radius: 9px;
    background: linear-gradient(
        105deg,
        #6563f5 0%,
        #4d43e9 100%
    );
    color: #fff !important;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    transition: filter .25s ease;
}

.sb-download-button:hover {
    color: #fff !important;
    filter: brightness(.94);
}

.sb-download-proof {
    margin: 12px 0 0 !important;
    color: #78839b;
    text-align: center;
    font-size: 8px;
    line-height: 1.6;
}

.sb-download-proof span {
    color: #b58a28;
    white-space: nowrap;
}

.sb-download-footer {
    padding: 8px 10px;
    background: #f0f3f8;
    color: #6258ee;
    text-align: center;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sb-download-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sb-download-highlight span {
    display: inline;
}

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

@media (max-width: 991px) {
    .sb-download-cta {
        margin: 24px 0;
    }
}

@media (max-width: 767px) {
    .sb-download-cta {
        max-width: 360px;
        margin: 24px auto;
    }

    .sb-download-cta-body {
        padding: 20px;
    }

    .sb-download-cta .sb-download-title {
        font-size: 15px;
    }

    .sb-download-highlight,
    .sb-download-benefits li {
        font-size: 12px;
    }

    .sb-download-button {
        min-height: 44px;
        font-size: 12px;
    }

    .sb-download-proof {
        font-size: 9px;
    }
}