.counts {
          padding: 100px 0;
          background: linear-gradient(135deg, #0a192f 0%, #0d324d 50%, #112240 100%);
          color: #fff;
          position: relative;
          overflow: hidden;
        }

        .counts::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, rgba(0, 198, 255, 0.1) 0%, transparent 70%);
          animation: pulse 15s infinite linear;
        }

        @keyframes pulse {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        .counts .count-box {
          background: rgba(255, 255, 255, 0.05);
          backdrop-filter: blur(10px);
          border-radius: 20px;
          padding: 40px 20px;
          margin: 0 auto 30px auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8px 32px rgba(0, 20, 40, 0.4);
          transition: all 0.4s ease-in-out;
          position: relative;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.1);
          z-index: 1;
        }

        .counts .count-box::before {
          content: '';
          position: absolute;
          top: -2px;
          left: -2px;
          right: -2px;
          bottom: -2px;
          z-index: -1;
          background: linear-gradient(45deg, #00c6ff, #0072ff, #00c6ff);
          background-size: 400% 400%;
          border-radius: 20px;
          animation: gradientShift 3s ease infinite;
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .counts .count-box:hover::before {
          opacity: 0.3;
        }

        @keyframes gradientShift {
          0% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }
        }

        .counts .count-box:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 40px rgba(0, 200, 255, 0.3);
        }

        .counts .icon-wrapper {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          background: linear-gradient(145deg, rgba(0, 198, 255, 0.15), rgba(0, 114, 255, 0.15));
          box-shadow: 0 5px 15px rgba(0, 198, 255, 0.2);
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
        }

        .counts .count-box:hover .icon-wrapper {
          transform: scale(1.1) rotate(5deg);
          box-shadow: 0 8px 25px rgba(0, 198, 255, 0.4);
        }

        .counts .icon-wrapper::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
          transform: rotate(45deg);
          transition: all 0.5s ease;
          opacity: 0;
        }

        .counts .count-box:hover .icon-wrapper::before {
          animation: shine 1.5s forwards;
        }

        @keyframes shine {
          0% {
            opacity: 0;
            top: -50%;
            left: -50%;
          }

          10% {
            opacity: 1;
          }

          100% {
            opacity: 0;
            top: 100%;
            left: 100%;
          }
        }

        .counts .count-box i {
          font-size: 2.2rem;
          color: #00c6ff;
          transition: 0.3s;
        }

        .counts .count-box:hover i {
          color: #fff;
          transform: scale(1.1);
        }

        .counts .count-box span {
          font-size: 2.8rem;
          font-weight: 800;
          display: block;
          color: #fff;
          margin-bottom: 10px;
          background: linear-gradient(to right, #00c6ff, #0072ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          transition: all 0.3s ease;
        }

        .counts .count-box:hover span {
          transform: scale(1.05);
        }

        .counts .count-box p {
          margin: 0;
          font-size: 1.1rem;
          font-weight: 500;
          color: #cfd8dc;
          letter-spacing: 0.5px;
          transition: 0.3s;
        }

        .counts .count-box:hover p {
          color: #fff;
        }

        /* Particle effect on hover */
        .count-box .particles {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: -1;
        }

        .particle {
          position: absolute;
          background: rgba(0, 198, 255, 0.6);
          border-radius: 50%;
          opacity: 0;
        }

        /* Responsive adjustments */
        @media (max-width: 991px) {
          .counts .count-box {
            padding: 30px 15px;
          }

          .counts .icon-wrapper {
            width: 70px;
            height: 70px;
          }

          .counts .count-box span {
            font-size: 2.2rem;
          }
        }

        @media (max-width: 767px) {
          .counts {
            padding: 70px 0;
          }

          .counts .count-box {
            max-width: 280px;
          }
        }