/* Globle Css */
.style_3 .wheelspoke-main .wheelspoke-wrap{width: 500px; height: 500px; margin: 180px auto; border-radius: 500px;position: relative;}
/* Center Box */
.style_3 .wheelspoke-main .center-box{ width: 210px; height: 210px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; outline: 11px solid #ffffff66; outline-offset: -10px; z-index: 100; animation:pulse linear infinite 2s, pulse-shadow linear infinite 2s;}
.style_3 .wheelspoke-main .center-box .content-one .title{font-size: 24px; color: #fff; margin: 0;}

/* Around Box */
.style_3 .wheelspoke-main .around-boxes{position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: transparent; counter-reset: item ;}
.style_3 .wheelspoke-main .around-boxes .box{width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 0; transform-origin: 0 calc(500px / 2); cursor: pointer; background-color: transparent !important;}
.style_3 .wheelspoke-main .around-boxes .box::before{ content: ''; height: 100%; width: 100%; background: #408779; position: absolute; border-radius: 100%; top: -50px; left: 0px; outline: 7px solid #ffffff66; outline-offset: -6px; transition: 0.5s; z-index: -1;}
.style_3 .wheelspoke-main .around-boxes .box .number { height: auto; width: auto; position: absolute; top: -39px; left: 70px; padding: 0; text-align: center; transition: 0.5s; z-index: -1; }
.style_3 .wheelspoke-main .around-boxes .box .number:after{ content:"0" counters(item, ".") ""; counter-increment: item; font-size: 30px; color: #fff; box-sizing: border-box; font-weight: 600;}
.style_3 .wheelspoke-main .around-boxes .box::after { content: ''; height: 100px; width: 2px; position: absolute; top: 158px; left: 90px; z-index: -1; transition: 0.5s;}
.style_3 .wheelspoke-main .around-boxes .box .content-one{ height: 90%; width: 90%; border-radius: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center;  outline: 7px solid #ffffff66; outline-offset: -6px;}
.style_3 .wheelspoke-main .around-boxes .box .content-one .icon img{width: 100%; max-width: 40px;}
.style_3 .wheelspoke-main .around-boxes .box .content-one .title{font-size: 18px; font-weight: 500; margin: 5px 0 0;}

/* Effect */
.style_3 .wheelspoke-main .around-boxes .box:hover:before{top: 0; animation: pulse-shadow infinite linear 2s;}
.style_3 .wheelspoke-main .around-boxes .box:hover .number{top: 20px;}
.style_3 .wheelspoke-main .around-boxes .box:hover::after{width: 5px;}
@keyframes pulse {
  0%{
    outline-offset: -10px;
  }
  50%{
    outline-offset: -15px;
    outline-width: 16px;
  }
  100%{
    outline-offset: -10px;
  }
}
@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

/* Responsive */
@media (max-width:999px) {
  .style_3 .wheelspoke-main .wheelspoke-wrap{margin: 150px auto;}
  .style_3 .wheelspoke-main .center-box { width: 190px; height: 190px; outline-width: 7px; outline-offset: -6px;}
  .style_3 .wheelspoke-main .center-box .content-one .title{font-size: 20px;}
  .style_3 .wheelspoke-main .wheelspoke-wrap { width: 450px; height: 450px; }
  .style_3 .wheelspoke-main .around-boxes .box{width: 160px; height: 160px; transform-origin: 0 calc(450px / 2);}
  .style_3 .wheelspoke-main .around-boxes .box .number:after{font-size: 26px;}
  .style_3 .wheelspoke-main .around-boxes .box::after { top: 148px; left: 78px; }
  .style_3 .wheelspoke-main .around-boxes .box .content-one .icon img{max-width: 35px;}
  .style_3 .wheelspoke-main .around-boxes .box .content-one .title{font-size: 14px;}
  .style_3 .wheelspoke-main .around-boxes .box::before{top: -40px;}
  .style_3 .wheelspoke-main .around-boxes .box .number { top: -33px; left: 65px; }
  @keyframes pulse {
  0%{
    outline-offset: -7px;
  }
  50%{
    outline-offset: -10px;
    outline-width: 10px;
  }
  100%{
    outline-offset: -7px;
  }
  }
}
@media (max-width:767px) {
  .style_3 .wheelspoke-main .wheelspoke-wrap { width: 300px; height: 300px; margin: 130px auto;}
  .style_3 .wheelspoke-main .center-box { width: 140px; height: 140px;}
  .style_3 .wheelspoke-main .center-box .content-one .title{font-size: 16px;}
  .style_3 .wheelspoke-main .around-boxes .box { width: 130px; height: 130px; transform-origin: 0 calc(300px / 2); }
  .style_3 .wheelspoke-main .around-boxes .box .number:after { font-size: 16px; }
  .style_3 .wheelspoke-main .around-boxes .box::before { top: -24px; }
  .style_3 .wheelspoke-main .around-boxes .box::after { top: 68px; left: 68px; }
  .style_3 .wheelspoke-main .around-boxes .box .content-one .icon img{max-width: 30px;}
  .style_3 .wheelspoke-main .around-boxes .box .content-one .title{font-size: 12px;}
  .style_3 .wheelspoke-main .around-boxes .box::before{top: -28px;}
  .style_3 .wheelspoke-main .around-boxes .box .number { top: -21px; left: 55px; }
  .style_3 .wheelspoke-main .around-boxes .box .content-one, .style_3 .wheelspoke-main .around-boxes .box::before{outline-width: 5px; outline-offset: -4px;}
}
@media (max-width:480px) {
  .style_3 .wheelspoke-main .wheelspoke-wrap { width: 200px; height: 200px; margin: 80px auto; }
  .style_3 .wheelspoke-main .center-box { width: 95px; height: 95px; outline-width: 5px; outline-offset: -4px;}
  .style_3 .wheelspoke-main .center-box .content-one .title{font-size: 10px;}
  .style_3 .wheelspoke-main .around-boxes .box { width: 90px; height: 90px; transform-origin: 0 calc(200px / 2); }
  .style_3 .wheelspoke-main .around-boxes .box .number:after { font-size: 10px; }
  .style_3 .wheelspoke-main .around-boxes .box::before { top: -24px; }
  .style_3 .wheelspoke-main .around-boxes .box::after { top: 68px; left: 43px; height: 50px; }
  .style_3 .wheelspoke-main .around-boxes .box .content-one .icon img{max-width: 22px;}
  .style_3 .wheelspoke-main .around-boxes .box .content-one .title{font-size: 9px;}
  .style_3 .wheelspoke-main .around-boxes .box::before { top: -19px; }
  .style_3 .wheelspoke-main .around-boxes .box .number { top: -17px; left: 29px; text-align: center; letter-spacing: -0.8px; width: 30px; }
  @keyframes pulse {
    0%{
      outline-offset: -5px;
    }
    50%{
      outline-offset: -7px;
      outline-width: 7px;
    }
    100%{
      outline-offset: -5px;
    }
  }
}