@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Poppins:wght@400;700&display=swap");

:root {
  --font-poppins: "Poppins", sans-serif;
  --font-merienda: "Merienda", cursive;
  --font-jakarta: "Plus Jakarta Sans", sans-serif;
  --navy: #1e3b8a;
  --navy-dark: #0b1635;
  --orange: #fa7516;
  --cream: #faf6f0;
}

.font-poppins {
  font-family: "Poppins", sans-serif;
}

.font-merienda {
  font-family: "Merienda", cursive;
}

.font-jakarta {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.text-orange {
  color: var(--orange);
}

html,
body {
  margin: 0;
  overflow-x: clip;

  ::-webkit-scrollbar {
    width: 5px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background-color: #a8a8a8;
    /* border-radius: 10px; */
    /* width: 5px; */
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #1e3b8a;
    border-radius: 10px;
    /* width: 5px; */
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #1e3b8a;
  }
}

/* ======== popus Start ======== */
.msta-popup-overlay,
.msta-popup-overlay * {
  box-sizing: border-box;
}

.msta-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(5, 15, 40, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease,
    backdrop-filter .35s ease;
}

.msta-popup-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

html.msta-scroll-locked,
body.msta-popup-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Main modal */

.msta-premium-popup {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, .78fr) minmax(0, 1.45fr);
  width: 100%;
  max-width: 1080px;
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 22px;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(15px) scale(.97);
  transition: opacity .35s ease,
    transform .4s cubic-bezier(.2, .8, .2, 1);
}

.msta-popup-overlay.show .msta-premium-popup {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.msta-visual-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 180px;
  /* padding: 30px 25px 25px; */
  /* padding: 15px; */
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 25% 52%, rgba(16, 91, 196, .55), transparent 45%),
    linear-gradient(150deg, #06183d 0%, #092d70 58%, #04132f 100%);
  isolation: isolate;
}

.msta-visual-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 290px;
  height: 290px;
  top: 205px;
  left: -125px;
  border: 1px solid rgba(65, 170, 255, .45);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(65, 170, 255, .05),
    0 0 0 45px rgba(65, 170, 255, .04),
    0 0 70px rgba(0, 126, 255, .15);
}

.msta-visual-top {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.msta-mini-brand {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.msta-visual-copy {
  margin-top: 15px;
}

.msta-visual-eyebrow {
  margin: 0 0 14px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.msta-visual-eyebrow b {
  margin: 0 5px;
  color: #ff8a32;
}

.msta-visual-copy h2 {
  margin: 0 0 12px;
  text-transform: capitalize;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: clamp(23px, 2.3vw, 31px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.6px;
}

.msta-visual-copy>p:last-child {
  margin: 0;
  color: #c2d2ee;
  font-size: 12px;
  line-height: 1.8;
}

/* CSS-built AI artwork */

.msta-ai-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 225px;
  /* margin: 12px -10px; */
}

.msta-ai-core {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 125px;
  border: 1px solid rgba(91, 190, 255, .8);
  border-radius: 35px;
  background: linear-gradient(145deg, #1255a8, #061b49);
  color: #8ddcff;
  box-shadow: 0 0 40px rgba(0, 149, 255, .24),
    inset 0 0 25px rgba(0, 153, 255, .15);
  transform: rotate(-8deg);
}

.msta-ai-core svg {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 0 9px rgba(53, 183, 255, .45));
}

.msta-ai-orbit {
  position: absolute;
  width: 195px;
  height: 195px;
  border: 1px solid rgba(72, 169, 255, .35);
  border-radius: 50%;
  transform: rotate(-20deg) scaleY(.7);
}

.orbit-one {
  border-right-color: #fa7516;
  border-left-color: rgba(72, 169, 255, .1);
}

.orbit-two {
  width: 235px;
  height: 235px;
  border-style: dashed;
  opacity: .6;
  transform: rotate(38deg) scaleY(.62);
}

.msta-art-chip {
  position: absolute;
  z-index: 3;
  padding: 8px 11px;
  border: 1px solid rgba(123, 189, 255, .3);
  border-radius: 8px;
  background: rgba(8, 35, 82, .88);
  color: #e5f3ff;
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .15);
}

.chip-ai {
  top: 17%;
  right: 27px;
}

.chip-build {
  bottom: 16%;
  left: 16px;
}

.spark-two {
  right: 10%;
  bottom: 15%;
  color: #73caff;
}

.msta-visual-bottom {
  margin-top: auto;
  padding-top: 12px;
}

.msta-visual-bottom p {
  margin: 5px 0 13px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
}

.msta-bottom-line {
  width: 48px;
  height: 3px;
  border-radius: 5px;
  background: #fa7516;
}

.msta-popup-main {
  position: relative;
  min-width: 0;
  /* padding: 34px 32px 22px; */
  padding: 15px;
  background:
    radial-gradient(ellipse at 100% 100%, rgba(55, 104, 227, .06), transparent 28%),
    #ededed;
}

.msta-premium-close {
  position: absolute;
  top: 17px;
  right: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #e6eaf2;
  border-radius: 50%;
  background: #f5f7fb;
  color: #15284f;
  font-family: Arial, sans-serif;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  transition: .25s ease;
}

.msta-premium-close:hover {
  border-color: #fa7516;
  background: #fa7516;
  color: #fff;
  transform: rotate(90deg);
}

.msta-premium-brands {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 38px;
  margin-bottom: 15px;
}

.msta-premium-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.msta-premium-logo img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: 80px;
  object-fit: contain;
}

.msta-premium-logo.university-logo img {
  max-width: 165px;
}

.msta-premium-divider {
  width: 1px;
  height: 45px;
  flex: 0 0 1px;
  background: #dbe2ed;
}

.msta-heading-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 30px;
  background: #fff0e5;
  color: #df5f0b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.msta-main-heading h2 {
  margin: 0 0 3px;
  color: #0b1635;
  font-family: "Poppins", sans-serif;
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1px;
}

.msta-main-heading h2 span {
  color: #fa7516;
}

.msta-main-heading>p {
  margin: 0 0 18px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.85;
}

/* Course card */

.msta-premium-course {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dce6fa;
  border-radius: 15px;
  background: linear-gradient(120deg, #f1f5ff, #fff);
  color: inherit;
  text-decoration: none;
  transition: .25s ease;
}

.msta-premium-course:hover {
  border-color: #9db9f5;
  box-shadow: 0 10px 28px rgba(30, 59, 138, .08);
  transform: translateY(-2px);
}

.msta-premium-course-body {
  flex: 1;
  min-width: 0;
}

.msta-premium-course h3 {
  margin: 0 0 7px;
  color: #0b1635;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}

.msta-premium-course p {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.75;
}

.msta-premium-course-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #17366f;
  font-size: 12px;
  font-weight: 700;
}

.msta-premium-course-meta i {
  width: 1px;
  height: 16px;
  background: #cbd5e1;
}

/* Deadline notice */

.msta-premium-notice {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #ffd6b7;
  border-radius: 13px;
  background: linear-gradient(120deg, #fff7f0, #fffaf6);
}

.msta-notice-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: #fa7516;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}

.msta-premium-notice>div:last-child {
  min-width: 0;
  flex: 1;
}

.msta-premium-notice h3 {
  margin: 0 0 5px;
  color: #c34b08;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.msta-premium-notice p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.75;
}

.msta-deadline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.msta-deadline span {
  color: #9a3412;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
}

.msta-deadline strong {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: #fa7516;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* Footer */

.msta-premium-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #e9edf4;
}

.msta-footer-copy {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.msta-footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  background: #f0f4fc;
  color: #1e3b8a;
  font-size: 18px;
}

.msta-footer-copy p {
  margin: 0;
  color: #64748b;
  font-size: 9px;
  line-height: 1.7;
}

.msta-premium-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 30px;
  background: linear-gradient(100deg, #f65e08, #ff8618);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 7px 18px rgba(250, 117, 22, .2);
  transition: .25s ease;
}

.msta-premium-btn span {
  font-size: 18px;
  transition: transform .25s ease;
}

.msta-premium-btn:hover {
  color: #fff;
  box-shadow: 0 10px 25px rgba(250, 117, 22, .3);
  transform: translateY(-2px);
}

.msta-premium-btn:hover span {
  transform: translateX(4px);
}

.msta-premium-caption {
  margin-top: 15px;
  color: #a0aabd;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
}

@media (max-width: 850px) {
  .msta-premium-popup {
    grid-template-columns: minmax(190px, .65fr) minmax(0, 1.35fr);
    max-width: 740px;
  }

  .msta-visual-panel {
    padding: 25px 18px;
  }

  .msta-popup-main {
    padding: 28px 23px 20px;
  }

  .msta-premium-brands {
    gap: 12px;
  }

  .msta-premium-logo img {
    height: 52px;
  }

  .msta-premium-logo.university-logo img {
    height: 58px;
  }

  .msta-premium-course {
    gap: 10px;
    padding: 14px;
  }
}

@media (max-width: 650px) {
  .msta-popup-overlay {
    padding: 12px;
    align-items: center;
  }

  .msta-premium-popup {
    display: block;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    border-radius: 18px;
  }

  .msta-visual-panel {
    min-height: 0;
    padding: 17px 20px;
  }

  .msta-visual-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 38px;
  }

  .msta-mini-brand {
    font-size: 19px;
  }


  .msta-visual-copy {
    margin-top: 8px;
  }

  .msta-visual-eyebrow {
    margin-bottom: 8px;
    font-size: 8px;
  }

  .msta-visual-copy h2 {
    max-width: 330px;
    margin-bottom: 6px;
    font-size: 22px;
  }

  .msta-visual-copy>p:last-child {
    font-size: 10px;
  }

  .msta-ai-art {
    display: none;
  }

  .msta-visual-bottom {
    margin-top: 13px;
    padding-top: 0;
  }

  /* .msta-bottom-accent {
        font-size: 10px;
    } */

  .msta-visual-bottom p {
    display: inline;
    margin-left: 4px;
    font-size: 11px;
  }

  .msta-bottom-line {
    margin-top: 8px;
    width: 32px;
    height: 2px;
  }

  .msta-popup-main {
    padding: 22px 18px 17px;
  }

  .msta-premium-close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    font-size: 23px;
  }

  .msta-premium-brands {
    padding-right: 28px;
    margin-bottom: 19px;
  }

  .msta-premium-logo img {
    height: 46px;
    max-width: 120px;
  }

  .msta-premium-logo.university-logo img {
    height: 48px;
    max-width: 130px;
  }

  .msta-premium-divider {
    height: 34px;
  }

  .msta-heading-tag {
    margin-bottom: 8px;
    padding: 5px 9px;
    font-size: 8px;
  }

  .msta-main-heading h2 {
    font-size: 22px;
    letter-spacing: -.5px;
  }

  .msta-main-heading>p {
    margin-bottom: 15px;
    font-size: 11px;
  }

  .msta-premium-course {
    gap: 10px;
    padding: 12px;
  }

  /* .msta-premium-course-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 10px;
    }

    .msta-premium-course-icon svg {
        width: 20px;
        height: 20px;
    } */


  .msta-premium-course h3 {
    font-size: 13px;
  }

  .msta-premium-course p {
    font-size: 10px;
    line-height: 1.65;
  }

  .msta-premium-course-meta {
    gap: 7px;
    font-size: 9px;
  }

  /* .msta-course-arrow {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 16px;
    } */

  .msta-premium-notice {
    gap: 9px;
    margin-top: 12px;
    padding: 12px;
  }

  .msta-notice-symbol {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: 16px;
  }

  .msta-premium-notice h3 {
    font-size: 11px;
  }

  .msta-premium-notice p {
    font-size: 9px;
  }

  .msta-deadline {
    gap: 6px;
  }

  .msta-deadline span {
    font-size: 7px;
  }

  .msta-deadline strong {
    font-size: 9px;
  }

  .msta-premium-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 11px;
    margin-top: 14px;
    padding-top: 13px;
  }

  .msta-footer-copy p {
    font-size: 9px;
  }

  .msta-premium-btn {
    width: 100%;
    min-height: 42px;
    font-size: 10px;
  }

  .msta-premium-caption {
    margin-top: 11px;
  }
}

@media (max-width: 360px) {
  .msta-visual-panel {
    /* padding: 15px; */
    padding: 0;
  }

  .msta-visual-copy h2 {
    font-size: 20px;
  }

  .msta-popup-main {
    padding: 19px 13px 14px;
  }

  .msta-premium-course {
    gap: 8px;
    padding: 10px;
  }

  .msta-premium-course h3 {
    font-size: 12px;
  }
}

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

  .msta-popup-overlay,
  .msta-premium-popup,
  .msta-premium-course,
  .msta-premium-close,
  .msta-premium-btn,
  .msta-premium-btn span {
    transition: none !important;
  }
}

/* ======== popus End ======== */

/* ===== PAGE LOADER start ===== */

#pageLoader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #faf6f0;
  z-index: 999999;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

#pageLoader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Loader Bars */
.loader {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 60px;
}

.loader span {
  width: 15px;
  height: 100%;
  font-family: var(--font-jakarta);
  font-size: 12px;
  font-weight: 800;
  color: var(--navy-dark);
  background: #d7da10;
  border-radius: 5px;
  animation: grow 1s ease-in-out infinite;
}

.loader span:nth-child(2) {
  animation-delay: 0.13s;
}

.loader span:nth-child(3) {
  animation-delay: 0.25s;
}

.loader span:nth-child(4) {
  animation-delay: 0.38s;
}

@keyframes grow {

  0%,
  100% {
    transform: scaleY(0.3);
  }

  50% {
    transform: scaleY(1);
  }
}

/* ===== LOAD PAGE end ===== */

/* ===== navbar start ===== */

.nav-bg {
  background: #fbf9f0;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
  z-index: 9999;
}

.navbar-container {
  min-height: 78px;
  padding-left: 25px;
  padding-right: 25px;
}

.navbar-brand img {
  width: 100px;
  height: auto;
  display: block;
}

.nav-font {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1e3b8a !important;
  padding: 28px 13px !important;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.nav-font::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 17px;
  height: 2px;
  background: #fa7516;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-font:hover {
  color: #fa7516 !important;
}

.nav-font:hover::after {
  transform: scaleX(1);
}

.nav-font.active {
  color: #fa7516 !important;
}

.nav-font.active::after {
  transform: scaleX(1);
}

.dropdown-arrow {
  font-size: 10px;
  margin-left: 5px;
  color: inherit;
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
  color: #fa7516;
}

.dropdown-menu {
  border: 0;
  border-radius: 12px;
  padding: 8px;
  margin-top: 0 !important;
  min-width: 260px;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(15, 23, 42, 0.15);
  display: none;
}

.sub-navFont {
  position: relative;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  padding: 11px 14px;
  border-radius: 8px;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    padding-left 0.2s ease;
}

.sub-navFont:hover {
  color: #fa7516 !important;
  background: #fff4eb;
  padding-left: 18px;
}

@media (min-width: 1200px) {

  .navbar .dropdown:hover>.dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

}


@media (max-width: 1199px) {

  .navbar .dropdown-menu {
    position: static !important;
    width: 100%;
    min-width: 100%;
    margin: 5px 0 10px !important;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: none;
  }

  .navbar .dropdown-menu.show {
    display: block !important;
  }

  .navbar .dropdown-toggle::after {
    display: none;
  }

  .navbar .dropdown.show .dropdown-arrow {
    transform: rotate(180deg);
    color: #fa7516;
  }

  .navbar .dropdown:hover .dropdown-arrow {
    transform: none;
    color: inherit;
  }

}

.mega-menu-item {
  position: static;
}

.mega-menu {
  position: absolute;

  left: 50%;
  top: 100%;

  width: 90% !important;
  max-width: 1450px;

  transform: translateX(-50%) translateY(12px);

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 0 0 14px 14px;

  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);

  display: grid;

  grid-template-columns:
    250px minmax(0, 1fr);

  height: 80vh;

  max-height: 560px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;

  z-index: 9999;

  overflow: hidden;
}

@media (min-width: 1200px) {

  .mega-menu-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
      translateX(-50%) translateY(0);
  }

}

.mega-sidebar {
  background: #ffffff;

  border-right: 1px solid #e5e7eb;

  padding: 30px 0;

  overflow-y: auto;

  min-width: 0;
}

.mega-sidebar-title {
  font-family: var(--font-poppins);

  font-size: 21px;
  font-weight: 700;

  color: #1e293b;

  padding: 0 28px 22px;

  text-align: center;
}

.mega-category {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 22px 0 28px;

  font-family: var(--font-jakarta);

  font-size: 13px;
  font-weight: 500;

  color: #334155;

  cursor: pointer;

  border-left: 3px solid transparent;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.mega-category-content {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}

.mega-category-content i {
  width: 20px;

  text-align: center;

  color: #64748b;

  font-size: 14px;

  flex-shrink: 0;

  transition: color 0.2s ease;
}

.mega-category>i {
  font-size: 10px;

  color: #94a3b8;

  transition:
    color 0.2s ease,
    transform 0.2s ease;

  flex-shrink: 0;
}

.mega-category:hover,
.mega-category.active {
  color: #fa7516;

  background: #fff7f0;

  border-left-color: #fa7516;
}

.mega-category:hover .mega-category-content i,
.mega-category.active .mega-category-content i {
  color: #fa7516;
}

.mega-category:hover>i,
.mega-category.active>i {
  color: #fa7516;

  transform: translateX(3px);
}

.mega-content {
  padding: 30px;

  background: #f8fafc;

  overflow-y: auto;

  min-width: 0;
}

.mega-content-header {
  margin-bottom: 20px;
}

.mega-content-header h3 {
  margin: 0;

  font-family: "Poppins", sans-serif;

  font-size: 20px;
  font-weight: 700;

  color: #1e293b;
}

.course-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}

.mega-course-card {
  min-height: 175px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  padding: 20px;

  text-decoration: none;

  color: inherit;

  display: block;

  box-shadow:
    0 3px 10px rgba(15, 23, 42, 0.05);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;

  overflow: hidden;
}

.mega-course-card:hover {
  transform: translateY(-4px);

  border-color: #fa7516;

  box-shadow:
    0 12px 28px rgba(250, 117, 22, 0.15);
}

.course-top {
  display: flex;

  align-items: center;

  margin-bottom: 18px;

  min-width: 0;
}

.course-top img {
  width: 55px;
  height: 55px;

  object-fit: contain;

  flex-shrink: 0;
}

.course-top h6 {
  margin:
    0 0 0 18px;

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    13px;

  font-weight:
    600;

  color:
    #1e3b8a;

  min-width: 0;
}

.mega-course-card h4 {
  margin:
    0 0 10px;

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    15px;

  line-height:
    1.45;

  font-weight:
    600;

  color:
    #1e293b;

  transition:
    color 0.2s ease;

  overflow-wrap: anywhere;
}

.mega-course-card:hover h4 {
  color:
    #fa7516;
}

.mega-course-card p {
  margin:
    0 0 15px;

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    11px;

  line-height:
    1.5;

  color:
    #64748b;

  overflow-wrap: anywhere;
}

.course-duration {
  display:
    flex;

  align-items:
    center;

  flex-wrap: wrap;

  gap:
    8px;

  font-family:
    "Plus Jakarta Sans",
    sans-serif;

  font-size:
    12px;

  color:
    #64748b;
}

.course-duration i {
  font-size:
    13px;

  color:
    #fa7516;
}

.apply-btn {
  background:
    #fa7516;

  color:
    #ffffff !important;

  border:
    0;

  border-radius:
    7px;

  padding:
    10px 20px;

  font-family:
    "Poppins",
    sans-serif;

  font-size:
    13px;

  font-weight:
    600;

  white-space:
    nowrap;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.apply-btn:hover {
  background:
    #e96208;

  color:
    #ffffff !important;

  transform:
    translateY(-1px);
}

.navbar-actions {
  gap:
    8px;
}

@media (max-width: 1399px) {

  .nav-font {
    font-size:
      13px;

    padding-left:
      9px !important;

    padding-right:
      9px !important;
  }

  .nav-font::after {
    left:
      9px;

    right:
      9px;
  }

  .mega-menu {
    width:
      92% !important;

    grid-template-columns:
      220px minmax(0, 1fr);
  }

}

@media (max-width: 1199px) {

  .navbar-container {
    min-height:
      70px;

    padding:
      10px 18px;
  }

  .nav-font {
    padding:
      12px 0 !important;
  }

  .nav-font::after {
    left:
      0;

    right:
      auto;

    width:
      35px;

    bottom:
      5px;
  }

  .navbar-nav {
    width:
      100%;

    align-items:
      stretch !important;
  }

  .navbar-actions {
    padding:
      12px 0 18px;
  }

  .mega-menu {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    width:
      100% !important;

    max-width:
      none;

    height:
      auto;

    min-height:
      auto;

    max-height:
      none;

    display:
      none;

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      none;

    box-shadow:
      none;

    border:
      1px solid #e5e7eb;

    border-radius:
      12px;

    margin:
      5px 0 15px;

    overflow:
      visible;
  }

  .mega-menu-item.mega-open .mega-menu {
    display:
      grid;
  }

  .mega-sidebar {
    border-right:
      0;

    border-bottom:
      1px solid #e5e7eb;

    padding:
      18px 0;

    overflow:
      visible;
  }

  .mega-sidebar-title {
    font-size:
      17px;

    padding:
      0 18px 12px;
  }

  .mega-category {
    min-height:
      48px;

    padding:
      0 18px;
  }

  .mega-content {
    padding:
      22px 18px;

    overflow:
      visible;
  }

  .mega-content-header h3 {
    font-size:
      17px;
  }

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

  .mega-course-card {
    min-height:
      auto;
  }

}

@media (max-width: 767px) {

  .nav-bg {
    width: 100%;

    overflow: visible;
  }

  .navbar-container {
    width: 100%;

    min-height:
      64px;

    padding:
      10px 15px;

    gap:
      8px;
  }

  .navbar-brand {
    min-width:
      0;
  }

  .navbar-brand img {
    width:
      90px;

    max-width:
      90px;
  }

  .navbar-collapse {
    width:
      100%;

    min-width:
      0;

    padding:
      8px 0 14px;
  }

  .navbar-nav {
    width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch !important;

    gap:
      1px;
  }

  .navbar-nav .nav-item {
    width:
      100%;

    min-width:
      0;
  }

  .nav-font {
    width:
      100%;

    min-width:
      0;

    display:
      flex !important;

    justify-content:
      space-between;

    align-items:
      center;

    padding:
      10px 0 !important;

    font-size:
      11px;

    line-height:
      1.35;

    white-space:
      normal;

    text-align:
      left;
  }

  .nav-font::after {
    left:
      0;

    right:
      auto;

    width:
      30px;

    bottom:
      3px;
  }

  .navbar .dropdown-menu {
    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    overflow:
      hidden;
  }

  .sub-navFont {
    width:
      100%;

    font-size:
      11px;

    padding:
      10px 12px;
  }

  .mega-menu-item {
    width:
      100% !important;

    min-width:
      0 !important;

    position:
      relative;
  }

  .mega-menu {

    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      4px 0 10px !important;

    padding:
      0 !important;

    display:
      none;

    grid-template-columns:
      1fr;

    transform:
      none !important;

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    border:
      1px solid #e5e7eb;

    border-radius:
      10px;

    box-shadow:
      0 8px 25px rgba(15, 23, 42, 0.08);

    overflow:
      hidden;
  }

  .mega-menu-item.mega-open .mega-menu {
    display:
      block;
  }

  .mega-sidebar {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    padding:
      12px 0;

    border-right:
      0 !important;

    border-bottom:
      1px solid #e5e7eb;

    overflow:
      visible;
  }

  .mega-sidebar-title {
    width:
      100%;

    font-size:
      16px;

    padding:
      0 12px 10px;

    text-align:
      left;
  }

  .mega-category {

    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      44px;

    padding:
      7px 10px;

    font-size:
      10px;

    gap:
      8px;
  }

  .mega-category-content {

    min-width:
      0;

    max-width:
      calc(100% - 25px);

    flex:
      1 1 auto;

    gap:
      7px;
  }

  .mega-category-content i {

    width:
      18px;

    min-width:
      18px;

    flex:
      0 0 18px;

    font-size:
      12px;
  }

  .mega-category-content span {

    min-width:
      0;

    max-width:
      100%;

    font-size:
      9px;

    line-height:
      1.35;

    white-space:
      normal;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }

  .mega-category>i {
    flex:
      0 0 auto;

    font-size:
      8px;
  }

  .mega-content {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    padding:
      14px 11px !important;

    background:
      #f8fafc;

    overflow-x:
      hidden;

    overflow-y:
      visible;
  }

  .mega-content-header {

    width:
      100%;

    min-width:
      0;

    margin-bottom:
      11px;
  }

  .mega-content-header h3 {

    width:
      100%;

    max-width:
      100%;

    margin:
      0;

    font-size:
      14px;

    line-height:
      1.35;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }


  .course-grid {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      9px;

    margin:
      0;

    padding:
      0;
  }

  .mega-course-card {

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    min-height:
      auto;

    padding:
      12px;

    border-radius:
      10px;

    overflow:
      hidden;
  }

  .course-top {

    width:
      100%;

    min-width:
      0;

    display:
      flex;

    align-items:
      center;

    gap:
      8px;

    margin-bottom:
      11px;
  }

  .course-top img {

    width:
      42px;

    height:
      42px;

    min-width:
      42px;

    max-width:
      42px;

    flex:
      0 0 42px;
  }

  .course-top h6 {

    min-width:
      0;

    max-width:
      100%;

    flex:
      1 1 auto;

    margin:
      0;

    font-size:
      9px;

    line-height:
      1.35;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }

  .mega-course-card h4 {

    width:
      100%;

    max-width:
      100%;

    margin:
      0 0 7px;

    font-size:
      12px;

    line-height:
      1.4;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }

  .mega-course-card p {

    width:
      100%;

    max-width:
      100%;

    margin:
      0 0 10px;

    font-size:
      8px;

    line-height:
      1.5;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }

  .course-duration {

    width:
      100%;

    max-width:
      100%;

    display:
      flex;

    align-items:
      center;

    flex-wrap:
      wrap;

    gap:
      6px;

    font-size:
      9px;
  }

  .navbar-actions {
    width:
      100%;

    padding:
      8px 0 12px;
  }

  .apply-btn {
    width:
      100%;

    min-height:
      40px;
  }

}

@media (max-width: 575px) {

  .navbar-container {
    padding-left:
      14px;

    padding-right:
      14px;
  }

  .navbar-brand img {
    width:
      85px;
  }

  .mega-sidebar-title {
    font-size:
      15px;
  }

  .mega-content {
    padding:
      13px 10px !important;
  }

  .mega-course-card {
    padding:
      11px;
  }

  .course-top img {
    width:
      40px;

    height:
      40px;

    min-width:
      40px;
  }

  .course-top h6 {
    font-size:
      8.5px;

    margin-left:
      0;
  }

  .mega-course-card h4 {
    font-size:
      11px;
  }

  .mega-course-card p {
    font-size:
      7.5px;
  }

}


@media (max-width: 400px) {

  .navbar-container {
    padding-left:
      10px;

    padding-right:
      10px;
  }

  .navbar-brand img {
    width:
      75px;
  }

  .mega-sidebar-title {
    font-size:
      14px;
  }

  .mega-category {
    min-height:
      41px;

    padding:
      7px 8px;
  }

  .mega-category-content span {
    font-size:
      8px;
  }

  .mega-content {
    padding:
      11px 9px !important;
  }

  .mega-content-header h3 {
    font-size:
      12px;
  }

  .mega-course-card {
    padding:
      10px;
  }

  .course-top img {
    width:
      36px;

    height:
      36px;

    min-width:
      36px;
  }

  .course-top h6 {
    font-size:
      8px;
  }

  .mega-course-card h4 {
    font-size:
      10.5px;
  }

  .mega-course-card p {
    font-size:
      7px;
  }

}

@media (max-width: 767px) {

  html,
  body {
    max-width:
      100%;

    overflow-x:
      hidden;
  }

  .nav-bg,
  .navbar-container,
  .navbar-collapse,
  .navbar-nav,
  .navbar-nav .nav-item,
  .mega-menu-item,
  .mega-menu,
  .mega-sidebar,
  .mega-content,
  .course-grid,
  .mega-course-card {
    max-width:
      100%;
  }

}

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

  .nav-bg,
  .nav-font,
  .nav-font::after,
  .dropdown-arrow,
  .sub-navFont,
  .mega-menu,
  .mega-category,
  .mega-category>i,
  .mega-category-content i,
  .mega-course-card,
  .apply-btn {
    transition:
      none !important;
  }

}


/* ===== navbar end =====*/




/* ===== Header start ===== */
.hero-img {
  background-image: url("../img/hero-banner.webp");
  background-size: cover;
  background-position: center;
  margin-top: 0;
  background-repeat: no-repeat;
  height: 450px;
}

.hero-title {
  font-family: var(--font-poppins);
  /* font-family: sans-serif; */
  font-size: clamp(1.7rem, 5.5vw, 3.4rem);
  line-height: 52px;
  color: var(--navy-dark);
  margin-top: -28px;
  margin-bottom: 10px !important;
  font-weight: 800 !important;
}

.text-orange {
  color: var(--orange);
}

.hero-sub {
  max-width: 520px;
  font-size: clamp(0.9rem, 1.6vw, 0.9rem);
  line-height: 1.7;
  color: var(--navy-dark);
  opacity: 0.8;
}

.hero-btn,
.hero-btn:active,
.hero-btn:focus,
.hero-btn:focus-visible {
  background-color: var(--orange) !important;
  color: #fff !important;
  border: none;
  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out;
}

.hero-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(250, 117, 22, 0.4);
}

.hero-btn2,
.hero-btn2:active,
.hero-btn2:focus,
.hero-btn2:focus-visible {
  background-color: #1e3b8a !important;
  color: #fbfbfb !important;
  border: 2px solid #1e3b8a;
  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out;
}

.hero-btn2:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(22, 132, 250, 0.4);
}

.hero-floats {
  position: relative;
  height: 100%;
  min-height: 420px;
}

.float-pill {
  position: absolute;
  top: -8px;
  left: 25%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  font-family: var(--font-poppins);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 12px;
  animation: float-pill 5s ease-in-out infinite;
  z-index: 2;
}

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 18px 40px rgba(30, 59, 138, 0.15);
  animation: float 6s ease-in-out infinite;
  z-index: 2;
}

.fc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.icon-orange {
  background: rgba(250, 117, 22, 0.14);
  color: var(--orange);
}

.icon-purple {
  background: rgba(140, 120, 250, 0.16);
  color: #7c5cff;
}

.icon-blue {
  background: rgba(30, 59, 138, 0.1);
  color: var(--navy);
}

.fc-text {
  display: flex;
  flex-direction: column;
}

.fc-text strong {
  font-family: var(--font-poppins);
  font-size: 15px;
  color: var(--navy-dark);
}

.fc-text small {
  font-family: var(--font-jakarta);
  font-size: 12.5px;
  color: rgba(11, 22, 53, 0.6);
}

.fc-1 {
  top: 42%;
  right: 10%;
  animation-delay: 0.8s !important;
  width: 35%;
  transform: rotate(-6deg) !important;
}

.fc-2 {
  bottom: 60%;
  left: -10%;
  animation-delay: 1.6s;
}

.fc-3 {
  bottom: 60px;
  right: 400px;
  animation-delay: 2.4s;
  width: 40%;
}

.fc-4 {
  bottom: 9%;
  right: 76px;
  animation-delay: 3.2s;
  /* transform: rotate(-6deg) !important; */
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .float-card {
    padding: 10px 14px;
  }

  .fc-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .fc-text strong {
    font-size: 13px;
  }

  .float-pill {
    padding: 8px 14px;
    font-size: 13px;
  }

  .fc-3 {
    right: 300px;
    width: 38%;
  }

  .fc-4 {
    right: 50px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-img {
    height: auto;
    min-height: 680px;
    padding-top: 60px !important;
    padding-bottom: 45px !important;
    background-position: center top;
    background-size: cover;
  }

  .hero-img>.col-lg-6:first-child {
    width: 100%;
    padding-left: 25px !important;
    padding-right: 25px !important;
    text-align: center;
  }

  .hero-title {
    max-width: 760px;
    margin: 0 auto 20px !important;
    font-size: clamp(2.2rem, 5vw, 3rem);
    line-height: 1.2;
  }

  .hero-sub {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
    line-height: 1.75;
  }

  .hero-img .d-flex {
    justify-content: center !important;
    align-items: center !important;
    margin-top: 25px !important;
  }

  .hero-btn,
  .hero-btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 22px !important;
    font-family: var(--font-poppins);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  .hero-img>.col-lg-6:last-child {
    width: 100%;
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  /* FLOAT CONTAINER */

  .hero-floats {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 35px;
    padding: 5px 0;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
  }

  /* PILL */
  .float-pill {
    position: static !important;
    order: -1;
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    padding: 10px 18px;
    font-size: 13px;
    animation: none !important;
    transform: none !important;
  }

  /* CARDS */

  .float-card {
    position: static !important;
    width: auto !important;
    max-width: 100%;
    padding: 11px 15px;
    gap: 9px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(11, 22, 53, 0.12);
    animation: none !important;
    transform: none !important;
  }

  /* RESET DESKTOP POSITIONS */

  .fc-1,
  .fc-2,
  .fc-3,
  .fc-4 {
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
  }

  /* ICON */

  .float-card .fc-icon,
  .float-pill .fc-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* TEXT */
  .fc-text strong {
    font-size: 13px;
    white-space: nowrap;
  }

  /* TICKER */
  .ticker-track {
    animation-duration: 20s;
  }

  .ticker-track span {
    margin: 0 18px;
    font-size: 14px;
  }
}

@media (max-width: 767.98px) {
  .hero-img {
    height: auto;
    min-height: auto;
    background-image:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.78) 0%,
        rgba(255, 255, 255, 0.88) 48%,
        rgba(255, 255, 255, 0.95) 100%),
      url("../img/hero-banner.webp") !important;
    background-size: cover, cover;
    background-position:
      center top,
      center top;
    background-repeat: no-repeat, no-repeat;
    overflow: hidden;
  }

  /* ROW */
  .hero-img.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-img>.col-lg-6:first-child {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
    position: relative;
    z-index: 2;
  }

  .hero-title {
    max-width: 600px;
    margin: 0 auto 10px !important;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    line-height: 1.2;
    color: #0b1635 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
    font-weight: 700;
  }

  .text-orange {
    color: var(--orange) !important;
  }

  /* DESCRIPTION */

  .hero-sub {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 4px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #0b1635 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
  }

  .hero-img .d-flex {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    margin-top: 22px !important;
  }

  .hero-btn,
  .hero-btn2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px;
    width: auto !important;
    min-width: 48% !important;
    max-width: 190px;
    padding: 10px 15px !important;
    font-family: var(--font-poppins) !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    border-radius: 50px !important;
  }

  .hero-btn i {
    font-size: 10px;
    margin-left: 6px !important;
  }

  .hero-img>.col-lg-6:last-child {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 5px;
    position: relative;
    z-index: 3;
  }

  .hero-floats {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 10px !important;
    padding: 5px 0;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .float-pill {
    position: static !important;
    order: -1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: 100%;
    padding: 9px 14px !important;
    gap: 7px;
    font-size: 11.5px !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 7px 20px rgba(11, 22, 53, 0.13) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .float-card {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: calc(50% - 5px) !important;
    max-width: 180px;
    min-width: 135px;
    padding: 9px 10px !important;
    gap: 7px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 7px 20px rgba(11, 22, 53, 0.14) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .fc-1,
  .fc-2,
  .fc-3,
  .fc-4 {
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(50% - 5px) !important;
    transform: none !important;
  }

  .float-card .fc-icon,
  .float-pill .fc-icon {
    width: 33px !important;
    height: 33px !important;
    min-width: 33px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
  }

  .fc-text {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .fc-text strong {
    display: block !important;
    font-family: var(--font-poppins) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: #0b1635 !important;
    white-space: nowrap !important;
  }

  .fc-text small {
    display: none;
  }

  .marquee-bg {
    border-width: 1px;
    overflow: hidden;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .ticker {
    width: 100%;
    overflow: hidden;
  }

  .ticker-track {
    animation-duration: 18s;
  }

  .ticker-track span {
    margin: 0 11px !important;
    gap: 7px;
    font-size: 11.5px;
    white-space: nowrap;
  }

  .ticker-track i {
    font-size: 10px;
  }
}

@media (max-width: 575.98px) {
  .hero-img {
    background-image:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.96) 100%),
      url("../img/hero-banner.webp") !important;
    background-size: cover, cover;
    background-position:
      center top,
      center top;
    background-repeat: no-repeat, no-repeat;
  }

  .hero-title {
    font-size: clamp(1.65rem, 8.5vw, 2rem) !important;
    line-height: 1.22;
    margin-bottom: 15px !important;
    padding: 0;
  }

  /* DESCRIPTION */

  .hero-sub {
    font-size: 12.5px;
    line-height: 1.65;
    padding: 0;
    margin-bottom: 10px;
  }

  /* BUTTONS */

  .hero-img .d-flex {
    gap: 8px !important;
    margin-top: 20px !important;
  }

  .hero-btn,
  .hero-btn2 {
    min-width: 60% !important;
    max-width: 80% !important;
    min-height: 42px;
    padding: 9px 13px !important;
    font-size: 11.5px !important;
  }

  .hero-btn i {
    font-size: 9px;
    margin-left: 5px !important;
  }

  .hero-floats {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .float-pill {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  .float-card {
    width: calc(50% - 4px) !important;
    min-width: 128px;
    max-width: 165px;
    padding: 8px 9px !important;
    gap: 6px !important;
  }

  .float-card .fc-icon,
  .float-pill .fc-icon {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    font-size: 12px !important;
  }

  .fc-text strong {
    font-size: 10.5px !important;
  }

  .ticker-track {
    animation-duration: 17s;
  }

  .ticker-track span {
    margin: 0 9px !important;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .hero-img {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .hero-title {
    font-size: 1.55rem !important;
    line-height: 1.2;
  }

  .hero-sub {
    font-size: 12px;
    line-height: 1.6;
  }

  .hero-btn,
  .hero-btn2 {
    min-width: 80% !important;
    max-width: 100% !important;
    min-height: 40px;
    padding: 8px 10px !important;
    font-size: 10.5px !important;
  }

  .hero-floats {
    gap: 7px !important;
  }

  .float-card {
    width: calc(50% - 4px) !important;
    min-width: 120px;
    max-width: 155px;
    padding: 7px 8px !important;
    gap: 5px !important;
  }

  .float-pill {
    padding: 7px 10px !important;
    font-size: 10.5px !important;
  }

  .float-card .fc-icon,
  .float-pill .fc-icon {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    font-size: 11px !important;
  }

  .fc-text strong {
    font-size: 10px !important;
  }

  .ticker-track span {
    font-size: 10.5px;
  }
}

@media (max-width: 340px) {
  .hero-title {
    font-size: 1.42rem !important;
  }

  .hero-sub {
    font-size: 11.5px;
  }

  .hero-btn,
  .hero-btn2 {
    min-width: 80% !important;
    max-width: 100% !important;
    font-size: 10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .float-card {
    min-width: 112px;
    padding: 6px 7px !important;
  }

  .float-card .fc-icon {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
  }

  .fc-text strong {
    font-size: 9.5px !important;
  }
}

.marquee-bg {
  background-color: #16151c;
  border: 2px solid #1e3b8a;
}

.ticker {
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 22s linear infinite;
  will-change: transform;
}

.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 22px;
  color: #fffffe;
  font-family: var(--font-poppins);
  font-size: 16px;
  font-weight: 500;
}

.ticker-track i {
  color: var(--orange);
  font-size: 14px;
}

.marquee-bg:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes float-pill {

  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ===== header end ===== */

/*===== why msta start =====*/

.whyMsta {
  padding: 30px 0 50px 0 !important;
}

.section-title {
  font-family: var(--font-merienda);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.25;
  color: var(--navy-dark);
}

.section-sub {
  max-width: 720px;
  margin-inline: auto;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.7;
  color: rgba(11, 22, 53, 0.72);
}

.number {
  font-family: "Sora";
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--orange);
  flex: none;
}

.card-bg {
  position: relative;
  height: 100%;
  background-color: var(--cream);
  border: 1px solid rgba(30, 59, 138, 0.08);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.card-bg:hover {
  box-shadow: 0 12px 28px rgba(30, 59, 138, 0.1);
  transform: translateY(-8px);
}

.card-bg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: #fa7516;
  border-radius: 4px 0 0 4px !important;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}

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

.card-bg .card-title {
  font-family: var(--font-poppins);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-dark);
  margin-bottom: 0;
}

.card-bg .card-text {
  font-family: var(--font-jakarta);
  font-size: clamp(0.85rem, 1.4vw, 0.95rem);
  line-height: 1.65;
  color: rgba(11, 22, 53, 0.72);
}

@media (max-width: 575.98px) {
  .card-bg .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }
}

.whyMsta {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  isolation: isolate;
}

.whyMsta::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -60px;
  width: 260px;
  height: 260px;
  border: 40px solid rgba(250, 117, 22, 0.08);
  /* halka orange ring */
  border-radius: 50%;
  animation: drift 18s ease-in-out infinite;
  z-index: -1;
}

.whyMsta::after {
  content: "";
  position: absolute;
  top: 70%;
  right: -60px;
  width: 250px;
  height: 250px;
  border: 40px solid rgba(250, 117, 22, 0.08);
  border-radius: 50%;
  animation: spin 40s linear infinite;
  z-index: -1;
}

.whyMsta .container::before {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle,
      rgba(30, 59, 138, 0.07) 0%,
      rgba(30, 59, 138, 0.02) 60%,
      transparent 70%);
  border-radius: 50%;
  animation: drift 22s ease-in-out infinite reverse;
  z-index: -1;
}

.whyMsta .container {
  position: relative;
}

@keyframes drift {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(14px, -14px);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

  .whyMsta::before,
  .whyMsta::after,
  .whyMsta .container::before {
    animation: none;
  }
}

/*===== why msta end =====*/

/* ===== Programs start ===== */

.bg-white-sec {
  background: #fff;
}

.programs-section {
  position: relative;
  overflow: hidden;
}

/* SECTION HEADING*/

.section-head h2 {
  margin: 0;
  font-family: var(--font-merienda);
  color: var(--navy);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.2;
}

.section-head p {
  margin-top: 15px;
  margin-bottom: 0;
  font-family: var(--font-poppins);
  color: rgba(11, 22, 53, 0.68);
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  line-height: 1.8;
}

/* PROGRAM GRID */

.programs-grid {
  align-items: stretch;
}

/* PROGRAM CARD */

.program-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 22px;
  box-shadow: 0 5px 18px rgba(23, 43, 107, 0.04);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Hover */
.program-row:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 50px rgba(23, 43, 107, 0.14);
  border-color: rgba(250, 117, 22, 0.2);
}

/* PROGRAM SIDE */

.program-side {
  width: 100%;
  flex-shrink: 0;
  padding: 22px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Tier */
.tier {
  font-family: var(--font-poppins);
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  text-transform: uppercase;
}

/* Duration */
.dur {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-jakarta);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
}

.dur small {
  font-family: var(--font-poppins);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* EXPLORE */

.ps-explore {
  background: #ede6fa;
}

.ps-explore .tier,
.ps-explore .dur {
  color: #5b2dbd;
}

/* BUILD */

.ps-build {
  background: var(--navy-dark);
}

.ps-build .tier,
.ps-build .dur {
  color: #fff;
}

/* MASTER */

.ps-master {
  background: #ffede0;
}

.ps-master .tier,
.ps-master .dur {
  color: var(--orange);
}

/* PROGRAM BODY */

.program-body {
  padding: 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Heading */
.program-body h3 {
  margin: 0 0 7px;
  font-family: var(--font-poppins);
  color: var(--navy);
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.35;
}

/* Intro */
.program-intro {
  margin: 0;
  font-family: var(--font-poppins);
  color: rgba(11, 22, 53, 0.62);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* BEST FOR */

.best-for {
  margin: 18px 0;
  padding: 11px 13px;
  background: #faf6f0;
  border-left: 3px solid var(--orange);
  border-radius: 0 10px 10px 0;
  font-family: var(--font-jakarta);
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(11, 22, 53, 0.65);
}

.best-for strong {
  color: var(--navy);
  font-weight: 700;
}

/* TAGS */

.tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  flex: 1;
}

.tags span {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid #dfe9f5;
  border-radius: 50px;
  background: #fff;
  font-family: var(--font-jakarta);
  color: rgba(11, 22, 53, 0.62);
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.3;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease;
}

/* Tags Hover */
.program-row:hover .tags span {
  border-color: rgba(250, 117, 22, 0.45);
  color: var(--navy);
}

/* CTA */

.cta-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 22px;
  text-decoration: none;
  font-family: var(--font-poppins);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--orange);
  transition: color 0.25s ease;
}

.cta-line i {
  transition: transform 0.3s ease;
}

.cta-line:hover {
  color: var(--navy-dark);
}

.program-row:hover .cta-line i {
  transform: translateX(6px);
}

/* COMPARE BUTTON */

.compare-programs {
  margin-top: 40px;
}

.hero-btn2 {
  border: 2px solid var(--navy);
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-poppins);
  font-size: 14px;
  font-weight: 400;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hero-btn2:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(30, 59, 138, 0.18);
}

.hero-btn2 i {
  transition: transform 0.3s ease;
}

.hero-btn2:hover i {
  transform: translateX(5px);
}

/* LARGE DESKTOP 1200px+ */

@media (min-width: 1200px) {
  .programs-section {
    padding: 10px 0;
  }

  .program-body {
    padding: 28px;
  }

  .program-side {
    padding: 24px 28px;
  }
}

/* LAPTOP 992px - 1199px */

@media (min-width: 992px) and (max-width: 1199.98px) {
  .programs-section {
    padding: 20px 0;
  }

  .program-side {
    padding: 20px;
  }

  .program-body {
    padding: 21px;
  }

  .program-body h3 {
    font-size: 1.05rem;
  }

  .program-intro {
    font-size: 0.78rem;
  }

  .best-for {
    font-size: 0.73rem;
    padding: 10px;
  }

  .tags {
    gap: 6px;
  }

  .tags span {
    padding: 5px 9px;
    font-size: 0.64rem;
  }

  .cta-line {
    font-size: 0.77rem;
  }
}

/* TABLET 768px - 991px */

@media (min-width: 768px) and (max-width: 991.98px) {
  .programs-section {
    padding: 20px 0;
  }

  .section-head {
    margin-bottom: 35px;
  }

  .program-row {
    flex-direction: row;
    min-height: 300px;
  }

  .program-side {
    width: 155px;
    min-height: 100%;
    padding: 22px 18px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .dur {
    display: block;
    font-size: 2.1rem;
  }

  .dur small {
    display: block;
    margin-top: 5px;
  }

  .program-body {
    padding: 22px;
  }

  .program-body h3 {
    font-size: 1.1rem;
  }

  .program-intro {
    font-size: 0.8rem;
  }

  .best-for {
    font-size: 0.74rem;
  }

  .tags span {
    font-size: 0.66rem;
    padding: 5px 9px;
  }
}

/* MOBILE 576px - 767px */

@media (max-width: 767.98px) {
  .programs-section {
    padding: 20px 0;
  }

  .section-head {
    margin-bottom: 30px;
  }

  .section-head p {
    line-height: 1.7;
  }

  .programs-grid {
    --bs-gutter-y: 1.25rem;
  }

  .program-row {
    border-radius: 18px;
  }

  .program-side {
    width: 100%;
    padding: 17px 20px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .tier {
    font-size: 0.68rem;
  }

  .dur {
    font-size: 1.8rem;
    gap: 5px;
  }

  .dur small {
    display: inline;
    font-size: 0.58rem;
    margin: 0;
  }

  .program-body {
    padding: 21px;
  }

  .program-body h3 {
    font-size: 1.08rem;
  }

  .program-intro {
    font-size: 0.8rem;
  }

  .best-for {
    margin: 15px 0;
    padding: 10px 12px;
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .tags {
    gap: 6px;
  }

  .tags span {
    padding: 5px 9px;
    font-size: 0.65rem;
  }

  .cta-line {
    margin-top: 20px;
    font-size: 0.8rem;
  }

  .compare-programs {
    margin-top: 32px;
  }

  .hero-btn2 {
    font-size: 12px;
    padding: 10px 16px;
  }
}

/* SMALL MOBILE Below 576px */

@media (max-width: 575.98px) {
  .programs-section {
    padding: 25px 0;
  }

  .section-head h2 {
    font-size: 1.4rem;
  }

  .section-head p {
    font-size: 0.82rem;
    line-height: 1.7;
  }

  .program-side {
    padding: 15px 17px;
  }

  .tier {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .dur {
    font-size: 1.65rem;
  }

  .dur small {
    font-size: 0.55rem;
  }

  .program-body {
    padding: 19px;
  }

  .program-body h3 {
    font-size: 1rem;
    line-height: 1.4;
  }

  .program-intro {
    font-size: 0.77rem;
  }

  .best-for {
    font-size: 0.71rem;
    padding: 9px 10px;
  }

  .tags span {
    font-size: 0.61rem;
    padding: 5px 8px;
  }

  .cta-line {
    font-size: 0.76rem;
  }
}

/* VERY SMALL DEVICES Below 400px */

@media (max-width: 399.98px) {
  .programs-section {
    padding: 20px 0;
  }

  .section-head h2 {
    font-size: 1.5rem;
  }

  .program-side {
    padding: 14px 15px;
  }

  .program-body {
    padding: 17px;
  }

  .program-body h3 {
    font-size: 0.95rem;
  }

  .best-for {
    font-size: 0.68rem;
  }

  .tags span {
    font-size: 0.58rem;
    padding: 4px 7px;
  }

  .hero-btn2 {
    width: 100% !important;
    font-size: 11px;
  }
}

/* REDUCED MOTION */

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

  .program-row,
  .tags span,
  .cta-line,
  .cta-line i,
  .hero-btn2,
  .hero-btn2 i {
    transition: none !important;
  }
}

/* ===== Programs end ===== */

/* ===== THE MSTA BUILDCYCLE start ===== */

.builtcycle {
  position: relative;
  overflow: hidden;
  background-color: #ffede0;
  padding: 20px 0;
}

.builtcycle::before {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 260px;
  height: 260px;
  border: 30px solid rgba(30, 59, 138, 0.06);
  border-radius: 50%;
  z-index: 0;
}

.builtcycle .container {
  position: relative;
  z-index: 1;
}

.builtcycle .section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.25;
  color: var(--navy-dark);
}

.builtcycle .section-sub {
  max-width: 680px;
  margin-inline: auto;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.7;
  color: rgba(11, 22, 53, 0.72);
}

.cycle-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: linear-gradient(165deg, #2a4cae 0%, #1e3b8a 55%, #16296b 100%);
  overflow: hidden;
  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out;
}

.cycle-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(30, 59, 138, 0.35);
}

.step-num {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-jakarta);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
}

/* icon chip */
.border-icon {
  height: 55px;
  width: 55px;
  border: 1px solid var(--orange);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(250, 117, 22, 0.33);
  margin: 22px auto 0;
  transition: background-color 0.25s ease;
}

.border-icon i {
  color: var(--orange);
  font-size: 22px;
  transition: color 0.25s ease;
}

.cycle-card:hover .border-icon {
  background-color: var(--orange);
}

.cycle-card:hover .border-icon i {
  color: #fff;
}

.card-heading {
  font-family: var(--font-poppins);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 12px 0 6px;
}

.card-para {
  font-family: var(--font-jakarta);
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85) !important;
}

.learn-row-bg {
  background-color: #0b1635f4;
}

.flow-arrow {
  color: var(--orange);
}

@media (max-width: 575.98px) {
  .learn-row-bg .fs-5 {
    font-size: 0.95rem !important;
  }

  .learn-row-bg .flow-arrow {
    font-size: 12px;
    margin: 0 6px !important;
  }
}

/* phone tweaks */
@media (max-width: 575.98px) {
  .builtcycle {
    padding: 40px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cycle-card {
    transition: none;
  }
}

/* ===== THE MSTA BUILDCYCLE end ===== */

/* ===== msta lab start ===== */

.bg-light-sec {
  background:
    radial-gradient(700px 400px at 90% 10%,
      rgba(147, 197, 253, 0.25),
      transparent 60%),
    linear-gradient(160deg, #f4f9fe 0%, #eaf2fc 100%);
}

.bento1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
  gap: 1.2rem;
}

.b-tile {
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 22px;
  padding: 1.7rem;
  transition: 0.35s;
  position: relative;
  overflow: hidden;
}

.b-tile:hover {
  border-color: var(--msta-orange);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(23, 43, 107, 0.13);
}

.b-tile h5 {
  color: var(--msta-navy);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.b-tile p {
  color: var(--msta-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

.b-tile .icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: 0.9rem;
  background: rgba(249, 115, 22, 0.12);
  color: var(--msta-orange);
  transition: 0.35s;
}

.b-tile.alt .icon {
  background: rgba(37, 99, 235, 0.1);
  color: var(--navy-dark);
}

/* hover pe icon bhara hua */
.b-tile:hover .icon {
  background: var(--orange);
  color: #fff;
}

.b-lg {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.b-lg .icon {
  margin-bottom: 1rem;
}

.b-lg h5 {
  font-size: 1.25rem;
}

.b-lg p {
  font-size: 0.95rem;
  max-width: 480px;
}

.b-img {
  background: url("../img/classroom\(2\).png") center/cover no-repeat;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 28px 28px 28px 90px;
  overflow: hidden;
  height: 350px !important;
  margin-top: 10px;
  position: relative;

  box-shadow: 0 15px 40px rgba(30, 59, 138, 0.15);
  transition:
    border-radius 0.4s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.b-img:hover {
  background: url("../img/classroom\(2\).png") center/cover no-repeat;
  border-color: var(--orange);
  border-radius: 90px 28px 28px 28px;
  box-shadow: 0 20px 50px rgba(250, 117, 22, 0.25);
  transform: translateY(-6px);
}

.b-img h5 {
  color: #fff;
}

.b-img p {
  color: rgba(255, 255, 255, 0.8);
}

.b-img .icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: 0.3s ease;
}

.b-img .icon:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .b-lg {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 240px;
  }
}

@media (max-width: 575px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .b-tile {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 1.5rem;
  }

  .b-lg {
    min-height: 230px;
  }
}

/* ===== msta lab end ===== */

/* ===== UNIVERSITY SECTION start===== */

.university-section {
  position: relative;
  padding: 30px 0;
  background: #ffede0;
  overflow: hidden;
}

/* EYEBROW */

/* .university-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-family: var(--font-poppins);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--orange);
} */

/* .university-eyebrow span {
  width: 60px;
  height: 3px;
  background: var(--orange);
  border-radius: 10px;
} */

/* TITLE */

.university-title {
  max-width: 650px;
  /* margin: 0 0 24px; */
  font-family: var(--font-poppins);
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy-dark);
}

.university-title span {
  color: var(--orange);
}

/* TEXT */

.university-intro,
.university-description {
  max-width: 650px;
  font-family: var(--font-jakarta);
  /* color: #667085; */
  font-size: 15px;
  line-height: 1.75;
}

.university-intro {
  margin-bottom: 5px;
  font-weight: 600;
}

/* IMAGE */

.university-image-box {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.university-image {
  position: relative;
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 35px 90px 35px 35px;
  z-index: 2;
  box-shadow: 0 25px 60px rgba(11, 22, 53, 0.15);
}

/* Orange Circle */

.university-orange-circle {
  position: absolute;
  left: -35px;
  top: 130px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--orange);
  z-index: 1;
}

/* Dots */

.university-dots {
  position: absolute;
  right: -25px;
  bottom: -25px;
  width: 130px;
  height: 130px;
  background-image: radial-gradient(var(--navy) 2px, transparent 2px);
  background-size: 16px 16px;
  opacity: 0.15;
  z-index: 1;
}

/* Image Badge */

.university-image-badge {
  position: absolute;
  right: -16px;
  bottom: 30px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(11, 22, 53, 0.15);
}

.university-image-badge i {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.12);
  color: var(--orange);
  font-size: 20px;
}

.university-image-badge strong,
.university-image-badge span {
  display: block;
  font-family: var(--font-poppins);
}

.university-image-badge strong {
  color: var(--navy);
  font-size: 15px;
}

.university-image-badge span {
  color: var(--orange);
  font-size: 14px;
  font-weight: 600;
}

/* UNIVERSITY SOLUTIONS */

.solutions-box {
  padding: 35px 40px;
  background: linear-gradient(135deg, #f5f9ff, #f8fbff);
  border-radius: 30px;
  border: 1px solid #edf2f7;
}

.solutions-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.solutions-heading>span {
  width: 3px;
  height: 34px;
  border-radius: 5px;
  background: var(--orange);
}

.solutions-heading h3 {
  margin: 0;
  font-family: var(--font-poppins);
  font-size: 22px;
  font-weight: 700;
}

/* Solution Item */

.solution-item {
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-right: 1px solid #e5eaf1;
  border-bottom: 1px solid #e5eaf1;
  transition: all 0.35s ease;
}

.solution-item:hover {
  background: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(11, 22, 53, 0.07);
  border-radius: 15px;
}

/* Solution Icon */

.solution-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(30, 59, 138, 0.08);
  color: var(--navy);
  font-size: 15px;
  transition: all 0.3s ease;
}

.solution-item:hover .solution-icon {
  background: var(--orange);
  color: #ffffff;
}

.solution-item h5 {
  margin: 0;
  font-family: var(--font-poppins);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #212529;
}

/* LIFECYCLE */

.lifecycle-box {
  display: flex;
  align-items: center;
  gap: 35px;
  padding: 32px 35px;
  background: #eef7ff;
  border-radius: 28px;
  border: 1px solid #e0edf9;
}

/* Left Content */

.lifecycle-content {
  flex: 0 0 220px;
  display: flex;
  gap: 5px;
}

.lifecycle-line {
  width: 3px;
  min-width: 3px;
  background: var(--orange);
  border-radius: 10px;
}

.lifecycle-content h3 {
  margin: 0 0 12px;
  font-family: var(--font-poppins);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;

  color: #212529;
}

.lifecycle-content p {
  margin: 0;
  font-family: var(--font-jakarta);
  font-size: 12px;
  line-height: 1.6;
  color: #667085;
}

/* PROCESS */

.lifecycle-process {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.process-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 65px;
  text-align: center;
}

.process-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
  border-radius: 50%;
  background: #adadad00;
  color: var(--navy-dark);
  font-size: 18px;
  box-shadow: 0 5px 15px rgba(30, 59, 138, 0.08);
}

.process-item span {
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 500;
  color: #212529;
  white-space: nowrap;
}

/* TABLET */

@media (max-width: 1199.98px) {
  .solution-item {
    min-height: 100px;
  }

  .lifecycle-box {
    flex-direction: column;
    align-items: stretch;
  }

  .lifecycle-content {
    flex: none;
  }

  .lifecycle-process {
    width: 100%;
  }
}

/* ==========================================
   TABLET
========================================== */

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

  .university-image-box {
    margin-top: 20px;
  }

  .solutions-box {
    padding: 30px 25px;
  }

  .solution-item {
    border-right: none;
  }

  .lifecycle-process {
    flex-wrap: wrap;
    justify-content: center;

    row-gap: 25px;
  }

  .process-arrow {
    display: none;
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 575.98px) {
  .university-section {
    padding: 60px 0;
  }

  /* .university-eyebrow {
    font-size: 13px;
    letter-spacing: 1.5px;
  } */

  /* .university-eyebrow span {
    width: 40px;
  } */

  .university-title {
    font-size: 2rem;
  }

  .university-intro,
  .university-description {
    font-size: 15px;
    line-height: 1.7;
  }

  /* Image */

  .university-image-box {
    min-height: 330px;
  }

  .university-image {
    height: 330px;

    border-radius: 25px 55px 25px 25px;
  }

  .university-orange-circle {
    width: 55px;
    height: 55px;

    left: -15px;
    top: 100px;
  }

  .university-image-badge {
    right: 10px;
    bottom: 20px;

    padding: 12px 15px;
  }

  .university-image-badge i {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .university-image-badge strong {
    font-size: 12px;
  }

  .university-image-badge span {
    font-size: 11px;
  }

  /* Solutions */

  .solutions-box {
    padding: 25px 15px;

    border-radius: 22px;
  }

  .solutions-heading h3 {
    font-size: 20px;
  }

  .solution-item {
    min-height: 85px;

    padding: 14px 10px;
  }

  .solution-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    font-size: 16px;
  }

  .solution-item h5 {
    font-size: 13px;
  }

  /* Lifecycle */

  .lifecycle-box {
    padding: 25px 20px;

    border-radius: 22px;
  }

  .lifecycle-content h3 {
    font-size: 21px;
  }

  .lifecycle-process {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px 15px;
  }

  .process-item {
    min-width: auto;
  }

  .process-icon {
    width: 48px;
    height: 48px;
  }

  .process-item span {
    font-size: 11px;
  }
}

/* ===== UNIVERSITY SECTION End ===== */

/*===== MENTORS start =====*/
.card-titel-font {
  font-family: var(--font-poppins);
  font-size: 18px;
  font-weight: 700;
  color: #212529;
}

.card-text-para {
  font-family: var(--font-jakarta);
  font-size: 16px;
  font-weight: 500;
  color: #212529;
}

.card-up {
  transition: transform 0.4s ease;
}

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

/*===== MENTORS end =====*/

/* ===== UNIVERSITY PARTNERSHIPS start =====*/

.university-partnerships {
  background-color: #faf6f0;
  overflow: hidden;
}

/* SECTION HEADER */

.up-eyebrow {
  display: inline-block;
  color: #fa7516;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.up-title {
  margin-top: 10px;
  color: #0b1635;
  font-size: 42px;
  line-height: 1.2;
}

.up-title span {
  color: #fa7516;
}

.up-line {
  width: 100px;
  height: 2px;
  margin-top: 18px;
  margin-bottom: 18px;
  background-color: #5b2dbd;
}

.up-intro {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 15px;
  line-height: 1.8;
}

/* MAIN CARD */

.up-main-card {
  position: relative;
  padding: 40px;
  background-color: #0b1635;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;

  box-shadow: 0 18px 45px rgba(11, 22, 53, 0.12);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.up-main-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 55px rgba(11, 22, 53, 0.18);
}

.up-main-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  top: -80px;

  border: 2px solid rgba(250, 117, 22, 0.35);
  border-radius: 50%;
}

.up-main-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: 30px;
  bottom: -55px;

  background-color: rgba(250, 117, 22, 0.08);
  border-radius: 50%;
}

.up-card-number {
  position: absolute;
  top: 25px;
  right: 30px;

  font-family: var(--font-poppins);
  font-size: 12px;
  font-weight: 700;

  color: rgba(255, 255, 255, 0.35);
}

.up-icon {
  width: 65px;
  height: 65px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 25px;

  border-radius: 16px;

  background-color: #fa7516;
  color: #fff;

  font-size: 25px;

  transition: transform 0.3s ease;
}

.up-main-card:hover .up-icon {
  transform: scale(1.08) rotate(-3deg);
}

.up-main-card h3 {
  position: relative;
  z-index: 2;

  margin-bottom: 15px;

  font-size: 28px;
  line-height: 1.3;
}

.up-main-card>p {
  position: relative;
  z-index: 2;

  margin-bottom: 25px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 14px;
  line-height: 1.8;
}

.up-highlight {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;

  border-radius: 12px;

  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.up-highlight i {
  color: #fa7516;
  font-size: 20px;
}

.up-highlight span {
  color: #fff;
  font-size: 13px;
}

.up-highlight strong {
  margin: 0 5px;
  color: #fa7516;
}

/* FEATURES*/

.up-content-head {
  margin-bottom: 20px;
}

.up-content-head>span {
  color: #fa7516;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.up-content-head h3 {
  margin-top: 7px;
  margin-bottom: 0;

  color: #0b1635;
  font-size: 25px;
}

.up-feature {
  min-height: 78px;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 13px;

  background-color: #fff;

  border: 1px solid rgba(30, 59, 138, 0.07);
  border-radius: 14px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.up-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 117, 22, 0.3);
  box-shadow: 0 10px 25px rgba(11, 22, 53, 0.08);
}

.up-feature-icon {
  width: 45px;
  height: 45px;
  min-width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background-color: #e8edfc;
  color: #1e3b8a;
  font-size: 17px;
  transition: all 0.3s ease;
}

.up-feature:hover .up-feature-icon {
  background-color: #fa7516;
  color: #fff;
  transform: scale(1.08);
}

.up-feature h6 {
  margin: 0;
  color: #0b1635;
  font-size: 13px;
  line-height: 1.45;
}

/* PARTNERSHIP MODELS */

.up-models-wrapper {
  padding: 35px;
  background-color: #fff;
  border-radius: 24px;
  border: 1px solid rgba(30, 59, 138, 0.07);
  box-shadow: 0 12px 35px rgba(11, 22, 53, 0.06);
}

.up-model-title {
  margin-top: 10px;
  margin-bottom: 12px;
  color: #0b1635;
  font-size: 30px;
  line-height: 1.25;
}

.up-models-wrapper>.row>.col-lg-4 p {
  color: #667085;
  font-size: 14px;
  line-height: 1.7;
}

/* Model Card */

.up-model {
  position: relative;
  min-height: 85px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  background-color: #faf6f0;
  border: 1px solid rgba(30, 59, 138, 0.06);
  border-radius: 13px;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.up-model:hover {
  background-color: #fff0e7;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(11, 22, 53, 0.07);
}

.up-model>span {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 700;
  color: rgba(30, 59, 138, 0.25);
}

.up-model>i {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: #e8edfc;
  color: #1e3b8a;
  font-size: 16px;
  transition: all 0.3s ease;
}

.up-model:hover>i {
  background-color: #fa7516;
  color: #fff;
}

.up-model p {
  margin: 0;
  padding-right: 15px;
  color: #344054;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

/* CTA */

.up-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-radius: 25px;
  background-color: #fa7516;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(250, 117, 22, 0.25);
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.up-cta:hover {
  background-color: #e2660c;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(250, 117, 22, 0.32);
}

.up-cta i {
  transition: transform 0.3s ease;
}

.up-cta:hover i {
  transform: translateX(4px);
}

/* TABLET */

@media (max-width: 991.98px) {
  .up-title {
    font-size: 36px;
  }

  .up-main-card {
    padding: 32px;
  }

  .up-main-card h3 {
    font-size: 25px;
  }

  .up-models-wrapper {
    padding: 28px;
  }
}

/* MOBILE / SM */

@media (max-width: 767.98px) {
  .up-title {
    font-size: 30px;
  }

  .up-intro {
    font-size: 14px;
  }

  .up-main-card {
    padding: 28px 22px;
    border-radius: 20px;
  }

  .up-main-card h3 {
    font-size: 23px;
  }

  .up-main-card>p {
    font-size: 13px;
  }

  .up-content-head h3 {
    font-size: 22px;
  }

  .up-feature {
    min-height: 70px;
  }

  .up-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .up-feature h6 {
    font-size: 12px;
  }

  .up-models-wrapper {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .up-model-title {
    font-size: 26px;
  }
}

/* SMALL MOBILE */

@media (max-width: 575.98px) {
  .university-partnerships {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }

  .up-eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .up-title {
    font-size: 25px;
    line-height: 1.3;
  }

  .up-line {
    width: 75px;
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .up-intro {
    font-size: 13px;
    line-height: 1.7;
  }

  .up-main-card {
    padding: 25px 18px;
  }

  .up-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 20px;
    font-size: 21px;
  }

  .up-main-card h3 {
    font-size: 21px;
  }

  .up-main-card>p {
    font-size: 12px;
    line-height: 1.7;
  }

  .up-highlight {
    padding: 12px;
  }

  .up-highlight span {
    font-size: 11px;
  }

  .up-feature {
    min-height: 65px;
    padding: 10px;
    gap: 10px;
    border-radius: 11px;
  }

  .up-feature-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 14px;
    border-radius: 9px;
  }

  .up-feature h6 {
    font-size: 11px;
  }

  .up-models-wrapper {
    padding: 20px 15px;
  }

  .up-model-title {
    font-size: 23px;
  }

  .up-models-wrapper>.row>.col-lg-4 p {
    font-size: 12px;
  }

  .up-model {
    min-height: 72px;
    padding: 11px;
    gap: 10px;
  }

  .up-model>i {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 14px;
  }

  .up-model p {
    font-size: 11px;
  }

  .up-cta {
    width: 100%;
    justify-content: center;
    padding: 12px 15px;
    font-size: 12px;
  }
}

/* VERY SMALL MOBILE */

@media (max-width: 399.98px) {
  .up-title {
    font-size: 22px;
  }

  .up-main-card {
    padding: 22px 15px;
  }

  .up-feature h6 {
    font-size: 10.5px;
  }

  .up-model p {
    font-size: 10.5px;
  }
}

/* ===== UNIVERSITY PARTNERSHIPS end =====  */

/* ===== FOR ENTERPRISES start ===== */
.corporate-section {
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  background: #f7faff;
}

/* Background design - circle */
.corporate-section::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border: 80px solid rgba(30, 59, 138, 0.06);
  border-radius: 50%;
  top: -180px;
  right: -120px;
  pointer-events: none;
}

/* Background design - orange shape */
.corporate-section::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.07);
  bottom: -130px;
  left: -100px;
  pointer-events: none;
}

/* Content */

.corporate-content {
  position: relative;
  z-index: 2;
}

.corporate-label {
  display: inline-block;
  color: var(--orange);
  font-family: var(--font-poppins);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.corporate-content h2 {
  font-family: var(--font-poppins);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy-dark);
  margin-bottom: 25px;
}

.corporate-content h2 span {
  color: var(--orange);
}

.corporate-content p {
  max-width: 650px;
  font-family: var(--font-jakarta);
  font-size: 15px;
  line-height: 1.8;
  color: #000000;
  margin-bottom: 15px;
}

/* LEARNING CARD */

.corporate-card {
  position: relative;
  z-index: 2;
  padding: 35px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(30, 59, 138, 0.08);
  box-shadow: 0 20px 60px rgba(11, 22, 53, 0.1);
  overflow: hidden;
}

/* Card pseudo design */

.corporate-card::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 25px solid rgba(250, 117, 22, 0.08);
  top: -65px;
  right: -60px;
}

.corporate-card::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(30, 59, 138, 0.06);
  bottom: -30px;
  left: -25px;
}

.corporate-card h4 {
  position: relative;
  z-index: 2;
  font-family: var(--font-poppins);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 25px;
}

/* Learning items */

.learning-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.learning-list span {
  padding: 9px 14px;
  border-radius: 50px;
  background: #f5f7fc;
  border: 1px solid rgba(30, 59, 138, 0.08);
  color: var(--navy);
  font-family: var(--font-jakarta);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.learning-list span:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: translateY(-3px);
}

/* RESPONSIVE */

@media (max-width: 991.98px) {
  .corporate-section {
    padding: 75px 0;
  }

  .corporate-content {
    margin-bottom: 45px;
  }

  .corporate-content h2 {
    font-size: 2.7rem;
  }
}

@media (max-width: 575.98px) {
  .corporate-section {
    padding: 60px 0;
  }

  .corporate-content h2 {
    font-size: 2.2rem;
  }

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

  .corporate-card {
    padding: 25px 20px;
    border-radius: 18px;
  }

  .corporate-card h4 {
    font-size: 20px;
  }

  .learning-list span {
    font-size: 12px;
    padding: 8px 11px;
  }

  .corporate-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ===== FOR ENTERPRISES end ===== */

/* ===== UPCOMING COHORTS start ===== */
.cohort-section {
  position: relative;
  overflow: hidden;
  padding: 30px 0 !important;
  background: #ffffff;
}

/*  BACKGROUND DESIGN  */

.cohort-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 75px solid rgba(30, 59, 138, 0.055);
  border-radius: 50%;
  top: -180px;
  left: -150px;
  pointer-events: none;
}

.cohort-section::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.055);
  right: -130px;
  bottom: -140px;
  pointer-events: none;
}

/*  HEADING  */

.cohort-eyebrow {
  position: relative;
  display: inline-block;
  font-family: var(--font-poppins);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--orange);
  margin-bottom: 12px;
}

.cohort-title {
  font-family: var(--font-poppins);
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy-dark);
  margin-bottom: 5px;
}

.cohort-title span {
  color: var(--orange);
}

.cohort-description {
  max-width: 650px;
  margin: auto;
  font-family: var(--font-jakarta);
  font-size: 15px;
  line-height: 1.8;
  color: #040404;
}

/*  TABLE WRAPPER  */

.cohort-table-wrapper {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e7ebf3;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(11, 22, 53, 0.08);
}

/*  TABLE  */

.cohort-table {
  width: 100%;
  min-width: 850px;
}

/* Table Header */

.cohort-table thead {
  background: var(--navy);
}

.cohort-table thead th {
  padding: 10px 15px;
  border: none;
  color: #fff;
  font-family: var(--font-poppins);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Table Body */

.cohort-table tbody tr {
  border-bottom: 1px solid #edf0f5;
  transition: background-color 0.3s ease;
}

.cohort-table tbody tr:last-child {
  border-bottom: none;
}

.cohort-table tbody tr:hover {
  background: #fff9f5;
}

.cohort-table tbody td {
  padding: 18px 20px;
  border: none;
  font-family: var(--font-jakarta);
}

/*  PROGRAM  */

.program-name {
  display: flex;
  align-items: center;
  gap: 14px;
}

.program-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(250, 117, 22, 0.1);
  color: var(--orange);
  font-size: 18px;
  transition: all 0.35s ease;
}

.cohort-table tbody tr:hover .program-icon {
  background: var(--orange);
  color: #fff;
  transform: rotate(-5deg);
}

.program-name strong {
  display: block;
  font-family: var(--font-poppins);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-dark);
}

.program-name small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-jakarta);
  font-size: 11px;
  color: #8a93a6;
}

/*  DURATION  */

.cohort-value {
  display: inline-block;
  font-family: var(--font-poppins);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

/* LEVEL */

.level {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 50px;
  font-family: var(--font-jakarta);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.beginner {
  color: #1e3b8a;
  background: rgba(30, 59, 138, 0.08);
}

.intermediate {
  color: #b65b0a;
  background: rgba(250, 117, 22, 0.1);
}

.comprehensive {
  color: #fff;
  background: var(--navy);
}

/* MODE */

.mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-jakarta);
  font-size: 12px;
  font-weight: 600;
  color: #5e687d;
  white-space: nowrap;
}

.mode i {
  color: var(--orange);
}

/*  RESPONSIVE  */

@media (max-width: 991.98px) {
  .cohort-section {
    padding: 75px 0 !important;
  }

  .cohort-title {
    font-size: 2.7rem;
  }
}

@media (max-width: 575.98px) {
  .cohort-section {
    padding: 60px 0 !important;
  }

  .cohort-title {
    font-size: 2.15rem;
  }

  .cohort-description {
    font-size: 14px;
    line-height: 1.7;
  }

  .cohort-table-wrapper {
    border-radius: 16px;
  }

  .cohort-table thead th {
    padding: 15px 18px;
  }

  .cohort-table tbody td {
    padding: 18px;
  }

  .program-icon {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .program-name strong {
    font-size: 13px;
  }

  .program-name small {
    font-size: 10px;
  }

  .cohort-btn {
    font-size: 13px;
    padding: 12px 18px;
  }
}

/* ===== UPCOMING COHORTS end ===== */

/* ===== LEARNER TRANSFORMATION start ===== */
.learner-transformation {
  position: relative;
  overflow: hidden;
  padding: 30px 0 !important;
  background: var(--cream);
}

/* Background Shapes */
.learner-transformation::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 70px solid rgba(30, 59, 138, 0.045);
  border-radius: 50%;
  top: -210px;
  left: -170px;
  pointer-events: none;
}

.learner-transformation::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.055);
  right: -140px;
  bottom: -150px;
  pointer-events: none;
}

/* Eyebrow */
.transformation-eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;

  font-family: var(--font-poppins);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--orange);
}

/* Title */
.transformation-title {
  position: relative;
  margin-bottom: 18px;

  font-family: var(--font-poppins);
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy-dark);
}

.transformation-title span {
  color: var(--orange);
}

/* Description */
.transformation-description {
  max-width: 680px;
  margin: 0 auto;

  font-family: var(--font-jakarta);
  font-size: 15px;
  line-height: 1.8;
  color: #060606;
}

/* Journey Row */
.transformation-row {
  position: relative;
  z-index: 2;
  margin-top: 25px;
}

/* Card */
.transformation-card {
  position: relative;
  height: 100%;
  padding: 30px 28px;

  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 20px;

  box-shadow: 0 15px 45px rgba(11, 22, 53, 0.07);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.transformation-card:hover {
  transform: translateY(-8px);
  border-color: rgba(250, 117, 22, 0.3);
  box-shadow: 0 22px 55px rgba(11, 22, 53, 0.11);
}

/* Highlight Middle Card */
.active-card {
  background: var(--navy);
  border-color: var(--navy);
}

.active-card h3,
.active-card p {
  color: #fff;
}

.active-card .step-number {
  color: rgba(255, 255, 255, 0.65);
}

.active-card .step-label {
  color: #fff;
}

/* Top Area */
.transformation-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.step-number {
  font-family: var(--font-poppins);
  font-size: 13px;
  font-weight: 700;
  color: #a0a8b8;
}

.step-label {
  font-family: var(--font-poppins);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--navy);
}

/* Icon */
.transformation-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 15px;
  background: rgba(250, 117, 22, 0.1);
  color: var(--orange);
  font-size: 22px;
  transition: all 0.35s ease;
}

.transformation-card:hover .transformation-icon {
  transform: scale(1.08) rotate(-4deg);
}

.active-card .transformation-icon {
  background: var(--orange);
  color: #fff;
}

/* Heading */
.transformation-card h3 {
  margin-bottom: 12px;

  font-family: var(--font-poppins);
  font-size: 21px;
  font-weight: 700;
  color: var(--navy-dark);
}

/* Text */
.transformation-card p {
  margin: 0;

  font-family: var(--font-jakarta);
  font-size: 14px;
  line-height: 1.8;
  color: #697386;
}

.journey-arrow:nth-of-type(1) {
  left: calc(33.333% - 19px);
  top: 50%;
}

.journey-arrow:nth-of-type(2) {
  left: calc(66.666% - 19px);
  top: 50%;
}

/* TABLET */

@media (max-width: 991.98px) {
  .learner-transformation {
    padding: 75px 0 !important;
  }

  .transformation-row {
    margin-top: 50px;
  }

  .transformation-card {
    margin-bottom: 25px;
  }

  .journey-arrow {
    display: none;
  }

  .impact-message {
    margin-top: 30px;
  }
}

/* MOBILE */

@media (max-width: 575.98px) {
  .learner-transformation {
    padding: 60px 0 !important;
  }

  .transformation-title {
    font-size: 2.15rem;
  }

  .transformation-description {
    font-size: 14px;
    line-height: 1.7;
  }

  .transformation-row {
    margin-top: 40px;
  }

  .transformation-card {
    padding: 25px 22px;
    border-radius: 16px;
  }

  .transformation-card h3 {
    font-size: 19px;
  }

  .transformation-card p {
    font-size: 13px;
  }

  .impact-message {
    padding: 25px 20px;
    margin-top: 10px;
  }

  .impact-message p {
    font-size: 13px;
  }
}

/* ===== LEARNER TRANSFORMATION end ===== */

/* ===== ABOUT MSTA start ===== */

.aboutBannerImg {
  width: 100%;
  height: 450px;
  background-image: url("../img/img1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.about-banner-content {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  max-width: 600px;
  color: #fff;
}

.about-banner-content h1 {
  font-size: 50px;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 18px;
}

.about-banner-content h1 strong {
  color: #fa7516;
}

.about-banner-content p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin-bottom: 0;
  font-weight: 500;
  color: #0b1736;
}

@media (max-width: 767.98px) {
  .aboutBannerImg {
    height: 380px;
    background-position: center;
  }

  .about-banner-content {
    left: 2%;
    right: 2%;
    max-width: 100%;
  }

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

  .about-banner-content p {
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .aboutBannerImg {
    height: 330px;
  }

  .about-banner-content h1 {
    font-size: 28px;
  }

  .about-banner-content span {
    font-size: 11px;
  }
}

.journy-icon {
  height: 45px;
  width: 45px;
  border-radius: 7px;
  background-color: #cdd9f8 !important;
  color: #1e3b8a;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    transform 0.4s ease,
    background-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

.journy-icon:hover {
  background-color: #fa7516 !important;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 8px 18px rgba(250, 117, 22, 0.2);
}

.journy-icon-goal {
  height: 55px;
  width: 55px;
  min-width: 55px;
  font-size: 25px;
  border-radius: 7px;
  background-color: #fa7516;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.journy-icon-goal:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(250, 117, 22, 0.25);
}

.journy-icon2 {
  height: 70px;
  width: 70px;
  background-color: #1e3b8a36;
  color: #1e3b8a;
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Learn-text {
  font-family: var(--font-merienda);
  line-height: 2.9rem;
  font-weight: 700;
}

/* ===== ABOUT MSTA end ===== */

/* ===== our mission START ===== */

.under-line {
  width: 30%;
  height: 2px;
  background-color: #5b2dbd;
}

.mission-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  background-color: #fff;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #344054;
  border: 1px solid rgba(30, 59, 138, 0.06);
  transition: all 0.3s ease;
}

.mission-point i {
  color: #fa7516;
  font-size: 17px;
  margin-top: 3px;
  flex-shrink: 0;
}

.mission-point:hover {
  transform: translateX(5px);
  border-color: rgba(250, 117, 22, 0.25);
  box-shadow: 0 8px 20px rgba(11, 22, 53, 0.07);
}

/* MISSION HIGHLIGHT */

.mission-highlight {
  background-color: #0b1635;
}

.mission-big-icon {
  width: 55px;
  height: 55px;
  background-color: #fa7516;
  color: #fff;
  font-size: 22px;
}

/* ADVANTAGE CARD */

.advantage-card {
  position: relative;
  padding: 22px;
  background-color: #fff;
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 16px;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.advantage-card:hover {
  transform: translateY(-5px);
  border-color: rgba(250, 117, 22, 0.25);
  box-shadow: 0 12px 28px rgba(11, 22, 53, 0.09);
}

/* Card Top */

.advantage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.advantage-top>span {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;

  color: rgba(30, 59, 138, 0.35);
}

/* Icon */

.advantage-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e8edfc;
  color: #1e3b8a;
  font-size: 20px;
  transition: all 0.35s ease;
}

.advantage-card:hover .advantage-icon {
  background-color: #fa7516;
  color: #fff;
  transform: scale(1.08);
}

@media (max-width: 991.98px) {
  .mission-point {
    padding: 12px 14px;
  }

  .advantage-card {
    padding: 20px;
  }
}

@media (max-width: 767.98px) {
  .mission-point {
    font-size: 13px;
  }

  .advantage-card h5 {
    font-size: 16px;
  }

  .advantage-card p {
    font-size: 13px;
  }
}

@media (max-width: 575.98px) {
  .mission-point {
    padding: 11px 12px;
    gap: 10px;
  }

  .mission-point i {
    font-size: 15px;
  }

  .mission-highlight {
    padding: 18px !important;
  }

  .mission-big-icon {
    width: 48px;
    height: 48px;
    font-size: 19px;
  }

  .advantage-card {
    padding: 18px;
  }
}

.lab-bedge {
  border-radius: 20px;
  border: 1px solid #fa7516;
  background-color: #fcfbfb !important;
  width: 30%;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.lab-bedge {
  width: 100%;
  padding: 10px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.lab-bedge p {
  font-family: var(--font-jakarta);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

.lab-bedge p i {
  color: #fa7516;
  transition: color 0.3s ease;
}

.lab-bedge:hover {
  background-color: #fa7516 !important;
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(250, 117, 22, 0.2);
}

.lab-bedge:hover p,
.lab-bedge:hover p i {
  color: #fff !important;
}

/* TABLET / MD */

@media (max-width: 991.98px) {
  .lab-bedge {
    padding: 9px 14px;
  }

  .lab-bedge p {
    font-size: 14px;
  }
}

/* MOBILE / SM*/

@media (max-width: 767.98px) {
  .lab-bedge {
    padding: 9px 12px;
    border-radius: 17px;
  }

  .lab-bedge p {
    font-size: 13px;
  }
}

/* SMALL MOBILE */

@media (max-width: 575.98px) {
  .lab-bedge {
    padding: 9px 10px;
    border-radius: 15px;
  }

  .lab-bedge p {
    font-size: 12px;
    line-height: 1.4;
  }

  .lab-bedge p i {
    margin-right: 6px !important;
  }
}

/* VERY SMALL MOBILE */

@media (max-width: 399.98px) {
  .lab-bedge {
    padding: 8px 9px;
  }

  .lab-bedge p {
    font-size: 11px;
  }
}

/* ===== our mission end ===== */

/* ===== EVENT AND RESOURCES START ===== */

.events-resources {
  background-color: #fff;
  overflow: hidden;
}

/* HEADING */

.er-eyebrow {
  display: inline-block;
  color: #fa7516;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.er-title {
  margin-top: 10px;
  margin-bottom: 0;
  color: #0b1635;
  font-size: 42px;
  line-height: 1.2;
}

.er-line {
  width: 100px;
  height: 2px;
  margin-top: 18px;
  margin-bottom: 18px;
  background-color: #5b2dbd;
}

.er-intro {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  color: #667085;
  font-size: 15px;
  line-height: 1.8;
}

/* EVENT CARD */

.er-card {
  position: relative;
  height: 100%;
  min-height: 280px;
  padding: 25px;
  background-color: #faf6f0;
  border: 1px solid rgba(30, 59, 138, 0.07);
  border-radius: 18px;
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease;
}

/* Decorative circle */
.er-card::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -55px;
  top: -55px;
  border: 2px solid rgba(250, 117, 22, 0.12);
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.er-card:hover::before {
  transform: scale(1.25);
}

/* Hover */
.er-card:hover {
  background-color: #fff;
  border-color: rgba(250, 117, 22, 0.25);
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(11, 22, 53, 0.1);
}

/* CARD TOP*/

.er-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.er-number {
  font-family: var(--font-poppins);
  font-size: 12px;
  font-weight: 700;
  color: rgba(30, 59, 138, 0.3);
}

/* ICON */

.er-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background-color: #e8edfc;
  color: #1e3b8a;
  font-size: 20px;
  transition:
    transform 0.35s ease,
    background-color 0.35s ease,
    color 0.35s ease;
}

.er-card:hover .er-icon {
  background-color: #fa7516;
  color: #fff;
  transform: scale(1.08) rotate(-3deg);
}

/* CARD TEXT */

.er-card h3 {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
  color: #0b1635;
  font-size: 21px;
  line-height: 1.3;
}

.er-card p {
  position: relative;
  z-index: 2;
  margin-bottom: 25px;
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}

/* CARD ARROW */

.er-arrow {
  position: absolute;
  bottom: 22px;
  right: 24px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  color: #1e3b8a;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(11, 22, 53, 0.06);
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}

.er-card:hover .er-arrow {
  background-color: #fa7516;
  color: #fff;
  transform: translateX(5px);
}

/* CTA */

.er-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 25px;
  background-color: #fa7516;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(250, 117, 22, 0.22);
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.er-cta:hover {
  background-color: #e2660c;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(250, 117, 22, 0.3);
}

.er-cta i {
  transition: transform 0.3s ease;
}

.er-cta:hover i {
  transform: translateX(4px);
}

/* TABLET / MD */

@media (max-width: 991.98px) {
  .er-title {
    font-size: 36px;
  }

  .er-card {
    min-height: 260px;
    padding: 23px;
  }

  .er-card-top {
    margin-bottom: 25px;
  }
}

/* MOBILE / SM */

@media (max-width: 767.98px) {
  .er-title {
    font-size: 30px;
  }

  .er-intro {
    font-size: 14px;
  }

  .er-card {
    min-height: 235px;
    padding: 22px;
  }

  .er-icon {
    width: 48px;
    height: 48px;

    font-size: 18px;
  }

  .er-card h3 {
    font-size: 20px;
  }

  .er-card p {
    font-size: 13px;
  }
}

/* SMALL MOBILE */

@media (max-width: 575.98px) {
  .events-resources {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }

  .er-eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .er-title {
    font-size: 25px;
    line-height: 1.3;
  }

  .er-line {
    width: 75px;
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .er-intro {
    font-size: 13px;
    line-height: 1.7;
  }

  .er-card {
    min-height: 210px;
    padding: 19px;
    border-radius: 15px;
  }

  .er-card-top {
    margin-bottom: 22px;
  }

  .er-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 16px;
  }

  .er-card h3 {
    font-size: 18px;
  }

  .er-card p {
    font-size: 12px;
    line-height: 1.6;
    max-width: 90%;
  }

  .er-arrow {
    width: 32px;
    height: 32px;
    bottom: 17px;
    right: 18px;
    font-size: 11px;
  }

  .er-cta {
    width: 100%;
    padding: 12px 15px;
    font-size: 12px;
  }
}

/* VERY SMALL MOBILE */

@media (max-width: 399.98px) {
  .er-title {
    font-size: 22px;
  }

  .er-card {
    min-height: 200px;
    padding: 17px;
  }

  .er-card h3 {
    font-size: 17px;
  }

  .er-card p {
    font-size: 11px;
  }
}

/* ===== EVENT AND RESOURCES END ===== */

/* ===== Contact Us Start ===== */
.contact-section {
  background-color: #faf6f0;
  overflow: hidden;
}

/* LEFT CONTENT */

.contact-eyebrow {
  display: inline-block;
  color: #fa7516;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.contact-title {
  margin-top: 10px;
  margin-bottom: 0;
  color: #0b1635;
  font-size: 44px;
  line-height: 1.2;
}

.contact-title span {
  display: block;
  color: #fa7516;
}

.contact-line {
  width: 90px;
  height: 2px;
  margin-top: 8px;
  margin-bottom: 12px;
  background-color: #5b2dbd;
}

.contact-description {
  color: #667085;
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 25px;
}

/* CONTACT HIGHLIGHT */

.contact-highlight {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px;
  margin-bottom: 25px;
  background-color: #fff;
  border-left: 3px solid #fa7516;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(11, 22, 53, 0.05);
}

.contact-highlight-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #e8edfc;
  color: #1e3b8a;
  font-size: 18px;
  transition: all 0.3s ease;
}

.contact-highlight:hover .contact-highlight-icon {
  background-color: #fa7516;
  color: #fff;
  transform: scale(1.08);
}

.contact-highlight span {
  display: block;
  margin-bottom: 4px;
  color: #0b1635;
  font-size: 13px;
  font-weight: 700;
}

.contact-highlight p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

/* CTA */

.contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 25px;
  background-color: #fa7516;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  box-shadow: 0 8px 22px rgba(250, 117, 22, 0.22);
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.contact-cta:hover {
  background-color: #e2660c;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(250, 117, 22, 0.3);
}

.contact-cta i {
  transition: transform 0.3s ease;
}

.contact-cta:hover i {
  transform: translateX(4px);
}

/* CONTACT CARD */

.contact-card {
  position: relative;
  min-height: 220px;
  padding: 25px;
  background-color: #fff;
  border: 1px solid rgba(30, 59, 138, 0.07);
  border-radius: 18px;
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Decorative circle */

.contact-card::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -55px;
  top: -55px;
  border: 2px solid rgba(250, 117, 22, 0.1);
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.contact-card:hover::before {
  transform: scale(1.3);
}

/* Hover */
.contact-card:hover {
  transform: translateY(-7px);
  border-color: rgba(250, 117, 22, 0.25);
  box-shadow: 0 15px 35px rgba(11, 22, 53, 0.09);
}

/* CARD TOP */

.contact-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.contact-number {
  font-family: var(--font-poppins);
  font-size: 11px;
  font-weight: 700;
  color: rgba(30, 59, 138, 0.3);
}

/* ICON */

.contact-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #e8edfc;
  color: #1e3b8a;
  font-size: 19px;
  transition: all 0.35s ease;
}

.contact-card:hover .contact-icon {
  background-color: #fa7516;
  color: #fff;
  transform: scale(1.08) rotate(-3deg);
}

/* CARD TEXT */

.contact-card h3 {
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
  color: #0b1635;
  font-size: 20px;
  line-height: 1.35;
}

.contact-card p {
  position: relative;
  z-index: 2;
  max-width: 90%;
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}

/* CARD ARROW*/

.contact-card-arrow {
  position: absolute;
  right: 22px;
  bottom: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #faf6f0;
  color: #1e3b8a;
  font-size: 12px;
  transition: all 0.3s ease;
}

.contact-card:hover .contact-card-arrow {
  background-color: #fa7516;
  color: #fff;
  transform: translateX(5px);
}

/* TABLET */

@media (max-width: 991.98px) {
  .contact-title {
    font-size: 38px;
  }

  .contact-description {
    font-size: 14px;
  }

  .contact-card {
    min-height: 210px;
    padding: 22px;
  }
}

/* MOBILE / SM */

@media (max-width: 767.98px) {
  .contact-title {
    font-size: 31px;
  }

  .contact-description {
    font-size: 13px;
    line-height: 1.75;
  }

  .contact-card {
    min-height: 200px;
    padding: 21px;
  }

  .contact-icon {
    width: 46px;
    height: 46px;
    font-size: 17px;
  }

  .contact-card h3 {
    font-size: 19px;
  }

  .contact-card p {
    font-size: 12px;
  }
}

/* SMALL MOBILE */

@media (max-width: 575.98px) {
  .contact-section {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }

  .contact-eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .contact-title {
    font-size: 26px;
    line-height: 1.3;
  }

  .contact-line {
    width: 75px;
    margin-top: 14px;
    margin-bottom: 15px;
  }

  .contact-description {
    font-size: 12px;
  }

  .contact-highlight {
    gap: 10px;
    padding: 14px;
  }

  .contact-highlight-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 16px;
  }

  .contact-highlight span {
    font-size: 12px;
  }

  .contact-highlight p {
    font-size: 11px;
  }

  .contact-cta {
    width: 100%;
    padding: 10px 12px;
    font-size: 11px;
  }

  .contact-card {
    min-height: 190px;
    padding: 18px;
    border-radius: 15px;
  }

  .contact-card-top {
    margin-bottom: 20px;
  }

  .contact-icon {
    width: 42px;
    height: 42px;
    font-size: 15px;
    border-radius: 10px;
  }

  .contact-card h3 {
    font-size: 17px;
  }

  .contact-card p {
    font-size: 11px;
    line-height: 1.6;
  }

  .contact-card-arrow {
    width: 31px;
    height: 31px;
    right: 17px;
    bottom: 17px;
    font-size: 10px;
  }
}

/* VERY SMALL MOBILE*/

@media (max-width: 399.98px) {
  .contact-title {
    font-size: 23px;
  }

  .contact-card {
    min-height: 180px;
    padding: 16px;
  }

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

  .contact-card p {
    font-size: 10.5px;
  }
}

/* ===== CONTACT MSTA MODAL ===== */

.contact-modal {
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(11, 22, 53, 0.22);
}

.contact-modal-header {
  position: relative;
  padding: 30px 35px 25px;
  border-bottom: 1px solid rgba(30, 59, 138, 0.08);
  background: linear-gradient(135deg, #f7faff 0%, #ffffff 70%);
}

/* Orange small heading */

.contact-modal-label {
  display: inline-block;
  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;

  color: var(--orange);
}

/* Main heading */

.contact-modal-title {
  margin: 0;

  color: var(--navy-dark);

  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.contact-modal-title span {
  color: var(--orange);
}

/* Subtitle */

.contact-modal-subtitle {
  max-width: 600px;

  margin: 10px 0 0;

  color: #68758b;

  font-size: 14px;
  line-height: 1.6;
}

/* Close button */

.contact-modal-close {
  position: absolute;

  top: 25px;
  right: 25px;

  width: 35px;
  height: 35px;

  border-radius: 50%;

  background-color: rgba(30, 59, 138, 0.07);

  opacity: 1;

  transition: all 0.3s ease;
}

.contact-modal-close:hover {
  background-color: rgba(250, 117, 22, 0.12);

  transform: rotate(90deg);
}

.contact-modal-body {
  padding: 30px 35px 35px;
}

/* Labels */

.contact-modal-body .form-label {
  margin-bottom: 8px;

  color: var(--navy-dark);

  font-size: 13px;
  font-weight: 600;
}

.contact-input-wrap {
  position: relative;
}

/* Input Icon */

.contact-input-wrap>i {
  position: absolute;

  left: 15px;
  top: 50%;

  transform: translateY(-50%);

  z-index: 3;

  color: var(--navy);

  font-size: 14px;

  transition: color 0.3s ease;
}

.contact-input {
  min-height: 50px;

  padding: 12px 15px 12px 43px;

  border: 1px solid #e0e6ef;

  border-radius: 12px;

  background: #fbfcff;

  color: var(--navy-dark);

  font-size: 13px;

  box-shadow: none;

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.contact-input::placeholder {
  color: #9aa5b5;
}

/* Focus */

.contact-input:focus {
  border-color: var(--orange);

  background: #ffffff;

  box-shadow: 0 0 0 4px rgba(250, 117, 22, 0.09);

  outline: none;
}

.contact-input-wrap:focus-within>i {
  color: var(--orange);
}

.contact-textarea-wrap {
  display: block;
}

.contact-textarea-wrap>i {
  top: 19px;

  transform: none;
}

.contact-textarea {
  min-height: 125px;

  resize: vertical;

  padding-top: 13px;
}

.contact-submit-btn {
  width: 100%;

  min-height: 52px;

  margin-top: 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  border: 0;
  border-radius: 12px;

  background: var(--orange);

  color: #ffffff;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  box-shadow: 0 10px 25px rgba(250, 117, 22, 0.2);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.contact-submit-btn:hover {
  background: #e9660d;

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow: 0 14px 30px rgba(250, 117, 22, 0.28);
}

.contact-submit-btn i {
  font-size: 13px;

  transition: transform 0.3s ease;
}

.contact-submit-btn:hover i {
  transform: translateX(4px);
}

.modal-backdrop.show {
  opacity: 0.65;
}

@media (max-width: 767.98px) {
  .contact-modal {
    margin: 15px;
    border-radius: 20px;
  }

  .contact-modal-header {
    padding: 25px 25px 20px;
  }

  .contact-modal-body {
    padding: 25px;
  }

  .contact-modal-title {
    font-size: 26px;
  }

  .contact-modal-subtitle {
    font-size: 13px;
    padding-right: 15px;
  }

  .contact-modal-close {
    top: 18px;
    right: 18px;
  }
}

@media (max-width: 480px) {
  .contact-modal {
    margin: 10px;
    border-radius: 18px;
  }

  .contact-modal-header {
    padding: 22px 20px 18px;
  }

  .contact-modal-body {
    padding: 20px;
  }

  .contact-modal-title {
    font-size: 23px;
  }

  .contact-modal-label {
    font-size: 10px;
  }

  .contact-modal-subtitle {
    font-size: 12px;
    line-height: 1.55;
  }

  .contact-input {
    min-height: 47px;

    font-size: 12px;
  }

  .contact-submit-btn {
    min-height: 49px;

    font-size: 13px;
  }
}

/* ===== Contact Us end ===== */


/* ===== footer start ===== */

.msta-footer {
  --footer-navy: #0b1635;
  --footer-navy-2: #10285f;
  --footer-orange: #fa7516;
  --footer-orange-light: #ff9145;
  --footer-text: #ffffff;
  --footer-muted: #91a5d9;

  width: 100%;
  position: relative;
  background: var(--footer-navy);
  color: var(--footer-text);
  overflow: hidden;

  font-family:
    var(--font-jakarta),
    "Plus Jakarta Sans",
    sans-serif;
}

.footer-cta-banner {
  position: relative;
  width: 100%;
  padding: 22px 15px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg,
      #0b1635 0%,
      #10285f 52%,
      #1e3b8a 100%);
}


/* Orange glow */

.footer-cta-banner::before {
  content: "";

  position: absolute;

  width: 320px;
  height: 320px;

  top: -180px;
  right: -100px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(250, 117, 22, 0.32) 0%,
      rgba(250, 117, 22, 0.10) 42%,
      transparent 70%);

  z-index: -1;

  pointer-events: none;
}


/* Circular border */

.footer-cta-banner::after {
  content: "";

  position: absolute;

  width: 240px;
  height: 240px;

  left: -120px;
  bottom: -150px;

  border-radius: 50%;

  border:
    1px solid rgba(255, 255, 255, 0.10);

  box-shadow:
    0 0 0 25px rgba(255, 255, 255, 0.025),
    0 0 0 50px rgba(255, 255, 255, 0.015);

  z-index: -1;

  pointer-events: none;
}


.footer-cta-container {
  width: 100%;
  max-width: 1320px;

  margin: 0 auto;
}


.footer-cta-banner-inner {
  position: relative;

  min-height: 78px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding: 14px 25px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius: 18px;

  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025));

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.16);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  overflow: hidden;
}


/* Top orange line */

.footer-cta-banner-inner::before {
  content: "";

  position: absolute;

  left: 30px;
  right: 30px;
  top: 0;

  height: 2px;

  border-radius: 50%;

  background:
    linear-gradient(90deg,
      transparent,
      var(--footer-orange),
      transparent);

  opacity: 0.85;

  pointer-events: none;
}


/* Shine */

.footer-cta-banner-inner::after {
  content: "";

  position: absolute;

  top: 0;
  left: -20%;

  width: 40%;
  height: 100%;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.055),
      transparent);

  transform: skewX(-25deg);

  pointer-events: none;
}


.footer-cta-banner-text {
  position: relative;

  z-index: 2;

  min-width: 0;
}


.footer-cta-banner-text span {
  display: block;

  margin-bottom: 4px;

  color: var(--footer-orange);

  font-family:
    var(--font-poppins),
    "Poppins",
    sans-serif;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 2px;
  line-height: 1.2;
}


.footer-cta-banner-text h4 {
  margin: 0;

  color: #ffffff;

  font-family:
    var(--font-merienda),
    "Merienda",
    cursive;

  font-size: 25px;
  font-weight: 400;

  line-height: 1.25;

  overflow-wrap: anywhere;
}


.footer-cta-banner-text h4 strong {
  color: var(--footer-orange);
  font-weight: 700;
}


.footer-cta-btn {
  position: relative;

  z-index: 2;

  flex-shrink: 0;

  min-width: 175px;
  min-height: 44px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 10px 20px;

  border: 0;
  border-radius: 10px;

  background:
    linear-gradient(135deg,
      #fa7516,
      #ff8b38);

  color: #ffffff;

  font-family:
    var(--font-poppins),
    "Poppins",
    sans-serif;

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;

  box-shadow:
    0 8px 20px rgba(250, 117, 22, 0.25);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


/* Button shine */

.footer-cta-btn::before {
  content: "";

  position: absolute;

  top: 0;
  left: -110%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.28),
      transparent);

  transform: skewX(-20deg);

  transition:
    left 0.55s ease;

  pointer-events: none;
}


.footer-cta-btn span,
.footer-cta-btn i {
  position: relative;
  z-index: 2;
}


.footer-cta-btn i {
  font-size: 11px;

  transition:
    transform 0.3s ease;
}


.footer-cta-btn:hover {
  color: #ffffff;

  transform:
    translateY(-2px);

  background:
    linear-gradient(135deg,
      #ff8126,
      #fa7516);

  box-shadow:
    0 12px 28px rgba(250, 117, 22, 0.38);
}


.footer-cta-btn:hover::before {
  left: 130%;
}


.footer-cta-btn:hover i {
  transform:
    translateX(4px);
}


.footer-cta-btn:focus-visible {
  outline:
    2px solid #ffffff;

  outline-offset:
    3px;
}

.msta-footer-main {
  width: 100%;

  background:
    #0b1b3a;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.09);
}


.msta-footer-container {
  width: 100%;
  max-width: 1320px;

  min-height: 92px;

  margin: 0 auto;

  padding: 15px 25px;

  display: flex;

  align-items: center;

  gap: 25px;
}

.msta-footer-brand {
  display: flex;

  align-items: center;

  flex-shrink: 0;

  min-width: 0;
}


/* Logo */

.msta-footer-logo {
  width: 56px;
  height: 56px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  text-decoration: none;
}


.msta-footer-logo img {
  width: 54px;
  height: 54px;

  display: block;

  object-fit: contain;

  padding: 4px;

  background:
    #ffffff;

  border-radius: 50%;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.20);
}


/* Brand text */

.msta-footer-brand-text {
  min-width: 0;

  margin-left: 13px;
}


.msta-footer-brand-text h5 {
  margin: 0;

  color:
    #ffffff;

  font-family:
    var(--font-poppins),
    "Poppins",
    sans-serif;

  font-size: 16px;

  font-weight: 700;

  line-height: 1.25;

  white-space: nowrap;
}


.msta-footer-brand-text p {
  margin:
    3px 0 0;

  color:
    var(--footer-muted);

  font-family:
    var(--font-jakarta),
    "Plus Jakarta Sans",
    sans-serif;

  font-size: 10px;

  font-weight: 500;

  line-height: 1.4;
}


.msta-footer-brand-text p span {
  margin:
    0 6px;

  color:
    #7e92c9;
}

.msta-footer-nav {
  flex: 1;

  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: nowrap;
}


.msta-footer-nav a {
  color:
    #e1e7f4;

  font-family:
    var(--font-poppins),
    "Poppins",
    sans-serif;

  font-size: 12px;

  font-weight: 600;

  line-height: 1.3;

  text-decoration: none;

  white-space: nowrap;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}


.msta-footer-nav a:hover {
  color:
    var(--footer-orange);

  transform:
    translateY(-1px);
}


/* Divider */

.footer-divider {
  width: 1px;

  height: 19px;

  flex-shrink: 0;

  margin:
    0 11px;

  background:
    rgba(255, 255, 255, 0.16);
}

.msta-social-icons {
  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;
}


.msta-social {
  width: 38px;
  height: 38px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;

  border-radius: 50%;

  color:
    #ffffff;

  text-decoration: none;

  font-size: 15px;

  flex-shrink: 0;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}


.msta-social:hover {
  color:
    #ffffff;

  transform:
    translateY(-3px);

  filter:
    brightness(1.08);

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.28);
}


/* Facebook */

.msta-social.facebook {
  background:
    #1877f2;
}


/* LinkedIn */

.msta-social.linkedin {
  background:
    #0a66c2;
}


/* Twitter */

.msta-social.twitter {
  background:
    #1da1f2;
}


/* Instagram */

.msta-social.instagram {
  background:
    linear-gradient(135deg,
      #405de6 0%,
      #833ab4 35%,
      #e1306c 65%,
      #fd1d1d 82%,
      #fcb045 100%);
}

.msta-footer-bottom {
  width: 100%;

  background:
    #0b1635;
}


/* Bottom container */

.msta-footer-bottom-container {
  width: 100%;

  max-width: 1320px;

  min-height: 54px;

  margin: 0 auto;

  padding: 10px 25px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


/* Copyright */

.msta-copyright {
  margin: 0;

  color:
    #8498d4;

  font-family:
    var(--font-jakarta),
    "Plus Jakarta Sans",
    sans-serif;

  font-size: 11px;

  font-weight: 400;

  line-height: 1.5;

  overflow-wrap: anywhere;
}


/* Tagline */

.msta-footer-tagline {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

  color:
    #e6e9f1;

  font-family:
    var(--font-merienda),
    "Merienda",
    cursive;

  font-size: 11px;

  font-weight: 700;

  font-style: italic;

  line-height: 1.4;

  white-space: nowrap;
}


.msta-footer-tagline i {
  color:
    var(--footer-orange);

  font-size:
    14px;

  flex-shrink: 0;
}

@media (min-width: 1400px) {

  .footer-cta-banner {
    padding:
      22px 20px;
  }

  .footer-cta-container,
  .msta-footer-container,
  .msta-footer-bottom-container {
    max-width:
      1320px;
  }

  .msta-footer-brand-text h5 {
    font-size:
      17px;
  }

  .msta-footer-nav a {
    font-size:
      13px;
  }

  .footer-divider {
    margin-left:
      13px;

    margin-right:
      13px;
  }

  .msta-social {
    width:
      39px;

    height:
      39px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {

  .footer-cta-container,
  .msta-footer-container,
  .msta-footer-bottom-container {
    max-width:
      100%;
  }

  .footer-cta-banner-inner {
    min-height:
      74px;

    padding-left:
      22px;

    padding-right:
      22px;
  }

  .footer-cta-banner-text h4 {
    font-size:
      23px;
  }

  .msta-footer-container {
    gap:
      18px;
  }

  .msta-footer-brand-text {
    margin-left:
      11px;
  }

  .msta-footer-brand-text h5 {
    font-size:
      14px;
  }

  .msta-footer-brand-text p {
    font-size:
      9px;
  }

  .msta-footer-nav a {
    font-size:
      11px;
  }

  .footer-divider {
    margin-left:
      8px;

    margin-right:
      8px;
  }

  .msta-social {
    width:
      36px;

    height:
      36px;

    font-size:
      14px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {

  /* CTA */

  .footer-cta-banner {
    padding:
      17px 15px;
  }

  .footer-cta-banner-inner {
    min-height:
      68px;

    gap:
      20px;

    padding:
      12px 20px;

    border-radius:
      15px;
  }

  .footer-cta-banner-text span {
    font-size:
      8px;

    letter-spacing:
      1.5px;
  }

  .footer-cta-banner-text h4 {
    font-size:
      20px;
  }

  .footer-cta-btn {
    min-width:
      155px;

    min-height:
      40px;

    padding:
      8px 15px;

    font-size:
      11px;
  }


  /* Main footer */

  .msta-footer-container {
    position:
      relative;

    display:
      grid;

    grid-template-columns:
      auto minmax(0, 1fr);

    align-items:
      start;

    column-gap:
      20px;

    min-height:
      135px;

    padding:
      15px 20px 58px;
  }


  /* Brand */

  .msta-footer-brand {
    align-self:
      start;

    min-width:
      0;
  }

  .msta-footer-logo {
    width:
      55px;

    height:
      55px;
  }

  .msta-footer-logo img {
    width:
      53px;

    height:
      53px;
  }

  .msta-footer-brand-text {
    margin-left:
      11px;

    min-width:
      0;
  }

  .msta-footer-brand-text h5 {
    font-size:
      13px;

    white-space:
      nowrap;
  }

  .msta-footer-brand-text p {
    font-size:
      8px;
  }


  /* Navigation */

  .msta-footer-nav {
    min-width:
      0;

    justify-content:
      flex-end;

    align-self:
      start;

    padding-top:
      12px;

    flex-wrap:
      wrap;

    row-gap:
      7px;
  }

  .msta-footer-nav a {
    font-size:
      9px;
  }

  .footer-divider {
    height:
      16px;

    margin-left:
      6px;

    margin-right:
      6px;
  }


  /* Social icons below logo */

  .msta-social-icons {
    position:
      absolute;

    left:
      20px;

    top:
      82px;

    gap:
      7px;
  }

  .msta-social {
    width:
      34px;

    height:
      34px;

    font-size:
      13px;
  }


  /* Bottom */

  .msta-footer-bottom-container {
    min-height:
      50px;

    padding-left:
      20px;

    padding-right:
      20px;
  }

  .msta-copyright {
    font-size:
      9px;
  }

  .msta-footer-tagline {
    font-size:
      9px;
  }
}


@media (min-width: 768px) and (max-width: 991.98px) {

  /* CTA */

  .footer-cta-banner {
    padding:
      16px 15px;
  }

  .footer-cta-banner-inner {
    min-height:
      68px;

    gap:
      18px;

    padding:
      12px 18px;

    border-radius:
      14px;
  }

  .footer-cta-banner-text {
    min-width:
      0;
  }

  .footer-cta-banner-text h4 {
    font-size:
      19px;

    overflow-wrap:
      anywhere;
  }

  .footer-cta-btn {
    min-width:
      145px;

    min-height:
      40px;

    padding:
      8px 14px;

    font-size:
      10px;
  }


  /* Main footer */

  .msta-footer-container {
    display:
      flex;

    flex-wrap:
      wrap;

    align-items:
      center;

    gap:
      15px;

    padding:
      20px;
  }


  /* Brand */

  .msta-footer-brand {
    width:
      auto;

    min-width:
      0;

    flex:
      1 1 auto;
  }

  .msta-footer-brand-text {
    min-width:
      0;
  }

  .msta-footer-brand-text h5 {
    font-size:
      14px;

    white-space:
      normal;
  }

  .msta-footer-brand-text p {
    font-size:
      9px;
  }


  /* Social */

  .msta-social-icons {
    margin-left:
      auto;

    gap:
      7px;

    flex-shrink:
      0;
  }

  .msta-social {
    width:
      34px;

    height:
      34px;

    font-size:
      13px;
  }


  /* Navigation */

  .msta-footer-nav {
    order:
      3;

    flex:
      0 0 100%;

    width:
      100%;

    justify-content:
      center;

    flex-wrap:
      wrap;

    row-gap:
      10px;

    column-gap:
      0;

    margin-top:
      2px;
  }

  .msta-footer-nav a {
    font-size:
      10px;
  }

  .footer-divider {
    height:
      15px;

    margin-left:
      7px;

    margin-right:
      7px;
  }


  /* Bottom */

  .msta-footer-bottom-container {
    min-height:
      52px;

    padding:
      10px 20px;
  }

  .msta-copyright {
    font-size:
      9px;
  }

  .msta-footer-tagline {
    font-size:
      9px;
  }
}


@media (max-width: 767.98px) {


  .msta-footer {
    width:
      100%;

    max-width:
      100%;

    overflow:
      hidden;

    word-wrap:
      break-word;
  }

  .footer-cta-banner {
    width:
      100%;

    padding:
      14px 12px;
  }

  .footer-cta-banner-inner {
    width:
      100%;

    min-height:
      auto;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      14px;

    padding:
      18px 16px;

    border-radius:
      14px;

    text-align:
      center;
  }

  .footer-cta-banner-text {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;
  }

  .footer-cta-banner-text span {
    margin-bottom:
      5px;

    font-size:
      8px;

    letter-spacing:
      1.5px;

    line-height:
      1.3;
  }

  .footer-cta-banner-text h4 {
    width:
      100%;

    font-size:
      19px;

    line-height:
      1.35;

    overflow-wrap:
      anywhere;

    word-break:
      normal;
  }

  .footer-cta-btn {
    width:
      100%;

    max-width:
      210px;

    min-width:
      0;

    min-height:
      42px;

    padding:
      9px 16px;

    font-size:
      11px;

    flex-shrink:
      1;
  }

  .msta-footer-main {
    width:
      100%;

    overflow:
      hidden;
  }

  .msta-footer-container {
    width:
      100%;

    max-width:
      100%;

    min-height:
      auto;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      0;

    padding:
      20px 15px;
  }

  .msta-footer-brand {
    width:
      100%;

    min-width:
      0;

    display:
      flex;

    align-items:
      center;

    flex-shrink:
      1;
  }

  .msta-footer-logo {
    width:
      52px;

    height:
      52px;

    flex:
      0 0 52px;
  }

  .msta-footer-logo img {
    width:
      50px;

    height:
      50px;

    padding:
      4px;
  }

  .msta-footer-brand-text {
    width:
      auto;

    min-width:
      0;

    max-width:
      calc(100% - 63px);

    margin-left:
      11px;

    flex:
      1 1 auto;
  }

  .msta-footer-brand-text h5 {
    width:
      100%;

    margin:
      0;

    font-size:
      14px;

    line-height:
      1.35;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }

  .msta-footer-brand-text p {
    width:
      100%;

    margin:
      3px 0 0;

    font-size:
      9px;

    line-height:
      1.5;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }

  .msta-social-icons {
    width:
      100%;

    margin-top:
      14px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      flex-start;

    flex-wrap:
      wrap;

    gap:
      7px;
  }

  .msta-social {
    width:
      34px;

    height:
      34px;

    flex:
      0 0 34px;

    font-size:
      13px;
  }

  .msta-footer-nav {
    width:
      100%;

    min-width:
      0;

    margin-top:
      18px;

    padding:
      0;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    flex-wrap:
      wrap;

    gap:
      0;

    row-gap:
      10px;

    overflow:
      visible;
  }

  .msta-footer-nav a {
    display:
      inline-block;

    max-width:
      100%;

    font-size:
      9px;

    line-height:
      1.4;

    white-space:
      normal;

    text-align:
      center;

    overflow-wrap:
      anywhere;
  }

  .footer-divider {
    width:
      1px;

    height:
      13px;

    flex:
      0 0 1px;

    margin:
      0 6px;

    background:
      rgba(255, 255, 255, 0.16);
  }

  .msta-footer-bottom {
    width:
      100%;

    overflow:
      hidden;
  }

  .msta-footer-bottom-container {
    width:
      100%;

    max-width:
      100%;

    min-height:
      auto;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      7px;

    padding:
      13px 15px;

    text-align:
      center;
  }

  .msta-copyright {
    width:
      100%;

    max-width:
      100%;

    font-size:
      8px;

    line-height:
      1.5;

    text-align:
      center;

    overflow-wrap:
      anywhere;
  }

  .msta-footer-tagline {
    width:
      100%;

    max-width:
      100%;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    flex-wrap:
      wrap;

    gap:
      6px;

    font-size:
      9px;

    line-height:
      1.5;

    white-space:
      normal;

    text-align:
      center;

    overflow-wrap:
      anywhere;
  }

  .msta-footer-tagline i {
    font-size:
      12px;

    flex-shrink:
      0;
  }
}

@media (max-width: 575.98px) {

  /* CTA */

  .footer-cta-banner {
    padding:
      12px 10px;
  }

  .footer-cta-banner-inner {
    gap:
      12px;

    padding:
      16px 13px;

    border-radius:
      12px;
  }

  .footer-cta-banner-text span {
    font-size:
      7px;

    letter-spacing:
      1.2px;
  }

  .footer-cta-banner-text h4 {
    font-size:
      17px;

    line-height:
      1.35;
  }

  .footer-cta-btn {
    max-width:
      195px;

    min-height:
      40px;

    font-size:
      10px;
  }


  /* Main */

  .msta-footer-container {
    padding:
      18px 12px;
  }


  /* Logo */

  .msta-footer-logo {
    width:
      48px;

    height:
      48px;

    flex-basis:
      48px;
  }

  .msta-footer-logo img {
    width:
      46px;

    height:
      46px;

    padding:
      3px;
  }


  /* Brand */

  .msta-footer-brand-text {
    max-width:
      calc(100% - 57px);

    margin-left:
      9px;
  }

  .msta-footer-brand-text h5 {
    font-size:
      12px;

    line-height:
      1.35;
  }

  .msta-footer-brand-text p {
    font-size:
      8px;

    line-height:
      1.45;
  }

  .msta-footer-brand-text p span {
    margin-left:
      3px;

    margin-right:
      3px;
  }


  /* Social */

  .msta-social-icons {
    margin-top:
      12px;

    gap:
      5px;
  }

  .msta-social {
    width:
      30px;

    height:
      30px;

    flex-basis:
      30px;

    font-size:
      12px;
  }


  /* Navigation */

  .msta-footer-nav {
    margin-top:
      16px;

    row-gap:
      8px;
  }

  .msta-footer-nav a {
    font-size:
      8px;

    line-height:
      1.4;
  }

  .footer-divider {
    height:
      12px;

    margin-left:
      5px;

    margin-right:
      5px;
  }


  /* Bottom */

  .msta-footer-bottom-container {
    gap:
      6px;

    padding:
      11px 10px;
  }

  .msta-copyright {
    font-size:
      7.5px;
  }

  .msta-footer-tagline {
    font-size:
      8px;
  }

  .msta-footer-tagline i {
    font-size:
      11px;
  }
}


@media (max-width: 380px) {

  /* CTA */

  .footer-cta-banner {
    padding-left:
      8px;

    padding-right:
      8px;
  }

  .footer-cta-banner-inner {
    padding:
      15px 10px;
  }

  .footer-cta-banner-text span {
    font-size:
      6px;

    letter-spacing:
      1px;
  }

  .footer-cta-banner-text h4 {
    font-size:
      15px;
  }

  .footer-cta-btn {
    max-width:
      180px;

    min-height:
      38px;

    font-size:
      9px;

    gap:
      7px;
  }


  /* Brand */

  .msta-footer-brand-text h5 {
    font-size:
      11px;
  }

  .msta-footer-brand-text p {
    font-size:
      7px;
  }


  /* Social */

  .msta-social {
    width:
      28px;

    height:
      28px;

    flex-basis:
      28px;

    font-size:
      11px;
  }


  /* Navigation */

  .msta-footer-nav {
    row-gap:
      7px;
  }

  .msta-footer-nav a {
    font-size:
      7.5px;
  }

  .footer-divider {
    margin-left:
      4px;

    margin-right:
      4px;
  }


  /* Bottom */

  .msta-copyright {
    font-size:
      7px;
  }

  .msta-footer-tagline {
    font-size:
      7.5px;
  }
}


@media (max-width: 767.98px) and (orientation: landscape) {

  .footer-cta-banner {
    padding:
      10px 12px;
  }

  .footer-cta-banner-inner {
    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;

    text-align:
      left;

    gap:
      15px;

    padding:
      12px 16px;
  }

  .footer-cta-banner-text {
    flex:
      1 1 auto;

    min-width:
      0;
  }

  .footer-cta-banner-text h4 {
    font-size:
      16px;
  }

  .footer-cta-btn {
    width:
      auto;

    max-width:
      190px;

    min-width:
      145px;

    flex:
      0 1 auto;
  }

  .msta-footer-container {
    padding:
      15px;
  }

  .msta-footer-nav {
    margin-top:
      15px;
  }
}


@media (max-width: 575.98px) and (orientation: landscape) {

  .footer-cta-banner-inner {
    gap:
      10px;

    padding:
      10px 12px;
  }

  .footer-cta-banner-text h4 {
    font-size:
      14px;
  }

  .footer-cta-btn {
    min-width:
      125px;

    max-width:
      155px;

    min-height:
      36px;

    padding:
      7px 10px;

    font-size:
      9px;
  }
}


.msta-footer *,
.msta-footer *::before,
.msta-footer *::after {
  box-sizing:
    border-box;
}


/* Prevent accidental horizontal overflow */

.msta-footer-main,
.msta-footer-bottom,
.footer-cta-banner,
.footer-cta-container,
.footer-cta-banner-inner,
.msta-footer-container,
.msta-footer-bottom-container {
  max-width:
    100%;
}

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

  .footer-cta-btn,
  .footer-cta-btn::before,
  .footer-cta-btn i,
  .msta-social,
  .msta-footer-nav a {
    transition:
      none !important;
  }
}

/* ===== footer end ===== */




/* ===== Industry-embedded-learning start ===== */

.IndustryEmbeddedImg {
  --ie-blue: #075aa0;
  --ie-blue-light: #087fc5;
  --ie-blue-bright: #19a9ed;
  --ie-orange: #ff9d19;
  --ie-white: #ffffff;

  position: relative;
  width: 100%;

  min-height: 250px;
  height: 250px;

  overflow: hidden;

  background: radial-gradient(circle at 85% 50%, rgba(250, 117, 22, 0.14), transparent 30%), linear-gradient(135deg, #0b1635 0%, #12265f 55%, #1e3b8a 100%);

  display: flex;
  align-items: center;
}

.IndustryEmbeddedImg>.row {
  width: 100%;
  height: 100%;

  margin: 0;

  position: relative;
  z-index: 5;
}

.ie-content {
  height: 250px;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: flex-start;

  padding-left: 45px !important;
  padding-right: 20px !important;

  position: relative;
  z-index: 20;
}

.ie-mini-label {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 12px;

  font-family: var(--font-poppins);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.8px;

  color: rgba(255, 255, 255, 0.72);
}

.ie-mini-label span {
  width: 28px;
  height: 2px;

  display: block;

  background: var(--ie-orange);

  border-radius: 10px;
}

.ie-content h1 {
  margin: 0 0 12px;
  font-family: var(--font-poppins);
  white-space: nowrap;

  font-size: clamp(2rem, 3vw, 3.15rem);

  line-height: 1.1;

  font-weight: 700;

  color: #ffffff;

  letter-spacing: -1.2px;
}

.ie-content p {
  margin: 0;

  font-family: var(--font-jakarta);

  font-size: clamp(0.95rem, 1.35vw, 1.2rem);

  line-height: 1.5;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.88);

  max-width: 500px;
}

.ie-content p .text-orange {
  color: var(--ie-orange) !important;
}

.ie-visual {
  position: relative;

  height: 250px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.ie-grid {
  position: absolute;

  right: -30px;
  top: 0;

  width: 55%;
  height: 100%;

  opacity: 0.12;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);

  background-size: 22px 22px;

  mask-image: linear-gradient(to left, #000, transparent);

  -webkit-mask-image: linear-gradient(to left, #000, transparent);

  pointer-events: none;
}

.ie-ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  pointer-events: none;
}

/* Big ring */

.ie-ring-1 {
  width: 360px;
  height: 360px;
  right: -70px;
  top: -55px;
  animation: ieRotate 18s linear infinite;
}

/* Small ring */
.ie-ring-2 {
  width: 270px;
  height: 270px;
  right: -10px;
  top: -10px;
  border-color: rgba(255, 157, 25, 0.2);
  animation: ieRotateReverse 14s linear infinite;
}

.ie-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

/* Horizontal orbit */
.ie-orbit-1 {
  width: 220px;
  height: 140px;
  right: 65px;
  top: 55px;
  transform: rotate(-18deg);
  animation: orbitPulse 5s ease-in-out infinite;
}

/* Vertical orbit */
.ie-orbit-2 {
  width: 165px;
  height: 230px;
  right: 90px;
  top: 10px;
  transform: rotate(28deg);
  border-color: rgba(255, 157, 25, 0.25);
  animation: orbitPulse 6s ease-in-out infinite reverse;
}

.ie-learning-hub {
  position: absolute;
  right: 145px;
  top: 50%;
  width: 115px;
  height: 115px;
  transform: translateY(-50%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0.06) 55% rgba(0, 0, 0, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.03),
    0 0 38px rgba(25, 169, 237, 0.35),
    0 15px 35px rgba(0, 0, 0, 0.2);
  z-index: 10;
  animation: hubFloat 4s ease-in-out infinite;
}

.ie-hub-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: rgba(25, 169, 237, 0.25);
  filter: blur(18px);
  z-index: -1;
  animation: hubGlow 3s ease-in-out infinite;
}

.ie-hub-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(255, 157, 25, 0.16);
  border: 1px solid rgba(255, 157, 25, 0.45);
  color: var(--ie-orange);
  font-size: 18px;
  margin-bottom: 6px;
}

.ie-hub-text {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-family: var(--font-poppins);
}

.ie-hub-text strong {
  font-size: 11px;
  color: #ffffff;
  letter-spacing: 1px;
}

.ie-hub-text small {
  margin-top: 2px;
  font-family: var(--font-jakarta);
  font-size: 6.5px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 1px;
}

.ie-node {
  position: absolute;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  z-index: 15;
  animation: nodeFloat 4s ease-in-out infinite;
}

/* Node icon */

.ie-node i {
  font-size: 13px;
  color: var(--ie-orange);
}

/* Node text */
.ie-node span {
  font-family: var(--font-jakarta);
  font-size: 6.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}

.ie-node-1 {
  top: 20px;
  right: 285px;
  animation-delay: 0.2s;
}

.ie-node-2 {
  top: 45px;
  right: 45px;
  animation-delay: 0.7s;
}

.ie-node-3 {
  bottom: 20px;
  right: 295px;
  animation-delay: 1.2s;
}

.ie-node-4 {
  bottom: 18px;
  right: 60px;
  animation-delay: 1.7s;
}

.ie-node-5 {
  top: 95px;
  right: 345px;
  animation-delay: 2.2s;
}

.ie-node-6 {
  top: 100px;
  right: 15px;
  animation-delay: 2.7s;
}

.ie-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ie-orange);
  box-shadow: 0 0 10px rgba(255, 157, 25, 0.8);

  z-index: 12;
  animation: dotPulse 2s ease-in-out infinite;
}

.ie-dot-1 {
  right: 280px;
  top: 100px;
}

.ie-dot-2 {
  right: 245px;
  bottom: 50px;
}

.ie-dot-3 {
  right: 90px;
  top: 95px;
}

.ie-dot-4 {
  right: 150px;
  top: 35px;
}

@keyframes hubFloat {

  0%,
  100% {
    transform: translateY(-50%);
  }

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

@keyframes hubGlow {

  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.9);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

@keyframes nodeFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}

@keyframes dotPulse {

  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}

@keyframes orbitPulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ieRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes ieRotateReverse {
  from {
    transform: rotate(28deg);
  }

  to {
    transform: rotate(-332deg);
  }
}

@media (max-width: 1199.98px) {
  .ie-content {
    padding-left: 30px !important;
  }

  .ie-content h1 {
    font-size: 2.1rem;
  }

  .ie-learning-hub {
    right: 120px;
  }

  .ie-node-1 {
    right: 245px;
  }

  .ie-node-3 {
    right: 255px;
  }

  .ie-node-5 {
    right: 300px;
  }

  .ie-orbit-1 {
    right: 50px;
  }

  .ie-orbit-2 {
    right: 70px;
  }
}

@media (max-width: 991.98px) {
  .IndustryEmbeddedImg {
    height: 250px;
    min-height: 250px;
  }

  .ie-content {
    height: 250px;
    padding: 20px 25px5px !important;
    justify-content: center;
  }

  .ie-content h1 {
    white-space: nowrap;
    font-size: 1.75rem;
    letter-spacing: -0.8px;
  }

  .ie-content p {
    font-size: 0.85rem;
  }

  .ie-visual {
    height: 250px;
  }

  /* Center Hub */
  .ie-learning-hub {
    width: 100px;
    height: 100px;
    right: 50%;
    transform: translate(50%, -50%) scale(0.9);
  }

  /* Nodes */
  .ie-node {
    width: 42px;
    height: 42px;
  }

  .ie-node-1 {
    top: 20px;
    right: 67%;
  }

  .ie-node-2 {
    top: 35px;
    right: 12%;
  }

  .ie-node-3 {
    bottom: 15px;
    right: 68%;
  }

  .ie-node-4 {
    bottom: 15px;
    right: 15%;
  }

  .ie-node-5 {
    top: 90px;
    right: 78%;
  }

  .ie-node-6 {
    top: 95px;
    right: 5%;
  }

  /* Orbits */
  .ie-orbit-1 {
    width: 190px;
    height: 125px;
    right: 50%;
    transform: translateX(50%) rotate(-18deg);
  }

  .ie-orbit-2 {
    width: 145px;
    height: 210px;
    right: 50%;
    transform: translateX(50%) rotate(28deg);
  }

  /* Rings */
  .ie-ring-1 {
    width: 300px;
    height: 300px;
    right: -65px;
    top: -30px;
  }

  .ie-ring-2 {
    width: 220px;
    height: 220px;
    right: -15px;
    top: 5px;
  }
}

@media (max-width: 767.98px) {
  .IndustryEmbeddedImg {
    height: 250px;
    min-height: 250px;
  }

  /* Content */
  .ie-content {
    height: 105px;
    padding: 10px 15px 0 !important;
    align-items: center;
    text-align: center;
  }

  .ie-mini-label {
    font-size: 7px;
    letter-spacing: 1px;
    margin-bottom: 6px;
  }

  .ie-mini-label span {
    width: 18px;
    height: 1px;
  }

  .ie-content h1 {
    white-space: normal;
    font-size: 1.45rem;
    line-height: 1.15;
    margin-bottom: 6px;
    text-align: center;
  }

  .ie-content p {
    font-size: 10px;
    max-width: 330px;
  }

  /* Visual */
  .ie-visual {
    height: 145px;
  }

  /* Center Hub */
  .ie-learning-hub {
    width: 78px;
    height: 78px;
    right: 50%;
    transform: translate(50%, -50%) scale(0.8);
  }

  .ie-hub-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 14px;
  }

  .ie-hub-text strong {
    font-size: 9px;
  }

  .ie-hub-text small {
    font-size: 5px;
  }

  /* Nodes */
  .ie-node {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .ie-node i {
    font-size: 10px;
  }

  .ie-node span {
    font-size: 5px;
  }

  .ie-node-1 {
    top: 8px;
    right: 68%;
  }

  .ie-node-2 {
    top: 15px;
    right: 36%;
  }

  .ie-node-3 {
    bottom: 8px;
    right: 65%;
  }

  .ie-node-4 {
    bottom: 8px;
    right: 40%;
  }

  .ie-node-5 {
    top: 55px;
    right: 76%;
  }

  .ie-node-6 {
    top: 62px;
    right: 30%;
  }

  /* Orbits */
  .ie-orbit-1 {
    width: 155px;
    height: 95px;
    right: 50%;
  }

  .ie-orbit-2 {
    width: 115px;
    height: 155px;
    right: 50%;
  }

  /* Rings */
  .ie-ring-1 {
    width: 260px;
    height: 260px;
    right: -60px;
    top: -30px;
  }

  .ie-ring-2 {
    width: 200px;
    height: 200px;
    right: -20px;
    top: 0;
  }

  /* Dots */
  .ie-dot {
    width: 4px;
    height: 4px;
  }
}

@media (max-width: 480px) {
  .IndustryEmbeddedImg {
    height: 250px;
    min-height: 250px;
  }

  .ie-content {
    height: 100px;
  }

  .ie-mini-label {
    font-size: 6.5px;
    letter-spacing: 0.8px;
  }

  .ie-content h1 {
    font-size: 1.35rem;
  }

  .ie-content p {
    font-size: 9px;
  }

  .ie-visual {
    height: 150px;
  }

  .ie-learning-hub {
    transform: translate(50%, -50%) scale(0.72);
  }

  .ie-node {
    transform: scale(0.88);
  }

  .ie-ring-1 {
    width: 230px;
    height: 230px;
    right: -55px;
  }

  .ie-ring-2 {
    width: 175px;
    height: 175px;
    right: -15px;
  }
}

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

  .IndustryEmbeddedImg *,
  .IndustryEmbeddedImg::before,
  .IndustryEmbeddedImg::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Industry-embedded-learning end ===== */

/* ===== INDUSTRY-EMBEDDED LEARNING start ===== */
.ie-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0 0;
  background: rgb(254, 255, 255);
}

.ie-section::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -170px;
  width: 360px;
  height: 360px;
  border: 60px solid rgba(250, 117, 22, 0.283);
  border-radius: 50%;
  pointer-events: none;
}

.ie-para {
  border-left: 3px solid rgb(183, 183, 183);
  padding: 5px 5px 5px 10px;
}

.ie-para p {
  color: #0b1736;
  font-family: var(--font-poppins) !important;
  font-size: 15px;
  font-weight: 500;
}

.ie-section2 {
  position: relative;
  overflow: hidden;
  padding: 10px 0 0;
  background: #0b1736;
}

.ie-section2::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -170px;
  width: 360px;
  height: 360px;
  border: 60px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50%;
  pointer-events: none;
}

.badge-number {
  position: absolute;
  top: 5px !important;
  left: 5px !important;
  font-size: 10px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.416) !important;
}

/* ===== INDUSTRY-EMBEDDED LEARNING end ===== */

/* ===== 3rd section start ===== */
.thirdrdsectionbackground {
  background-color: #bddff467;
}

.msta-feature-grid {
  width: 100%;
}

.msta-feature-card {
  position: relative;
  min-height: 285px;
  padding: 28px 25px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11, 22, 53, 0.06);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Hover */
.msta-feature-card:hover {
  transform: translateY(-7px);
  border-color: rgba(250, 117, 22, 0.3);
  box-shadow: 0 18px 40px rgba(11, 22, 53, 0.12);
}

.msta-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #fa7516;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.msta-feature-card:hover::before {
  transform: scaleX(1);
}

.msta-card-number {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-poppins);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(30, 59, 138, 0.25);
  z-index: 2;
}

.msta-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 14px;
  background: rgba(250, 117, 22, 0.09);
  border: 1px solid rgba(250, 117, 22, 0.16);
  color: #fa7516;
  font-size: 20px;
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}

/* Icon hover */
.msta-feature-card:hover .msta-card-icon {
  transform: rotate(-5deg) scale(1.06);
  background: #fa7516;
  color: #ffffff;
}

.msta-feature-card h3 {
  position: relative;
  max-width: 280px;
  margin-bottom: 13px !important;
  font-family: var(--font-poppins);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: #0b1635;
}

.msta-feature-card h3 span {
  color: #fa7516;
}

.msta-feature-card p {
  position: relative;
  max-width: 390px;
  font-family: var(--font-jakarta);
  font-size: 13.5px;
  line-height: 1.75;
  font-weight: 400;
  color: #687287;
  z-index: 2;
}

.msta-card-shape {
  position: absolute;
  right: -45px;
  bottom: -45px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(30, 59, 138, 0.035);
  transition:
    transform 0.5s ease,
    background 0.5s ease;
}

/* Shape hover */

.msta-feature-card:hover .msta-card-shape {
  transform: scale(1.3);
  background: rgba(250, 117, 22, 0.055);
}

.msta-feature-card::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  right: 22px;
  bottom: 22px;
  border-radius: 50%;
  background: #fa7516;
  opacity: 0.35;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.msta-feature-card:hover::after {
  transform: scale(1.5);
  opacity: 0.8;
}

@media (max-width: 991.98px) {
  .msta-feature-card {
    min-height: 270px;
    padding: 25px 22px;
  }

  .msta-card-icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .msta-feature-card h3 {
    font-size: 17px;
  }

  .msta-feature-card p {
    font-size: 13px;
  }
}

@media (max-width: 767.98px) {
  .msta-feature-card {
    min-height: auto;
    padding: 24px 20px;
    border-radius: 16px;
  }

  .msta-card-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 12px;
    font-size: 17px;
  }

  .msta-feature-card h3 {
    font-size: 16px;
    line-height: 1.45;
  }

  .msta-feature-card p {
    font-size: 12.5px;
    line-height: 1.7;
  }
}

@media (max-width: 575.98px) {
  .msta-feature-card {
    padding: 22px 18px;
  }

  .msta-card-number {
    top: 15px;
    right: 16px;
    font-size: 10px;
  }
}

.msta-practical-section {
  position: relative;
  padding: 20px 25px 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, #0b1635 0%, #14275e 55%, #1e3b8a 100%);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(11, 22, 53, 0.18);
}

.msta-practical-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.msta-practical-section::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -100px;
  top: -120px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 45px rgba(255, 255, 255, 0.025),
    0 0 0 90px rgba(255, 255, 255, 0.015);
}

.msta-practical-header {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
}

.msta-practical-header h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-poppins);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.7px;
}

.msta-practical-header p {
  max-width: 650px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.7;
}

.msta-learning-tags {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.msta-learning-tag {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-jakarta);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.msta-learning-tag:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(250, 117, 22, 0.55);
}

.msta-learning-tag i {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(250, 117, 22, 0.13);
  color: var(--orange);
  font-size: 12px;
}

.msta-learning-tag:nth-child(1) i,
.msta-learning-tag:nth-child(9) i {
  color: #ff9f43;
}

.msta-learning-tag:nth-child(2) i,
.msta-learning-tag:nth-child(7) i {
  color: #64c7ff;
}

.msta-learning-tag:nth-child(3) i,
.msta-learning-tag:nth-child(8) i {
  color: #9b8cff;
}

@media (max-width: 991.98px) {
  .msta-industry-section {
    padding: 70px 20px 80px;
  }

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

  .msta-feature-card {
    min-height: 270px;
  }

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

  .msta-practical-section {
    padding: 40px 30px 42px;
  }
}

@media (max-width: 767.98px) {
  .msta-industry-section {
    padding: 60px 15px 65px;
  }

  .msta-section-heading {
    margin-bottom: 38px;
  }

  .msta-section-heading h2 {
    font-size: 2rem;
    letter-spacing: -0.7px;
  }

  .msta-section-heading p {
    font-size: 13px;
  }

  .msta-feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 50px;
  }

  .msta-feature-card {
    min-height: auto;
    padding: 24px 21px;
  }

  .msta-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 17px;
    font-size: 18px;
  }

  .msta-feature-card h3 {
    font-size: 17px;
  }

  .msta-feature-card p {
    font-size: 13px;
  }

  .msta-practical-section {
    padding: 35px 20px 38px;
    border-radius: 22px;
  }

  .msta-practical-header h2 {
    font-size: 1.65rem;
  }

  .msta-practical-header p {
    font-size: 13px;
  }

  .msta-learning-tags {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }

  .msta-learning-tag {
    min-height: 55px;

    padding: 9px;

    gap: 8px;

    font-size: 11px;
  }

  .msta-learning-tag i {
    width: 27px;
    height: 27px;
    border-radius: 7px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .msta-section-heading h2 {
    font-size: 1.7rem;
  }

  .msta-eyebrow {
    font-size: 9px;
    padding: 6px 11px;
  }

  .msta-learning-tags {
    grid-template-columns: 1fr;
  }

  .msta-learning-tag {
    min-height: 52px;
  }
}

/* ===== 3rd section end ===== */

/* ===== 4rt srction start ===== */

.msta-real-world-section {
  position: relative;
  background: #faf6f0;
  overflow: hidden;
}

.msta-real-world-title {
  color: #0b1635;
  line-height: 1.25;
  letter-spacing: -0.7px;
  margin-bottom: 0;
}

.msta-real-world-title .text-orange {
  color: #fa7516 !important;
}

.msta-real-card {
  position: relative;
  padding: 25px;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.1);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11, 22, 53, 0.055);
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.msta-real-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #fa7516;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.msta-real-card:hover {
  transform: translateY(-7px);
  border-color: rgba(250, 117, 22, 0.25);
  box-shadow: 0 18px 40px rgba(11, 22, 53, 0.11);
}

.msta-real-card:hover::before {
  transform: scaleX(1);
}

.msta-real-card-top {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(30, 59, 138, 0.08);
}

.msta-real-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(30, 59, 138, 0.07);
  color: #1e3b8a;
  font-size: 22px;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.msta-real-card:hover .msta-real-icon {
  background: #fa7516;
  color: #ffffff;
  transform: rotate(-5deg) scale(1.05);
}

.msta-real-number {
  display: block;
  margin-bottom: 2px;
  color: rgba(30, 59, 138, 0.45);
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.msta-real-card h3 {
  margin: 0;
  color: #0b1635;
  font-family: var(--font-poppins);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.msta-real-content {
  padding-top: 20px;
}

.msta-learning-box {
  padding: 15px 16px;
  background: #f7f8fc;
  border: 1px solid rgba(30, 59, 138, 0.07);
  border-radius: 12px;
}

.msta-industry-box {
  padding: 15px 16px;
  background: rgba(250, 117, 22, 0.055);
  border: 1px solid rgba(250, 117, 22, 0.13);
  border-radius: 12px;
}

.msta-box-label {
  display: block;
  margin-bottom: 7px;
  color: #1e3b8a;
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.msta-industry-box .msta-box-label {
  color: #fa7516;
}

/* Paragraph */
.msta-real-card p {
  margin: 0;
  color: #59657b;
  font-family: var(--font-jakarta);
  font-size: 13px;
  line-height: 1.7;
}

.msta-arrow {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 9px auto;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(250, 117, 22, 0.2);
  color: #fa7516;
  font-size: 11px;
  box-shadow: 0 4px 12px rgba(11, 22, 53, 0.06);
}

@media (max-width: 991.98px) {
  .msta-real-card {
    padding: 22px;
  }

  .msta-real-card h3 {
    font-size: 17px;
  }

  .msta-real-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

@media (max-width: 767.98px) {
  .msta-real-world-title {
    font-size: 27px !important;
  }

  .msta-real-card {
    padding: 20px;
    border-radius: 16px;
  }

  .msta-real-card-top {
    padding-bottom: 16px;
  }

  .msta-real-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 18px;
  }

  .msta-real-card h3 {
    font-size: 16px;
  }

  .msta-real-card p {
    font-size: 12.5px;
  }
}

/* ===== 4rt srction end ===== */

/* ===== 5th section start ===== */

.msta-value-section {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.msta-value-title {
  margin: 0;
  color: #0b1635;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.8px;
}

.msta-value-title .text-orange {
  color: #fa7516 !important;
}

.msta-value-intro {
  max-width: 700px;
  margin: 17px auto 0;
  color: #687287;
  font-size: 16px;
  line-height: 1.4;
}

.msta-value-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px 18px;
  background: #faf6f0;
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11, 22, 53, 0.045);
}

.msta-flow-item {
  min-width: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  text-align: center;
}

.msta-flow-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.1);
  color: #1e3b8a;
  font-size: 19px;
  box-shadow: 0 6px 18px rgba(11, 22, 53, 0.06);
  transition: all 0.3s ease;
}

.msta-flow-item span {
  color: #0b1635;
  font-family: var(--font-poppins);
  font-size: 13px;
  font-weight: 700;
}

.msta-flow-item:hover .msta-flow-icon {
  background: #fa7516;
  color: #ffffff;
  transform: translateY(-4px);
}

/* Arrow */

.msta-flow-arrow {
  color: #fa7516;
  font-size: 15px;
}

.msta-value-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 20px;
  background: rgba(30, 59, 138, 0.035);
  border-left: 3px solid #fa7516;
  border-radius: 10px;
}

.msta-value-note i {
  color: #fa7516;
  font-size: 15px;
}

.msta-value-note p {
  margin: 0;
  color: #4f5b70;
  font-size: 13px;
  line-height: 1.6;
}

.msta-value-note strong {
  color: #0b1635;
}

.msta-value-question {
  position: relative;
  min-height: 145px;
  padding: 22px 20px;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.09);
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(11, 22, 53, 0.045);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.msta-value-question::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: #1e3b8a;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.msta-value-question:hover {
  transform: translateY(-5px);
  border-color: rgba(250, 117, 22, 0.2);
  box-shadow: 0 15px 35px rgba(11, 22, 53, 0.09);
}

.msta-value-question:hover::before {
  transform: scaleY(1);
}

/* Number */
.msta-question-number {
  position: absolute;
  top: 14px;
  right: 16px;
  color: rgba(30, 59, 138, 0.25);
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Icon */
.msta-question-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 11px;
  background: rgba(30, 59, 138, 0.07);
  color: #1e3b8a;
  font-size: 15px;
  transition: all 0.3s ease;
}

.msta-value-question:hover .msta-question-icon {
  background: #fa7516;
  color: #ffffff;
  transform: rotate(-5deg);
}

/* Question text */
.msta-value-question p {
  max-width: 230px;
  margin: 0;
  color: #28334d;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
}

.msta-value-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 50px;
  background: #0b1635;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(11, 22, 53, 0.1);
}

.msta-value-bottom i {
  color: #fa7516;
  font-size: 16px;
}

.msta-value-bottom span {
  font-size: 13px;
  line-height: 1.5;
}

.msta-value-bottom strong {
  color: #fa7516;
}

@media (max-width: 991.98px) {
  .msta-value-flow {
    gap: 8px;
    padding: 20px 12px;
  }

  .msta-flow-item {
    min-width: 100px;
  }

  .msta-flow-icon {
    width: 45px;
    height: 45px;
    font-size: 17px;
  }

  .msta-flow-item span {
    font-size: 12px;
  }

  .msta-flow-arrow {
    font-size: 12px;
  }
}

@media (max-width: 767.98px) {
  .msta-value-title {
    font-size: 27px;
  }

  .msta-value-intro {
    font-size: 13px;
  }

  .msta-value-flow {
    flex-wrap: wrap;
    padding: 20px 12px;
    gap: 12px;
  }

  .msta-flow-item {
    min-width: 90px;
    flex: 1;
  }

  .msta-flow-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 16px;
  }

  .msta-flow-item span {
    font-size: 11px;
  }

  .msta-flow-arrow {
    font-size: 11px;
  }

  .msta-value-note {
    align-items: flex-start;
    padding: 14px 15px;
  }

  .msta-value-question {
    min-height: auto;
    padding: 20px 18px;
  }

  .msta-value-bottom {
    border-radius: 15px;
    padding: 14px 16px;
    text-align: center;
  }

  .msta-value-bottom span {
    font-size: 12px;
  }
}

@media (max-width: 575.98px) {
  .msta-value-label {
    font-size: 8px;
    letter-spacing: 1.1px;
  }

  .msta-value-title {
    font-size: 24px;
  }

  .msta-value-flow {
    gap: 6px;
  }

  .msta-flow-item {
    min-width: 70px;
  }

  .msta-flow-item span {
    font-size: 10px;
  }

  .msta-flow-arrow {
    font-size: 9px;
  }
}

/* ===== 5th section end ===== */

/* ===== 6th section start ===== */

.msta-business-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 25px !important;
  padding-bottom: 25px !important;
  background-color: #faf6f0;
  background-image:
    linear-gradient(rgba(30, 59, 138, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 59, 138, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #faf6f0 0%, #ffffff 48%, #f4f7ff 100%);
  background-size:
    45px 45px,
    45px 45px,
    100% 100%;
}

.msta-business-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -250px;
  right: -190px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(30, 59, 138, 0.13) 0%,
      rgba(30, 59, 138, 0.07) 35%,
      rgba(30, 59, 138, 0.025) 55%,
      transparent 72%);

  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: mstaBusinessGlow 9s ease-in-out infinite;
}

.msta-business-section::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  bottom: -230px;
  left: -170px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.13) 0%,
      rgba(250, 117, 22, 0.07) 35%,
      rgba(250, 117, 22, 0.025) 55%,
      transparent 72%);

  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: mstaBusinessGlow2 11s ease-in-out infinite;
}

@keyframes mstaBusinessGlow {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-25px, 25px) scale(1.08);
  }
}

@keyframes mstaBusinessGlow2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(30px, -20px) scale(1.1);
  }
}

.msta-business-section>.container {
  position: relative;
  z-index: 2;
}

.msta-business-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px;
  margin-bottom: 14px;
  border-radius: 50px;
  background: rgba(250, 117, 22, 0.08);
  border: 1px solid rgba(250, 117, 22, 0.18);
  color: #fa7516;
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.msta-business-title {
  margin: 0;
  color: #0b1635;
  font-family: var(--font-poppins);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.8px;
}

.msta-business-title span {
  color: #fa7516;
}

.msta-business-intro {
  max-width: 720px;
  margin: 16px auto 0;
  color: #687287;
  font-family: var(--font-jakarta);
  font-size: 14px;
  line-height: 1.8;
  font-weight: 400;
}

.msta-industry-card {
  position: relative;
  min-height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(30, 59, 138, 0.09);
  border-radius: 15px;
  color: #28334d;
  box-shadow: 0 7px 22px rgba(11, 22, 53, 0.045);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

/* Orange top line */

.msta-industry-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fa7516;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* Industry Icon */

.msta-industry-card i {
  color: #1e3b8a;
  font-size: 21px;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

/* Industry Text */

.msta-industry-card span {
  font-family: var(--font-jakarta);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #28334d;
}

/* Hover */

.msta-industry-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(250, 117, 22, 0.25);
  box-shadow: 0 15px 30px rgba(11, 22, 53, 0.09);
}

.msta-industry-card:hover::before {
  transform: scaleX(1);
}

.msta-industry-card:hover i {
  color: #fa7516;
  transform: translateY(-3px) scale(1.05);
}

.msta-domain-box {
  position: relative;
  padding: 30px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(30, 59, 138, 0.09);
  border-radius: 22px;
  box-shadow: 0 12px 35px rgba(11, 22, 53, 0.055);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Top Orange Line */

.msta-domain-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #fa7516, #ff9d19, #1e3b8a);
}

/* Decorative Circle */

.msta-domain-box::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  bottom: -90px;
  border-radius: 50%;
  border: 1px solid rgba(30, 59, 138, 0.07);
  pointer-events: none;
}

.msta-domain-heading {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Domain Icon */

.msta-domain-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(30, 59, 138, 0.07);
  border: 1px solid rgba(30, 59, 138, 0.08);
  color: #1e3b8a;
  font-size: 20px;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.msta-domain-box:hover .msta-domain-icon {
  background: #fa7516;
  color: #ffffff;
  transform: rotate(-5deg);
}

/* Small Label */
.msta-domain-heading span {
  display: block;
  margin-bottom: 3px;
  color: #fa7516;
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

/* Domain Heading */

.msta-domain-heading h3 {
  margin: 0;
  color: #0b1635;
  font-family: var(--font-poppins);
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
}

.msta-domain-heading h3 strong {
  color: #fa7516;
}

.msta-domain-text {
  max-width: 850px;
  margin: 18px 0;
  color: #687287;
  font-family: var(--font-jakarta);
  font-size: 13px;
  line-height: 1.75;
  font-weight: 400;
}

.msta-usecase-card {
  position: relative;
  height: 100%;
  min-height: 130px;
  padding: 18px;
  background: #faf6f0;
  border: 1px solid rgba(30, 59, 138, 0.07);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Decorative Circle */

.msta-usecase-card::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  right: -30px;
  bottom: -30px;
  border-radius: 50%;
  background: rgba(30, 59, 138, 0.035);
  transition:
    transform 0.4s ease,
    background 0.4s ease;
}

/* Icon */

.msta-usecase-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 10px;
  background: #ffffff;
  color: #1e3b8a;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(11, 22, 53, 0.04);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

/* Use Case Label */

.msta-usecase-card>span {
  display: block;
  margin-bottom: 5px;
  color: #fa7516;
  font-family: var(--font-poppins);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
}

.msta-usecase-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #28334d;
  font-family: var(--font-jakarta);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* Hover */

.msta-usecase-card:hover {
  transform: translateY(-4px);
  background: #ffffff;
  border-color: rgba(250, 117, 22, 0.18);
  box-shadow: 0 12px 25px rgba(11, 22, 53, 0.07);
}

.msta-usecase-card:hover::after {
  transform: scale(1.5);
  background: rgba(250, 117, 22, 0.06);
}

.msta-usecase-card:hover .msta-usecase-icon {
  background: #fa7516;
  color: #ffffff;
  transform: scale(1.05);
}

.msta-domain-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(30, 59, 138, 0.08);
  color: #59657b;
  font-family: var(--font-jakarta);
  font-size: 12px;
  line-height: 1.6;
}

.msta-domain-footer i {
  flex-shrink: 0;
  color: #fa7516;
  font-size: 15px;
}

.msta-embedded-section {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  background-image:
    radial-gradient(circle at 90% 20%,
      rgba(30, 59, 138, 0.05),
      transparent 25%),
    radial-gradient(circle at 5% 90%, rgba(250, 117, 22, 0.05), transparent 25%);
}

.msta-embedded-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: #fa7516;
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.msta-embedded-label span {
  width: 28px;
  height: 2px;
  background: #fa7516;
  border-radius: 10px;
}

.msta-embedded-title {
  margin: 0;
  color: #0b1635;
  font-family: var(--font-poppins);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.8px;
}

.msta-embedded-title span {
  color: #fa7516;
}

.msta-embedded-intro {
  max-width: 100%;
  margin: 14px 0 0;
  color: #687287;
  font-family: var(--font-jakarta);
  font-size: 14px;
  line-height: 1.7;
}

.msta-challenge-box {
  position: relative;
  padding: 28px;
  background: rgba(250, 246, 240, 0.92);
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11, 22, 53, 0.045);
  overflow: hidden;
}

/* Decorative circle */

.msta-challenge-box::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  right: -110px;
  top: -100px;
  border-radius: 50%;
  border: 1px solid rgba(250, 117, 22, 0.08);
  pointer-events: none;
}

.msta-challenge-header,
.msta-approach-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Header Icons */

.msta-challenge-icon,
.msta-approach-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #ffffff;
  color: #fa7516;
  font-size: 19px;
  box-shadow: 0 5px 15px rgba(11, 22, 53, 0.05);
}

.msta-challenge-header span,
.msta-approach-header span {
  display: block;
  color: #fa7516;
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.msta-challenge-header h3,
.msta-approach-header h3 {
  margin: 3px 0 0;
  color: #0b1635;
  font-family: var(--font-poppins);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
}

.msta-question-card {
  position: relative;
  min-height: 120px;
  padding: 17px;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.07);
  border-radius: 13px;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* Question number */
.msta-question-card b {
  position: absolute;
  top: 10px;
  right: 13px;
  color: rgba(30, 59, 138, 0.22);
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
}

/* Question Icon */
.msta-question-card i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-bottom: 12px;
  border-radius: 9px;
  background: rgba(30, 59, 138, 0.07);
  color: #1e3b8a;
  font-size: 14px;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

/* Question text */
.msta-question-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #39445b;
  font-family: var(--font-jakarta);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.55;
}

/* Question hover */
.msta-question-card:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 117, 22, 0.2);
  box-shadow: 0 12px 25px rgba(11, 22, 53, 0.08);
}

.msta-question-card:hover i {
  background: #fa7516;
  color: #ffffff;
  transform: rotate(-5deg);
}

.msta-approach-box {
  position: relative;
  padding: 28px;
  background: linear-gradient(135deg, #0b1635 0%, #102354 60%, #1e3b8a 100%);
  border-radius: 20px;
  color: #ffffff;
  box-shadow: 0 12px 35px rgba(11, 22, 53, 0.12);
  overflow: hidden;
}

/* Background Circle */
.msta-approach-box::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -140px;
  top: -140px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 35px rgba(255, 255, 255, 0.015),
    0 0 0 70px rgba(255, 255, 255, 0.01);
  pointer-events: none;
}

/* Second decorative element */

.msta-approach-box::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  bottom: -80px;
  left: -70px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.07);
  filter: blur(5px);
  pointer-events: none;
}

/* Approach Header */

.msta-approach-box .msta-approach-header {
  position: relative;
  z-index: 2;
}

.msta-approach-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #fa7516;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.msta-approach-header h3 {
  color: #ffffff;
}

.msta-approach-header h3 strong {
  color: #fa7516;
}

.msta-approach-text {
  position: relative;
  z-index: 2;
  margin: 22px 0;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-jakarta);
  font-size: 12.5px;
  line-height: 1.7;
}

.msta-learning-journey {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 20px 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* Journey Item */
.msta-journey-item {
  position: relative;
  min-width: 75px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

/* Journey Number */
.msta-journey-item span {
  position: absolute;
  top: -7px;
  right: 2px;
  color: rgba(255, 255, 255, 0.25);
  font-family: var(--font-poppins);
  font-size: 8px;
}

/* Journey Icon */
.msta-journey-item i {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #fa7516;
  font-size: 15px;
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.msta-journey-item:hover i {
  background: rgba(250, 117, 22, 0.15);
  transform: translateY(-4px);
}

/* Journey Text */
.msta-journey-item strong {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-jakarta);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.3;
}

/* Journey Line */
.msta-journey-line {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(250, 117, 22, 0.65),
      rgba(255, 255, 255, 0.12));
}

.msta-approach-result {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-jakarta);
  font-size: 11px;
  line-height: 1.6;
}

.msta-approach-result i {
  flex-shrink: 0;
  color: #fa7516;
  margin-top: 2px;
}

@media (max-width: 1199.98px) {
  .msta-industry-card {
    min-height: 90px;
  }
}

@media (max-width: 991.98px) {
  .msta-business-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .msta-domain-box,
  .msta-challenge-box,
  .msta-approach-box {
    padding: 23px;
  }

  .msta-domain-heading h3,
  .msta-challenge-header h3,
  .msta-approach-header h3 {
    font-size: 17px;
  }

  .msta-domain-icon {
    width: 48px;
    height: 48px;
  }

  .msta-industry-card {
    min-height: 88px;
  }
}

@media (max-width: 767.98px) {

  .msta-business-section,
  .msta-embedded-section {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  /* Background smaller on mobile */
  .msta-business-section::before {
    width: 330px;
    height: 330px;
    top: -150px;
    right: -150px;
  }

  .msta-business-section::after {
    width: 280px;
    height: 280px;
    bottom: -150px;
    left: -130px;
  }

  /* Heading */
  .msta-business-title,
  .msta-embedded-title {
    font-size: 27px;
    letter-spacing: -0.4px;
  }

  .msta-business-intro,
  .msta-embedded-intro {
    font-size: 13px;
    line-height: 1.7;
  }

  /* Industry Cards */
  .msta-industry-card {
    min-height: 82px;
    padding: 12px;
    border-radius: 13px;
  }

  .msta-industry-card i {
    font-size: 18px;
  }

  .msta-industry-card span {
    font-size: 10.5px;
  }

  /* Domain */
  .msta-domain-box {
    padding: 20px;
    border-radius: 17px;
  }

  .msta-domain-heading {
    align-items: flex-start;
  }

  .msta-domain-icon {
    width: 44px;
    height: 44px;
    font-size: 17px;
    border-radius: 11px;
  }

  .msta-domain-heading h3 {
    font-size: 16px;
  }

  .msta-domain-text {
    font-size: 12px;
    line-height: 1.7;
  }

  .msta-domain-footer {
    align-items: flex-start;
    font-size: 11px;
  }

  /* Embedded */
  .msta-challenge-box,
  .msta-approach-box {
    padding: 20px;
    border-radius: 17px;
  }

  .msta-challenge-header h3,
  .msta-approach-header h3 {
    font-size: 16px;
  }

  .msta-challenge-icon,
  .msta-approach-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 17px;
  }

  /* Journey */
  .msta-learning-journey {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }

  .msta-journey-item {
    min-width: 72px;
  }
}

@media (max-width: 575.98px) {
  .msta-business-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .msta-business-label {
    font-size: 8px;
    letter-spacing: 1.1px;
    padding: 6px 12px;
  }

  .msta-business-title,
  .msta-embedded-title {
    font-size: 24px;
  }

  .msta-business-intro,
  .msta-embedded-intro {
    font-size: 12.5px;
  }

  .msta-domain-heading h3 {
    font-size: 15px;
  }

  .msta-domain-footer {
    font-size: 10.5px;
  }

  .msta-question-card {
    min-height: 105px;
  }

  .msta-question-wide {
    min-height: auto;
  }

  .msta-approach-result {
    font-size: 10.5px;
  }

  .msta-journey-item {
    min-width: 68px;
  }

  .msta-journey-item strong {
    font-size: 7.5px;
  }
}

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

  .msta-business-section::before,
  .msta-business-section::after {
    animation: none !important;
  }

  .msta-industry-card,
  .msta-usecase-card,
  .msta-question-card,
  .msta-domain-icon,
  .msta-usecase-icon,
  .msta-question-card i,
  .msta-journey-item i {
    transition: none !important;
  }
}

/* ===== 6th section end ===== */

/* ===== 7th section start ===== */

.msta-buildcycle-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1635 0%, #102354 45%, #1e3b8a 100%);
  isolation: isolate;
}

.msta-buildcycle-section::before {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  top: -300px;
  right: -220px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
      rgba(255, 255, 255, 0.07) 0px,
      rgba(255, 255, 255, 0.07) 1px,
      transparent 1px,
      transparent 32px);

  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
  animation: mstaCycleRotate 30s linear infinite;
}

/* Orange glowing shape */

.msta-buildcycle-section::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  bottom: -220px;
  left: -170px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.25) 0%,
      rgba(250, 117, 22, 0.1) 35%,
      transparent 70%);

  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
  animation: mstaCycleGlow 8s ease-in-out infinite;
}

.msta-buildcycle-bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: linear-gradient(45deg,
      transparent 48%,
      rgba(255, 255, 255, 0.035) 49%,
      rgba(255, 255, 255, 0.035) 51%,
      transparent 52%);
  background-size: 70px 70px;

  z-index: -1;
}

@keyframes mstaCycleRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes mstaCycleGlow {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(35px, -25px) scale(1.12);
  }
}

.msta-cycle-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fa7516;
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.7px;
}

.msta-cycle-label span {
  width: 30px;
  height: 1px;
  background: #fa7516;
}

.msta-cycle-title {
  margin: 13px 0 0;
  color: #ffffff;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -1px;
}

.msta-cycle-title span {
  color: #fa7516;
}

.msta-cycle-intro {
  max-width: 650px;
  margin: 15px auto 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.8;
}

.msta-cycle-intro strong {
  color: #ffffff;
}

.msta-cycle-wrapper {
  position: relative;
  width: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msta-cycle-wrapper::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 35px rgba(255, 255, 255, 0.015),
    0 0 0 70px rgba(255, 255, 255, 0.01);
  animation: cycleRingRotate 25s linear infinite;
}

.msta-cycle-wrapper::after {
  content: "";
  position: absolute;
  width: 510px;
  height: 510px;
  border-radius: 50%;
  border: 1px solid rgba(250, 117, 22, 0.1);
  animation: cycleRingRotateReverse 35s linear infinite;
}

@keyframes cycleRingRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes cycleRingRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.msta-cycle-center {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #284ca4, #102354 65%, #0b1635);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 0 50px rgba(250, 117, 22, 0.12),
    inset 0 0 35px rgba(255, 255, 255, 0.03);

  z-index: 5;
}

.msta-cycle-center-ring {
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1px solid rgba(250, 117, 22, 0.35);
  border-top-color: #fa7516;
  animation: centerRingRotate 7s linear infinite;
}

@keyframes centerRingRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.msta-cycle-center-icon {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.12);
  color: #fa7516;
  font-size: 20px;
}

.msta-cycle-center strong {
  color: #ffffff;
  font-family: var(--font-poppins);
  font-size: 17px;
  line-height: 1;
}

.msta-cycle-center>span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-poppins);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2px;
}

.msta-cycle-step {
  position: absolute;
  width: 240px;
  padding: 8px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  z-index: 6;
}

/* Step hover */

.msta-cycle-step:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(250, 117, 22, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.msta-cycle-01 {
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
}

.msta-cycle-01:hover {
  transform: translateX(-50%) translateY(-5px);
}

.msta-cycle-02 {
  top: 38px;
  left: 10%;
}

.msta-cycle-03 {
  bottom: 15px;
  left: 13%;
}

.msta-cycle-04 {
  bottom: 142px;
  right: 10%;
}

.msta-cycle-05 {
  top: 165px;
  right: 13%;
}

.msta-cycle-number {
  position: absolute;
  top: 10px;
  right: 12px;
  color: rgba(255, 255, 255, 0.2);
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

.msta-cycle-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(250, 117, 22, 0.1);
  border: 1px solid rgba(250, 117, 22, 0.18);
  color: #fa7516;
  font-size: 16px;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.msta-cycle-step:hover .msta-cycle-icon {
  background: #fa7516;
  color: #ffffff;
  transform: rotate(-5deg) scale(1.06);
}

.msta-cycle-content {
  padding-right: 10px;
}

.msta-cycle-content h3 {
  margin: 1px 0 6px;
  color: #ffffff;
  font-family: var(--font-poppins);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.msta-cycle-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-jakarta);
  font-size: 10.5px;
  line-height: 1.6;
}

.msta-cycle-step::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fa7516;
  box-shadow:
    0 0 0 5px rgba(250, 117, 22, 0.08),
    0 0 15px rgba(250, 117, 22, 0.3);
}

.msta-cycle-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 5px;
}

.msta-cycle-bottom p {
  max-width: 500px;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 1.7;
}

.msta-cycle-bottom strong {
  color: #ffffff;
}

.msta-cycle-line {
  width: 55px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 117, 22, 0.6));
}

.msta-cycle-line:last-child {
  background: linear-gradient(90deg, rgba(250, 117, 22, 0.6), transparent);
}

.msta-gain-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #faf6f0 0%, #ffffff 52%, #f3f6ff 100%);
}

/* Unique pseudo background */

.msta-gain-section::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  top: -260px;
  left: -190px;
  border-radius: 50%;
  border: 70px solid rgba(30, 59, 138, 0.035);
  box-shadow:
    0 0 0 35px rgba(250, 117, 22, 0.025),
    0 0 0 70px rgba(30, 59, 138, 0.02);
  pointer-events: none;
}

.msta-gain-section::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  right: -100px;
  bottom: -120px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.12),
      transparent 70%);
  pointer-events: none;
}

.msta-gain-section>.container {
  position: relative;
  z-index: 2;
}

.msta-gain-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 13px;
  border-radius: 50px;
  background: rgba(30, 59, 138, 0.07);
  color: #1e3b8a;
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.msta-gain-title {
  max-width: 680px;
  margin: 0;
  color: #0b1635;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.7px;
}

.msta-gain-title span {
  color: #fa7516;
}

.msta-gain-intro {
  margin: 0;
  color: #687287;
  font-size: 13px;
  line-height: 1.8;
}

.msta-gain-card {
  position: relative;
  padding: 23px 20px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(11, 22, 53, 0.045);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Orange top */

.msta-gain-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fa7516;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

/* Decorative circle */

.msta-gain-card::after {
  content: "";
  position: absolute;
  width: 85px;
  height: 85px;
  right: -45px;
  bottom: -45px;
  border-radius: 50%;
  background: rgba(30, 59, 138, 0.035);
  transition:
    transform 0.4s ease,
    background 0.4s ease;
}

.msta-gain-card:hover {
  transform: translateY(-6px);
  border-color: rgba(250, 117, 22, 0.2);
  box-shadow: 0 17px 35px rgba(11, 22, 53, 0.09);
}

.msta-gain-card:hover::before {
  transform: scaleX(1);
}

.msta-gain-card:hover::after {
  transform: scale(1.4);
  background: rgba(250, 117, 22, 0.05);
}

/* Number */

.msta-gain-number {
  position: absolute;
  top: 14px;
  right: 17px;
  color: rgba(30, 59, 138, 0.2);
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
}

/* Gain Icon */

.msta-gain-icon {
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  border-radius: 11px;
  background: rgba(250, 117, 22, 0.08);
  color: #fa7516;
  font-size: 16px;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.msta-gain-card:hover .msta-gain-icon {
  background: #fa7516;
  color: #ffffff;
  transform: rotate(-5deg);
}

/* Gain Heading */

.msta-gain-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  color: #0b1635;
  font-family: var(--font-poppins);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}

/* Gain Text */

.msta-gain-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #687287;
  font-family: var(--font-jakarta);
  font-size: 11px;
  line-height: 1.65;
}

.msta-objective-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 25px 28px;
  background: linear-gradient(135deg, #0b1635, #1e3b8a);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(11, 22, 53, 0.12);
}

/* Background pseudo */

.msta-objective-box::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -80px;
  border-radius: 50%;
  border: 35px solid rgba(255, 255, 255, 0.025);
}

.msta-objective-box::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  right: 25px;
  bottom: 22px;
  border-radius: 50%;
  background: #fa7516;
  box-shadow:
    0 0 0 7px rgba(250, 117, 22, 0.08),
    0 0 20px rgba(250, 117, 22, 0.35);
}

.msta-objective-icon {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(250, 117, 22, 0.12);
  color: #fa7516;
  font-size: 19px;
}

/* Objective Label */

.msta-objective-box span {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 7px;
  color: #fa7516;
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.msta-objective-box p {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 1.7;
}

.msta-objective-box strong {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 1199.98px) {
  .msta-cycle-step {
    width: 215px;
  }

  .msta-cycle-02 {
    left: 1%;
  }

  .msta-cycle-05 {
    right: 1%;
  }
}

@media (max-width: 991.98px) {

  .msta-buildcycle-section,
  .msta-gain-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .msta-cycle-wrapper {
    min-height: 650px;
  }

  .msta-cycle-wrapper::before {
    width: 330px;
    height: 330px;
  }

  .msta-cycle-wrapper::after {
    width: 430px;
    height: 430px;
  }

  .msta-cycle-center {
    width: 145px;
    height: 145px;
  }

  .msta-cycle-step {
    width: 200px;
  }

  .msta-cycle-02 {
    top: 170px;
    left: 0;
  }

  .msta-cycle-05 {
    top: 170px;
    right: 0;
  }

  .msta-cycle-03 {
    bottom: 25px;
    left: 4%;
  }

  .msta-cycle-04 {
    bottom: 25px;
    right: 4%;
  }
}

@media (max-width: 767.98px) {

  .msta-buildcycle-section,
  .msta-gain-section {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .msta-cycle-title,
  .msta-gain-title {
    font-size: 27px;
    letter-spacing: -0.4px;
  }

  .msta-cycle-intro {
    font-size: 12.5px;
  }

  .msta-cycle-wrapper {
    min-height: auto;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 10px 5px;
  }

  .msta-cycle-wrapper::before,
  .msta-cycle-wrapper::after {
    display: none;
  }

  /* Center */

  .msta-cycle-center {
    position: relative;
    width: 115px;
    height: 115px;
    margin: 0 auto 15px;
    z-index: 5;
  }

  .msta-cycle-center-icon {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }

  .msta-cycle-center strong {
    font-size: 14px;
  }

  /* All steps */

  .msta-cycle-step,
  .msta-cycle-01,
  .msta-cycle-02,
  .msta-cycle-03,
  .msta-cycle-04,
  .msta-cycle-05 {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    transform: none !important;
  }

  .msta-cycle-step:hover {
    transform: translateY(-3px) !important;
  }

  .msta-cycle-step {
    padding: 16px;
    border-radius: 14px;
  }

  .msta-cycle-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 15px;
  }

  .msta-cycle-content h3 {
    font-size: 13px;
  }

  .msta-cycle-content p {
    font-size: 10.5px;
  }

  .msta-cycle-bottom {
    gap: 10px;
    margin-top: 15px;
  }

  .msta-cycle-line {
    display: none;
  }

  .msta-cycle-bottom p {
    font-size: 11px;
  }

  /* Gain */

  .msta-gain-intro {
    font-size: 12px;
  }

  .msta-gain-card {
    padding: 20px 18px;
  }

  .msta-objective-box {
    padding: 20px;
    gap: 13px;
    border-radius: 15px;
  }

  .msta-objective-icon {
    width: 43px;
    height: 43px;
    font-size: 16px;
  }

  .msta-objective-box strong {
    font-size: 12.5px;
  }
}

@media (max-width: 575.98px) {

  .msta-cycle-title,
  .msta-gain-title {
    font-size: 24px;
  }

  .msta-cycle-label {
    font-size: 8px;

    letter-spacing: 1.2px;
  }

  .msta-cycle-label span {
    width: 20px;
  }

  .msta-cycle-center {
    width: 105px;
    height: 105px;
  }

  .msta-cycle-step {
    padding: 14px;
  }

  .msta-cycle-content h3 {
    font-size: 12px;
  }

  .msta-cycle-content p {
    font-size: 10px;
  }

  .msta-gain-card h3 {
    font-size: 13px;
  }

  .msta-gain-card p {
    font-size: 10.5px;
  }

  .msta-objective-box {
    align-items: flex-start;

    padding: 17px;
  }

  .msta-objective-box p {
    font-size: 10.5px;
  }

  .msta-objective-box strong {
    font-size: 11.5px;
  }
}

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

  .msta-buildcycle-section::before,
  .msta-buildcycle-section::after,
  .msta-cycle-wrapper::before,
  .msta-cycle-wrapper::after,
  .msta-cycle-center-ring {
    animation: none !important;
  }

  .msta-cycle-step,
  .msta-gain-card,
  .msta-gain-icon,
  .msta-cycle-icon {
    transition: none !important;
  }
}

/* ===== 7th section end ===== */

/* ===== 8th section srart ===== */

.msta-audience-section,
.msta-professional-section,
.msta-university-section,
.msta-closing-section {
  position: relative;
  overflow: hidden;
}

.msta-students-section {
  background: linear-gradient(135deg, #faf6f0 0%, #ffffff 55%, #f1f5ff 100%);
}

/* Unique student background */

.msta-students-section::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  top: -250px;
  right: -180px;

  border-radius: 50%;

  background: repeating-radial-gradient(circle,
      rgba(30, 59, 138, 0.055) 0,
      rgba(30, 59, 138, 0.055) 1px,
      transparent 1px,
      transparent 25px);

  opacity: 0.8;

  pointer-events: none;

  animation: studentOrbit 25s linear infinite;
}

.msta-students-section::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  bottom: -160px;
  left: -120px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.12),
      transparent 70%);

  filter: blur(5px);

  pointer-events: none;
}

@keyframes studentOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.msta-audience-label {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 14px;

  color: #1e3b8a;

  font-family: var(--font-poppins);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

.msta-label-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #fa7516;

  box-shadow: 0 0 0 5px rgba(250, 117, 22, 0.08);
}

.msta-audience-title {
  max-width: 700px;

  margin: 0 0 20px;

  color: #0b1635;

  font-size: clamp(29px, 3.4vw, 45px);

  line-height: 1.18;

  font-weight: 700;

  letter-spacing: -1px;
}

.msta-audience-title span {
  color: #fa7516;
}

.msta-audience-text {
  max-width: 720px;

  margin-bottom: 13px;

  color: #687287;

  font-size: 13.5px;

  line-height: 1.8;
}

.msta-highlight-line {
  display: flex;

  align-items: center;

  gap: 12px;

  max-width: 650px;

  margin-top: 22px;

  padding: 14px 18px;

  border-left: 3px solid #fa7516;

  background: rgba(250, 117, 22, 0.055);

  border-radius: 0 10px 10px 0;

  color: #28334d;

  font-size: 12px;

  line-height: 1.6;
}

.msta-highlight-line i {
  flex-shrink: 0;

  color: #fa7516;
}

.msta-audience-visual {
  position: relative;

  min-height: 390px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.msta-visual-grid {
  position: absolute;

  width: 300px;
  height: 300px;

  background-image:
    linear-gradient(rgba(30, 59, 138, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 59, 138, 0.08) 1px, transparent 1px);

  background-size: 30px 30px;

  transform: perspective(500px) rotateX(55deg) rotateZ(-20deg);

  opacity: 0.45;

  mask-image: radial-gradient(circle, black 20%, transparent 72%);

  -webkit-mask-image: radial-gradient(circle, black 20%, transparent 72%);
}

/* Orbit */

.msta-orbit {
  position: absolute;

  border-radius: 50%;

  border: 1px dashed rgba(30, 59, 138, 0.18);
}

.orbit-one {
  width: 280px;
  height: 200px;

  animation: orbitRotate 18s linear infinite;
}

.orbit-two {
  width: 210px;
  height: 210px;

  border-color: rgba(250, 117, 22, 0.22);

  animation: orbitRotateReverse 12s linear infinite;
}

@keyframes orbitRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* Center */

.msta-visual-center {
  position: relative;

  width: 135px;
  height: 135px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  border-radius: 50%;

  background: linear-gradient(145deg, #1e3b8a, #0b1635);

  color: #ffffff;

  box-shadow:
    0 20px 45px rgba(11, 22, 53, 0.18),
    0 0 0 12px rgba(30, 59, 138, 0.05);

  z-index: 4;
}

.msta-visual-center i {
  margin-bottom: 9px;

  color: #fa7516;

  font-size: 28px;
}

.msta-visual-center strong {
  font-family: var(--font-poppins);

  font-size: 16px;
}

.msta-visual-center small {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.5);

  font-family: var(--font-poppins);

  font-size: 7px;

  letter-spacing: 1.5px;
}

/* Nodes */

.msta-visual-node {
  position: absolute;

  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 13px;

  background: #ffffff;

  border: 1px solid rgba(30, 59, 138, 0.09);

  color: #1e3b8a;

  box-shadow: 0 8px 25px rgba(11, 22, 53, 0.08);

  z-index: 5;

  font-size: 17px;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.msta-visual-node:hover {
  background: #fa7516;

  color: #ffffff;

  transform: scale(1.1);
}

.node-one {
  top: 55px;
  left: 15%;
}

.node-two {
  top: 40px;
  right: 12%;
}

.node-three {
  bottom: 55px;
  left: 12%;
}

.node-four {
  bottom: 45px;
  right: 15%;
}

.msta-professional-section {
  background: linear-gradient(135deg, #0b1635 0%, #102354 55%, #1e3b8a 100%);
}

/* Professional pseudo background */

.msta-professional-section::before {
  content: "";

  position: absolute;

  width: 650px;
  height: 650px;

  top: -300px;
  left: -250px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.07);

  box-shadow:
    0 0 0 45px rgba(255, 255, 255, 0.012),
    0 0 0 90px rgba(255, 255, 255, 0.01),
    0 0 0 135px rgba(250, 117, 22, 0.012);

  pointer-events: none;
}

.msta-professional-section::after {
  content: "";

  position: absolute;

  width: 400px;
  height: 400px;

  right: -180px;
  bottom: -200px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.18),
      transparent 70%);

  filter: blur(8px);

  pointer-events: none;
}

.professional-label {
  color: #fa7516;
}

.professional-title {
  color: #ffffff;
}

.professional-text {
  color: rgba(255, 255, 255, 0.65);
}

.msta-professional-visual {
  position: relative;

  min-height: 360px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.msta-professional-glow {
  position: absolute;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(30, 59, 138, 0.8),
      rgba(30, 59, 138, 0.1) 55%,
      transparent 72%);

  filter: blur(10px);
}

/* Main Icon */

.msta-professional-main-icon {
  position: relative;

  width: 135px;
  height: 135px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: linear-gradient(145deg, #ffffff, #e9edfa);

  color: #1e3b8a;

  font-size: 40px;

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.2),
    0 0 0 14px rgba(255, 255, 255, 0.04);

  z-index: 4;
}

.msta-professional-main-icon::after {
  content: "";

  position: absolute;

  inset: -12px;

  border-radius: 50%;

  border: 1px dashed rgba(250, 117, 22, 0.4);

  animation: professionalRing 15s linear infinite;
}

@keyframes professionalRing {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Professional badges */

.msta-professional-badge {
  position: absolute;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 9px 13px;

  border-radius: 50px;

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

  border: 1px solid rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  color: #ffffff;

  font-family: var(--font-poppins);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.8px;

  z-index: 5;
}

.msta-professional-badge i {
  color: #fa7516;
}

.badge-ai {
  top: 48px;
  left: 7%;
}

.badge-data {
  top: 120px;
  right: 0;
}

.badge-auto {
  bottom: 55px;
  left: 10%;
}

/* Lines */

.msta-professional-line {
  position: absolute;

  width: 90px;
  height: 1px;

  background: linear-gradient(90deg,
      transparent,
      rgba(250, 117, 22, 0.5),
      transparent);

  transform-origin: center;
}

.line-one {
  top: 93px;
  left: 24%;
  transform: rotate(25deg);
}

.line-two {
  top: 140px;
  right: 18%;
  transform: rotate(-25deg);
}

.line-three {
  bottom: 80px;
  left: 25%;
  transform: rotate(-25deg);
}

/* Professional note */

.msta-professional-note {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  max-width: 700px;

  margin-top: 25px;

  padding: 17px;

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

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 13px;
}

.msta-note-icon {
  flex-shrink: 0;

  width: 40px;
  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  background: rgba(250, 117, 22, 0.12);

  color: #fa7516;
}

.msta-professional-note strong {
  display: block;

  margin-bottom: 5px;

  color: #ffffff;

  font-size: 12px;
}

.msta-professional-note p {
  margin: 0;

  color: rgba(255, 255, 255, 0.55);

  font-size: 11px;

  line-height: 1.6;
}

.msta-university-section {
  background: linear-gradient(135deg, #ffffff, #faf6f0);
}

.msta-university-section::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  top: -250px;
  right: -220px;

  background: repeating-conic-gradient(from 0deg,
      rgba(30, 59, 138, 0.035) 0deg,
      rgba(30, 59, 138, 0.035) 2deg,
      transparent 2deg,
      transparent 12deg);

  border-radius: 50%;

  mask-image: radial-gradient(circle, black, transparent 70%);

  -webkit-mask-image: radial-gradient(circle, black, transparent 70%);

  animation: universitySpin 35s linear infinite;

  pointer-events: none;
}

@keyframes universitySpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.msta-university-section>.container {
  position: relative;

  z-index: 2;
}

/* University label */

.msta-university-label {
  display: inline-block;

  padding: 6px 14px;

  margin-bottom: 13px;

  border-radius: 50px;

  background: rgba(30, 59, 138, 0.07);

  color: #1e3b8a;

  font-family: var(--font-poppins);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

/* University title */

.msta-university-title {
  margin: 0;

  color: #0b1635;

  font-size: clamp(28px, 3vw, 42px);

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -0.7px;
}

.msta-university-title span {
  color: #fa7516;
}

/* University intro */

.msta-university-intro {
  max-width: 700px;

  margin: 15px auto 0;

  color: #687287;

  font-size: 13px;

  line-height: 1.8;
}

.msta-university-card {
  position: relative;

  height: 100%;

  min-height: 190px;

  padding: 23px;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 17px;

  box-shadow: 0 8px 25px rgba(11, 22, 53, 0.045);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.msta-university-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 4px;
  height: 100%;

  background: #fa7516;

  transform: scaleY(0);

  transform-origin: top;

  transition: transform 0.35s ease;
}

.msta-university-card::after {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  right: -45px;
  bottom: -45px;

  border-radius: 50%;

  background: rgba(30, 59, 138, 0.035);

  transition:
    transform 0.4s ease,
    background 0.4s ease;
}

.msta-university-card:hover {
  transform: translateY(-6px);

  border-color: rgba(250, 117, 22, 0.18);

  box-shadow: 0 18px 35px rgba(11, 22, 53, 0.09);
}

.msta-university-card:hover::before {
  transform: scaleY(1);
}

.msta-university-card:hover::after {
  transform: scale(1.5);

  background: rgba(250, 117, 22, 0.05);
}

/* Number */

.university-number {
  position: absolute;

  top: 15px;
  right: 17px;

  color: rgba(30, 59, 138, 0.18);

  font-family: var(--font-poppins);

  font-size: 9px;

  font-weight: 700;
}

/* Icon */

.university-icon {
  width: 45px;
  height: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 17px;

  border-radius: 11px;

  background: rgba(30, 59, 138, 0.07);

  color: #1e3b8a;

  font-size: 17px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.msta-university-card:hover .university-icon {
  background: #fa7516;

  color: #ffffff;

  transform: rotate(-5deg);
}

/* Heading */

.msta-university-card h3 {
  position: relative;

  z-index: 2;

  margin: 0 0 8px;

  color: #0b1635;

  font-family: var(--font-poppins);

  font-size: 14px;

  line-height: 1.4;

  font-weight: 700;
}

/* Paragraph */

.msta-university-card p {
  position: relative;

  z-index: 2;

  margin: 0;

  color: #687287;

  font-family: var(--font-jakarta);

  font-size: 11px;

  line-height: 1.65;
}

/* Bottom */

.msta-university-bottom {
  display: flex;

  align-items: center;

  gap: 14px;

  padding: 19px 22px;

  background: linear-gradient(135deg, #0b1635, #1e3b8a);

  border-radius: 14px;

  box-shadow: 0 12px 30px rgba(11, 22, 53, 0.12);
}

.msta-university-bottom>i {
  flex-shrink: 0;

  width: 40px;
  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  background: rgba(250, 117, 22, 0.12);

  color: #fa7516;

  font-size: 16px;
}

.msta-university-bottom p {
  margin: 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 11.5px;

  line-height: 1.7;
}

.msta-closing-section {
  position: relative;

  padding: 30px 0;

  background: linear-gradient(135deg, #070f26 0%, #0b1635 50%, #172f73 100%);

  color: #ffffff;

  isolation: isolate;
}

/* Large background circle */

.msta-closing-section::before {
  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.055);

  box-shadow:
    0 0 0 80px rgba(255, 255, 255, 0.012),
    0 0 0 160px rgba(255, 255, 255, 0.008);

  pointer-events: none;
}

/* Orange center glow */

.msta-closing-section::after {
  content: "";

  position: absolute;

  width: 400px;
  height: 400px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.12),
      transparent 68%);

  filter: blur(8px);

  pointer-events: none;

  z-index: -1;
}

/* Orbit */

.msta-closing-orbit {
  position: absolute;

  border-radius: 50%;

  border: 1px dashed rgba(250, 117, 22, 0.15);

  pointer-events: none;
}

.closing-orbit-one {
  width: 420px;
  height: 420px;

  top: -180px;
  right: -120px;

  animation: closingOrbit 25s linear infinite;
}

.closing-orbit-two {
  width: 280px;
  height: 280px;

  bottom: -130px;
  left: -100px;

  border-color: rgba(255, 255, 255, 0.09);

  animation: closingOrbitReverse 18s linear infinite;
}

@keyframes closingOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes closingOrbitReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* Closing container */

.msta-closing-section>.container {
  position: relative;

  z-index: 3;
}

/* Label */

.msta-closing-label {
  display: inline-block;

  margin-bottom: 18px;

  color: #fa7516;

  font-family: var(--font-poppins);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;
}

/* Main title */

.msta-closing-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -1.5px;
}

.msta-closing-title span {
  color: #fa7516;
}

/* Subtitle */

.msta-closing-subtitle {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(10px, 3vw, 20px);
  line-height: 1.3;
  font-weight: 500;
}

/* Divider */

.msta-closing-divider {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  margin: 25px 0;
}

.msta-closing-divider span {
  width: 70px;
  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(250, 117, 22, 0.7));
}

.msta-closing-divider span:last-child {
  background: linear-gradient(90deg, rgba(250, 117, 22, 0.7), transparent);
}

.msta-closing-divider i {
  color: #fa7516;

  font-size: 13px;
}

/* Closing paragraph */

.msta-closing-text {
  margin: 0;

  color: rgba(255, 255, 255, 0.55);

  font-size: 13px;

  line-height: 1.7;
}

.msta-principle-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 17px;
  padding: 10px 25px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.msta-principle-icon {
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #fa7516;

  color: #ffffff;

  font-size: 12px;
}

.msta-principle-box strong {
  color: #ffffff;

  font-size: 13px;

  line-height: 1.4;
}

.msta-closing-btn-primary {
  padding: 12px 22px;

  background: #fa7516;

  border: 1px solid #fa7516;

  color: #ffffff;

  font-family: var(--font-jakarta);

  font-size: 12px;

  font-weight: 600;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.msta-closing-btn-primary:hover {
  background: #ff852d;

  border-color: #ff852d;

  color: #ffffff;

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(250, 117, 22, 0.25);
}

.msta-closing-btn-secondary {
  padding: 12px 22px;

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

  border: 1px solid rgba(255, 255, 255, 0.18);

  color: #ffffff;

  font-family: var(--font-jakarta);

  font-size: 12px;

  font-weight: 600;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.msta-closing-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);

  border-color: rgba(255, 255, 255, 0.35);

  color: #ffffff;

  transform: translateY(-3px);
}

@media (max-width: 991.98px) {

  .msta-audience-section,
  .msta-professional-section,
  .msta-university-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .msta-audience-visual,
  .msta-professional-visual {
    min-height: 330px;
  }

  .msta-university-card {
    min-height: 180px;
  }

  .msta-closing-section {
    padding: 80px 0;
  }
}

@media (max-width: 767.98px) {

  .msta-audience-section,
  .msta-professional-section,
  .msta-university-section {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .msta-audience-title,
  .msta-university-title {
    font-size: 27px;

    letter-spacing: -0.5px;
  }

  .msta-audience-text {
    font-size: 12.5px;

    line-height: 1.75;
  }

  .msta-audience-visual,
  .msta-professional-visual {
    min-height: 290px;
  }

  .orbit-one {
    width: 240px;
    height: 240px;
  }

  .orbit-two {
    width: 175px;
    height: 175px;
  }

  .msta-visual-center {
    width: 115px;
    height: 115px;
  }

  .msta-visual-center i {
    font-size: 23px;
  }

  .msta-visual-center strong {
    font-size: 14px;
  }

  .msta-visual-node {
    width: 42px;
    height: 42px;

    font-size: 14px;
  }

  .node-one {
    left: 7%;
    top: 35px;
  }

  .node-two {
    right: 5%;
    top: 25px;
  }

  .node-three {
    left: 5%;
    bottom: 35px;
  }

  .node-four {
    right: 7%;
    bottom: 30px;
  }

  .msta-professional-main-icon {
    width: 115px;
    height: 115px;

    font-size: 32px;
  }

  .msta-professional-badge {
    font-size: 7px;

    padding: 8px 10px;
  }

  .badge-ai {
    left: 3%;
  }

  .badge-data {
    right: 0;
  }

  .badge-auto {
    left: 4%;
  }

  .msta-professional-note {
    padding: 14px;
  }

  .msta-university-intro {
    font-size: 12.5px;
  }

  .msta-university-card {
    min-height: auto;

    padding: 20px;
  }

  .msta-university-bottom {
    align-items: flex-start;

    padding: 16px;
  }

  .msta-closing-section {
    padding: 70px 0;
  }

  .msta-closing-title {
    font-size: 32px;

    letter-spacing: -0.7px;
  }

  .msta-closing-subtitle {
    font-size: 21px;
  }

  .msta-principle-box {
    border-radius: 18px;

    padding: 14px 17px;

    text-align: left;
  }

  .msta-principle-box strong {
    font-size: 11.5px;
  }

  .msta-closing-btn-primary,
  .msta-closing-btn-secondary {
    width: 100%;

    max-width: 300px;
  }
}

@media (max-width: 575.98px) {

  .msta-audience-title,
  .msta-university-title {
    font-size: 24px;
  }

  .msta-audience-label {
    font-size: 8px;

    letter-spacing: 1.2px;
  }

  .msta-highlight-line {
    font-size: 11px;

    padding: 12px 14px;
  }

  .msta-audience-visual,
  .msta-professional-visual {
    min-height: 250px;
  }

  .msta-visual-center {
    width: 100px;
    height: 100px;
  }

  .msta-visual-node {
    width: 38px;
    height: 38px;

    border-radius: 10px;

    font-size: 12px;
  }

  .msta-professional-main-icon {
    width: 100px;
    height: 100px;

    font-size: 28px;
  }

  .msta-professional-badge {
    padding: 7px 9px;

    font-size: 6.5px;
  }

  .msta-closing-title {
    font-size: 28px;
  }

  .msta-closing-subtitle {
    font-size: 19px;
  }

  .msta-closing-text {
    font-size: 11.5px;
  }

  .msta-closing-divider span {
    width: 40px;
  }
}

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

  .msta-students-section::before,
  .msta-professional-main-icon::after,
  .msta-university-section::before,
  .msta-closing-orbit,
  .msta-orbit {
    animation: none !important;
  }

  .msta-audience-visual *,
  .msta-professional-visual *,
  .msta-university-card,
  .msta-closing-btn-primary,
  .msta-closing-btn-secondary {
    transition: none !important;
  }
}

/* ===== 8th section end ===== */

/* ======== Learning Experience Page Start ======== */

/* ===== 1st section start ===== */

.learning-experience-hero {
  position: relative;
  min-height: 250px;
  padding: 22px 0;
  overflow: hidden;

  background: #f4f7fb;

  isolation: isolate;
}

.learning-hero-overlay {
  position: absolute;
  inset: 0;

  z-index: -1;

  /* background: linear-gradient(
    90deg,
    rgba(225, 240, 255, 0.98) 0%,
    rgba(245, 250, 240, 0.94) 38%,
    rgba(240, 235, 245, 0.82) 68%,
    rgba(225, 220, 255, 0.62) 100%
  ); */
  background: radial-gradient(circle at 85% 50%, rgba(250, 117, 22, 0.14), transparent 30%), linear-gradient(135deg, #0b1635 0%, #12265f 55%, #1e3b8a 100%);
}

.learning-hero-content {
  position: relative;
  z-index: 2;

  padding-left: 12px;
}

/* Small Heading */

.learning-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 7px;
  color: #1e3b8a;
  font-size: 20px !important;
  font-weight: 700;
  letter-spacing: 1.5px;
}

/* Main Heading */

.learning-hero-title {
  max-width: 500px;

  margin: 0;

  color: #12356f;

  font-size: 31px;
  line-height: 1.18;

  font-weight: 700;

  letter-spacing: -1px;
}

/* Arrows */

.learning-hero-title b {
  color: #1e3b8a;

  font-weight: 500;

  padding: 0 2px;
}

/* Build */

.learning-hero-title span {
  color: #fa7516;
}

/* Description */

.learning-hero-description {
  max-width: 380px;

  margin: 10px 0 0;

  color: #647083;

  font-size: 11.5px;

  line-height: 1.55;
}

.learning-process {
  position: relative;

  z-index: 2;

  width: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;
}

.learning-process-item {
  position: relative;

  flex: 0 1 105px;

  width: 105px;

  min-height: 130px;

  padding: 10px 7px;

  text-align: center;

  border-radius: 15px;

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

  border: 1px solid rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 8px 20px rgba(30, 59, 138, 0.05);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.learning-process-icon {
  width: 46px !important;
  height: 46px !important;

  margin: 4px auto 8px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #ffffff;

  font-size: 16px;

  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.08);
}

/* Icon Colors */

.icon-blue {
  background: #5f8ee8;
  font-size: 40px !important;
}

.icon-green {
  background: #4db7a5;
}

.icon-orange {
  background: #fa7516;
}

.icon-purple {
  background: #9270db;
}

.icon-cyan {
  background: #25abc7;
}

.learning-process-item h3 {
  margin: 0;

  color: #1c3157;

  font-size: 12px;

  line-height: 1.25;

  font-weight: 700;
}

.learning-process-item p {
  margin: 5px 0 0;

  color: #697487;

  font-size: 8px;

  line-height: 1.45;
}

.learning-build {
  background: rgba(255, 255, 255, 0.82);

  border: 2px solid rgba(250, 117, 22, 0.55);

  box-shadow: 0 12px 28px rgba(250, 117, 22, 0.13);

  transform: translateY(-5px);
}

.learning-build .learning-process-icon {
  box-shadow: 0 8px 20px rgba(250, 117, 22, 0.25);
}

.learning-build h3 {
  color: #c75a0c;
}

.learning-process-arrow {
  flex: 0 0 20px;

  width: 20px;

  text-align: center;

  color: #607797;

  font-size: 14px;

  font-weight: 500;
}

.learning-process-item:hover {
  transform: translateY(-6px);

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

  border-color: rgba(30, 59, 138, 0.12);

  box-shadow: 0 14px 30px rgba(30, 59, 138, 0.11);
}

.learning-build:hover {
  transform: translateY(-10px);
}

@media (max-width: 1399.98px) {
  .learning-hero-title {
    font-size: 29px;
  }

  .learning-process {
    gap: 6px;
  }

  .learning-process-item {
    flex-basis: 96px;
    width: 96px;

    min-height: 125px;
  }

  .learning-process-arrow {
    flex-basis: 17px;
    width: 17px;
  }
}

@media (max-width: 1199.98px) {
  .learning-experience-hero {
    min-height: 245px;
  }

  .learning-hero-title {
    font-size: 26px;
  }

  .learning-process {
    gap: 4px;
  }

  .learning-process-item {
    flex-basis: 78px;
    width: 78px;

    min-height: 115px;

    padding: 8px 5px;

    border-radius: 13px;
  }

  .learning-process-icon {
    width: 40px;
    height: 40px;

    font-size: 14px;
  }

  .learning-process-item h3 {
    font-size: 10px;
  }

  .learning-process-item p {
    font-size: 7px;
  }

  .learning-process-arrow {
    flex-basis: 13px;
    width: 13px;

    font-size: 12px;
  }
}

@media (max-width: 991.98px) {
  .learning-experience-hero {
    min-height: auto;

    padding: 35px 0;
  }

  .learning-hero-content {
    text-align: center;

    padding-left: 0;

    margin-bottom: 10px;
  }

  .learning-eyebrow {
    justify-content: center;
  }

  .learning-hero-title {
    max-width: 650px;

    margin: 0 auto;

    font-size: 30px;
  }

  .learning-hero-description {
    max-width: 450px;

    margin: 10px auto 0;
  }

  .learning-process {
    max-width: 700px;

    margin: 0 auto;

    gap: 6px;
  }

  .learning-process-item {
    flex: 1 1 0;

    width: auto;

    min-width: 0;

    min-height: 125px;
  }

  .learning-process-arrow {
    flex: 0 0 18px;
  }
}

@media (max-width: 767.98px) {
  .learning-experience-hero {
    padding: 30px 0;
  }

  .learning-hero-overlay {
    background: linear-gradient(180deg,
        rgba(240, 245, 235, 0.96) 0%,
        rgba(235, 245, 240, 0.9) 100%);
  }

  .learning-hero-title {
    max-width: 500px;

    font-size: 25px;

    line-height: 1.25;
  }

  .learning-hero-description {
    font-size: 10px;
  }

  .learning-process {
    gap: 4px;

    align-items: stretch;
  }

  .learning-process-item {
    min-height: 110px;

    padding: 8px 4px;

    border-radius: 11px;
  }

  .learning-process-icon {
    width: 36px;
    height: 36px;

    margin-top: 3px;
    margin-bottom: 7px;

    font-size: 12px;
  }

  .learning-process-item h3 {
    font-size: 9px;
  }

  .learning-process-item p {
    font-size: 6.5px;

    line-height: 1.4;
  }

  .learning-process-arrow {
    flex: 0 0 10px;

    width: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
  }

  .learning-build {
    transform: translateY(-3px);
  }

  .learning-build:hover {
    transform: translateY(-6px);
  }
}

@media (max-width: 575.98px) {
  .learning-experience-hero {
    padding: 25px 8px;
  }

  .learning-eyebrow {
    font-size: 9px;

    letter-spacing: 1.2px;
  }

  .learning-hero-title {
    font-size: 21px;

    letter-spacing: -0.5px;
  }

  .learning-hero-description {
    max-width: 300px;

    font-size: 9px;
  }

  .learning-process {
    gap: 2px;
  }

  .learning-process-item {
    min-height: 96px;

    padding: 6px 2px;

    border-radius: 9px;
  }

  .learning-process-icon {
    width: 31px;
    height: 31px;

    margin: 2px auto 5px;

    font-size: 10px;
  }

  .learning-process-item h3 {
    font-size: 7.5px;
  }

  .learning-process-item p {
    margin-top: 3px;

    font-size: 5.5px;
  }

  .learning-process-arrow {
    flex: 0 0 7px;

    width: 7px;

    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-process-item {
    transition: none;
  }
}

/* ===== 1st section end ===== */

/* ===== 2nd section start ===== */

.msta-learning-experience {
  position: relative;
  overflow: hidden;
  padding: 25px 0 20px;
  background: linear-gradient(135deg, #faf6f0 0%, #ffffff 48%, #f3f6fc 100%);
  isolation: isolate;
}

.msta-learning-experience::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: -330px;
  right: -190px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
      rgba(30, 59, 138, 0.045) 0px,
      rgba(30, 59, 138, 0.045) 1px,
      transparent 1px,
      transparent 25px);
  opacity: 0.8;
  animation: learningRotate 35s linear infinite;
  pointer-events: none;
  z-index: -2;
}

.msta-learning-experience::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  left: -250px;
  bottom: -300px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.13) 0%,
      rgba(250, 117, 22, 0.05) 40%,
      transparent 72%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -2;
}

.learning-bg-shape {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.learning-bg-shape-one {
  width: 180px;
  height: 180px;
  left: 6%;
  top: 25%;
  border: 1px solid rgba(30, 59, 138, 0.07);
  transform: rotate(25deg);
  border-radius: 25px;
}

.learning-bg-shape-two {
  width: 75px;
  height: 75px;
  right: 12%;
  bottom: 18%;
  border-radius: 50%;
  border: 1px solid rgba(250, 117, 22, 0.15);
  box-shadow:
    0 0 0 15px rgba(250, 117, 22, 0.025),
    0 0 0 30px rgba(250, 117, 22, 0.018);
}

@keyframes learningRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.learning-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 4px;
  color: white;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 2px;
}

.learning-main-title {
  margin: 0;
  color: #0b1635;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
}

.learning-main-title span {
  color: #fa7516;
}

.learning-content-box {
  position: relative;
  padding: 25px 30px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(11, 22, 53, 0.045);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Orange vertical line */

.learning-content-line {
  position: absolute;
  top: 24px;
  left: 0;
  width: 3px;
  height: calc(100% - 48px);
  background: linear-gradient(180deg, #fa7516, rgba(250, 117, 22, 0.15));
  border-radius: 0 5px 5px 0;
}

/* Text */

.learning-text {
  margin: 0 0 13px;
  color: #0b1635;
  font-size: 13px;
  line-height: 1.85;
}

.learning-text:last-child {
  margin-bottom: 0;
}

.learning-journey-wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 10px;
}

/* Connecting line */

.learning-journey-line {
  position: absolute;
  top: 25px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, #dce4f2, #fa7516 50%, #dce4f2);
  z-index: 0;
}

.learning-step {
  position: relative;
  z-index: 2;
  width: 18%;
  text-align: center;
}

/* Number */
.learning-step-top {
  height: 18px;
  margin-bottom: 7px;
}

.learning-step-top span {
  color: #a3adbd;
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Circle */
.learning-step-dot {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #dfe6f1;
  color: #1e3b8a;
  font-size: 17px;
  box-shadow: 0 8px 25px rgba(30, 59, 138, 0.07);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.learning-step h3 {
  margin: 12px 0 4px;
  color: #162544;
  font-size: 13px;
  font-weight: 700;
}

/* Step Description */

.learning-step p {
  margin: 0;
  color: #8a93a3;
  font-size: 9px;
  line-height: 1.5;
}

.learning-step-active .learning-step-top span {
  color: #fa7516;
}

.learning-step-active .learning-step-dot {
  background: #fa7516;
  border-color: #fa7516;
  color: #ffffff;
  box-shadow:
    0 10px 25px rgba(250, 117, 22, 0.22),
    0 0 0 7px rgba(250, 117, 22, 0.07);
}

.learning-step-active h3 {
  color: #fa7516;
}

.learning-step:hover .learning-step-dot {
  transform: translateY(-5px);
  background: #1e3b8a;
  border-color: #1e3b8a;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(30, 59, 138, 0.18);
}

.learning-step:hover h3 {
  color: #1e3b8a;
}

@media (max-width: 991.98px) {
  .msta-learning-experience {
    padding: 70px 0;
  }

  .learning-main-title {
    font-size: 38px;
  }

  .learning-content-box {
    padding: 22px 25px;
  }

  .learning-text {
    font-size: 12px;
  }

  .learning-step-dot {
    width: 46px;
    height: 46px;

    font-size: 15px;
  }

  .learning-step h3 {
    font-size: 12px;
  }
}

@media (max-width: 767.98px) {
  .msta-learning-experience {
    padding: 55px 0;
  }

  .learning-main-title {
    font-size: 30px;

    letter-spacing: -0.8px;
  }

  .learning-lead {
    font-size: 13px;
  }

  .learning-content-box {
    padding: 20px;
  }

  .learning-text {
    font-size: 11.5px;

    line-height: 1.75;
  }

  .learning-journey-wrapper {
    padding: 0;
  }

  .learning-journey-line {
    left: 6%;
    right: 6%;
  }

  .learning-step-dot {
    width: 42px;
    height: 42px;

    font-size: 13px;
  }

  .learning-step h3 {
    font-size: 11px;

    margin-top: 10px;
  }

  .learning-step p {
    font-size: 8px;
  }
}

@media (max-width: 575.98px) {
  .msta-learning-experience {
    padding: 45px 0;
  }

  .learning-label {
    font-size: 8px;

    letter-spacing: 1.5px;
  }

  .learning-label span {
    width: 18px;
  }

  .learning-main-title {
    font-size: 27px;
  }

  .learning-lead {
    font-size: 12px;
  }

  .learning-content-box {
    padding: 18px 17px 18px 20px;
  }

  .learning-text {
    font-size: 11px;
  }

  .learning-journey-wrapper {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 5px;
  }

  .learning-journey-line {
    top: 21px;

    left: 10%;
    right: 10%;
  }

  .learning-step {
    width: 100%;
  }

  .learning-step-dot {
    width: 38px;
    height: 38px;

    font-size: 11px;
  }

  .learning-step-top span {
    font-size: 7px;
  }

  .learning-step h3 {
    font-size: 9px;
  }

  .learning-step p {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msta-learning-experience::before {
    animation: none;
  }

  .learning-step-dot {
    transition: none;
  }
}

/* ===== 2nd section End ===== */

/* ===== 3rd section start ===== */

.msta-capability-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}

/* Section ke andar ke background elements */
.msta-capability-section .capability-bg {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Main content ko section ke upar rakho */
.msta-capability-section>.container {
  position: relative;
  z-index: 2;
}

.msta-capability-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #faf6f0 0%, #ffffff 52%, #f2f5fb 100%);
  isolation: isolate;
}

.msta-capability-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -300px;
  right: -180px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
      rgba(30, 59, 138, 0.045) 0,
      rgba(30, 59, 138, 0.045) 1px,
      transparent 1px,
      transparent 22px);
  opacity: 0.8;
  pointer-events: none;
  animation: capabilityRotate 30s linear infinite;
}

.msta-capability-section::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  left: -240px;
  bottom: -270px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.14) 0%,
      rgba(250, 117, 22, 0.05) 42%,
      transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}

/* Extra shapes */

.capability-bg {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.capability-bg-one {
  width: 90px;
  height: 90px;
  left: 8%;
  top: 20%;
  border: 1px solid rgba(30, 59, 138, 0.09);
  transform: rotate(45deg);
}

.capability-bg-two {
  width: 55px;
  height: 55px;
  right: 8%;
  bottom: 22%;
  border-radius: 50%;
  border: 1px solid rgba(250, 117, 22, 0.16);
  box-shadow:
    0 0 0 12px rgba(250, 117, 22, 0.025),
    0 0 0 24px rgba(250, 117, 22, 0.015);
}

@keyframes capabilityRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.capability-title {
  margin: 0;
  color: #0b1635;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.18;
  font-weight: 700;
}

.capability-title span {
  color: #1e3b8a;
}

.capability-title-line span {
  width: 55px;
  height: 3px;
  border-radius: 5px;
  background: linear-gradient(90deg, #fa7516, #1e3b8a);
}

.capability-content {
  position: relative;
  padding: 28px 35px 28px 38px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(11, 22, 53, 0.055);
  backdrop-filter: blur(8px);
}

/* Number */

.capability-content-number {
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(30, 59, 138, 0.13);
  font-family: var(--font-poppins);
  font-size: 32px;
  font-weight: 700;
}

/* Orange left line */

.capability-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 3px;
  height: calc(100% - 50px);
  border-radius: 0 5px 5px 0;
  background: linear-gradient(180deg, #fa7516, rgba(250, 117, 22, 0.15));
}

/* Text */

.capability-text {
  position: relative;
  margin: 0 0 17px;
  color: #0b1736;
  font-size: 13px;
  line-height: 1.85;
}

.capability-text:last-child {
  margin-bottom: 0;
}

.capability-text strong {
  color: #1e3b8a;
  font-weight: 600;
}

.capability-visual {
  position: relative;
  padding: 25px 20px;
  min-height: 300px;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #f3f6fc);
  border: 1px solid rgba(30, 59, 138, 0.08);
  box-shadow: 0 15px 40px rgba(11, 22, 53, 0.06);
  overflow: hidden;
}

/* Visual background */

.capability-visual::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -110px;
  right: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 59, 138, 0.09), transparent 70%);
}

.capability-visual::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  bottom: -90px;
  left: -70px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.12),
      transparent 70%);
}

/* Visual heading */

.capability-visual-title {
  position: relative;
  z-index: 2;
  margin-bottom: 25px;
  color: #1e3b8a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-align: center;
}

.capability-journey {
  position: relative;
  z-index: 2;
}

/* Journey Item */

.capability-journey-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 40px;
  padding: 5px 10px;
  border-radius: 10px;
  transition: 0.3s ease;
}

/* Number */

.capability-journey-item span {
  width: 20px;
  color: #a3adbd;
  font-family: var(--font-poppins);
  font-size: 8px;
  font-weight: 700;
}

/* Icon */

.capability-journey-item i {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eef2f9;
  color: #1e3b8a;
  font-size: 12px;
  transition: 0.3s ease;
}

/* Text */

.capability-journey-item strong {
  color: #36445d;
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 600;
}

/* Vertical line */

.capability-journey-line {
  width: 1px;
  height: 13px;
  margin-left: 35px;
  background: linear-gradient(180deg, #d9e0ec, #fa7516);
}

/* Active */

.capability-journey-item.active {
  background: rgba(250, 117, 22, 0.06);

  border: 1px solid rgba(250, 117, 22, 0.15);
}

.capability-journey-item.active i {
  background: #fa7516;

  color: #ffffff;

  box-shadow: 0 5px 15px rgba(250, 117, 22, 0.18);
}

.capability-journey-item.active strong {
  color: #fa7516;
}

.capability-journey-item.active span {
  color: #fa7516;
}

/* Hover */

.capability-journey-item:hover {
  transform: translateX(5px);

  background: rgba(30, 59, 138, 0.035);
}

.capability-journey-item:hover i {
  background: #1e3b8a;

  color: #ffffff;
}

.capability-statement {
  position: relative;

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 22px 25px;

  border-radius: 16px;

  background: linear-gradient(135deg, #0b1635, #1e3b8a);

  box-shadow: 0 18px 40px rgba(11, 22, 53, 0.14);

  overflow: hidden;
}

/* Statement background */

.capability-statement::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  right: -80px;
  top: -110px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 0 0 25px rgba(255, 255, 255, 0.015),
    0 0 0 50px rgba(255, 255, 255, 0.01);
}

/* Quote icon */

.capability-quote-icon {
  position: relative;

  flex-shrink: 0;

  width: 45px;
  height: 45px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: rgba(250, 117, 22, 0.13);

  color: #fa7516;

  font-size: 17px;
}

/* Statement text */

.capability-statement p {
  position: relative;

  margin: 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 12px;

  line-height: 1.5;
}

.capability-statement strong {
  position: relative;

  color: #ffffff;

  font-size: 15px;

  line-height: 1.5;
}

/* Arrow */

.capability-arrow {
  position: relative;

  margin-left: auto;

  flex-shrink: 0;

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fa7516;

  color: #ffffff;

  font-size: 12px;
}

@media (max-width: 991.98px) {
  .msta-capability-section {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
  }

  .capability-title {
    font-size: 36px;
  }

  .capability-content {
    padding: 25px 30px;
  }

  .capability-visual {
    min-height: auto;
  }
}

@media (max-width: 767.98px) {
  .msta-capability-section {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .capability-title {
    font-size: 29px;

    letter-spacing: -0.5px;
  }

  .capability-label {
    font-size: 8px;
  }

  .capability-lead {
    font-size: 12px;
  }

  .capability-content {
    padding: 22px 22px 22px 28px;
  }

  .capability-text {
    font-size: 11.5px;

    line-height: 1.75;
  }

  .capability-statement {
    padding: 18px;

    gap: 12px;
  }

  .capability-statement strong {
    font-size: 13px;
  }

  .capability-arrow {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 575.98px) {
  .capability-title {
    font-size: 26px;
  }

  .capability-content {
    padding: 20px 18px 20px 24px;
  }

  .capability-text {
    font-size: 11px;
  }

  .capability-visual {
    padding: 22px 15px;
  }

  .capability-statement {
    align-items: flex-start;
  }

  .capability-quote-icon {
    width: 38px;
    height: 38px;

    font-size: 14px;
  }

  .capability-statement p {
    font-size: 10px;
  }

  .capability-statement strong {
    font-size: 12px;
  }

  .capability-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msta-capability-section::before {
    animation: none;
  }

  .capability-journey-item,
  .capability-journey-item i {
    transition: none;
  }
}

/* ===== 3rd section end ===== */

/* ===== 4th section start ===== */

.msta-doing-journey {
  position: relative;
  overflow: hidden;

  background: linear-gradient(135deg, #faf6f0 0%, #ffffff 50%, #f3f6fc 100%);

  isolation: isolate;
}

.msta-doing-journey::before {
  content: "";

  position: absolute;

  width: 650px;
  height: 650px;

  top: -360px;
  right: -220px;

  border-radius: 50%;

  background: repeating-radial-gradient(circle,
      rgba(30, 59, 138, 0.045) 0,
      rgba(30, 59, 138, 0.045) 1px,
      transparent 1px,
      transparent 26px);

  opacity: 0.75;

  pointer-events: none;

  animation: doingRotate 35s linear infinite;

  z-index: -2;
}

.msta-doing-journey::after {
  content: "";

  position: absolute;

  width: 480px;
  height: 480px;

  left: -260px;
  bottom: -280px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.14) 0%,
      rgba(250, 117, 22, 0.05) 45%,
      transparent 72%);

  filter: blur(8px);

  pointer-events: none;

  z-index: -2;
}

@keyframes doingRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.doing-bg {
  position: absolute;

  pointer-events: none;

  z-index: -1;
}

.doing-bg-one {
  width: 130px;
  height: 130px;

  left: 5%;
  top: 18%;

  border: 1px solid rgba(30, 59, 138, 0.07);

  transform: rotate(45deg);

  border-radius: 22px;
}

.doing-bg-two {
  width: 70px;
  height: 70px;

  right: 7%;
  bottom: 15%;

  border-radius: 50%;

  border: 1px solid rgba(250, 117, 22, 0.14);

  box-shadow:
    0 0 0 15px rgba(250, 117, 22, 0.025),
    0 0 0 30px rgba(250, 117, 22, 0.015);
}

.doing-main-title {
  margin: 0;

  color: #0b1635;

  font-size: clamp(30px, 3.5vw, 45px);

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -1px;
}

.doing-main-title span {
  color: #1e3b8a;
}

.doing-intro {
  max-width: 680px;
  margin: 14px auto 0;
  color: var(--navy-dark);
  font-size: 13px;
  line-height: 1.8;
}

.doing-tabs-wrapper {
  position: relative;

  height: 100%;

  padding: 25px;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 20px;

  box-shadow: 0 15px 40px rgba(11, 22, 53, 0.055);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
}

/* Small heading */

.doing-tabs-label {
  margin-bottom: 18px;

  color: #9aa3b2;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 1.8px;
}

.doing-tabs {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.doing-tabs .nav-link {
  position: relative;

  width: 100%;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 13px 12px;

  text-align: left;

  border-radius: 12px;

  background: transparent;

  color: #687287;

  border: 1px solid transparent;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

/* Number */

.doing-tab-number {
  width: 22px;

  color: #aeb6c4;

  font-family: var(--font-poppins);

  font-size: 8px;

  font-weight: 700;
}

/* Icon */

.doing-tab-icon {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #f0f3f9;

  color: #1e3b8a;

  font-size: 14px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

/* Tab text */

.doing-tab-content {
  display: flex;

  flex-direction: column;

  gap: 2px;

  min-width: 0;
}

.doing-tab-content strong {
  color: #26334e;

  font-size: 12px;

  font-weight: 700;
}

.doing-tab-content small {
  color: #929baa;

  font-size: 8px;

  white-space: nowrap;
}

/* Arrow */

.doing-tab-arrow {
  margin-left: auto;

  color: #c0c7d2;

  font-size: 10px;

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.doing-tabs .nav-link.active {
  background: linear-gradient(135deg, #eef2fa, #ffffff);

  border-color: rgba(30, 59, 138, 0.1);

  box-shadow: 0 8px 22px rgba(30, 59, 138, 0.06);
}

.doing-tabs .nav-link.active .doing-tab-number {
  color: #fa7516;
}

.doing-tabs .nav-link.active .doing-tab-icon {
  background: #1e3b8a;

  color: #ffffff;

  box-shadow: 0 6px 16px rgba(30, 59, 138, 0.16);
}

.doing-tabs .nav-link.active .doing-tab-content strong {
  color: #1e3b8a;
}

.doing-tabs .nav-link.active .doing-tab-arrow {
  color: #fa7516;

  transform: translateX(4px);
}

/* Hover */

.doing-tabs .nav-link:hover {
  background: rgba(30, 59, 138, 0.035);

  transform: translateX(3px);
}

.doing-tab-content-area {
  height: 100%;
}

.doing-tab-content-area .tab-pane {
  height: 100%;
}

/* Detail Card */

.doing-detail-card {
  position: relative;

  height: 100%;

  min-height: 440px;

  padding: 35px 40px;

  background: linear-gradient(145deg, #ffffff, #f8faff);

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 20px;

  box-shadow: 0 18px 45px rgba(11, 22, 53, 0.07);

  overflow: hidden;
}

/* Decorative circle */

.doing-detail-card::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -120px;
  top: -120px;

  border-radius: 50%;

  border: 1px solid rgba(30, 59, 138, 0.07);

  box-shadow:
    0 0 0 25px rgba(30, 59, 138, 0.015),
    0 0 0 50px rgba(30, 59, 138, 0.01);

  pointer-events: none;
}

/* Orange bottom shape */

.doing-detail-card::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  bottom: -90px;
  left: -70px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(250, 117, 22, 0.1), transparent 70%);

  pointer-events: none;
}

.doing-detail-top {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;
}

/* Number */

.doing-detail-number {
  display: block;

  margin-bottom: 8px;

  color: #fa7516;

  font-family: var(--font-poppins);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

/* Title */

.doing-detail-title {
  max-width: 550px;

  margin: 0;

  color: #0b1635;

  font-size: clamp(25px, 2.5vw, 34px);

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -0.7px;
}

/* Big icon */

.doing-detail-icon {
  flex-shrink: 0;

  width: 58px;
  height: 58px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 15px;

  background: rgba(250, 117, 22, 0.08);

  color: #fa7516;

  border: 1px solid rgba(250, 117, 22, 0.13);

  font-size: 21px;

  box-shadow: 0 8px 20px rgba(250, 117, 22, 0.06);
}

.doing-detail-line {
  position: relative;

  z-index: 2;

  width: 65px;
  height: 3px;

  margin: 22px 0;

  border-radius: 5px;

  background: linear-gradient(90deg, #fa7516, #1e3b8a);
}

.doing-detail-text {
  position: relative;

  z-index: 2;

  max-width: 720px;

  margin: 0;

  color: #687287;

  font-size: 13px;

  line-height: 1.9;
}

.doing-highlight {
  position: absolute;

  z-index: 3;

  left: 40px;
  right: 40px;
  bottom: 32px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px 17px;

  border-left: 3px solid #fa7516;

  background: rgba(250, 117, 22, 0.055);

  border-radius: 0 10px 10px 0;
}

.doing-highlight>span {
  width: 34px;
  height: 34px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #ffffff;

  color: #fa7516;

  font-size: 12px;

  box-shadow: 0 5px 15px rgba(11, 22, 53, 0.06);
}

.doing-highlight strong {
  color: #33405a;

  font-size: 11px;

  line-height: 1.55;
}

.doing-tab-content-area .tab-pane {
  animation: doingTabIn 0.35s ease;
}

@keyframes doingTabIn {
  from {
    opacity: 0;

    transform: translateY(8px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@media (max-width: 991.98px) {
  .msta-doing-journey {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
  }

  .doing-main-title {
    font-size: 36px;
  }

  .doing-tabs-wrapper {
    padding: 20px;
  }

  .doing-detail-card {
    min-height: 430px;

    padding: 30px;
  }

  .doing-detail-title {
    font-size: 27px;
  }

  .doing-detail-text {
    font-size: 12px;
  }

  .doing-highlight {
    left: 30px;
    right: 30px;
    bottom: 25px;
  }
}

@media (max-width: 767.98px) {
  .msta-doing-journey {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .doing-main-title {
    font-size: 29px;

    letter-spacing: -0.5px;
  }

  .doing-intro {
    font-size: 12px;
  }

  /* Horizontal tabs */

  .doing-tabs-wrapper {
    padding: 15px;

    overflow: hidden;
  }

  .doing-tabs-label {
    margin-bottom: 12px;
  }

  .doing-tabs {
    flex-direction: row;

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 5px;

    scrollbar-width: thin;
  }

  .doing-tabs .nav-link {
    flex: 0 0 auto;

    width: auto;

    min-width: 115px;

    padding: 10px;

    gap: 7px;
  }

  .doing-tab-number {
    display: none;
  }

  .doing-tab-icon {
    width: 32px;
    height: 32px;

    font-size: 11px;
  }

  .doing-tab-content strong {
    font-size: 10px;
  }

  .doing-tab-content small {
    display: none;
  }

  .doing-tab-arrow {
    display: none;
  }

  .doing-detail-card {
    min-height: 440px;

    padding: 25px 22px;
  }

  .doing-detail-title {
    font-size: 24px;
  }

  .doing-detail-icon {
    width: 48px;
    height: 48px;

    border-radius: 12px;

    font-size: 17px;
  }

  .doing-detail-text {
    font-size: 11.5px;

    line-height: 1.8;
  }

  .doing-highlight {
    left: 22px;
    right: 22px;

    padding: 12px;
  }

  .doing-highlight strong {
    font-size: 10px;
  }
}

@media (max-width: 575.98px) {
  .doing-main-title {
    font-size: 26px;
  }

  .doing-eyebrow {
    font-size: 8px;
  }

  .doing-detail-card {
    min-height: 455px;

    padding: 22px 18px;
  }

  .doing-detail-top {
    gap: 10px;
  }

  .doing-detail-title {
    font-size: 21px;
  }

  .doing-detail-number {
    font-size: 8px;
  }

  .doing-detail-icon {
    width: 43px;
    height: 43px;

    font-size: 15px;
  }

  .doing-detail-text {
    font-size: 11px;
  }

  .doing-highlight {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .doing-highlight>span {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msta-doing-journey::before {
    animation: none;
  }

  .doing-tab-content-area .tab-pane {
    animation: none;
  }

  .doing-tabs .nav-link,
  .doing-tab-icon,
  .doing-tab-arrow,
  .doing-journey-item {
    transition: none;
  }
}

/* ===== 4th section end ===== */

/* ===== 5th section start ===== */

.msta-learning-accordion {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #faf6f0 0%, #ffffff 52%, #f3f6fc 100%);
  isolation: isolate;
}

.msta-learning-accordion::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: -350px;
  right: -220px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
      rgba(30, 59, 138, 0.045) 0,
      rgba(30, 59, 138, 0.045) 1px,
      transparent 1px,
      transparent 25px);

  opacity: 0.75;

  pointer-events: none;

  animation: learningBgRotate 35s linear infinite;

  z-index: -2;
}

.msta-learning-accordion::after {
  content: "";

  position: absolute;

  width: 450px;
  height: 450px;

  bottom: -270px;
  left: -230px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.14),
      transparent 70%);

  filter: blur(8px);

  pointer-events: none;

  z-index: -2;
}

@keyframes learningBgRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.learning-bg-circle {
  position: absolute;

  width: 90px;
  height: 90px;

  left: 7%;
  top: 18%;

  border-radius: 50%;

  border: 1px solid rgba(30, 59, 138, 0.08);

  box-shadow:
    0 0 0 14px rgba(30, 59, 138, 0.018),
    0 0 0 28px rgba(30, 59, 138, 0.012);

  pointer-events: none;
}

.learning-bg-square {
  position: absolute;

  width: 100px;
  height: 100px;

  right: 5%;
  bottom: 12%;

  border: 1px solid rgba(250, 117, 22, 0.08);

  transform: rotate(45deg);

  border-radius: 18px;

  pointer-events: none;
}

.learning-eyebrow {
  display: inline-block;

  margin-bottom: 11px;

  color: #fa7516;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;
}

.learning-main-title {
  margin: 0;

  color: #0b1635;

  font-size: clamp(30px, 3.5vw, 44px);

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -1px;
}

.learning-main-title span {
  color: #1e3b8a;
}

.learning-main-text {
  max-width: 720px;

  margin: 15px auto 0;

  color: #687287;

  font-size: 13px;

  line-height: 1.8;
}

.learning-side-card {
  position: relative;

  padding: 32px 30px;

  min-height: 400px;

  background: linear-gradient(145deg, #0b1635, #1e3b8a);

  border-radius: 20px;

  box-shadow: 0 18px 45px rgba(11, 22, 53, 0.13);

  overflow: hidden;
}

/* Circle */

.learning-side-card::before {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  right: -150px;
  top: -140px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 0 0 30px rgba(255, 255, 255, 0.012),
    0 0 0 60px rgba(255, 255, 255, 0.008);
}

/* Orange glow */

.learning-side-card::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  left: -100px;
  bottom: -100px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.25),
      transparent 70%);

  filter: blur(5px);
}

/* Number */

.learning-side-number {
  position: relative;

  z-index: 2;

  color: rgba(255, 255, 255, 0.35);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.8px;
}

/* Icon */

.learning-side-icon {
  position: relative;

  z-index: 2;

  width: 58px;
  height: 58px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-top: 35px;
  margin-bottom: 22px;

  border-radius: 15px;

  background: rgba(250, 117, 22, 0.13);

  color: #fa7516;

  border: 1px solid rgba(250, 117, 22, 0.15);

  font-size: 22px;
}

/* Heading */

.learning-side-card h3 {
  position: relative;

  z-index: 2;

  max-width: 280px;

  margin: 0 0 16px;

  color: #ffffff;

  font-size: 27px;

  line-height: 1.2;

  font-weight: 700;
}

.learning-side-card h3 span {
  color: #fa7516;
}

/* Text */

.learning-side-card p {
  position: relative;

  z-index: 2;

  max-width: 310px;

  margin: 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: 12px;

  line-height: 1.8;
}

.learning-mini-flow {
  position: absolute;

  z-index: 3;

  left: 30px;
  right: 30px;
  bottom: 28px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 11px 12px;

  border-radius: 10px;

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

  border: 1px solid rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(8px);
}

.learning-mini-flow span {
  color: rgba(255, 255, 255, 0.78);

  font-family: var(--font-poppins);

  font-size: 9px;

  font-weight: 600;
}

.learning-mini-flow i {
  color: #fa7516;

  font-size: 8px;
}

.msta-learning-accordion-list {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

/* Accordion Item */

.learning-accordion-item {
  overflow: hidden;

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

  border: 1px solid rgba(30, 59, 138, 0.08) !important;

  border-radius: 15px !important;

  box-shadow: 0 8px 25px rgba(11, 22, 53, 0.04);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.learning-accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(250, 117, 22, 0.2) !important;

  box-shadow: 0 12px 32px rgba(11, 22, 53, 0.07);
}

.learning-accordion-item .accordion-button {
  position: relative;

  display: flex;

  align-items: center;

  gap: 12px;

  min-height: 72px;

  padding: 13px 18px;

  background: transparent;

  color: #0b1635;

  box-shadow: none !important;

  font-size: 12px;

  font-weight: 600;
}

/* Remove Bootstrap arrow */

.learning-accordion-item .accordion-button::after {
  width: 15px !important;
  height: 15px !important;
  margin-left: auto;
  background-size: 12px;
  transition: transform 0.3s ease;
}

.learning-accordion-number {
  width: 25px;
  flex-shrink: 0;
  color: #aab2c0;
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 700;
}

.accordion-button:not(.collapsed) .learning-accordion-number {
  color: #fa7516;
}

.learning-accordion-icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  background: #f0f3f9;

  color: #1e3b8a;

  font-size: 15px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.accordion-button:not(.collapsed) .learning-accordion-icon {
  background: #fa7516;

  color: #ffffff;

  transform: rotate(-4deg);

  box-shadow: 0 7px 18px rgba(250, 117, 22, 0.18);
}

.learning-accordion-heading {
  display: flex;

  flex-direction: column;

  gap: 3px;

  min-width: 0;
}

.learning-accordion-heading strong {
  color: #26334e;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 0.3px;
}

.learning-accordion-heading small {
  color: #9099a9;

  font-family: var(--font-jakarta);

  font-size: 13px !important;

  font-weight: 400;
}

.accordion-button:not(.collapsed) .learning-accordion-heading strong {
  color: #1e3b8a;
}

.learning-accordion-item .accordion-body {
  position: relative;
  padding: 5px 25px 25px 95px;
  background: transparent;
}

.learning-content-title {
  margin: 5px 0 15px;
  color: #0b1635;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.learning-content-text {
  margin: 0 0 13px;
  color: #687287;

  font-size: 12px;

  line-height: 1.85;
}

.learning-highlight {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 18px;

  padding: 12px 14px;

  border-left: 3px solid #1e3b8a;

  background: rgba(30, 59, 138, 0.045);

  border-radius: 0 9px 9px 0;
}

.learning-highlight i {
  width: 30px;
  height: 30px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: #ffffff;

  color: #fa7516;

  font-size: 11px;

  box-shadow: 0 5px 12px rgba(11, 22, 53, 0.05);
}

.learning-highlight strong {
  color: #33405a;

  font-size: 10.5px;

  line-height: 1.5;
}

/* Orange highlight */

.learning-highlight-orange {
  border-left-color: #fa7516;

  background: rgba(250, 117, 22, 0.05);
}

.learning-process {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 20px;

  padding: 12px;

  border-radius: 10px;

  background: #f5f7fb;

  border: 1px solid rgba(30, 59, 138, 0.06);
}

.learning-process span {
  padding: 6px 9px;

  border-radius: 6px;

  background: #ffffff;

  color: #42506a;

  font-family: var(--font-poppins);

  font-size: 8px;

  font-weight: 600;

  box-shadow: 0 3px 8px rgba(11, 22, 53, 0.04);
}

.learning-process i {
  color: #fa7516;

  font-size: 7px;
}

.learning-note {
  display: flex;

  align-items: flex-start;

  gap: 9px;

  margin-top: 15px;

  padding: 11px 13px;

  border-radius: 9px;

  background: rgba(30, 59, 138, 0.035);
}

.learning-note i {
  margin-top: 3px;

  color: #1e3b8a;

  font-size: 11px;
}

.learning-note p {
  margin: 0;

  color: #7b8494;

  font-size: 9.5px;

  line-height: 1.6;
}

.learning-project-btn {
  display: inline-flex;

  align-items: center;

  margin-top: 18px;

  padding: 10px 18px;

  background: #fa7516;

  border: 1px solid #fa7516;

  color: #ffffff;

  font-size: 10px;

  font-weight: 600;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.learning-project-btn:hover {
  background: #ff852d;

  border-color: #ff852d;

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(250, 117, 22, 0.2);
}

@media (max-width: 991.98px) {
  .msta-learning-accordion {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
  }

  .learning-main-title {
    font-size: 36px;
  }

  .learning-side-card {
    min-height: 350px;
  }

  .learning-side-icon {
    margin-top: 25px;
  }
}

@media (max-width: 767.98px) {
  .msta-learning-accordion {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .learning-main-title {
    font-size: 29px;

    letter-spacing: -0.5px;
  }

  .learning-main-text {
    font-size: 12px;
  }

  .learning-side-card {
    min-height: 320px;

    padding: 25px;
  }

  .learning-side-card h3 {
    font-size: 24px;
  }

  .learning-side-card p {
    font-size: 11px;
  }

  .learning-mini-flow {
    left: 25px;
    right: 25px;
  }

  .learning-accordion-item .accordion-body {
    padding: 5px 20px 22px 20px;
  }

  .learning-content-title {
    font-size: 21px;
  }

  .learning-content-text {
    font-size: 11px;

    line-height: 1.8;
  }
}

@media (max-width: 575.98px) {
  .learning-main-title {
    font-size: 26px;
  }

  .learning-eyebrow {
    font-size: 8px;
  }

  .learning-side-card {
    min-height: 300px;

    padding: 22px;
  }

  .learning-side-card h3 {
    font-size: 22px;
  }

  .learning-mini-flow {
    left: 22px;
    right: 22px;

    gap: 5px;
  }

  .learning-mini-flow span {
    font-size: 7px;
  }

  .learning-accordion-item .accordion-button {
    min-height: 65px;

    padding: 10px 12px;

    gap: 8px;
  }

  .learning-accordion-number {
    width: 18px;

    font-size: 8px;
  }

  .learning-accordion-icon {
    width: 36px;
    height: 36px;

    border-radius: 9px;

    font-size: 12px;
  }

  .learning-accordion-heading strong {
    font-size: 9px;
  }

  .learning-accordion-heading small {
    font-size: 7.5px;
  }

  .learning-content-title {
    font-size: 19px;
  }

  .learning-content-text {
    font-size: 10.5px;
  }

  .learning-process {
    gap: 5px;
  }

  .learning-process span {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msta-learning-accordion::before {
    animation: none;
  }

  .learning-accordion-icon,
  .learning-project-btn {
    transition: none;
  }
}

/* ===== 5th section end ===== */

/* ===== 6th section start ===== */

.msta-tech-exposure {
  position: relative;
  overflow: hidden;

  background: linear-gradient(135deg, #faf6f0 0%, #ffffff 50%, #f3f6ff 100%);
}

.msta-tech-exposure::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: -220px;
  right: -150px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(30, 59, 138, 0.12), transparent 68%);

  pointer-events: none;
}

.msta-tech-title {
  margin: 0;

  color: #0b1635;

  font-size: 42px;
  line-height: 1.1;

  font-weight: 700;
}

.msta-tech-title span {
  color: #fa7516;
}

.msta-tech-subtitle {
  margin: 12px 0;

  color: #1e3b8a;

  font-size: 21px;

  font-weight: 600;
}

.msta-tech-intro {
  max-width: 700px;

  margin: 0;

  color: #697487;

  font-size: 14px;

  line-height: 1.8;
}

/* Statement */

.msta-tech-statement {
  position: relative;

  padding: 25px;

  border-radius: 22px;

  background: #0b1635;

  overflow: hidden;

  box-shadow: 0 18px 45px rgba(11, 22, 53, 0.13);
}

.msta-tech-statement::after {
  content: "";

  position: absolute;

  width: 160px;
  height: 160px;

  right: -70px;
  bottom: -70px;

  border-radius: 50%;

  background: rgba(250, 117, 22, 0.16);
}

.msta-tech-statement-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;

  border-radius: 14px;

  background: rgba(250, 117, 22, 0.12);

  color: #fa7516;

  font-size: 19px;
}

.msta-tech-statement p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: rgba(255, 255, 255, 0.76);

  font-size: 13px;
  line-height: 1.75;
}

/* Technology Cards */

.msta-tech-card {
  position: relative;

  height: 100%;

  padding: 25px 22px;

  overflow: hidden;

  border-radius: 18px;

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

  border: 1px solid rgba(30, 59, 138, 0.09);

  box-shadow: 0 8px 25px rgba(11, 22, 53, 0.05);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.msta-tech-card:hover {
  transform: translateY(-6px);

  border-color: rgba(250, 117, 22, 0.3);

  box-shadow: 0 18px 38px rgba(11, 22, 53, 0.1);
}

.msta-tech-card>span {
  position: absolute;

  top: 15px;
  right: 18px;

  color: rgba(30, 59, 138, 0.2);

  font-family: var(--font-poppins);

  font-size: 11px;
  font-weight: 700;
}

.msta-tech-card>i {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  border-radius: 13px;

  background: rgba(30, 59, 138, 0.07);

  color: #1e3b8a;

  font-size: 19px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.msta-tech-card:hover>i {
  background: #fa7516;
  color: #fff;

  transform: rotate(-5deg);
}

.msta-tech-card h3 {
  margin-bottom: 9px;

  color: #0b1635;

  font-size: 17px;
  line-height: 1.4;

  font-weight: 700;
}

.msta-tech-card p {
  margin: 0;

  color: #687287;

  font-size: 12px;
  line-height: 1.7;
}

.msta-progression-section {
  position: relative;

  background: #ffffff;

  overflow: hidden;
}

.msta-progression-title {
  margin: 0;
  color: #0b1635;
  font-size: 38px;
  line-height: 1.2;
}

.msta-progression-title span {
  color: #1e3b8a;
}

.msta-progression-flow {
  margin: 13px 0 0;

  color: #fa7516;

  font-size: 14px;
  font-weight: 600;
}

.msta-progression-flow i {
  margin: 0 10px;

  font-size: 11px;
}

/* Cards */

.msta-progression-card {
  position: relative;

  height: 100%;

  padding: 27px;

  border-radius: 20px;

  background: #faf6f0;

  border: 1px solid rgba(30, 59, 138, 0.08);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.msta-progression-card:hover {
  transform: translateY(-7px);

  box-shadow: 0 18px 40px rgba(11, 22, 53, 0.09);
}

.progression-active {
  background: #0b1635;

  border-color: #0b1635;
}

.msta-progression-top {
  display: flex;

  align-items: center;
  justify-content: space-between;
}

.msta-progression-top>span {
  color: rgba(30, 59, 138, 0.28);

  font-family: var(--font-poppins);

  font-size: 12px;
  font-weight: 700;
}

.progression-active .msta-progression-top>span {
  color: rgba(255, 255, 255, 0.25);
}

.msta-progression-icon {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: rgba(30, 59, 138, 0.08);

  color: #1e3b8a;

  font-size: 19px;
}

.progression-active .msta-progression-icon {
  background: rgba(250, 117, 22, 0.13);
  color: #fa7516;
}

.msta-duration {
  display: inline-block;

  margin-top: 22px;
  margin-bottom: 7px;

  padding: 5px 10px;

  border-radius: 50px;

  background: rgba(250, 117, 22, 0.1);

  color: #fa7516;

  font-family: var(--font-jakarta);

  font-size: 10px;
  font-weight: 700;
}

.msta-progression-card h3 {
  margin: 0 0 10px;

  color: #0b1635;

  font-size: 25px;
}

.progression-active h3 {
  color: #fff;
}

.msta-progression-card p {
  margin: 0;

  color: #697487;

  font-size: 12.5px;

  line-height: 1.75;
}

.progression-active p {
  color: rgba(255, 255, 255, 0.68);
}

.msta-progress-line {
  width: 55px;
  height: 3px;

  margin-top: 20px;

  border-radius: 20px;

  background: #fa7516;
}

.msta-progression-note {
  display: flex;

  align-items: center;

  gap: 13px;

  padding: 15px 18px;

  border-left: 3px solid #fa7516;

  background: rgba(250, 117, 22, 0.05);

  border-radius: 0 12px 12px 0;
}

.msta-progression-note i {
  color: #fa7516;
}

.msta-progression-note p {
  margin: 0;

  color: #687287;

  font-size: 12px;
}

.msta-assessment-section {
  background: #faf6f0;
}

.msta-assessment-title {
  margin: 0;

  color: #0b1635;

  font-size: 40px;
}

.msta-assessment-title span {
  color: #fa7516;
}

.msta-assessment-subtitle {
  margin: 10px 0 15px;

  color: #1e3b8a;

  font-size: 20px;
}

.msta-assessment-section>.container p {
  color: #687287;

  font-size: 13px;

  line-height: 1.8;
}

.msta-assessment-box {
  padding: 28px;

  border-radius: 22px;

  background: #fff;

  border: 1px solid rgba(30, 59, 138, 0.08);

  box-shadow: 0 15px 40px rgba(11, 22, 53, 0.07);
}

.msta-assessment-icon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 20px;

  border-radius: 15px;

  background: #1e3b8a;

  color: #fff;

  font-size: 19px;
}

.msta-assessment-items {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

.msta-assessment-items span {
  padding: 8px 12px;

  border-radius: 50px;

  background: #f2f5fa;

  color: #1e3b8a;

  font-family: var(--font-jakarta);

  font-size: 10px;

  font-weight: 600;
}

.msta-assessment-highlight {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin-top: 22px;

  padding: 17px;

  border-left: 3px solid #fa7516;

  border-radius: 0 12px 12px 0;

  background: rgba(250, 117, 22, 0.06);
}

.msta-assessment-highlight i {
  margin-top: 2px;

  color: #fa7516;
}

.msta-assessment-highlight strong {
  color: #37445a;

  font-size: 12px;

  line-height: 1.7;
}

.msta-passport-section {
  background: #fff;
}

.msta-passport-visual {
  position: relative;

  min-height: 320px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.passport-glow {
  position: absolute;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(30, 59, 138, 0.16), transparent 68%);
}

.passport-card {
  position: relative;

  width: 245px;
  min-height: 270px;

  padding: 22px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 25px;

  background: linear-gradient(145deg, #0b1635, #1e3b8a);

  color: #fff;

  box-shadow: 0 25px 55px rgba(11, 22, 53, 0.2);

  transition: transform 0.4s ease;
}

.passport-card:hover {
  transform: rotate(0deg) translateY(-7px);
}

.passport-top {
  position: absolute;

  top: 18px;
  left: 20px;
  right: 20px;

  display: flex;

  justify-content: space-between;

  font-family: var(--font-poppins);

  font-size: 11px;

  letter-spacing: 1px;
}

.passport-top i {
  color: #fa7516;
}

.passport-icon {
  width: 70px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 20px;

  border-radius: 20px;

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

  color: #fa7516;

  font-size: 27px;
}

.passport-card strong {
  font-size: 16px;

  letter-spacing: 1px;
}

.passport-card small {
  margin-top: 8px;

  color: rgba(255, 255, 255, 0.6);

  font-size: 9px;
}

.msta-passport-title {
  margin: 0;

  color: #0b1635;

  font-size: 40px;
}

.msta-passport-title span {
  color: #1e3b8a;
}

.msta-passport-subtitle {
  margin: 10px 0 16px;

  color: #fa7516;

  font-size: 20px;
}

.msta-passport-section p {
  color: #687287;

  font-size: 13px;

  line-height: 1.8;
}

.msta-passport-highlight {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 20px;

  padding: 15px 18px;

  border-radius: 12px;

  background: rgba(30, 59, 138, 0.05);

  color: #1e3b8a;
}

.msta-passport-highlight i {
  color: #fa7516;
}

.msta-passport-highlight strong {
  font-size: 13px;
}

.msta-outline-btn {
  padding: 10px 20px;

  border: 1px solid #1e3b8a;

  color: #1e3b8a;

  font-family: var(--font-jakarta);

  font-size: 12px;

  transition: all 0.3s ease;
}

.msta-outline-btn:hover {
  background: #1e3b8a;
  color: #fff;
}

.msta-accessibility-section {
  background: linear-gradient(135deg, #f4f7ff, #ffffff);
}

.msta-accessibility-title {
  margin: 0;

  color: #0b1635;

  font-size: 38px;
}

.msta-accessibility-title span {
  color: #fa7516;
}

.msta-accessibility-section>.container p {
  color: #687287;

  font-size: 13px;

  line-height: 1.8;
}

.msta-accessibility-box {
  padding: 30px;

  border-radius: 22px;

  background: #fff;

  border: 1px solid rgba(30, 59, 138, 0.08);

  box-shadow: 0 15px 40px rgba(11, 22, 53, 0.06);
}

.accessibility-icon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  border-radius: 15px;

  background: rgba(30, 59, 138, 0.08);

  color: #1e3b8a;

  font-size: 19px;
}

.msta-accessibility-box>p {
  margin-bottom: 20px;
}

.accessibility-highlight {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px 18px;

  border-radius: 12px;

  background: rgba(250, 117, 22, 0.06);

  border-left: 3px solid #fa7516;
}

.accessibility-highlight i {
  color: #fa7516;
}

.accessibility-highlight strong {
  color: #37445a;

  font-size: 13px;
}

.msta-community-section {
  background: #fff;
}

.msta-community-title {
  margin: 0;

  color: #0b1635;

  font-size: 40px;
}

.msta-community-title span {
  color: #1e3b8a;
}

.msta-community-subtitle {
  margin: 10px 0 15px;

  color: #fa7516;

  font-size: 20px;
}

.msta-community-section p {
  color: #687287;

  font-size: 13px;

  line-height: 1.8;
}

.msta-community-quote {
  position: relative;

  padding: 35px;

  border-radius: 24px;

  background: #0b1635;

  overflow: hidden;

  box-shadow: 0 20px 45px rgba(11, 22, 53, 0.15);
}

.msta-community-quote::after {
  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  right: -90px;
  bottom: -100px;

  border-radius: 50%;

  background: rgba(250, 117, 22, 0.13);
}

.quote-mark {
  color: #fa7516;

  font-size: 24px;

  margin-bottom: 15px;
}

.msta-community-quote p {
  position: relative;
  z-index: 2;

  margin: 0 0 5px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 13px;
}

.msta-community-quote strong {
  position: relative;
  z-index: 2;

  color: #fff;

  font-size: 20px;

  line-height: 1.5;
}

.community-dots {
  display: flex;

  gap: 6px;

  margin-top: 25px;
}

.community-dots span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #fa7516;
}

.community-dots span:nth-child(2) {
  opacity: 0.55;
}

.community-dots span:nth-child(3) {
  opacity: 0.25;
}

.msta-philosophy-section {
  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, #faf6f0, #ffffff);
}

.msta-philosophy-title {
  margin: 0 0 18px;

  color: #0b1635;

  font-size: 40px;
}

.msta-philosophy-title span {
  color: #fa7516;
}

.msta-philosophy-section>.container p {
  max-width: 800px;

  margin-left: auto;
  margin-right: auto;

  color: #687287;

  font-size: 13px;

  line-height: 1.8;
}

.msta-philosophy-highlight {
  max-width: 700px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin: 25px auto 0;

  padding: 18px 22px;

  border-radius: 14px;

  background: #0b1635;

  color: #fff;
}

.msta-philosophy-highlight i {
  color: #fa7516;
}

.msta-philosophy-highlight strong {
  font-size: 13px;
}

.msta-final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1635 0%, #142a65 50%, #1e3b8a 100%);
  isolation: isolate;
}

.msta-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 50%,
      rgba(250, 117, 22, 0.12),
      transparent 28%),
    radial-gradient(circle at 85% 30%,
      rgba(255, 255, 255, 0.07),
      transparent 25%);

  z-index: -1;
}

.msta-cta-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}

.cta-orbit-one {
  width: 350px;
  height: 350px;
  top: -210px;
  right: -100px;
}

.cta-orbit-two {
  width: 500px;
  height: 500px;
  bottom: -360px;
  left: -180px;
}

.msta-final-title {
  margin: 0;
  /* color: #fff; */
  color: #000;

  font-size: 44px;

  line-height: 1.2;
}

.msta-final-title span {
  color: #fa7516;
}

.msta-final-text {
  max-width: 650px;

  margin: 16px auto 0;

  color: rgba(255, 255, 255, 0.7);

  font-size: 14px;

  line-height: 1.8;
}

.msta-final-flow {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;
  align-items: center;

  gap: 10px;

  margin-top: 25px;

  color: #fff;

  font-size: 12px;
}

.msta-final-flow i {
  color: #fa7516;

  font-size: 10px;
}

.msta-cta-primary {
  padding: 11px 22px;

  background: #fa7516;

  color: #fff;

  border: 1px solid #fa7516;

  font-family: var(--font-jakarta);

  font-size: 12px;

  font-weight: 600;
}

.msta-cta-primary:hover {
  background: #ff9c19;

  color: white;

  border-color: #fff;
}

.msta-cta-secondary {
  padding: 11px 25px;

  /* background: transparent; */
  background-color: var(--navy-dark);
  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.35);

  font-family: var(--font-jakarta);

  font-size: 12px;

  font-weight: 600;
}

.msta-cta-secondary:hover {
  background: var(--navy);

  color: white;

  border-color: #fff;
}

@media (max-width: 991.98px) {

  .msta-tech-title,
  .msta-assessment-title,
  .msta-passport-title,
  .msta-community-title {
    font-size: 34px;
  }

  .msta-progression-title,
  .msta-accessibility-title,
  .msta-philosophy-title {
    font-size: 32px;
  }

  .msta-final-title {
    font-size: 38px;
  }

  .msta-tech-statement {
    margin-top: 5px;
  }

  .msta-passport-visual {
    min-height: 280px;
  }
}

@media (max-width: 767.98px) {

  .msta-tech-title,
  .msta-assessment-title,
  .msta-passport-title,
  .msta-community-title {
    font-size: 30px;
  }

  .msta-tech-subtitle,
  .msta-assessment-subtitle,
  .msta-passport-subtitle,
  .msta-community-subtitle {
    font-size: 18px;
  }

  .msta-progression-title,
  .msta-accessibility-title,
  .msta-philosophy-title {
    font-size: 28px;
  }

  .msta-final-title {
    font-size: 31px;
  }

  .msta-tech-intro,
  .msta-tech-statement p {
    font-size: 12px;
  }

  .msta-tech-card {
    padding: 21px 18px;
  }

  .msta-progression-card {
    padding: 23px;
  }

  .msta-assessment-box,
  .msta-accessibility-box {
    padding: 22px;
  }

  .msta-community-quote {
    padding: 27px;
  }

  .msta-philosophy-highlight {
    align-items: flex-start;

    text-align: left;
  }

  .msta-final-flow {
    gap: 7px;
  }
}

@media (max-width: 575.98px) {
  .msta-section-eyebrow {
    font-size: 9px;
  }

  .msta-tech-title,
  .msta-assessment-title,
  .msta-passport-title,
  .msta-community-title {
    font-size: 27px;
  }

  .msta-progression-title,
  .msta-accessibility-title,
  .msta-philosophy-title {
    font-size: 25px;
  }

  .msta-final-title {
    font-size: 27px;
  }

  .msta-final-text {
    font-size: 12px;
  }

  .msta-final-flow {
    font-size: 10px;
  }

  .msta-final-flow i {
    font-size: 8px;
  }

  .passport-card {
    width: 220px;
    min-height: 250px;
  }
}

/* ===== 6th section end ===== */

/* ======== Learning Experience Page End ========== */

/* ========= expert membership page start ======== */

/* ===== 1st section start ===== */

.expert-mentorship-banner {
  position: relative;
  height: 250px;
  min-height: 250px;
  overflow: hidden;
  background: radial-gradient(circle at 85% 50%, rgba(250, 117, 22, 0.14), transparent 30%), linear-gradient(135deg, #0b1635 0%, #12265f 55%, #1e3b8a 100%);
  isolation: isolate;
}

.expert-mentorship-banner::before {
  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  top: -270px;
  right: -80px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(30, 59, 138, 0.14) 0%,
      rgba(30, 59, 138, 0.05) 42%,
      transparent 70%);

  z-index: -3;
}

.expert-mentorship-banner::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  left: -180px;
  bottom: -220px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(250, 117, 22, 0.13),
      transparent 70%);

  z-index: -3;
}

.expert-grid {
  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(rgba(30, 59, 138, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 59, 138, 0.035) 1px, transparent 1px);

  background-size: 38px 38px;

  opacity: 0.55;

  z-index: -2;

  pointer-events: none;
}

.expert-bg-circle {
  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(30, 59, 138, 0.08);

  pointer-events: none;
}

.expert-circle-1 {
  width: 220px;
  height: 220px;

  right: 12%;
  top: 15px;
}

.expert-circle-2 {
  width: 150px;
  height: 150px;

  right: 18%;
  top: 50px;

  border-color: rgba(250, 117, 22, 0.1);
}

.expert-content {
  position: relative;

  z-index: 5;

  padding-left: 10px;
}

.expert-title {
  max-width: 650px;

  margin: 0;

  color: #0b1635;

  font-size: 31px;

  line-height: 1.18;

  font-weight: 700;

  letter-spacing: -0.7px;
}

.expert-title span {
  color: #fa7516;
}

.expert-points {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 15px;
}

.expert-point {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 10px;

  border-radius: 50px;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  color: #4d5b72;

  font-size: 9px;

  font-weight: 500;

  box-shadow: 0 5px 15px rgba(11, 22, 53, 0.04);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.expert-point i {
  color: #ff9c19;

  font-size: 9px;
}

.expert-point:hover {
  transform: translateY(-3px);

  border-color: rgba(250, 117, 22, 0.3);

  color: #1e3b8a;
}

.expert-network {
  position: relative;

  width: 100%;
  height: 215px;

  display: flex;

  align-items: center;
  justify-content: center;

  isolation: isolate;
}

.expert-orbit {
  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  pointer-events: none;
}

/* Outer Ring */

.expert-orbit-outer {
  width: 205px;
  height: 205px;

  border: 1px dashed rgba(30, 59, 138, 0.16);

  animation: expertOrbitRotate 25s linear infinite;
}

/* Middle Ring */

.expert-orbit-middle {
  width: 155px;
  height: 155px;

  border: 1px solid rgba(250, 117, 22, 0.16);

  animation: expertOrbitRotateReverse 18s linear infinite;
}

/* Orbit Dot */

.expert-orbit-outer::before {
  content: "";

  position: absolute;

  width: 7px;
  height: 7px;

  top: 12px;
  left: 50%;

  border-radius: 50%;

  background: #fa7516;

  box-shadow: 0 0 0 5px rgba(250, 117, 22, 0.1);
}

.expert-hub {
  position: relative;

  z-index: 10;

  width: 108px;
  height: 108px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: linear-gradient(145deg,
      #f5f5f514 0%,
      #ffffff26 55%,
      #f3f4f629 100%);

  border: 4px solid rgba(255, 255, 255, 0.85);

  box-shadow:
    0 18px 38px rgba(11, 22, 53, 0.22),
    0 0 0 10px rgba(30, 59, 138, 0.055);

  animation: expertHubFloat 4s ease-in-out infinite;
}

/* Inner Dashed Ring */

.expert-hub-ring {
  position: absolute;

  inset: 7px;

  border-radius: 50%;

  border: 1px dashed rgba(250, 117, 22, 0.5);

  animation: expertRingRotate 12s linear infinite;
}

.expert-hub-icon {
  position: relative;

  z-index: 3;

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(250, 117, 22, 0.14);

  color: #ff9c19;

  font-size: 17px;
}

.expert-hub-content {
  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 5px;
}

.expert-hub-content strong {
  color: #ffffff;

  font-size: 10px;

  line-height: 1;

  letter-spacing: 1.5px;
}

.expert-hub-content small {
  margin-top: 4px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 6px;

  line-height: 1;

  letter-spacing: 1px;
}

.expert-skill {
  position: absolute;

  z-index: 8;

  width: 112px;

  min-height: 40px;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 6px 8px;

  border-radius: 11px;

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

  border: 1px solid rgba(30, 59, 138, 0.09);

  box-shadow: 0 9px 24px rgba(11, 22, 53, 0.08);

  backdrop-filter: blur(9px);

  -webkit-backdrop-filter: blur(9px);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* Skill Hover */

.expert-skill:hover {
  border-color: rgba(250, 117, 22, 0.35);

  box-shadow: 0 14px 30px rgba(11, 22, 53, 0.12);

  transform: translateY(-4px);
}

.expert-skill-icon {
  flex: 0 0 28px;

  width: 28px;
  height: 28px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: rgba(30, 59, 138, 0.07);

  color: #1e3b8a;

  font-size: 11px;

  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.expert-skill:hover .expert-skill-icon {
  background: #fa7516;

  color: #ffffff;
}

.expert-skill strong {
  display: block;

  color: #1a2c4b;

  font-size: 8px;

  line-height: 1.2;
}

.expert-skill small {
  display: block;

  margin-top: 2px;

  color: #7a8494;

  font-size: 6px;

  line-height: 1.2;
}

/* Guidance */

.expert-skill-1 {
  top: 15px;
  left: 0;
}

/* Projects */

.expert-skill-2 {
  top: 15px;
  right: 0;
}

/* Feedback */

.expert-skill-3 {
  bottom: 13px;
  left: 5px;
}

/* Career */

.expert-skill-4 {
  bottom: 13px;
  right: 5px;
}

.expert-connection {
  position: absolute;

  z-index: 2;

  height: 1px;

  background: linear-gradient(90deg,
      transparent,
      rgba(30, 59, 138, 0.18),
      transparent);

  transform-origin: center;
}

/* Guidance → Expert */

.connection-1 {
  width: 70px;

  left: 23%;

  top: 32%;

  transform: rotate(28deg);
}

/* Projects → Expert */

.connection-2 {
  width: 70px;

  right: 23%;

  top: 32%;

  transform: rotate(-28deg);
}

/* Feedback → Expert */

.connection-3 {
  width: 70px;

  left: 24%;

  bottom: 31%;

  transform: rotate(-28deg);
}

/* Career → Expert */

.connection-4 {
  width: 70px;

  right: 24%;

  bottom: 31%;

  transform: rotate(28deg);
}

.expert-dot {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #fa7516;

  opacity: 0.65;

  animation: expertDotPulse 3s ease-in-out infinite;
}

.expert-dot-1 {
  top: 8px;
  left: 32%;
}

.expert-dot-2 {
  top: 55%;
  right: 5%;

  animation-delay: 0.7s;
}

.expert-dot-3 {
  bottom: 3px;
  left: 40%;

  animation-delay: 1.3s;
}

.expert-dot-4 {
  top: 48%;
  left: 3%;

  animation-delay: 1.8s;
}

@keyframes expertOrbitRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes expertOrbitRotateReverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes expertRingRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes expertHubFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes expertDotPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.35;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.9;
  }
}

@media (max-width: 1199.98px) {
  .expert-title {
    font-size: 27px;
  }

  .expert-network {
    height: 210px;
  }

  .expert-hub {
    width: 102px;
    height: 102px;
  }

  .expert-skill {
    width: 105px;
  }

  .expert-circle-1 {
    right: 8%;
  }
}

@media (max-width: 991.98px) {
  .expert-mentorship-banner {
    height: auto;

    min-height: 250px;

    padding: 28px 0;
  }

  .expert-content {
    text-align: center;

    padding-left: 0;
  }

  .expert-eyebrow {
    justify-content: center;
  }

  .expert-title {
    max-width: 650px;

    margin: auto;

    font-size: 28px;
  }

  .expert-points {
    justify-content: center;
  }

  .expert-network {
    height: 175px;

    max-width: 500px;

    margin: 0 auto;
  }

  .expert-orbit-outer {
    width: 175px;
    height: 175px;
  }

  .expert-orbit-middle {
    width: 135px;
    height: 135px;
  }

  .expert-hub {
    width: 92px;
    height: 92px;
  }

  .expert-hub-icon {
    width: 33px;
    height: 33px;

    font-size: 15px;
  }

  .expert-skill {
    width: 105px;

    min-height: 37px;
  }

  .expert-skill-icon {
    width: 25px;
    height: 25px;

    flex-basis: 25px;

    font-size: 10px;
  }

  .expert-skill-1 {
    left: 4%;
  }

  .expert-skill-2 {
    right: 4%;
  }

  .expert-skill-3 {
    left: 8%;
  }

  .expert-skill-4 {
    right: 8%;
  }
}

@media (max-width: 767.98px) {
  .expert-mentorship-banner {
    min-height: 250px;

    padding: 24px 0;
  }

  .expert-title {
    max-width: 520px;

    font-size: 24px;

    line-height: 1.25;
  }

  .expert-eyebrow {
    font-size: 9px;

    letter-spacing: 1.4px;
  }

  .expert-points {
    gap: 6px;

    margin-top: 12px;
  }

  .expert-point {
    padding: 5px 8px;

    font-size: 7.5px;
  }

  .expert-point i {
    font-size: 8px;
  }

  .expert-network {
    height: 160px;

    max-width: 430px;
  }

  .expert-orbit-outer {
    width: 155px;
    height: 155px;
  }

  .expert-orbit-middle {
    width: 120px;
    height: 120px;
  }

  .expert-hub {
    width: 82px;
    height: 82px;

    border-width: 3px;
  }

  .expert-hub-icon {
    width: 29px;
    height: 29px;

    font-size: 12px;
  }

  .expert-hub-content strong {
    font-size: 8px;
  }

  .expert-hub-content small {
    font-size: 5px;
  }

  .expert-skill {
    width: 92px;

    min-height: 34px;

    padding: 5px 6px;

    gap: 5px;

    border-radius: 9px;
  }

  .expert-skill-icon {
    width: 23px;
    height: 23px;

    flex-basis: 23px;

    border-radius: 6px;

    font-size: 9px;
  }

  .expert-skill strong {
    font-size: 7px;
  }

  .expert-skill small {
    font-size: 5.5px;
  }

  .expert-skill-1 {
    left: 0;
    top: 5px;
  }

  .expert-skill-2 {
    right: 0;
    top: 5px;
  }

  .expert-skill-3 {
    left: 2%;
    bottom: 3px;
  }

  .expert-skill-4 {
    right: 2%;
    bottom: 3px;
  }

  .expert-connection {
    width: 55px;
  }
}

@media (max-width: 575.98px) {
  .expert-mentorship-banner {
    padding: 21px 0;
  }

  .expert-title {
    font-size: 21px;

    letter-spacing: -0.4px;
  }

  .expert-points {
    max-width: 330px;

    margin-left: auto;
    margin-right: auto;
  }

  .expert-point {
    font-size: 7px;

    padding: 5px 7px;
  }

  .expert-network {
    height: 145px;
  }

  .expert-orbit-outer {
    width: 140px;
    height: 140px;
  }

  .expert-orbit-middle {
    width: 105px;
    height: 105px;
  }

  .expert-hub {
    width: 74px;
    height: 74px;
  }

  .expert-hub-icon {
    width: 26px;
    height: 26px;

    font-size: 11px;
  }

  .expert-hub-content strong {
    font-size: 7px;
  }

  .expert-hub-content small {
    font-size: 4.5px;
  }

  .expert-skill {
    width: 82px;

    min-height: 30px;

    padding: 4px 5px;
  }

  .expert-skill-icon {
    width: 20px;
    height: 20px;

    flex-basis: 20px;

    font-size: 8px;
  }

  .expert-skill strong {
    font-size: 6.5px;
  }

  .expert-skill small {
    display: none;
  }

  .expert-connection {
    width: 45px;
  }
}

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

  .expert-orbit,
  .expert-hub,
  .expert-hub-ring,
  .expert-dot {
    animation: none;
  }
}

/* ===== 1st section end ===== */

/* ===== 2nd Section start ===== */
.msta-mentor-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background: #f7faff;
}

.msta-mentor-section::before {
  content: "";
  position: absolute;
  width: 550px;
  height: 550px;
  top: -300px;
  left: -220px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(30, 59, 138, 0.1) 0%,
      rgba(30, 59, 138, 0.04) 45%,
      transparent 70%);
  pointer-events: none;
}

.msta-mentor-section::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -280px;
  bottom: -250px;
  border-radius: 50%;
  border: 80px solid rgba(250, 117, 22, 0.045);
  pointer-events: none;
}

.mentor-bg-shape {
  position: absolute;
  pointer-events: none;
}

.mentor-shape-one {
  width: 180px;
  height: 180px;
  top: 15%;
  left: 48%;
  border-radius: 40%;
  border: 1px solid rgba(30, 59, 138, 0.08);
  transform: rotate(25deg);
}

.mentor-shape-two {
  width: 90px;
  height: 90px;
  bottom: 15%;
  left: 8%;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.06);
}

.mentor-grid-pattern {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 130px;
  height: 130px;
  background-image: radial-gradient(rgba(30, 59, 138, 0.2) 1.3px,
      transparent 1.3px);

  background-size: 13px 13px;
  opacity: 0.45;
  pointer-events: none;
}

.mentor-content {
  position: relative;
  z-index: 2;
}

.mentor-heading {
  max-width: 100%;
  margin: 0 !important;
  color: var(--navy-dark);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.08;
  font-weight: 700;
}

.mentor-heading span {
  color: var(--orange);
  display: inline;
}

.mentor-text {
  max-width: 720px;
  margin-bottom: 16px;
  color: #59677e;
  font-size: 15px;
  line-height: 1.8;
}

.mentor-role-row {
  margin-top: 28px;
}

.mentor-role {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;
  width: 60%;
  min-height: 68px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(30, 59, 138, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.mentor-role:hover {
  transform: translateY(-5px);
  border-color: rgba(250, 117, 22, 0.25);
  box-shadow: 0 15px 30px rgba(30, 59, 138, 0.1);
}

.mentor-role-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(30, 59, 138, 0.08);
  color: var(--navy);
  font-size: 15px;
  transition: 0.3s;
}

.mentor-role:hover .mentor-role-icon {
  background: var(--orange);
  color: #fff;
}

.mentor-role small {
  display: block;
  color: #8490a2;
  font-size: 9px;
  line-height: 1.2;
}

.mentor-role strong {
  display: block;
  margin-top: 3px;
  color: var(--navy-dark);
  font-size: 11px;
  line-height: 1.2;
}

.mentor-quote {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
  margin-top: 28px;
  padding: 20px 22px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(250, 117, 22, 0.14);
  box-shadow: 0 15px 35px rgba(30, 59, 138, 0.07);
}

.mentor-quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--orange);
  border-radius: 16px 0 0 16px;
}

.mentor-quote-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.1);
  color: var(--orange);
  font-size: 16px;
}

.mentor-quote p {
  margin: 0;
  color: var(--navy-dark);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
}

.mentor-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mentor-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.mentor-ring-one {
  width: 470px;
  height: 470px;
  border: 1px solid rgba(30, 59, 138, 0.12);
  animation: mentorSpin 20s linear infinite;
}

.mentor-ring-two {
  width: 390px;
  height: 390px;
  border: 1px dashed rgba(250, 117, 22, 0.3);
  animation: mentorSpinReverse 16s linear infinite;
}

@keyframes mentorSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes mentorSpinReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.mentor-main-card {
  position: relative;
  z-index: 3;
  width: 340px;
  min-height: 390px;
  padding: 25px;
  border-radius: 30px;
  background: linear-gradient(145deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid rgba(30, 59, 138, 0.1);
  box-shadow: 0 30px 70px rgba(30, 59, 138, 0.16);
  text-align: center;
}

.mentor-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  color: var(--navy-dark);
  font-size: 12px;
  font-weight: 700;
}

.mentor-status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6b778c;
  font-size: 8px;
  letter-spacing: 1px;
}

.mentor-status i {
  color: #22c55e;
  font-size: 7px;
}

.mentor-main-icon {
  position: relative;
  width: 145px;
  height: 145px;
  margin: 15px auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mentor-icon-circle {
  position: relative;
  z-index: 2;
  width: 105px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--navy), #3159bd);
  color: #fff;
  font-size: 40px;
  box-shadow: 0 18px 35px rgba(30, 59, 138, 0.25);
}

.mentor-icon-ring {
  position: absolute;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  border: 1px solid rgba(250, 117, 22, 0.3);
  animation: pulseRing 2.5s ease-in-out infinite;
}

@keyframes pulseRing {

  0%,
  100% {
    transform: scale(0.92);

    opacity: 0.45;
  }

  50% {
    transform: scale(1);

    opacity: 1;
  }
}

.mentor-main-card h3 {
  margin-bottom: 10px;
  color: var(--navy-dark);
  font-size: 27px;
  font-weight: 700;
}

.mentor-main-card h3 span {
  color: var(--orange);
}

.mentor-main-card>p {
  margin: 0 auto;
  max-width: 270px;
  color: #68758a;
  font-size: 12px;
  line-height: 1.7;
}

.mentor-progress-area {
  margin-top: 25px;
  text-align: left;
}

.mentor-progress-area>div:first-child {
  color: #758196;
  font-size: 9px;
}

.mentor-progress {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.mentor-progress span {
  height: 5px;
  flex: 1;
  border-radius: 20px;
  background: #dfe5f0;
}

.mentor-progress span:nth-child(1),
.mentor-progress span:nth-child(2) {
  background: var(--orange);
}

.mentor-progress span:nth-child(3) {
  background: var(--navy);
}

.mentor-float-card {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  min-width: 155px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 14px;
  box-shadow: 0 15px 35px rgba(30, 59, 138, 0.12);
  backdrop-filter: blur(10px);
  animation: mentorFloat 4s ease-in-out infinite;
}

.mentor-float-one {
  left: 0;
  top: 22%;
}

.mentor-float-two {
  right: -10px;
  bottom: 45%;
  animation-delay: 1.5s;
}

.mentor-float-icon {
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(30, 59, 138, 0.09);
  color: var(--navy);
  font-size: 14px;
}

.mentor-float-icon.orange {
  background: rgba(250, 117, 22, 0.1);
  color: var(--orange);
}

.mentor-float-card small {
  display: block;
  color: #8994a6;
  font-size: 9px;
}

.mentor-float-card strong {
  display: block;
  margin-top: 2px;
  color: var(--navy-dark);
  font-size: 11px;
}

@keyframes mentorFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

.mentor-dots {
  position: absolute;
  width: 80px;
  height: 80px;
  right: 0;
  bottom: 5%;
  background-image: radial-gradient(var(--orange) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.45;
}

@media (max-width: 991.98px) {
  .msta-mentor-section {
    padding: 70px 0;
  }

  .mentor-heading {
    font-size: 48px;
  }

  .mentor-visual {
    min-height: 520px;
    margin-top: 25px;
  }

  .mentor-main-card {
    width: 330px;
  }

  .mentor-ring-one {
    width: 450px;
    height: 450px;
  }

  .mentor-ring-two {
    width: 370px;
    height: 370px;
  }
}

@media (max-width: 767.98px) {
  .msta-mentor-section {
    padding: 55px 0;
  }

  .mentor-grid-pattern {
    display: none;
  }

  .mentor-heading {
    font-size: 37px;
    line-height: 1.12;
    margin-bottom: 20px;
  }

  .mentor-text {
    font-size: 14px;
    line-height: 1.7;
  }

  .mentor-role-row {
    margin-top: 22px;
  }

  .mentor-role {
    min-height: 62px;
    padding: 9px;
  }

  .mentor-role-icon {
    width: 35px;
    height: 35px;
    font-size: 13px;
  }

  .mentor-role strong {
    font-size: 10px;
  }

  .mentor-quote {
    margin-top: 22px;
    padding: 17px;

    gap: 11px;
  }

  .mentor-quote-icon {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .mentor-quote p {
    font-size: 12px;
    line-height: 1.65;
  }

  .mentor-visual {
    min-height: 450px;
    margin-top: 20px;
  }

  .mentor-main-card {
    width: 300px;
    min-height: 360px;
    padding: 20px;
  }

  .mentor-main-icon {
    width: 120px;
    height: 120px;
  }

  .mentor-icon-circle {
    width: 88px;
    height: 88px;
    font-size: 32px;
  }

  .mentor-icon-ring {
    width: 120px;
    height: 120px;
  }

  .mentor-main-card h3 {
    font-size: 23px;
  }

  .mentor-float-card {
    min-width: 135px;
    padding: 9px 10px;
  }

  .mentor-float-one {
    left: 0;
    top: 13%;
  }

  .mentor-float-two {
    right: 0;
    bottom: 12%;
  }

  .mentor-number-card {
    right: 2%;
    top: 3%;
    width: 58px;
    height: 58px;
  }

  .mentor-number-card span {
    font-size: 17px;
  }

  .mentor-ring-one {
    width: 380px;
    height: 380px;
  }

  .mentor-ring-two {
    width: 320px;
    height: 320px;
  }
}

@media (max-width: 480px) {
  .msta-mentor-section {
    padding: 45px 0;
  }

  .mentor-heading {
    font-size: 31px;
    margin-bottom: 10px !important;
  }

  .mentor-label span:last-child {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .mentor-text {
    font-size: 13px;
  }

  .mentor-role {
    gap: 7px;
  }

  .mentor-role-icon {
    width: 32px;
    height: 32px;
  }

  .mentor-role strong {
    font-size: 9px;
  }

  .mentor-role small {
    font-size: 8px;
  }

  .mentor-visual {
    min-height: 400px;
  }

  .mentor-main-card {
    width: 270px;
    min-height: 340px;
    border-radius: 24px;
  }

  .mentor-main-icon {
    margin-bottom: 18px;
  }

  .mentor-main-card h3 {
    font-size: 21px;
  }

  .mentor-main-card>p {
    font-size: 11px;
  }

  .mentor-float-card {
    min-width: 120px;
    padding: 8px;
  }

  .mentor-float-card strong {
    font-size: 9px;
  }

  .mentor-float-card small {
    font-size: 8px;
  }

  .mentor-float-icon {
    width: 31px;
    height: 31px;
    font-size: 11px;
  }

  .mentor-float-one {
    left: -5px;
  }

  .mentor-float-two {
    right: -5px;
  }

  .mentor-number-card {
    width: 50px;
    height: 50px;
    right: 0;
  }

  .mentor-number-card span {
    font-size: 14px;
  }

  .mentor-number-card small {
    font-size: 6px;
  }

  .mentor-ring-one {
    width: 320px;
    height: 320px;
  }

  .mentor-ring-two {
    width: 275px;
    height: 275px;
  }
}

/* ===== 2nd section End ===== */

/* ===== 3rd section start ===== */

.msta-mentor-ecosystem {
  position: relative;
  overflow: hidden;
  background: #f8fbff;
  isolation: isolate;
}

.msta-mentor-ecosystem::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -220px;
  left: -180px;
  border-radius: 50%;
  background: rgba(30, 59, 138, 0.055);
  z-index: -2;
}

.msta-mentor-ecosystem::after {
  content: "";

  position: absolute;

  width: 360px;
  height: 360px;

  right: -180px;
  bottom: -190px;

  border-radius: 50%;

  border: 70px solid rgba(250, 117, 22, 0.055);

  z-index: -2;
}

/* Decorative circles */

.ecosystem-bg-circle {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.ecosystem-bg-circle-1 {
  width: 150px;
  height: 150px;

  top: 28%;
  left: 4%;

  border: 1px solid rgba(30, 59, 138, 0.08);

  animation: ecosystemFloat 5s ease-in-out infinite;
}

.ecosystem-bg-circle-2 {
  width: 90px;
  height: 90px;

  right: 8%;
  top: 18%;

  background: rgba(250, 117, 22, 0.045);

  animation: ecosystemFloat 4s ease-in-out infinite reverse;
}

@keyframes ecosystemFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

.ecosystem-grid-pattern {
  position: absolute;

  right: 3%;
  top: 35%;

  width: 120px;
  height: 120px;

  background-image:
    linear-gradient(rgba(30, 59, 138, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 59, 138, 0.06) 1px, transparent 1px);

  background-size: 20px 20px;

  opacity: 0.7;

  z-index: -1;
}

.ecosystem-title {
  margin: 0 0 16px;

  color: var(--navy-dark);

  font-size: clamp(30px, 4vw, 46px);

  font-weight: 700;

  line-height: 1.15;
}

.ecosystem-title span {
  color: var(--orange);
}

.ecosystem-intro {
  max-width: 760px;

  margin: auto;

  color: #65728a;

  font-size: 15px;

  line-height: 1.75;
}

.ecosystem-card {
  position: relative;

  overflow: hidden;

  padding: 28px 25px 26px;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(30, 59, 138, 0.055);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;

  z-index: 1;
}

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

  border-color: rgba(250, 117, 22, 0.25);

  box-shadow: 0 20px 45px rgba(30, 59, 138, 0.12);
}

.ecosystem-number {
  position: absolute;

  top: 18px;
  right: 20px;

  color: rgba(30, 59, 138, 0.08);

  font-size: 38px;

  font-weight: 700;

  line-height: 1;
}

.ecosystem-icon {
  width: 58px;
  height: 58px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 22px;

  border-radius: 16px;

  background: linear-gradient(135deg,
      rgba(30, 59, 138, 0.1),
      rgba(30, 59, 138, 0.04));

  color: var(--navy);

  font-size: 21px;

  transition: 0.35s ease;
}

.ecosystem-card:hover .ecosystem-icon {
  background: var(--orange);

  color: #fff;

  transform: rotate(-5deg) scale(1.05);
}

.ecosystem-card h3 {
  position: relative;

  margin: 0;

  color: var(--navy-dark);

  font-size: 21px;

  font-weight: 700;
}

.ecosystem-line {
  width: 35px;
  height: 3px;

  margin: 13px 0 16px;

  border-radius: 10px;

  background: var(--orange);

  transition: width 0.35s ease;
}

.ecosystem-card:hover .ecosystem-line {
  width: 65px;
}

.ecosystem-card p {
  position: relative;

  margin: 0;

  color: #66738a;

  font-size: 13.5px;

  line-height: 1.75;

  z-index: 2;
}

.ecosystem-card-shape {
  position: absolute;

  width: 120px;
  height: 120px;

  right: -55px;
  bottom: -55px;

  border-radius: 50%;

  background: rgba(30, 59, 138, 0.035);

  transition: 0.4s ease;

  z-index: -1;
}

.ecosystem-card:hover .ecosystem-card-shape {
  width: 160px;
  height: 160px;

  background: rgba(250, 117, 22, 0.045);
}

.ecosystem-bottom {
  display: flex;

  align-items: center;

  gap: 15px;

  padding: 18px 22px;

  background: #fff;

  border: 1px solid rgba(30, 59, 138, 0.07);

  border-radius: 14px;

  box-shadow: 0 8px 25px rgba(30, 59, 138, 0.05);

  color: #56647b;

  font-size: 14px;

  line-height: 1.6;
}

.ecosystem-bottom strong {
  color: var(--navy-dark);
}

.ecosystem-bottom-icon {
  flex-shrink: 0;

  width: 40px;
  height: 40px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: rgba(250, 117, 22, 0.1);

  color: var(--orange);
}

@media (max-width: 991.98px) {
  .msta-mentor-ecosystem {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .ecosystem-intro {
    font-size: 14px;
  }

  .ecosystem-card {
    padding: 25px 22px;
  }
}

@media (max-width: 767.98px) {
  .msta-mentor-ecosystem {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .ecosystem-label {
    font-size: 9px;
    letter-spacing: 1px;
  }

  .ecosystem-title {
    font-size: 30px;
  }

  .ecosystem-intro {
    font-size: 13.5px;
    line-height: 1.7;
  }

  .ecosystem-card {
    border-radius: 16px;
    padding: 23px 20px;
  }

  .ecosystem-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
  }

  .ecosystem-card h3 {
    font-size: 19px;
  }

  .ecosystem-card p {
    font-size: 13px;
  }

  .ecosystem-number {
    font-size: 32px;
  }

  .ecosystem-grid-pattern {
    display: none;
  }

  .ecosystem-bg-circle-1 {
    left: -60px;
  }

  .ecosystem-bg-circle-2 {
    right: -40px;
  }

  .ecosystem-bottom {
    align-items: flex-start;
    padding: 15px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .ecosystem-title {
    font-size: 27px;
  }

  .ecosystem-card {
    padding: 21px 18px;
  }

  .ecosystem-card h3 {
    font-size: 18px;
  }

  .ecosystem-card p {
    font-size: 12.5px;
  }
}

/* ===== 3rd section end ===== */

/* ===== our mentor star ===== */

.msta-mentor-section {
  position: relative;
  overflow: hidden;
  background: #f7faff;
}

/* Background decorations */

.msta-mentor-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -220px;
  top: -180px;
  border-radius: 50%;
  background: rgba(30, 59, 138, 0.045);
  pointer-events: none;
}

.msta-mentor-section::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -200px;
  bottom: -180px;
  border: 70px solid rgba(250, 117, 22, 0.035);
  border-radius: 50%;
  pointer-events: none;
}

.mentor-bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.mentor-shape-1 {
  width: 120px;
  height: 120px;
  top: 25%;
  left: 8%;
  border: 1px solid rgba(30, 59, 138, 0.08);
}

.mentor-shape-2 {
  width: 80px;
  height: 80px;
  right: 12%;
  top: 18%;
  background: rgba(250, 117, 22, 0.04);
}

.mentor-dots {
  position: absolute;
  top: 70px;
  right: 6%;
  width: 90px;
  height: 90px;
  background-image: radial-gradient(rgba(30, 59, 138, 0.22) 1.5px,
      transparent 1.5px);

  background-size: 13px 13px;
  opacity: 0.45;
  pointer-events: none;
}

.mentor-section-title {
  margin-bottom: 12px;
  color: var(--navy-dark);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  font-weight: 700;
}

.mentor-section-title span {
  color: var(--orange);
}

.mentor-section-subtitle {
  max-width: 650px;
  margin: 0 auto;
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
}

.mentor-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(30, 59, 138, 0.06);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.mentor-card:hover {
  transform: translateY(-8px);
  border-color: rgba(250, 117, 22, 0.2);
  box-shadow: 0 22px 50px rgba(30, 59, 138, 0.12);
}

/* Card number */

.mentor-card-number {
  position: absolute;
  top: 15px;
  right: 17px;
  z-index: 5;
  font-family: var(--font-poppins);
  font-size: 12px;
  font-weight: 700;
  color: rgba(30, 59, 138, 0.35);
}

.mentor-card-image {
  position: relative;
  width: 135px;
  height: 135px;
  margin: 5px auto 20px;
  overflow: hidden;
  border-radius: 50%;
  border: 5px solid #ffffff;
  box-shadow:
    0 0 0 2px rgba(250, 117, 22, 0.18),
    0 12px 30px rgba(30, 59, 138, 0.12);
  background: #eef3ff;
}

.mentor-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.mentor-card:hover .mentor-card-image img {
  transform: scale(1.06);
}

.mentor-card-content {
  text-align: center;
}

.mentor-role {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--orange);
  font-family: var(--font-jakarta);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.mentor-card-content h3 {
  margin-bottom: 10px;
  color: var(--navy-dark);
  font-size: 22px;
  font-weight: 700;
}

.mentor-card-content p {
  min-height: 80px;
  margin-bottom: 20px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
}

.mentor-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: auto;
}

.mentor-linkedin,
.mentor-view-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* LinkedIn */

.mentor-linkedin {
  color: #ffffff;
  background: #0a66c2;
  border: 1px solid #0a66c2;
}

.mentor-linkedin:hover {
  color: #ffffff;
  background: #084f96;
  transform: translateY(-2px);
}

/* View More */

.mentor-view-btn {
  cursor: pointer;
  color: var(--navy);
  background: #f1f5ff;
  border: 1px solid rgba(30, 59, 138, 0.1);
}

.mentor-view-btn:hover {
  color: #ffffff;
  background: var(--navy);
  border-color: var(--navy);
  transform: translateY(-2px);
}

.msta-card-shape {
  position: absolute;
  width: 100px;
  height: 100px;
  right: -55px;
  bottom: -55px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.045);
  transition: transform 0.4s ease;
}

.mentor-card:hover .msta-card-shape {
  transform: scale(1.4);
}

.msta-mentor-modal {
  background: rgba(5, 16, 40, 0.58);
  backdrop-filter: blur(7px);
}

.msta-mentor-modal .modal-dialog {
  width: calc(100% - 30px);
  max-width: 950px;
  margin: 1.5rem auto;
}

.msta-mentor-modal .modal-content {
  position: relative;
  overflow: hidden;
  height: min(650px, calc(100vh - 50px));
  border: 0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(25px) scale(0.97);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
}

/* Bootstrap modal animation */

.msta-mentor-modal.show .modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mentor-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 20;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(11, 22, 53, 0.75);
  cursor: pointer;
  transition: all 0.3s ease;
}

.mentor-modal-close:hover {
  color: #ffffff;
  background: var(--orange);
  transform: rotate(90deg);
}

.msta-mentor-modal .modal-content>.row {
  height: 100%;
}

.mentor-modal-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  background: #eaf0fb;
}

.mentor-modal-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}

.msta-mentor-modal.show .mentor-modal-image img {
  transform: scale(1);
}

.mentor-modal-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(8, 20, 50, 0.88) 0%,
      rgba(8, 20, 50, 0.25) 45%,
      transparent 75%);
  pointer-events: none;
}

.mentor-modal-image-overlay {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 25px;
  z-index: 3;
  color: #ffffff;
}

.mentor-modal-image-overlay span {
  display: inline-block;
  margin-bottom: 7px;
  padding: 6px 11px;
  border-radius: 20px;
  background: rgba(250, 117, 22, 0.95);
  color: #ffffff;
  font-family: var(--font-jakarta);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.mentor-modal-image-overlay h3 {
  margin: 0;
  font-family: var(--font-poppins);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
}

/* MODAL BODY */

.msta-mentor-modal {
  background: rgba(7, 18, 42, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.msta-mentor-modal .modal-dialog {
  width: calc(100% - 32px);
  max-width: 1080px;
  margin: 20px auto;
  min-height: calc(100vh - 40px);
  display: flex;
  align-items: center;
}

.msta-mentor-modal .modal-content {
  position: relative;
  width: 100%;
  height: min(650px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 35px 100px rgba(7, 18, 42, 0.3);
  opacity: 0;
  transform: translateY(25px) scale(0.97);
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.msta-mentor-modal.show .modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mentor-modal-layout {
  display: grid;
  grid-template-columns:
    minmax(300px, 36%) minmax(0, 64%);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.mentor-modal-left {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #edf2fa;
}

.mentor-modal-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.mentor-modal-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mentor-modal-image:hover img {
  transform: scale(1.035);
}

.mentor-modal-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(7, 18, 42, 0.92) 0%,
      rgba(7, 18, 42, 0.6) 25%,
      rgba(7, 18, 42, 0.18) 55%,
      transparent 75%);
}

.mentor-modal-image-overlay {
  position: absolute;
  left: 30px;
  right: 25px;
  bottom: 30px;
  z-index: 3;
  color: #ffffff;
}

/* Label */

.mentor-modal-image-overlay span {
  display: inline-flex;
  align-items: center;
  margin-bottom: 9px;
  padding: 6px 12px;
  border-radius: 50px;
  background: var(--orange);
  color: #ffffff;
  font-family: var(--font-jakarta);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}

/* Name */

.mentor-modal-image-overlay h3 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-poppins);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.mentor-modal-right {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
}

.mentor-modal-body {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 42px 46px 35px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(30, 59, 138, 0.35) transparent;
}

.mentor-modal-body::-webkit-scrollbar {
  width: 7px;
}

.mentor-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.mentor-modal-body::-webkit-scrollbar-thumb {
  background: rgba(30, 59, 138, 0.28);
  border-radius: 50px;
}

.mentor-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(30, 59, 138, 0.55);
}

.mentor-modal-label {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--orange);
  font-family: var(--font-jakarta);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  line-height: 1.5;
  text-transform: uppercase;
}

.mentor-modal-body h2 {
  margin: 0;
  color: var(--navy-dark);
  font-family: var(--font-poppins);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.18;
}

.mentor-modal-line {
  width: 55px;
  height: 3px;
  margin: 16px 0 25px;
  border-radius: 50px;
  background: var(--orange);
}

.mentor-modal-body p {
  margin: 0 0 17px;
  color: #59687d;
  font-family: var(--font-jakarta);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
}

/* Last paragraph */

.mentor-modal-body p:last-of-type {
  margin-bottom: 0;
}

.mentor-modal-footer {
  display: flex;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #edf0f5;
}

.mentor-modal-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 11px 17px;
  border-radius: 10px;
  color: #ffffff;
  background: #0a66c2;
  font-family: var(--font-jakarta);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.mentor-modal-linkedin:hover {
  color: #ffffff;
  background: #084f96;
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(10, 102, 194, 0.22);
}

.mentor-modal-linkedin i:first-child {
  font-size: 14px;
}

.mentor-modal-linkedin i:last-child {
  margin-left: 2px;
  font-size: 9px;
}

.mentor-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 50;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(7, 18, 42, 0.82);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.25s ease,
    transform 0.3s ease;
}

.mentor-modal-close:hover {
  color: #ffffff;
  background: var(--orange);
  transform: rotate(90deg);
}

@media (max-width: 1199.98px) {
  .msta-mentor-modal .modal-dialog {
    max-width: 950px;

    width: calc(100% - 30px);
  }

  .msta-mentor-modal .modal-content {
    height: min(620px, calc(100vh - 40px));
  }

  .mentor-modal-body {
    padding: 35px 35px 30px;
  }

  .mentor-modal-body h2 {
    font-size: 30px;
  }

  .mentor-modal-body p {
    font-size: 13.5px;
    line-height: 1.75;
  }
}

@media (max-width: 991.98px) {
  .msta-mentor-modal .modal-dialog {
    width: calc(100% - 25px);
    max-width: 850px;
  }

  .msta-mentor-modal .modal-content {
    height: min(590px, calc(100vh - 35px));
    border-radius: 21px;
  }

  .mentor-modal-layout {
    grid-template-columns:
      minmax(260px, 38%) minmax(0, 62%);
  }

  .mentor-modal-body {
    padding: 30px 28px 26px;
  }

  .mentor-modal-body h2 {
    font-size: 27px;
  }

  .mentor-modal-body p {
    font-size: 13px;
    line-height: 1.72;
  }

  .mentor-modal-image-overlay {
    left: 22px;
    right: 18px;
    bottom: 23px;
  }

  .mentor-modal-image-overlay h3 {
    font-size: 21px;
  }

  .mentor-modal-close {
    width: 35px;
    height: 35px;
    font-size: 13px;
  }
}

@media (max-width: 767.98px) {
  .msta-mentor-modal {
    padding: 0 !important;
  }

  .msta-mentor-modal .modal-dialog {
    width: calc(100% - 20px);
    max-width: none;
    height: calc(100vh - 20px);
    min-height: calc(100vh - 20px);
    margin: 10px auto;
  }

  .msta-mentor-modal .modal-content {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 19px;
    overflow: hidden;
  }

  .mentor-modal-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .mentor-modal-left {
    width: 100%;
    height: 210px;
    min-height: 210px;
    flex: 0 0 210px;
  }

  .mentor-modal-image {
    width: 100%;
    height: 210px;
  }

  .mentor-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
  }

  .mentor-modal-image-overlay {
    left: 20px;
    right: 20px;
    bottom: 17px;
  }

  .mentor-modal-image-overlay span {
    margin-bottom: 7px;
    padding: 5px 10px;
    font-size: 8px;
  }

  .mentor-modal-image-overlay h3 {
    font-size: 20px;
  }

  .mentor-modal-right {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .mentor-modal-body {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 27px 22px 25px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mentor-modal-label {
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: 1px;
  }

  .mentor-modal-body h2 {
    font-size: 25px;
    line-height: 1.2;
  }

  .mentor-modal-line {
    width: 45px;
    height: 3px;
    margin: 13px 0 21px;
  }

  .mentor-modal-body p {
    font-size: 13px;
    line-height: 1.72;
    margin-bottom: 15px;
  }

  .mentor-modal-footer {
    margin-top: 23px;
    padding-top: 17px;
  }

  .mentor-modal-linkedin {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 11px;
  }

  .mentor-modal-close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

@media (max-width: 575.98px) {
  .msta-mentor-modal .modal-dialog {
    width: calc(100% - 12px);
    height: calc(100vh - 12px);
    min-height: calc(100vh - 12px);
    margin: 6px auto;
  }

  .msta-mentor-modal .modal-content {
    border-radius: 17px;
  }

  .mentor-modal-left {
    height: 185px;
    min-height: 185px;
    flex-basis: 185px;
  }

  .mentor-modal-image {
    height: 185px;
  }

  .mentor-modal-image-overlay {
    left: 16px;
    right: 16px;
    bottom: 14px;
  }

  .mentor-modal-image-overlay span {
    padding: 5px 9px;
    font-size: 7px;
  }

  .mentor-modal-image-overlay h3 {
    font-size: 17px;
  }

  .mentor-modal-body {
    padding: 23px 17px 21px;
  }

  .mentor-modal-label {
    font-size: 8px;
    letter-spacing: 0.9px;
  }

  .mentor-modal-body h2 {
    font-size: 22px;
  }

  .mentor-modal-line {
    width: 42px;
    margin: 12px 0 18px;
  }

  .mentor-modal-body p {
    font-size: 12.5px;
    line-height: 1.7;
  }

  .mentor-modal-footer {
    margin-top: 20px;
    padding-top: 15px;
  }

  .mentor-modal-linkedin {
    width: 100%;
    min-height: 40px;
    font-size: 11px;
  }

  .mentor-modal-close {
    width: 32px;
    height: 32px;
    top: 8px;
    right: 8px;
  }
}

@media (max-width: 360px) {
  .msta-mentor-modal .modal-dialog {
    width: calc(100% - 8px);
    height: calc(100vh - 8px);
    min-height: calc(100vh - 8px);
    margin: 4px auto;
  }

  .mentor-modal-left {
    height: 165px;
    min-height: 165px;
    flex-basis: 165px;
  }

  .mentor-modal-image {
    height: 165px;
  }

  .mentor-modal-body {
    padding: 20px 14px;
  }

  .mentor-modal-body h2 {
    font-size: 20px;
  }

  .mentor-modal-body p {
    font-size: 12px;
    line-height: 1.68;
  }

  .mentor-modal-close {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }
}

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

  .msta-mentor-modal .modal-content,
  .mentor-modal-image img,
  .mentor-modal-close,
  .mentor-modal-linkedin {
    transition: none !important;
  }
}

/* ===== our mentor end ===== */

/* ===== 4th section start ===== */

.msta-mentor-network {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
}

.msta-mentor-network::before {
  content: "";
  position: absolute;

  width: 500px;
  height: 500px;

  left: -280px;
  top: -250px;

  border-radius: 50%;

  background: rgba(30, 59, 138, 0.045);

  z-index: -2;
}

.msta-mentor-network::after {
  content: "";
  position: absolute;

  width: 430px;
  height: 430px;

  right: -240px;
  bottom: -250px;

  border-radius: 50%;

  border: 70px solid rgba(250, 117, 22, 0.045);

  z-index: -2;
}

/* Decorative circles */

.network-bg {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.network-bg-1 {
  width: 170px;
  height: 170px;

  right: 12%;
  top: 8%;

  border: 1px solid rgba(30, 59, 138, 0.08);

  animation: networkFloat 5s ease-in-out infinite;
}

.network-bg-2 {
  width: 80px;
  height: 80px;

  left: 8%;
  bottom: 20%;

  background: rgba(250, 117, 22, 0.045);

  animation: networkFloat 4s ease-in-out infinite reverse;
}

@keyframes networkFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

.network-dots {
  position: absolute;

  right: 4%;
  top: 30%;

  width: 100px;
  height: 100px;

  background-image: radial-gradient(rgba(30, 59, 138, 0.18) 1.5px,
      transparent 1.5px);

  background-size: 13px 13px;

  opacity: 0.5;

  z-index: -1;
}

.network-title {
  margin: 0 0 17px;

  color: var(--navy-dark);

  font-size: clamp(30px, 4vw, 47px);

  line-height: 1.15;

  font-weight: 700;
}

.network-title span {
  color: var(--orange);
}

.network-intro {
  max-width: 760px;

  margin: auto;

  color: #66738a;

  font-size: 15px;

  line-height: 1.75;
}

.mentor-network-area {
  position: relative;

  min-height: 610px;

  margin-top: 25px;
}

.network-line {
  position: absolute;

  background: rgba(30, 59, 138, 0.12);

  z-index: 0;
}

.network-line-horizontal {
  width: 58%;

  height: 1px;

  top: 50%;

  left: 21%;
}

.network-line-vertical {
  height: 58%;

  width: 1px;

  left: 50%;

  top: 21%;
}

/* Moving dot */

.network-line::after {
  content: "";

  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--orange);

  box-shadow: 0 0 0 5px rgba(250, 117, 22, 0.1);

  animation: networkPulse 2.5s ease-in-out infinite;
}

.network-line-horizontal::after {
  top: -3px;
  left: 35%;
}

.network-line-vertical::after {
  left: -3px;
  top: 55%;
}

@keyframes networkPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.7);
    opacity: 1;
  }
}

.network-card {
  position: absolute;

  width: 31%;

  padding: 24px 24px 23px;

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

  border: 1px solid rgba(30, 59, 138, 0.09);

  border-radius: 18px;

  box-shadow: 0 12px 35px rgba(30, 59, 138, 0.07);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;

  z-index: 2;
}

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

  border-color: rgba(250, 117, 22, 0.25);

  box-shadow: 0 22px 45px rgba(30, 59, 138, 0.12);
}

/* Card positions */

.network-card-1 {
  left: 2%;
  top: 5%;
}

.network-card-2 {
  right: 2%;
  top: 5%;
}

.network-card-3 {
  left: 2%;
  bottom: 5%;
}

.network-card-4 {
  right: 2%;
  bottom: 5%;
}

.network-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 18px;
}

.network-number {
  color: rgba(30, 59, 138, 0.18);

  font-family: var(--font-poppins);

  font-size: 28px;

  font-weight: 700;
}

.network-icon {
  width: 50px;
  height: 50px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: rgba(30, 59, 138, 0.07);

  color: var(--navy);

  font-size: 18px;

  transition: 0.35s ease;
}

.network-card:hover .network-icon {
  background: var(--orange);

  color: #fff;

  transform: rotate(-6deg);
}

.network-card h3 {
  margin: 0 0 11px;

  color: var(--navy-dark);

  font-size: 20px;

  line-height: 1.3;

  font-weight: 700;
}

.network-card p {
  margin: 0;

  color: #69768b;

  font-size: 13px;

  line-height: 1.7;
}

.network-accent {
  display: block;

  width: 35px;
  height: 3px;

  margin-top: 17px;

  border-radius: 10px;

  background: var(--orange);

  transition: 0.35s ease;
}

.network-card:hover .network-accent {
  width: 65px;
}

.network-center {
  position: absolute;

  width: 240px;
  height: 240px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  border-radius: 50%;

  background: radial-gradient(circle, #ffffff 40%, #f7faff 100%);

  border: 1px solid rgba(30, 59, 138, 0.12);

  box-shadow: 0 20px 55px rgba(30, 59, 138, 0.1);

  z-index: 3;
}

.network-center::before {
  content: "";

  position: absolute;

  inset: -12px;

  border-radius: 50%;

  border: 1px dashed rgba(250, 117, 22, 0.35);

  animation: centerRotate 15s linear infinite;
}

@keyframes centerRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.network-center-ring {
  width: 65px;
  height: 65px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  border-radius: 50%;

  background: rgba(250, 117, 22, 0.1);
}

.network-center-icon {
  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--orange);

  color: #fff;

  font-size: 19px;

  box-shadow: 0 8px 20px rgba(250, 117, 22, 0.25);
}

.network-center h3 {
  margin: 0;

  color: var(--navy-dark);

  font-size: 20px;

  font-weight: 700;
}

.network-center h3 span {
  color: var(--orange);
}

.network-center p {
  max-width: 170px;

  margin: 7px 0 0;

  color: #778399;

  font-size: 11px;

  line-height: 1.5;
}

.experience-box {
  position: relative;

  display: flex;

  gap: 22px;

  padding: 28px;

  background: linear-gradient(135deg, #f7faff, #ffffff);

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 20px;

  box-shadow: 0 12px 35px rgba(30, 59, 138, 0.055);

  overflow: hidden;
}

.experience-box::after {
  content: "";

  position: absolute;

  width: 170px;
  height: 170px;

  right: -80px;
  bottom: -90px;

  border-radius: 50%;

  background: rgba(250, 117, 22, 0.055);
}

.experience-icon {
  flex-shrink: 0;

  width: 55px;
  height: 55px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 15px;

  background: var(--navy);

  color: #fff;

  font-size: 20px;
}

.experience-label {
  display: block;

  margin-bottom: 7px;

  color: var(--orange);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.4px;
}

.experience-content h3 {
  margin: 0 0 12px;

  color: var(--navy-dark);

  font-size: 24px;

  font-weight: 700;
}

.experience-content h3 span {
  color: var(--orange);
}

.experience-content p {
  color: #68758a;

  font-size: 13.5px;

  line-height: 1.75;
}

.network-quote {
  position: relative;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 18px 23px;

  background: #fff7ef;

  border-left: 4px solid var(--orange);

  border-radius: 0 14px 14px 0;
}

.network-quote>i {
  flex-shrink: 0;

  color: var(--orange);

  font-size: 20px;
}

.network-quote p {
  color: #5c687b;

  font-size: 14px;

  line-height: 1.6;
}

.network-quote strong {
  color: var(--navy-dark);
}

@media (max-width: 991.98px) {
  .mentor-network-area {
    min-height: 700px;
  }

  .network-card {
    width: 34%;
  }

  .network-card-1,
  .network-card-2 {
    top: 2%;
  }

  .network-card-3,
  .network-card-4 {
    bottom: 2%;
  }

  .network-center {
    width: 210px;
    height: 210px;
  }

  .network-center h3 {
    font-size: 18px;
  }

  .network-card h3 {
    font-size: 18px;
  }
}

@media (max-width: 767.98px) {
  .msta-mentor-network {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .network-title {
    font-size: 30px;
  }

  .network-intro {
    font-size: 13.5px;
  }

  .mentor-network-area {
    min-height: auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;

    margin-top: 30px;
  }

  /* Remove desktop network lines */

  .network-line {
    display: none;
  }

  /* Remove absolute positioning */

  .network-card {
    position: relative;

    width: 100%;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    padding: 22px;
  }

  .network-center {
    position: relative;

    left: auto;
    top: auto;

    transform: none;

    width: 190px;
    height: 190px;

    margin: 5px auto 10px;

    order: -1;
  }

  .network-center::before {
    inset: -8px;
  }

  .network-card h3 {
    font-size: 19px;
  }

  .network-card p {
    font-size: 13px;
  }

  .network-bg-circle,
  .network-dots {
    display: none;
  }

  .experience-box {
    flex-direction: column;

    gap: 15px;

    padding: 22px;
  }

  .experience-icon {
    width: 48px;
    height: 48px;

    font-size: 17px;
  }

  .experience-content h3 {
    font-size: 21px;
  }

  .network-quote {
    align-items: flex-start;

    padding: 16px;

    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .network-title {
    font-size: 27px;
  }

  .network-label {
    font-size: 9px;
  }

  .network-card {
    padding: 20px;
    border-radius: 15px;
  }

  .network-icon {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

  .network-number {
    font-size: 25px;
  }

  .network-card h3 {
    font-size: 18px;
  }

  .network-card p {
    font-size: 12.5px;
  }

  .experience-content h3 {
    font-size: 19px;
  }

  .experience-content p {
    font-size: 12.5px;
  }
}

/* ===== 4th section End ===== */

/* ===== 5th section start ===== */
.msta-mentorship-work {
  position: relative;
  overflow: hidden;

  background: linear-gradient(135deg, #f7faff 0%, #ffffff 52%, #fffaf6 100%);

  isolation: isolate;
}

.msta-mentorship-work::before {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  top: -330px;
  left: -250px;

  border-radius: 50%;

  background: rgba(30, 59, 138, 0.045);

  z-index: -2;
}

.msta-mentorship-work::after {
  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  right: -260px;
  bottom: -280px;

  border-radius: 50%;

  border: 65px solid rgba(250, 117, 22, 0.045);

  z-index: -2;
}

.mw-bg {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.mw-bg-1 {
  width: 150px;
  height: 150px;

  right: 8%;
  top: 12%;

  border: 1px solid rgba(30, 59, 138, 0.09);

  animation: mwFloat 5s ease-in-out infinite;
}

.mw-bg-2 {
  width: 65px;
  height: 65px;

  left: 7%;
  bottom: 18%;

  background: rgba(250, 117, 22, 0.05);

  animation: mwFloat 4s ease-in-out infinite reverse;
}

@keyframes mwFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

.mw-dots {
  position: absolute;

  right: 4%;
  top: 35%;

  width: 90px;
  height: 90px;

  background-image: radial-gradient(rgba(30, 59, 138, 0.18) 1.5px,
      transparent 1.5px);

  background-size: 13px 13px;

  opacity: 0.45;

  z-index: -1;
}

.mw-title {
  margin: 0 0 16px;

  color: var(--navy-dark);

  font-size: clamp(30px, 4vw, 46px);

  line-height: 1.15;

  font-weight: 700;
}

.mw-title span {
  color: var(--orange);
}

.mw-intro {
  max-width: 760px;

  margin: auto;

  color: #66738a;

  font-size: 15px;

  line-height: 1.75;
}

.mw-journey {
  position: relative;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 65px 25px;

  margin-top: 75px;

  padding: 0 10px;
}

.mw-journey-line {
  position: absolute;

  top: 42px;

  left: 8%;

  right: 8%;

  height: 2px;

  background: linear-gradient(90deg,
      transparent,
      rgba(30, 59, 138, 0.14),
      rgba(250, 117, 22, 0.22),
      rgba(30, 59, 138, 0.14),
      transparent);

  z-index: 0;
}

.mw-step {
  position: relative;

  z-index: 2;

  padding: 27px 25px 24px;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 18px;

  box-shadow: 0 12px 35px rgba(30, 59, 138, 0.055);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.mw-step:hover {
  transform: translateY(-8px);

  border-color: rgba(250, 117, 22, 0.25);

  box-shadow: 0 22px 45px rgba(30, 59, 138, 0.11);
}

.mw-step-number {
  position: absolute;

  top: -13px;
  right: 20px;

  padding: 5px 11px;

  border-radius: 50px;

  background: var(--navy-dark);

  color: #fff;

  font-family: var(--font-poppins);

  font-size: 10px;

  font-weight: 700;

  box-shadow: 0 5px 15px rgba(30, 59, 138, 0.15);
}

.mw-step-icon {
  width: 56px;
  height: 56px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  border-radius: 15px;

  background: linear-gradient(135deg,
      rgba(30, 59, 138, 0.1),
      rgba(250, 117, 22, 0.09));

  color: var(--navy);

  font-size: 19px;

  transition: 0.35s ease;
}

.mw-step:hover .mw-step-icon {
  background: var(--orange);

  color: #fff;

  transform: rotate(-5deg) scale(1.05);
}

.mw-step-content h3 {
  margin: 0 0 10px;

  color: var(--navy-dark);

  font-size: 19px;

  line-height: 1.3;

  font-weight: 700;
}

.mw-step-content p {
  margin: 0;

  color: #68758a;

  font-size: 13px;

  line-height: 1.72;
}

.mw-step-content::after {
  content: "";

  display: block;

  width: 30px;
  height: 3px;

  margin-top: 17px;

  border-radius: 10px;

  background: var(--orange);

  transition: 0.35s ease;
}

.mw-step:hover .mw-step-content::after {
  width: 60px;
}

.mw-rhythm {
  position: relative;

  padding: 32px;

  background: #ffffff;

  border: 1px solid rgba(30, 59, 138, 0.09);

  border-radius: 22px;

  box-shadow: 0 15px 45px rgba(30, 59, 138, 0.07);

  overflow: hidden;
}

.mw-rhythm::before {
  content: "";

  position: absolute;

  width: 230px;
  height: 230px;

  right: -130px;
  top: -140px;

  border-radius: 50%;

  background: rgba(250, 117, 22, 0.045);
}

.mw-rhythm-header {
  text-align: center;

  margin-bottom: 30px;
}

.mw-rhythm-header>span {
  color: var(--orange);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

.mw-rhythm-header h3 {
  margin: 7px 0 0;

  color: var(--navy-dark);

  font-size: 25px;

  font-weight: 700;
}

.mw-rhythm-header h3 strong {
  color: var(--orange);
}

.mw-rhythm-flow {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 13px;

  flex-wrap: wrap;
}

.mw-rhythm-item {
  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 14px;

  border: 1px solid rgba(30, 59, 138, 0.09);

  border-radius: 50px;

  background: #f9fbff;

  transition: 0.3s ease;
}

.mw-rhythm-item span {
  width: 22px;
  height: 22px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(30, 59, 138, 0.08);

  color: var(--navy);

  font-size: 8px;

  font-weight: 700;
}

.mw-rhythm-item strong {
  color: var(--navy-dark);

  font-size: 11px;

  white-space: nowrap;
}

.mw-rhythm-item.active {
  background: var(--orange);

  border-color: var(--orange);
}

.mw-rhythm-item.active span {
  background: rgba(255, 255, 255, 0.2);

  color: #fff;
}

.mw-rhythm-item.active strong {
  color: #fff;
}

.mw-rhythm-flow>i {
  color: rgba(30, 59, 138, 0.35);

  font-size: 11px;
}

.mw-rhythm-text {
  max-width: 780px;

  margin: 25px auto 0;

  padding-top: 20px;

  border-top: 1px solid rgba(30, 59, 138, 0.08);

  text-align: center;

  color: #69768a;

  font-size: 13px;

  line-height: 1.7;
}

@media (max-width: 991.98px) {
  .mw-journey {
    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    margin-top: 55px;
  }

  .mw-journey-line {
    display: none;
  }

  .mw-step {
    padding: 24px 22px;
  }

  .mw-step-content h3 {
    font-size: 18px;
  }

  .mw-rhythm {
    padding: 27px;
  }
}

@media (max-width: 767.98px) {
  .msta-mentorship-work {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .mw-title {
    font-size: 30px;
  }

  .mw-intro {
    font-size: 13.5px;
  }

  .mw-journey {
    grid-template-columns: 1fr;

    gap: 18px;

    margin-top: 40px;

    padding: 0;
  }

  .mw-step {
    padding: 22px;

    border-radius: 16px;
  }

  .mw-step-icon {
    width: 50px;
    height: 50px;

    margin-bottom: 14px;

    font-size: 17px;
  }

  .mw-step-content h3 {
    font-size: 18px;
  }

  .mw-step-content p {
    font-size: 12.5px;
  }

  .mw-rhythm {
    padding: 23px 18px;

    border-radius: 18px;
  }

  .mw-rhythm-header h3 {
    font-size: 21px;
  }

  .mw-rhythm-flow {
    flex-direction: column;

    align-items: stretch;

    gap: 8px;
  }

  .mw-rhythm-flow>i {
    transform: rotate(90deg);

    align-self: center;
  }

  .mw-rhythm-item {
    justify-content: center;

    width: 100%;
  }

  .mw-rhythm-text {
    font-size: 12.5px;
  }

  .mw-dots {
    display: none;
  }
}

@media (max-width: 480px) {
  .mw-title {
    font-size: 27px;
  }

  .mw-label {
    font-size: 9px;
  }

  .mw-step {
    padding: 20px;
  }

  .mw-step-number {
    right: 15px;
  }

  .mw-step-content h3 {
    font-size: 17px;
  }

  .mw-step-content p {
    font-size: 12px;
  }

  .mw-rhythm-header h3 {
    font-size: 19px;
  }
}

/* ===== 5th section end ===== */

/* ===== 6th section start ===== */
.msta-mentor-help {
  position: relative;
  overflow: hidden;
  background: #f8fbff;
}

.msta-mentor-help::before {
  content: "";
  position: absolute;

  width: 500px;
  height: 500px;

  top: -250px;
  left: -220px;

  border-radius: 50%;

  border: 70px solid rgba(30, 59, 138, 0.035);

  pointer-events: none;
}

.msta-mentor-help::after {
  content: "";

  position: absolute;

  width: 400px;
  height: 400px;

  right: -200px;
  bottom: -220px;

  border-radius: 50%;

  border: 55px solid rgba(250, 117, 22, 0.045);

  pointer-events: none;
}

.mentor-help-bg {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.mentor-help-bg-1 {
  width: 110px;
  height: 110px;

  top: 18%;
  right: 8%;

  border: 1px solid rgba(30, 59, 138, 0.1);

  animation: mentorFloat 5s ease-in-out infinite;
}

.mentor-help-bg-2 {
  width: 70px;
  height: 70px;

  bottom: 20%;
  left: 5%;

  background: rgba(250, 117, 22, 0.05);

  animation: mentorFloat 6s ease-in-out infinite reverse;
}

@keyframes mentorFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

.msta-help-title {
  max-width: 720px;
  margin: auto;

  color: var(--navy-dark);

  font-size: clamp(30px, 4vw, 48px);

  line-height: 1.15;

  font-weight: 600;
}

.msta-help-title span {
  color: var(--orange);
}

.msta-help-title strong {
  color: var(--navy);
}

.msta-help-intro {
  max-width: 680px;

  margin: 18px auto 0;

  color: #65738a;

  font-size: 15px;

  line-height: 1.7;
}

.mentor-help-card {
  position: relative;

  overflow: hidden;

  padding: 25px;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(30, 59, 138, 0.055);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Orange corner decoration */

.mentor-help-card::after {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  right: -45px;
  top: -45px;

  border-radius: 50%;

  background: rgba(250, 117, 22, 0.07);

  transition: 0.35s ease;
}

/* Hover */

.mentor-help-card:hover {
  transform: translateY(-8px);

  border-color: rgba(250, 117, 22, 0.2);

  box-shadow: 0 18px 45px rgba(30, 59, 138, 0.11);
}

.mentor-help-card:hover::after {
  transform: scale(1.35);
}

.mentor-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 22px;
}

.mentor-number {
  color: rgba(30, 59, 138, 0.35);

  font-family: var(--font-jakarta);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1px;
}

.mentor-icon {
  position: relative;

  z-index: 2;

  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: rgba(30, 59, 138, 0.07);

  color: var(--navy);

  font-size: 18px;

  transition: 0.35s ease;
}

.mentor-help-card:hover .mentor-icon {
  background: var(--orange);

  color: #fff;

  transform: rotate(-5deg);
}

.mentor-help-card h3 {
  margin-bottom: 12px;

  color: var(--navy-dark);

  font-size: 20px;

  line-height: 1.3;

  font-weight: 600;
}

.mentor-help-card p {
  margin: 0;

  color: #68768b;

  font-size: 13.5px;

  line-height: 1.75;
}

.mentor-card-line {
  display: block;

  width: 35px;
  height: 3px;

  margin-top: 20px;

  border-radius: 10px;

  background: var(--orange);

  transition: 0.35s ease;
}

.mentor-help-card:hover .mentor-card-line {
  width: 65px;
}

.mentor-principle {
  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 22px;

  padding: 30px;

  background: #fff;

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 24px;

  box-shadow: 0 15px 45px rgba(30, 59, 138, 0.08);

  overflow: hidden;
}

/* Left orange border */

.mentor-principle::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 5px;
  height: 100%;

  background: var(--orange);
}

.principle-icon {
  flex-shrink: 0;

  width: 52px;
  height: 52px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 15px;

  background: rgba(250, 117, 22, 0.1);

  color: var(--orange);

  font-size: 18px;
}

.mentor-principle h3 {
  margin-bottom: 10px;

  color: var(--navy-dark);

  font-size: 25px;

  line-height: 1.3;
}

.mentor-principle h3 span {
  color: var(--orange);
}

.mentor-principle p {
  max-width: 800px;

  margin-bottom: 18px;

  color: #65738a;

  font-size: 14px;

  line-height: 1.7;
}

.principle-highlight {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 14px 16px;

  background: #f7faff;

  border-radius: 12px;

  color: var(--navy-dark);
}

.principle-highlight i {
  margin-top: 4px;

  color: var(--orange);
}

.principle-highlight strong {
  font-size: 14px;

  line-height: 1.6;
}

@media (max-width: 991.98px) {
  .msta-mentor-help {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .mentor-help-card {
    padding: 22px;
  }

  .mentor-help-card h3 {
    font-size: 19px;
  }

  .mentor-principle {
    padding: 25px;
  }
}

@media (max-width: 767.98px) {
  .msta-help-title {
    font-size: 31px;

    line-height: 1.2;
  }

  .msta-help-intro {
    font-size: 13px;
  }

  .mentor-help-card {
    padding: 20px;

    border-radius: 17px;
  }

  .mentor-card-top {
    margin-bottom: 18px;
  }

  .mentor-icon {
    width: 44px;
    height: 44px;

    font-size: 16px;
  }

  .mentor-help-card h3 {
    font-size: 18px;
  }

  .mentor-help-card p {
    font-size: 13px;
  }

  .mentor-principle {
    flex-direction: column;

    gap: 15px;

    padding: 22px;
  }

  .mentor-principle h3 {
    font-size: 21px;
  }

  .mentor-principle p {
    font-size: 13px;
  }

  .principle-highlight {
    padding: 12px;
  }

  .principle-highlight strong {
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .msta-help-title {
    font-size: 27px;
  }

  .msta-section-label {
    font-size: 9px;

    letter-spacing: 1px;
  }

  .mentor-help-card {
    padding: 18px;
  }

  .mentor-help-bg-1 {
    right: -40px;
  }

  .mentor-help-bg-2 {
    left: -30px;
  }
}

/* ===== 6th section end ===== */

/* ===== 7th section start ===== */

.msta-program-table-section {
  position: relative;
  overflow: hidden;
  background: #f7faff;
  isolation: isolate;
}

.msta-program-table-section::before {
  content: "";
  position: absolute;

  width: 500px;
  height: 500px;

  top: -280px;
  left: -220px;

  border-radius: 50%;

  background: rgba(30, 59, 138, 0.055);

  z-index: -2;
}

.msta-program-table-section::after {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -230px;
  bottom: -230px;

  border-radius: 50%;

  border: 65px solid rgba(250, 117, 22, 0.045);

  z-index: -2;
}

/* Decorative Circles */

.mpt-circle {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  z-index: -1;
}

.mpt-circle-1 {
  width: 130px;
  height: 130px;

  top: 28%;
  right: 8%;

  border: 1px solid rgba(30, 59, 138, 0.08);

  animation: mptRotate 15s linear infinite;
}

.mpt-circle-2 {
  width: 70px;
  height: 70px;

  bottom: 20%;
  left: 8%;

  background: rgba(250, 117, 22, 0.055);

  animation: mptFloat 4s ease-in-out infinite;
}

/* Dots */

.mpt-dots {
  position: absolute;

  top: 80px;
  right: 6%;

  width: 100px;
  height: 100px;

  background-image: radial-gradient(rgba(30, 59, 138, 0.2) 1.5px,
      transparent 1.5px);

  background-size: 13px 13px;

  opacity: 0.5;

  z-index: -1;
}

.mpt-heading {
  max-width: 850px;

  margin-left: auto;
  margin-right: auto;
}

.mpt-heading h2 {
  margin-bottom: 17px;

  color: var(--navy-dark);

  font-size: clamp(30px, 4vw, 46px);

  line-height: 1.15;
}

.mpt-heading h2 span {
  color: var(--orange);
}

.mpt-heading p {
  max-width: 720px;

  margin: auto;

  color: #65738b;

  font-size: 15px;

  line-height: 1.75;
}

.mpt-table-wrapper {
  width: 100%;

  overflow-x: auto;

  border-radius: 22px;

  box-shadow: 0 18px 55px rgba(30, 59, 138, 0.08);

  background: white;
}

.mpt-table {
  width: 100%;

  min-width: 900px;

  margin: 0;

  border-collapse: separate;

  border-spacing: 0;

  background: #ffffff;
}

.mpt-table thead th {
  position: relative;

  padding: 20px 22px;

  background: var(--navy-dark);

  color: #ffffff;

  border: none;

  font-family: var(--font-poppins);

  font-size: 13px;

  font-weight: 600;

  text-align: left;

  white-space: nowrap;
}

.mpt-table thead th:first-child {
  border-radius: 22px 0 0 0;
}

.mpt-table thead th:last-child {
  border-radius: 0 22px 0 0;
}

.table-head-number {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  margin-right: 8px;

  border-radius: 7px;

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

  color: var(--orange);

  font-size: 9px;

  font-family: var(--font-jakarta);

  font-weight: 800;
}

.mpt-table tbody td {
  padding: 25px 22px;

  border-bottom: 1px solid #edf0f5;

  color: #53627a;

  vertical-align: middle;

  background: #ffffff;

  transition: background 0.25s ease;
}

.mpt-table tbody tr:last-child td {
  border-bottom: none;
}

.mpt-table tbody tr:hover td {
  background: #fbfcff;
}

.program-name {
  display: flex;

  align-items: center;

  gap: 13px;
}

.program-icon {
  width: 48px;
  height: 48px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 13px;

  background: rgba(30, 59, 138, 0.07);

  color: var(--navy);

  font-size: 17px;

  transition: 0.3s ease;
}

.mpt-table tbody tr:hover .program-icon {
  background: var(--orange);

  color: #ffffff;

  transform: translateY(-2px);
}

.program-name strong {
  display: block;

  color: var(--navy-dark);

  font-size: 16px;

  white-space: nowrap;
}

.program-name small {
  display: block;

  margin-top: 3px;

  color: #929caf;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 1.2px;
}

.stage-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 85px;

  padding: 8px 15px;

  border-radius: 50px;

  font-family: var(--font-jakarta);

  font-size: 11px;

  font-weight: 700;
}

.stage-badge::before {
  content: "";

  width: 6px;
  height: 6px;

  margin-right: 7px;

  border-radius: 50%;
}

.explore {
  background: rgba(30, 59, 138, 0.08);

  color: var(--navy);
}

.explore::before {
  background: var(--navy);
}

.build {
  background: rgba(250, 117, 22, 0.1);

  color: var(--orange);
}

.build::before {
  background: var(--orange);
}

.master {
  background: rgba(35, 160, 110, 0.1);

  color: #17875a;
}

.master::before {
  background: #17875a;
}

.table-content {
  position: relative;

  padding-left: 14px;

  border-left: 2px solid rgba(250, 117, 22, 0.25);
}

.table-content strong {
  color: #2d3a52;

  font-size: 14px;

  line-height: 1.5;
}

.mpt-table tbody td p {
  max-width: 350px;

  margin: 0;

  color: #66738a;

  font-size: 13px;

  line-height: 1.7;
}

.mpt-bottom {
  display: flex;

  align-items: center;

  gap: 20px;

  padding: 28px 32px;

  background: #ffffff;

  border: 1px solid rgba(30, 59, 138, 0.07);

  border-radius: 20px;

  box-shadow: 0 12px 40px rgba(30, 59, 138, 0.06);
}

.mpt-bottom-icon {
  width: 55px;
  height: 55px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 15px;

  background: rgba(250, 117, 22, 0.1);

  color: var(--orange);

  font-size: 20px;

  animation: mptFloat 3s ease-in-out infinite;
}

.mpt-bottom span {
  display: block;

  margin-bottom: 5px;

  color: var(--orange);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

.mpt-bottom h3 {
  margin-bottom: 7px;

  color: var(--navy-dark);

  font-size: 25px;
}

.mpt-bottom h3 b {
  color: var(--orange);
}

.mpt-bottom p {
  max-width: 900px;

  margin: 0;

  color: #65738b;

  font-size: 13px;

  line-height: 1.7;
}

@keyframes mptFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

@keyframes mptRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 991.98px) {
  .mpt-table {
    min-width: 800px;
  }

  .mpt-table thead th,
  .mpt-table tbody td {
    padding: 18px;
  }

  .mpt-heading h2 {
    font-size: 37px;
  }

  .mpt-bottom {
    padding: 25px;
  }
}

@media (max-width: 767.98px) {
  .msta-program-table-section {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .mpt-heading {
    margin-bottom: 30px !important;
  }

  .mpt-heading h2 {
    font-size: 29px;
  }

  .mpt-heading p {
    font-size: 13px;
  }

  .mpt-table-wrapper {
    border-radius: 16px;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }

  .mpt-table {
    min-width: 760px;
  }

  .mpt-table thead th {
    padding: 15px;

    font-size: 11px;
  }

  .mpt-table tbody td {
    padding: 17px 15px;
  }

  .program-icon {
    width: 42px;
    height: 42px;

    font-size: 15px;
  }

  .program-name strong {
    font-size: 14px;
  }

  .table-content strong {
    font-size: 13px;
  }

  .mpt-table tbody td p {
    font-size: 12px;
  }

  .mpt-bottom {
    align-items: flex-start;

    padding: 20px;

    gap: 13px;
  }

  .mpt-bottom-icon {
    width: 45px;
    height: 45px;

    font-size: 16px;
  }

  .mpt-bottom h3 {
    font-size: 21px;
  }

  .mpt-bottom p {
    font-size: 12px;
  }

  .mpt-circle-1 {
    right: -60px;
  }

  .mpt-dots {
    display: none;
  }
}

@media (max-width: 480px) {
  .mpt-heading h2 {
    font-size: 26px;
  }

  .mpt-label {
    font-size: 8px;

    letter-spacing: 1px;
  }

  .mpt-table {
    min-width: 700px;
  }

  .mpt-bottom {
    flex-direction: column;
  }
}

/* ===== 7th section end ===== */

/* ===== 8th section start ===== */

.msta-project-mentorship {
  position: relative;
  overflow: hidden;

  padding: 90px 0;

  background: linear-gradient(135deg, #193278 0%, #193278 55%, #14285f 100%);
}

.msta-project-mentorship::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  top: -280px;
  right: -200px;

  border-radius: 50%;

  border: 80px solid rgba(255, 255, 255, 0.055);

  pointer-events: none;
}

.msta-project-mentorship::after {
  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  left: -200px;
  bottom: -180px;

  border-radius: 50%;

  background: rgba(250, 117, 22, 0.08);

  pointer-events: none;
}

.pm-bg-circle {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

/* Circle 1 */

.pm-bg-circle-1 {
  width: 90px;
  height: 90px;

  right: 15%;
  top: 28%;

  border: 1px solid rgba(255, 255, 255, 0.18);

  animation: pmFloat 5s ease-in-out infinite;
}

/* Circle 2 */

.pm-bg-circle-2 {
  width: 55px;
  height: 55px;

  left: 12%;
  bottom: 30%;

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

  animation: pmFloat 6s ease-in-out infinite reverse;
}

/* Floating Animation */

@keyframes pmFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

/* Main Heading */

.pm-title {
  max-width: 100%;
  margin-bottom: 8px;
  color: #ffffff;
  font-family: var(--font-poppins);
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.12;
  font-weight: 600;
}

/* Orange Highlight */

.pm-title span {
  color: #fa7516;
}

/* Intro */

.pm-intro {
  max-width: 100%;

  margin: 0;

  color: rgba(255, 255, 255, 0.76);

  font-family: var(--font-jakarta);

  font-size: 15px;

  line-height: 1.8;
}

.pm-subheading {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 15px;
}

/* Number Box */

.pm-sub-number {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 11px;

  background: #fa7516;

  color: #ffffff;

  font-family: var(--font-jakarta);

  font-size: 11px;

  font-weight: 700;

  box-shadow: 0 8px 20px rgba(250, 117, 22, 0.25);
}

/* Sub Heading */

.pm-subheading h3 {
  margin: 0;

  color: #ffffff;

  font-family: var(--font-poppins);

  font-size: 24px;

  font-weight: 600;
}

.pm-journey {
  position: relative;
}

/* Center Vertical Line */

.pm-journey::before {
  content: "";

  position: absolute;

  top: 25px;
  bottom: 25px;

  left: 50%;

  width: 2px;

  transform: translateX(-50%);

  background: linear-gradient(to bottom,
      transparent,
      rgba(255, 255, 255, 0.15),
      rgba(250, 117, 22, 0.7),
      rgba(255, 255, 255, 0.15),
      transparent);
}

.pm-step {
  position: relative;

  min-height: 155px;

  margin-bottom: 8px;
}

.pm-step-content {
  position: relative;

  padding: 25px 28px;

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

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 18px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;

  overflow: hidden;
}

/* Hover */

.pm-step-content:hover {
  transform: translateY(-5px);

  border-color: rgba(250, 117, 22, 0.45);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

/* Orange Top Line */

.pm-step-content::before {
  content: "";

  position: absolute;

  top: 0;
  left: 25px;

  width: 45px;
  height: 3px;

  border-radius: 0 0 10px 10px;

  background: #fa7516;

  transition: width 0.35s ease;
}

.pm-step-content:hover::before {
  width: 80px;
}

.pm-step-number {
  display: block;

  margin-bottom: 7px;

  color: #fa7516;

  font-family: var(--font-jakarta);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

.pm-step-content h4 {
  margin-bottom: 9px;

  color: #193278;

  font-family: var(--font-poppins);

  font-size: 20px;

  line-height: 1.3;

  font-weight: 600;
}

.pm-step-content p {
  margin: 0;

  color: #68768b;

  font-family: var(--font-jakarta);

  font-size: 13px;

  line-height: 1.7;
}

.pm-node {
  position: relative;

  z-index: 3;

  width: 56px;
  height: 56px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #193278;

  border: 3px solid #fa7516;

  color: #ffffff;

  font-size: 17px;

  box-shadow:
    0 0 0 8px rgba(25, 50, 120, 0.65),
    0 10px 25px rgba(0, 0, 0, 0.18);

  transition: 0.35s ease;
}

/* Node Hover */

.pm-step:hover .pm-node {
  background: #fa7516;

  border-color: #ffffff;

  color: #ffffff;

  transform: scale(1.08) rotate(5deg);
}

.pm-side-text {
  padding-left: 15px;
}

.pm-side-text span {
  display: block;

  margin-bottom: 5px;

  color: #ff9a52;

  font-family: var(--font-jakarta);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

.pm-side-text strong {
  color: #ffffff;

  font-family: var(--font-poppins);

  font-size: 14px;

  font-weight: 600;
}

/* Right Side */

.pm-side-right {
  text-align: right;

  padding-left: 0;
  padding-right: 15px;
}

.pm-principle {
  position: relative;

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 25px 30px;

  background: linear-gradient(135deg, #ffffff, #eef3fb);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 20px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);

  overflow: hidden;
}

/* Principle Decoration */

.pm-principle::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  right: -80px;
  top: -90px;

  border-radius: 50%;

  border: 30px solid rgba(250, 117, 22, 0.08);
}

/* Principle Icon */

.pm-principle-icon {
  position: relative;

  z-index: 2;

  flex-shrink: 0;

  width: 52px;
  height: 52px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: rgba(250, 117, 22, 0.12);

  color: #fa7516;

  font-size: 18px;
}

/* Principle Label */

.pm-principle-label {
  display: block;

  margin-bottom: 6px;

  color: #fa7516;

  font-family: var(--font-jakarta);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

/* Principle Text */

.pm-principle p {
  position: relative;

  z-index: 2;

  margin: 0;

  color: #193278;

  font-family: var(--font-jakarta);

  font-size: 16px;

  line-height: 1.6;

  font-weight: 600;
}

@media (max-width: 991.98px) {
  .msta-project-mentorship {
    padding: 70px 0;
  }

  .pm-step-content {
    padding: 22px;
  }

  .pm-side-text strong {
    font-size: 13px;
  }

  .pm-node {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 767.98px) {
  .msta-project-mentorship {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .pm-title {
    font-size: 31px;
  }

  .pm-intro {
    font-size: 13px;
  }

  .pm-subheading h3 {
    font-size: 20px;
  }

  /* Hide center line */

  .pm-journey::before {
    display: none;
  }

  .pm-step {
    min-height: auto;

    margin-bottom: 18px;
  }

  .pm-step-content {
    padding: 21px;

    border-radius: 16px;
  }

  .pm-step-content h4 {
    font-size: 18px;
  }

  .pm-step-content p {
    font-size: 13px;
  }

  .pm-principle {
    align-items: flex-start;

    padding: 21px;

    gap: 15px;
  }

  .pm-principle-icon {
    width: 45px;
    height: 45px;

    font-size: 15px;
  }

  .pm-principle p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .msta-project-mentorship {
    padding-left: 12px;
    padding-right: 12px;
  }

  .pm-title {
    font-size: 27px;
  }

  .pm-label {
    font-size: 9px;
  }

  .pm-subheading {
    gap: 10px;
  }

  .pm-sub-number {
    width: 32px;
    height: 32px;
  }

  .pm-subheading h3 {
    font-size: 18px;
  }

  .pm-step-content {
    padding: 19px;
  }

  .pm-step-content h4 {
    font-size: 17px;
  }

  .pm-step-content p {
    font-size: 12.5px;
  }

  .pm-principle {
    flex-direction: column;
  }
}

/* ===== 8th section end ===== */

/* ===== 9th section start ===== */

.msta-feedback-section {
  position: relative;
  overflow: hidden;

  padding: 25px 0;

  background: linear-gradient(135deg, #f7faff 0%, #ffffff 55%, #fff8f2 100%);
}

.msta-feedback-section::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: -210px;
  left: -180px;

  border-radius: 50%;

  background: rgba(30, 59, 138, 0.045);

  pointer-events: none;
}

.msta-feedback-section::after {
  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  right: -230px;
  bottom: -220px;

  border-radius: 50%;

  border: 65px solid rgba(250, 117, 22, 0.045);

  pointer-events: none;
}

.msta-feedback-section .container {
  position: relative;
  z-index: 2;
}

.msta-section-label::before {
  content: "";

  width: 22px;
  height: 2px;

  border-radius: 10px;

  background: var(--orange);
}

.msta-feedback-title {
  max-width: 650px;

  margin: 0;

  color: var(--navy-dark);

  font-family: var(--font-poppins);

  font-size: clamp(30px, 4vw, 48px);

  font-weight: 700;

  line-height: 1.15;
}

.msta-feedback-title span {
  color: var(--orange);
}

.msta-feedback-intro {
  margin: 20px 0 0;

  color: #5c6980;

  font-size: 15px;

  line-height: 1.8;
}

.msta-feedback-card {
  position: relative;

  height: 100%;

  padding: 25px 22px 23px;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 17px;

  overflow: hidden;

  box-shadow: 0 9px 28px rgba(30, 59, 138, 0.055);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* Top line */

.msta-feedback-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background: linear-gradient(90deg, var(--orange), var(--navy));

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.35s ease;
}

/* Decorative circle */

.msta-feedback-card::after {
  content: "";

  position: absolute;

  width: 80px;
  height: 80px;

  right: -35px;
  bottom: -35px;

  border-radius: 50%;

  border: 15px solid rgba(30, 59, 138, 0.035);

  transition: transform 0.4s ease;
}

.msta-feedback-card:hover {
  transform: translateY(-6px);

  border-color: rgba(250, 117, 22, 0.18);

  box-shadow: 0 17px 38px rgba(30, 59, 138, 0.1);
}

.msta-feedback-card:hover::before {
  transform: scaleX(1);
}

.msta-feedback-card:hover::after {
  transform: scale(1.35);
}

.msta-feedback-number {
  position: absolute;

  top: 14px;
  right: 18px;

  color: rgba(30, 59, 138, 0.12);

  font-family: var(--font-poppins);

  font-size: 25px;

  font-weight: 700;
}

.msta-feedback-icon {
  width: 46px;
  height: 46px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 17px;

  border-radius: 13px;

  background: rgba(250, 117, 22, 0.1);

  color: var(--orange);

  font-size: 16px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.msta-feedback-card:hover .msta-feedback-icon {
  background: var(--orange);

  color: #ffffff;

  transform: rotate(-5deg);
}

.msta-feedback-card h3 {
  position: relative;

  margin: 0 0 9px;

  color: var(--navy-dark);

  font-size: 17px;

  font-weight: 700;

  line-height: 1.35;
}

.msta-feedback-card p {
  position: relative;

  z-index: 1;

  margin: 0;

  color: #667389;

  font-size: 13.5px;

  line-height: 1.7;
}

.msta-career-section {
  position: relative;

  margin-top: 10px;

  padding-top: 5px;

  border-top: 1px solid rgba(30, 59, 138, 0.08);
}

.msta-career-title {
  max-width: 700px;

  margin: 0;

  color: var(--navy-dark);

  font-size: clamp(28px, 3.5vw, 42px);

  font-weight: 700;

  line-height: 1.15;
}

.msta-career-title span {
  color: var(--orange);
}

.msta-career-intro {
  margin: 15px 0 0;

  color: #5c6980;

  font-size: 14px;

  line-height: 1.75;
}

.msta-career-description {
  max-width: 950px;

  margin: 5px 0 18px;

  padding: 18px 22px;

  color: #526078;

  font-size: 14px;

  line-height: 1.75;

  background: #ffffff;

  border-left: 3px solid var(--orange);

  border-radius: 0 12px 12px 0;

  box-shadow: 0 7px 22px rgba(30, 59, 138, 0.045);
}

.msta-career-card {
  position: relative;

  height: 100%;

  padding: 27px 21px 23px;

  background: #ffffff;

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 18px;

  overflow: hidden;

  box-shadow: 0 9px 28px rgba(30, 59, 138, 0.055);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Top orange line */

.msta-career-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: linear-gradient(90deg, var(--orange), var(--navy));

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.35s ease;
}

/* Background circle */

.msta-career-card::after {
  content: "";

  position: absolute;

  width: 100px;
  height: 100px;

  right: -45px;
  bottom: -50px;

  border-radius: 50%;

  background: rgba(30, 59, 138, 0.035);

  transition: transform 0.4s ease;
}

.msta-career-card:hover {
  transform: translateY(-7px);

  border-color: rgba(30, 59, 138, 0.14);

  box-shadow: 0 18px 40px rgba(30, 59, 138, 0.11);
}

.msta-career-card:hover::before {
  transform: scaleX(1);
}

.msta-career-card:hover::after {
  transform: scale(1.4);
}

.msta-career-number {
  position: absolute;

  top: 14px;
  right: 17px;

  color: rgba(30, 59, 138, 0.12);

  font-family: var(--font-poppins);

  font-size: 24px;

  font-weight: 700;
}

.msta-career-icon {
  width: 47px;
  height: 47px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 17px;

  border-radius: 13px;

  background: rgba(30, 59, 138, 0.075);

  color: var(--navy);

  font-size: 17px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.msta-career-card:hover .msta-career-icon {
  background: var(--orange);

  color: #ffffff;

  transform: rotate(-5deg);
}

.msta-career-card h3 {
  position: relative;

  z-index: 1;

  margin: 0 0 10px;

  color: var(--navy-dark);

  font-size: 17px;

  font-weight: 700;

  line-height: 1.4;
}

.msta-career-card p {
  position: relative;

  z-index: 1;

  margin: 0;

  color: #667389;

  font-size: 13px;

  line-height: 1.7;
}

@media (max-width: 991.98px) {
  .msta-feedback-section {
    padding: 65px 0;
  }

  .msta-feedback-title {
    font-size: 39px;
  }

  .msta-career-section {
    padding-top: 55px;
  }

  .msta-career-title {
    font-size: 34px;
  }
}

@media (max-width: 767.98px) {
  .msta-feedback-section {
    padding: 55px 0;
  }

  .msta-feedback-title {
    font-size: 31px;

    line-height: 1.18;
  }

  .msta-feedback-intro {
    margin-top: 0;

    font-size: 13.5px;

    line-height: 1.7;
  }

  .msta-feedback-card {
    padding: 23px 19px 21px;
  }

  .msta-feedback-card h3 {
    font-size: 16px;
  }

  .msta-feedback-card p {
    font-size: 13px;
  }

  .msta-career-section {
    margin-top: 10px;

    padding-top: 50px;
  }

  .msta-career-title {
    font-size: 28px;
  }

  .msta-career-intro {
    font-size: 13.5px;

    line-height: 1.7;
  }

  .msta-career-description {
    padding: 16px 18px;

    font-size: 13px;
  }

  .msta-career-card {
    padding: 23px 19px;
  }

  .msta-career-card h3 {
    font-size: 16px;
  }

  .msta-career-card p {
    font-size: 12.8px;
  }
}

@media (max-width: 480px) {
  .msta-feedback-section {
    padding: 45px 0;
  }

  .msta-section-label {
    font-size: 9.5px;

    letter-spacing: 1.4px;
  }

  .msta-feedback-title {
    font-size: 27px;
  }

  .msta-feedback-intro {
    font-size: 13px;
  }

  .msta-feedback-card {
    padding: 21px 17px;
  }

  .msta-feedback-icon {
    width: 42px;
    height: 42px;

    font-size: 14px;
  }

  .msta-feedback-number {
    font-size: 21px;
  }

  .msta-career-title {
    font-size: 25px;
  }

  .msta-career-description {
    font-size: 12.5px;
  }

  .msta-career-card {
    padding: 21px 17px;
  }

  .msta-career-icon {
    width: 42px;
    height: 42px;

    font-size: 15px;
  }

  .msta-career-number {
    font-size: 21px;
  }

  .msta-career-card h3 {
    font-size: 15.5px;
  }

  .msta-career-card p {
    font-size: 12.3px;
  }

  .msta-feedback-section::before {
    width: 280px;
    height: 280px;

    top: -140px;
    left: -140px;
  }

  .msta-feedback-section::after {
    width: 300px;
    height: 300px;

    right: -160px;
    bottom: -160px;

    border-width: 45px;
  }
}

/* ===== 9th section end ===== */

/* ===== 10th section start ===== */
.msta-mentor-practice {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 55%, #fff8f2 100%);
}

.msta-mentor-practice::before {
  content: "";

  position: absolute;

  width: 320px;
  height: 320px;

  top: -170px;
  left: -140px;

  border-radius: 50%;

  background: rgba(30, 59, 138, 0.045);

  pointer-events: none;
}

.msta-mentor-practice::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  right: -150px;
  bottom: -160px;

  border-radius: 50%;

  border: 45px solid rgba(250, 117, 22, 0.045);

  pointer-events: none;
}

.msta-practice-title {
  margin: 0;

  color: var(--navy-dark);

  font-size: clamp(28px, 3.5vw, 42px);

  line-height: 1.15;

  font-weight: 700;
}

.msta-practice-title span {
  color: var(--orange);
}

.msta-practice-card {
  position: relative;

  padding: 28px 22px 25px;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 18px;

  overflow: hidden;

  box-shadow: 0 8px 25px rgba(30, 59, 138, 0.055);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Top Gradient */

.msta-practice-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: linear-gradient(90deg, var(--orange), var(--navy));

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.35s ease;
}

/* Background Circle */

.msta-practice-card::after {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  right: -45px;
  bottom: -45px;

  border-radius: 50%;

  border: 14px solid rgba(30, 59, 138, 0.035);

  transition: transform 0.4s ease;
}

.msta-practice-card:hover {
  transform: translateY(-7px);

  border-color: rgba(250, 117, 22, 0.17);

  box-shadow: 0 18px 40px rgba(30, 59, 138, 0.11);
}

.msta-practice-card:hover::before {
  transform: scaleX(1);
}

.msta-practice-card:hover::after {
  transform: scale(1.35);
}

.practice-number {
  position: absolute;

  top: 13px;
  right: 17px;

  color: rgba(30, 59, 138, 0.11);

  font-family: var(--font-poppins);

  font-size: 23px;

  font-weight: 700;
}

.practice-icon {
  position: relative;

  z-index: 2;

  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  border-radius: 13px;

  background: rgba(250, 117, 22, 0.1);

  color: var(--orange);

  font-size: 17px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.msta-practice-card:hover .practice-icon {
  background: var(--orange);

  color: #ffffff;

  transform: rotate(-6deg);
}

.msta-practice-card h3 {
  position: relative;

  z-index: 2;

  margin: 0 0 10px;

  color: var(--navy-dark);

  font-size: 17px;

  font-weight: 700;

  line-height: 1.35;
}

.msta-practice-card p {
  position: relative;

  z-index: 2;

  margin: 0;

  color: #667389;

  font-size: 13.5px;

  line-height: 1.7;
}

.practice-line {
  position: relative;

  width: 35px;
  height: 3px;

  margin-top: 20px;

  border-radius: 20px;

  background: var(--orange);

  transition: width 0.35s ease;
}

.msta-practice-card:hover .practice-line {
  width: 65px;
}

@media (max-width: 991.98px) {
  .msta-mentor-practice {
    padding: 65px 0 !important;
  }
}

@media (max-width: 767.98px) {
  .msta-mentor-practice {
    padding: 55px 0 !important;
  }

  .msta-practice-title {
    font-size: 29px;
  }

  .msta-practice-card {
    padding: 24px 20px 22px;
  }

  .msta-practice-card h3 {
    font-size: 16px;
  }

  .msta-practice-card p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .msta-practice-title {
    font-size: 26px;
  }

  .msta-section-label {
    font-size: 9px;

    letter-spacing: 1.4px;
  }

  .msta-practice-card {
    padding: 22px 18px;
  }

  .practice-icon {
    width: 43px;
    height: 43px;

    font-size: 15px;
  }

  .practice-number {
    font-size: 20px;
  }
}

/* ===== 10th section end===== */

/* ===== final CTA section start ===== */

.msta-final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 55%, #fff8f2 100%);
  border-top: 1px solid rgba(30, 59, 138, 0.06);
}

.msta-final-cta::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -220px;
  left: -180px;
  border-radius: 50%;
  border: 70px solid rgba(30, 59, 138, 0.035);
  pointer-events: none;
}

.msta-final-cta::after {
  content: "";
  position: absolute;

  width: 380px;
  height: 380px;

  right: -190px;
  bottom: -210px;

  border-radius: 50%;

  border: 65px solid rgba(250, 117, 22, 0.045);

  pointer-events: none;
}

.cta-orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.cta-orb-1 {
  width: 90px;
  height: 90px;

  top: 18%;
  left: 7%;

  background: rgba(30, 59, 138, 0.035);

  animation: ctaFloat 5s ease-in-out infinite;
}

.cta-orb-2 {
  width: 55px;
  height: 55px;

  right: 12%;
  top: 25%;

  border: 8px solid rgba(250, 117, 22, 0.08);

  animation: ctaFloat 4s ease-in-out infinite reverse;
}

@keyframes ctaFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

.cta-grid {
  position: absolute;

  right: 6%;
  top: 12%;

  width: 110px;
  height: 110px;

  background-image: radial-gradient(rgba(30, 59, 138, 0.16) 1.3px,
      transparent 1.3px);

  background-size: 13px 13px;

  opacity: 0.45;

  pointer-events: none;
}

.cta-label {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 16px;

  padding: 7px 15px;

  border-radius: 50px;

  background: rgba(250, 117, 22, 0.08);

  border: 1px solid rgba(250, 117, 22, 0.15);

  color: var(--orange);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.8px;
}

.cta-title {
  margin: 0 auto 18px;

  max-width: 850px;

  color: var(--navy-dark);

  font-size: clamp(26px, 3vw, 40px);

  line-height: 1.12;

  font-weight: 700;
}

.cta-title span {
  color: var(--orange);
}

.cta-description {
  max-width: 720px;

  margin: 0 auto;

  color: #59677d;

  font-size: 16px;

  line-height: 1.75;
}

.cta-highlight {
  display: flex;

  align-items: center;

  gap: 15px;

  max-width: 650px;

  margin-top: 28px;

  padding: 17px 22px;

  text-align: left;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-left: 4px solid var(--orange);

  border-radius: 14px;

  box-shadow: 0 15px 40px rgba(30, 59, 138, 0.07);

  backdrop-filter: blur(10px);
}

.cta-highlight-icon {
  flex-shrink: 0;

  width: 44px;
  height: 44px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: rgba(250, 117, 22, 0.1);

  color: var(--orange);

  font-size: 17px;
}

.cta-highlight p {
  margin: 0;

  color: var(--navy-dark);

  font-size: 15px;

  line-height: 1.6;

  font-weight: 700;
}

.cta-text {
  max-width: 700px;

  margin: 20px auto 0;

  color: #68758a;

  font-size: 14px;

  line-height: 1.75;
}

.cta-btn-primary {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 12px 23px;

  border: 2px solid var(--orange);

  border-radius: 9px;

  background: var(--orange);

  color: #fff;

  font-size: 14px;

  font-weight: 600;

  transition: all 0.3s ease;
}

.cta-btn-primary:hover {
  background: var(--navy);

  border-color: var(--navy);

  color: #fff;

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(30, 59, 138, 0.18);
}

.cta-btn-outline {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 12px 23px;

  border: 2px solid var(--navy);

  border-radius: 9px;

  background: #fff;

  color: var(--navy);

  font-size: 14px;

  font-weight: 600;

  transition: all 0.3s ease;
}

.cta-btn-outline:hover {
  background: var(--navy);

  border-color: var(--navy);

  color: #fff;

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(30, 59, 138, 0.15);
}

.cta-bottom-card {
  position: relative;

  padding: 25px 28px;

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

  border: 1px solid rgba(30, 59, 138, 0.08);

  border-radius: 20px;

  box-shadow: 0 18px 50px rgba(30, 59, 138, 0.08);

  backdrop-filter: blur(12px);

  overflow: hidden;
}

/* Orange top line */

.cta-bottom-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background: linear-gradient(90deg, var(--orange), var(--navy));
}

.cta-bottom-content {
  display: flex;

  align-items: center;

  gap: 17px;
}

.cta-bottom-icon {
  flex-shrink: 0;

  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: rgba(30, 59, 138, 0.08);

  color: var(--navy);

  font-size: 18px;
}

.cta-bottom-content span {
  display: block;

  margin-bottom: 4px;

  color: var(--orange);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

.cta-bottom-content h3 {
  margin: 0;

  color: var(--navy-dark);

  font-size: 19px;

  line-height: 1.45;

  font-weight: 700;
}

.cta-links {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 22px;

  padding-top: 18px;

  border-top: 1px solid rgba(30, 59, 138, 0.08);
}

.cta-links a {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: var(--navy);

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;

  transition: all 0.25s ease;
}

.cta-links a i {
  font-size: 10px;

  color: var(--orange);

  transition: transform 0.25s ease;
}

.cta-links a:hover {
  color: var(--orange);
}

.cta-links a:hover i {
  transform: translate(2px, -2px);
}

.cta-links>span {
  width: 1px;

  height: 15px;

  background: rgba(30, 59, 138, 0.15);
}

@media (max-width: 991.98px) {
  .msta-final-cta {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .cta-grid {
    right: 3%;
  }

  .cta-bottom-card {
    padding: 23px;
  }
}

@media (max-width: 767.98px) {
  .msta-final-cta {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .cta-title {
    font-size: 34px;
  }

  .cta-description {
    font-size: 14px;
    line-height: 1.7;
  }

  .cta-highlight {
    padding: 15px;
    gap: 11px;
  }

  .cta-highlight-icon {
    width: 40px;
    height: 40px;
  }

  .cta-highlight p {
    font-size: 13px;
  }

  .cta-text {
    font-size: 13px;
  }

  .cta-btn-primary,
  .cta-btn-outline {
    width: 100%;
    padding: 11px 18px;
  }

  .cta-bottom-content {
    align-items: flex-start;
  }

  .cta-bottom-content h3 {
    font-size: 16px;
  }

  .cta-bottom-icon {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }

  .cta-links {
    flex-direction: column;
    gap: 11px;
  }

  .cta-links>span {
    display: none;
  }

  .cta-grid {
    display: none;
  }

  .cta-orb-1 {
    width: 60px;
    height: 60px;
    left: -20px;
  }

  .cta-orb-2 {
    width: 40px;
    height: 40px;
    right: 3%;
  }
}

@media (max-width: 480px) {
  .cta-title {
    font-size: 29px;
  }

  .cta-label {
    font-size: 9px;
    letter-spacing: 1.4px;
  }

  .cta-highlight {
    text-align: left;
  }

  .cta-bottom-card {
    padding: 20px 16px;
  }

  .cta-bottom-content h3 {
    font-size: 15px;
  }
}

/* ===== final CTA section end ===== */

/* ========= expert membership page end ======== */

/* ======== MSTA skills passport page start ======== */

/* ===== 1st MSTA skills passport page section start ===== */

.msta-focus-banner {
  position: relative;
  height: 250px;
  min-height: 250px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 85% 50%, rgba(250, 117, 22, 0.14), transparent 30%), linear-gradient(135deg, #0b1635 0%, #12265f 55%, #1e3b8a 100%);
}

.msta-focus-content {
  position: relative;
  z-index: 5;
  padding-left: 10px;
}

/* Small Label */
.msta-focus-label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.msta-focus-label::before {
  content: "";
  width: 28px;
  height: 2px;
  margin-right: 10px;
  border-radius: 10px;
  background: #ffffff;
}

/* Heading */
.msta-focus-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 3vw, 43px);
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
}

/* Description */
.msta-focus-text {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  line-height: 1.6;
}

.msta-focus-action {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

/* Button */
.msta-focus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 175px;
  padding: 13px 20px;
  border-radius: 10px;
  background: #ffffff;
  color: #064b8e;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 35, 75, 0.18);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.msta-focus-btn i {
  transition: transform 0.3s ease;
}

.msta-focus-btn:hover {
  color: #064b8e;
  background: #f4f9ff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 35, 75, 0.25);
}

.msta-focus-btn:hover i {
  transform: translateX(5px);
}

.msta-focus-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.msta-focus-orb-1 {
  width: 220px;
  height: 220px;
  right: 14%;
  top: -145px;
  border: 35px solid rgba(255, 255, 255, 0.06);
  animation: mstaFocusFloat 6s ease-in-out infinite;
}

.msta-focus-orb-2 {
  width: 120px;
  height: 120px;
  left: 32%;
  bottom: -85px;
  background: rgba(255, 255, 255, 0.045);
  animation: mstaFocusFloat 5s ease-in-out infinite reverse;
}

@keyframes mstaFocusFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

@media (max-width: 991.98px) {
  .msta-focus-title {
    font-size: 31px;
  }

  .msta-focus-text {
    font-size: 14px;
  }

  .msta-focus-action {
    gap: 9px;
  }

  .msta-focus-btn {
    min-width: 155px;
    padding: 11px 15px;
    font-size: 12px;
  }
}

@media (max-width: 767.98px) {
  .msta-focus-banner {
    height: 250px;
    min-height: 250px;
  }

  .msta-focus-content {
    padding-left: 0;
    text-align: center;
  }

  .msta-focus-label {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .msta-focus-label::before {
    width: 20px;
  }

  .msta-focus-title {
    font-size: 27px;
    white-space: normal;
  }

  .msta-focus-text {
    margin-top: 5px;
    font-size: 13px;
  }

  .msta-focus-action {
    justify-content: center;
    margin-top: 14px;
  }

  .msta-focus-btn {
    min-width: 165px;
    padding: 11px 17px;
  }

  .msta-focus-orb-1 {
    right: -60px;
  }

  .msta-focus-orb-2 {
    left: -50px;
  }
}

@media (max-width: 480px) {
  .msta-focus-title {
    font-size: 24px;
  }

  .msta-focus-text {
    font-size: 12px;
  }

  .msta-focus-btn {
    min-width: 155px;
    font-size: 11px;
  }

  .msta-focus-line {
    opacity: 0.5;
  }
}

/* ===== 1st MSTA skills passport page section end ===== */

/* ===== 2nd MSTA skills passport page section start ===== */

.msta-assessment-section {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 55%, #f5f9ff 100%);
}

.msta-assessment-section::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  top: -260px;
  right: -170px;
  border-radius: 50%;
  border: 75px solid rgba(30, 59, 138, 0.045);
  pointer-events: none;
}

.msta-assessment-section::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  left: -200px;
  bottom: 80px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.035);
  pointer-events: none;
}

/* Background Circle */

.msta-assessment-bg-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.msta-assessment-bg-circle-1 {
  width: 100px;
  height: 100px;
  right: 9%;
  top: 25%;
  border: 1px solid rgba(30, 59, 138, 0.09);
  animation: mstaAssessmentFloat 6s ease-in-out infinite;
}

.msta-assessment-bg-circle-2 {
  width: 70px;
  height: 70px;
  left: 8%;
  bottom: 18%;
  border: 12px solid rgba(250, 117, 22, 0.05);
  animation: mstaAssessmentFloat 5s ease-in-out infinite reverse;
}

@keyframes mstaAssessmentFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

.msta-assessment-dots {
  position: absolute;
  right: 5%;
  top: 42%;
  width: 95px;
  height: 95px;
  background-image: radial-gradient(rgba(30, 59, 138, 0.2) 1.5px,
      transparent 1.5px);

  background-size: 13px 13px;
  opacity: 0.45;
  pointer-events: none;
}

.msta-assessment-label::before,
.msta-assessment-section-label::before,
.msta-assessment-capability-label::before {
  content: "";
  width: 25px;
  height: 2px;
  border-radius: 10px;
  background: var(--orange);
}

.msta-assessment-title {
  max-width: 800px;
  margin: 0 0 22px;
  color: var(--navy-dark);
  font-size: clamp(35px, 4vw, 55px);
  line-height: 1.1;
  font-weight: 700;
}

.msta-assessment-title span {
  color: var(--orange);
}

.msta-assessment-intro {
  max-width: 800px;
  margin-bottom: 12px;
  color: #59677c;
  font-size: 15px;
  line-height: 1.75;
}

.msta-assessment-hero-visual {
  position: relative;
  width: 230px;
  height: 230px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msta-assessment-visual-ring {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 2px dashed rgba(30, 59, 138, 0.18);
  animation: mstaAssessmentRotate 16s linear infinite;
}

@keyframes mstaAssessmentRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.msta-assessment-visual-icon {
  position: relative;
  z-index: 2;
  width: 105px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  background: linear-gradient(145deg, var(--navy), #2c5bc0);
  color: #ffffff;
  font-size: 42px;
  box-shadow: 0 22px 45px rgba(30, 59, 138, 0.2);
}

.msta-assessment-floating-icon {
  position: absolute;
  z-index: 4;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #ffffff;
  color: var(--orange);
  box-shadow: 0 10px 25px rgba(30, 59, 138, 0.13);
  font-size: 14px;
  animation: mstaAssessmentFloat 4s ease-in-out infinite;
}

.assessment-icon-1 {
  top: 15px;
  right: 18px;
}

.assessment-icon-2 {
  left: 7px;
  bottom: 38px;
  color: var(--navy);
  animation-delay: 1s;
}

.assessment-icon-3 {
  right: 7px;
  bottom: 25px;
  animation-delay: 2s;
}

.msta-assessment-heading {
  margin: 0 0 10px;
  color: var(--navy-dark);
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.2;
}

.msta-assessment-heading span {
  color: var(--orange);
}

.msta-assessment-subtext {
  max-width: 650px;
  margin: 0;
  color: #68768a;
  font-size: 14px;
  line-height: 1.7;
}

.msta-assessment-card {
  position: relative;
  height: 100%;
  min-height: 275px;
  padding: 27px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(30, 59, 138, 0.06);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.msta-assessment-card:hover {
  transform: translateY(-8px);
  border-color: rgba(250, 117, 22, 0.22);
  box-shadow: 0 22px 45px rgba(30, 59, 138, 0.11);
}

/* Active Card */
.msta-assessment-card-active {
  background: linear-gradient(145deg, #f7faff, #ffffff);
  border-color: rgba(30, 59, 138, 0.14);
}

/* Card Top */
.msta-assessment-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.msta-assessment-number {
  color: #c4ccda;
  font-family: var(--font-poppins);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Card Icon */
.msta-assessment-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: rgba(30, 59, 138, 0.07);
  color: var(--navy);
  font-size: 19px;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.msta-assessment-card:hover .msta-assessment-card-icon {
  transform: rotate(-5deg) scale(1.05);
  background: rgba(250, 117, 22, 0.1);
  color: var(--orange);
}

/* Card Heading */

.msta-assessment-card h3 {
  margin-bottom: 13px;
  color: var(--navy-dark);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
}

.msta-assessment-card h3 span {
  color: var(--orange);
}

/* Card Paragraph */
.msta-assessment-card p {
  margin: 0;
  color: #66758a;
  font-size: 13.5px;
  line-height: 1.7;
}

/* Bottom Line */
.msta-assessment-card-line {
  position: absolute;
  left: 27px;
  bottom: 0;
  width: 45px;
  height: 3px;
  border-radius: 10px 10px 0 0;
  background: var(--orange);
  transition: width 0.35s ease;
}

.msta-assessment-card:hover .msta-assessment-card-line {
  width: calc(100% - 54px);
}

.msta-assessment-capability {
  position: relative;
  padding: 38px 40px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(125deg, #f1f6ff 0%, #ffffff 70%);
  border: 1px solid rgba(30, 59, 138, 0.08);
  box-shadow: 0 15px 40px rgba(30, 59, 138, 0.06);
}

.msta-assessment-capability::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -70px;
  top: -80px;
  border-radius: 50%;
  border: 35px solid rgba(250, 117, 22, 0.05);
}

.msta-assessment-capability-title {
  max-width: 650px;
  margin: 0 0 12px;
  color: var(--navy-dark);
  font-size: clamp(25px, 3vw, 37px);
  line-height: 1.2;
}

.msta-assessment-capability-title span {
  color: var(--orange);
}

.msta-assessment-capability p {
  max-width: 650px;
  margin: 0;
  color: #647287;
  font-size: 14px;
  line-height: 1.75;
}

.msta-assessment-flow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.msta-assessment-flow-item {
  min-width: 67px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.msta-assessment-flow-item span {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

.msta-assessment-flow-item strong {
  color: var(--navy-dark);
  font-size: 11px;
}

.msta-assessment-flow>i {
  color: var(--orange);
  font-size: 11px;
}

.msta-assessment-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 30px 35px;
  border-radius: 22px;
  background: linear-gradient(125deg, #193278 0%, #1e4ba0 55%, #286bc1 100%);
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(30, 59, 138, 0.15);
}

.msta-assessment-cta::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  top: -150px;
  border-radius: 50%;
  border: 45px solid rgba(255, 255, 255, 0.06);
}

.msta-assessment-cta h3 {
  position: relative;
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 23px;
}

.msta-assessment-cta p {
  position: relative;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

/* CTA Buttons */
.msta-assessment-cta-buttons {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.msta-assessment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.msta-assessment-btn:hover {
  transform: translateY(-3px);
}

.msta-assessment-btn-primary {
  background: #ffffff;
  color: var(--navy);
}

.msta-assessment-btn-primary:hover {
  color: var(--navy);
  background: #f3f7ff;
}

.msta-assessment-btn-outline {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

.msta-assessment-btn-outline:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 991.98px) {
  .msta-assessment-section {
    padding: 70px 0;
  }

  .msta-assessment-hero-visual {
    width: 190px;
    height: 190px;
  }

  .msta-assessment-visual-ring {
    width: 160px;
    height: 160px;
  }

  .msta-assessment-visual-icon {
    width: 85px;
    height: 85px;
    font-size: 32px;
  }

  .msta-assessment-capability {
    padding: 30px;
  }

  .msta-assessment-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .msta-assessment-section {
    padding: 55px 0;
  }

  .msta-assessment-title {
    font-size: 31px;
  }

  .msta-assessment-intro {
    font-size: 13px;
  }

  .msta-assessment-hero-visual {
    width: 170px;
    height: 170px;
    margin-top: 5px;
  }

  .msta-assessment-visual-ring {
    width: 145px;
    height: 145px;
  }

  .msta-assessment-visual-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    font-size: 27px;
  }

  .msta-assessment-floating-icon {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .msta-assessment-card {
    min-height: auto;
    padding: 23px;
  }

  .msta-assessment-capability {
    padding: 25px 22px;
  }

  .msta-assessment-flow {
    margin-top: 10px;
  }

  .msta-assessment-cta {
    padding: 27px 22px;
  }

  .msta-assessment-cta h3 {
    font-size: 20px;
  }

  .msta-assessment-cta-buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .msta-assessment-btn {
    width: 100%;
  }

  .msta-assessment-dots {
    display: none;
  }
}

@media (max-width: 480px) {
  .msta-assessment-title {
    font-size: 27px;
  }

  .msta-assessment-heading {
    font-size: 26px;
  }

  .msta-assessment-card h3 {
    font-size: 19px;
  }

  .msta-assessment-card p {
    font-size: 13px;
  }

  .msta-assessment-flow {
    gap: 6px;
  }

  .msta-assessment-flow-item {
    min-width: 58px;
  }

  .msta-assessment-flow>i {
    font-size: 8px;
  }
}

/* ===== 2nd MSTA skills passport page section end ===== */

/* ===== 3nd MSTA skills passport page section start ===== */

.msta-skills-passport {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f7faff 0%, #ffffff 48%, #f4f8ff 100%);
}

.msta-skills-passport::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -220px;
  left: -180px;
  border-radius: 50%;
  background: rgba(30, 59, 138, 0.06);
  pointer-events: none;
}

.msta-skills-passport::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -250px;
  bottom: -280px;
  border-radius: 50%;
  border: 80px solid rgba(250, 117, 22, 0.035);
  pointer-events: none;
}

.msp-bg-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.msp-bg-circle-1 {
  width: 180px;
  height: 180px;
  right: 8%;
  top: 15%;
  border: 1px solid rgba(30, 59, 138, 0.08);
}

.msp-bg-circle-2 {
  width: 100px;
  height: 100px;
  left: 7%;
  bottom: 18%;
  background: rgba(250, 117, 22, 0.04);
}

.msp-bg-grid {
  position: absolute;
  right: 4%;
  top: 8%;
  width: 150px;
  height: 150px;
  background-image:
    linear-gradient(rgba(30, 59, 138, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 59, 138, 0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom left, black, transparent);
  opacity: 0.6;
}

.msp-title {
  margin: 0 auto 18px;
  max-width: 1000px;
  color: var(--navy-dark);
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.12;
  font-weight: 700;
}

.msp-title span {
  color: var(--orange);
}

.msp-intro {
  max-width: 760px;
  margin: auto;
  color: #59677e;
  font-size: 15px;
  line-height: 1.75;
}

.msp-passport-area {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msp-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.msp-orbit-1 {
  width: 650px;
  height: 650px;
  border: 1px dashed rgba(30, 59, 138, 0.13);
  animation: mspOrbit 25s linear infinite;
}

.msp-orbit-2 {
  width: 500px;
  height: 500px;
  border: 1px solid rgba(250, 117, 22, 0.08);
  animation: mspOrbitReverse 18s linear infinite;
}

@keyframes mspOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes mspOrbitReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.msp-passport-card {
  position: relative;
  z-index: 5;
  width: min(100%, 510px);
  padding: 25px;
  border-radius: 25px;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
  border: 1px solid rgba(30, 59, 138, 0.1);
  box-shadow: 0 35px 80px rgba(30, 59, 138, 0.16);
  transition: 0.4s ease;
}

.msp-passport-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 45px 90px rgba(30, 59, 138, 0.2);
}

.msp-passport-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(30, 59, 138, 0.08);
}

.msp-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.msp-brand-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--navy);
  color: white;
  font-size: 16px;
}

.msp-brand span,
.msp-brand strong {
  display: block;
}

.msp-brand span {
  color: #7a879b;
  font-size: 9px;
  letter-spacing: 1px;
}

.msp-brand strong {
  color: var(--navy-dark);
  font-size: 13px;
}

.msp-verified {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #198754;
  font-family: var(--font-jakarta);
  font-size: 11px;
  font-weight: 700;
}

.msp-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 22px 0;
}

.msp-profile h3 {
  margin: 0;
  color: var(--navy-dark);
  font-size: 18px;
}

.msp-profile p {
  margin: 3px 0 0;
  color: #7a879b;
  font-size: 11px;
}

.msp-progress-section {
  margin-bottom: 22px;
}

.msp-progress-section span {
  color: #758197;
  font-size: 11px;
}

.msp-progress-section strong {
  color: var(--navy);
  font-size: 12px;
}

.msp-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 20px;
  background: #e8edf5;
}

.msp-progress .progress-bar {
  border-radius: 20px;
  background: linear-gradient(90deg, var(--navy), var(--orange));
  transition: ease;
}

.msp-mini-heading {
  margin-bottom: 10px;
  color: #8994a7;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.msp-skill-tag {
  padding: 7px 11px;
  border-radius: 50px;
  background: rgba(30, 59, 138, 0.07);
  border: 1px solid rgba(30, 59, 138, 0.08);
  color: var(--navy);
  font-family: var(--font-jakarta);
  font-size: 10px;
  font-weight: 600;
}

.msp-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.msp-mini-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border-radius: 12px;
  background: #f6f8fc;
  border: 1px solid #edf0f5;
}

.msp-mini-card>i {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: white;
  color: var(--orange);
  font-size: 12px;
}

.msp-mini-card strong,
.msp-mini-card small {
  display: block;
}

.msp-mini-card strong {
  color: var(--navy-dark);
  font-family: var(--font-poppins);
  font-size: 11px;
}

.msp-mini-card small {
  color: #8b96a8;
  font-family: var(--font-jakarta);
  font-size: 9px;
}

.msp-passport-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(30, 59, 138, 0.08);
}

.msp-status {
  display: flex;
  align-items: center;
  gap: 7px;
}

.msp-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20a464;
  box-shadow: 0 0 0 5px rgba(32, 164, 100, 0.1);
}

.msp-status small {
  color: #78859a;
  font-size: 9px;
}

.msp-qr {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #cbd3df;
  border-radius: 8px;
  color: var(--navy);
  font-size: 16px;
}

.msp-evidence {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 155px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(30, 59, 138, 0.09);
  box-shadow: 0 15px 35px rgba(30, 59, 138, 0.12);
  backdrop-filter: blur(12px);
  animation: mspFloat 4s ease-in-out infinite;
}

.msp-evidence-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(250, 117, 22, 0.1);
  color: var(--orange);
  font-size: 13px;
}

.msp-evidence small,
.msp-evidence strong {
  display: block;
}

.msp-evidence small {
  color: #8792a5;
  font-size: 8px;
  letter-spacing: 0.8px;
}

.msp-evidence strong {
  color: var(--navy-dark);
  font-size: 11px;
}

@keyframes mspFloat {

  0%,
  100% {
    transform: translateY(0);
  }

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

.msp-evidence-1 {
  left: 5%;
  top: 20%;
}

.msp-evidence-2 {
  right: 4%;
  top: 20%;
  animation-delay: 0.7s;
}

.msp-evidence-3 {
  left: 1%;
  bottom: 22%;
  animation-delay: 1.2s;
}

.msp-evidence-4 {
  right: 0;
  bottom: 22%;
  animation-delay: 1.8s;
}

.msp-evidence-5 {
  left: 13%;
  top: 49%;
  animation-delay: 2.2s;
}

.msp-evidence-6 {
  right: 11%;
  top: 49%;
  animation-delay: 2.8s;
}

@media (max-width: 991.98px) {
  .msp-passport-area {
    min-height: 650px;
  }

  .msp-orbit-1 {
    width: 600px;
    height: 600px;
  }

  .msp-orbit-2 {
    width: 470px;
    height: 470px;
  }

  .msp-evidence-1 {
    left: 0;
  }

  .msp-evidence-2 {
    right: 0;
  }

  .msp-evidence-3 {
    left: 0;
  }

  .msp-evidence-4 {
    right: 0;
  }
}

@media (max-width: 767.98px) {
  .msta-skills-passport {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .msp-title {
    font-size: 30px;
  }

  .msp-intro {
    font-size: 13px;
  }

  .msp-passport-area {
    min-height: auto;
    padding: 25px 0 20px;
    display: block;
  }

  .msp-orbit {
    display: none;
  }

  .msp-passport-card {
    width: 100%;
    padding: 18px;
    border-radius: 20px;
  }

  .msp-evidence {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: calc(50% - 6px);
    min-width: 0;
    display: inline-flex;
    margin: 5px 2px;
    padding: 9px;
    animation: none;
  }

  .msp-evidence-icon {
    width: 32px;
    height: 32px;
  }

  .msp-evidence small {
    font-size: 7px;
  }

  .msp-evidence strong {
    font-size: 9px;
  }

  .msp-bg-grid {
    display: none;
  }

  .msp-value-box {
    align-items: flex-start;
    padding: 18px;
  }

  .msp-value-box h2 {
    font-size: 17px;
  }

  .msp-value-box p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .msp-title {
    font-size: 27px;
  }

  .msp-passport-header {
    align-items: flex-start;
  }

  .msp-verified {
    font-size: 9px;
  }

  .msp-profile {
    gap: 11px;
  }

  .msp-avatar {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    font-size: 19px;
  }

  .msp-profile h3 {
    font-size: 15px;
  }

  .msp-evidence {
    width: 100%;
    margin: 4px 0;
  }

  .msp-evidence-5,
  .msp-evidence-6 {
    display: none;
  }

  .msp-evidence-grid {
    gap: 7px;
  }

  .msp-mini-card {
    padding: 8px;
  }

  .msp-mini-card strong {
    font-size: 9px;
  }

  .msp-mini-card small {
    font-size: 8px;
  }

  .msp-cta {
    width: calc(100% - 10px);
    justify-content: center;
  }
}

.msta-passport-evidence-section {
  position: relative;
  z-index: 2;
  padding: 30px 0 30px;
}

.msta-passport-section-heading {
  max-width: 1000px;
  margin: 0 auto 5px;
}

.msta-passport-section-heading h2 {
  margin: 10px 0 14px;
  color: #0b1635;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
}

.msta-passport-section-heading h2 span {
  color: #fa7516;
}

.msta-passport-section-heading p {
  margin: 0;
  color: #69778c;
  font-size: 15px;
  line-height: 1.7;
}

.msta-evidence-card {
  position: relative;
  height: 100%;
  padding: 28px;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(30, 59, 138, 0.05);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.msta-evidence-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -50px;
  bottom: -50px;
  border-radius: 50%;
  background: rgba(30, 59, 138, 0.035);
  transition: 0.3s ease;
}

.msta-evidence-card:hover {
  transform: translateY(-7px);
  border-color: rgba(250, 117, 22, 0.2);
  box-shadow: 0 20px 45px rgba(30, 59, 138, 0.1);
}

.msta-evidence-card:hover::after {
  transform: scale(1.5);
}

.msta-evidence-number {
  position: absolute;
  top: 17px;
  right: 20px;
  color: #dce2ec;
  font-family: var(--font-poppins);
  font-size: 11px;
  font-weight: 700;
}

.msta-evidence-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #1e3b8a;
  background: rgba(30, 59, 138, 0.08);
  font-size: 18px;
  transition: all 0.3s ease;
}

.msta-evidence-card:hover .msta-evidence-icon {
  color: #ffffff;
  background: #fa7516;
  transform: rotate(-5deg);
}

.msta-evidence-card h3 {
  margin-bottom: 9px;
  color: #0b1635;
  font-size: 17px;
}

.msta-evidence-card p {
  margin: 0;
  color: #718096;
  font-size: 13px;
  line-height: 1.7;
}

.msta-passport-cta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 20px;
  padding: 40px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 20%,
      rgba(255, 255, 255, 0.13),
      transparent 25%),
    linear-gradient(120deg, #1e3b8a, #193278);
  box-shadow: 0 20px 50px rgba(30, 59, 138, 0.15);
}

.msta-passport-cta::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  bottom: -110px;
  border: 35px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.msta-passport-cta-label {
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
  letter-spacing: 1.5px;
}

.msta-passport-cta h2 {
  margin: 8px 0;
  color: #ffffff;
  font-size: clamp(26px, 3vw, 38px);
}

.msta-passport-cta h2 span {
  color: #ff9a54;
}

.msta-passport-cta p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  line-height: 1.7;
}

.msta-passport-cta-btn,
.msta-passport-cta-btn-outline {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.msta-passport-cta-btn {
  color: #ffffff !important;
  background: #fa7516;
  border: 1px solid #fa7516;
}

.msta-passport-cta-btn:hover {
  color: #ffffff !important;
  background: #e9670d;
  transform: translateY(-2px);
}

.msta-passport-cta-btn-outline {
  color: #ffffff !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.msta-passport-cta-btn-outline:hover {
  color: #1e3b8a !important;
  background: #ffffff;
}

@media (max-width: 991.98px) {
  .msta-passport-page {
    padding: 60px 0;
  }

  .msta-passport-hero {
    min-height: auto;
  }

  .msta-passport-title {
    max-width: 750px;
  }

  .msta-passport-visual {
    min-height: 580px;
    margin-top: 10px;
  }

  .msta-passport-card {
    width: 460px;
  }

  .msta-passport-floating-1 {
    left: 5%;
  }

  .msta-passport-floating-2 {
    right: 4%;
  }

  .msta-passport-floating-3 {
    right: 5%;
  }

  .msta-passport-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .msta-passport-page {
    padding: 45px 0;
  }

  .msta-passport-bg-dots {
    display: none;
  }

  .msta-passport-title {
    font-size: 35px;
    line-height: 1.12;
  }

  .msta-passport-description {
    font-size: 14px;
    line-height: 1.7;
  }

  .msta-passport-highlight {
    padding: 15px;
  }

  .msta-passport-visual {
    min-height: 470px;
  }

  .msta-passport-orbit {
    width: 410px;
    height: 410px;
  }

  .msta-passport-card {
    width: 430px;
    max-width: 85%;
    padding: 20px;
    border-radius: 19px;
  }

  .msta-passport-floating {
    min-width: 135px;
    padding: 8px 10px;
  }

  .msta-passport-floating-1 {
    top: 8%;
    left: 1%;
  }

  .msta-passport-floating-2 {
    top: 20%;
    right: 0;
  }

  .msta-passport-floating-3 {
    right: 0;
    bottom: 7%;
  }

  .msta-passport-floating-icon {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .msta-passport-floating small {
    font-size: 7px;
  }

  .msta-passport-floating strong {
    font-size: 9px;
  }

  .msta-passport-evidence-section {
    padding-top: 55px;
  }

  .msta-passport-section-heading p {
    font-size: 14px;
  }

  .msta-evidence-card {
    padding: 23px;
  }

  .msta-passport-cta {
    margin-top: 50px;
    padding: 28px 22px;
    border-radius: 18px;
  }
}

@media (max-width: 480px) {
  .msta-passport-page {
    padding: 35px 0;
  }

  .msta-passport-title {
    font-size: 30px;
  }

  .msta-passport-label {
    font-size: 10px;
  }

  .msta-passport-description {
    font-size: 13px;
  }

  .msta-passport-highlight p {
    font-size: 11px;
  }

  .msta-passport-highlight strong {
    font-size: 13px;
  }

  .msta-passport-visual {
    min-height: 400px;
  }

  .msta-passport-orbit {
    width: 330px;
    height: 330px;
  }

  .msta-passport-card {
    max-width: 88%;
    padding: 15px;
  }

  .msta-passport-brand-icon {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }

  .msta-passport-brand strong {
    font-size: 11px;
  }

  .msta-passport-profile {
    padding: 16px 0;
  }

  .msta-passport-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 19px;
  }

  .msta-passport-profile h3 {
    font-size: 14px;
  }

  .msta-passport-profile span {
    font-size: 9px;
  }

  .msta-passport-skill {
    font-size: 8px;
    padding: 6px 7px;
  }

  .msta-passport-evidence-row strong {
    font-size: 16px;
  }

  .msta-passport-evidence-row small {
    font-size: 8px;
  }

  .msta-passport-floating {
    min-width: 115px;
  }

  .msta-passport-floating-1 {
    left: -3%;
  }

  .msta-passport-floating-2 {
    right: -3%;
  }

  .msta-passport-floating-3 {
    right: -2%;
  }

  .msta-passport-cta {
    padding: 24px 18px;
  }

  .msta-passport-cta h2 {
    font-size: 25px;
  }

  .msta-passport-cta p {
    font-size: 12px;
  }
}

.msp-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.msp-avatar {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;
  background: linear-gradient(135deg,
      rgba(30, 59, 138, 0.12),
      rgba(250, 117, 22, 0.12));
  border: 1px solid rgba(30, 59, 138, 0.1);
  color: var(--navy);
  font-size: 22px;
}

.msp-profile-label {
  display: block;

  margin-bottom: 3px;

  color: var(--orange);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 1.5px;
}

.msp-profile h3 {
  margin: 0;

  color: var(--navy-dark);

  font-size: 18px;
  font-weight: 700;

  line-height: 1.3;
}

.msp-profile p {
  margin: 3px 0 0;

  color: #68758a;

  font-size: 12px;
  line-height: 1.5;
}

/* ===== 3nd MSTA skills passport page section end ===== */

/* ======== MSTA skills passport page end ======== */

/* ======== career launchapd page start ======== */

/* ====== MSTA CAREER LAUNCHPAD + UNIVERSITY PARTNERSHIPS===== */

.msta-clup-hero {
  position: relative;
  height: 250px;
  min-height: 250px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 45%,
      rgba(250, 117, 22, 0.18),
      transparent 25%),
    linear-gradient(120deg, #0b1635 0%, #193278 52%, #1e3b8a 100%);
}

/* HERO BACKGROUND */

.msta-clup-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: -180px;
  border: 70px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.msta-clup-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: -120px;
  bottom: -150px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.08);
}

/* HERO ORBS */

.msta-clup-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.msta-clup-orb-1 {
  width: 10px;
  height: 10px;
  top: 30px;
  right: 25%;
  background: var(--orange);
  box-shadow:
    0 0 0 8px rgba(250, 117, 22, 0.1),
    0 0 30px rgba(250, 117, 22, 0.45);
}

.msta-clup-orb-2 {
  width: 7px;
  height: 7px;
  left: 40%;
  bottom: 30px;
  background: rgba(255, 255, 255, 0.5);
}

/* HERO GRID */

.msta-clup-hero-grid {
  position: absolute;
  width: 160px;
  height: 130px;
  right: 18%;
  top: 45px;
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 20px 20px;
  transform: rotate(12deg);
}

/* HERO CONTENT */

.msta-clup-hero-content {
  position: relative;
  z-index: 5;
}

.msta-clup-hero-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 3.2vw, 45px);
  line-height: 1.1;
  font-weight: 700;
}

.msta-clup-hero-title span {
  color: #ff9a55;
}

/* HERO VISUAL */
.msta-clup-hero-visual {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msta-clup-visual-circle {
  position: absolute;
  border-radius: 50%;
}

.circle-one {
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transform: rotate(20deg);
}

.circle-two {
  width: 130px;
  height: 130px;
  border: 1px dashed rgba(250, 117, 22, 0.55);
  transform: rotate(-30deg);
}

.msta-clup-center-icon {
  position: relative;
  z-index: 3;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: var(--orange);
  color: #ffffff;
  font-size: 22px;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.2),
    0 0 0 9px rgba(250, 117, 22, 0.1);
}

.msta-clup-visual-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-family: var(--font-jakarta);
  font-size: 11px;
}

.msta-clup-visual-card i {
  color: #ff9a55;
}

.card-top {
  top: 15px;
  right: 2%;
}

.card-middle {
  left: 0;
  top: 48%;
}

.card-bottom {
  right: 8%;
  bottom: 5px;
}

/* ====== GENERAL SECTIONS ====== */

.msta-clup-career,
.msta-clup-university {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.msta-clup-career::before,
.msta-clup-university::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 55px solid rgba(30, 59, 138, 0.035);
  top: -170px;
  right: -120px;
  pointer-events: none;
}

.msta-clup-career::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.035);
  bottom: -130px;
  left: -100px;
}

/* SECTION TITLE */

.msta-clup-section-title {
  max-width: 100%;
  margin: 0 0 22px;
  color: var(--navy-dark);
  font-size: clamp(35px, 3.5vw, 55px);
  line-height: 1.1;
  font-weight: 700;
}

.msta-clup-section-title span {
  color: var(--orange);
}

.msta-clup-section-text {
  color: #5d687c;
  font-size: 15px;
  line-height: 1.75;
}

.msta-clup-flow {
  position: relative;
}

.msta-clup-flow-line {
  position: absolute;
  top: 47%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(30, 59, 138, 0.1);
  z-index: 0;
}

.msta-clup-flow-card {
  position: relative;
  z-index: 2;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(30, 59, 138, 0.07);
  transition: 0.3s ease;
}

.msta-clup-flow-card:hover {
  transform: translateY(-7px);
  border-color: rgba(250, 117, 22, 0.35);
  box-shadow: 0 18px 40px rgba(30, 59, 138, 0.12);
}

.msta-clup-flow-card span {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #a5afc0;
  font-family: var(--font-jakarta);
  font-size: 10px;
}

.msta-clup-flow-card i {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgba(30, 59, 138, 0.07);
  color: var(--navy);
  font-size: 17px;
}

.msta-clup-flow-card h4 {
  margin: 0;
  color: var(--navy-dark);
  font-family: var(--font-poppins);
  font-size: 15px;
}

.msta-clup-info-card,
.msta-clup-partner-card {
  position: relative;
  height: 100%;
  padding: 28px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(30, 59, 138, 0.055);
  transition: 0.35s ease;
}

.msta-clup-info-card::after,
.msta-clup-partner-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -35px;
  bottom: -35px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.06);
  transition: 0.35s ease;
}

.msta-clup-info-card:hover,
.msta-clup-partner-card:hover {
  transform: translateY(-7px);
  border-color: rgba(250, 117, 22, 0.25);
  box-shadow: 0 20px 45px rgba(30, 59, 138, 0.1);
}

.msta-clup-info-card:hover::after,
.msta-clup-partner-card:hover::after {
  transform: scale(1.5);
}

.msta-clup-card-icon,
.msta-clup-partner-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 15px;
  background: rgba(30, 59, 138, 0.07);
  color: var(--navy);
  font-size: 18px;
}

.msta-clup-card-number {
  position: absolute;
  top: 25px;
  right: 27px;
  color: rgba(30, 59, 138, 0.12);
  font-family: var(--font-poppins);
  font-size: 34px;
  font-weight: 700;
}

.msta-clup-info-card h3,
.msta-clup-partner-card h3 {
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
  color: var(--navy-dark);
  font-size: 18px;
  line-height: 1.35;
}

.msta-clup-info-card p,
.msta-clup-partner-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #657085;
  font-size: 14px;
  line-height: 1.7;
}

.msta-clup-message {
  position: relative;
  padding: 28px 35px;
  text-align: center;
  background: linear-gradient(135deg, #f7f9ff, #ffffff);
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 20px;
}

.msta-clup-message>i {
  margin-bottom: 12px;
  color: var(--orange);
  font-size: 22px;
}

.msta-clup-message h3 {
  margin: 0;
  color: var(--navy-dark);
  font-size: 22px;
}

.msta-clup-message h3 span {
  color: var(--orange);
}

/* ====== CAREER CTA ====== */

.msta-clup-career-cta {
  padding: 20px 0 70px;
  background: #ffffff;
}

.msta-clup-cta-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding: 40px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(125deg, #0b1635, #193278);
  box-shadow: 0 20px 50px rgba(30, 59, 138, 0.18);
}

.msta-clup-cta-box::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  bottom: -120px;
  border-radius: 50%;
  border: 45px solid rgba(250, 117, 22, 0.12);
}

.msta-clup-cta-box h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 30px;
}

.msta-clup-cta-box h2 span {
  color: #ff9a55;
}

.msta-clup-cta-box p {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.7;
}

.msta-clup-cta-buttons {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* BUTTONS */

.msta-clup-btn-primary,
.msta-clup-btn-light,
.msta-clup-university-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: 0.3s ease;
}

.msta-clup-btn-primary {
  background: var(--orange);
  color: #ffffff;
}

.msta-clup-btn-primary:hover {
  background: #e9680c;
  color: #ffffff;
  transform: translateY(-2px);
}

.msta-clup-btn-light {
  background: #ffffff;
  color: var(--navy);
  border: 1px solid rgba(30, 59, 138, 0.12);
}

.msta-clup-btn-light:hover {
  background: #f5f7fb;
  color: var(--navy-dark);
  transform: translateY(-2px);
}


/* ======== career launchapd page end ======== */


/* ======== University Partnerships page Start ======== */

/* ===== UNIVERSITY PARTNERSHIP HEADER ===== */

.university-header {
  position: relative;
  height: 250px;
  min-height: 250px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 85% 50%, rgba(250, 117, 22, 0.14), transparent 30%),
    linear-gradient(135deg, #0b1635 0%, #12265f 55%, #1e3b8a 100%);
  color: #ffffff;
}


/* Container */
.university-header .container {
  height: 100%;
  position: relative;
  z-index: 5;
}

.university-header-content {
  position: relative;
  z-index: 10;
  padding-right: 30px;
}


/* Main heading */
.university-title {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-merienda, "Merienda", cursive);
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  color: #ffffff;
}


/* Orange highlighted text */
.university-title span {
  color: #fa7516;
}


/* Description */
.university-description {
  max-width: 690px;
  margin: 8px 0 0;
  font-family: var(--font-jakarta, "Plus Jakarta Sans", sans-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.university-header-visual {
  position: relative;
  width: 100%;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Decorative circles */
.visual-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
}


.circle-one {
  width: 210px;
  height: 210px;
}


.circle-two {
  width: 155px;
  height: 155px;
  border-color: rgba(250, 117, 22, 0.35);
}


/* Main card */
.visual-card {
  position: absolute;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.18);
  color: #ffffff;
  z-index: 5;
}


/* Main university card */

.visual-card-main {
  width: 205px;
  min-height: 68px;
  padding: 12px 14px;
  gap: 12px;
  border-radius: 14px;
}


.visual-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #fa7516;
  color: #ffffff;
  font-size: 19px;
}


.visual-card-main strong {
  display: block;
  font-family: var(--font-poppins, "Poppins", sans-serif);
  font-size: 14px;
}


.visual-card-main small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-jakarta, "Plus Jakarta Sans", sans-serif);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.65);
}


/* Small cards */
.visual-card-top,
.visual-card-bottom {
  padding: 8px 11px;
  gap: 7px;
  border-radius: 9px;
  font-family: var(--font-jakarta, "Plus Jakarta Sans", sans-serif);
  font-size: 9px;
  font-weight: 600;
}


.visual-card-top {
  top: 55px;
  right: 0;
}


.visual-card-bottom {
  bottom: 52px;
  left: 0;
}


.visual-card-top i,
.visual-card-bottom i {
  color: #fa7516;
  font-size: 11px;
}


/* Connection lines */
.visual-line {
  position: absolute;
  height: 1px;
  background: rgba(250, 117, 22, 0.55);
  transform-origin: left center;
}


.line-one {
  width: 65px;
  top: 82px;
  right: 105px;
  transform: rotate(25deg);
}


.line-two {
  width: 60px;
  bottom: 82px;
  left: 105px;
  transform: rotate(-25deg);
}

.header-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}


.shape-one {
  width: 240px;
  height: 240px;
  right: -100px;
  top: -120px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
}


.shape-two {
  width: 130px;
  height: 130px;
  left: -65px;
  bottom: -75px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.08);
  border: 1px solid rgba(250, 117, 22, 0.15);
}

@media (max-width: 1199.98px) {

  .university-title {
    font-size: clamp(26px, 3.4vw, 36px);
  }

  .university-description {
    max-width: 600px;
    font-size: 12px;
  }

  .visual-card-main {
    width: 190px;
  }

}

@media (max-width: 767.98px) {
  .university-header {
    height: 250px;
    min-height: 250px;
    text-align: center;
  }

  .university-header-content {
    padding: 0 15px;
  }

  .university-description {
    max-width: 500px;
    margin: 10px auto 0;
    font-size: 11px;
    line-height: 1.5;
  }


  .shape-one {
    width: 180px;
    height: 180px;
    right: -100px;
    top: -100px;
  }


  .shape-two {
    width: 100px;
    height: 100px;
    left: -50px;
    bottom: -60px;
  }

}

@media (max-width: 575.98px) {
  .university-header {
    height: 250px;
    min-height: 250px;
  }


  .university-title {
    font-size: 23px;
    line-height: 1.18;
  }


  .university-description {
    padding: 0 8px;
    font-size: 10.5px;
    line-height: 1.5;
  }

}

@media (max-width: 380px) {
  .university-title {
    font-size: 21px;
  }


  .university-description {
    font-size: 10px;
  }

}

/* ====== UNIVERSITY SECTION ====== */

.msta-clup-university {
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.msta-clup-university-btn {
  margin-top: 10px;
  background: var(--navy);
  color: #ffffff;
}

.msta-clup-university-btn:hover {
  background: var(--orange);
  color: #ffffff;
  transform: translateY(-2px);
}

/* CAMPUS CARD */
.msta-clup-campus-card {
  position: relative;
  padding: 28px;
  overflow: hidden;
  border-radius: 25px;
  background: linear-gradient(135deg, #0b1635, #193278);
  box-shadow: 0 20px 50px rgba(30, 59, 138, 0.15);
}

.msta-clup-campus-card::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  top: -100px;
  border-radius: 50%;
  border: 45px solid rgba(255, 255, 255, 0.04);
}

.msta-clup-campus-heading {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  color: #ffffff;
}

.msta-clup-campus-heading span {
  font-family: var(--font-jakarta);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.65);
}

.msta-clup-campus-heading i {
  color: #ff9a55;
}

/* CAMPUS FLOW */
.msta-clup-campus-flow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.msta-clup-campus-step {
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  text-align: center;
}

.msta-clup-campus-step i {
  color: #ff9a55;
}

.msta-clup-campus-step span {
  font-family: var(--font-jakarta);
  font-size: 11px;
}

.msta-clup-flow-arrow {
  color: rgba(255, 255, 255, 0.35);
  font-size: 18px;
}

/* CAMPUS BOTTOM */
.msta-clup-campus-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.msta-clup-campus-bottom div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(250, 117, 22, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-jakarta);
  font-size: 10px;
}

.msta-clup-campus-bottom i {
  color: #ff9a55;
}

.msta-clup-university-message {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 45px;
  padding: 25px 30px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(30, 59, 138, 0.08);
  box-shadow: 0 10px 30px rgba(30, 59, 138, 0.05);
}

.msta-clup-university-message-icon {
  width: 55px;
  height: 55px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: rgba(250, 117, 22, 0.1);
  color: var(--orange);
}

.msta-clup-university-message h3 {
  margin: 0 0 5px;
  color: var(--navy-dark);
  font-size: 21px;
}

.msta-clup-university-message h3 span {
  color: var(--orange);
}

.msta-clup-university-message p {
  margin: 0;
  color: #69758a;
  font-size: 13px;
}

.msta-clup-final-cta {
  padding: 20px 0 70px;
  background: #ffffff;
}

.msta-clup-final-box {
  position: relative;
  overflow: hidden;
  padding: 55px 30px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 30%,
      rgba(250, 117, 22, 0.12),
      transparent 25%),
    #f5f7fc;
  border: 1px solid rgba(30, 59, 138, 0.08);
}

.msta-clup-final-box h2 {
  max-width: 750px;
  margin: 0 auto 15px;
  color: var(--navy-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
}

.msta-clup-final-box h2 span {
  color: var(--orange);
}

.msta-clup-final-box p {
  max-width: 700px;
  margin: 0 auto 25px;
  color: #647085;
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 991.98px) {
  .msta-clup-hero-title {
    font-size: 32px;
  }

  .msta-clup-hero-visual {
    transform: scale(0.85);
  }

  .msta-clup-flow-line {
    display: none;
  }

  .msta-clup-cta-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .msta-clup-campus-flow {
    gap: 6px;
  }
}

@media (max-width: 767.98px) {
  .msta-clup-hero {
    height: auto;
    min-height: 250px;
    padding: 25px 0;
  }

  .msta-clup-hero-title {
    font-size: 28px;
  }

  .msta-clup-eyebrow {
    font-size: 9px;
  }

  .msta-clup-hero-visual {
    display: none;
  }

  .msta-clup-section-title {
    font-size: 28px;
  }

  .msta-clup-section-text {
    font-size: 13px;
  }

  .msta-clup-info-card,
  .msta-clup-partner-card {
    padding: 23px;
  }

  .msta-clup-cta-box {
    padding: 28px 22px;
    border-radius: 22px;
  }

  .msta-clup-cta-box h2 {
    font-size: 25px;
  }

  .msta-clup-cta-buttons {
    width: 100%;
    flex-direction: column;
  }

  .msta-clup-btn-primary,
  .msta-clup-btn-light {
    width: 100%;
  }

  .msta-clup-campus-card {
    padding: 20px 15px;
  }

  .msta-clup-campus-flow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .msta-clup-flow-arrow {
    display: none;
  }

  .msta-clup-campus-step {
    min-width: 0;
  }

  .msta-clup-campus-bottom {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .msta-clup-university-message {
    align-items: flex-start;
    padding: 20px;
    gap: 13px;
  }

  .msta-clup-university-message h3 {
    font-size: 18px;
  }

  .msta-clup-final-box {
    padding: 40px 20px;
  }
}

@media (max-width: 480px) {
  .msta-clup-hero-title {
    font-size: 25px;
  }

  .msta-clup-eyebrow {
    letter-spacing: 1px;
  }

  .msta-clup-flow-card {
    min-height: 125px;
    padding: 13px;
  }

  .msta-clup-flow-card i {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .msta-clup-flow-card h4 {
    font-size: 13px;
  }

  .msta-clup-card-number {
    font-size: 27px;
  }

  .msta-clup-message {
    padding: 22px 18px;
  }

  .msta-clup-message h3 {
    font-size: 18px;
  }

  .msta-clup-university-message-icon {
    width: 45px;
    height: 45px;
  }
}

/* ======== University Partnerships page end ======== */