/* Globle Css */
.style_2 .wheelspoke-main .wheelspoke-wrap{width: 600px; height: 600px; margin: 100px auto; border: 0;position: relative;}
/* Center Box */
.style_2 .wheelspoke-main .center-box{width: 200px; height: 200px; background: #cbc246; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; display: flex; align-items: center; justify-content: center; z-index: 1; padding: 10px; text-align: center;  animation: centerboxanim 3s linear infinite;}
.style_2 .wheelspoke-main .center-box .content-one .title{font-size: 20px; color: #fff; margin:5px 0 0;}
.style_2 .wheelspoke-main .center-box .content-one .icon img{width: 100%; max-width: 60px;}

/* Around Box */
.style_2 .wheelspoke-main .around-boxes{position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: transparent; animation: spin 150s linear infinite; }
.style_2 .wheelspoke-main .around-boxes .box{ height:50%; width:calc(100% / 2 - 8.5%); position: absolute; clip-path: polygon(100% 0 , 50% 100% , 0 0 ); transform-origin:0; text-align:center; display:flex; align-items: flex-start; justify-content: center; font-size:20px; cursor: pointer; left: 50%; top: 150px; transition: 0.5s;}
.style_2 .wheelspoke-main .around-boxes .box .content-one { height: 100%; width: 100%; display: flex; align-items: center; flex-direction: column-reverse; justify-content: flex-end; padding-bottom: 50px; gap: 30px;}
.style_2 .wheelspoke-main .around-boxes .box .content-one .title { font-size: 14px; font-weight: 400; width: 100%; background: rgba(0, 0, 0, 0.15); padding: 10px 20px; margin-top: 0; height: 80px; line-height: 1; display: flex; align-items: center; justify-content: center; word-break: break-all;}
.style_2 .wheelspoke-main .around-boxes .box .content-one .icon img{width: 100%; max-width: 50px; animation: contentspin 150s linear infinite;}
.style_2 .wheelspoke-main .around-boxes .box .content-one:after { content: ''; position: absolute; height: 0; width: 0; z-index: -1; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 25px solid #9cbd32; display: none;}

/* Effect */
.style_2 .wheelspoke-main .around-boxes:hover{animation-play-state: paused;}
.style_2 .wheelspoke-main .around-boxes .box:hover .content-one .icon img{animation-play-state: paused;}
.style_2 .wheelspoke-main .around-boxes .box:hover{ box-shadow: inset 0 0 180px 0px #333333;}


/* Item Width */
.style_2.total-items4 .wheelspoke-main .around-boxes .box{width: 601px;}
.style_2.total-items5 .wheelspoke-main .around-boxes .box{width: 437px;}
.style_2.total-items6 .wheelspoke-main .around-boxes .box{width: 350px;}
.style_2.total-items7 .wheelspoke-main .around-boxes .box{width: 290px;}
.style_2.total-items8 .wheelspoke-main .around-boxes .box{width: 250px;}


@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@keyframes contentspin {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}
@keyframes centerboxanim {
    0% {
        transform:translate(-50%, -50%) scale(1);
    }
    50% {
        transform:translate(-50%, -50%) scale(1.03);
    }
    100% {
        transform:translate(-50%, -50%) scale(1);
    }
}

/* Responsive */
@media (max-width:999px) {
    /* Popup */
    .wheel-spoke-popup .wheel-spoke-popup-content{padding: 30px;}
    .wheel-spoke-popup .wheel-spoke-popup-content h2{font-size: 26px; margin: 0 0 20px;}
    .wheel-spoke-popup .wheel-spoke-popup-content p { font-size: 14px; }
}
@media (max-width:767px) {
    .style_2 .wheelspoke-main .wheelspoke-wrap{ width: 390px; height: 390px; margin: 50px auto;}
    .style_2 .wheelspoke-main .center-box{height: 130px; width: 130px;}
    .style_2 .wheelspoke-main .center-box .content-one .icon img{max-width: 40px;}
    .style_2 .wheelspoke-main .center-box .content-one .title{font-size: 13px;}
    .style_2 .wheelspoke-main .around-boxes .box { top: 98px; }
    .style_2 .wheelspoke-main .around-boxes .box .content-one{gap: 20px;}
    .style_2 .wheelspoke-main .around-boxes .box .content-one .icon img{max-width: 32px;}
    .style_2 .wheelspoke-main .around-boxes .box .content-one .title{height: 50px; font-size: 11px;}

    .style_2.total-items4 .wheelspoke-main .around-boxes .box { width: 391px; }
    .style_2.total-items5 .wheelspoke-main .around-boxes .box { width: 284px; }
    .style_2.total-items6 .wheelspoke-main .around-boxes .box { width: 226px; }
    .style_2.total-items7 .wheelspoke-main .around-boxes .box { width: 189px; }
    .style_2.total-items8 .wheelspoke-main .around-boxes .box { width: 163px; }
}
@media (max-width:480px) {
    .style_2 .wheelspoke-main .wheelspoke-wrap{ width: 260px; height: 260px; margin: 30px auto;}
    .style_2 .wheelspoke-main .center-box{height: 70px; width: 70px;}
    .style_2 .wheelspoke-main .center-box .content-one .icon img{max-width: 30px;}
    .style_2 .wheelspoke-main .center-box .content-one .title{font-size: 9px; line-height: 1;}
    .style_2 .wheelspoke-main .around-boxes .box { top: 65px; }
    .style_2 .wheelspoke-main .around-boxes .box .content-one{gap: 10px;}
    .style_2 .wheelspoke-main .around-boxes .box .content-one .icon img{max-width: 25px;}
    .style_2 .wheelspoke-main .around-boxes .box .content-one .title{height: 45px; font-size: 9px;}

    .style_2.total-items4 .wheelspoke-main .around-boxes .box { width: 260px; }
    .style_2.total-items5 .wheelspoke-main .around-boxes .box { width: 190px; }
    .style_2.total-items6 .wheelspoke-main .around-boxes .box { width: 151px; }
    .style_2.total-items7 .wheelspoke-main .around-boxes .box { width: 126px; }
    .style_2.total-items8 .wheelspoke-main .around-boxes .box { width: 109px; }
}