html {
  scroll-behavior: smooth;
}
[x-cloak] {
  display: none !important;
}
body {
  margin: 0;
  font-family: "Roboto", sans-serif;
}
.section-anchor {
  scroll-margin-top: 76px;
}

.mega-card:hover img {
  transform: scale(1.06);
}

.hero-overlay-dark {
  background: linear-gradient(
    90deg,
    rgba(4, 20, 34, 0.94) 0%,
    rgba(4, 20, 34, 0.72) 42%,
    rgba(4, 20, 34, 0.42) 70%,
    rgba(4, 20, 34, 0.22) 100%
  );
}
.hero-overlay-light {
  background: linear-gradient(
    90deg,
    rgba(4, 20, 34, 0.82) 0%,
    rgba(4, 20, 34, 0.58) 45%,
    rgba(4, 20, 34, 0.28) 75%,
    rgba(4, 20, 34, 0.12) 100%
  );
}
.blueprint-dark {
  background:
    linear-gradient(rgba(5, 24, 41, 0.9), rgba(5, 24, 41, 0.9)),
    url("../images/about/about-blueprint-dark.png") center/cover no-repeat;
}
.blueprint-light {
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    url("../images/about/about-blueprint-light.png") center/cover no-repeat;
}
.map-dark {
  background:
    linear-gradient(rgba(5, 24, 41, 0.9), rgba(5, 24, 41, 0.9)),
    url("../images/about/about-map-dark.png") center/cover no-repeat;
}
.map-light {
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url("../images/about/about-map-light.png") center/cover no-repeat;
}

.hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(3, 20, 35, 0.98) 0%,
    rgba(3, 20, 35, 0.91) 34%,
    rgba(3, 20, 35, 0.66) 50%,
    rgba(3, 20, 35, 0.2) 68%,
    rgba(3, 20, 35, 0.08) 100%
  );
}

@media (max-width: 1023px) {
  .hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(3, 20, 35, 0.94) 0%,
      rgba(3, 20, 35, 0.8) 55%,
      rgba(3, 20, 35, 0.48) 100%
    );
  }
}