@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;
  }
}

/* ===== 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 {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  background: rgba(250, 246, 240, 0.96);
  border-bottom: 1px solid rgba(30, 59, 138, 0.08);
  box-shadow: 0 2px 12px rgba(11, 22, 53, 0.04);
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    backdrop-filter 0.35s ease,
    padding 0.35s ease;
}

/*SCROLL GLASS EFFECT */

.nav-bg.nav-scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 30px rgba(11, 22, 53, 0.1);
}

/*NAVBAR CONTAINER */

.navbar .container-fluid {
  padding-top: 6px;
  padding-bottom: 6px;
  transition: padding 0.35s ease;
}

/* Slightly compact navbar after scroll */

.nav-bg.nav-scrolled .container-fluid {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* LOGO */

.navbar-brand img {
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.navbar-brand:hover img {
  transform: scale(1.04);
}

/* NAV LINKS */

.nav-font {
  position: relative;
  font-family: var(--font-poppins);
  font-size: 15px !important;
  font-weight: 500;
  color: #172554 !important;
  padding: 10px 3px !important;
  margin: 0 7px;
  white-space: nowrap;
  transition: color 0.25s ease;
}

/*UNDERLINE */

.nav-font::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 4px;
  height: 2px;
  background: var(--orange);
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: center;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.25s ease;
}

/* HOVER */

.nav-font:hover {
  color: var(--orange) !important;
}

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

/* ACTIVE LINK */

.nav-font.active {
  color: var(--navy) !important;
  font-weight: 600;
}

.nav-font.active::after {
  background-color: var(--navy);
  transform: scaleX(1);
}

/* Active link hover: underline stays visible */

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

/* DROPDOWN ARROW */

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

/* Arrow rotate when dropdown opens */
.dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

/* Remove Bootstrap's default dropdown arrow */
.dropdown-toggle::after {
  display: none !important;
}

/*DROPDOWN MENU */
.dropdown-menu {
  min-width: 245px;
  margin-top: 5px !important;
  padding: 8px;
  border: 1px solid rgba(30, 59, 138, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 15px 40px rgba(11, 22, 53, 0.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* DROPDOWN ITEMS */
.sub-navFont {
  position: relative;
  font-family: var(--font-jakarta);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy) !important;
  padding: 9px 14px !important;
  border-radius: 8px;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    padding-left 0.25s ease;
}

.sub-navFont:hover {
  color: var(--orange) !important;
  background-color: rgba(250, 117, 22, 0.08);
  padding-left: 18px !important;
}

/* SEARCH BUTTON */

.search-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(30, 59, 138, 0.35);
  color: var(--navy);
  background: rgba(255, 255, 255, 0.35);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.25s ease,
    box-shadow 0.3s ease;
}

.search-btn:hover {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(30, 59, 138, 0.22);
}

.search-btn:focus,
.search-btn:active {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: none;
  outline: none;
}

/* APPLY BUTTON */

.apply-btn {
  background: linear-gradient(135deg, #fa7516, #f06b0b);
  border: none;
  border-radius: 24px;
  padding: 8px 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-family: var(--font-jakarta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 5px 16px rgba(250, 117, 22, 0.25);
  transition:
    transform 0.25s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.apply-btn:hover {
  background: linear-gradient(135deg, #e9680d, #d95c06);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(250, 117, 22, 0.32);
}

.apply-btn:focus,
.apply-btn:active {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

/*MOBILE TOGGLER*/

.navbar-toggler {
  border: 1px solid rgba(30, 59, 138, 0.25);
  border-radius: 8px;
  padding: 7px 9px;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.navbar-toggler:hover {
  background-color: rgba(30, 59, 138, 0.06);
  border-color: var(--navy);
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* RESPONSIVE */

@media (max-width: 1199.98px) {
  .navbar-nav {
    gap: 4px;
    padding: 12px 0;
  }

  .nav-font {
    margin: 0;
    padding: 10px 6px !important;
    display: inline-block;
    width: fit-content;
  }

  .nav-font::after {
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1.5px;
  }

  .navbar-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(11, 22, 53, 0.08);
  }

  .apply-btn {
    margin-left: auto;
  }

  .dropdown-menu {
    margin-top: 4px !important;
  }
}

/* MOBILE */

@media (max-width: 575.98px) {
  .navbar-brand img {
    width: 68px;
  }

  .nav-font {
    font-size: 13px !important;
  }

  .apply-btn {
    padding: 7px 14px;
    font-size: 12px;
  }

  .search-btn {
    width: 36px;
    height: 36px;
  }

  .dropdown-menu {
    min-width: 100%;
  }
}

/* ACCESSIBILITY */

.nav-font:focus-visible,
.apply-btn:focus-visible,
.search-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* PROGRAMS DROPDOWN */

.programs-dropdown {
  min-width: 300px;
  padding: 10px;
}

/* Category Heading */

.program-category {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 5px;
  color: var(--navy-dark);
  font-family: var(--font-poppins);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(30, 59, 138, 0.08);
}

.program-category i {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: rgba(250, 117, 22, 0.1);
  color: var(--orange);
  font-size: 14px;
}

/* Program Items */

.programs-dropdown .sub-navFont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 12px !important;
  border-radius: 8px;
  font-size: 13px;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    padding-left 0.25s ease;
}

.programs-dropdown .sub-navFont:hover {
  color: var(--orange) !important;
  background-color: rgba(250, 117, 22, 0.08);
  padding-left: 17px !important;
}

/* Duration */

.programs-dropdown .sub-navFont small {
  flex-shrink: 0;
  color: #7b8497;
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 20px;
  background-color: #f1f4fa;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.programs-dropdown .sub-navFont:hover small {
  color: #fff;
  background-color: var(--orange);
}

/* ===== 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, 1rem);
  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 Us end ===== */

/* ===== footer start ===== */

.msta-footer {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  color: #fff;
  padding: 0 0 15px;
  margin: 0;
}

.msta-footer::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border: 75px solid rgba(255, 255, 255, 0.025);
  border-radius: 50%;
  top: -250px;
  right: -180px;
  pointer-events: none;
}

.msta-footer::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(250, 117, 22, 0.035);
  bottom: -170px;
  left: -130px;
  pointer-events: none;
}

.footer-cta-banner {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 0 60px;
  padding: 46px 0;
  background: rgba(255, 255, 255, 0.045);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-cta-banner-text span {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-poppins);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--orange);
}

.footer-cta-banner-text h4 {
  margin: 0;
  font-family: var(--font-poppins);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
}

.footer-cta-banner-text h4 strong {
  font-weight: 700;
}

.footer-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-poppins);
  font-size: 12px;
  font-weight: 400;
  box-shadow: 0 10px 25px rgba(250, 117, 22, 0.28);
  transition: all 0.3s ease;
}

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

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

.footer-cta-btn:hover i {
  transform: translateX(5px);
}

.footer-main {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1.6fr repeat(7, 1fr);
  column-gap: 22px;
  row-gap: 36px;
  align-items: start;

  margin-bottom: 55px;
}

/* Brand */
.footer-brand {
  padding-right: 20px;
}

.footer-logo {
  display: inline-block;
  width: 170px;
  margin-bottom: 15px;
}

.footer-logo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.footer-logo:hover img {
  transform: translateY(-3px);
}

.footer-tagline {
  margin: 0 0 13px;
  font-family: var(--font-merienda);
  font-size: 14px;
  font-weight: 700;
  color: var(--orange);
}

.footer-about {
  max-width: 280px;
  margin: 0;
  font-family: var(--font-jakarta);
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.55);
}

/* Columns */
.footer-column h3 {
  position: relative;
  display: inline-block;
  margin: 0 0 20px;
  font-family: var(--font-poppins);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
}

.footer-column h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 22px;
  height: 2px;
  border-radius: 5px;
  background: var(--orange);
}

.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  text-decoration: none;
  font-family: var(--font-jakarta);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

.footer-column ul li a:hover {
  color: var(--orange);
  padding-left: 4px;
}

/* BOTTOM */

.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
  margin: 0;
  font-family: var(--font-jakarta);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
}

.footer-bottom strong {
  color: var(--orange);
}

.footer-bottom p:last-child {
  font-family: var(--font-merienda);
}

.social-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-icon i {
  transition: transform 0.3s ease;
}

.social-icon:hover {
  background-color: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(250, 117, 22, 0.25);
}

.social-icon:hover i {
  transform: scale(1.1);
}

@media (max-width: 1399.98px) and (min-width: 1200px) {
  .footer-main {
    column-gap: 16px;
  }
  .footer-column h3 {
    font-size: 12.5px;
  }
}

@media (max-width: 1199.98px) {
  .footer-cta-banner {
    padding: 36px 0;
    margin-bottom: 45px;
  }

  .footer-cta-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-cta-banner-text h4 {
    font-size: 22px;
  }

  .footer-main {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    padding-right: 0;
    margin-bottom: 10px;
  }

  .footer-about {
    max-width: 420px;
  }
}

/* Small tablets / large phones */
@media (max-width: 767.98px) {
  .msta-footer {
    padding-bottom: 20px;
  }

  .footer-cta-banner {
    padding: 30px 0;
    margin-bottom: 40px;
  }
  .footer-cta-banner-text h4 {
    font-size: 19px;
  }
  .footer-cta-btn {
    padding: 13px 20px;
    font-size: 13px;
  }

  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
    column-gap: 18px;
    margin-bottom: 35px;
  }

  .footer-logo {
    width: 150px;
  }
  .footer-about {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Small mobile */
@media (max-width: 575.98px) {
  .footer-cta-banner-text h4 {
    font-size: 17px;
  }
  .footer-cta-btn {
    font-size: 12px;
    padding: 8px 18px;
  }

  .footer-column h3 {
    font-size: 12px;
  }
  .footer-column ul li a {
    font-size: 10.5px;
  }

  .footer-bottom p {
    font-size: 9.5px;
  }
}

/* ===== 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 78% 50%,
      rgba(255, 255, 255, 0.18),
      transparent 24%
    ),
    linear-gradient(125deg, #064b8e 0%, #075fa8 42%, #087fc5 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: 290px;
  height: 290px;

  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 78% 50%,
      rgba(255, 255, 255, 0.18),
      transparent 24%
    ),
    linear-gradient(125deg, #064b8e 0%, #075fa8 42%, #087fc5 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 78% 50%,
      rgba(255, 255, 255, 0.18),
      transparent 24%
    ),
    linear-gradient(125deg, #064b8e 0%, #075fa8 42%, #087fc5 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;
  align-items: center;
  gap: 10px;
  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 ======== */