.swiper {
      width: 100%;
      padding: 30px 0;
    }

    .swiper-slide {
      display: flex;
      height: 100%;
      gap: 30px;
    }

    .leftWrap,
    .rightWrap {
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 40px;
    }

    .leftWrap .Box,
    .rightWrap .Box {
      box-shadow: 0px 0px 14px 0px #FFFFFF73 inset;
      border-radius: 24px;
      padding: 20px;
      color: #FFFFFF;
    }

    .leftWrap .Box h6,
    .rightWrap .Box h6 {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .leftWrap .Box p,
    .rightWrap .Box p {
      font-size: 16px;
      font-weight: 600;
    }

    .animateCircle {
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      /* IMPORTANT */
    }

    .rightWrap {
      width: 30%;
    }



    .circle-wrapper {
      position: relative;
      width: 600px;
      height: 600px;
      margin: 0 auto;
      padding: 20px;
    }

    .circle-wrapper::before {
      border-radius: 50%;
      border: 2px solid transparent;
      background: linear-gradient(#000, #000) padding-box, linear-gradient(90deg, rgba(252, 190, 8, 1) 0%, rgba(224, 87, 35, 1) 52%, rgba(91, 142, 183, 1) 100%) border-box;
      background-clip: padding-box, border-box;
      content: '';
      position: absolute;
      inset: 0;
      filter: blur(1px);
    }

    @keyframes rotateAnti {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(-360deg);
        /* anti-clockwise */
      }
    }

    @keyframes rotateClock {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .circle {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(90deg, rgba(85, 145, 190, 1) 0%, rgba(238, 81, 20, 1) 50%, rgba(253, 197, 7, 1) 100%);
      position: relative;
      box-shadow: 0px 0px 45px 5px #725707;
      border: 2px solid #F2B90E;

      /* ✅ rotate circle */
      animation: rotateAnti 20s linear infinite;
    }

    /* SEPARATOR LINES */
    .sep {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      /* thickness */
      height: 50%;
      /* radius length */
      background: rgba(255, 255, 255, 0.2);
      /* line color */
      transform-origin: bottom center;
    }

    .sep::after {
      content: attr(data-label);
      position: absolute;
      bottom: 130px;
      /* move text outside circle */
      left: 50%;
      transform: rotate(-56deg);
      width: 130px;
      line-height: 1.2;
      font-size: 16px;
      line-height: 1.2;
      color: #fff;
      text-align: center;
    }

.nineSegments .sep::after {
    bottom: 130px;
    left: -21px;
    transform: rotate(-67deg);
}

.nineSegments .sep:nth-of-type(8)::after {
    bottom: 79px;
    left: 74px;
    transform: rotate(-31deg);
}

    /* Rotate each separator (360 / 8 = 45deg) */
    .sep:nth-of-type(1) {
      transform: translate(-50%, -100%) rotate(0deg);
    }

    .sep:nth-of-type(2) {
      transform: translate(-50%, -100%) rotate(45deg);
    }

    .sep:nth-of-type(3) {
      transform: translate(-50%, -100%) rotate(90deg);
    }

    .sep:nth-of-type(4) {
      transform: translate(-50%, -100%) rotate(135deg);
    }

    .sep:nth-of-type(5) {
      transform: translate(-50%, -100%) rotate(180deg);
    }

    .sep:nth-of-type(6) {
      transform: translate(-50%, -100%) rotate(225deg);
    }

    .sep:nth-of-type(7) {
      transform: translate(-50%, -100%) rotate(270deg);
    }

    .sep:nth-of-type(8) {
      transform: translate(-50%, -100%) rotate(315deg);
    }

    /* Inner black circle */
    .center {
      position: absolute;
      width: 140px;
      height: 140px;
      background: #000;
      border-radius: 50%;
      top: 50%;
      left: 50%;

      /* ✅ keep center aligned */
      transform: translate(-50%, -50%);

      /* ✅ reverse rotation to cancel parent */

      animation: rotateClock 20s linear infinite;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      z-index: 1;
      box-shadow: 0px 0px 45px 2px #EDB50D;
    }
	.center p {
    	font-size: 16px;
    }
    .circle:hover {
      animation-play-state: paused;
    }

    .circle:hover .center {
      animation-play-state: paused;
    }

    /* Labels */
    .label {
      position: absolute;
      width: 120px;
      color: #fff;
      font-size: 10px;
      text-align: center;
      transform-origin: center;
    }

    .swiper-button-next,
    .swiper-button-prev {
      width: 50px;
      height: 50px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      /* remove default arrow */
      color: transparent;
    }

    /* your custom images */
    .swiper-button-prev {
      background-image: url('https://www.8dex.xyz/wp-content/uploads/2026/04/platformPrev.svg');
      position: absolute;
      left: 30% !important;
    }

    .swiper-button-next {
      background-image: url('https://www.8dex.xyz/wp-content/uploads/2026/04/platformNext.svg');
      position: absolute;
      right: 30% !important;
    }

    /* remove default icon */
    .swiper-button-next::after,
    .swiper-button-prev::after {
      display: none;
    }

    /* Positioning labels around circle */
    .l1 {
      top: 60px;
      left: 40px;
      transform: rotate(-25deg);
    }

    .l2 {
      top: 140px;
      left: 10px;
      transform: rotate(-65deg);
    }

    .l3 {
      bottom: 100px;
      left: 60px;
      transform: rotate(-110deg);
    }

    .l4 {
      bottom: 40px;
      left: 150px;
      transform: rotate(-160deg);
    }

    .l5 {
      bottom: 60px;
      right: 60px;
      transform: rotate(160deg);
    }

    .l6 {
      top: 140px;
      right: 10px;
      transform: rotate(65deg);
    }

    .l7 {
      top: 60px;
      right: 40px;
      transform: rotate(25deg);
    }

    .l8 {
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
    @media screen and (max-width: 1600px) {
    .circle-wrapper {
    width: 550px !important;
    height: 550px !important;
    }
    }


        @media screen and (max-width: 1450px) {
          .swiper-button-prev {
            left: 25% !important;
          }
          .swiper-button-next {
            right: 25% !important;
          }

    }
        
     @media screen and (max-width: 1280px)  {
     .nineSegments .sep:nth-of-type(8)::after {
            bottom: 76px;
            left: 40px;
            transform: rotate(-31deg);
        }
        .circle-wrapper {
        width: 450px !important;
        height: 450px !important;
    }
     }
        
     @media screen and (max-width: 1024px)  {
       .swiper-button-prev {
            left: 10% !important;
          }
          .swiper-button-next {
            right: 10% !important;
          }
          .circle-wrapper {
            width: 100% !important;
            height: 100% !important;
            aspect-ratio: 1 / 1;
          }
          .leftWrap, .rightWrap {
            display: none
          }
          .animateCircle {
            width: 100% !important;
          }
     }