@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");

:root {
  --bg-light: #edf1f5;
  --text-dark: #0e1a2b;
  --text-soft: #4d5c6f;
  --brand: #19cc8b;
  --brand-strong: #0fb172;
  --brand-soft: rgba(25, 204, 139, 0.18);
  --dark-1: #07172e;
  --dark-2: #0b223f;
  --dark-3: #102d52;
  --line-dark: rgba(126, 166, 206, 0.24);
  --line-light: rgba(14, 26, 43, 0.12);
  --shadow-soft: 0 16px 32px rgba(10, 21, 35, 0.08);
  --shadow-dark: 0 16px 36px rgba(4, 10, 22, 0.45);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Lato", "Segoe UI", sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
}
.seo-fallback {
  width: min(100% - 2.4rem, 860px);
  margin: 2rem auto;
  padding: 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(14, 26, 43, 0.14);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.seo-fallback h1 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.45rem;
}

.seo-fallback h2 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.08rem;
}

.seo-fallback p,
.seo-fallback li {
  color: var(--text-soft);
}

.seo-fallback-note {
  text-align: center;
  color: #3f5369;
  padding: 0.4rem 1rem 1rem;
  font-size: 0.82rem;
}


.k-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #e8edf3 0%, #eef2f6 44%, #e4e9ef 100%);
}

.k-container {
  width: min(100% - 2.4rem, 1180px);
  margin-inline: auto;
}

.k-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(126, 166, 206, 0.24);
  background: linear-gradient(120deg, rgba(5, 17, 34, 0.98), rgba(9, 32, 58, 0.96));
  backdrop-filter: blur(10px);
}

.k-nav {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.1rem;
}

.k-logo {
  text-decoration: none;
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}

.k-logo span {
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.k-logo small {
  margin-top: 0.28rem;
  font-size: 0.62rem;
  color: rgba(206, 229, 255, 0.75);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.k-menu {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.k-menu a,
.k-footer nav a {
  text-decoration: none;
  color: #e6f0ff;
  font-size: 0.86rem;
  font-weight: 600;
  transition: color 160ms ease;
}

.k-menu a:hover,
.k-footer nav a:hover {
  color: #48f3b2;
}

.k-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.k-lang button {
  border: 1px solid rgba(148, 184, 220, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #d7e8ff;
  font-size: 0.66rem;
  padding: 0.22rem 0.52rem;
  cursor: pointer;
}

.k-lang button.is-active {
  border-color: rgba(31, 219, 150, 0.7);
  background: rgba(25, 204, 139, 0.25);
  color: #fff;
}

.k-hero-wrap {
  position: relative;
  padding: 2.8rem 0 4rem;
  background: radial-gradient(circle at 50% 0%, rgba(26, 215, 182, 0.22), transparent 48%),
    linear-gradient(180deg, #061729 0%, #0b2746 62%, #0d2f53 100%);
  overflow: hidden;
  isolation: isolate;
}

.k-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.k-hero-bg-orbit {
  inset: -42% -24%;
  background:
    conic-gradient(from 0deg at 50% 52%, transparent 0deg, rgba(69, 199, 255, 0.22) 72deg, transparent 136deg, rgba(34, 234, 171, 0.26) 208deg, transparent 282deg, rgba(82, 147, 255, 0.2) 338deg, transparent 360deg),
    radial-gradient(circle at 22% 32%, rgba(25, 217, 160, 0.28), transparent 36%),
    radial-gradient(circle at 76% 62%, rgba(107, 196, 255, 0.24), transparent 44%);
  mix-blend-mode: screen;
  opacity: 0.74;
  animation: heroOrbit 24s linear infinite;
}

.k-hero-bg-lines {
  inset: -10% 0 -16% 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 173, 222, 0.24) 0 1px, transparent 1px 56px),
    linear-gradient(120deg, rgba(64, 229, 177, 0.14), transparent 58%),
    linear-gradient(300deg, rgba(93, 167, 255, 0.16), transparent 56%);
  background-size: 56px 100%, 100% 100%, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  opacity: 0.78;
  animation: heroLineDrift 9.5s ease-in-out infinite alternate;
}

.k-hero-bg-pulse {
  inset: -30% -8%;
  background:
    radial-gradient(circle at 50% 54%, rgba(41, 227, 164, 0.34) 0%, rgba(41, 227, 164, 0) 42%),
    radial-gradient(circle at 51% 56%, rgba(115, 206, 255, 0.24) 0%, rgba(115, 206, 255, 0) 54%);
  opacity: 0.82;
  animation: heroHeartbeat 4.2s ease-in-out infinite;
}

.k-hero-wrap::before {
  content: "";
  position: absolute;
  inset: -24% -12% -18% -12%;
  z-index: 1;
  background:
    radial-gradient(circle at 18% 20%, rgba(55, 221, 187, 0.22), transparent 42%),
    radial-gradient(circle at 82% 32%, rgba(99, 196, 255, 0.16), transparent 44%),
    radial-gradient(circle at 50% 65%, rgba(28, 131, 233, 0.16), transparent 48%);
  filter: blur(24px);
  animation: heroOrbDrift 14s ease-in-out infinite alternate;
}

.k-hero-wrap::after {
  content: "";
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: -42%;
  width: 28%;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(53, 240, 188, 0.24), transparent);
  transform: skewX(-12deg);
  animation: heroSweep 8.2s linear infinite;
}

.k-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(67, 117, 161, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 117, 161, 0.3) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  animation: heroGridFlow 22s linear infinite;
}

.k-hero-glow {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 54vw;
  min-width: 420px;
  height: 220px;
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(25, 204, 139, 0.44), rgba(25, 204, 139, 0));
  filter: blur(44px);
  pointer-events: none;
  animation: heroPulse 5.6s ease-in-out infinite;
}

.k-hero {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.28fr 0.92fr;
  gap: 1rem;
}

.k-dark-card {
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(8, 25, 46, 0.98), rgba(13, 42, 76, 0.94));
  box-shadow: var(--shadow-dark);
  color: #f2f7ff;
}

.k-hero-main,
.k-hero-side {
  padding: 1.2rem;
}

.k-badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(95, 187, 255, 0.34);
  background: rgba(84, 196, 255, 0.1);
  color: #cbecff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.66rem;
}

.k-hero-main h1 {
  margin: 0.72rem 0 0.62rem;
  line-height: 1.1;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  max-width: 15ch;
}

.k-hero-main h1 span,
.k-headline span {
  color: #2be39f;
}

.k-hero-main p {
  margin: 0;
  color: #cde0f7;
  max-width: 56ch;
}

.k-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.k-btn {
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.55rem 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 140ms ease;
}

.k-btn:hover {
  transform: translateY(-1px);
}

.k-btn-primary {
  color: #042717;
  background: linear-gradient(130deg, #23d88f, #11b775);
  box-shadow: 0 10px 24px rgba(14, 198, 124, 0.32);
}

.k-btn-ghost {
  border: 1px solid rgba(148, 190, 228, 0.42);
  color: #d7e9ff;
  background: rgba(255, 255, 255, 0.06);
}

.k-hero-side {
  display: grid;
  gap: 0.56rem;
  align-content: start;
}

.k-stat {
  border: 1px solid rgba(157, 188, 219, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.72rem;
}

.k-stat strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1;
}

.k-stat span {
  display: block;
  margin-top: 0.2rem;
  color: #d3e4fa;
  font-size: 0.76rem;
}

.k-note {
  border: 1px solid rgba(157, 188, 219, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.72rem;
}

.k-note h3 {
  margin: 0 0 0.3rem;
  font-size: 0.96rem;
}

.k-note p {
  margin: 0;
  color: #d5e6fb;
  font-size: 0.78rem;
}

.k-section {
  padding: 2.7rem 0;
}

.k-light {
  background: linear-gradient(180deg, #eef2f6 0%, #e8edf3 100%);
}

#funkcje {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 52% -10%, rgba(65, 214, 180, 0.22), transparent 54%),
    linear-gradient(180deg, #edf6ff 0%, #e8f2ff 52%, #e4eefb 100%);
}

#funkcje .k-features-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#funkcje .k-features-bg-orbit {
  inset: -40% -24%;
  background:
    conic-gradient(from 0deg at 50% 56%, transparent 0deg, rgba(69, 185, 255, 0.2) 74deg, transparent 140deg, rgba(41, 220, 165, 0.2) 214deg, transparent 286deg, rgba(109, 160, 255, 0.18) 340deg, transparent 360deg),
    radial-gradient(circle at 20% 36%, rgba(27, 210, 156, 0.2), transparent 38%),
    radial-gradient(circle at 78% 64%, rgba(95, 181, 255, 0.18), transparent 46%);
  opacity: 0.72;
  animation: heroOrbit 28s linear infinite;
}

#funkcje .k-features-bg-lines {
  inset: -8% 0 -14% 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(79, 129, 176, 0.16) 0 1px, transparent 1px 56px),
    linear-gradient(120deg, rgba(72, 220, 176, 0.13), transparent 58%),
    linear-gradient(300deg, rgba(103, 171, 255, 0.14), transparent 56%);
  background-size: 56px 100%, 100% 100%, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  opacity: 0.64;
  animation: heroLineDrift 10.5s ease-in-out infinite alternate;
}

#funkcje .k-features-bg-pulse {
  inset: -24% -10%;
  background:
    radial-gradient(circle at 50% 54%, rgba(42, 210, 162, 0.24) 0%, rgba(42, 210, 162, 0) 44%),
    radial-gradient(circle at 52% 56%, rgba(110, 195, 255, 0.18) 0%, rgba(110, 195, 255, 0) 56%);
  opacity: 0.72;
  animation: heroHeartbeat 4.6s ease-in-out infinite;
}

#funkcje::before {
  content: "";
  position: absolute;
  inset: -18% -10% -16% -10%;
  z-index: 1;
  background:
    radial-gradient(circle at 16% 30%, rgba(73, 202, 166, 0.2), transparent 40%),
    radial-gradient(circle at 86% 62%, rgba(108, 170, 252, 0.2), transparent 42%),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.45), transparent 46%);
  filter: blur(16px);
  animation: heroOrbDrift 13s ease-in-out infinite alternate;
}

#funkcje::after {
  content: "";
  position: absolute;
  top: -14%;
  bottom: -14%;
  left: -38%;
  width: 22%;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(81, 219, 180, 0.18), transparent);
  transform: skewX(-12deg);
  animation: heroSweep 9.6s linear infinite;
}

#funkcje .k-container {
  position: relative;
  z-index: 3;
}

#funkcje .k-white-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(65, 109, 151, 0.14);
  backdrop-filter: blur(2px);
}
#contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% -12%, rgba(39, 223, 180, 0.22), transparent 52%),
    linear-gradient(180deg, #07172e 0%, #0b2746 60%, #0d2f53 100%);
}

#contact .k-contact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#contact .k-contact-bg-orbit {
  inset: -40% -22%;
  background:
    conic-gradient(from 0deg at 50% 54%, transparent 0deg, rgba(74, 196, 255, 0.2) 72deg, transparent 138deg, rgba(41, 232, 173, 0.22) 214deg, transparent 286deg, rgba(94, 151, 255, 0.18) 338deg, transparent 360deg),
    radial-gradient(circle at 20% 34%, rgba(25, 215, 160, 0.24), transparent 38%),
    radial-gradient(circle at 78% 64%, rgba(107, 196, 255, 0.2), transparent 46%);
  mix-blend-mode: screen;
  opacity: 0.62;
  animation: heroOrbit 26s linear infinite;
}

#contact .k-contact-bg-lines {
  inset: -8% 0 -14% 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 173, 222, 0.18) 0 1px, transparent 1px 56px),
    linear-gradient(120deg, rgba(64, 229, 177, 0.12), transparent 58%),
    linear-gradient(300deg, rgba(93, 167, 255, 0.14), transparent 56%);
  background-size: 56px 100%, 100% 100%, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  opacity: 0.65;
  animation: heroLineDrift 10s ease-in-out infinite alternate;
}

#contact .k-contact-bg-pulse {
  inset: -26% -10%;
  background:
    radial-gradient(circle at 50% 56%, rgba(41, 227, 164, 0.24) 0%, rgba(41, 227, 164, 0) 44%),
    radial-gradient(circle at 51% 58%, rgba(115, 206, 255, 0.18) 0%, rgba(115, 206, 255, 0) 56%);
  opacity: 0.74;
  animation: heroHeartbeat 4.8s ease-in-out infinite;
}

#contact::before {
  content: "";
  position: absolute;
  inset: -20% -10% -16% -10%;
  z-index: 1;
  background:
    radial-gradient(circle at 18% 35%, rgba(20, 198, 138, 0.22), transparent 40%),
    radial-gradient(circle at 82% 65%, rgba(66, 137, 220, 0.2), transparent 42%),
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.18), transparent 48%);
  filter: blur(20px);
  animation: heroOrbDrift 14s ease-in-out infinite alternate;
}

#contact::after {
  content: "";
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: -40%;
  width: 24%;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(57, 236, 189, 0.22), transparent);
  transform: skewX(-12deg);
  animation: heroSweep 9s linear infinite;
}

#contact .k-container {
  position: relative;
  z-index: 3;
}

#contact .k-headline h2 {
  color: #eaf4ff;
}

#contact .k-headline p {
  color: #c6ddf6;
}

.k-headline {
  margin-bottom: 1rem;
  text-align: center;
}

.k-headline h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.9rem);
  line-height: 1.1;
  color: #0f2034;
}

.k-headline p {
  margin: 0.45rem auto 0;
  color: var(--text-soft);
  max-width: 68ch;
}

.k-ai-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: 0.9rem;
}

.k-card-grid,
.k-services-grid,
.k-tech-grid,
.k-process-grid,
.k-contact-grid {
  display: grid;
  gap: 0.78rem;
}

.k-card-grid,
.k-services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.k-tech-grid,
.k-process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.k-contact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.k-white-card {
  border: 1px solid var(--line-light);
  border-radius: 11px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 0.82rem;
}

.k-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(35, 216, 143, 0.2), rgba(35, 216, 143, 0.1));
  color: #0a8d5b;
  font-size: 0.7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.k-white-card h3,
.k-ai-process h3,
.k-contact-cta h3 {
  margin: 0.6rem 0 0.32rem;
  font-size: 0.95rem;
  color: #11253d;
}

.k-white-card p,
.k-contact-cta p,
.k-ai-process li {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

.k-ai-process {
  padding: 0.9rem;
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.k-ai-process h3,
.k-contact-cta h3 {
  color: #f3f8ff;
}

.k-ai-process ol {
  margin: 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.48rem;
}

.k-ai-process li {
  color: #cfdded;
}

.k-tech-item h3 {
  margin: 0;
  text-align: center;
  font-size: 1rem;
}

.k-step {
  display: grid;
  gap: 0.35rem;
}

.k-step-no {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(130deg, rgba(15, 177, 114, 0.2), rgba(15, 177, 114, 0.09));
  color: #0b8d5d;
  font-weight: 700;
  font-size: 0.74rem;
  display: grid;
  place-items: center;
}

.k-contact-grid a {
  color: #0f8f5f;
  text-decoration: none;
  font-weight: 700;
}

.k-contact-cta {
  padding: 0.9rem;
  color: #f2f8ff;
}

.k-contact-cta p,
.k-contact-cta h3 {
  color: #f2f8ff;
}

.k-footer {
  border-top: 1px solid rgba(126, 166, 206, 0.24);
  background: linear-gradient(120deg, rgba(5, 17, 34, 0.98), rgba(9, 32, 58, 0.96));
  color: #d6e7ff;
  padding: 1.1rem 0 0.9rem;
}

.k-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.k-footer nav {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.k-footer p {
  margin: 0.65rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(211, 230, 255, 0.72);
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 460ms ease, transform 460ms ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}


@keyframes heroGridFlow {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 0 52px, 52px 0;
  }
}

@keyframes heroOrbit {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.06);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes heroLineDrift {
  0% {
    transform: translate3d(-24px, 0, 0);
    opacity: 0.54;
  }

  100% {
    transform: translate3d(20px, 0, 0);
    opacity: 0.82;
  }
}

@keyframes heroHeartbeat {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.56;
  }

  35% {
    transform: scale(1.02);
    opacity: 0.8;
  }

  55% {
    transform: scale(0.99);
    opacity: 0.68;
  }

  72% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

@keyframes heroPulse {
  0%,
  100% {
    opacity: 0.58;
    transform: translateX(-50%) scale(0.96);
  }

  50% {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.06);
  }
}

@keyframes heroSweep {
  0% {
    left: -42%;
    opacity: 0;
  }

  8% {
    opacity: 0.85;
  }

  55% {
    opacity: 0.45;
  }

  100% {
    left: 118%;
    opacity: 0;
  }
}

@keyframes heroOrbDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(24px, -14px, 0) scale(1.07);
  }
}
@keyframes contactGlowShift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(18px, -14px, 0) scale(1.05);
  }
}

@keyframes contactGridDrift {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 46px 46px, -46px 46px;
  }
}
@media (max-width: 1120px) {
  .k-nav {
    grid-template-columns: auto 1fr;
  }

  .k-lang {
    display: none;
  }

  .k-hero,
  .k-ai-layout,
  .k-contact-grid {
    grid-template-columns: 1fr;
  }

  .k-card-grid,
  .k-services-grid,
  .k-tech-grid,
  .k-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .k-container {
    width: min(100% - 1.2rem, 1180px);
  }

  .k-nav {
    grid-template-columns: auto;
    justify-items: center;
    row-gap: 0.6rem;
    padding: 0.72rem 0;
  }

  .k-menu {
    gap: 0.56rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .k-card-grid,
  .k-services-grid,
  .k-tech-grid,
  .k-process-grid {
    grid-template-columns: 1fr;
  }

  .k-hero-main h1 {
    max-width: none;
  }

  .k-footer-inner {
    flex-direction: column;
  }
}