/**
 * Site-specific overrides belong here.
 * Prefer assigning reusable mp-* classes in Divi over targeting generated IDs.
 * Keep Divi Static CSS disabled while developing; re-test after enabling caches.
 */

/* Example:
.home .mp-hero {
  min-height: calc(100svh - var(--mp-header-height, 88px));
}
*/
/* Mpower homepage hero heading */
.mpower-hero-heading h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.25rem, 6.7vw, 6.9rem);
  font-weight: 900;
  line-height: 0.91em;
  letter-spacing: -0.07em;
  max-width: 760px;
  margin: 0;
  text-wrap: balance;
}

/* Blue-to-cyan gradient line */
.mpower-hero-heading .mpower-gradient-text {
  display: inline-block;
  color: #2d5cff; /* fallback */
  background: linear-gradient(
    90deg,
    #2d5cff 0%,
    #2388f2 48%,
    #27d9d3 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* Tablet */
@media (max-width: 980px) {
  .mpower-hero-heading h1 {
    font-size: clamp(3.75rem, 8vw, 5.5rem);
  }
}

/* Phone */
@media (max-width: 767px) {
  .mpower-hero-heading h1 {
    font-size: clamp(3rem, 14vw, 4.25rem);
    line-height: 0.93em;
    letter-spacing: -0.06em;
  }

  .mpower-hero-heading .mpower-gradient-text {
    white-space: normal;
  }
}


.mp-project-panel[hidden] {
  display: none !important;
}

.mp-project-panel {
  animation: projectFade .45s ease;
}

@keyframes projectFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mp-project-tab {
  position: relative;
  cursor: pointer;
  opacity: .65;
  transition: opacity .25s ease, color .25s ease;
}

.mp-project-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2px;
  background: #34495e;
  transition: background .25s ease;
}

.mp-project-tab.is-active {
  color: #fff !important;
  opacity: 1;
  font-weight: 700;
}

.mp-project-tab.is-active::after {
  background: #28c7f7;
}

.mp-project-prev,
.mp-project-next,
.mp-project-pause {
  cursor: pointer;
}

.shiftnav.shiftnav-shiftnav-main
 {
    background: hsl(214deg 50% 6% / 95%)!important;
    color: #ffffff;
}