.why {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);

  gap: clamp(55px, 8vw, 120px);

  background:

    radial-gradient(circle at 8% 12%, rgba(50, 105, 158, 0.42), transparent 34%),

    linear-gradient(130deg, #0b2848 0%, #173f6a 58%, #0d2d50 100%);

}

.why::before {

  content: "";

  position: absolute;

  top: -260px;

  left: -190px;

  z-index: -2;

  width: 520px;

  height: 520px;

  border: 1px solid rgba(189, 213, 74, 0.2);

  border-radius: 50%;

  box-shadow:

    0 0 0 58px rgba(189, 213, 74, 0.025),

    0 0 0 116px rgba(255, 255, 255, 0.018);

  animation: whyOrbit 12s ease-in-out infinite;

}

.why::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  opacity: 0.12;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);

  background-size: 72px 72px;

  mask-image: linear-gradient(90deg, transparent, black 55%, transparent);

  -webkit-mask-image: linear-gradient(90deg, transparent, black 55%, transparent);

}

.why > div {

  position: relative;

  z-index: 1;

}

.why > div:first-child::after {

  content: "";

  display: block;

  width: 78px;

  height: 3px;

  margin-top: 32px;

  background: linear-gradient(90deg, #bdd54a, transparent);

}

.why-list {

  position: relative;

  display: grid;

  gap: 14px;

}

.why-list::before {

  content: "";

  position: absolute;

  top: 48px;

  bottom: 48px;

  left: 55px;

  width: 1px;

  background: linear-gradient(transparent, rgba(189, 213, 74, 0.55), transparent);

}

.why-list::after {

  content: "";

  position: absolute;

  right: -250px;

  bottom: -280px;

  z-index: -1;

  width: 460px;

  height: 460px;

  pointer-events: none;

  border: 1px solid rgba(189, 213, 74, 0.18);

  border-radius: 50%;

  box-shadow:

    0 0 0 52px rgba(189, 213, 74, 0.025),

    0 0 0 104px rgba(255, 255, 255, 0.018);

  animation: whyOrbitTwo 14s ease-in-out infinite;

}

.why-list > div {

  --tilt-x: 0deg;

  --tilt-y: 0deg;

  --glow-x: 50%;

  --glow-y: 50%;

  isolation: isolate;

  position: relative;

  display: grid;

  grid-template-columns: 62px minmax(0, 1fr);

  gap: 8px 22px;

  align-items: center;

  padding: 25px 28px;

  border: 1px solid rgba(255, 255, 255, 0.13);

  background: rgba(255, 255, 255, 0.055);

  box-shadow: 0 15px 34px rgba(4, 17, 33, 0.12);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  transition:

    transform 0.18s ease,

    border-color 0.32s ease,

    background 0.32s ease,

    opacity 0.7s ease;

  transform-style: preserve-3d;

}

.why-list > div::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0;

  background: radial-gradient(

    circle at var(--glow-x) var(--glow-y),

    rgba(189, 213, 74, 0.18),

    transparent 42%

  );

  transition: opacity 0.3s ease;

}

.why-list b,

.why-list h3,

.why-list p {

  position: relative;

  z-index: 1;

}

.why-list > div:hover {

  transform: perspective(850px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))

    translate3d(7px, -2px, 0);

  border-color: rgba(189, 213, 74, 0.58);

  background: rgba(255, 255, 255, 0.09);

}

.why-list > div:hover::after {

  opacity: 1;

}

.why.why-ready > div:first-child {

  opacity: 0;

  transform: translateX(-42px);

  transition:

    opacity 0.85s ease,

    transform 0.85s cubic-bezier(0.22, 0.7, 0.15, 1);

}

.why.why-ready .why-list > div {

  opacity: 0;

  transform: translateX(55px);

}

.why.why-ready.is-in-view > div:first-child,

.why.why-ready.is-in-view .why-list > div {

  opacity: 1;

  transform: translateX(0);

}

.why.why-ready.is-in-view .why-list > div:nth-child(1) {

  transition-delay: 0.12s;

}

.why.why-ready.is-in-view .why-list > div:nth-child(2) {

  transition-delay: 0.26s;

}

.why.why-ready.is-in-view .why-list > div:nth-child(3) {

  transition-delay: 0.4s;

}

.why.why-ready.is-in-view .why-list > div:hover {

  transition-delay: 0s;

  transform: perspective(850px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))

    translate3d(7px, -2px, 0);

}

.why-list b {

  position: relative;

  z-index: 1;

  display: grid;

  width: 56px;

  height: 56px;

  place-items: center;

  border: 1px solid rgba(189, 213, 74, 0.52);

  border-radius: 50%;

  background: #11365d;

  color: #bdd54a;

  font-size: 15px;

  box-shadow: 0 0 0 7px rgba(189, 213, 74, 0.045);

}

.why-list h3 {

  margin: 0;

  color: white;

  font-size: 20px;

}

.why-list p {

  grid-column: 2;

  margin: 0;

  color: #bdcad6;

  font-size: 15px;

  line-height: 1.6;

}

@keyframes whyOrbit {

  0%,

  100% {

    transform: translate3d(0, 0, 0);

  }

  50% {

    transform: translate3d(28px, 22px, 0);

  }

}

@keyframes whyOrbitTwo {

  0%,

  100% {

    transform: translate3d(0, 0, 0);

  }

  50% {

    transform: translate3d(-24px, -18px, 0);

  }

}

@media (max-width: 800px) {

  .why {

    grid-template-columns: 1fr;

    gap: 42px;

  }

  .why-list::before {

    left: 45px;

  }

  .why-list > div {

    grid-template-columns: 52px minmax(0, 1fr);

    gap: 7px 17px;

    padding: 21px 20px;

  }

  .why-list > div:hover {

    transform: perspective(850px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))

      translateY(-4px);

  }

  .why-list b {

    width: 48px;

    height: 48px;

  }

  .why-list h3 {

    font-size: 18px;

  }

  .why-list p {

    font-size: 14px;

  }

}

@media (prefers-reduced-motion: reduce) {

  .why::before {

    animation: none;

  }

  .why-list > div {

    transition: none;

  }

  .why-list::after {

    animation: none;

  }

  .why.why-ready > div:first-child,

  .why.why-ready .why-list > div {

    opacity: 1;

    transform: none;

  }

}