/* Globle Css */
.style_5 .wheelspoke-main .wheelspoke-wrap{width: 600px; height: 600px; margin: 180px auto; border-radius: 380px;position: relative;}
/* Center Box */
.style_5 .wheelspoke-main .center-box{width: 320px; height: 320px; background: #fff; 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; z-index: 11; opacity: 1;}
.style_5 .wheelspoke-main .center-box .content-one .title{font-size: 24px; color: #000; margin: 0 0 10px;}
.style_5 .wheelspoke-main .center-box .content-one p{font-size: 15px; color: #000; margin: 0;}


/* Around Box */
.style_5 .wheelspoke-main .around-boxes{position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: transparent; border-radius: 50%; overflow: hidden;}
.style_5 .wheelspoke-main .around-boxes .box{height: 50%; background: #e9b346; border-radius: 0%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; left: 50%; top: 150px; transition: 0.5s;clip-path: polygon(100% 0 , 50% 100% , 0 0 ); transform-origin: 0;}
.style_5 .wheelspoke-main .around-boxes .box:nth-child(even){background: #337ca5;}
.style_5 .wheelspoke-main .around-boxes .box .content-one { height: 150px; width: 50%; border-radius: 100%; background: transparent; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; top: -90px;}
.style_5 .wheelspoke-main .around-boxes .box .icon{transition: 0.5s; transform:translateY(0);}
.style_5 .wheelspoke-main .around-boxes .box .content-one .icon img{max-width: 45px; width: 100%;}
.style_5 .wheelspoke-main .around-boxes .box .title { font-size: 18px; color: #fff; font-weight: 700; transition: 0.5s; transform:translateY(0);}
.style_5 .wheelspoke-main .around-boxes .box:before{content:''; height: 30px; width: 80px; left: 170px; top: 122px; transform-origin: 0; position: absolute; background: #fff; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transition: 0.5s;}

/* 2 Item */
.style_5.total-items2 .wheelspoke-main .around-boxes .box{clip-path: polygon(100% 0 , 50% 470% , 0 0 ); width: 140%; border-bottom: 3px solid #fff;}
.style_5.total-items2 .wheelspoke-main .around-boxes .box:before { left: 385px;}
.style_5.total-items2 .wheelspoke-main .around-boxes .box:nth-child(1) .content-one{ transform: rotate(calc(-72deg * 0)) }
.style_5.total-items2 .wheelspoke-main .around-boxes .box:nth-child(2) .content-one{ transform: rotate(calc(90deg * 2)) }

/* 3 Item */
.style_5.total-items3 .wheelspoke-main .around-boxes .box{width: 169%;}
.style_5.total-items3 .wheelspoke-main .around-boxes .box:before{left: 470px;}
.style_5.total-items3 .wheelspoke-main .around-boxes .box:nth-child(1) .content-one{ transform: rotate(calc(-72deg * 0)) }
.style_5.total-items3 .wheelspoke-main .around-boxes .box:nth-child(2) .content-one{ transform: rotate(calc(10deg * 1)) }
.style_5.total-items3 .wheelspoke-main .around-boxes .box:nth-child(3) .content-one{ transform: rotate(calc(-72deg * 2.55)) }

/* 4 Item */
.style_5.total-items4 .wheelspoke-main .around-boxes .box{width: 97%;}
.style_5.total-items4 .wheelspoke-main .around-boxes .box:before{left: 250px;}
.style_5.total-items4 .wheelspoke-main .around-boxes .box:nth-child(1) .content-one{ transform: rotate(calc(-72deg * 0)) }
.style_5.total-items4 .wheelspoke-main .around-boxes .box:nth-child(2) .content-one{ transform: rotate(calc(-72deg * 0)) }
.style_5.total-items4 .wheelspoke-main .around-boxes .box:nth-child(3) .content-one{ transform: rotate(calc(-72deg * 2.5)) }
.style_5.total-items4 .wheelspoke-main .around-boxes .box:nth-child(4) .content-one{ transform: rotate(calc(-72deg * 0)) }

/* 5 Item */
.style_5.total-items5 .wheelspoke-main .around-boxes .box{width: 70%;}
.style_5.total-items5 .wheelspoke-main .around-boxes .box:before{left: 170px; top: 122px;}
.style_5.total-items5 .wheelspoke-main .around-boxes .box:nth-child(1) .content-one{ transform: rotate(calc(-72deg * 0 / 0)) }
.style_5.total-items5 .wheelspoke-main .around-boxes .box:nth-child(2) .content-one{ transform: rotate(calc(-72deg * 1 / 0)) }
.style_5.total-items5 .wheelspoke-main .around-boxes .box:nth-child(3) .content-one{ transform: rotate(calc(-72deg * 2 / 0.777)) }
.style_5.total-items5 .wheelspoke-main .around-boxes .box:nth-child(4) .content-one{ transform: rotate(calc(-72deg * 3 / 1.18)) }
.style_5.total-items5 .wheelspoke-main .around-boxes .box:nth-child(5) .content-one{ transform: rotate(calc(-72deg * 4 / 0.404)) }

/* Effect */
.style_5 .wheelspoke-main .around-boxes .box:hover{box-shadow:inset 0 0 0 300px #00000042;}
.style_5 .wheelspoke-main .around-boxes .box:hover::before{animation: arrow-anim 1.2s infinite linear;}
.style_5 .wheelspoke-main .around-boxes .box:hover .icon, .style_5 .wheelspoke-main .around-boxes .box:hover .title{transform:translateY(-5px);}
@keyframes arrow-anim {
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(-0px);
    }
}

/* 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_5 .wheelspoke-main .wheelspoke-wrap{width: 390px; height: 390px; margin: 30px auto;}
    .style_5 .wheelspoke-main .center-box { width: 240px; height: 240px;}
    .style_5 .wheelspoke-main .center-box .content-one .title{font-size: 18px;}
    .style_5 .wheelspoke-main .center-box .content-one p { font-size: 12px; line-height: normal; }
    .style_5 .wheelspoke-main .around-boxes .box{top: 95px; height: 51%;}
    .style_5 .wheelspoke-main .around-boxes .box .content-one { height: 55px; top: -57px; gap: 8px; }
    .style_5 .wheelspoke-main .around-boxes .box .title{font-size: 15px;}
    .style_5 .wheelspoke-main .around-boxes .box .content-one .icon img { max-width: 28px; }
    .style_5 .wheelspoke-main .around-boxes .box:before{ height: 20px; width: 60px; top: 70px;}

    /* Item 5,4,3,2 */
    .style_5.total-items2 .wheelspoke-main .around-boxes .box:before { left: 240px; }
    .style_5.total-items3 .wheelspoke-main .around-boxes .box:before { left: 306px; }
    .style_5.total-items4 .wheelspoke-main .around-boxes .box:before{ left: 162px; }
    .style_5.total-items4 .wheelspoke-main .around-boxes .box{width: 99%;}
    .style_5.total-items4 .wheelspoke-main .around-boxes .box:before{ left: 162px; }
    .style_5.total-items5 .wheelspoke-main .around-boxes .box{width: 72%;}
    .style_5.total-items5 .wheelspoke-main .around-boxes .box:before { left: 108px; }
}
@media (max-width:480px){
    .style_5 .wheelspoke-main .wheelspoke-wrap{width: 260px; height: 260px; margin: 20px auto;}
    .style_5 .wheelspoke-main .center-box { width: 140px; height: 140px;}
    .style_5 .wheelspoke-main .center-box .content-one .title { font-size: 16px; margin: 0 0 4px; }
    .style_5 .wheelspoke-main .center-box .content-one p { font-size: 10px; line-height: 1; }
    .style_5 .wheelspoke-main .around-boxes .box .content-one {height: 55px; top: -30px; gap: 4px;}
    .style_5 .wheelspoke-main .around-boxes .box .title{font-size: 10px;}
    .style_5 .wheelspoke-main .around-boxes .box .content-one .icon img { max-width: 20px; }
    .style_5 .wheelspoke-main .around-boxes .box:before { height: 15px; width: 30px; top: 55px; }
    .style_5 .wheelspoke-main .around-boxes .box{top: 63px;}

    /* Item 5,4,3,2 */
    .style_5.total-items2 .wheelspoke-main .around-boxes .box:before { left: 168px; }
    .style_5.total-items3 .wheelspoke-main .around-boxes .box:before { left: 204px; }
    .style_5.total-items4 .wheelspoke-main .around-boxes .box:before{ left: 112px; }
    .style_5.total-items5 .wheelspoke-main .around-boxes .box:before {left: 79px;}
}