/*Sync Animation*/
  .animation { clear: both; display: block;}

  /*DataFlow SVG*/
  #funnel {
    margin: 0 auto;
    width: 100%;
    height: 470px;
    background: url('img/syncimage.png') no-repeat;
  }

  .pipeline { position: absolute; background: url('img/pipeline.png') no-repeat; width: 98px; height: 112px; top: 177px; left: 187px;}

  @media screen and (max-width:640px) {
      .pipeline {background-size: contain; width:62px; top: 112px; left: 144px;}
      .flow {display: none;}
  }
  /* Data Transfer Animation */
/* Base positioning for flow elements */
.flow {
    --base-left: 232px;
    position: absolute;
  }

  /* Common animation properties */
  [class^="data"] {
    animation-duration: 2.4s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

/* Individual dot positioning and animations */
/* Center to right path */
.data1 {
    top: 150px;
    left: var(--base-left);
    animation: xAxis1 3s infinite 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Center to left path */
  .data2 {
    top: 151px;
    left: var(--base-left);
    animation: xAxis2 2.4s infinite 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data4 {
    top: 153px;
    animation: xAxis2 2.4s infinite 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data6 {
    top: 152px;
    left: var(--base-left);
    animation: xAxis2 2.4s infinite 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data8 {
    top: 153px;
    left: 231px;
    animation: xAxis2 2.4s infinite 1.0s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data10 {
    top: 150px;
    left: 233px;
    animation: xAxis2 2.4s infinite 1.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data12 {
    top: 150px;
    left: 230px;
    animation: xAxis2 2.4s infinite 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data14 {
    top: 151px;
    left: var(--base-left);
    animation: xAxis2 2.4s infinite 1.75s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Center to right path */
  .data3 {
    top: 150px;
    left: var(--base-left);
    animation: xAxis3 2.4s infinite 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data5 {
    top: 153px;
    left: var(--base-left);
    animation: xAxis3 2.4s infinite 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data7 {
    top: 151px;
    left: 230px;
    animation: xAxis3 2.4s infinite 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data9 {
    top: 152px;
    left: 233px;
    animation: xAxis3 2.4s infinite 0.95s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data11 {
    top: 152px;
    left: 231px;
    animation: xAxis3 2.4s infinite 1.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data13 {
    top: 153px;
    left: var(--base-left);
    animation: xAxis3 2.4s infinite 1.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .data15 {
    top: 151px;
    left: 230px;
    animation: xAxis3 2.4s infinite 1.7s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Performance optimization */
  @media (prefers-reduced-motion: no-preference) {
    .flow {
      will-change: transform;
    }
  }

  /* Slight randomization for natural feel */
  .flow {
    animation-timing-function: cubic-bezier(0.4, 0.05, 0.2, 0.95);
  }


/* Animation assignments for vertical movement */
.data1::after { animation: yAxis1 3s infinite 0.25s; }
.data4::after { animation: yAxis1 2.4s infinite 0.5s; }
.data7::after { animation: yAxis1 2.4s infinite 0.7s; }
.data10::after { animation: yAxis1 2.4s infinite 1.25s; }
.data13::after { animation: yAxis1 2.4s infinite 1.45s; }

.data2::after { animation: yAxis2 2.4s infinite 0.25s; }
.data6::after { animation: yAxis2 2.4s infinite 0.75s; }
.data8::after { animation: yAxis2 2.4s infinite 1.0s; }
.data12::after { animation: yAxis2 2.4s infinite 1.5s; }
.data14::after { animation: yAxis2 2.4s infinite 1.75s; }

.data3::after { animation: yAxis3 2.4s infinite 0.24s; }
.data5::after { animation: yAxis3 2.4s infinite 0.45s; }
.data9::after { animation: yAxis3 2.4s infinite 1.0s; }
.data11::after { animation: yAxis3 2.4s infinite 1.24s; }
.data15::after { animation: yAxis3 2.4s infinite 1.75s; }

.flow::after {
    --dot-size: 4px;
    --primary-color: #00A0FF;
    --secondary-color: #177CB8;
    --glow-color: rgba(0, 160, 255, 0.4);

    content: '';
    display: block;
    width: var(--dot-size);
    height: var(--dot-size);

    /* Modern gradient background */
    background: radial-gradient(
      circle at center,
      var(--primary-color) 0%,
      var(--primary-color) 60%,
      rgba(0, 160, 255, 0.8) 100%
    );

    /* Rounded shape */
    border-radius: 50%;

    /* Glow effect */
    box-shadow:
      0 0 2px var(--glow-color),
      0 0 4px var(--glow-color),
      0 0 6px var(--glow-color);

    /* Smooth transitions */
    transition: transform 0.2s ease;
  }


  /* Secondary color variation */
  .data2::after,
  .data6::after,
  .data10::after,
  .data14::after,
  .data5::after,
  .data9::after {
    --primary-color: #177CB8;
    --glow-color: rgba(23, 124, 184, 0.4);
    background: radial-gradient(
      circle at center,
      var(--primary-color) 0%,
      var(--primary-color) 60%,
      rgba(23, 124, 184, 0.8) 100%
    );
  }