.container {
      position: relative;
      height: 300px;
      margin: 30px auto;
      width: 65%;
    }

    .container ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .container ul li img {
      width: 100%;
      border-radius: 10px;
    }

    .left, .right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: white;
      color: #0000ff;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      border: none;
    }

    .left::before, .right::before {
      content: "";
      position: absolute;
      inset: -2px;
      z-index: -1;
      background: linear-gradient(45deg, #0000ff, #00ccff);
      border-radius: 50%;
    }

    .left i, .right i {
      color: white;
    }

    .progress-circle {
      position: relative;
      width: 100px;
      height: 100px;
    }

    .progress-circle svg {
      transform: rotate(-90deg);
    }

    .progress-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }