/* ensure all section beside no whitespace */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  --fsm-blue: #001776;
  --fsm-blue-deep: #000d4d;
  --fsm-blue-mid: #003780;
  --fsm-pale-blue: #eef5fb;
  --fsm-blue-soft: #eef2ff;
  --fsm-red: #d73925;
  --fsm-red-deep: #b82d1e;
  --fsm-red-deep-2: #b82d1e;
  --fsm-orange: #ff751f;
  --fsm-gold: #f3b43f;
  --fsm-white: #ffffff;
  --fsm-ink: #17213a;
  /* --fsm-text: #4f5c74; */
  --fsm-text: #000000;
  --fsm-line: #dfe5ef;
  --fsm-muted: #72809a;
  --fsm-surface-soft: #f4f5f7;
  --fsm-pale-blue: #eef2ff;
  --fsm-pale-gold: #fff8e8;
  --fsm-pale-red: #fdebea;
  --fsm-soft-blue: #eef5fb;
  --fsm-soft-cream: #fff6e8;
  --fsm-navy: #14213d;
  --fsm-yellow: #f6b333;
  --fsm-border: #dfe5ef;
  --fsm-muted: #667085;
  --fsm-shadow-sm: 0 10px 26px rgba(0, 23, 118, 0.08);
  --fsm-shadow-lg: 0 24px 60px rgba(0, 16, 80, 0.16);
  --fsm-radius: 22px;
  --fsm-view-width: 1300px;
  --fsm-content-width: 1180px;
  --fsm-card-radius: 16px;
  --fsm-shadow-soft: 0 10px 26px rgba(0, 23, 118, 0.08);
}

/* hero section ---- start ---- */

.fso-hero {
  position: relative;
  min-height: clamp(480px, 50vw, 720px);
  display: grid;
  align-items: center;
  isolation: isolate;
  color: #fff;
  background: url("../images/fsm&fso_hero_background.webp") 45% 40% / cover
    no-repeat;
}

/* =========  
background darkness adjust 
   =========*/
.fso-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.2);
}

.fso-shell {
  width: min(1400px, calc(100% - 40px));
  margin-inline: auto;
}

.fso-hero-int {
  max-width: 700px;
}

.fso-hero-content {
  display: block;
  gap: clamp(40px, 7vw, 90px);
  align-items: center;
  padding-block: 88px;
}

/* =========
knowledgegains text
   ========= */
.fso-eyebrow {
  color: #fff;
  opacity: 1; /*0.84*/
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* ========
Hero Heading
   ========*/
.fso-hero h1 {
  /* font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 900;
  color: var(--fsm-blue);
  line-height: 0.95;
  letter-spacing: 0.05em;
  --x-offset: -0.0625em;
  --y-offset: 0.0625em;
  --stroke: 0.025em;
  --background-color: var(--fsm-blue-soft);
  --stroke-color: var(--fsm-orange);

  text-shadow:
    var(--x-offset) var(--y-offset) 0px var(--background-color),
    calc(var(--x-offset) - var(--stroke)) calc(var(--y-offset) + var(--stroke))
      0px var(--stroke-color); */
}

.fso-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 9vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-shadow: 7px 7px 0 var(--fsm-red);
}

/* Hero action buttons */
.fso-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.fso-hero-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

/* Main CTA */
.fso-hero-button-primary {
  border: 2px solid var(--fsm-red);
  color: var(--fsm-white);
  background: var(--fsm-red);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.fso-hero-button-primary:hover,
.fso-hero-button-primary:focus-visible {
  background: var(--fsm-red-deep);
  border-color: var(--fsm-red-deep);
  transform: translateY(-2px);
}

/* Secondary CTA */
.fso-hero-button-secondary {
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: var(--fsm-white);
  background: rgba(0, 0, 0, 0.18);
}

.fso-hero-button-secondary:hover,
.fso-hero-button-secondary:focus-visible {
  color: var(--fsm-blue);
  background: var(--fsm-white);
  border-color: var(--fsm-white);
  transform: translateY(-2px);
}

/* hero section ---- end ---- */

/* OKK overview section ---- start ---- */

/* 1. OKK overview section */
.fso-okk-overview {
  padding: 50px 0 50px;
  background: var(--fsm-pale-blue);
}

/* 2. OKK overview content container */
.fso-okk-overview-container {
  width: min(var(--fsm-content-width), calc(100% - 30px));
  margin-inline: auto;
}

/* 3. OKK overview panel (two-column layout) */
.fso-okk-overview-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
  padding: clamp(32px, 5vw, 52px);
  border: 1px solid rgba(0, 23, 118, 0.1);
  border-radius: var(--fsm-radius);
  background: var(--fsm-white);
  box-shadow: var(--fsm-shadow-lg);
}

/* 4. OKK overview info column */
.fso-okk-overview-info {
  max-width: 480px;
}

/* 5. OKK overview section label */
.fso-okk-overview-label {
  margin: 0 0 12px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* 6. OKK overview section title */
.fso-okk-overview-title {
  margin: 0;
  color: var(--fsm-blue);
  font-size: clamp(28px, 4vw, 35px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* 7. OKK overview description */
.fso-okk-overview-description {
  margin: 18px 0 0;
  color: var(--fsm-text);
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
}

/* 8. OKK overview legal badge */
.fso-okk-overview-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--fsm-pale-red);
  hyphens: auto;
  text-align: justify;
}

/* 9. OKK overview legal badge icon */
.fso-okk-overview-badge-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--fsm-red);
}

.fso-okk-overview-badge-icon svg {
  width: 22px;
  height: 22px;
}

/* 10. OKK overview legal badge text */
.fso-okk-overview-badge p {
  margin: 0;
  color: var(--fsm-ink);
  font-size: 13.5px;
  line-height: 1.55;
}

.fso-okk-overview-badge strong {
  color: var(--fsm-red-deep);
}

.fso-okk-overview-badge a {
  text-decoration: none;
}

.fso-okk-overview-badge a:hover {
  text-decoration: underline;
}

/* 11. OKK organisation chart column */
.fso-okk-org-chart {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 400px;
  margin-inline: auto;
}

.fso-okk-org-chart h3 {
  margin-inline: auto;
  font-size: 20px;
  color: var(--fsm-blue-deep);
  margin-bottom: 5px;
}

/* 12. OKK organisation node card */
.fso-okk-org-node {
  position: relative;
  padding: 15px 15px 25px;
  border: 1px solid var(--fsm-border);
  border-radius: var(--fsm-card-radius);
  background: var(--fsm-soft-blue);
  text-align: center;
  box-shadow: var(--fsm-shadow-sm);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

/* 13. OKK organisation node icon */
.fso-okk-org-node-icon {
  display: inline-grid;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 23, 118, 0.08);
  color: var(--fsm-blue);
}

.fso-okk-org-node-icon svg {
  width: 24px;
  height: 24px;
}

/* 14. OKK organisation node tag */
/* .fso-okk-org-node-tag {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
} */

/* 15. OKK organisation node count */
/* .fso-okk-org-node-count {
  display: inline;
  margin-bottom: 6px;
  color: var(--fsm-blue);
  font-size: clamp(38px, 5vw, 50px);
  font-weight: 800;
  line-height: 1;
}

.fso-okk-org-node-count-p {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: var(--fsm-red-deep) !important;
  font-weight: 700;
} */

.fso-okk-org-node-count-p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 12px;
}

.fso-okk-org-node-count {
  color: var(--fsm-blue);
  font-size: clamp(30px, 5vw, 35px);
  font-weight: 800;
  line-height: 1;
}

.fso-okk-org-node-count-p span {
  color: var(--fsm-red-deep);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* .fso-okk-org-node-fso .fso-okk-org-node-count {
  color: var(--fsm-red);
} */

/* 16. OKK organisation node title */
.fso-okk-org-node h3 {
  margin: 0 0 8px;
  color: var(--fsm-blue);
  font-size: 17px;
  line-height: 1.3;
}

/* 17. OKK organisation node description */
.fso-okk-org-node p {
  margin: 0;
  color: var(--fsm-text);
  font-size: 14px;
  line-height: 1.6;
}

/* 18. OKK organisation node hover */
.fso-okk-org-node:hover {
  border-color: rgba(0, 23, 118, 0.3);
  box-shadow: var(--fsm-shadow-soft);
  transform: translateY(-4px);
}

/* 19. OKK structure card alternate styling */
.fso-okk-org-node-structure {
  background: var(--fsm-soft-cream);
}

.fso-okk-org-node-structure .fso-okk-org-node-icon {
  background: rgba(215, 57, 37, 0.1);
  color: var(--fsm-red);
}

.fso-okk-org-node-highlight {
  margin-bottom: 8px !important;
  color: var(--fsm-red-deep) !important;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1.35 !important;
}

/* 20. OKK organisation connector between nodes */
.fso-okk-org-connector {
  display: flex;
  justify-content: center;
  height: 36px;
}

.fso-okk-org-connector span {
  position: relative;
  width: 2px;
  background: var(--fsm-orange);
}

.fso-okk-org-connector span::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fsm-orange);
  transform: translateX(-50%);
}

/* 21. OKK FSO node learn more link */
.fso-okk-org-node-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--fsm-blue);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.fso-okk-org-node-link:hover,
.fso-okk-org-node-link:focus-visible {
  color: var(--fsm-red);
  text-decoration: underline;
}

/* 22. OKK overview responsive layout */
@media (max-width: 860px) {
  .fso-okk-overview-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .fso-okk-overview-info {
    max-width: 100%;
    margin-inline: auto;
  }

  .fso-okk-overview-badge {
    text-align: left;
  }

  .fso-okk-org-chart {
    margin-inline: auto;
  }
}

/* OKK overview section ---- end ---- */

/* compliance section ---- start ---- */
/* overall */
.fso-legal {
  padding: 50px 0 50px;
  color: var(--fsm-text);
  background: #fff7f6;
}

/* container */
.fso-legal-container {
  width: min(var(--fsm-view-width), calc(100% - 30px));
  margin-inline: auto;
}

/* div heading */
.fso-legal-section-heading {
  max-width: 1000px;
  margin: 0 auto 10px;
}

.fso-legal .fso-legal-section-label {
  margin: 0 0 12px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
}

.fso-legal-section-heading h2 {
  max-width: 1050px;
  color: var(--fsm-blue);
  font-size: clamp(30px, 4vw, 35px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-align: center;
  padding-bottom: 10px;
}

.fso-legal-section-heading > p:not(.fso-legal-section-label) {
  margin: 13px 0 0;
  max-width: 750px;
  margin: 0 auto;
  text-align: justify;
  padding: 4px 0 0;
}

.fso-legal-section-heading h3 {
  max-width: 900px;
  padding: 20px 0 0 0;
  color: #7a2c24;
  font-size: clamp(13px, 2vw, 15px);
  line-height: 1.45;
  text-align: center;
}

.fso-legal-section-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.fso-legal-section-stats div {
  padding: 23px;
  border: 1px solid #cdddec;
  border-radius: 14px;
  background: var(--fsm-pale-red);
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.fso-legal-section-stats div:hover {
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.08);
  transform: translateY(-5px);
}

.fso-legal-section-stats strong {
  display: block;
  color: var(--fsm-red);
  font-size: 29px;
}
.fso-legal-section-stats span {
  display: block;
  font-size: 14px;
}
/* compliance section ---- end ---- */

/* course overview ---- start ---- */

/* 1. FSM overview section */
.fso-course-overview {
  padding: 50px 0 50px;
  background: linear-gradient(
    135deg,
    var(--fsm-white) 0%,
    var(--fsm-soft-blue) 100%
  );
}

/* 2. FSM overview content container */
.fso-overview-content-container {
  width: min(var(--fsm-view-width), calc(100% - 30px));
  margin-inline: auto;
}

/* 3. FSM overview card */
.fso-overview-card {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding: 52px;
  border: 1px solid var(--fsm-border);
  border-left: 5px solid var(--fsm-blue);
  border-radius: var(--fsm-radius);
  background: var(--fsm-white);
  box-shadow: var(--fsm-shadow-sm);
}

/* 4. FSM overview section label */
.fso-overview-section-label {
  margin: 0 0 10px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* 5. FSM overview section title */
.fso-overview-section-title {
  margin: 0;
  color: var(--fsm-blue);
  font-size: clamp(30px, 4vw, 35px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* 6. FSM overview description */
.fso-overview-description {
  margin: 18px 0 0;
  color: var(--fsm-text);
  font-size: 16px;
  line-height: 1.7;
  hyphens: auto;
  text-align: justify;
}

/* course overview ---- end ---- */

/* learning outcomes ---- start ---- */
/* 1. FSM learning outcomes background and spacing */
.fso-learning-outcomes {
  padding: 50px 0 50px;
  background: var(--fsm-surface-soft);
}

/* 2. FSM shared content width */
.fso-learning-content-container {
  width: min(var(--fsm-content-width), calc(100% - 48px));
  margin-inline: auto;
}

/* 3. FSM shared section label */
.fso-learning-section-label {
  margin: 0 0 12px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* 4. FSM shared section title */
.fso-learning-section-title {
  max-width: 1000px;
  margin: 0;
  color: var(--fsm-blue);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* 5. FSM centered section heading */
.fso-learning-section-heading-centered {
  text-align: center;
}

.fso-learning-section-heading-centered .fso-learning-section-title,
.fso-learning-section-heading-centered .fso-learning-section-introduction {
  margin-inline: auto;
}

/* 6. FSM shared section introduction */
.fso-learning-section-introduction {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--fsm-text);
  font-size: 16px;
}

/* 7. FSM learning outcomes list */
.fso-outcome-list {
  max-width: 940px;
  margin: 30px auto 0;
  padding: 0;
  border-top: 1px solid var(--fsm-line);
  list-style: none;
}

/* 8. FSM individual learning outcome */
.fso-outcome-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: start;
  gap: 22px;
  padding: 25px 0;
  border-bottom: 1px solid var(--fsm-line);
}

/* 9. FSM learning outcome number */
.fso-outcome-number {
  color: var(--fsm-orange);
  font-size: 23px;
  font-weight: 800;
}

/* learning outcomes ---- end ---- */

/* FSM module overview section ---- start ---- */

/* 1. Section */
.fso-module-overview {
  padding: 50px 0 50px;
  background: #f7faff;
}

/* 2. Content container */
.fso-module-overview-container {
  width: min(1400px, calc(100% - 48px));
  margin-inline: auto;
}

/* 3. Section heading */
.fso-module-overview-heading {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}

.fso-module-overview-label {
  margin: 0 0 12px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fso-module-overview-heading h2 {
  margin: 0;
  color: var(--fsm-blue);
  font-size: clamp(30px, 4vw, 35px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.fso-module-overview-heading > p:last-child {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--fsm-ink);
  font-size: 16px;
  line-height: 1.7;
}

/* .fso-module-track {
  display: grid;
  max-width: 1000px;
  margin: 42px auto 0;
  border-top: 1px solid rgba(0, 23, 118, 0.16);
} */

.fso-module-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 42px auto 0;
}

/* .fso-module-track-item {
  position: relative;
  display: block;
  padding: 20px 20px 20px;
  border-bottom: 1px solid rgba(0, 23, 118, 0.16);
  background: var(--fsm-surface-soft);
  text-align: center;
  transition:
    background-color 220ms ease,
    transform 220ms ease;
} */

.fso-module-track-item {
  position: relative;
  display: block;
  padding: 10px;
  border: 1px solid rgba(0, 23, 118, 0.16);
  border-radius: 12px;
  background: #f7faff;
  text-align: center;
  transition:
    background-color 220ms ease,
    transform 220ms ease;
}

.fso-module-track-item:last-child {
  grid-column: 1 / -1;
  width: calc(50% - 8px);
  justify-self: center;
}

.fso-module-track-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
  background: var(--fsm-orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 220ms ease;
}

.fso-module-track-item:hover {
  background: var(--fsm-white);
  transform: translateX(6px);
}

.fso-module-track-item:hover::before {
  transform: scaleY(1);
}

.fso-module-track-item:nth-child(odd):hover::before {
  background: var(--fsm-red);
}

.fso-module-track-item:nth-child(odd) .fso-module-track-number {
  color: var(--fsm-red);
}

.fso-module-track-number {
  display: block;
  color: var(--fsm-orange);
  font-size: clamp(10px, 5vw, 15px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

.fso-module-track-content h3 {
  /* margin: 0 0 10px; */
  color: var(--fsm-blue);
  font-size: 17px;
  text-align: center;
}

/* 9. Course outline link */
.fso-module-overview-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
  color: var(--fsm-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.fso-module-overview-link:hover,
.fso-module-overview-link:focus-visible {
  color: var(--fsm-red);
  text-decoration: underline;
}

/* FSM module overview section ---- end ---- */

/* target participants section ---- start ---- */
/* 1. FSM target participants background and spacing */
.fso-target-participants {
  padding: 50px 0 50px;
  background: var(--fsm-pale-blue);
}

/* 2. FSM shared content width */
.fso-tar-content-container {
  width: min(var(--fsm-content-width), calc(100% - 48px));
  margin-inline: auto;
}

/* 3. FSM participant two-column layout */
.fso-tar-participant-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(42px, 7vw, 84px);
  padding: clamp(32px, 5vw, 52px);
  border: 1px solid rgba(0, 23, 118, 0.1);
  border-radius: var(--fsm-radius);
  background: var(--fsm-white);
  box-shadow: var(--fsm-shadow-lg);
}

/* 4. FSM centered section heading */
.fso-tar-section-heading-centered {
  text-align: center;
}

.fso-tar-section-heading-centered .fso-tar-section-title,
.fso-tar-section-heading-centered .fso-tar-section-introduction {
  margin-inline: auto;
}

/* 5. FSM shared section label */
.fso-tar-section-label {
  margin: 0 0 12px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* 6. FSM shared section title */
.fso-tar-section-title {
  max-width: 760px;
  margin: 0;
  color: var(--fsm-blue);
  font-size: clamp(30px, 4vw, 35px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* 7. FSM shared section introduction */
.fso-tar-section-introduction {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--fsm-text);
  font-size: 16px;
  text-align: justify;
}

.fso-tar-section-introduction-alert {
  margin-top: 8px;
  text-align: justify;
  font-size: 13px;
  border-radius: 22px;
  padding: 10px 20px 10px 20px;
  background: var(--fsm-pale-gold);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.fso-tar-section-introduction-note {
  margin-top: 30px;
  text-align: justify;
  font-size: 14px;
  border-radius: 22px;
  padding: 10px 20px 10px 20px;
  background: var(--fsm-pale-red);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* .fso-tar-section-introduction-note p a {
  font-size: 15px;
  color: var(--fsm-blue);
  font-weight: 700;
  text-decoration: none;
} */

.fso-tar-section-introduction-note:hover,
.fso-tar-section-introduction-alert:hover {
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.08);
  transform: translateY(-5px);
}

.fso-tar-section-introduction-note-mobile {
  display: none;
}

/* 8. FSM participant list */
.fso-tar-participant-list {
  margin: 0;
  padding: 0;
  /* border-top: 1px solid #c8d5e3; */
  list-style: none;
}

/* 9. FSM participant list item */
.fso-tar-participant-list li {
  position: relative;
  padding: 15px 10px 15px 34px;
  /* border-bottom: 1px solid #c8d5e3; */
  color: var(--fsm-ink);
  font-weight: 600;
}

.fso-tar-participant-list li::before {
  position: absolute;
  top: 15px;
  left: 4px;
  color: var(--fsm-blue);
  content: "✓";
  font-weight: 800;
}

.fso-tar-list-re-ol {
  list-style: none;
}

.fso-tar-list-re-ol li {
  border-bottom: 1px solid #f2c99d;
  font-size: 15px;
  hyphens: auto;
  text-align: justify;
}

.fso-tar-participant-list .fso-tar-list-re-li::before {
  position: absolute;
  top: 15px;
  left: 4px;
  color: var(--fsm-blue);
  content: ">";
  font-weight: 800;
}

.fso-tar-participant-list-h3 {
  font-size: 17px;
  color: var(--fsm-blue-deep);
}

.fso-tar-participant-list-container {
  min-width: 0;
}

.fso-tar-participant-list-words {
  color: var(--fsm-red);
}

.fso-tar-fso-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 11px 18px;
  border-radius: 10px;
  color: var(--fsm-white);
  background: var(--fsm-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.fso-tar-fso-button:hover,
.fso-tar-fso-button:focus-visible {
  background: var(--fsm-red);
}

.fso-navigation-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 5px;
  color: var(--fsm-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  padding-top: 5px;
}

.fso-navigation-button:hover,
.fso-navigation-button:focus-visible {
  color: var(--fsm-red);
  text-decoration: underline;
}

.fso-navigation-button-b {
  color: var(--fsm-red-deep);
}
/* target participants section ---- end ---- */

/* FSM responsibilities section ---- start ---- */

/* 1. Section */
.fso-responsibilities {
  padding: 50px 0 50px;
  background: var(--fsm-white);
}

/* 2. Content container */
.fso-responsibilities-container {
  width: min(1300px, calc(100% - 48px));
  margin-inline: auto;
}

/* 3. Section heading */
.fso-responsibilities-heading {
  max-width: 1000px;
  margin: 0 auto 30px;
  text-align: center;
}

.fso-responsibilities-label {
  margin: 0 0 12px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fso-responsibilities-heading h2 {
  margin: 0;
  color: var(--fsm-blue);
  font-size: clamp(30px, 4vw, 35px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* 4. Responsibilities grid */
.fso-responsibilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 5. Individual responsibility card */
.fso-responsibilities-card {
  position: relative;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--fsm-border);
  border-radius: var(--fsm-card-radius);
  background: var(--fsm-white);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.fso-responsibilities-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--fsm-red);
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 220ms ease;
}

/* 6. Card number */
.fso-responsibilities-number {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--fsm-white);
  background: var(--fsm-red-deep);
  font-size: 12px;
  font-weight: 800;
}

/* 7. Card text */
.fso-responsibilities-card h3 {
  margin: 17px 0 10px;
  color: var(--fsm-blue-deep);
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
}

.fso-responsibilities-card p {
  margin: 0;
  color: var(--fsm-ink);
  font-size: 14px;
  line-height: 1.7;
  hyphens: auto;
  text-align: justify;
}

/* 8. Card hover */
.fso-responsibilities-card:hover {
  border-color: rgba(0, 23, 118, 0.35);
  background: #f7fbff;
  box-shadow: 0 12px 28px rgba(0, 23, 118, 0.12);
}

.fso-responsibilities-card:hover::before {
  transform: scaleY(1);
}

.fso-responsibilities-card:nth-child(2) .fso-responsibilities-number,
.fso-responsibilities-card:nth-child(4) .fso-responsibilities-number {
  background: var(--fsm-orange);
}

.fso-responsibilities-card:nth-child(2):hover::before,
.fso-responsibilities-card:nth-child(4):hover::before {
  background: var(--fsm-orange);
}

.fso-responsibilities-card:hover h3 {
  color: var(--fsm-blue);
}

.fso-responsibilities-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fso-responsibilities-card li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--fsm-ink);
  font-size: 14px;
  line-height: 1.6;
  hyphens: auto;
  text-align: justify;
}

.fso-responsibilities-card li::before {
  content: "\2713\FE0E";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fsm-blue);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}

/* .fso-responsibilities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
} */

/* .fso-responsibilities-card {
  grid-column: span 2;
}

.fso-responsibilities-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.fso-responsibilities-card:nth-child(5) {
  grid-column: 4 / span 2;
} */

/* FSM responsibilities section ---- end ---- */

/* FSM company benefits section ---- start ---- */
/* 1. Section */
.fso-company-benefits {
  padding: 50px 0 50px;
  background: var(--fsm-surface-soft);
}

/* 2. Content container */
.fso-company-benefits-container {
  width: min(1300px, calc(100% - 48px));
  margin-inline: auto;
}

/* 3. Section heading */
.fso-company-benefits-heading {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}

.fso-company-benefits-label {
  margin: 0 0 12px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fso-company-benefits-heading h2 {
  margin: 0;
  color: var(--fsm-blue);
  font-size: clamp(30px, 4vw, 35px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* 4. Benefit card grid */
.fso-company-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: 15px;
}

/* 5. Benefit card */
.fso-company-benefits-card {
  padding: 15px;
  border: 1px solid var(--fsm-border);
  border-top: 4px solid var(--fsm-red);
  border-radius: var(--fsm-card-radius);
  background: var(--fsm-white);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

/* 6. Benefit icon */
.fso-company-benefits-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin: 0 auto 17px;
  border-radius: 12px;
  color: var(--fsm-red);
  background: var(--fsm-pale-red);
  transition:
    color 220ms ease,
    background-color 220ms ease,
    transform 220ms ease;
}

.fso-company-benefits-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.fso-company-benefits-card:nth-child(1),
.fso-company-benefits-card:nth-child(3) {
  border-top: 4px solid var(--fsm-blue);
}

.fso-company-benefits-card:nth-child(1) .fso-company-benefits-icon,
.fso-company-benefits-card:nth-child(3) .fso-company-benefits-icon {
  color: var(--fsm-blue);
  background: var(--fsm-pale-blue);
}

/* 7. Benefit card text */
.fso-company-benefits-card h3 {
  margin: 0 0 9px;
  color: var(--fsm-red-deep);
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
}

.fso-company-benefits-card:nth-child(1) h3,
.fso-company-benefits-card:nth-child(3) h3 {
  color: var(--fsm-blue-deep);
}

.fso-company-benefits-card p {
  margin: 0;
  color: var(--fsm-ink);
  font-size: 14px;
  line-height: 1.7;
  hyphens: auto;
  text-align: justify;
}

/* 8. Benefit card hover */
.fso-company-benefits-card:hover {
  border-color: rgba(215, 57, 37, 0.42);
  background: var(--fsm-pale-red);
  box-shadow:
    0 0 0 4px rgba(215, 57, 37, 0.06),
    0 16px 30px rgba(215, 57, 37, 0.12);
}

/* .fso-company-benefits-card:hover .fso-company-benefits-icon {
  color: var(--fsm-white);
  background: var(--fsm-red-deep);
  transform: rotate(-6deg);
} */

.fso-company-benefits-card:nth-child(1):hover,
.fso-company-benefits-card:nth-child(3):hover {
  border-color: rgba(0, 23, 118, 0.42);
  background: var(--fsm-soft-blue);
  box-shadow:
    0 0 0 4px rgba(0, 23, 118, 0.06),
    0 16px 30px rgba(0, 23, 118, 0.12);
}

/* .fso-company-benefits-card:nth-child(1):hover .fso-company-benefits-icon,
.fso-company-benefits-card:nth-child(3):hover .fso-company-benefits-icon {
  color: var(--fsm-white);
  background: var(--fsm-blue);
  transform: rotate(-6deg);
} */

/* .fso-company-benefits-grid {
  grid-template-columns: 1fr;
  .fso-company-benefits-card,
  .fso-company-benefits-icon {
    transition: none;
  }
} */

/* FSM company benefits section ---- end ---- */

/* FSM why choose us image section ---- start ---- */

/* 1. Section */
.fso-why-choose-us-image {
  padding: 50px 0 50px;
  background: #e4f0fa;
}

/* 2. Content container */
.fso-why-choose-us-image-container {
  width: min(var(--fsm-content-width), calc(100% - 48px));
  margin-inline: auto;
}

/* 3. Section heading */
.fso-why-choose-us-image-heading {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}

.fso-why-choose-us-image-label {
  margin: 0 0 12px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fso-why-choose-us-image-heading h2 {
  margin: 0;
  color: var(--fsm-blue);
  font-size: clamp(30px, 4vw, 35px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* 4. Image-card grid */
.fso-why-choose-us-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* 5. Image card */
.fso-why-choose-us-image-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--fsm-border);
  border-radius: var(--fsm-card-radius);
  background: var(--fsm-white);
  box-shadow: var(--fsm-shadow-soft);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

/* 6. Card image */
.fso-why-choose-us-image-card img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 300ms ease;
}

.fso-why-choose-us-image-card:nth-child(1) img {
  width: 90%;
  height: 220px;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;

  /* width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: 70% center; */
}

/* 7. Card content */
.fso-why-choose-us-image-content {
  display: flex;
  padding: 23px;
  flex: 1;
  flex-direction: column;
}

.fso-why-choose-us-image-content h3 {
  margin: 0 0 10px;
  color: var(--fsm-blue-deep);
  font-size: 18px;
  line-height: 1.32;
  text-align: center;
}

.fso-why-choose-us-image-content p {
  margin: 0;
  color: var(--fsm-ink);
  font-size: 14px;
  line-height: 1.7;
  hyphens: auto;
  text-align: justify;
}

/* 8. Card link */
.fso-why-choose-us-image-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  color: var(--fsm-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  padding-top: 14px;
}

.fso-why-choose-us-image-link:hover,
.fso-why-choose-us-image-link:focus-visible {
  color: var(--fsm-red);
  text-decoration: underline;
}

/* 9. Card hover */
.fso-why-choose-us-image-card:hover {
  border-color: rgba(0, 23, 118, 0.35);
  box-shadow: 0 16px 30px rgba(0, 23, 118, 0.12);
  transform: translateY(-4px);
}

.fso-why-choose-us-image-card:hover img {
  transform: scale(1.04);
}

/* 11. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fso-why-choose-us-image-card,
  .fso-why-choose-us-image-card img {
    transition: none;
  }
}
/* FSM why choose us image section ---- end ---- */

/* CTA ---- start ---- */
/* ==================================================
    1. REGISTRATION SECTION
     .fso-registration-cta
     ================================================== */

.fso-registration-cta {
  padding: 50px 0 50px;
  background: linear-gradient(120deg, var(--fsm-blue), var(--fsm-blue-deep));
}

/* ==================================================
     3. REGISTRATION CONTENT CONTAINER
     .fso-reg-content-container
     ================================================== */

.fso-reg-content-container {
  width: min(var(--fsm-content-width), calc(100% - 48px));
  margin-inline: auto;
}

/* ==================================================
     4. REGISTRATION LAYOUT
     .fso-reg-registration-layout
     ================================================== */

.fso-reg-registration-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 56px;
}

/* ==================================================
     5. REGISTRATION LABEL
     .fso-registration-label
     ================================================== */

.fso-registration-label {
  margin: 0 0 10px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==================================================
     6. REGISTRATION TITLE
     .fso-registration-title
     ================================================== */

.fso-registration-title {
  margin: 0;
  color: var(--fsm-white);
  font-size: clamp(30px, 4vw, 35px);
  line-height: 1.15;
}

/* ==================================================
     7. REGISTRATION DESCRIPTION
     .fso-registration-description
     ================================================== */

.fso-registration-description {
  max-width: 1000px;
  margin: 15px 0 0;
  color: rgba(255, 255, 255, 0.84);
}

/* ==================================================
     8. REGISTRATION BUTTON FOUNDATION
     .fso-secondary-button
     ================================================== */

.fso-registration-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.fso-reg-button {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border: 2px solid var(--fsm-orange);
  border-radius: 12px;
  color: var(--fsm-blue-deep);
  background: var(--fsm-white);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  animation: fso-cta-float 3.2s ease-in-out infinite;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.neon-pulse {
  background: var(--fsm-white);
  border: 2px solid var(--fsm-gold);
  box-shadow:
    0 0 12px rgba(243, 180, 63, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.18);
  overflow: visible;
  animation:
    fso-cta-float 3.2s ease-in-out infinite,
    fso-cta-glow 2s ease-in-out infinite;
}

.neon-pulse::before,
.neon-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--fsm-gold);
  border-radius: inherit;
  pointer-events: none;
  animation: fso-cta-pulse 2.4s ease-out infinite;
  opacity: 0;
}

.neon-pulse::after {
  animation-delay: 1.2s;
}

.fso-view-fso-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 13px 45px;
  border-radius: 12px;
  color: var(--fsm-blue);
  background: var(--fsm-white);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.fso-view-fso-link:hover,
.fso-view-fso-link:focus-visible {
  color: var(--fsm-white);
  background: var(--fsm-red);
}

/* ==================================================
     9. REGISTRATION BUTTON HOVER AND KEYBOARD FOCUS
     ================================================== */

.fso-reg-button:hover,
.fso-reg-button:focus-visible {
  color: var(--fsm-blue-deep);
  background: var(--fsm-gold);
  border-color: var(--fsm-gold);
}

@keyframes fso-cta-pulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }

  100% {
    transform: scale(1.32, 1.55);
    opacity: 0;
  }
}

@keyframes fso-cta-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes fso-cta-glow {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(243, 180, 63, 0.45),
      0 8px 24px rgba(0, 0, 0, 0.18);
  }

  50% {
    box-shadow:
      0 0 24px rgba(243, 180, 63, 0.8),
      0 12px 30px rgba(0, 0, 0, 0.24);
  }
}

/* ==================================================
     12. REDUCED-MOTION ACCESSIBILITY
     ================================================== */

@media (prefers-reduced-motion: reduce) {
  .fso-reg-button,
  .neon-pulse,
  .neon-pulse::before,
  .neon-pulse::after {
    animation: none;
    transition: none;
  }

  .fso-reg-button:hover,
  .fso-reg-button:focus-visible {
    transform: none;
  }
}
/* CTA ---- end ---- */

/* faq section ---- start ---- */

/* 1. FAQ section: .fso-course-faq and #fso-faq */
.fso-course-faq {
  scroll-margin-top: 120px;
  padding: 50px 0 50px;
  background: #eef5fb;
}

/* 2. FAQ content container: .fso-faq-container */
.fso-faq-container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* FAQ heading */

/* 3. FAQ heading: .fso-faq-section-heading */
.fso-faq-section-heading {
  max-width: 920px;
  margin-inline: auto;
}

/* 3.1 FAQ centered heading: .fso-faq-section-heading-centered */
.fso-faq-section-heading-centered {
  text-align: center;
}

/* 4. FAQ heading icon: .fso-faq-heading-icon */
.fso-faq-heading-icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 18px;
  color: var(--fsm-blue);
  background: #fff;
  box-shadow: var(--fsm-shadow-sm);
}

/* 5. FAQ heading SVG: .fso-faq-heading-svg */
.fso-faq-heading-svg {
  display: block;
  width: 58px;
  height: 58px;
}

/* 6. FAQ section label: .fso-faq-section-label */
.fso-faq-section-label {
  margin: 0 0 12px;
  color: var(--fsm-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* 7. FAQ section title: .fso-faq-section-title and #fso-faq-title */
.fso-faq-section-title {
  max-width: 1000px;
  margin: 0 auto;
  color: var(--fsm-blue);
  font-size: clamp(30px, 4vw, 35px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-shadow:
    0 13.36px 8.896px rgba(0, 0, 0, 0.3),
    0 -2px 1px #fff;
}

/* FAQ list */

/* 8. FAQ list: .fso-faq-list */
.fso-faq-list {
  max-width: 920px;
  margin: 56px auto 0;
  border-top: 1px solid #bdccdc;
}

/* Individual FAQ item */

/* 9. FAQ item: .fso-faq-item */
.fso-faq-item {
  padding: 0 20px;
  border-bottom: 1px solid #bdccdc;
  background: transparent;
  transition:
    border-color 300ms ease,
    box-shadow 300ms ease;
}

/* 9.1 Active FAQ item state */
/* .fso-faq-item:has(.fso-faq-question.active) {
  border-color: rgba(0, 55, 128, 0.3);
  box-shadow: 0 14px 32px rgba(0, 23, 118, 0.12);
} */

/* FAQ question */

/* 10. FAQ question button: .fso-faq-question */
.fso-faq-question {
  width: 100%;
  display: block;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  position: relative;
  padding: 24px 58px 24px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  list-style: none;
  transition: color 200ms ease;
  color: var(--fsm-text);
  -webkit-appearance: none;
  appearance: none;
}

/* 10.1 FAQ question marker */
.fso-faq-question::marker {
  content: "";
}

/* 10.2 WebKit FAQ question marker */
.fso-faq-question::-webkit-details-marker {
  display: none;
}

/* 10.3 FAQ question hover and keyboard-focus states */
.fso-faq-question:hover,
.fso-faq-question:focus-visible {
  color: var(--fsm-blue);
}

/* 10.4 FAQ question keyboard-focus outline */
.fso-faq-question:focus-visible {
  outline: 3px solid rgba(0, 23, 118, 0.2);
  outline-offset: 5px;
}

/* Plus and minus icon */

/* 10.5 FAQ question open-and-close icon */
.fso-faq-question::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30px;
  height: 30px;
  color: var(--fsm-blue);
  content: "+";
  font-size: 25px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
  transform: translateY(-50%);
}

/* 10.6 Active FAQ question icon */
.fso-faq-question.active::after {
  color: var(--fsm-orange);
  content: "−";
}

/* FAQ answer */

/* 11. FAQ answer: .fso-faq-answer */
.fso-faq-answer {
  max-width: 800px;
  padding: 0 58px 25px 0;
  color: var(--fsm-text);
  line-height: 1.75;
  hyphens: auto;
  text-align: justify;
}

/* 11.1 FAQ answer paragraph */
.fso-faq-answer p {
  margin: 0;
}

/* 11.2 FAQ answer list */
.fso-faq-answer ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

/* 11.3 FAQ answer list marker */
.fso-faq-answer li::marker {
  color: var(--fsm-orange);
}

/* 11.4 Active FAQ answer animation */
.fso-faq-item:has(.fso-faq-question.active) .fso-faq-answer {
  animation: fso-faq-open 300ms ease-out;
}

/* 11.5 FAQ answer opening keyframes */
@keyframes fso-faq-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced-motion accessibility */

@media (prefers-reduced-motion: reduce) {
  /* 9-10. Remove FAQ item and question transitions */
  .fso-faq-item,
  .fso-faq-question {
    transition: none;
  }

  /* 11.4 Remove the active FAQ answer animation */
  .fso-faq-item:has(.fso-faq-question.active) .fso-faq-answer {
    animation: none;
  }
}

/* faq section ---- end ---- */

/* ==================================================
     IPAD LANDSCAPE + IPAD PORTRAIT — 1200px and below
     Covers 1180px and 1024px layouts
     ================================================== */
@media (max-width: 1200px) {
  /* Overview ---- start ---- */
  /* The FSM overview is now a single full-width feature panel. */
  /* Overview ---- end ---- */

  /* Eligibility requirements */
  .fso-tar-participant-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fso-tar-section-heading {
    text-align: center;
  }

  .fso-tar-section-label {
    text-align: center;
  }

  .fso-tar-section-title {
    margin-inline: auto;
    text-align: center;
  }

  .fso-tar-section-introduction {
    max-width: 1000px;
    margin-inline: auto;
    text-align: justify;
  }

  .fso-tar-section-introduction-note {
    display: none;
  }

  /* Show Explore FSO Course mobile note */
  .fso-tar-section-introduction-note-mobile {
    display: grid;
    margin: 0;
    margin-top: 10px;
  }

  /* CTA: centred button group, not left-aligned */
  .fso-reg-registration-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .fso-registration-content {
    text-align: center;
  }

  .fso-registration-btn {
    width: min(100%, 420px);
    align-items: stretch;
    justify-self: center;
    margin-inline: auto;
  }

  .fso-reg-button,
  .fso-view-fso-link {
    width: 100%;
  }
}

/* ==================================================
     TABLET LAYOUT — 991px and below
     Matches leadership.css tablet approach
     ================================================== */
@media (max-width: 991px) {
  /* 1. Hero ---- start */
  .fso-hero {
    min-height: 480px;
    background-position: center;
  }

  .fso-hero-content {
    padding-block: 72px;
  }

  .fso-hero-int {
    max-width: 600px;
  }

  .fso-hero h1 {
    font-size: 45px;
  }

  .fso-shell {
    width: min(1400px, calc(100% - 80px));
  }
  /* Hero ---- end ---- */

  /* okk ---- start ---- */
  .fso-okk-overview-label {
    font-size: 11px;
  }

  .fso-okk-overview-title {
    font-size: 35px;
  }

  .fso-okk-overview-badge > p {
    hyphens: auto;
    text-align: justify;
    font-size: 14px;
  }

  /* okk ---- end ---- */

  /* 2. FSM overview ---- start ---- */
  .fso-overview-section-label {
    font-size: 11px;
    text-align: center;
  }

  .fso-overview-section-title {
    font-size: 35px;
    text-align: center;
  }

  .fso-overview-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* FSM overview ----end ---- */

  /* 3. Legal requirement ---- start ---- */
  .fso-legal-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fso-legal-section-label {
    font-size: 11px !important;
  }

  .fso-legal h2 {
    font-size: 35px;
  }

  .fso-legal-section-stats strong {
    font-size: 26px;
  }
  /* Legal requirement ---- end ---- */

  /* 5. Eligibility requirements ---- start ----*/
  .fso-tar-section-label {
    font-size: 11px !important;
    text-align: center;
  }

  .fso-tar-section-title {
    font-size: 35px;
    text-align: center;
  }

  .fso-tar-participant-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fso-tar-section-introduction-note {
    display: none;
  }

  .fso-tar-section-introduction-note-mobile {
    display: grid;
    margin: 0;
    margin-top: 10px;
  }
  /* Eligibility requirements ---- end ----*/

  /* 6. Course modules ---- start ---- */
  .fso-module-overview-label {
    font-size: 11px !important;
  }

  .fso-module-overview-heading h2 {
    font-size: 35px;
  }

  .fso-module-overview-container {
    width: min(var(--fsm-content-width), calc(100% - 48px));
  }

  .fso-module-track {
    grid-template-columns: 1fr;
  }

  .fso-module-track-item:last-child {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
  /* Course modules ---- end ---- */

  /* 7. FSM responsibilities ---- start ---- */
  .fso-responsibilities-label {
    font-size: 11px;
  }

  .fso-responsibilities-heading h2 {
    font-size: 35px;
  }

  .fso-responsibilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fso-responsibilities-number {
    display: grid;
    margin-inline: auto;
  }
  /* FSM responsibilities ---- end ----*/

  /* 8. Company benefits ---- start ---- */
  .fso-company-benefits-label {
    font-size: 11px;
  }

  .fso-company-benefits-heading h2 {
    font-size: 35px;
  }

  .fso-company-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Company benefits ---- end ---- */

  /* 9. Why choose Knowledge Gains ---- start ---- */
  .fso-why-choose-us-image-label {
    font-size: 11px;
  }

  .fso-why-choose-us-image-heading h2 {
    font-size: 35px;
  }

  .fso-why-choose-us-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fso-why-choose-us-image-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 420px);
    justify-self: center;
  }

  /* .fso-why-choose-us-image-card:last-child {
    grid-column: auto;
    width: auto;
  } */

  /* Why choose Knowledge Gains ---- end ---- */

  /* 10. Registration CTA ---- start ----*/
  .fso-registration-label {
    font-size: 11px;
  }

  .fso-registration-title {
    font-size: 35px;
  }

  .fso-reg-registration-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .fso-registration-btn {
    align-items: flex-start;
  }

  /* Registration CTA ---- end ----*/

  /* 11. FAQ ---- start ----*/
  .fso-faq-section-label {
    font-size: 11px;
  }

  .fso-faq-section-title {
    font-size: 35px;
    line-height: 1.2;
  }

  .fso-faq-list {
    margin-top: 40px;
  }

  .fso-faq-question {
    font-size: 17px;
  }
}

/* FAQ ---- end ----*/
/* card for why choose us */
@media (max-width: 900px) {
  .fso-why-choose-us-image-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 407px);
    justify-self: center;
  }
}

/* card for why choose us */
@media (max-width: 868px) {
  .fso-why-choose-us-image-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 346px);
    justify-self: center;
  }
}

/* card for why choose us */
@media (max-width: 800px) {
  .fso-why-choos-us-image-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 357px);
    justify-self: center;
  }
}

/* ==================================================
     PHONE LAYOUT — 768px and below
     ================================================== */
@media (max-width: 768px) {
  /* Shared tablet typography */
  .fso-okk-overview-description,
  .fso-overview-content,
  .fso-overview-description,
  .fso-legal-section-heading > p,
  .fso-tar-section-introduction > p,
  .fso-module-overview-heading > p:last-child,
  .fso-registration-description,
  .fso-faq-answer {
    font-size: 15px;
  }

  .fso-eyebrow {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .fso-okk-org-chart h3,
  .fso-tar-participant-list-h3,
  .fso-module-track-content h3,
  .fso-responsibilities-card h3,
  .fso-company-benefits-card h3,
  .fso-why-choose-us-image-content h3 {
    font-size: 17px;
    line-height: 1.3;
  }

  .fso-responsibilities-card p,
  .fso-responsibilities-card li {
    font-size: 15px;
  }

  /* 1. Hero ---- start ----*/
  .fso-hero {
    min-height: 400px;
  }

  .fso-shell {
    width: min(1400px, calc(100% - 90px));
  }

  .fso-hero h1 {
    font-size: 40px;
    line-height: 1.1;
     text-shadow: 5px 5px 0 var(--fsm-red);
  }

  .fso-hero-content {
    padding-block: 56px;
  }

  /* Hero ---- end ---- */

  /* okk ---- start ---- */
  .fso-okk-overview-label {
    font-size: 10px;
  }

  .fso-okk-overview-title {
    font-size: 30px;
  }

  .fso-okk-overview-badge > p {
    hyphens: auto;
    text-align: justify;
    font-size: 14px;
  }

  .fso-okk-overview-panel {
    gap: 30px;
  }

  .fso-okk-org-node-count {
    font-size: 25px;
  }
  /* okk ---- end ---- */

  /* 2. FSM overview ---- start ---- */
  .fso-overview-section-label {
    font-size: 10px;
  }

  .fso-overview-section-title {
    font-size: 30px;
  }

  .fso-overview-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fso-course-overview {
    padding: 40px 0;
  }

  .fso-overview-content-container {
    width: min(100% - 32px, 1300px);
  }

  .fso-overview-section-heading {
    padding: 24px 22px 24px 28px;
  }

  .fso-overview-content {
    font-size: 15px;
  }

  .fso-overview-card {
    padding: 28px;
    border-left-width: 4px;
    border-radius: 18px;
  }

  /* FSM overview ---- end ---- */

  /* 3. Legal requirement ---- start ----*/
  .fso-legal-section-label {
    font-size: 10px !important;
  }

  .fso-legal h2 {
    font-size: 30px;
  }

  .fso-legal {
    padding: 40px 0;
  }

  .fso-legal-container {
    width: min(100% - 32px, 1300px);
  }

  .fso-legal-section-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fso-legal-section-stats strong {
    font-size: 22px;
  }

  .fso-legal h3 {
    font-size: 14px;
  }

  /* Legal requirement ---- end ----*/

  /* 5. Eligibility requirements ---- start ---- */
  .fso-tar-section-label {
    font-size: 10px !important;
  }

  .fso-tar-section-title {
    font-size: 30px;
  }

  .fso-target-participants {
    padding: 40px 0;
  }

  .fso-tar-content-container {
    width: min(100% - 32px, 1180px);
  }

  .fso-tar-participant-layout {
    padding: 24px;
    gap: 26px;
  }

  .fso-tar-section-introduction,
  .fso-tar-participant-list {
    font-size: 15px;
  }
  /* Eligibility requirements ---- end ---- */

  /* 6. Course modules ---- start ----*/
  .fso-module-overview-label {
    font-size: 10px !important;
  }

  .fso-module-overview-heading h2 {
    font-size: 30px;
  }

  .fso-module-overview-p {
    text-align: justify;
  }

  .fso-module-overview {
    padding: 40px 0;
  }

  .fso-module-overview-container {
    width: min(100% - 32px, 1180px);
  }

  .fso-module-track {
    margin-top: 30px;
  }

  .fso-module-track-item {
    padding: 13px;
  }

  /* 6. Course modules ---- end ----*/

  /* 7. FSM responsibilities ---- start ----*/
  .fso-responsibilities-label {
    font-size: 10px;
  }

  .fso-responsibilities-heading h2 {
    font-size: 30px;
  }

  .fso-responsibilities {
    padding: 40px 0;
  }

  .fso-responsibilities-container {
    width: min(100% - 32px, 1300px);
  }

  .fso-responsibilities-number {
    text-align: center;
    margin-inline: auto;
  }

  /* FSM responsibilities ---- start ----*/

  /* 8. Company benefits */
  .fso-company-benefits-label {
    font-size: 10px;
  }

  .fso-company-benefits-heading h2 {
    font-size: 30px;
  }
  .fso-company-benefits {
    padding: 40px 0;
  }

  .fso-company-benefits-container {
    width: min(100% - 32px, 1300px);
  }

  .fso-responsibilities-number {
    display: grid;
    margin-inline: auto;
  }

  /* 9. Why choose us */
  .fso-why-choose-us-image-label {
    font-size: 10px;
  }

  .fso-why-choose-us-image-heading h2 {
    font-size: 30px;
  }

  .fso-why-choose-us-image {
    padding: 40px 0;
  }

  .fso-why-choose-us-image-container {
    width: min(100% - 32px, 1180px);
  }

  .fso-why-choose-us-image-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 357px);
    justify-self: center;
  }

  /* 10. Registration CTA */
  .fso-registration-label {
    font-size: 10px;
  }

  .fso-registration-title {
    font-size: 30px;
  }

  .fso-registration-cta {
    padding: 40px 0;
  }

  .fso-reg-content-container {
    width: min(100% - 32px, 1180px);
  }

  .fso-registration-content {
    text-align: center;
  }

  .fso-registration-btn {
    width: min(100%, 440px);
    align-items: stretch;
    margin-inline: auto;
  }

  .fso-reg-button,
  .fso-view-fso-link {
    width: 100%;
  }

  .fso-registration-description {
    text-align: justify;
  }

  /* 11. FAQ */
  .fso-faq-section-label {
    font-size: 10px;
  }

  .fso-faq-section-title {
    font-size: 30px;
    line-height: 1.2;
  }

  .fso-course-faq {
    padding: 40px 0;
  }

  .fso-faq-container {
    width: min(100% - 32px, 1180px);
  }

  .fso-faq-list {
    margin-top: 32px;
  }

  .fso-faq-question {
    padding: 18px 48px 18px 0;
    font-size: 16px;
  }

  .fso-faq-answer {
    padding: 0 42px 18px 0;
    font-size: 15px;
  }
}

@media (max-width: 678px) {
  .fso-why-choose-us-image-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 299px);
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .fso-why-choose-us-image-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 275px);
    justify-self: center;
  }

  .neon-pulse {
    animation: fso-cta-float 3.2s ease-in-out infinite;
  }

  .neon-pulse::before,
  .neon-pulse::after {
    display: none;
  }
}

@media (max-width: 568px) {
  .fso-why-choose-us-image-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 249px);
    justify-self: center;
  }
}

/* ==================================================
     SMALL PHONE LAYOUT — 480px and below
     ================================================== */
@media (max-width: 468px) {
  /* Shared tablet typography */
  .fso-okk-overview-description,
  .fso-overview-content,
  .fso-overview-description,
  .fso-legal-section-heading > p,
  .fso-tar-section-introduction > p,
  .fso-module-overview-heading > p:last-child,
  .fso-registration-description,
  .fso-faq-answer {
    font-size: 14px;
  }

  /* Inner card titles */
  .fso-module-track-content h3,
  .fso-responsibilities-card h3,
  .fso-company-benefits-card h3,
  .fso-why-choose-us-image-content h3 {
    font-size: 16px;
    line-height: 1.3;
  }

  .fso-responsibilities-card p,
  .fso-responsibilities-card li {
    font-size: 14px;
  }

  /* Single card per row for every FSM card/grid section */
  .fso-overview-layout,
  .fso-legal-container,
  .fso-tar-participant-layout,
  .fso-responsibilities-grid,
  .fso-company-benefits-grid,
  .fso-why-choose-us-image-grid,
  .fso-reg-registration-layout {
    grid-template-columns: 1fr;
  }

  .fso-legal-section-stats {
    grid-template-columns: 1fr;
  }

  .fso-why-choose-us-image-card:last-child {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }

  /* 1. Hero */
  .fso-hero {
    min-height: 300px;
    background-position: 55% center;
  }

  .fso-shell {
    width: min(1400px, calc(100% - 40px));
  }

  .fso-hero-content {
    padding-block: 44px;
    /* transform: translateY(25px); */
  }

  .fso-hero h1 {
    font-size: 32px;
     text-shadow: 4px 4px 0 var(--fsm-red);
    text-align: center;
  }

  .fso-eyebrow {
    font-size: 9px;
    letter-spacing: 0.1em;
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  .fso-hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
  }

  .fso-hero-button {
    width: 80%;
    min-height: 40px;
    padding: 9px 14px;
    margin-inline: auto;
    font-size: 12px;
  }

  /* 2.0 OKK ---- start ---- */
  .fso-okk-overview-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .fso-okk-overview-title {
    font-size: 22px;
  }

  .fso-okk-overview-description {
    hyphens: auto;
  }

  .fso-okk-overview-badge > p {
    hyphens: auto;
    text-align: justify;
    font-size: 13px;
  }

  .fso-okk-overview-panel {
    gap: 30px;
  }

  .fso-okk-org-chart h3 {
    font-size: 16px;
  }

  .fso-okk-org-node-count {
    font-size: 25px;
  }

  .fso-okk-overview-badge-icon {
    display: none;
  }

  /* .fso-okk-overview-badge {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .fso-okk-overview-badge-icon {
    margin-top: 0;
  } */

  /* 2.0 OKK ---- start ---- */

  /* 2. FSM overview ---- start ----*/
  .fso-overview-section-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .fso-overview-section-title {
    font-size: 22px;
  }

  .fso-course-overview {
    padding: 32px 0;
  }

  .fso-overview-content-container {
    width: min(1300px, calc(100% - 28px));
  }

  .fso-overview-section-heading {
    padding: 16px;
    border-radius: 18px;
  }

  .fso-overview-content {
    font-size: 14px;
    line-height: 1.7;
  }

  .fso-overview-card {
    padding: 20px;
    border-left-width: 4px;
    border-radius: 16px;
  }

  .fso-overview-description {
    hyphens: auto;
    text-align: justify;
  }

  /* FSM overview ---- end ----*/

  /* 3. Legal requirement ---- start ----*/
  .fso-legal-section-label {
    font-size: 9px !important;
    letter-spacing: 0.1em;
  }

  .fso-legal h2 {
    font-size: 22px;
  }

  .fso-legal {
    padding: 32px 0;
  }

  .fso-legal-container {
    width: min(1300px, calc(100% - 28px));
  }

  .fso-legal-section-heading {
    text-align: center;
  }

  .fso-legal-section-heading > p:not(.fso-legal-section-label) {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
    text-align: justify;
  }

  .fso-legal-section-heading h3 {
    padding-top: 16px;
    font-size: 13px;
  }

  .fso-legal-section-stats > div {
    padding: 16px;
  }

  .fso-legal-section-stats strong {
    font-size: 20px;
  }

  .fso-legal-section-stats span {
    font-size: 13px;
  }

  /* Legal requirement ---- end ----*/

  /* 5. Eligibility requirements ---- start ---- */
  .fso-tar-section-label {
    font-size: 9px !important;
    letter-spacing: 0.1em;
  }

  .fso-tar-section-title {
    font-size: 22px;
  }

  .fso-tar-participant-list-h3 {
    font-size: 13px;
    text-align: center;
  }

  .fso-tar-section-introduction {
    font-size: 14px;
  }

  .fso-tar-participant-list li {
    font-size: 13px;
    padding: 15px 10px 15px 17px;
  }
  .fso-target-participants {
    padding: 32px 0;
  }

  .fso-tar-content-container {
    width: min(1180px, calc(100% - 28px));
  }

  .fso-tar-participant-layout {
    padding: 18px;
    border-radius: 18px;
  }

  .fso-tar-list-re-ol {
    padding-left: 5px;
  }

  .fso-tar-section-introduction-note-mobile p,
  .fso-tar-section-introduction-note-mobile strong {
    font-size: 13px;
  }

  .fso-tar-section-introduction-note-mobile p a {
    font-size: 14px;
  }

  /* Eligibility requirements ---- end ---- */

  /* 6. Course modules ---- start ---- */
  .fso-module-overview-label {
    font-size: 9px !important;
    letter-spacing: 0.1em;
  }

  .fso-module-overview-heading h2 {
    font-size: 22px;
  }

  .fso-module-overview {
    padding: 32px 0;
  }

  .fso-module-overview-container {
    width: min(1180px, calc(100% - 28px));
  }

  .fso-module-track-item {
    padding: 10px;
  }

  .fso-module-track-content h3 {
    font-size: 16px;
  }

  /* Course modules ---- end ---- */

  /* 7. FSM responsibilities ---- start ---- */
  .fso-responsibilities-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .fso-responsibilities-heading h2 {
    font-size: 22px;
  }

  .fso-responsibilities {
    padding: 32px 0;
  }

  .fso-responsibilities-container {
    width: min(1300px, calc(100% - 28px));
  }

  .fso-responsibilities-card {
    padding: 18px;
  }

  .fso-responsibilities-card h3 {
    font-size: 16px;
  }

  .fso-responsibilities-card p {
    font-size: 14px;
  }

  /* FSM responsibilities ---- end ---- */

  /* 8. Company benefits ---- start ---- */
  .fso-company-benefits-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .fso-company-benefits-heading h2 {
    font-size: 22px;
  }

  .fso-company-benefits {
    padding: 32px 0;
  }

  .fso-company-benefits-container {
    width: min(1300px, calc(100% - 28px));
  }

  .fso-company-benefits-card {
    padding: 18px;
  }

  .fso-company-benefits-card h3 {
    font-size: 16px;
  }

  .fso-company-benefits-card p {
    font-size: 14px;
  }

  /* Company benefits ---- end ---- */

  /* 9. Why choose us ---- start ----*/
  .fso-why-choose-us-image-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .fso-why-choose-us-image-heading h2 {
    font-size: 22px;
  }

  .fso-why-choose-us-image {
    padding: 32px 0;
  }

  .fso-why-choose-us-image-container {
    width: min(1180px, calc(100% - 28px));
  }

  .fso-why-choose-us-image-content {
    padding: 18px;
  }

  /* Why choose us ---- end ----*/

  /* 10. Registration CTA ---- start ---- */
  .fso-registration-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .fso-registration-title {
    font-size: 22px;
  }

  .fso-registration-cta {
    padding: 40px 0;
  }

  .fso-reg-content-container {
    width: min(1180px, calc(100% - 28px));
  }

  .fso-registration-description {
    font-size: 14px;
  }

  .fso-reg-button,
  .fso-view-fso-link {
    min-height: 48px;
    padding-inline: 18px;
    font-size: 14px;
  }

  /* Registration CTA ---- end ---- */

  /* 11. FAQ ---- start ----*/
  .fso-faq-section-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .fso-faq-section-title {
    font-size: 22px;
    line-height: 1.2;
  }
  .fso-course-faq {
    padding: 32px 0;
  }

  .fso-faq-container {
    width: min(1180px, calc(100% - 28px));
  }

  .fso-faq-heading-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
  }

  .fso-faq-heading-svg {
    width: 46px;
    height: 46px;
  }

  .fso-faq-list {
    margin-top: 28px;
  }

  .fso-faq-item {
    padding: 0 12px;
  }

  .fso-faq-question {
    padding: 16px 36px 16px 0;
    font-size: 14px;
  }

  .fso-faq-question::after {
    right: -2px;
    font-size: 22px;
  }

  .fso-faq-answer {
    padding: 0 30px 16px 0;
    font-size: 14px;
    hyphens: auto;
    text-align: justify;
  }
}
/* FAQ ---- end ----*/

@media (max-width: 429px) {
  /* Shared body copy */
  .fso-overview-content,
  .fso-overview-description,
  .fso-legal-section-heading > p:not(.fso-legal-section-label),
  .fso-tar-section-introduction,
  .fso-module-overview-heading > p:last-child,
  .fso-responsibilities-card p,
  .fso-company-benefits-card p,
  .fso-registration-description,
  .fso-faq-answer {
    font-size: 13px;
  }

  /* Labels and headings */
  .fso-eyebrow,
  .fso-okk-overview-label,
  .fso-overview-section-label,
  .fso-legal-section-label,
  .fso-tar-section-label,
  .fso-module-overview-label,
  .fso-responsibilities-label,
  .fso-company-benefits-label,
  .fso-why-choose-us-image-label,
  .fso-registration-label,
  .fso-faq-section-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .fso-okk-overview-title,
  .fso-overview-section-title,
  .fso-legal h2,
  .fso-tar-section-title,
  .fso-module-overview-heading h2,
  .fso-responsibilities-heading h2,
  .fso-company-benefits-heading h2,
  .fso-why-choose-us-image-heading h2,
  .fso-registration-title,
  .fso-faq-section-title {
    font-size: 20px;
    line-height: 1.2;
  }

  .fso-okk-org-chart h3,
  .fso-tar-participant-list-h3,
  .fso-module-track-content h3,
  .fso-responsibilities-card h3,
  .fso-company-benefits-card h3,
  .fso-why-choose-us-image-content h3 {
    font-size: 16px;
  }

  .fso-hero {
    min-height: 260px;
  }

  .fso-hero-content {
    padding-block: 36px;
  }

  .fso-hero h1 {
    font-size: 28px;
  }

  .fso-course-overview,
  .fso-legal,
  .fso-target-participants,
  .fso-module-overview,
  .fso-responsibilities,
  .fso-company-benefits,
  .fso-why-choose-us-image,
  .fso-course-faq {
    padding-block: 28px;
  }

  .fso-registration-cta {
    padding-block: 32px;
  }

  .fso-overview-section-heading,
  .fso-tar-participant-layout,
  .fso-responsibilities-card,
  .fso-company-benefits-card,
  .fso-why-choose-us-image-content {
    padding: 16px;
  }

  .fso-module-track-item {
    padding: 9px;
  }

  .fso-okk-overview-description,
  .fso-okk-org-chart p,
  .fso-legal-section-heading h3,
  .fso-legal-section-stats span,
  .fso-tar-participant-list li,
  .fso-tar-section-introduction-note-mobile p,
  .fso-tar-section-introduction-note-mobile strong,
  .fso-reg-button,
  .fso-view-fso-link,
  .fso-faq-question {
    font-size: 13px;
  }

  .fso-okk-overview-badge > p {
    hyphens: auto;
    text-align: justify;
    font-size: 12px;
  }

  .fso-faq-question {
    padding-block: 14px;
  }

  .fso-faq-answer {
    padding-bottom: 14px;
    hyphens: auto;
    text-align: justify;
  }
}

/* ==================================================
     EXTRA-SMALL PHONE LAYOUT — 374px and below
     ================================================== */
@media (max-width: 374px) {
  /* Shared body copy */
  .fso-overview-content,
  .fso-overview-description,
  .fso-legal-section-heading > p:not(.fso-legal-section-label),
  .fso-tar-section-introduction,
  .fso-module-overview-heading > p:last-child,
  .fso-responsibilities-card p,
  .fso-company-benefits-card p,
  .fso-registration-description,
  .fso-faq-answer {
    font-size: 12px;
  }

  /* Labels and headings */
  .fso-eyebrow,
  .fso-okk-overview-label,
  .fso-overview-section-label,
  .fso-legal-section-label,
  .fso-tar-section-label,
  .fso-module-overview-label,
  .fso-responsibilities-label,
  .fso-company-benefits-label,
  .fso-why-choose-us-image-label,
  .fso-registration-label,
  .fso-faq-section-label {
    font-size: 8px;
  }

  .fso-okk-overview-title,
  .fso-overview-section-title,
  .fso-legal h2,
  .fso-tar-section-title,
  .fso-module-overview-heading h2,
  .fso-responsibilities-heading h2,
  .fso-company-benefits-heading h2,
  .fso-why-choose-us-image-heading h2,
  .fso-registration-title,
  .fso-faq-section-title {
    font-size: 18px;
  }

  .fso-okk-org-chart h3,
  .fso-tar-participant-list-h3,
  .fso-module-track-content h3,
  .fso-responsibilities-card h3,
  .fso-company-benefits-card h3,
  .fso-why-choose-us-image-content h3 {
    font-size: 15px;
  }

  /* Extra-compact spacing */
  .fso-hero {
    min-height: 240px;
  }

  .fso-hero-content {
    padding-block: 32px;
  }

  .fso-hero h1 {
    font-size: 26px;
     text-shadow: 3px 3px 0 var(--fsm-red);
  }

  .fso-shell {
    width: min(1400px, calc(100% - 32px));
  }

  .fso-course-overview,
  .fso-legal,
  .fso-target-participants,
  .fso-module-overview,
  .fso-responsibilities,
  .fso-company-benefits,
  .fso-why-choose-us-image,
  .fso-course-faq {
    padding-block: 24px;
  }

  .fso-registration-cta {
    padding-block: 28px;
  }

  .fso-overview-section-heading,
  .fso-tar-participant-layout,
  .fso-responsibilities-card,
  .fso-company-benefits-card,
  .fso-why-choose-us-image-content {
    padding: 14px;
  }

  .fso-module-track-item {
    padding: 12px;
  }

  .fso-overview-description,
  .fso-okk-org-chart p,
  .fso-legal-section-heading h3,
  .fso-legal-section-stats span,
  .fso-tar-participant-list li,
  .fso-tar-section-introduction-note-mobile p,
  .fso-tar-section-introduction-note-mobile strong,
  .fso-reg-button,
  .fso-view-fso-link,
  .fso-faq-question {
    font-size: 12px;
  }

  /* .fso-tar-section-introduction-note-mobile strong {
  display: block;
  text-align: center;
} */

  .fso-overview-card {
    padding: 16px;
    border-radius: 14px;
  }

  .fso-faq-question {
    padding-block: 12px;
  }

  .fso-faq-answer {
    padding-bottom: 12px;
    hyphens: auto;
    text-align: justify;
  }
}