/* Background Particles */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
  }
  
  .particle {
    position: absolute;
    background: linear-gradient(to right, rgba(0, 200, 255, 0.2), rgba(0, 85, 170, 0.2));
    border-radius: 50%;
    animation: float 15s infinite ease-in-out;
  }
  
  @keyframes float {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 0.2;
    }
    25% {
      transform: translate(100px, 50px) scale(1.2);
      opacity: 0.3;
    }
    50% {
      transform: translate(50px, 100px) scale(0.8);
      opacity: 0.5;
    }
    75% {
      transform: translate(-50px, 50px) scale(1.1);
      opacity: 0.3;
    }
  }
  
  /* Service Cards Animation */
  .services-wrapper {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
  }
  
  .services-wrapper:hover {
    box-shadow: 0 15px 30px rgba(0, 85, 170, 0.2);
  }
  
  .services-icon {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
  }
  
  .services-wrapper:hover .services-icon {
    transform: scale(1.2) rotateY(180deg);
    color: #00c8ff;
  }
  
  /* Progress Bars Animation */
  .progress-bar {
    position: relative;
    overflow: hidden;
  }
  
  .progress-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30px;
    background: rgba(255, 255, 255, 0.3);
    animation: progress-shine 2s infinite linear;
    transform: skewX(-20deg);
  }
  
  @keyframes progress-shine {
    0% {
      left: -30px;
    }
    100% {
      left: 130%;
    }
  }
  
  /* Scroll Animations */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .animate-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Floating Animation for Skills Image */
  .floating-animation {
    animation: floating 6s infinite ease-in-out;
  }
  
  @keyframes floating {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }
  
  /* Pricing Plan Animations */
  .pricing-plan {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
  }
  
  .pricing-plan:hover {
    transform: translateY(-15px) !important;
  }
  
  .pricing-plan.highlighted {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0%,
    100% {
      box-shadow: 0 10px 30px rgba(0, 85, 170, 0.2);
    }
    50% {
      box-shadow: 0 15px 40px rgba(0, 85, 170, 0.4);
    }
  }
  
  /* CTA Section Animation */
  /* .cta-section {
    position: relative;
    overflow: hidden;
  }
  
  .cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  @keyframes gradient-shift {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }
  
  .cta-title {
    position: relative;
    display: inline-block;
  } */
  
  .cta-button {
    position: relative;
    overflow: hidden;
  }
  
  .cta-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.5s ease;
  }
  
  .cta-button:hover::after {
    left: 100%;
  }
  
  /* Form Animation */
  .form-row input,
  .form-row textarea {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .form-row input:focus,
  .form-row textarea:focus {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 85, 170, 0.1);
  }
  
  .submit-button {
    position: relative;
    overflow: hidden;
  }
  
  .submit-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.5s ease;
  }
  
  .submit-button:hover::after {
    left: 100%;
  }
  
  /* Digital Circuit Background Animation */
  .digital-circuit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.05;
    background-image: linear-gradient(to right, rgba(0, 200, 255, 0.5) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 85, 170, 0.5) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: circuit-move 20s infinite linear;
  }
  
  @keyframes circuit-move {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 50px 50px;
    }
  }
  
  /* Shapes Animation */
  .shapes-bg {
    animation: shapes-float 15s infinite ease-in-out;
  }
  
  @keyframes shapes-float {
    0%,
    100% {
      transform: translateY(0) translateX(0);
    }
    25% {
      transform: translateY(-10px) translateX(10px);
    }
    50% {
      transform: translateY(5px) translateX(-5px);
    }
    75% {
      transform: translateY(10px) translateX(5px);
    }
  }
  
  /* Number Counter Animation */
  .counter-animation {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  
  .counter-animation.active {
    transform: scale(1.2);
  }