body.pedagogy-page header .black-logo {
  display: none;
}

.offcanvas-menu label span,
.offcanvas-menu label span::before,
.offcanvas-menu label span::after {
  background: #fff;
}

/* hero section start */
.pedagogy-page {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pedagogy-page::-webkit-scrollbar {
  display: none;
}

.pedagogy-page .pedagogy-hero-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 540px;
  background: #0a3d9c;
  z-index: 2;
  /* overflow hidden clips the expanding circle */
  overflow: hidden;
}

.pedagogy-page .campus-section {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  transform: translateZ(0);
}

/* Full-bleed background image */
.pedagogy-page .campus-section .img-full {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform, opacity;
  transform: translateZ(0);
}

.pedagogy-page .campus-section .img-full::after {
  /* content: ""; */
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(8, 31, 82, 0.22) 0%,
      rgba(8, 31, 82, 0.05) 38%,
      rgba(8, 31, 82, 0) 65%);
  z-index: 1;
}

.pedagogy-page .campus-section .img-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
  display: block;
}

.pedagogy-page .campus-section .panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: min(50vw, 780px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  pointer-events: none;
  top: 0;
  bottom: 0;
  height: 100vh;
}

.pedagogy-page .campus-section .half-circle {
  will-change: transform, opacity;
  backface-visibility: hidden;
  position: absolute;
  top: 73%;
  /* left: -32%; */
  left: -27%;
  width: 2165px;
  height: 2165px;
  border-radius: 50%;
  background: #0a43a4;
  transform: translateY(-50%);
  transform-origin: center center;
  z-index: 1;
  box-shadow: 0 0 120px rgba(10, 67, 164, 0.22);
}

.pedagogy-page .campus-section .body-txt {
  width: 80%;
  position: relative;
  z-index: 5;
  max-width: min(32vw, 550px);
  margin: 0 0 0 5vw;
  display: flex;
  flex-direction: column;
  gap: 47.9px;
  pointer-events: auto;
  top: 3%;
}

.pedagogy-page .campus-section .panel-title,
.pedagogy-page .campus-section .panel-body {
  will-change: transform, opacity;
  color: #fff;
  opacity: 0;
  visibility: hidden;
}

.pedagogy-page .campus-section .panel-title {
  font-family: Satoshi;
  font-size: 2.3em;
  line-height: 112%;
  font-weight: 700;
}

.pedagogy-page .campus-section .panel-body {
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  line-height: 154%;
  color: rgba(255, 255, 255, 0.84);
}

.pedagogy-page .pedagogy-hero-stage {
  display: block;
}

.mob-campus-section {
  display: none;
}

@media (max-width: 1650px) {
  .pedagogy-page .campus-section .half-circle {
    top: 81%;
    left: -45%;
  }
}

@media (max-width: 1366px) {
  .pedagogy-page .campus-section .half-circle {
    top: 95%;
    left: -54%;
  }
}

@media (max-width: 1280px) {
  .pedagogy-page .campus-section .body-txt {
    gap: 37.9px;
  }

  .pedagogy-page .campus-section .half-circle {
    top: 93%;
    left: -62%;
  }
}

@media (max-width: 1200px) {
  .pedagogy-page .campus-section .half-circle {
    left: -92%;
    top: 86%;
  }
}

@media (max-width: 1023px) {
  .pedagogy-page .campus-section .half-circle {
    left: -100%;
  }
}

@media (max-width: 991.98px) {
  .pedagogy-page .campus-section .half-circle {
    left: -80%;
    width: 1865px;
    height: 1865px;
    top: 81%;
  }
}

@media (max-width: 767px) {
  .pedagogy-page .pedagogy-hero-stage {
    display: none;
  }

  .mob-campus-section {
    display: block;
    height: 100vh;
  }

  .mob-campus-section .img-full {
    position: relative;
    top: -47px;
  }

  .half-circle {
    width: 701px;
    height: 681px;
    border-radius: 50%;
    background: #0a3d9c;
    margin: -140px;
    z-index: 0;
    position: absolute;
  }

  .mob-campus-section .body-txt {
    z-index: 1;
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 40px;
    margin-top: -50px;
  }

  .mob-campus-section .panel-title {
    color: #fff;
    font-family: Satoshi;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 115%;
    padding-bottom: 72px;
  }

  .mob-campus-section .panel-body {
    color: #fff;
    font-family: Poppins;
    font-size: 14.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.145px;
  }

  .pedagogy-page .campus-section .img-full img {
    height: 70%;
    object-position: 100%;
  }

  .pedagogy-page .campus-section .panel {
    width: 100%;
    display: unset;
  }

  .pedagogy-page .campus-section .half-circle {
    left: 50%;
    width: 1021px;
    height: 821px;
    top: 52%;
    transform: translateX(-50%);
  }

  .pedagogy-page .campus-section .body-txt {
    display: flex;
    position: absolute;
    bottom: 70px;
    left: 0;
    width: unset;
    max-width: unset;
    margin: 0 30px;
  }

  .pedagogy-page .campus-section .panel-title br {
    display: none;
  }

  .pedagogy-page .campus-section .panel-title {
    width: 80%;
  }

  .mob-pedagogy-section {
    background: #0a3d9c;
    min-height: 100vh;
    padding: 100px 20px;
    margin-top: 150px;
    z-index: 22;
    position: relative;
  }

  .mob-pedagogy-section h2 {
    color: #fff;
    text-align: center;
    font-family: Satoshi;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 118%;
    padding-bottom: 76px;
  }

  .circle-card {
    width: 335px;
    height: 335px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 35px;
  }

  .circle-content h3 {
    color: #000;
    text-align: center;

    /* Mob 4 */
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    /* 25.2px */
    padding-bottom: 23px;
  }

  .mob-pedagogy-section .d-flex {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .circle-content p {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 19.5px */
  }

  .orange {
    background: #fc8b5f;
  }

  .yellow {
    background: #ffea2c;
  }

  .purple {
    background: #beacff;
  }
}

@media (max-width: 576px) {
  .pedagogy-page .campus-section .img-full img {
    height: 60%;
    object-position: 89%;
  }

  .pedagogy-page .campus-section .panel {
    width: 100%;
    display: unset;
  }

  .pedagogy-page .campus-section .half-circle {
    width: 721px;
    height: 721px;
  }

  .pedagogy-page .campus-section .body-txt {
    display: unset;
  }

  .pedagogy-page .campus-section .panel-title {
    width: 100%;
    padding-bottom: 42px;
  }

  .pedagogy-page .campus-section .panel-title br {
    display: block;
  }
}

/* hero section end */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DIAGRAM SECTION — hidden until scroll phase 2
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pedagogy-page section.diagram-sec {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #1a49a8;
  z-index: 3;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* JS controls visibility */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, visibility;
  transform: translateZ(0);
}

.pedagogy-page section.diagram-sec .container-xxl {
  width: 100%;
  position: relative;
}

.diagram-layout {
  position: relative;
  width: min(100%, 1728px);
  min-height: 760px;
  margin: -10% auto 0 auto;
}

.diagram-sec .orbit-stage {
  position: absolute;
  inset: 0;
}

.diagram-sec .center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 230px;
  height: 230px;
  background: #ded5ff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #111;
  font-family: "Satoshi", sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 119%;
  z-index: 2;
}

.diagram-sec .orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 546px;
  height: 546px;
  border: 3px dotted #ff8a5b;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.95;
}

.diagram-sec .node {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #ff8a5b;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  will-change: width, height, opacity;
  backface-visibility: hidden;
}

.diagram-sec .node.big {
  width: 74px;
  height: 74px;
}

.diagram-sec .node1 {
  top: 22.3%;
  left: 39.6%;
}

.diagram-sec .node2 {
  top: 22.3%;
  left: 60.4%;
}

.diagram-sec .node3 {
  top: 50%;
  left: 66.5%;
}

.diagram-sec .node4 {
  /* top: 78.2%; */
  /* left: 64.6%; */
  top: 75.2%;
  left: 61.6%;
}

.diagram-sec .node5 {
  top: 85.7%;
  left: 50%;
}

.diagram-sec .node6 {
  top: 50%;
  left: 33.5%;
}

.diagram-sec .node7 {
  /* top: 78.2%;
  left: 35.4%; */
  top: 75.2%;
  left: 38.3%;
}

.diagram-sec .label {
  position: absolute;
  color: #fff;
  font-family: "Poppins", sans-serif;
  will-change: opacity, transform;
}

.diagram-sec .label strong {
  display: block;
  margin-bottom: 16px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.diagram-sec .label .strong {
  color: #fff;
  text-align: center;
  font-family: Poppins;
  font-size: 1.15em;
  font-style: normal;
  font-weight: 600;
  line-height: 136%;
  letter-spacing: 0.24px;
  padding-bottom: 10px;
}

.diagram-sec .label p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.8em;
  line-height: 154%;
  font-weight: 400;
}

.diagram-sec .label.top {
  top: 8%;
  left: 18%;
  width: 17%;
  text-align: center;
}

.diagram-sec .label.right-top {
  top: 8%;
  right: 16%;
  width: 19%;
  text-align: center;
}

.diagram-sec .label.right-mid {
  top: 51.5%;
  right: 6%;
  width: 24%;
  transform: translateY(-50%);
  text-align: center;
}

.diagram-sec .label.bottom {
  right: 15%;
  bottom: 0%;
  width: 21%;
  text-align: center;
}

.diagram-sec .label.left-bottom {
  bottom: -14%;
  left: 39%;
  width: 23%;
  text-align: center;
}

.diagram-sec .label.left-lower {
  top: 76%;
  left: 10%;
  width: 22%;
  text-align: center;
}

.diagram-sec .label.left-mid {
  top: 50%;
  left: 6%;
  width: 22%;
  text-align: center;
  transform: translateY(-50%);
}

.diagram-tab {
  display: none;
}

@media (max-width: 1728px) {
  .diagram-sec .node1 {
    top: 14.5%;
    left: 38.6%;
  }

  .diagram-sec .node2 {
    top: 14.5%;
    left: 64.2%;
  }

  .diagram-sec .node3 {
    left: 71.8%;
  }

  .diagram-sec .node4 {
    left: 66%;
  }

  .diagram-sec .node6 {
    left: 28%;
  }

  .diagram-sec .node7 {
    left: 33.9%;
  }

  .diagram-sec .label.right-mid {
    top: 48.5%;
    right: -2%;
  }

  .diagram-sec .label.left-mid {
    top: 41.5%;
    left: 2%;
  }
}

@media (max-width: 1650px) {
  .diagram-sec .orbit {
    width: 630px;
    height: 630px;
  }

  .diagram-sec .node1 {
    left: 38%;
  }

  .diagram-sec .node2 {
    left: 61.7%;
  }

  .diagram-sec .node3 {
    left: 72.7%;
  }

  .diagram-sec .node4 {
    left: 65.5%;
    top: 80.2%;
  }

  .diagram-sec .node5 {
    top: 91.2%;
  }

  .diagram-sec .node6 {
    left: 27.3%;
  }

  .diagram-sec .node7 {
    left: 34.6%;
    top: 80.2%;
  }

  .diagram-sec .label.top {
    top: 6%;
    left: 10%;
  }

  .diagram-sec .label.right-top {
    top: 8%;
    right: 9%;
  }

  .diagram-sec .label.right-mid {
    top: 46.5%;
    right: -2%;
  }

  .diagram-sec .label.left-mid {
    left: -1%;
    top: 45.5%;
  }

  .diagram-sec .label.left-bottom {
    bottom: -20%;
  }

  .diagram-sec .label.bottom {
    right: 10%;
    bottom: 3%;
  }
}

@media (max-width: 1440px) {
  .diagram-sec .orbit {
    width: 636px;
    height: 636px;
  }

  .diagram-sec .label .strong {
    padding-bottom: 10px;
  }

  .diagram-sec .center {
    width: 200px;
    height: 200px;
  }

  .diagram-sec .node1 {
    left: 36%;
  }

  .diagram-sec .node2 {
    left: 63.7%;
  }

  .diagram-sec .node3 {
    left: 76.4%;
    top: 50%;
  }

  .diagram-sec .node4 {
    left: 68.5%;
    top: 80%;
  }

  .diagram-sec .node5 {
    top: 91.7%;
  }

  .diagram-sec .node6 {
    left: 23.5%;
    top: 50%;
  }

  .diagram-sec .node7 {
    left: 32%;
  }

  .diagram-sec .label.right-top {
    right: 7%;
  }

  .diagram-sec .label.left-lower {
    left: 8%;
  }

  .diagram-sec .label.bottom {
    right: 8%;
  }

  .diagram-sec .label.left-bottom {
    bottom: -16%;
  }

  .diagram-sec .label.left-mid {
    left: -4%;
  }

  .diagram-sec .label.right-mid {
    top: 48.5%;
    right: -5%;
  }
}

@media (max-width: 1366px) {
  .diagram-sec .orbit {
    width: 500px;
    height: 500px;
  }

  .diagram-sec .node1 {
    top: 22.5%;
    left: 38%;
  }

  .diagram-sec .node2 {
    top: 22.5%;
    left: 61.7%;
  }

  .diagram-sec .node3 {
    left: 71.8%;
    top: 50%;
  }

  .diagram-sec .node4 {
    top: 72.2%;
    left: 65.9%;
  }

  .diagram-sec .node5 {
    top: 82.6%;
  }

  .diagram-sec .node6 {
    left: 28%;
    top: 50%;
  }

  .diagram-sec .node7 {
    top: 72.2%;
    left: 34%;
  }

  .diagram-sec .label.top {
    top: 13%;
    left: 12%;
  }

  .diagram-sec .label.right-top {
    top: 13%;
    right: 10%;
  }

  .diagram-sec .label.right-mid {
    width: 22%;
    right: 2%;
  }

  .diagram-sec .label.bottom {
    right: 8%;
    bottom: 14%;
    width: 23%;
  }

  .diagram-sec .label.left-bottom {
    bottom: -6%;
  }

  .diagram-sec .label.left-lower {
    top: 70%;
  }

  .diagram-sec .label.left-mid {
    top: 45%;
    left: 0%;
  }

  .diagram-sec .label.right-mid {
    top: 50%;
  }

  .diagram-sec .label .strong {
    padding-bottom: 12px;
  }
}

@media (max-width: 1280px) {
  .diagram-sec .center {
    width: 180px;
    height: 180px;
  }

  .diagram-sec .node1 {
    top: 21.7%;
  }

  .diagram-sec .node2 {
    left: 62.7%;
  }

  .diagram-sec .node3 {
    left: 73.5%;
  }

  .diagram-sec .node4 {
    top: 71.2%;
    left: 67.6%;
  }

  .diagram-sec .node6 {
    left: 26.5%;
  }

  .diagram-sec .node7 {
    left: 33%;
  }

  .diagram-sec .label.right-mid {
    top: 44%;
    right: 0%;
  }

  .diagram-sec .label.bottom {
    right: 5%;
    bottom: 16%;
  }

  .diagram-sec .label.left-bottom {
    bottom: -5%;
  }

  .diagram-sec .label.left-mid {
    left: 0%;
  }

  .diagram-sec .label.right-top {
    right: 9%;
  }
}

@media (max-width: 1200px) {
  .diagram-sec .node3 {
    left: 74%;
  }

  .diagram-sec .node4 {
    left: 68.3%;
  }

  .diagram-sec .node6 {
    left: 26%;
  }

  .diagram-sec .node7 {
    left: 32.4%;
  }
}

@media (max-width: 1023px) {
  .diagram-sec {
    display: none !important;
  }

  .diagram-tab {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    overflow: hidden;
    background: #0a43a4;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .diagram-tab .title-txt {
    color: #fff;
    text-align: center;
    font-family: Satoshi;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 118%;
    position: absolute;
    top: clamp(58px, 10vh, 96px);
    left: 50%;
    transform: translateX(-50%);
    width: min(86vw, 560px);
  }

  .diagram-tab .circle-card .content {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .diagram-tab .circle-card {
    width: min(467px, 82vw);
    height: min(467px, 82vw);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: clamp(28px, 6vw, 40px);
    margin: 0;
    box-sizing: border-box;
  }

  .diagram-tab .card-title {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
  }

  .diagram-tab p {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 19.5px */
  }

  .diagram-tab .orange {
    background: #fc8b5f;
  }

  .diagram-tab .yellow {
    background: #ffea2c;
  }

  .diagram-tab .purple {
    background: #beacff;
  }
}

@media (max-width: 767px) {
  .diagram-tab .circle-card {
    width: 335px;
    height: 335px;
  }
}

/* Diagram section css End */

.tabbing-sec {
  padding: 0 0 178px;
  position: relative;
  z-index: 10;
  background: #fff;
}

/* The previous negative margin code was removed because we are using pinSpacing: false in GSAP and manually adding spacers to handle the overlap */

.tabbing-sec .tabs-sticky-bar {
  background: #ffffff;
  width: 100%;
  padding: 22px 0 18px;
}

/* Sticky tabs wrapper */
.tabbing-sec .tabs-container {
  position: relative;
  padding-top: 4em;
}

.tabbing-sec .tabs {
  display: flex;
  gap: 80px;
  justify-content: center;
}

.tabbing-sec h2.title-txt {
  color: #0a3d9c;
  text-align: center;
  font-family: Satoshi;
  font-size: 2.3em;
  font-weight: 700;
  line-height: 112%;
  padding-bottom: 128px;
  width: 63%;
  margin: 0 auto !important;
}

#primary h2.title-txt,
#secondary h2.title-txt {
  width: 48%;
}

.tabbing-sec .tab {
  background: none;
  border: none;
  position: relative;
  transition: color 0.3s ease;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 154%;
}

.tabbing-sec .tab br {
  display: none;
}

.tabbing-sec .tab:hover {
  color: #000;
}

.tabbing-sec .tab.active {
  color: #000;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #fc8b5f;
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
}

.tabbing-sec .tab-content {
  display: none;
  padding: 128px 0 0;
}

.tabbing-sec .tab-content.active {
  display: block;
}

.tabbing-sec h5.sub-title {
  color: #000;
  text-align: center;
  font-family: Satoshi;
  font-size: 1.4em;
  font-style: normal;
  font-weight: 700;
  line-height: 119%;
  padding-bottom: 22px;
}

.tabbing-sec .section-grid {
  display: grid;
  gap: 90px;
  margin: auto;
  width: 80%;
}

.tabbing-sec .feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 104px;
  align-items: center;
}

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

.tabbing-sec .text-block {
  display: flex;
  flex-direction: column;
  gap: 4em;
  width: 90%;
}

.tabbing-sec .feature {
  display: flex;
  gap: 36.44px;
}

.tabbing-sec .feature-block>*:nth-child(1) {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.tabbing-sec .feature-block>*:nth-child(2) {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
  will-change: opacity, transform;
}

.tabbing-sec .feature-block.fb-visible>*:nth-child(1),
.tabbing-sec .feature-block.fb-visible>*:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
}

.tabbing-sec .feature-title {
  display: flex;
  align-items: flex-start;
  gap: 36.44px;
  color: #0a3d9c;
  font-family: Satoshi;
  font-size: 1.4em;
  font-style: normal;
  font-weight: 700;
  line-height: 119%;
}

.tabbing-sec .feature-title svg {
  flex-shrink: 0;
}

.tabbing-sec .feature p {
  color: #000;
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 154%;
  width: 90%;
}

.tabbing-sec .tab-items {
  margin-bottom: 50px;
}

#playtrails .feature-block:first-child .img-block,
#playtrails .feature-block:last-child .img-block,
#primary .feature-block:first-child .img-block,
#primary .feature-block:last-child .img-block,
#secondary .feature-block:nth-child(2) .img-block,
#secondary .feature-block:nth-child(3) .img-block {
  position: relative;
}

#playtrails .feature-block:first-child .img-block:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90px;
  height: 25px;
  background-color: #fc8b5f;
  animation: bounceLeftRight 2.5s ease-in-out infinite alternate;
}

#playtrails .feature-block:first-child .img-block:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 90px;
  width: 90px;
  height: 25px;
  background-color: #beacff;
}

#playtrails .feature-block:last-child .img-block:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 90px;
  width: 90px;
  height: 25px;
  background-color: #ffea2c;
}

#playtrails .feature-block:last-child .img-block:before {
  content: "";
  position: absolute;
  bottom: -24px;
  right: 0;
  width: 90px;
  height: 25px;
  background-color: #fc8b5f;
}

#primary .feature-block:first-child .img-block:after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 90px;
  width: 90px;
  height: 25px;
  background-color: #beacff;
}

#primary .feature-block:first-child .img-block:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90px;
  height: 25px;
  background-color: #fc8b5f;
  animation: bounceLeftRight 2.5s ease-in-out infinite alternate;
}

#primary .feature-block:last-child .img-block:after {
  content: "";
  position: absolute;
  bottom: -24px;
  right: 0;
  width: 90px;
  height: 25px;
  background-color: #fc8b5f;
}

#primary .feature-block:last-child .img-block:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 90px;
  width: 90px;
  height: 25px;
  background-color: #ffea2c;
}

#secondary .feature-block:nth-child(1) .img-block:after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 90px;
  width: 90px;
  height: 25px;
  background-color: #beacff;
}

#secondary .feature-block:nth-child(1) .img-block:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90px;
  height: 25px;
  background-color: #fc8b5f;
  animation: bounceLeftRight 2.5s ease-in-out infinite alternate;
}

#secondary .feature-block:nth-child(3) .img-block:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 90px;
  width: 90px;
  height: 25px;
  background-color: #ffea2c;
}

#secondary .feature-block:nth-child(3) .img-block:before {
  content: "";
  position: absolute;
  bottom: -24px;
  right: 0;
  width: 90px;
  height: 25px;
  background-color: #fc8b5f;
}

@media (max-width: 1728px) {
  .tabbing-sec .tabs-container {
    padding-top: 4em;
  }

  .tabbing-sec .feature-block {
    gap: 84px;
  }

  .tabbing-sec .tab-content {
    padding: 120px 0 0;
  }

  .tabbing-sec .yellow-box {
    padding: 37px 83px 39.93px 84px;
  }

  .tabbing-sec h2.title-txt {
    padding-bottom: 100px;
  }

  .tabbing-sec .text-block {
    gap: 95px;
  }
}

@media (max-width: 1650px) {
  .tabbing-sec .tab-content {
    padding: 100px 0 0;
  }

  .tabbing-sec h2.title-txt {
    padding-bottom: 80px;
  }
}

@media (max-width: 1440px) {
  .tabbing-sec .feature-title {
    width: 90%;
    align-items: center;
  }

  #primary .feature-block:first-child .img-block:after {
    width: 171px;
    height: 20px;
  }

  #primary .feature-block:first-child .img-block:before {
    bottom: -19px;
    right: 171px;
    width: 87px;
    height: 20px;
  }

  #primary .feature-block:last-child .img-block:before {
    top: -19px;
    left: -148px;
    width: 148px;
    height: 20px;
  }

  #primary .feature-block:last-child .img-block:after {
    width: 94px;
    height: 20px;
  }
}

@media (max-width: 1366px) {
  .tabbing-sec .feature-title {
    gap: 26.44px;
  }

  #primary .feature p,
  #secondary .feature p {
    padding-left: 75px;
  }

  .tabbing-sec .feature p {
    width: 86%;
  }
}

@media (max-width: 1280px) {
  .tabbing-sec .tab-content {
    padding: 50px 0 0;
  }

  .tabbing-sec h2.title-txt {
    padding-bottom: 77px;
  }

  .tabbing-sec .section-grid {
    gap: 70px;
  }

  .tabbing-sec .feature-block {
    gap: 84px;
  }

  .tabbing-sec .text-block {
    gap: 85px;
  }
}

@media (max-width: 1023px) {
  .tabbing-sec .feature-block {
    gap: 64px;
  }

  .tabbing-sec .feature-title,
  .tabbing-sec .feature:nth-child(2) .feature-title,
  .tabbing-sec .feature p {
    width: 100%;
  }

  .tabbing-sec .feature {
    gap: 15px;
  }

  .tabbing-sec .text-block {
    gap: 60px;
  }

  #playtrails .feature-block:first-child .img-block:after,
  #playtrails .feature-block:first-child .img-block:before,
  #playtrails .feature-block:last-child .img-block:before,
  #playtrails .feature-block:last-child .img-block:after,
  #primary .feature-block:last-child .img-block:before,
  #primary .feature-block:last-child .img-block:after,
  #primary .feature-block:first-child .img-block:after,
  #primary .feature-block:first-child .img-block:before,
  #secondary .feature-block:nth-child(2) .img-block:before,
  #secondary .feature-block:nth-child(2) .img-block:after,
  #secondary .feature-block:nth-child(3) .img-block:before,
  #secondary .feature-block:nth-child(3) .img-block:after {
    display: none;
  }

  #primary h2.title-txt,
  #secondary h2.title-txt {
    width: 50%;
  }
}

@media (max-width: 991px) {

  #primary h2.title-txt,
  #secondary h2.title-txt {
    width: 65%;
  }

  .tabbing-sec .tabs {
    gap: 60px;
  }

  .tabbing-sec h2.title-txt {
    width: 100%;
    padding-bottom: 57px;
  }

  .tabbing-sec .feature-block {
    gap: 20px;
  }

  .tabbing-sec .feature-title svg .tabbing-sec .feature-block {
    gap: 20px;
  }

  #primary .feature p,
  #secondary .feature p {
    padding-left: 45px;
  }
}

@media (max-width: 767px) {
  .tabbing-sec {
    padding: 49px 0 107px;
  }

  #secondary .feature-block:nth-child(1) .img-block:before,
  #secondary .feature-block:nth-child(1) .img-block:after {
    display: none;
  }

  #primary .text-block .feature-title,
  #secondary .text-block .feature-title {
    width: 13px;
  }

  #primary .feature-block:nth-child(2) .text-block,
  #secondary .feature-block:nth-child(2) .text-block {
    order: 2;
  }

  #primary .feature-block:nth-child(2) .img-block,
  #secondary .feature-block:nth-child(2) .img-block {
    order: 1;
  }

  #primary .feature p,
  #secondary .feature p {
    padding-left: 0;
  }

  .tabbing-sec .text-block {
    gap: 30px;
  }

  .tabbing-sec .feature-title svg {
    width: 12.007px;
    height: 24.013px;
  }

  .tabbing-sec .tabs-container {
    padding-top: 50px;
  }

  .tabbing-sec .tab {
    text-align: center;
    font-size: 13px;
    line-height: 140%;
  }

  .tabbing-sec .tab br {
    display: block;
  }

  .tabbing-sec .tab.active {
    text-decoration: none;
    position: relative;
  }

  .tabbing-sec .tabs {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    justify-content: space-between;
  }

  .tabbing-sec .tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 134.333px;
    height: 5px;
    background-color: #fc8b5f;
  }

  .tabbing-sec .section-grid {
    width: 100%;
  }

  .tabbing-sec .tab-content {
    padding: 79px 0 0;
  }

  .tabbing-sec h2.title-txt {
    font-size: 26px;
    line-height: 115%;
    padding-bottom: 60px;
  }

  .tabbing-sec .feature-block {
    grid-template-columns: 1fr;
  }

  .tabbing-sec .feature-block {
    gap: 67px;
  }

  .tabbing-sec .feature-block>*:nth-child(1),
  .tabbing-sec .feature-block>*:nth-child(2) {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .tabbing-sec .feature p {
    font-size: 15px;
    font-weight: 500;
    line-height: 160%;
  }

  .tabbing-sec .feature-title {
    gap: 21.99px;
    align-items: flex-start;
  }

  .tabbing-sec #playtrails .feature-title svg {
    width: 12.007px;
    height: 24.013px;
  }

  #primary h2.title-txt,
  #secondary h2.title-txt {
    width: 100%;
  }

  #primary .text-block .feature:nth-child(2),
  #secondary .text-block .feature:nth-child(2) {
    margin-left: 0;
  }

  .tabbing-sec #playtrails .feature-block:nth-child(2) .img-block,
  .tabbing-sec #primary .feature-block:nth-child(2) .img-block,
  .tabbing-sec #primary .feature-block:nth-child(4) .img-block,
  .tabbing-sec #secondary .feature-block:nth-child(1) .img-block,
  .tabbing-sec #secondary .feature-block:nth-child(3) .img-block {
    order: 1;
  }

  .tabbing-sec #playtrails .feature-block:nth-child(2) .text-block,
  .tabbing-sec #primary .feature-block:nth-child(2) .feature,
  .tabbing-sec #primary .feature-block:nth-child(4) .text-block,
  .tabbing-sec #secondary .feature-block:nth-child(1) .text-block,
  .tabbing-sec #secondary .feature-block:nth-child(3) .text-block {
    order: 2;
  }
}

@media (max-width: 576px) {
  .tabbing-sec .tabs {
    gap: 0;
  }
}

/* tabbing section css End */

/* extra section css Start */
.extra-section {
  background: #0a3d9c;
  padding: clamp(32px, 5vh, 56px) 0 42px;
  position: relative;
  /* height fixed so pin works cleanly */
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.extra-bg-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blue-circle {
  position: absolute;
  bottom: 0;
  right: -55vw;
  width: clamp(780px, 120vw, 2665px);
  height: clamp(390px, 60vw, 2665px);
  background: #09439f;
  border-radius: 1500px 1500px 0 0;
  z-index: 0;
  transform-origin: bottom right;
}

.text-content {
  max-width: 53%;
  margin-bottom: 105px;
  z-index: 1;
  position: relative;
}

.text-content h2 {
  color: #fff;
  font-family: Satoshi;
  font-size: 2.3em;
  font-style: normal;
  font-weight: 700;
  line-height: 112%;
}

.text-content p {
  color: #fff;
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 154%;
}

/* Extra Section — GSAP Horizontal Scroll */
.extra-horizontal {
  position: relative;
  overflow: hidden;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  min-height: 0;
  padding-bottom: 0;
  padding-left: calc(7.1vw + 0px);
  z-index: 1;
}

.extra-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  will-change: transform;
}

.extra-slide {
  flex: 0 0 min(100vw, 1612px);
  position: relative;
  box-sizing: border-box;
}

.extra-section .card {
  position: relative;
  border: none;
  outline: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(420px, 48%) 1fr;
  align-items: stretch;
  gap: clamp(34px, 4vw, 72px);
  background: transparent;
  overflow: visible;
}

.extra-section .card img {
  width: 100%;
  height: clamp(300px, calc(100svh - 300px), 520px);
  object-fit: cover;
  display: block;
}

.extra-section .card-label {
  position: static;
  width: min(510px, 100%);
  padding: 0;
  align-self: center;
  background: transparent;
}

.extra-section .card-label h3 {
  color: #fff;
  font-family: Poppins;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 150%;
}

.extra-section .card-label p {
  color: rgba(255, 255, 255, 0.78);
  font-family: Poppins;
  font-size: clamp(0.88rem, 0.9vw, 1rem);
  font-weight: 400;
  line-height: 154%;
  padding-top: 14px;
  display: none;
}

.extra-section .orange {
  background: transparent;
}

.extra-section .yellow {
  background: transparent;
}

.extra-slide:nth-child(odd) .card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90px;
  height: 25px;
  background: #ffea2c;
}

.extra-slide:nth-child(odd) .card::before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 90px;
  width: 90px;
  height: 25px;
  background: #fc8b5f;
}

.extra-slide:nth-child(even) .card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 25px;
  background: #beacff;
}

.extra-slide:nth-child(even) .card::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 90px;
  width: 90px;
  height: 25px;
  background: #fc8b5f;
}

@media (max-width: 1728px) {
  .text-content {
    margin-bottom: 90px;
  }
}

@media (max-width: 1280px) {
  .extra-section .card {
    grid-template-columns: minmax(420px, 46%) 1fr;
    gap: clamp(34px, 3vw, 72px);
  }
}

@media (max-width: 1200px) {
  .extra-horizontal {
    padding-left: calc(6.5vw + 20px);
  }

  .extra-section .card-label {
    width: min(420px, 100%);
  }

  .text-content {
    max-width: 62%;
  }
}

@media (max-width: 1023px) {
  .extra-section .card {
    grid-template-columns: minmax(420px, 53%) 1fr;
  }

  .extra-section .card-label {
    width: min(300px, 100%);
  }

  .text-content {
    max-width: 64%;
  }
}

@media (max-width: 991.98px) {
  .extra-section {
    height: auto;
    min-height: 0;
    padding: 74px 0 88px;
    justify-content: flex-start;
    overflow: visible;
  }

  .extra-bg-clip {
    display: none;
  }

  .text-content {
    max-width: 100%;
    margin: 0 0 94px;
  }

  .text-content h2 {
    font-size: 32px;
    line-height: 114%;
  }

  .extra-horizontal {
    padding: 0 39px;
    overflow: visible;
    display: block;
    width: auto;
  }

  .extra-track {
    display: flex;
    flex-direction: column;
    gap: 73px;
    transform: none !important;
    width: 100%;
  }

  .extra-slide {
    width: 100% !important;
    flex: none;
    margin: 0 !important;
    transform: none !important;
  }

  .extra-section .card {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
  }

  .extra-section .card img {
    height: auto;
    aspect-ratio: 1.08 / 1;
    object-fit: cover;
  }

  .extra-section .card-label,
  .extra-section .orange,
  .extra-section .yellow {
    width: 100%;
    padding: 27px 25px 26px 20px;
    background: #ffea2c;
  }

  .extra-slide:nth-child(even) .card-label {
    background: #beacff;
  }

  .extra-slide:nth-child(odd) .card-label {
    background: #fc8b5f;
  }

  .extra-section .card-label h3 {
    color: #000;
    font-size: 13px;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: 0.13px;
  }

  .extra-slide .card::before,
  .extra-slide .card::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .text-content h2 {
    font-size: 28px;
    line-height: 118%;
  }

  .extra-section {
    padding: 91px 0;
  }

  .extra-slider-clip {
    padding: 0px 40px;
  }
}

/* extra section css End */

/* AYM section css Start */
.aym-section {
  display: flex;
  align-items: center;
  padding: 196.88px 0 209px;
}

.aym-img-col:before {
  content: "";
  position: absolute;
  top: -32px;
  left: 0;
  width: 86px;
  height: 32px;
  background: #a793ec;
}

.aym-img-col:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 86px;
  width: 160px;
  height: 32px;
  background: #ff7f50;
}

.aym-img-col {
  flex: 0 0 50%;
  position: relative;
}

.aym-text {
  padding: 0 100px 0 122.98px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.aym-text h2 {
  color: #0a3d9c;
  font-family: Satoshi;
  font-size: 2.2em;
  font-weight: 700;
  line-height: 125%;
}

.mob-aym-section-title {
  display: none;
}

.aym-text p {
  color: #000;
  font-family: Poppins;
  font-size: 1rem;
  font-weight: 400;
  line-height: 154%;
}

@media (max-width: 1728px) {
  .aym-section {
    padding: 156.88px 0 169px;
  }
}

@media (max-width: 1650px) {
  .aym-section {
    padding: 100px 0 113px;
  }
}

@media (max-width: 1200px) {
  .aym-section {
    padding: 100px 0 100px;
  }

  .aym-text {
    padding: 0 84px 0 84px;
    gap: 30px;
  }
}

@media (max-width: 1023px) {
  .aym-section {
    padding: 80px 0 0px;
  }

  .aym-img-col:before {
    top: -22px;
    width: 76px;
    height: 22px;
  }

  .aym-img-col:after {
    left: 76px;
    width: 150px;
    height: 22px;
  }

  .aym-text {
    padding: 0 61px 0 71px;
  }
}

@media (max-width: 991px) {
  .aym-section {
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
  }

  .mob-aym-section-title {
    display: block !important;
    margin: 0 auto 69px 0;
    width: 94%;
  }

  .mob-aym-section-title h2 {
    color: #0a3d9c;
    font-family: Satoshi;
    font-size: 28px;
    font-weight: 700;
    line-height: 118%;
    text-align: left;
  }

  .mob-aym-section-title h2 br {
    display: none;
  }

  .desk-aym-section-title {
    display: none;
  }

  .aym-img-col:before {
    top: 0px;
    width: 49px;
    height: 15px;
  }

  .aym-img-col:after {
    left: 49px;
    top: -15px;
    width: 57px;
    height: 15px;
  }

  .aym-section .aym-img-col {
    margin-bottom: 40px;
  }

  .aym-section .aym-text {
    font-family: Poppins;
    font-size: 15px;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.15px;
    padding: 0 0px;
  }
}

/* AYM section css End */

/* AYM diagram section css Start  */
.aym-diagram-sec {
  margin: 100px 0 50px 0;
}

.aym-diagram {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  height: 100vh;
  font-family: sans-serif;
}

.center-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 275px;
  height: 275px;
  border-radius: 50%;
  background: #fc8b5f;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  color: #000;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 1.4em;
  font-weight: 600;
  line-height: 125%;
}

.sat {
  position: absolute;
  --line-opacity: 0;
  --line-length: 58px;
  --line-angle: 0deg;
  box-sizing: border-box;
  background: #ffea2c;
  border-radius: 100px;
  width: 420px;
  height: 130px;
  padding: 20px 36px;
  z-index: 3;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 134%;
}

.sat::before {
  content: "";
  position: absolute;
  top: 64%;
  left: 100%;
  width: var(--line-length);
  height: 0;
  border-top: 2px dotted #0a3d9c;
  opacity: var(--line-opacity);
  transform: translateY(-50%) rotate(var(--line-angle));
  transform-origin: left center;
  pointer-events: none;
  z-index: -1;
}

.sat.top {
  top: 9.6%;
  left: 50%;
  --line-length: 209px;
  --line-angle: 90deg;
  transform: translateX(-50%);
}

.sat.top::before {
  top: 100%;
  left: 76%;
  transform: translateX(-50%) rotate(var(--line-angle));
}

.sat.right {
  top: 34.4%;
  right: -62%;
  --line-length: 188px;
  --line-angle: 160deg;
}

.sat.right::before {
  left: 0;
}

.sat.bottom-right {
  bottom: 14.9%;
  right: -36.3%;
  --line-length: 320px;
  --line-angle: -144deg;
}

.sat.bottom-right::before {
  top: 0;
  left: 50%;
}

.sat.bottom-left {
  bottom: 14.9%;
  left: -37.9%;
  --line-length: 270px;
  --line-angle: -41deg;
}

.sat.bottom-left::before {
  top: 0;
  left: 50%;
}

.sat.left {
  top: 34.4%;
  left: -62%;
  --line-length: 178px;
  --line-angle: 20deg;
}

.aym-diagram svg.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  display: block;
}

.aym-diagram.is-scroll-animated .sat::before {
  display: none;
}

.aym-diagram .aym-arm {
  fill: none;
  stroke: #0a3d9c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 8;
  vector-effect: non-scaling-stroke;
}

.aym-diagram .aym-line-img {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
  object-fit: fill;
  will-change: clip-path, opacity;
}

.aym-diagram .aym-line-136 {
  left: calc(50% - 4px);
  top: calc(50% - 305px);
  width: 4px;
  height: 294px;
}

.aym-diagram .aym-line-137 {
  left: calc(50% + -8px);
  top: calc(50% - 83px);
  width: 308px;
  height: 83px;
}

.aym-diagram .aym-line-138 {
  left: calc(50% + -2px);
  top: calc(50% + -13px);
  width: 219px;
  height: 261px;
}

.aym-diagram .aym-line-141 {
  right: calc(50% + 42px);
  top: calc(50% + 49px);
  width: 219px;
  height: 211px;
}

.aym-diagram .aym-line-140 {
  right: calc(50% + 92px);
  top: calc(50% - 115px);
  width: 274px;
  height: 83px;
}

@media (max-width: 1728px) {
  .aym-diagram-sec {
    margin: 0;
  }

  .sat.top {
    top: 10.6%;
  }

  .sat.bottom-left {
    bottom: 16%;
  }

  .sat.bottom-right {
    bottom: 16%;
  }
}

@media (max-width: 1650px) {
  .center-node {
    width: 235px;
    height: 235px;
  }

  .aym-diagram .aym-line-141 {
    top: calc(50% + 50px);
    height: 211px;
  }

  .sat {
    padding: 20px 36px;
    width: 350px;
    height: 100px;
  }

  .sat.left {
    left: -50%;
  }

  .sat.bottom-left {
    left: -23.9%;
  }

  .sat.right {
    right: -51%;
  }

  .sat.bottom-right {
    right: -25.3%;
  }
}

@media (max-width: 1440px) {
  .sat {
    padding: 20px 34px;
  }
}

@media (max-width: 1366px) {
  .sat.top {
    top: 5.6%;
  }

  .sat.right {
    right: -51%;
    top: 32.4%;
  }

  .sat.bottom-right {
    bottom: 10%;
  }

  .sat.bottom-left {
    left: -21.9%;
    bottom: 10%;
  }

  .sat.left {
    top: 32.4%;
  }
}

@media (max-width: 1280px) {
  .center-node {
    width: 200px;
    height: 200px;
  }

  .aym-diagram .aym-line-136 {
    top: calc(50% - 236px);
    height: 214px;
  }

  .aym-diagram .aym-line-137 {
    width: 269px;
  }

  .aym-diagram .aym-line-138 {
    height: 236px;
  }

  .aym-diagram .aym-line-141 {
    top: calc(50% + 57px);
    right: calc(50% + 38px);
    height: 191px;
  }

  .aym-diagram .aym-line-140 {
    right: calc(50% + 66px);
    top: calc(50% - 103px);
    width: 214px;
  }

  .sat.top {
    top: 70px;
  }

  .sat.left {
    left: -47%;
  }

  .sat.right {
    right: -46%;
  }
}

@media (max-width: 1200px) {
  .sat.right {
    right: -40%;
  }

  .aym-diagram .aym-line-137 {
    top: calc(48% - 83px);
  }

  .sat.bottom-right {
    bottom: 15%;
  }

  .sat.bottom-left {
    bottom: 15%;
  }

  .sat.left {
    left: -40%;
  }

  .aym-diagram .aym-line-140 {
    right: calc(45% + 73px);
    top: calc(49% - 101px);
  }

  .aym-diagram .aym-line-136 {
    top: calc(50% - 266px);
  }
}

@media (max-width: 1024.9px) {
  .sat {
    width: 250px;
    height: 70px;
  }

  .sat.top {
    top: 100px;
  }

  .sat.right {
    right: -28%;
    top: 34.4%;
  }

  .sat.bottom-right {
    right: -14.3%;
    bottom: 18%;
  }

  .sat.bottom-left {
    bottom: 18%;
    left: -13.9%;
  }

  .sat.left {
    left: -30%;
  }
}

@media (max-width: 991.98px) {
  .aym-diagram-sec {
    margin: 100px 0;
    overflow: hidden;
    background: #fff;
  }

  .aym-diagram {
    --aym-mobile-circle-size: min(91vw, 76vh);
    --aym-mobile-row-height: calc(var(--aym-mobile-circle-size) / 5);
    width: 100%;
    max-width: none;
    height: max(468px, calc(var(--aym-mobile-circle-size) + 14vh));
    min-height: max(468px, calc(var(--aym-mobile-circle-size) + 14vh));
    margin: 0;
    overflow: hidden;
    font-family: "Poppins", sans-serif;
  }

  .aym-diagram svg.lines,
  .aym-diagram .aym-line-img {
    display: none !important;
  }

  .center-node {
    top: 50%;
    left: calc(var(--aym-mobile-circle-size) * -0.5);
    width: var(--aym-mobile-circle-size);
    height: var(--aym-mobile-circle-size);
    padding: 0 6vw 0 calc(var(--aym-mobile-circle-size) * 0.59);
    transform: translateY(-50%);
    border-radius: 50%;
    background: #ffea2c;
    justify-content: space-around;
    color: #000;
    text-align: left;
    font-size: 25px;
    font-weight: 700;
    line-height: 140%;
  }

  .sat,
  .sat.top,
  .sat.right,
  .sat.bottom-right,
  .sat.bottom-left,
  .sat.left {
    position: absolute;
    left: 48%;
    right: 0;
    top: auto;
    bottom: auto;
    width: 52%;
    height: var(--aym-mobile-row-height);
    padding: 0 30px 0 0;
    transform: none;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: #0a3d9c;
    justify-content: flex-start;
    text-align: left;
    font-family: "Poppins";
    font-size: 17px;
    font-weight: 500;
    line-height: 126%;
  }

  .sat::before {
    display: none;
  }

  .sat::after {
    content: "";
    position: absolute;
    left: calc(var(--aym-mobile-circle-size) * -0.68);
    right: 0;
    bottom: 0;
    height: 1px;
    background: #fc8b5f;
  }

  .sat.bottom-left::after {
    display: none;
  }

  .sat.top {
    top: calc(50% - (var(--aym-mobile-circle-size) / 2));
    order: 1;
  }

  .sat.left {
    top: calc(50% - (var(--aym-mobile-circle-size) / 2) + var(--aym-mobile-row-height));
    order: 2;
  }

  .sat.right {
    top: calc(50% - (var(--aym-mobile-circle-size) / 2) + (var(--aym-mobile-row-height) * 2));
    order: 3;
  }

  .sat.bottom-right {
    top: calc(50% - (var(--aym-mobile-circle-size) / 2) + (var(--aym-mobile-row-height) * 3));
    order: 4;
  }

  .sat.bottom-left {
    top: calc(50% - (var(--aym-mobile-circle-size) / 2) + (var(--aym-mobile-row-height) * 4));
    order: 5;
  }
}

@media (max-width: 767px) {
  .center-node {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 600;
  }
}

@media (max-width: 576px) {

  .sat,
  .sat.top,
  .sat.right,
  .sat.bottom-right,
  .sat.bottom-left,
  .sat.left {
    font-size: 14px;
    line-height: 134%;
    left: 51%;
  }
}

/* AYM diagram section css End  */

/* AVM section css Start */
.avm-section {
  display: flex;
  align-items: center;
  padding: 100px 0;
}

.avm-img-col:before {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 160px;
  width: 86px;
  height: 32px;
  background: #a793ec;
}

.avm-img-col:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 160px;
  height: 32px;
  background: #ff7f50;
}

.avm-img-col {
  flex: 0 0 50%;
  position: relative;
}

.mob-avm-img-col {
  display: none;
}

.mob-avm-section-title {
  display: none;
}

.avm-text {
  padding: 0 100px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.avm-text h2 {
  color: #0a3d9c;
  font-family: Satoshi;
  font-size: 2.2em;
  font-weight: 700;
  line-height: 125%;
}

.avm-text p {
  color: #000;
  font-family: Poppins;
  font-size: 1rem;
  font-weight: 400;
  line-height: 154%;
}

@media (max-width: 1728px) {
  .avm-section {
    padding: 0;
  }
}

@media (max-width: 1200px) {
  .avm-text {
    padding: 0 84px;
  }
}

@media (max-width: 1023px) {
  .avm-text {
    padding: 0 50px 0 71px;
    gap: 30px;
  }

  .avm-img-col:before {
    bottom: -25px;
    left: 150px;
    width: 76px;
    height: 25px;
  }

  .avm-img-col:after {
    width: 150px;
    height: 25px;
  }
}

@media (max-width: 991px) {
  .avm-section {
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
  }

  .mob-avm-section-title {
    display: block !important;
    margin: 0 auto 69px 0;
    width: 94%;
  }

  .mob-avm-section-title h2 {
    color: #0a3d9c;
    font-family: Satoshi;
    font-size: 28px;
    font-weight: 700;
    line-height: 118%;
    text-align: left;
  }

  .desk-avm-section-title {
    display: none;
  }

  .avm-img-col {
    display: none;
  }

  .avm-text {
    padding: 0;
    gap: 0px;
  }

  .avm-text h2 {
    width: 100%;
  }

  .mob-avm-img-col {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto 40px;
  }

  .mob-avm-img-col img {
    display: block;
    width: 100%;
  }

  .mob-avm-img-col::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 57px;
    height: 15px;
    background: #beacff;
  }

  .mob-avm-img-col::after {
    content: "";
    position: absolute;
    top: -15px;
    left: 57px;
    width: 49px;
    height: 15px;
    background: #fc8b5f;
  }
}

@media (max-width: 767px) {
  .avm-text {
    width: 101%;
  }

  .avm-text h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 118%;
  }

  .aym-text p {
    font-size: 15px;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.15px;
  }

  .avm-text p {
    font-size: 15px;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.15px;
  }
}

/* AVM section css End */

/* ── AYM + AVM Section Scroll Animations ─────────────────── */

/* AYM: img-col is left, text is right */
.aym-section .aym-img-col {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.aym-section .aym-text {
  opacity: 1;
  transform: none;
  transition: none;
}

/* AVM: text is left, img-col is right */
.avm-section .avm-text {
  opacity: 1;
  transform: none;
  transition: none;
}

.avm-section .avm-img-col {
  opacity: 1;
  transform: none;
  transition: none;
}

.avm-section .mob-avm-img-col {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Visible state */
.aym-section.in-view .aym-img-col,
.aym-section.in-view .aym-text,
.avm-section.in-view .avm-text,
.avm-section.in-view .avm-img-col,
.avm-section.in-view .mob-avm-img-col {
  opacity: 1;
  transform: translateX(0);
}

/* development diagram section css Start */
.teacher-dev {
  padding: 100px 0px;
  margin: 20px 0 100px 0;
  height: 100vh;
  display: flex;
  align-items: center;
}

.teacher-dev .circle-wrapper {
  position: relative;
  width: 600px;
  height: 328px;
  margin: auto;
}

.teacher-dev .arc-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 307px;
}

.teacher-dev .arc-svg path {
  fill: none;
  stroke: #ff7f50;
  stroke-width: 2;
}

.teacher-dev .center-circle {
  position: absolute;
  bottom: -90px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 18vw, 328px);
  height: clamp(120px, 18vw, 328px);
  background: #ffea2c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.teacher-dev .center-circle p {
  color: #000;
  text-align: center;
  font-family: Satoshi;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 119%;
}

.teacher-dev .dot {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #ff7f50;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.teacher-dev .content {
  position: absolute;
  width: clamp(180px, 25vw, 410px);
}

.teacher-dev .content h4 {
  color: #0a3d9c;
  text-align: center;
  font-family: Satoshi;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 119%;
  white-space: nowrap;
}

.teacher-dev .content p {
  color: #000;
  text-align: center;
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 154%;
  padding-top: 10.23px;
}

.teacher-dev .top {
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
}

.teacher-dev .left-top {
  top: 30px;
  left: -430px;
}

.teacher-dev .right-top {
  top: 30px;
  right: -430px;
}

.teacher-dev .left-bottom {
  top: 250px;
  left: -460px;
}

.teacher-dev .right-bottom {
  top: 250px;
  right: -460px;
}

.teacher-dev .left-top h4,
.teacher-dev .left-top p,
.teacher-dev .left-bottom h4,
.teacher-dev .left-bottom p {
  text-align: right;
}

.teacher-dev .right-top h4,
.teacher-dev .right-top p,
.teacher-dev .right-bottom h4,
.teacher-dev .right-bottom p {
  text-align: left;
}

.mob-teacher-dev {
  display: none;
}

@media (max-width: 1728px) {
  .teacher-dev {
    padding: 100px 0px 0;
    margin: 20px 0 0px 0;
  }
}

@media (max-width: 1650px) {
  .teacher-dev .left-bottom {
    top: 230px;
    left: -420px;
  }

  .teacher-dev .left-top {
    left: -380px;
  }

  .teacher-dev .top {
    top: -170px;
  }

  .teacher-dev .right-top {
    right: -370px;
  }

  .teacher-dev .right-bottom {
    top: 240px;
    right: -410px;
  }
}

@media (max-width: 1440px) {
  .teacher-dev .left-bottom {
    left: -360px;
  }

  .teacher-dev .right-bottom {
    right: -360px;
  }

  .teacher-dev .right-top {
    right: -310px;
  }

  .teacher-dev .left-top {
    left: -320px;
  }

  .teacher-dev .top {
    top: -120px;
  }

  .teacher-dev .center-circle {
    bottom: -40px;
  }
}

@media (max-width: 1280px) {
  .teacher-dev .center-circle {
    bottom: -30px;
  }

  .teacher-dev .left-bottom {
    left: -300px;
  }

  .teacher-dev .left-top {
    left: -270px;
  }

  .teacher-dev .top {
    top: -110px;
  }

  .teacher-dev .right-top {
    right: -270px;
  }

  .teacher-dev .right-bottom {
    right: -300px;
  }
}

@media (max-width: 1200px) {
  .teacher-dev .circle-wrapper {
    width: 500px;
    height: 307px;
  }

  .teacher-dev .arc-svg {
    width: 500px;
    height: 307px;
  }
}

@media (max-width: 1023px) {
  .teacher-dev .center-circle {
    bottom: -10px;
  }

  .teacher-dev .circle-wrapper {
    width: 400px;
    height: 307px;
  }

  .teacher-dev .arc-svg {
    width: 400px;
    height: 307px;
  }
}

@media (max-width: 991px) {
  .teacher-dev {
    display: none;
  }

  .mob-teacher-dev {
    display: block;
    margin: 140px 0 124px;
  }

  .mob-teacher-dev .container-xxl {
    max-width: 86%;
  }

  .development-diagram {
    --teacher-dev-width: clamp(320px, 58vw, 680px);
    width: min(100%, var(--teacher-dev-width));
    margin: 0 auto;
  }

  .development-circle {
    background: #ffea2c;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 999px 999px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    text-align: center;
  }

  .development-circle .title {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 25px;
    font-weight: 600;
    line-height: 140%;
  }

  .development-part {
    padding: clamp(52px, 7vw, 76px) 0 0 52px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 63px;
  }

  .development-part:before {
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    width: 1px;
    height: 100%;
    background: #ff7f50;
  }

  .development-part .content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .development-part .content h4 {
    color: #0a3d9c;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 600;
    line-height: 134%;
  }

  .development-part .content p {
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }

  span.orange-dot {
    width: 22px;
    height: 22px;
    display: block;
    background: #fc8b5f;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: -63px;
  }
}

@media (max-width: 767px) {
  .development-diagram {
    --teacher-dev-width: min(100%, 443px);
  }
}

@media (max-width: 576px) {
  .mob-teacher-dev {
    margin: 96px 0;
  }

  .mob-teacher-dev .container-xxl {
    max-width: 80%;
  }

  .development-diagram {
    --teacher-dev-width: 100%;
  }

  .development-circle .title {
    font-size: 18px;
  }

  span.orange-dot {
    width: 16px;
    height: 16px;
    left: -59px;
  }
}

/* development diagram section css End */

.pedagogy-page .diagram-bottom-fade {
  height: 340px !important;
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(10, 61, 156, 0.55) 38%,
      rgba(255, 255, 255, 0.9) 76%,
      #ffffff 100%) !important;
}

.pedagogy-page .tabbing-sec {
  margin-top: -340px !important;
  /* border-radius: 28px 28px 0 0; */
  /* box-shadow: 0 -16px 60px rgba(10, 61, 156, 0.09); */
}

@media (max-width: 767px) {
  .pedagogy-page .tabbing-sec {
    position: unset;
    margin-top: -60px !important;
    border-radius: 16px 16px 0 0;
  }
}

.aym-img-col .aym-img-mask,
.avm-img-col .avm-img-mask {
  display: block;
  overflow: hidden;
  will-change: clip-path;
}

.aym-img-col .aym-img-mask img,
.avm-img-col .avm-img-mask img {
  display: block;
  width: 100%;
  will-change: transform;
}

/* ── Extra Section: Scroll-jacked slide per scroll ── */
.extra-section-pin-spacer-custom {
  pointer-events: none;
}

/* Footer reveal CSS */
.pedagogy-page .main-content-wrapper {
  position: relative;
  z-index: 1;
  background-color: #fff;
  /* margin-bottom will be set by JS */
}

.pedagogy-page .footer-reveal-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

@media (max-width: 991px) {
  .pedagogy-page .footer-reveal-wrapper {
    position: static;
  }
}

.pedagogy-page .footer-reveal-wrapper .contact-sec {
  margin-top: 0;
  transform: none;
  z-index: auto;
}