@font-face {
  font-family: "Birthlong";
  src: url("../Fonts/Birthlong.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../Fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Poppins-Medium";
  src: url("../Fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Poppins-Bold";
  src: url("../Fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "Delight";
  src: url("../Fonts/delight-regular.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Delight_Medium";
  src: url("../Fonts/delight-medium.otf") format("opentype");
  font-weight: 500;
}

@font-face {
  font-family: "Delight_Bold";
  src: url("../Fonts/delight-bold.otf") format("opentype");
  font-weight: bold;
}



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

html {
  scroll-behavior: smooth;
}

body {
  color: #000000;
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  background-color: #f3f1f9;
  font-family: var(--sans);
}

img {
  max-width: 100%;
  display: block;
  object-fit: cover;
}



p {
  font-family: var(--sans);
  font-weight: 200;
}

a {
  text-decoration: none;
  color: inherit;
}


/* ========== TOKENS ========== */
:root {
  --black: #000000;
  --dark: #111111;
  --card: #181818;
  --border: #2a2a2a;
  --yellow: #e6b800;
  --yellow2: #e6b800;
  --white: #ffffff;
  --muted: #999999;
  --radius: 14px;
  --px: 8%;
  --purple-deep: #3d1a78;
  --purple-mid: #5b2ec7;
  --purple-bright: #6b2fe0;
  --purple-card-bg: #efe8fb;
  --gold: #f0a93f;
  --gold-bg: #fdecd0;
  --gold-text: #c47a12;
  --silver-bg: #e7e7ea;
  --silver-text: #6b6b74;
  --bronze-bg: #f7e2cf;
  --bronze-text: #b56a2a;
  --ink: #1b1730;
  --muted: #8b879a;
  --card-white: #ffffff;
  --border-soft: #eee9f8;
  --sans: 'Work Sans', sans-serif;
}

.wrapper {
  padding: 0px 90px;
}


/* ========== HERO SECTION ========== */
#hero {
  height: 100vh;
  background-image: url("../Images/Uss/background/main-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/* ========== MAIN ========== */
.main {
  color: var(--white);
  padding-top: 218px;
  padding-left: 63px;
}

h1.hero {
    font-size: 64px;
    color: var(--white);
    font-weight: 600;
    letter-spacing: 1%;
    line-height: 89%;
    width: 50%;
}

h1.hero span {
    font-family: "Birthlong";
    font-weight: 500;
    font-size: 56px;
}

p.hero {
  font-size: 19px;
  color: #eeeeee;
  width: 40%;
  margin: 28px 0px;
}

div.hero-buttons {
  display: flex;
  gap: 18px;
  margin-bottom: 40px;
}

.explore {

  display: flex;

  align-items: center;

  gap: 14px;

  background: linear-gradient(90deg, #642E86, #000000);

  color: #fff;

  padding: 18px 30px;

  border-radius: 60px;

  transition: .35s;
}

/* .explore span {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #fff;

  color: var(--primary);

  display: flex;

  justify-content: center;

  align-items: center;
} */

.explore:hover {
  transform: translateY(-4px);

}

.download {

  display: flex;

  align-items: center;

  gap: 12px;

  border: 2px solid #ddd;

  color: #ffffff;

  padding: 18px 28px;

  border-radius: 60px;

  transition: .35s;

}


.provider {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

    width: 58%;
    padding: 23px 0;

    background: #ffffff24;
    border: 2px solid #484848;
    border-radius: 40px;

    color: #11070e;
    text-align: center;

    z-index: 5;
    box-sizing: border-box;
}

.provider ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.provider ul hr.line {
  height: 24px;
  border: 1.3px solid #482464;
}

.provider ul li {
    display: flex;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    gap: 16px;
    align-items: center;
}


/* ========== KEY-POINT SECTION ========== */
#key-point {
  background-color: #f3f1f9;
}

.key-points {
  margin: 30px 0px;
  background: #0E0B1C;
  color: #fff;
  border-radius: 20px;
}

.key-points ul {
  display: flex;
  justify-content: space-evenly;
  padding: 32px 0px;
  align-items: center;
}

.key-points ul li {
  display: flex;
  align-items: center;
  gap: 16px;
}

.key-points ul li img {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 8px;
  width: 22%;
}

.key-points ul li .content h3,
p {
  font-size: 16px;
}

.key-points ul li .content p span.k {
  display: none;
}


/* ============ WHY-USS SECTION ============ */

.uss-section {
  background: #f3f2f9;
}

.uss-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0px 163px;
  gap: 63px;
}


/* ---------- Left copy ---------- */
.uss-copy {
  flex: 0 0 320px;
  max-width: 340px;
}

.uss-heading {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: #14121f;
  letter-spacing: -0.5px;
}

.uss-script {
  font-family: "Birthlong";
  font-weight: 500;
  color: #642e86;
  font-size: 32px;
  display: inline-block;
}

.uss-subtext {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.7;
  color: #7b7b7b;
  font-weight: 400;
  max-width: 300px;
}


/* ---------- Cards row ---------- */
.uss-cards {
  flex: 1 1 640px;
  display: flex;
  gap: 22px;
}

.uss-card {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3 / 4.6;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(20, 18, 31, 0.14);
  isolation: isolate;
}

.uss-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.uss-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 20, 0.92) 0%,
    rgba(10, 8, 20, 0.65) 30%,
    rgba(10, 8, 20, 0.05) 62%,
    rgba(10, 8, 20, 0) 78%
  );
}

.uss-card__icon {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d28d9;
}

.uss-card__icon svg {
  width: 20px;
  height: 20px;
}

.uss-card__text {
  position: absolute;
  left: 20px;
  right: 18px;
  bottom: 22px;
  color: #ffffff;
}

.uss-card__text h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}

.uss-card__text p {
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  max-width: 210px;
}


/* ============ WHY-CHOOSE SECTION ============ */

.wce-section {
width: 100%;
    padding: 30px 24px;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

.wce-wrap {
  width: 83%;
}

.wce-heading {
  margin-top: 36px;
  text-align: center;
  font-size: 40px;
  color: #000;
  margin-bottom: 15px;
}

.wce-script {
  font-family: "Birthlong";
  font-weight: 400;
  color: #642e86;
  font-size: 46px;
}

.wce-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.wce-card {
  text-align: center;
  background: #e3efff;
  border-radius: 22px;
  padding: 16px 16px 16px;
  display: flex;
  flex-direction: column;
}

.wce-icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #4147d5, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 8px 18px rgba(30, 20, 90, 0.28);
}

.wce-icon img {
  width: 46%;
}

.wce-icon svg {
  width: 26px;
  height: 26px;
}

.wce-card h3 {
  font-size: 22px;
  color: #000000;
  line-height: 1.25;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.wce-card p {
  font-size: 17px;
  line-height: 1.55;
  color: #626161;
  font-weight: 400;
}


/* ============ COURSE-HIGHLIGHTS SECTION ============ */

.section-course-highlights {
  --crs-bg: #f3f2f9;
  --crs-purple-light: #3a1560;
  --crs-purple-mid: #5a1f8f;
  --crs-purple-deep: #1c0630;
  --crs-card-lav: #e6dcf8;
  --crs-card-lav-2: #ece3fa;
  --crs-text-dark: #14141f;
  --crs-text-body: #6b6b7b;
  --crs-icon-purple-1: #7b3fb0;
  --crs-icon-purple-2: #2c0f4a;
}

.section-course-highlights * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.section-course-highlights {
  background: var(--crs-bg);
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 24px;
}

.section-course-highlights .wrap {
  width: 90%;
  max-width: 1040px;
}

.section-course-highlights .cards {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 26px;
}

.section-course-highlights .left-card {
  background: linear-gradient(to bottom, #642e86, #000000);
  border-radius: 26px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 45px rgba(30, 5, 55, 0.35);
  overflow: hidden;
}

.section-course-highlights .left-card h2 {
  color: #fff;
  font-size: 34px;
  margin-bottom: 10px;
  text-align: center;
}

.section-course-highlights .white-panel {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  position: relative;
}

.section-course-highlights .white-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin-bottom: 18px;
}

.section-course-highlights .white-panel li {
  position: relative;
  padding-left: 18px;
  font-size: 17.5px;
  color: var(--crs-text-dark);
  font-weight: 500;
  line-height: 1.4;
}

.section-course-highlights .white-panel li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--crs-text-dark);
  font-size: 16px;
}

.section-course-highlights .illustration {
  display: none;
  position: absolute;
  width: 15%;
  top: 132rem;
  left: 38%;
}

.section-course-highlights .right-card {
    border-radius: 26px;
    padding: 15px 32px;
    box-shadow: 0 20px 45px rgba(60, 15, 100, 0.12);
    background: #ece5fb;
}

.section-course-highlights .right-card h2 {
    text-align: center;
    color: var(--black);
    /* font-family: "Baloo 2", sans-serif; */
    font-size: 29px;
    /* font-weight: 700; */
    margin-bottom: 12px;
}

.right-card h3 {
    text-align: center;
    color: var(--black);
    /* font-family: "Baloo 2", sans-serif; */
    font-size: 17px;
    /* font-weight: 700; */
    margin-bottom: 11px;
}

.section-course-highlights .right-card>p {
    text-align: center;
    color: #5d5858;
    font-size: 13px;
    line-height: 1.55;
    max-width: 340px;
    margin: 0 auto 15px;

}

.section-course-highlights .subjects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 15px;
  column-gap: 10px;
  margin-bottom: 10px;
}

.section-course-highlights .subject {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-course-highlights .subject .icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #642e86, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 6px 14px rgba(50, 10, 90, 0.28);
}

.section-course-highlights .subject .icon-circle img {
  width: 42%;
}

.section-course-highlights .subject span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--crs-text-dark);
}


/* ============ assessment-process section ============ */

.section-assessment-process {
  --asm-bg: #f4f6fb;
  --asm-text-dark: #14141f;
  --asm-text-body: #6b6b7b;
  --asm-purple: #6d2fa8;
  --asm-purple-deep: #2c0f4a;
  --asm-badge-bg: #e2d6f7;
  --asm-badge-border: #c9b3ec;
  --asm-badge-text: #6d2fa8;
  --asm-arrow: #14141f;
}

.section-assessment-process * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.section-assessment-process {
    background: #f3f2f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 32px;

}

.section-assessment-process .wrap {
    width: 80%;
    padding-top: 46px;
}

.section-assessment-process .badge {
  display: inline-block;
  background: #ddd3f8;
  border: 1px solid #642e86;
  color: #642e86;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 9px 20px;
  border-radius: 30px;
}

.section-assessment-process h1.title {
  margin: 22px 0px;
  font-size: 26px;
}

.section-assessment-process h1.title .accent {
  color: #642e86;
}

.section-assessment-process .grid {
  display: grid;
  grid-template-columns: 1.4fr 0.5fr 1.4fr 0.5fr 1.4fr 0.5fr 1.4fr;
  grid-template-rows: auto auto auto;
  align-items: center;
}

.section-assessment-process .r1 {
  grid-row: 1;
}

.section-assessment-process .r2 {
  grid-row: 2;
}

.section-assessment-process .r3 {
  grid-row: 3;
}

.section-assessment-process .c1 {
  grid-column: 1;
}

.section-assessment-process .c2 {
  grid-column: 2;
}

.section-assessment-process .c3 {
  grid-column: 3;
}

.section-assessment-process .c4 {
  grid-column: 4;
}

.section-assessment-process .c5 {
  grid-column: 5;
}

.section-assessment-process .c6 {
  grid-column: 6;
}

.section-assessment-process .c7 {
  grid-column: 7;
}

.section-assessment-process .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6px;
}

.section-assessment-process .icon-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #5f2b7f, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0px;
  box-shadow: 0 8px 18px rgba(60, 15, 100, 0.28);
}

.section-assessment-process .icon-circle img {
  width: 42%;
  stroke: #fff;
  fill: none;
}

.section-assessment-process .icon-circle img.filled {
  fill: #fff;
  stroke: none;
}

.section-assessment-process .step h3 {
  font-size: 22px;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--asm-text-dark);
  margin-bottom: 6px;
}

.section-assessment-process .step h3 {
  white-space: nowrap;
}

.section-assessment-process .step p {
  font-size: 17.5px;
  color: var(--asm-text-body);
  line-height: 1.4;
  max-width: 165px;
}

.section-assessment-process .arrow-h {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-assessment-process .arrow-h.r3 {
  transform: rotate(180deg);
}

.section-assessment-process .arrow-h img {
  width: 58%;
  filter: brightness(0) saturate(100%);
}

.section-assessment-process .down-cell {
  grid-column: 7 / 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}

.section-assessment-process .down-cell img {
  width: 18%;
  transform: rotate(90deg);
  filter: brightness(0) saturate(100%);
}

.section-assessment-process .spacer-row {
  grid-column: 1 / 8;
}


.wrapper1 {
  margin-left: 82px;
}


/* ============ benefits section ============ */

.section-benefits {
  --ben-bg: #f4f6fb;
  --ben-text-dark: #1a1a2e;
  --ben-text-body: #6b6b7b;
  --ben-script-purple: #6b2fa8;

  --ben-blue-bg: #dfe7fb;
  --ben-blue-icon: #2f6fe0;
  --ben-blue-circle: #bcd0f7;

  --ben-yellow-bg: #fdf1d9;
  --ben-yellow-icon: #b9821f;
  --ben-yellow-circle: #f7dfa0;

  --ben-green-bg: #dcf3e6;
  --ben-green-icon: #1f9e6b;
  --ben-green-circle: #b7e5cc;

  --ben-purple-bg: #ece2f9;
  --ben-purple-icon: #ffffff;
  --ben-purple-circle: #9a5cd0;
}

.section-benefits * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.section-benefits {
background: #ffffff;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 27px 24px;
}

.section-benefits .wrap {
  width: 90%;
  max-width: 1140px;
}

.section-benefits h1.title {
text-align: center;
    color: #000000;
    font-size: 56px;
    margin-bottom: 20px;
    margin-top: 25px;
    letter-spacing: 1px;
}

.section-benefits h1.title .script {
  font-family: "Birthlong";
  font-weight: 700;
  color: #552773;
  display: inline-block;
}

.section-benefits .cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.section-benefits .card {
  border-radius: 22px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
}

.section-benefits .icon-circle {
  width: 63px;
  height: 63px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.section-benefits .icon-circle img {
  width: 66%;
}

.section-benefits .card h2 {
  font-size: 29px;
  color: var(--ben-text-dark);
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.section-benefits .card p {
  font-size: 16px;
  line-height: 22px;
  color: var(--ben-text-body);
  font-weight: 400;
}

.section-benefits .card.blue {
  background: #eef5ff;
}

.section-benefits .card.blue .icon-circle {
  background: #d3e9fe;
}

.section-benefits .card.blue .icon-circle img {
  stroke: var(--ben-blue-icon);
  fill: var(--ben-blue-icon);
}

.section-benefits .card.yellow {
  background: #fff8e5;
}

.section-benefits .card.yellow .icon-circle {
  background: #feecc4;
}

.section-benefits .card.yellow .icon-circle img {
  stroke: var(--ben-yellow-icon);
}

.section-benefits .card.green {
  background: #e8f8f2;
}

.section-benefits .card.green .icon-circle {
  background: #a7e0d2;
}

.section-benefits .card.green .icon-circle img {
  stroke: var(--ben-green-icon);
}

.section-benefits .card.purple {
  background: #ece5fb;
}

.section-benefits .card.purple .icon-circle {
  background: #9a5cd0;
}

.section-benefits .card.purple .icon-circle img {
  fill: var(--ben-purple-icon);
}


/* ============ enrollment section ============ */

.section-enrollment {
  --enr-purple-deep: #3a1560;
  --enr-purple-mid: #5b2a86;
  --enr-purple-bright: #7b3fb0;
  --enr-card-light: #ece3fa;
  --enr-card-light-2: #f4eefc;
  --enr-pill-purple-1: #6a2f9e;
  --enr-pill-purple-2: #2a0f45;
  --enr-text-purple: #4a1a7a;
  --enr-white: #ffffff;
}

.section-enrollment * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.section-enrollment {
  background: linear-gradient(to bottom, #642e86, #000000);
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 40px;
}

.section-enrollment .wrap {
  width: 100%;
}

.section-enrollment h1.title {
  text-align: center;
  color: #fff;
  font-size: 38px;
  letter-spacing: 0.5px;
  margin-bottom: 32px;
}

.section-enrollment h1.title .script {
  font-family: "Birthlong";
  font-size: 1.15em;
  display: inline-block;
}

.section-enrollment .cards {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.section-enrollment .side-card {
  background: linear-gradient(
    180deg,
    var(--enr-card-light-2) 0%,
    var(--enr-card-light) 100%
  );
  border-radius: 28px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.section-enrollment .side-card h2 {
  text-align: center;
  color: #4f0e78;
  font-size: 24px;
  margin: 0px 0 12px;
}

.section-enrollment .pill {
  background: linear-gradient(to bottom, #642e86, #000000);
  border-radius: 22px;
  padding: 26px 24px;
  flex: 1;
}

.section-enrollment .pill ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-enrollment .pill li {
  color: #fff;
  font-size: 15.5px;
  font-weight: 400;
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}

.section-enrollment .pill li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.section-enrollment .center-card {
  text-align: center;
  background: linear-gradient(to bottom, #642e86, #000000);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 28px;
  padding: 30px 28px 34px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.55);
}

.section-enrollment .center-card h2 {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 6px;
}

.section-enrollment .center-card .sub {
  font-size: 13.5px;
  color: #c9b8de;
  font-weight: 400;
  margin-bottom: 26px;
}

.section-enrollment .price {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

.section-enrollment .price .per {
  font-size: 20px;
  font-weight: 500;
  color: #d8cbe8;
}

.section-enrollment .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 10px;
    width: 65%;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.section-enrollment .btn-primary {
  background: linear-gradient(to right, #642e86, #000000);
  color: #fff;
  margin-bottom: 14px;
}

.section-enrollment .btn-primary img {
  flex-shrink: 0;
}

.section-enrollment .btn-outline {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}


/* ============ FAQ SECTION ============ */

.section-faq {
  background: #f3f2f9;
  padding: 60px 24px;
}

.section-faq .wrap {
  width: 90%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.section-faq h1.title {
  color: var(--ink);
  font-size: 38px;
  margin-bottom: 12px;
}

.section-faq h1.title .script {
  font-weight: 700;
  color: var(--purple-deep);
  display: inline-block;
}

.section-faq .subtext {
  color: var(--muted);
  font-size: 14px;
  width: 80%;
  margin: 0 auto;
}

.faq-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.faq-item {
  border: 1px solid var(--purple-deep);
  border-radius: var(--radius);
  background: var(--card-white);
  overflow: hidden;
}

.faq-item.open {
  background-color: var(--purple-card-bg);
  border-color: transparent;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  text-align: left;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}

.faq-item.open .faq-question {
  color: var(--purple-deep);
}

.faq-toggle {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--purple-mid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 24px;
}

.faq-answer p {
  color: var(--muted);
  font-size: 0.92rem;
  padding-bottom: 0;
}

.faq-item.open .faq-answer {
  max-height: 240px;
  padding: 0 14px 20px;
}


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


/* ========== 1280px ========== */

@media (max-width: 1280px) {

  .wrapper1 {
    padding-top: 180px;
  }

  .uss-wrap {
    padding: 0 70px;
  }

  h1.hero {
    width: 72%;
    font-size: 48px;
  }

  p.hero {
    width: 52%;
  }

  .provider {
    width: 72%;
  }

  .wce-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .section-course-highlights .cards {
    grid-template-columns: 1.3fr 1fr;
  }
}


/* ========== 1024px ========== */

@media (max-width: 1024px) {

  .wrapper1 {
    padding-top: 180px;
  }

  .uss-wrap {
    padding: 50px;
  }

  .main {
    color: var(--white);
    padding-top: 0px;
    padding-left: 0px;
  }

  .navbar {
    justify-content: space-between;
    padding: 16px 50px 0;
  }

  h1.hero {
    width: 80%;
    font-size: 44px;
  }

  p.hero {
    width: 70%;
  }

  .provider {
    width: 82%;
  }

  .uss-wrap {
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }

  .uss-copy {
    max-width: 100%;
    flex: 0 0 0;
  }

  .uss-subtext {
    text-align: center;
    margin: 10px auto;
  }

  .uss-cards {
    width: 100%;
    justify-content: space-between;
  }

  .wce-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .section-benefits .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-enrollment .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ========== 980px ========== */

@media (max-width: 980px) {

  .uss-wrap {
    padding: 0 40px;
    padding: 50px;
  }

  .navbar {
    padding: 16px 40px 0;
  }

  .middle-nav,
  .right-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .middle-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(82vw, 340px);
    height: 100vh;
    background: #120b1f;
    padding: 84px 24px 24px;
    transition: right 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
  }

  .middle-nav.open {
    right: 0;
  }

  .middle-nav ul {
    flex-direction: column;
    gap: 18px;
  }

  .mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }

  h1.hero {
    width: 100%;
    font-size: 40px;
  }

  p.hero {
    width: 100%;
  }

  .hero-buttons {
    flex-wrap: wrap;
  }

  .provider {
    width: 100%;
  }

  .provider ul {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .provider ul hr.line {
    display: none;
  }

  .key-points ul {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .key-points ul li {
    width: calc(50% - 20px);
  }

  .key-points ul li img {
    width: 15%;
  }

  .uss-cards {
    flex-wrap: wrap;
    justify-content: center;
  }

  .uss-card {
    max-width: 300px;
  }

  .wce-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-course-highlights .cards {
    grid-template-columns: 1fr;
  }

  .section-course-highlights .illustration {
    position: static;
    width: 120px;
    margin: 16px auto 0;
  }

  .section-assessment-process {
    padding: 40px 20px;
  }

  .section-assessment-process .wrap {
    width: 100%;
  }

  .section-assessment-process .badge {
    display: table;
    margin: 0 auto;
  }

  .section-assessment-process h1.title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .section-assessment-process .grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 16px;
  }

  .section-assessment-process .grid::-webkit-scrollbar {
    display: none;
  }

  .section-assessment-process .grid {
    scrollbar-width: none;
  }

  .section-assessment-process .arrow-h,
  .section-assessment-process .down-cell {
    display: none;
  }

  .section-assessment-process .step {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 24px rgba(20, 18, 31, .08);
    text-align: center;
  }

  .section-assessment-process .icon-circle {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
  }

  .section-assessment-process .icon-circle img {
    width: 42%;
  }

  .section-assessment-process .step h3 {
    font-size: 18px;
    white-space: normal;
    margin-bottom: 8px;
  }

  .section-assessment-process .step p {
    font-size: 13px;
    line-height: 1.5;
    max-width: 100%;
  }
}


/* ========== 768px ========== */

@media (max-width: 768px) {

  .wrapper1 {
    margin-left: 23px;
    margin-right: 22px;
  }

  .uss-wrap {
    padding: 0 24px;
  }

  .main {
    color: var(--white);
    padding-top: 0px;
    padding-left: 0px;
  }

  .navbar {
    padding: 16px 24px 0;
  }

  h1.hero {
    font-size: 34px;
    text-align: center;
  }

  h1.hero span {
    font-size: 34px;
  }

  p.hero {
    text-align: center;
    font-size: 15px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .provider ul {
    flex-direction: column;
    text-align: center;
  }

  .uss-heading {
    font-size: 30px;
  }

  .wce-heading,
  .section-benefits h1.title,
  .section-enrollment h1.title {
    font-size: 32px;
  }

  .wce-script {
    font-size: 36px;
  }

  .section-benefits .cards,
  .wce-grid {
    grid-template-columns: 1fr;
  }

  .section-course-highlights .subjects {
    grid-template-columns: 1fr 1fr;
  }

  .section-assessment-process .grid {
    display: flex;
    gap: 18px;
  }

  .section-assessment-process .arrow-h,
  .section-assessment-process .down-cell {
    transform: rotate(90deg);
  }

  .section-assessment-process .step {
    flex: 0 0 250px;
  }

  .section-faq .wrap {
    width: 100%;
    padding: 0 4px;
  }

  .section-faq h1.title {
    font-size: 26px;
  }

  .section-faq .subtext {
    width: 100%;
  }

  .faq-question {
    font-size: 0.9rem;
    padding: 14px 16px;
  }
}


/* ========== 640px ========== */

@media (max-width: 640px) {

  .wrapper,
  .uss-wrap {
    padding: 0 18px;
  }

  .navbar {
    padding: 16px 18px 0;
  }

  h1.hero {
    font-size: 30px;
  }

  h1.hero span {
    font-size: 30px;
  }

  p.hero {
    font-size: 14px;
  }

  .explore,
  .download {
    width: 100%;
    justify-content: center;
  }

  .uss-card {
    max-width: 100%;
  }

  .section-course-highlights .subjects {
    grid-template-columns: 1fr;
  }

  .section-benefits .cards {
    grid-template-columns: 1fr;
  }

  .section-assessment-process .step {
    flex: 0 0 250px;
  }
}


/* ========== 480px ========== */

@media (max-width: 480px) {

  .wrapper1 {
    padding-top: 150px;
    margin-right: 21px;
  }

  .uss-wrap {
    padding: 0 16px;
  }

  .navbar {
    padding: 14px 16px 0;
  }

  .navbar .left-nav img {
    width: 150px;
  }

  h1.hero {
    font-size: 26px;
    line-height: 1.2;
  }

  h1.hero span {
    font-size: 26px;
  }

  p.hero {
    font-size: 13px;
  }

  .provider {
    padding: 14px 16px;
  }

  .provider ul li {
    font-size: 13px;
  }

  .key-points ul li {
    width: 100%;
  }

  .uss-heading {
    font-size: 26px;
  }

  .uss-script {
    font-size: 28px;
  }

  .wce-heading,
  .section-benefits h1.title,
  .section-enrollment h1.title {
    font-size: 28px;
  }

  .section-course-highlights .left-card,
  .section-course-highlights .right-card,
  .wce-card,
  .section-benefits .card,
  .section-enrollment .side-card,
  .section-enrollment .center-card {
    padding: 18px;
  }

  .section-assessment-process .step {
    flex: 0 0 210px;
  }

  .section-enrollment .btn {
    width: 100%;
    justify-content: center;
    font-size: 12px;
  }

}


/* ========== 360px ========== */

@media (max-width: 360px) {

  .wrapper,
  .uss-wrap {
    padding: 0 12px;
  }

  .navbar {
    padding: 12px 12px 0;
  }

  .navbar .left-nav img {
    width: 132px;
  }

  h1.hero {
    font-size: 22px;
  }

  h1.hero span {
    font-size: 22px;
  }

  p.hero {
    font-size: 12px;
  }

  .explore,
  .download {
    font-size: 12px;
    padding: 10px 14px;
    gap: 10px;
  }

  .provider ul li {
    font-size: 12px;
  }

  .uss-heading,
  .wce-heading,
  .section-benefits h1.title,
  .section-enrollment h1.title {
    font-size: 24px;
  }

  .uss-script,
  .wce-script {
    font-size: 24px;
  }

  .section-course-highlights .left-card h2,
  .section-course-highlights .right-card h2 {
    font-size: 22px;
  }

  .section-assessment-process .step {
    flex: 0 0 190px;
  }

  .section-enrollment .btn {
    width: 100%;
    justify-content: center;
    font-size: 12px;
  }

}


/* ========== 320px ========== */

@media (max-width: 320px) {

  .wrapper,
  .uss-wrap {
    padding: 0 10px;
  }

  .navbar {
    padding: 10px 10px 0;
  }

  .navbar .left-nav img {
    width: 120px;
  }

  .menu-toggle {
    width: 34px;
    height: 34px;
  }

  h1.hero {
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
  }

  h1.hero span {
    font-size: 20px;
  }

  p.hero {
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
    width: 100%;
    margin: 18px 0;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .explore,
  .download {
    width: 100%;
    justify-content: center;
    font-size: 11px;
    padding: 10px 12px;
    gap: 8px;
  }

  .provider {
    width: 100%;
    padding: 12px;
    border-radius: 18px;
  }

  .provider ul {
    flex-direction: column;
    gap: 8px;
  }

  .provider ul li {
    font-size: 11px;
    text-align: center;
    justify-content: center;
  }

  .key-points ul {
    padding: 18px 12px;
    gap: 14px;
  }

  .key-points ul li {
    width: 100%;
    gap: 10px;
  }

  .key-points ul li img {
    width: 36px;
    padding: 6px;
  }

  .uss-heading,
  .wce-heading,
  .section-benefits h1.title,
  .section-enrollment h1.title {
    font-size: 22px;
    text-align: center;
  }

  .uss-script,
  .wce-script {
    font-size: 22px;
  }

  .uss-subtext {
    font-size: 13px;
    text-align: center;
    max-width: 100%;
  }

  .uss-card {
    max-width: 100%;
    border-radius: 18px;
  }

  .wce-card,
  .section-benefits .card,
  .section-course-highlights .left-card,
  .section-course-highlights .right-card,
  .section-enrollment .side-card,
  .section-enrollment .center-card {
    padding: 16px;
    border-radius: 18px;
  }

  .section-course-highlights .left-card h2,
  .section-course-highlights .right-card h2 {
    font-size: 20px;
  }

  .section-course-highlights .white-panel {
    padding: 16px;
  }

  .section-course-highlights .white-panel li {
    font-size: 12px;
  }

  .section-course-highlights .subjects {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .section-assessment-process .step p {
    font-size: 11px;
  }

  .section-assessment-process .step {
    flex: 0 0 175px;
  }

  .section-assessment-process .step h3 {
    font-size: 14px;
  }

  .section-enrollment .price {
    font-size: 28px;
  }

  .section-enrollment .btn {
    width: 100%;
    justify-content: center;
    font-size: 12px;
  }

  .middle-nav {
    width: 100%;
    max-width: 100%;
    padding: 72px 18px 24px;
  }

  .middle-nav ul li a {
    font-size: 14px;
  }

  .mobile-actions button {
    width: 100%;
  }
}



/* =========================================================
   WHY USS SECTION - FINAL DESIGN UPDATE
   ========================================================= */

/* Main Why USS section */
.uss-section {
  width: 100%;
  background: #f3f2f9;
}

/* Heading on top + cards below */
.uss-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 35px;
  padding: 55px 80px;
}


/* ---------- Top Heading ---------- */

.uss-copy {
  width: 100%;
  max-width: 850px;
  flex: none;
  text-align: center;
}

.uss-heading {
  width: 100%;
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  color: #14121f;
  letter-spacing: -0.5px;
  margin: 0 auto;
}

.uss-script {
  font-family: "Birthlong";
  font-weight: 500;
  color: #642e86;
  font-size: 40px;
  display: inline-block;
}

.uss-subtext {
    width: 100%;
    max-width: 636px;
    margin: 16px auto 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.7;
    color: #7b7b7b;
    font-weight: 400;
}


/* ---------- Cards Row ---------- */

.uss-cards {
  width: 100%;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 28px;
}


/* ---------- Individual Card ---------- */

.uss-card {
  position: relative;
  flex: 1 1 0;
  width: auto;
  max-width: 340px;
  aspect-ratio: 3 / 4.6;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(20, 18, 31, 0.14);
  isolation: isolate;
}


/* ---------- Card Image ---------- */

.uss-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ---------- Card Dark Shade ---------- */

.uss-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 20, 0.92) 0%,
    rgba(10, 8, 20, 0.65) 30%,
    rgba(10, 8, 20, 0.05) 62%,
    rgba(10, 8, 20, 0) 78%
  );
}


/* ---------- Remove Card Icons ---------- */

.uss-card__icon {
  display: none;
}


/* ---------- Card Text ---------- */

.uss-card__text {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 28px;
  color: #ffffff;
}

.uss-card__text h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    margin-bottom: 14px;
    color: #ffffff;
}

.uss-card__text p {
  max-width: none;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}


/* =========================================================
   WHY USS - 1280px
   ========================================================= */

@media (max-width: 1280px) {

  .uss-wrap {
    padding: 50px 70px;
    gap: 32px;
  }

  .uss-copy {
    max-width: 800px;
  }

  .uss-heading {
    font-size: 40px;
  }

  .uss-script {
    font-size: 38px;
  }

  .uss-subtext {
    font-size: 17px;
  }

  .uss-cards {
    gap: 22px;
  }

  .uss-card {
    max-width: 320px;
  }

  .uss-card__text h3 {
    font-size: 25px;
  }

  .uss-card__text p {
    font-size: 15px;
  }
}


/* =========================================================
   WHY USS - 1024px
   ========================================================= */

@media (max-width: 1024px) {

  .uss-wrap {
    padding: 50px;
    gap: 30px;
  }

  .uss-copy {
    max-width: 750px;
  }

  .uss-heading {
    font-size: 38px;
  }

  .uss-script {
    font-size: 36px;
  }

  .uss-subtext {
    font-size: 17px;
    max-width: 650px;
  }

  .uss-cards {
    width: 100%;
    gap: 20px;
  }

  .uss-card {
    max-width: 300px;
  }

  .uss-card__text {
    left: 22px;
    right: 22px;
    bottom: 25px;
  }

  .uss-card__text h3 {
    font-size: 24px;
  }

  .uss-card__text p {
    font-size: 15px;
  }
}


/* =========================================================
   WHY USS - 980px
   ========================================================= */

@media (max-width: 980px) {

  .uss-wrap {
    padding: 50px 40px;
    gap: 28px;
  }

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

  .uss-script {
    font-size: 34px;
  }

  .uss-subtext {
    font-size: 16px;
  }

  .uss-cards {
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
  }

  .uss-card {
    flex: 0 1 300px;
    max-width: 300px;
  }
}


/* =========================================================
   WHY USS - 768px
   ========================================================= */

@media (max-width: 768px) {

  .uss-wrap {
    padding: 45px 24px;
    gap: 28px;
  }

  .uss-copy {
    max-width: 650px;
  }

  .uss-heading {
    font-size: 32px;
    line-height: 1.2;
  }

  .uss-script {
    font-size: 32px;
  }

  .uss-subtext {
    font-size: 16px;
    line-height: 1.6;
    max-width: 600px;
  }

  .uss-cards {
    flex-wrap: wrap;
    gap: 22px;
  }

  .uss-card {
    flex: 1 1 calc(50% - 22px);
    max-width: 320px;
  }

  .uss-card__text {
    left: 22px;
    right: 22px;
    bottom: 24px;
  }

  .uss-card__text h3 {
    font-size: 23px;
    margin-bottom: 12px;
  }

  .uss-card__text p {
    font-size: 14px;
    line-height: 1.55;
  }
}


/* =========================================================
   WHY USS - 640px
   ========================================================= */

@media (max-width: 640px) {

  .uss-wrap {
    padding: 40px 18px;
    gap: 25px;
  }

  .uss-heading {
    font-size: 30px;
  }

  .uss-script {
    font-size: 30px;
  }

  .uss-subtext {
    font-size: 15px;
  }

  .uss-cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .uss-card {
    flex: none;
    width: 100%;
    max-width: 360px;
  }

  .uss-card__text {
    left: 22px;
    right: 22px;
    bottom: 25px;
  }

  .uss-card__text h3 {
    font-size: 24px;
  }

  .uss-card__text p {
    font-size: 15px;
    line-height: 1.6;
  }
}


/* =========================================================
   WHY USS - 480px
   ========================================================= */

@media (max-width: 480px) {

  .uss-wrap {
    padding: 40px 16px;
    gap: 24px;
  }

  .uss-copy {
    max-width: 100%;
  }

  .uss-heading {
    font-size: 28px;
    line-height: 1.2;
  }

  .uss-script {
    font-size: 29px;
  }

  .uss-subtext {
    font-size: 14px;
    line-height: 1.6;
    max-width: 100%;
  }

  .uss-cards {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
  }

  .uss-card {
    width: 100%;
    max-width: 360px;
    flex: none;
    border-radius: 20px;
  }

  .uss-card__text {
    left: 22px;
    right: 22px;
    bottom: 25px;
  }

  .uss-card__text h3 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .uss-card__text p {
    font-size: 15px;
    line-height: 1.6;
  }
}


/* =========================================================
   WHY USS - 360px
   ========================================================= */

@media (max-width: 360px) {

  .uss-wrap {
    padding: 35px 12px;
    gap: 22px;
  }

  .uss-heading {
    font-size: 24px;
  }

  .uss-script {
    font-size: 25px;
  }

  .uss-subtext {
    font-size: 13px;
    line-height: 1.6;
  }

  .uss-card {
    max-width: 100%;
    border-radius: 18px;
  }

  .uss-card__text {
    left: 20px;
    right: 20px;
    bottom: 22px;
  }

  .uss-card__text h3 {
    font-size: 21px;
    margin-bottom: 10px;
  }

  .uss-card__text p {
    font-size: 13px;
    line-height: 1.55;
  }
}


/* =========================================================
   WHY USS - 320px
   ========================================================= */

@media (max-width: 320px) {

  .uss-wrap {
    padding: 32px 10px;
    gap: 20px;
  }

  .uss-heading {
    font-size: 22px;
    line-height: 1.2;
  }

  .uss-script {
    font-size: 23px;
  }

  .uss-subtext {
    font-size: 12px;
    line-height: 1.6;
  }

  .uss-card {
    max-width: 100%;
    border-radius: 18px;
  }

  .uss-card__text {
    left: 18px;
    right: 18px;
    bottom: 20px;
  }

  .uss-card__text h3 {
    font-size: 20px;
    margin-bottom: 9px;
  }

  .uss-card__text p {
    font-size: 12px;
    line-height: 1.5;
  }
}












@media (max-width: 320px) {
    p.hero {
        font-size: 11px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        width: 100% !important;
        margin: 18px 0 !important;
        padding-top: 0px !important;
    }
}












@media (max-width: 460px) {


    div.hero-buttons {
      display: flex;
      gap: 18px;
      margin-bottom: 20px !important;
    }

}








    @media (max-width: 1024px) {
    .wrapper {
        padding-top: 180px;
    }
}


@media (max-width: 480px) {
    .wrapper {
        padding-top: 150px;
        margin-right: 21px;
    }
}

@media (max-width: 768px) {
    .wrapper {
        margin-left: 23px;
        margin-right: 22px;
    }
}


    

@media (max-width: 768px) {
  .step {
    margin-bottom: 20px;
  }
  .grid {
    display: contents !important;
    grid-template-columns: 0fr !important;
  }
}

@media (max-width: 768px) {
  .arrow-h {
    margin-bottom: 20px;
  }
  .grid {
    display: contents !important;
    grid-template-columns: 0fr !important;
  }
}

@media (max-width: 1024px) {
  .section-assessment-process .step p {
    font-size: 12.5px;
    color: var(--asm-text-body);
    line-height: 1.4;
    max-width: 165px;
  }

  .section-assessment-process .step h3 {
    font-size: 17px;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--asm-text-dark);
    margin-bottom: 6px;
  }

  .section-assessment-process .down-cell img {
    width: 18%;
    transform: rotate(90deg);
    filter: brightness(0) saturate(100%);
    display: none;
  }

  .section-assessment-process .arrow-h img {
    width: 385%;
    filter: brightness(0) saturate(100%);
    display: none;
  }


}





/* =========================================================
   SCROLL REVEAL ANIMATION
========================================================= */

.reveal-element {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   BUTTON RIPPLE EFFECT
========================================================= */

button,
.explore,
.download,
.btn,
.button {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.4);

    transform: scale(0);

    animation: ripple-animation 0.6s linear;

    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .reveal-element {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html {
        scroll-behavior: auto !important;
    }

}

.hero {
    min-height: 760px;
    height: auto;
    padding: 150px 0 125px;
}

.container {
    width: 1200px;
    max-width: 92%;
    margin: auto;
}


/*=========================
BUTTONS
=========================*/

/* div.hero-buttons {
    display: flex;
    gap: 10px;
} */

.explore {
    background: linear-gradient(90deg, #642E86, #000000);
    color: white;
    padding: 21px 21px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.explore img {
    background-color: var(--white);
    border-radius: 50%;
    padding: 5px;
}

.download {
    background: none;
    color: white;
    padding: 30px 40px;
    border: 2px solid #fff;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-buttons {

    display: flex;

    gap: 18px;

    margin-top: 40px;

}

.primary-btn {

    display: flex;

    align-items: center;

    gap: 14px;

    background: linear-gradient(90deg, #642E86, #000000);

    color: #fff;

    padding: 18px 30px;

    border-radius: 60px;


    transition: .35s;

}

.primary-btn span {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #fff;

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: var(--sans);

}

.primary-btn:hover {

    transform: translateY(-4px);

}

.secondary-btn {

    display: flex;

    align-items: center;

    font-family: var(--sans);

    gap: 12px;

    border: 2px solid #ddd;

    color: #ffffff;

    padding: 18px 28px;

    border-radius: 60px;



    transition: .35s;

}



/*=========================
RIGHT IMAGE
=========================*/

.right-content {

    position: relative;

    display: flex;

    justify-content: center;

}

.right-content img {

    width: 95%;

    max-width: 650px;

}

/* Floating Background */

.hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;


    border-radius: 50%;

    right: -180px;

    top: -150px;

    filter: blur(20px);

    z-index: 0;

}

.hero::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    left: -180px;

    bottom: -180px;

    filter: blur(20px);

}


/* =========================================================
   ENSKOOL — FINAL CONTENT RESPONSIVE OVERRIDES
   Header + Footer are intentionally NOT modified.
   ========================================================= */

.hero {
    min-height: 760px;
    height: auto;
    padding: 150px 0 125px;
}



.hero {

    position: relative;
    overflow: hidden;
    background: url("../Images/Uss/background/main-bg.png") no-repeat center/cover;

}

/*=========================
HERO GRID
=========================*/

.hero-content {

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    font-family: "Delight";

}

/*=========================
LEFT CONTENT
=========================*/

.mini-title {
    /* display: inline-block; */
    letter-spacing: 4px;
    color: #ffffff87;
    font-family: "Delight";
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 10px;
    margin-bottom: 25px;
}

.left-content h1 {
    line-height: 1.1;
    font-family: Delight;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    color: #fff;





}

.script-font {

    color: var(--white);

    font-family: "Birthlong";

}

.left-content p {

    margin-top: 25px;

    font-size: 18px;

    line-height: 1.8;

    color: #c0c0c0;

    max-width: 520px;

}

/*=========================
BUTTONS
=========================*/

/* div.hero-buttons {
    display: flex;
    gap: 10px;
} */

.explore {
    background: linear-gradient(90deg, #642E86, #000000);
    color: white;
    padding: 21px 21px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.explore img {
    background-color: var(--white);
    border-radius: 50%;
    padding: 5px;
}

.download {
    background: none;
    color: white;
    padding: 30px 40px;
    border: 2px solid #fff;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-buttons {

    display: flex;

    gap: 18px;

    margin-top: 40px;

}

.primary-btn {

    display: flex;

    align-items: center;

    gap: 14px;

    background: linear-gradient(90deg, #642E86, #000000);

    color: #fff;

    padding: 18px 30px;

    border-radius: 60px;


    transition: .35s;

}

.primary-btn span {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #fff;

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

}

.primary-btn:hover {

    transform: translateY(-4px);

}

.secondary-btn {

    display: flex;

    align-items: center;

    gap: 12px;

    border: 2px solid #ddd;

    color: #ffffff;

    padding: 18px 28px;

    border-radius: 60px;



    transition: .35s;

}



/*=========================
RIGHT IMAGE
=========================*/

.right-content {

    position: relative;

    display: flex;

    justify-content: center;

}

.right-content img {

    width: 95%;

    max-width: 650px;

}

/* Floating Background */

.hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;


    border-radius: 50%;

    right: -180px;

    top: -150px;

    filter: blur(20px);

    z-index: 0;

}

.hero::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    left: -180px;

    bottom: -180px;

    filter: blur(20px);

}


/* =========================================================
   ENSKOOL — FINAL CONTENT RESPONSIVE OVERRIDES
   Header + Footer are intentionally NOT modified.
   ========================================================= */

.hero {
    min-height: 760px;
    height: auto;
    padding: 150px 0 125px;
}





/* RESPONSIVE — LARGE DESKTOP */
@media (max-width: 1600px) {
    .hero {
        padding-top: 130px;
    }

    .left-content h1 {
        font-size: 62px;
    }
}

/* RESPONSIVE — DESKTOP */
@media (max-width: 1400px) {
    .left-content h1 {
        font-size: 54px;
    }

    .hero-content {
        gap: 30px;
    }
}

/* RESPONSIVE — LAPTOP */
@media (max-width: 1200px) {
    .left-content h1 {
        font-size: 52px;
    }

    .left-content p {
        font-size: 17px;
    }
}

/* RESPONSIVE — SMALL LAPTOP */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .left-content p {
        margin: auto;
        margin-top: 25px;
    }

    .hero-buttons {
        justify-content: center;
    }
}

/* RESPONSIVE — TABLET */
@media (max-width: 992px) {
    .hero {
        padding-top: 120px;
    }

    .left-content h1 {
        font-size: 46px;
    }
}

/* RESPONSIVE — TABLET / MOBILE */
@media (max-width: 768px) {
    .hero {
        padding-bottom: 80px;
        height: 100vh;
        background-position: 75% 50%;
        
        
    }

    .left-content h1 {
        font-size: 40px;
    }

    .left-content p {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        display: flex;
        gap: 20px;
        margin-top: 45px;
    }
}

/* RESPONSIVE — LARGE MOBILE */
@media (max-width: 576px) {
    .hero {
        padding-top: 100px;
        height: 100vh;
        background-position: 75% 50%;
        
        
    }

    .left-content h1 {
        font-size: 34px;
    }

    .mini-title {
        font-size: 11px;
        padding: 8px 15px;
    }

    .left-content p {
        font-size: 15px;
    }

    .hero-buttons {
        display: flex;
        gap: 18px;
        margin-top: 40px;
    }
}

/* RESPONSIVE — MOBILE */
@media (max-width: 480px) {
    .hero {
        padding-top: 130px;
        height: 100vh;
        background-position: 75% 50%;
        
        
    }

    .left-content h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .left-content p {
        line-height: 1.7;
    }

    .hero-buttons {
        gap: 15px;
    }
}

/* RESPONSIVE — SMALL MOBILE */
@media (max-width: 360px) {
    .hero {
        padding-top: 90px;
        height: 100vh;
        background-position: 75% 50%;
        
        
    }

    .mini-title {
        display: inline-block;
        color: #ffffff87;
        font-family: "Delight";
        padding: 10px 18px;
        border-radius: 50px;
        font-size: 10px;
        font-weight: 600;
        margin-bottom: 0;
    }

    .hero-buttons {

        display: flex;
        gap: 15px;
        margin-top: 70px;
    }

    .left-content h1 {
        font-size: 24px;
    }

    .left-content p {
        font-size: 12px;
        margin-top: 3px;
    }
}


@media (max-width: 480px) {
    .secondary-btn {
        font-size: 14px;
        padding: 4px 31px;
    }
}