.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1; }

#hero-bg-group-left {
  animation: hero-blob-left   14s ease-in-out infinite alternate; }

#hero-bg-group-center {
  animation: hero-blob-center 19s ease-in-out infinite alternate; }

#hero-bg-group-right {
  animation: hero-blob-right  11s ease-in-out infinite alternate; }

@keyframes hero-blob-left {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(40px, -28px); } }

@keyframes hero-blob-center {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(-25px, 22px); } }

@keyframes hero-blob-right {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(-35px, 30px); } }

@media (prefers-reduced-motion: reduce) {
  #hero-bg-group-left,
  #hero-bg-group-center,
  #hero-bg-group-right {
    animation: none; } }

.general {
  border-radius: 12px;
  background: linear-gradient(111deg, rgba(255, 255, 255, 0.08) 5.45%, rgba(25, 122, 233, 0.12) 56.05%, rgba(0, 159, 111, 0.02) 102.32%), #FFF;
  /* Card Shadow */
  box-shadow: 0px 0px 0px 1px rgba(2, 38, 88, 0.08), 0px 1px 2px 0px rgba(2, 38, 88, 0.06), 0px 2px 4px 0px rgba(2, 38, 88, 0.06), 0px 6px 12px 0px rgba(2, 38, 88, 0.06), 0px 24px 48px -8px rgba(2, 38, 88, 0.06); }
  .general__item {
    padding: 32px; }
    .general__item .image img {
      width: 44px; }

.connector {
  position: relative;
  display: grid;
  gap: 0.5rem;
  height: 200px;
  justify-content: center;
  top: -48px;
  overflow: hidden; }
  .connector > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1; }

#video-container .video-overview__thumbnail {
  box-shadow: 0px 0px 120px 16px rgba(0, 191, 134, 0.3), 0px 24px 48px 0px rgba(10, 23, 50, 0.6);
  z-index: 4; }

.lines path {
  stroke: #009F6F;
  stroke-width: 2;
  fill: none; }

.dots, .lines g {
  transform: translateX(calc(50% - 501px)); }

.dot {
  background-color: #009F6F;
  height: 8px;
  width: 8px;
  offset-anchor: center;
  border-radius: 50%;
  animation: 3s dot-move linear infinite;
  position: absolute;
  top: 0; }

.dot::after {
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 50%;
  inset: -2px;
  position: absolute;
  background-color: #009F6F;
  animation: glow 500ms linear infinite alternate;
  filter: blur(8px); }

.dot-1 {
  offset-path: url(#path-1);
  animation-delay: 0; }

.dot-2 {
  offset-path: url(#path-2);
  animation-delay: -700ms; }

.dot-3 {
  offset-path: url(#path-3);
  animation-delay: -2300ms; }

.dot-4 {
  offset-path: url(#path-4);
  animation-delay: -1350ms; }

.dot-5 {
  offset-path: url(#path-5);
  animation-delay: -250ms; }

.dot-6 {
  offset-path: url(#path-6);
  animation-delay: -1700ms; }

.dot-7 {
  offset-path: url(#path-7);
  animation-delay: -100ms; }

.dot-8 {
  offset-path: url(#path-8);
  animation-delay: -500ms; }

.dot-9 {
  offset-path: url(#path-9);
  animation-delay: -1900ms; }

.dot-10 {
  offset-path: url(#path-10);
  animation-delay: -650ms; }

.dot-11 {
  offset-path: url(#path-11);
  animation-delay: -2400ms; }

.dot-12 {
  offset-path: url(#path-12);
  animation-delay: -1200ms; }

@keyframes dot-move {
  0% {
    offset-distance: 0%; }
  100% {
    offset-distance: 100%; } }

@keyframes glow {
  0% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@media (max-width: 991px) {
  #path-1, #path-2, #path-11, #path-12,
  .dot-1, .dot-2, .dot-11, .dot-12 {
    display: none; } }

@media (max-width: 600px) {
  #path-3, #path-7,
  .dot-3, .dot-7 {
    display: none; } }

.txt-gradient-green {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; }

.hero-section .hero-title .txt-gradient-green {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; }

.hero-subtitle {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-top: 0.5rem;
  color: #ffffff;
  margin-left: auto;
  margin-right: auto; }

.feature-title {
  line-height: 1.2; }

@media (max-width: 768px) {
  .hero-section .hero-content {
    padding: 2rem 0;
    min-height: 60vh; }
  .hero-section .hero-title {
    font-size: 2.5rem;
    line-height: 1.2; }
  .hero-section .hero-features {
    flex-direction: column;
    align-items: center;
    gap: 1rem; }
  .hero-section .hero-actions {
    flex-direction: column;
    align-items: center;
    width: 100%; }
    .hero-section .hero-actions .btn {
      width: 100%;
      max-width: 280px; } }

@media (max-width: 480px) {
  .hero-section .hero-title {
    font-size: 2rem;
    line-height: 1.2; }
  .hero-section .hero-subtitle {
    font-size: 1rem; } }

.general {
  border-radius: 12px;
  background: linear-gradient(111deg, rgba(255, 255, 255, 0.08) 5.45%, rgba(25, 122, 233, 0.12) 56.05%, rgba(0, 159, 111, 0.02) 102.32%), #fff;
  box-shadow: 0px 0px 0px 1px rgba(2, 38, 88, 0.08), 0px 1px 2px 0px rgba(2, 38, 88, 0.06), 0px 2px 4px 0px rgba(2, 38, 88, 0.06), 0px 6px 12px 0px rgba(2, 38, 88, 0.06), 0px 24px 48px -8px rgba(2, 38, 88, 0.06); }
  .general__item {
    padding: 32px; }
    .general__item .image img {
      width: 44px; }

.general {
  border-radius: 12px;
  background: linear-gradient(111deg, rgba(255, 255, 255, 0.08) 5.45%, rgba(25, 122, 233, 0.12) 56.05%, rgba(0, 159, 111, 0.02) 102.32%), #fff;
  /* Card Shadow */
  box-shadow: 0px 0px 0px 1px rgba(2, 38, 88, 0.08), 0px 1px 2px 0px rgba(2, 38, 88, 0.06), 0px 2px 4px 0px rgba(2, 38, 88, 0.06), 0px 6px 12px 0px rgba(2, 38, 88, 0.06), 0px 24px 48px -8px rgba(2, 38, 88, 0.06); }
  .general__item {
    padding: 32px; }
    .general__item .image img {
      width: 44px; }

.connector {
  display: grid;
  gap: 0.5rem;
  height: 200px;
  top: -32px;
  overflow: hidden; }
  .connector > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1; }

#video-container .video-overview__thumbnail {
  box-shadow: 0px 0px 120px 16px rgba(0, 191, 134, 0.3), 0px 24px 48px 0px rgba(10, 23, 50, 0.6);
  z-index: 4; }

.lines path {
  stroke: #009f6f;
  stroke-width: 1;
  fill: none; }

.dots,
.lines g {
  transform: translateX(calc(50% - 501px)); }

.dot {
  background-color: #009f6f;
  height: 8px;
  width: 8px;
  offset-anchor: center;
  border-radius: 50%;
  animation: 3s dot-move linear infinite;
  position: absolute;
  top: 0; }

.dot::after {
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 50%;
  inset: -2px;
  position: absolute;
  background-color: #009f6f;
  animation: glow 500ms linear infinite alternate;
  filter: blur(8px); }

.dot-1 {
  offset-path: url(#path-1);
  animation-delay: 0; }

.dot-2 {
  offset-path: url(#path-2);
  animation-delay: -700ms; }

.dot-3 {
  offset-path: url(#path-3);
  animation-delay: -2300ms; }

.dot-4 {
  offset-path: url(#path-4);
  animation-delay: -1350ms; }

.dot-5 {
  offset-path: url(#path-5);
  animation-delay: -250ms; }

.dot-6 {
  offset-path: url(#path-6);
  animation-delay: -1700ms; }

.dot-7 {
  offset-path: url(#path-7);
  animation-delay: -100ms; }

.dot-8 {
  offset-path: url(#path-8);
  animation-delay: -500ms; }

.dot-9 {
  offset-path: url(#path-9);
  animation-delay: -1900ms; }

.dot-10 {
  offset-path: url(#path-10);
  animation-delay: -650ms; }

.dot-11 {
  offset-path: url(#path-11);
  animation-delay: -2400ms; }

.dot-12 {
  offset-path: url(#path-12);
  animation-delay: -1200ms; }

@keyframes dot-move {
  0% {
    offset-distance: 0%; }
  100% {
    offset-distance: 100%; } }

@keyframes glow {
  0% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@media (max-width: 991px) {
  #path-1,
  #path-2,
  #path-11,
  #path-12,
  .dot-1,
  .dot-2,
  .dot-11,
  .dot-12 {
    display: none; } }

@media (max-width: 600px) {
  #path-3,
  #path-7,
  .dot-3,
  .dot-7 {
    display: none; } }