/* [project]/src/views/website/moe/style.scss.css [app-client] (css) */
#moe-page h2 {
  text-transform: uppercase;
  color: #679bdb;
}

@media (min-width: 1024px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 600px) {
  #moe-page #moe-hero {
    padding-top: 10%;
    padding-bottom: 5%;
  }

  #moe-page #moe-hero img {
    height: 50px;
  }
}

#moe-page #moe-hero .rounded-lg, #moe-page #features .rounded-lg, #moe-page #trilogy .rounded-lg, #moe-page #powers .rounded-lg, #moe-page #moe-use-cases .rounded-lg, #moe-page #easy-access .rounded-lg, #moe-page #experience .rounded-lg, #moe-page #architecture .rounded-lg, #moe-page #backend .rounded-lg, #moe-page #ui-deps .rounded-lg, #moe-page #cta .rounded-lg {
  border-radius: 50px;
  width: 45px;
  height: 45px;
  margin-left: 25px;
  font-size: 25px;
}

#moe-page #moe-hero .list-disc, #moe-page #features .list-disc, #moe-page #trilogy .list-disc, #moe-page #powers .list-disc, #moe-page #moe-use-cases .list-disc, #moe-page #easy-access .list-disc, #moe-page #experience .list-disc, #moe-page #architecture .list-disc, #moe-page #backend .list-disc, #moe-page #ui-deps .list-disc, #moe-page #cta .list-disc {
  color: #dcdcdc;
}

#moe-page #moe-hero a, #moe-page #features a, #moe-page #trilogy a, #moe-page #powers a, #moe-page #moe-use-cases a, #moe-page #easy-access a, #moe-page #experience a, #moe-page #architecture a, #moe-page #backend a, #moe-page #ui-deps a, #moe-page #cta a {
  color: #bdbdbd;
  background-color: #454545;
}

#moe-page #moe-hero .card-title, #moe-page #features .card-title, #moe-page #trilogy .card-title, #moe-page #powers .card-title, #moe-page #moe-use-cases .card-title, #moe-page #easy-access .card-title, #moe-page #experience .card-title, #moe-page #architecture .card-title, #moe-page #backend .card-title, #moe-page #ui-deps .card-title, #moe-page #cta .card-title {
  font-size: 25px;
}

#moe-page #moe-hero .text-muted-foreground, #moe-page #features .text-muted-foreground, #moe-page #trilogy .text-muted-foreground, #moe-page #powers .text-muted-foreground, #moe-page #moe-use-cases .text-muted-foreground, #moe-page #easy-access .text-muted-foreground, #moe-page #experience .text-muted-foreground, #moe-page #architecture .text-muted-foreground, #moe-page #backend .text-muted-foreground, #moe-page #ui-deps .text-muted-foreground, #moe-page #cta .text-muted-foreground {
  color: #a7aeb9;
}

#moe-page #moe-hero .bg-muted, #moe-page #features .bg-muted, #moe-page #trilogy .bg-muted, #moe-page #powers .bg-muted, #moe-page #moe-use-cases .bg-muted, #moe-page #easy-access .bg-muted, #moe-page #experience .bg-muted, #moe-page #architecture .bg-muted, #moe-page #backend .bg-muted, #moe-page #ui-deps .bg-muted, #moe-page #cta .bg-muted {
  background-color: #4139634a;
}

#moe-page #moe-hero .from-background, #moe-page #features .from-background, #moe-page #trilogy .from-background, #moe-page #powers .from-background, #moe-page #moe-use-cases .from-background, #moe-page #easy-access .from-background, #moe-page #experience .from-background, #moe-page #architecture .from-background, #moe-page #backend .from-background, #moe-page #ui-deps .from-background, #moe-page #cta .from-background {
  background: #313131;
}

#moe-page #moe-hero .bg-background, #moe-page #features .bg-background, #moe-page #trilogy .bg-background, #moe-page #powers .bg-background, #moe-page #moe-use-cases .bg-background, #moe-page #easy-access .bg-background, #moe-page #experience .bg-background, #moe-page #architecture .bg-background, #moe-page #backend .bg-background, #moe-page #ui-deps .bg-background, #moe-page #cta .bg-background {
  color: #9b9b9b;
  background-color: #2d2d2d;
}

#moe-page #moe-hero .bg-card, #moe-page #features .bg-card, #moe-page #trilogy .bg-card, #moe-page #powers .bg-card, #moe-page #moe-use-cases .bg-card, #moe-page #easy-access .bg-card, #moe-page #experience .bg-card, #moe-page #architecture .bg-card, #moe-page #backend .bg-card, #moe-page #ui-deps .bg-card, #moe-page #cta .bg-card {
  background-color: #181818;
}

#moe-page #moe-hero svg, #moe-page #features svg, #moe-page #trilogy svg, #moe-page #powers svg, #moe-page #moe-use-cases svg, #moe-page #easy-access svg, #moe-page #experience svg, #moe-page #architecture svg, #moe-page #backend svg, #moe-page #ui-deps svg, #moe-page #cta svg {
  stroke: #6455a3;
}

#moe-page #moe-hero code, #moe-page #features code, #moe-page #trilogy code, #moe-page #powers code, #moe-page #moe-use-cases code, #moe-page #easy-access code, #moe-page #experience code, #moe-page #architecture code, #moe-page #backend code, #moe-page #ui-deps code, #moe-page #cta code {
  color: #c9c9c9;
}

#moe-page #moe-hero .text-foreground, #moe-page #features .text-foreground, #moe-page #trilogy .text-foreground, #moe-page #powers .text-foreground, #moe-page #moe-use-cases .text-foreground, #moe-page #easy-access .text-foreground, #moe-page #experience .text-foreground, #moe-page #architecture .text-foreground, #moe-page #backend .text-foreground, #moe-page #ui-deps .text-foreground, #moe-page #cta .text-foreground {
  color: #8874dd;
}

#moe-page #moe-hero .from-muted\/30, #moe-page #features .from-muted\/30, #moe-page #trilogy .from-muted\/30, #moe-page #powers .from-muted\/30, #moe-page #moe-use-cases .from-muted\/30, #moe-page #easy-access .from-muted\/30, #moe-page #experience .from-muted\/30, #moe-page #architecture .from-muted\/30, #moe-page #backend .from-muted\/30, #moe-page #ui-deps .from-muted\/30, #moe-page #cta .from-muted\/30 {
  --tw-gradient-from: hsl(var(--muted) / .3) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: #0000004d, #181818;
}

#moe-page #moe-banner {
  overflow: hidden;
}

#moe-page .moe-subtitle {
  margin-top: 28px;
  font-size: 30px;
  line-height: 33px;
}

#moe-page #moe-video-banner-1 {
  overflow: hidden;
}

#moe-page #moe-video-banner-1 .soi-logo {
  width: 250px;
}

#moe-page #moe-video-banner-1 .eva-bullet {
  width: 80%;
  margin-bottom: 40px;
}

#moe-page #moe-video-banner-1 .eva-bullet .eva-bul-icon {
  width: 60px;
  margin-top: -5px;
  margin-left: 2px;
  position: absolute;
}

#moe-page #moe-video-banner-1 .soi-ani-1 {
  zoom: .5;
  width: 700px;
  margin-top: -486px;
  position: absolute;
  left: 2%;
}

@media (min-width: 640px) {
  #moe-page #moe-video-banner-1 .soi-ani-1 {
    zoom: .85;
    left: 2%;
  }
}

@media (min-width: 1024px) {
  #moe-page #moe-video-banner-1 .soi-ani-1 {
    margin-top: -154px;
    left: calc(50% - 294px);
  }
}

#moe-page #moe-video-banner-1 .soi-ani-1 .ani-holder {
  z-index: 5;
  margin-top: -150px;
  position: absolute;
}

#moe-page #moe-video-banner-1 .soi-ani-1 .soi-color-2 {
  z-index: 1;
  width: 286px;
  position: absolute;
  top: 56px;
  left: 146px;
}

#moe-page #moe-video-banner-1 .soi-ani-1 .soi-color-3 {
  z-index: 2;
  width: 131px;
  position: absolute;
  top: 135px;
  left: 226px;
}

#moe-page #moe-video-banner-1 .soi-ani-1 .soi-eva {
  z-index: 3;
  width: 20px;
  position: absolute;
  top: 190px;
  left: 283px;
}

#moe-page #moe-video-banner-1 a {
  margin-left: 70px;
}

#moe-video {
  object-position: -345px 0;
}