.elementor-15800 .elementor-element.elementor-element-c69f9b9{--display:flex;--margin-top:32px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-15800 .elementor-element.elementor-element-c69f9b9{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(max-width:767px){.elementor-15800 .elementor-element.elementor-element-c69f9b9{--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for container, class: .elementor-element-c69f9b9 *//* ================================================================
   SHAKTI HOME — ISOLATED STYLES
   All .elementor-15800 .elementor-element.elementor-element-c69f9b9s scoped under .sk-page — zero WordPress bleed.
   Edit variables at top to retheme; section styles below are labelled.
   ================================================================ */

  /* ── DESIGN TOKENS ───────────────────────────────────────────── */
  .sk-page {
    /* Brand Colors */
    --sk-primary: #0082c6;
    --sk-primary-light: #33a0da;
    --sk-primary-dark: #00639a;
    --sk-brand-green: #1d5c3a;
    --sk-navy-card: #1a2b3c;
    --sk-dark-bg: #0a1628;

    /* Neutrals */
    --sk-bg-white: #ffffff;
    --sk-bg-light: #f8fafc;
    --sk-bg-grey: #f5f5f5;
    --sk-text: #1a1a1a;
    --sk-text-secondary: #4a4a4a;
    --sk-text-muted: #6b7280;
    --sk-border: rgba(0, 0, 0, 0.12);

    /* Accent */
    --sk-accent: #ffb74d;

    /* Font */
    --sk-font: "Figtree", "Inter", "Segoe UI", Arial, sans-serif;

    /* Font sizes — Mobile base (design system scale) */
    --sk-h1: 26px;
    --sk-h2: 22px;
    --sk-h3: 20px;
    --sk-h4: 18px;
    --sk-h5: 16px;
    --sk-h6: 15px;
    --sk-p: 16px;

    /* Layout */
    --sk-max-width: 1200px;
    --sk-radius-card: 20px;
    --sk-radius-btn: 6px;
    --sk-gap: 20px;
    --sk-section-py: 56px;
  }

  /* Tablet (768px+) */
  @media (min-width: 768px) {
    .sk-page {
      --sk-h1: 36px;
      --sk-h2: 26px;
      --sk-h3: 24px;
      --sk-h4: 22px;
      --sk-h5: 20px;
      --sk-h6: 17px;
      --sk-p: 15px;
      --sk-section-py: 68px;
    }
  }

  /* Desktop (1024px+) */
  @media (min-width: 1024px) {
    .sk-page {
      --sk-h1: 48px;
      --sk-h2: 48px;
      --sk-h3: 28px;
      --sk-h4: 26px;
      --sk-h5: 24px;
      --sk-h6: 18px;
      --sk-p: 18px;
      --sk-section-py: 80px;
    }
  }

  /* ── SCOPED RESET ────────────────────────────────────────────── */
  .sk-page *,
  .sk-page *::before,
  .sk-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .sk-page img,
  .sk-page video {
    max-width: 100%;
    display: block;
  }
  .sk-page ul,
  .sk-page ol {
    list-style: none;
  }

  /* ── BASE ────────────────────────────────────────────────────── */
  .sk-page {
    font-family: var(--sk-font);
    color: var(--sk-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* prevent any child (e.g. watermarks) from causing horizontal scroll */
  }

  /* ── TYPOGRAPHY ──────────────────────────────────────────────── */
  .sk-page h1,
  .sk-page h2,
  .sk-page h3,
  .sk-page h4,
  .sk-page h5,
  .sk-page h6 {
    font-family: var(--sk-font);
  }
  .sk-page h1 {
    font-size: var(--sk-h1);
    font-weight: 700;
    line-height: 1.1;
  }
  .sk-page h2 {
    font-size: var(--sk-h2);
    font-weight: 600;
    line-height: 1.2;
  }
  .sk-page h3 {
    font-size: var(--sk-h3);
    font-weight: 600;
    line-height: 1.2;
  }
  .sk-page h4 {
    font-size: var(--sk-h4);
    font-weight: 600;
    line-height: 1.3;
  }
  .sk-page p {
    font-size: var(--sk-p);
    font-weight: 400;
    line-height: 1.6;
  }
  .sk-page a {
    color: var(--sk-primary);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .sk-page a:hover {
    color: var(--sk-primary-dark);
  }
  .sk-page *:focus-visible {
    outline: 2px solid var(--sk-primary);
    outline-offset: 3px;
  }

  /* ── WRAP — centers and pads content inside sections ─────────── */
  .sk-page .sk-wrap {
    max-width: var(--sk-max-width);
    margin-inline: auto;
    padding-inline: 20px; /* 20px always — no text touches edges */
  }

  /* ── SHARED: EYEBROW LABEL ───────────────────────────────────── */
  .sk-page .section-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-primary);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin-bottom: 14px;
  }

  /* ── SHARED: BUTTONS ─────────────────────────────────────────── */
  .sk-page .sk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--sk-radius-btn);
    font-family: var(--sk-font);
    font-size: var(--sk-h6); /* 15–18px responsive */
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    transition:
      background-color 0.25s ease,
      transform 0.2s ease,
      box-shadow 0.25s ease;
    white-space: nowrap;
  }

  .sk-page a.sk-btn.sk-btn-primary {
    background-color: var(--sk-primary);
    color: #ffffff;
  }
  .sk-page a.sk-btn.sk-btn-primary:hover {
    background-color: var(--sk-primary-dark);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 130, 198, 0.35);
  }

  .sk-page a.sk-btn.sk-btn-outline-white {
    background-color: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.8);
  }
  .sk-page a.sk-btn.sk-btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
  }

  /* Outline button for light/white backgrounds */
  .sk-page a.sk-btn.sk-btn-outline-light {
    background-color: var(--sk-bg-white);
    color: var(--sk-text);
    border-color: rgba(0, 0, 0, 0.18);
  }
  .sk-page a.sk-btn.sk-btn-outline-light:hover {
    background-color: var(--sk-primary);
    border-color: var(--sk-primary);
    color: #ffffff;
  }

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

  /* Outer shell: 20px sides, 16px top — gives card breathing room */
  .sk-hero-shell {
    padding: 16px 20px 0;
  }

  /* Hero card: cream bg only — image is a real <img> element (see below) */
  .sk-hero-card {
    border-radius: 24px;
    background-color: #fff2e8;
    min-height: 626px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
  }

  /* sk-wrap inside hero card fills card, max-width 1200px centers content */
  .sk-hero-card > .sk-wrap {
    width: 100%;
    position: relative;
    z-index: 2;
  }

  /* ── Hero image — right side ──────────────────────────────────── */
  .sk-hero-image-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 62%;
    z-index: 1;
    pointer-events: none;
  }

  .sk-hero-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* Gradient overlay fades image left-edge into cream background */
  .sk-hero-image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      #fff2e8 0%,
      rgba(255, 242, 232, 0.8) 16%,
      rgba(255, 242, 232, 0.15) 44%,
      transparent 100%
    );
    z-index: 2;
  }

  /* Content column — 60% of the 1200px wrap */
  .sk-hero-content {
    width: 70%;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* First heading — "CSR Initiative by Shakti Pumps" */
  .sk-hero-tagline {
    font-family: var(--sk-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    font-style: normal;
    color: var(--sk-text);
    margin-bottom: 14px; /* space between tagline and divider */
  }

  /* Horizontal rule — ~400px wide, 1px, #212529 */
  .sk-hero-divider {
    width: 400px;
    max-width: 100%;
    height: 1px;
    background-color: #212529;
    border: none;
    margin: 0 0 17px 0; /* 17px gap between divider and headline */
  }

  /* Main headline — exact Figma spec (fixed 48px, not responsive variable) */
  .sk-hero-content h1 {
    font-family: var(--sk-font);
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    font-style: normal;
    color: #000;
    margin-bottom: 62px;
    margin-top: 10px; /*
    62px gap between headline and description */
  }

  /* "Privileged" word — strikethrough only on this word */
  .sk-hero-word-strikethrough {
    text-decoration-line: line-through;
  }

  /* Description paragraph */
  .sk-hero-description {
    font-family: var(--sk-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    font-style: normal;
    color: #000;
    margin-bottom: 32px;
    max-width: 550px;
  }

  /* Button row */
  .sk-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }

  /* ── Hero responsive ─────────────────────────────────────────── */
  @media (max-width: 1023px) {
    .sk-hero-content {
      width: 70%;
      padding: 48px 0;
    }
    .sk-hero-content h1 {
      font-size: 38px;
      line-height: 42px;
      margin-bottom: 40px;
    }
    .sk-hero-divider {
      width: 100%;
    }
  }

  @media (max-width: 767px) {
    .sk-hero-shell {
      padding: 8px 8px 0;
    }

    .sk-hero-card {
      border-radius: 16px;
      min-height: 520px;
      background-color: #fff2e8;
      align-items: flex-start;
    }

    /* Image sits in bottom 50% of the card */
    .sk-hero-image-wrap {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 52%;
    }

    /* Gradient fades image upward into cream bg */
    .sk-hero-image-wrap::before {
      background: linear-gradient(
        to bottom,
        #fff2e8 0%,
        rgba(255, 242, 232, 0.88) 28%,
        rgba(255, 242, 232, 0.1) 100%
      );
    }

    .sk-hero-content {
      width: 100%;
      padding: 36px 0 48px;
    }

    .sk-hero-content h1 {
      font-size: 28px;
      line-height: 34px;
      margin-top: 20px;
      margin-bottom: 28px;
    }
    .sk-hero-divider {
      width: 100%;
    }
    .sk-hero-description {
      max-width: 100%;
    }
    .sk-hero-buttons {
      /*flex-wrap: nowrap;*/
      flex-direction: column;
    }
    .sk-hero-buttons .sk-btn {
      flex: 1;
      min-width: 0;
      justify-content: center;
      padding: 12px 14px;
    }
  }

  /* ================================================= */
  /* key Highlight */

  /* ============================================================
   KEY HIGHLIGHTS — SHAKTI EDUCATION
   Paste inside your existing <style> block or link as a
   separate stylesheet. All .elementor-15800 .elementor-element.elementor-element-c69f9b9s are scoped under
   .sk-highlights-section — zero conflict with WordPress
   or any other page styles.
   ============================================================ */

  /* ── Section wrapper ── */
  .sk-highlights-section {
    padding-block: 80px;
    background-color: #ffffff;
    font-family: "Figtree", sans-serif;
  }

  /* ── Inner container: max 1200px, 20px side padding ── */
  .sk-highlights-section .sk-highlights-wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
  }

  /* ── Section heading ── */
  .sk-highlights-section .sk-highlights-header {
    margin-bottom: 40px;
  }

  .sk-highlights-section .sk-highlights-heading {
    font-family: "Figtree", sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 48px;
    color: #212529;
    margin: 0;
  }

  /* ============================================================
   BENTO GRID
   Col 1 (382fr) : Card 1 (482px tall) | Card 4 (261px tall)
   Col 2 (381fr) : Card 2 (482px tall) | Card 5 (261px tall)
   Col 3 (382fr) : Col3-wrapper spans both rows →
                     Card 3 (307px) stacked on Card 6 (443px)
   ============================================================ */
  .sk-highlights-section .sk-highlights-grid {
    display: grid;
    grid-template-columns: 382fr 381fr 382fr;
    grid-template-rows: 482px 261px;
    gap: 20px;
  }

  /* Col 3 wrapper — spans both grid rows, flex-column inside */
  .sk-highlights-section .sk-highlight-col3-wrapper {
    grid-column: 3;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* ── Shared card base ── */
  .sk-highlights-section .sk-highlight-card {
    border-radius: 20px;
    overflow: hidden;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }
  .sk-highlights-section .sk-highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
  }

  /* ── Card title text (all coloured / image cards) ── */
  .sk-highlights-section .sk-highlight-card-title {
    font-family: "Figtree", sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    color: #ffffff;
    margin: 0;
  }

  /* ── CARD 1: Merit-Based Selection — col 1, row 1 (382×482px) ── */
  .sk-highlights-section .sk-highlight-merit-card {
    background-color: #4c9b72;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 28px 32px;
    grid-column: 1;
    grid-row: 1;
    height: 482px;
  }

  /* Large "%" symbol inside Card 1 */
  .sk-highlights-section .sk-highlight-merit-icon {
    font-family: "Figtree", sans-serif;
    font-size: 318.385px;
    font-weight: 500;
    line-height: 251.077px;
    color: #6eb090;
    text-align: right;
  }

  /* ── CARD 2: Image card — col 2, row 1 (381×482px) ── */
  .sk-highlights-section .sk-highlight-students-card {
    grid-column: 2;
    grid-row: 1;
    height: 482px;
    border-radius: 20px;
    overflow: hidden;
  }
  .sk-highlights-section .sk-highlight-students-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }
  .sk-highlights-section .sk-highlight-students-card:hover img {
    transform: scale(1.04);
  }

  /* ── CARD 3: Structured Learning — inside col3 wrapper (382×307px) ── */
  .sk-highlights-section .sk-highlight-structured-card {
    background-color: #0d271e;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 28px 32px;
    height: 307px;
    flex-shrink: 0;
  }

  /* ── CARD 4: Classroom image — col 1, row 2 (382×261px) ── */
  .sk-highlights-section .sk-highlight-classroom-card {
    grid-column: 1;
    grid-row: 2;
    height: 261px;
    border-radius: 20px;
    overflow: hidden;
  }
  .sk-highlights-section .sk-highlight-classroom-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }
  .sk-highlights-section .sk-highlight-classroom-card:hover img {
    transform: scale(1.04);
  }

  /* ── CARD 5: Experienced Faculty — col 2, row 2 (381×261px) ── */
  .sk-highlights-section .sk-highlight-faculty-card {
    background-color: #2d4859;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 28px 32px;
    grid-column: 2;
    grid-row: 2;
    height: 261px;
  }

  /* ── CARD 6: Scholarship Support — inside col3 wrapper (382×443px) ── */
  .sk-highlights-section .sk-highlight-scholarship-card {
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        transparent 100%
      ),
      url("/wp-content/uploads/2026/05/key-highlight-3.webp");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 28px 28px 32px;
    height: 443px;
    flex-shrink: 0;
  }

  /* ============================================================
   RESPONSIVE — TABLET  (max-width: 1023px)
   2-column grid, uniform 300px card heights
   ============================================================ */
  @media (max-width: 1023px) {
    .sk-highlights-section .sk-highlights-heading {
      font-size: 36px;
      line-height: 40px;
    }

    .sk-highlights-section .sk-highlights-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      gap: 16px;
    }

    /* Col3 wrapper: stop spanning rows, go full-width row instead */
    .sk-highlights-section .sk-highlight-col3-wrapper {
      grid-column: 1 / -1;
      grid-row: auto;
      flex-direction: row;
      gap: 16px;
    }

    /* Reset explicit placements + heights for grid cards */
    .sk-highlights-section .sk-highlight-merit-card,
    .sk-highlights-section .sk-highlight-students-card,
    .sk-highlights-section .sk-highlight-classroom-card,
    .sk-highlights-section .sk-highlight-faculty-card {
      grid-column: auto;
      grid-row: auto;
      height: 300px;
    }

    /* Cards inside col3 wrapper go side-by-side */
    .sk-highlights-section .sk-highlight-structured-card,
    .sk-highlights-section .sk-highlight-scholarship-card {
      height: 300px;
      flex: 1;
    }

    .sk-highlights-section .sk-highlight-card-title {
      font-size: 26px;
      line-height: 34px;
    }

    .sk-highlights-section .sk-highlight-merit-icon {
      font-size: 110px;
      line-height: 160px;
    }
  }

  /* ============================================================
   RESPONSIVE — MOBILE  (max-width: 639px)
   Single column, 280px card heights
   ============================================================ */
  @media (max-width: 639px) {
    .sk-highlights-section .sk-highlights-heading {
      font-size: 28px;
      line-height: 32px;
    }

    .sk-highlights-section .sk-highlights-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    /* Col3 wrapper stacks vertically again on mobile */
    .sk-highlights-section .sk-highlight-col3-wrapper {
      grid-column: auto;
      flex-direction: column;
      gap: 12px;
    }

    .sk-highlights-section .sk-highlight-merit-card,
    .sk-highlights-section .sk-highlight-students-card,
    .sk-highlights-section .sk-highlight-classroom-card,
    .sk-highlights-section .sk-highlight-faculty-card {
      height: 280px;
    }

    .sk-highlights-section .sk-highlight-structured-card,
    .sk-highlights-section .sk-highlight-scholarship-card {
      height: 280px;
      flex: none;
    }

    .sk-highlights-section .sk-highlight-card-title {
      font-size: 22px;
      line-height: 30px;
    }

    .sk-highlights-section .sk-highlight-merit-icon {
      font-size: 90px;
      line-height: 135px;
    }
  }

  /*===================================================*/

  /* ================================================================
   CORE PHILOSOPHY SECTION
   ================================================================ */

  .sk-philosophy-section {
    padding-block: var(--sk-section-py);
    background-color: var(--sk-bg-white);
    padding-top: 40px;
  }

  /* Single-column text block */
  .sk-philosophy-text {
    display: flex;
    flex-direction: column;
  }

  /* "Core Philosophy" section heading — Figma spec: 48px / 500 at desktop */
  .sk-philosophy-label {
    font-family: "Figtree", "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 28px;
    font-style: normal;
    color: #000;
    margin-bottom: 24px;
  }
  @media (min-width: 768px) {
    .sk-philosophy-label {
      font-size: 36px;
      line-height: 36px;
      margin-bottom: 28px;
    }
  }
  @media (min-width: 1024px) {
    .sk-philosophy-label {
      font-size: 48px;
      line-height: 48px;
      margin-bottom: 32px;
    }
  }

  /* Billboard heading — 110px/700 at 1920px, proportional below */
  h2.sk-philosophy-heading {
    font-family: "Figtree", "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    font-style: normal;
    color: #212529;
    letter-spacing: 0;
    margin-bottom: 32px;
    max-width: 100%; /* full width on mobile */
  }
  @media (min-width: 480px) {
    h2.sk-philosophy-heading {
      font-size: 28px;
      line-height: 28px;
      margin-bottom: 36px;
      max-width: 100%;
    }
  }
  @media (min-width: 768px) {
    h2.sk-philosophy-heading {
      font-size: 44px;
      line-height: 44px;
      margin-bottom: 48px;
      max-width: 100%;
    }
  }
  @media (min-width: 1024px) {
    h2.sk-philosophy-heading {
      font-size: 58px;
      line-height: 58px;
      margin-bottom: 56px;
      max-width: 500px;
    }
  }
  @media (min-width: 1280px) {
    h2.sk-philosophy-heading {
      font-size: 73px;
      line-height: 73px;
      margin-bottom: 64px;
      max-width: 700px;
    }
  }
  @media (min-width: 1500px) {
    h2.sk-philosophy-heading {
      font-size: 86px;
      line-height: 86px;
      margin-bottom: 72px;
      max-width: 800px;
    }
  }
  @media (min-width: 1920px) {
    h2.sk-philosophy-heading {
      font-size: 110px;
      line-height: 110px;
      margin-bottom: 80px;
      max-width: 80%;
    }
  }

  /* Body paragraph — Figma spec: 18px / 400 / #000 / line-height 24px */
  .sk-philosophy-body {
    font-family: var(--sk-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    font-style: normal;
    color: #000;
    max-width: 70%;
    margin-bottom: 50px; /* gap between paragraph and images */
  }

  /* 5-image horizontal row — flush, no gap, no radius */
  .sk-philosophy-gallery {
    display: flex;
    flex-direction: row;
    gap: 0;
  }

  .sk-philosophy-image {
    flex: 0 0 241px;
    width: 241px;
    overflow: hidden;
    border-radius: 0;
  }

  .sk-philosophy-image img {
    width: 241px;
    height: 452px;
    aspect-ratio: 233 / 437;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }
  .sk-philosophy-image:hover img {
    transform: scale(1.05);
  }

  /* ── Responsive ── */
  @media (max-width: 1023px) {
    .sk-philosophy-label {
      font-size: 32px;
      line-height: 36px;
      margin-bottom: 24px;
    }
    .sk-philosophy-body {
      margin-bottom: 36px;
    }
    /* Tablet: images share gallery width equally */
    .sk-philosophy-image {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
      overflow: hidden;
    }
    .sk-philosophy-image img {
      width: 100%;
      height: 452px;
    }
  }

  @media (max-width: 767px) {
    .sk-philosophy-label {
      font-size: 22px;
      line-height: 28px;
      margin-bottom: 16px;
    }
    .sk-philosophy-body {
      font-size: 16px;
      max-width: 100%;
      margin-bottom: 28px;
    }
    /* Mobile: 2-column grid with gap and rounded corners */
    .sk-philosophy-gallery {
      flex-wrap: wrap;
      gap: 10px;
    }
    .sk-philosophy-image {
      flex: 0 0 calc(50% - 5px);
      width: calc(50% - 5px);
      border-radius: 14px;
      overflow: hidden;
    }
    .sk-philosophy-image img {
      width: 100%;
      height: 452px;
    }
  }

  @media (max-width: 480px) {
    /* Small mobile: full-width single column */
    .sk-philosophy-image {
      flex: 0 0 100%;
      width: 100%;
      border-radius: 14px;
    }
    .sk-philosophy-image img {
      width: 100%;
      height: 452px;
    }
  }

  /* ================================================================
   ADMISSION PROCESS SECTION
   ================================================================ */

  .sk-admission-section {
    padding-top: 170px;
    padding-bottom: 170px;
    background-color: #f6f7f8;
    position: relative;
    overflow: hidden;
  }

  /* Watermark — right edge, vertically centred; section overflow:hidden clips the bleed */
  .sk-admission-watermark {
    position: absolute;
    right: -80px;
    top: 80%;
    transform: translateY(-50%);
    width: clamp(
      260px,
      30vw,
      920px
    ); /* scales with viewport, never wider than 420px */
    max-width: 900px !important;
    height: 900px;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }

  .sk-admission-heading {
    font-family: "Figtree", "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 48px;
    color: #212529;
    margin-bottom: 52px;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 1023px) {
    .sk-admission-heading {
      font-size: 36px;
      line-height: 40px;
    }
  }
  @media (max-width: 767px) {
    .sk-admission-heading {
      font-size: 26px;
      line-height: 32px;
      margin-bottom: 36px;
    }
  }

  /* Stepper row */
  .sk-stepper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }

  /* Each step: SVG image + label */
  .sk-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 61px;
  }

  /* Step glow SVG */
  .sk-step-image {
    width: 165px;
    height: 165px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
  }

  /* Arrow connector — absolute arrow from center of left icon to outer shell of right icon */
  .sk-step-connector {
    flex-shrink: 0;
    width: 100px;
    height: 165px;
    position: relative;
    z-index: 0;
  }

  .sk-step-connector img {
    position: absolute;
    top: 50%;
    left: -82.5px; /* half of 165px: aligns left edge to center of left icon */
    width: 243px; /* 82.5px left overlap + 160px gap = reaches outer shell of right icon */
    max-width: none;
    height: auto;
    transform: translateY(-50%);
    display: block;
  }

  /* Step label */
  .sk-step-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 11px;
    padding-inline: 8px;
  }

  .sk-step-name {
    font-family: "Figtree", "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #495057;
    line-height: 32px;
  }

  .sk-step-description {
    font-family: "Figtree", "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #6b7280;
    line-height: 24px;
  }

  /* Tablet */
  @media (max-width: 1023px) {
    .sk-admission-section {
      padding-top: 100px;
      padding-bottom: 120px;
    }
    .sk-admission-watermark {
      width: clamp(200px, 28vw, 300px);
      right: 0; /* no negative offset on tablet — section clips naturally */
    }
    .sk-step {
      gap: 40px;
    }
    .sk-step-image {
      width: 120px;
      height: 120px;
    }
    .sk-step-connector {
      width: 100px;
      height: 120px;
    }
    .sk-step-connector img {
      left: -60px;
      width: 160px;
      max-width: none;
    }
    .sk-step-name {
      font-size: 20px;
      line-height: 28px;
    }
    .sk-step-description {
      font-size: 16px;
      line-height: 22px;
    }
  }

  /* Mobile: vertical layout */
  @media (max-width: 767px) {
    .sk-admission-watermark {
      display: none; /* hide on mobile — purely decorative, prevents any scroll risk */
    }
    .sk-stepper {
      flex-direction: column;
      gap: 28px;
    }
    .sk-step {
      flex-direction: row;
      align-items: center;
      flex: unset;
      width: 100%;
      gap: 20px;
    }
    .sk-step-image {
      width: 80px;
      height: 80px;
      flex-shrink: 0;
    }
    .sk-step-connector {
      display: none;
    }
    .sk-step-label {
      align-items: flex-start;
      text-align: left;
      padding-inline: 0;
    }
    .sk-step-name {
      font-size: 18px;
      line-height: 26px;
    }
    .sk-step-description {
      font-size: 15px;
      line-height: 22px;
    }
  }

  /* ================================================================
   CTA BANNER SECTION
   ================================================================ */

  .sk-cta-section {
    background-color: var(--sk-bg-white);
    padding-block: var(--sk-section-py);
  }

  /* Flex row: text left, image right */
  .sk-cta-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .sk-cta-content {
    flex: 0 0 48%;
    max-width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically centre heading + buttons against image */
    gap: 32px;
  }

  /* Section heading — design-system scale; color from Figma spec */
  h2.sk-cta-heading {
    font-family: var(--sk-font);
    font-size: var(--sk-h2); /* 22px mobile → 26px tablet → 32px desktop */
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    font-style: normal;
    color: #495057;
  }

  /* Button row */
  .sk-cta-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
  }

  /* CTA primary button — filled blue */
  .sk-page a.sk-cta-btn-primary {
    display: flex;
    height: 42px;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: var(--sk-primary);
    color: #ffffff;
    border: 1.5px solid var(--sk-primary);
    font-family: var(--sk-font);
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      transform 0.2s ease;
    white-space: nowrap;
    max-width: 186px;
    width: 100%;
  }
  .sk-page a.sk-cta-btn-primary:hover {
    background-color: var(--sk-primary-dark);
    color: #ffffff;
    transform: translateY(-1px);
  }

  /* CTA secondary button — blue outline */
  .sk-page a.sk-cta-btn-secondary {
    display: flex;
    height: 42px;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 1.5px solid var(--sk-primary);
    background-color: transparent;
    color: var(--sk-primary);
    font-family: var(--sk-font);
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color 0.25s ease,
      color 0.25s ease;
    white-space: nowrap;
       max-width: 186px;
    width: 100%;
  }
  .sk-page a.sk-cta-btn-secondary:hover {
    background-color: var(--sk-primary);
    color: #ffffff;
  
  }

  /* Right: watercolor group image */
  .sk-cta-image-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sk-cta-image {
    width: 530px;
    height: 530px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  /* ── Responsive ── */
  @media (max-width: 1023px) {
    .sk-cta-content {
      flex: 0 0 55%;
      max-width: 55%;
    }
    .sk-cta-image {
      width: 380px;
      height: 380px;
    }

    h2.sk-cta-heading {
      font-size: 32px;
    }
  }

  @media (max-width: 767px) {
    .sk-cta-inner {
      flex-direction: column-reverse;
      gap: 32px;
    }
    .sk-cta-content {
      flex: unset;
      max-width: 100%;
      gap: 24px;
    }
    .sk-cta-image-col {
      width: 100%;
    }
    .sk-cta-image {
      width: 280px;
      height: 280px;
      margin-inline: auto;
    }

    h2.sk-cta-heading {
      font-size: 32px;
    }
  }

  .sk-admission-watermark {
    position: absolute;
    right: -28%;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 100%;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }

  /* Tablet */
  @media (max-width: 1023px) {
    .sk-admission-watermark {
      right: -30%;
      height: 600px !important;
    }
    
    .desktop-only{ display: none;}
  }

  /* Mobile — hide */
  @media (max-width: 767px) {
    .sk-admission-watermark {
      display: none !important;
    }
  }

  @media (max-width: 480px) {
    .sk-page a.sk-cta-btn-secondary {
      max-width: 100%;
      width: 100%;
    }

    .sk-philosophy-section {
      padding-top: 20px;
    }
    .sk-cta-btn-primary {
      width: 100%;
      max-width: 100%;
    }

    .sk-page a.sk-cta-btn-primary {
      padding-top: 24px !important;
      padding-bottom: 24px !important;
      max-width:100%;
    }

    .sk-page a.sk-cta-btn-secondary {
      padding-top: 24px !important;
      padding-bottom: 24px !important;
    }
    .sk-cta-buttons {
      align-items: center;
      justify-content: center;
    }
    .sk-page .sk-btn {
      width: 100%;
      max-width: 100%;
      padding-top: 18px;
      padding-bottom: 18px;
    }
  }

  .cta-section-home {
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    padding-inline: 23px;
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 570px;
  }

 .mobile-only { display:none;}


/* for the responsive mobile */ 



 @media (max-width:480px){
     .sk-hero-card {
         display: flex;
         flex-direction: column;
     }
     
     .sk-hero-image-wrap {
         position: static;
     }
     
     .sk-hero-image-wrap::before{
         background: none;
     }
     .mobile-only { display:block;}
 
 }/* End custom CSS */