/*video styling*/

    /* Initial States - Hidden */
    .content-column > *,
    .video-column > *,
    .feature-item {
      opacity: 0;
    }

    /* Content Column Animations */
    .content-column.animate-in > .fade-in-up {
      animation: fadeInUp 0.8s ease-out 0.2s forwards;
    }

    .content-column.animate-in > .features-list > .feature-item:nth-child(1) {
      animation: slideInLeft 0.6s ease-out 0.4s forwards;
    }
    .content-column.animate-in > .features-list > .feature-item:nth-child(2) {
      animation: slideInLeft 0.6s ease-out 0.6s forwards;
    }
    .content-column.animate-in > .features-list > .feature-item:nth-child(3) {
      animation: slideInLeft 0.6s ease-out 0.8s forwards;
    }
    .content-column.animate-in > .features-list > .feature-item:nth-child(4) {
      animation: slideInLeft 0.6s ease-out 1s forwards;
    }

    .content-column.animate-in > .fade-in-up-delayed {
      animation: fadeInUp 0.8s ease-out 1.2s forwards;
    }

    /* Video Column Animations */
    .video-column.animate-in > div {
      animation: slideInRight 0.8s ease-out 0.4s forwards;
    }

    /* Background SVG Animations */
    #services-section.animate-in .absolute.top-10.left-10 {
      animation: floatSlow 6s ease-in-out 1s infinite;
    }

    #services-section.animate-in .absolute.bottom-20.right-20 {
      animation: wave 4s ease-in-out 1.2s infinite;
    }

    #services-section.animate-in .absolute.top-1\/3.right-1\/4 {
      animation: spinSlow 20s linear 1.4s infinite;
    }

    #services-section.animate-in .absolute.bottom-1\/4.left-1\/4 {
      animation: spin 15s linear 1.6s infinite;
    }

    /* Floating Elements Animations */
    #services-section.animate-in .absolute.top-20.right-1\/3 {
      animation: bubbleFloat 4s ease-in-out 1.8s infinite;
    }

    #services-section.animate-in .absolute.bottom-32.left-1\/3 {
      animation: bubbleBounce 3s ease-in-out 2s infinite;
    }

    #services-section.animate-in .absolute.top-1\/2.right-20 {
      animation: bubblePing 2s ease-in-out 2.2s infinite;
    }

    /* Border Animations */
    #services-section.animate-in .absolute.top-0 {
      animation: borderFlowTop 3s ease-in-out 2.4s infinite;
    }

    #services-section.animate-in .absolute.bottom-0 {
      animation: borderFlowBottom 3s ease-in-out 2.6s infinite;
    }

    /* Keyframe Animations */
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(5deg); }
    }

    @keyframes wave {
      0%, 100% { transform: translateX(0) rotate(0deg); }
      25% { transform: translateX(-5px) rotate(1deg); }
      75% { transform: translateX(5px) rotate(-1deg); }
    }

    @keyframes spinSlow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes bubbleFloat {
      0%, 100% { transform: translateY(0) translateX(0); }
      33% { transform: translateY(-15px) translateX(5px); }
      66% { transform: translateY(-8px) translateX(-3px); }
    }

    @keyframes bubbleBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    @keyframes bubblePing {
      0%, 100% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.5); opacity: 0.3; }
    }

    @keyframes borderFlowTop {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }

    @keyframes borderFlowBottom {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }

    /* Initial transforms */
    .fade-in-up {
      transform: translateY(30px);
    }

    .feature-item {
      transform: translateX(-30px);
    }

    .video-column > div {
      transform: translateX(30px);
    }

    /*stats circle*/ 
  
  /* Circle stroke transition */
  .progress-circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-linecap: round;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.3s linear;
  }

  /* Optional: subtle glow effect */
  .progress-circle-glow {
    filter: drop-shadow(0 0 6px rgba(0, 150, 136, 0.6));
  }

  .count-up {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
  }
